UNPKG

@tarojs/components

Version:
85 lines (84 loc) 2.5 kB
import { Component, h, Prop, Host } from '@stencil/core'; export class RichText { constructor() { this.renderNode = (node) => { if ('type' in node && node.type === 'text') { // unsupport Html Entries const content = (node.text || '').replace(/ /g, '\u00A0'); return content; } else if ('name' in node && node.name) { const { name, attrs, children } = node; const attributes = {}; let childList = []; if (attrs && typeof attrs === 'object') { for (const key in attrs) { const val = attrs[key]; if (key === 'style' && typeof val === 'string') { // stencil JSX style props only support object const styles = val .split(';') .map(item => item.trim()) .filter(item => item); const styleObj = {}; styles.forEach(item => { if (!item) return; const res = /(.+): *(.+)/g.exec(item); if (!res) return; const [, name, value] = res; const styleName = name.replace(/-([a-z])/g, (...args) => args[1].toUpperCase()); styleObj[styleName] = value; }); if (Object.keys(styleObj).length) { attributes.style = styleObj; } continue; } attributes[key] = val; } } if (children && children.length) { childList = children.map(node => this.renderNode(node)); } // @ts-ignore return h(name, attributes, childList); } return null; }; } render() { const { nodes, renderNode } = this; if (Array.isArray(nodes)) { return (h(Host, null, nodes.map(node => renderNode(node)))); } else { return h(Host, { innerHTML: nodes }); } } static get is() { return "taro-rich-text-core"; } static get properties() { return { "nodes": { "type": "string", "mutable": false, "complexType": { "original": "Nodes", "resolved": "ElementType[] | string", "references": { "Nodes": { "location": "local" } } }, "required": false, "optional": false, "docs": { "tags": [], "text": "" }, "attribute": "nodes", "reflect": false } }; } }