98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { useWindowDimensions } from 'react-native';
|
|
import RenderHTML, { HTMLElementModel, HTMLContentModel } from 'react-native-render-html';
|
|
import { InputRenderer } from './html/input';
|
|
import { ButtonRenderer } from './html/button';
|
|
import { Cfg } from './html/action';
|
|
import { SvgRenderer } from './html/svg';
|
|
import { TouchRenderer } from './html/touch';
|
|
import { ScrollRenderer } from './html/scroll';
|
|
import { ImgRoundedRenderer } from './html/roundedimage';
|
|
import { ChartRenderer } from './html/chart';
|
|
import { IconRenderer } from './html/icon';
|
|
import { FabRenderer } from './html/fab';
|
|
import { cfg } from './lib/cfg';
|
|
import { BlockRenderer } from './html/block';
|
|
|
|
const customHTMLElementModels = {
|
|
'input' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'input',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'button' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'button',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'svg' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'svg',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'touch' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'touch',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'scroll' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'scroll',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'img' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'img',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'chart' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'chart',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'icon' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'icon',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'fab' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'fab',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
, 'block' : HTMLElementModel.fromCustomModel({
|
|
tagName: 'block',
|
|
contentModel: HTMLContentModel.block
|
|
})
|
|
};
|
|
|
|
const renderers = {
|
|
input: InputRenderer
|
|
, button: ButtonRenderer
|
|
, svg : SvgRenderer
|
|
, touch : TouchRenderer
|
|
, scroll : ScrollRenderer
|
|
, img : ImgRoundedRenderer
|
|
, chart : ChartRenderer
|
|
, icon : IconRenderer
|
|
, fab : FabRenderer
|
|
, block : BlockRenderer
|
|
};
|
|
|
|
const Html = (props:any) => {
|
|
const { width } = useWindowDimensions();
|
|
cfg.counterHtml++;
|
|
if(props?.action && typeof props?.action === 'object'){
|
|
Object.keys(props?.action).forEach((name:string)=>{
|
|
Cfg.addAction(name, props.action[name]);
|
|
})
|
|
}
|
|
|
|
useEffect(()=>{
|
|
(function(){
|
|
// console.log(cfg)
|
|
})();
|
|
},[cfg])
|
|
|
|
return (
|
|
<RenderHTML
|
|
contentWidth={width} // Ensure content adapts to available width
|
|
source={{ html: props && props.html ? props.html : `` }}
|
|
renderers={renderers}
|
|
customHTMLElementModels={customHTMLElementModels}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Html; |