@cloudbase/weda-ui 3.5.0 → 3.5.1

package/dist/web/components/richText/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import './style';
+declare const _default: React.MemoExoticComponent<typeof RichText>;
+export default _default;
+declare function RichText({ id, style, className, events, label, labelVisible, value, readOnly, layout, disabled, requiredFlag, onChange, decorator, acceptTypes, initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }: {
+    id: any;
+    style: any;
+    className: any;
+    events: any;
+    label: any;
+    labelVisible: any;
+    value: any;
+    readOnly: any;
+    layout: any;
+    disabled: any;
+    requiredFlag: any;
+    onChange: any;
+    decorator?: any;
+    acceptTypes: any;
+    initialContent: any;
+    placeholder: any;
+    iconPack: any;
+    maxSize: any;
+    cloudPath: any;
+    visible: any;
+}): JSX.Element;
+declare namespace RichText {
+    var whyDidYouRender: boolean;
+    var defaultProps: WdRichTextProps;
+}
+export interface WdRichTextProps {
+    id?: string;
+    style?: any;
+    label?: string;
+    labelVisible?: boolean;
+    visible?: boolean;
+    layout?: string;
+    requiredFlag?: boolean;
+    decorator?: any;
+    initialContent?: string;
+    value?: string;
+    readOnly?: boolean;
+    placeholder?: string;
+    exteralPlugins?: Plugin[];
+    toolbar?: string | {
+        static: string;
+        popover?: string;
+    };
+    iconPack?: Record<string, string>;
+    languagePack?: Record<string, string>;
+    events?: any;
+    onChange?: (v: any) => void;
+    acceptTypes?: any[];
+    acceptAudioTypes?: any[];
+    acceptVideoTypes?: any[];
+    disabled?: boolean;
+    maxSize?: number;
+    name?: string;
+    cloudPath?: string;
+}

package/dist/web/components/richText/index.js

@@ -3,13 +3,13 @@ import React from 'react';
 import classNames from '../../utils/classnames';
 import { getTempFileURL } from '../../utils/tcb';
 import { v4 as uuidv4 } from 'uuid';
-import { LOAD_ERR_IMG_BASE64, RICH_TEXT_ICON_PACK } from '../../utils/constant';
-import { message } from 'tea-component';
-import { useEventListener, useResizeObserver } from '@react-hookz/web';
+import { LOAD_ERR_IMG_BASE64, RICH_TEXT_ICON_PACK, getWhitelist, } from '../../utils/constant';
 import { renderDecorator } from '../form/renderDecorator';
 import { usePlatform } from '../../utils/platform';
-import styleM from './richtext.module.css';
 import './style';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+// eslint-disable-next-line @typescript-eslint/no-var-requires, tree-shaking/no-side-effects-in-initialization
+const xss = require('xss');
 // 默认图片类型
 const IMAGE_TYPES = [
     'image/jpeg',
@@ -63,14 +63,16 @@ label, labelVisible, value, readOnly, layout, disabled, requiredFlag, onChange,
 // acceptAudioTypes,
 // acceptVideoTypes,
 initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
     const cls = classNames({
         'weda-ui': true,
         'weda-richText': true,
+        'weda-richText-web-not-vertical': !isH5 && layout !== 'vertical',
+        'weda-richText-web-vertical': !isH5 && layout === 'vertical',
         [className]: className,
     });
-    const platform = usePlatform();
-    const isH5 = platform === 'h5';
     const subCls = classNames({
         'weui-cell': isH5,
         // 'weui-cell_active': isH5,
@@ -79,13 +81,13 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
     });
     const [, setRandomId] = React.useState('');
     const [editorHeight, setEditorHeight] = React.useState(0);
-    const [editorWidth, setEditorWidth] = React.useState(0);
-    const [defaultValue, setDefaultValue] = React.useState('');
+    const [syncedValue] = useSyncValue(xss(value, getWhitelist()));
     const [currentMap, setCurrentMap] = React.useState({});
     const [toolbar, setToolbar] = React.useState(platform === 'h5' ? toolbarArrayH5.join(' ') : toolbarPC);
     const ref = React.useRef({});
     const editorDomRef = React.useRef(null);
     const toolbarDomRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     const cloudRef = React.useRef({
         cloudToHttpsMap: {},
     });
@@ -106,16 +108,18 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
         }
     };
     const isSizeAccept = (file) => {
+        var _a, _b;
         if (file.size > maxSize * 1024 * 1024) {
-            message.error({
-                content: `文件大小超过上限${maxSize}M`,
+            (_b = (_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.utils) === null || _b === void 0 ? void 0 : _b.showToast({
+                title: `文件大小超过上限${maxSize}M`,
+                icon: 'error',
             });
             return false;
         }
         return true;
     };
     const upload = async (file) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         const tcb = await ((_b = (_a = window === null || window === void 0 ? void 0 : window.app) === null || _a === void 0 ? void 0 : _a.cloud) === null || _b === void 0 ? void 0 : _b.getCloudInstance());
         try {
             const fileType = (_e = (_d = (_c = file === null || file === void 0 ? void 0 : file.name) === null || _c === void 0 ? void 0 : _c.split('.')) === null || _d === void 0 ? void 0 : _d.pop()) === null || _e === void 0 ? void 0 : _e.toLowerCase();
@@ -134,8 +138,9 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
             return src;
         }
         catch (e) {
-            message.error({
-                content: '上传图片失败' + e.message,
+            (_g = (_f = window === null || window === void 0 ? void 0 : window.$w) === null || _f === void 0 ? void 0 : _f.utils) === null || _g === void 0 ? void 0 : _g.showToast({
+                title: '上传图片失败',
+                icon: 'error',
             });
         }
     };
@@ -176,16 +181,19 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
                     static: toolbar,
                     popover,
                 },
-                initialContent: defaultValue || initialContent,
+                initialContent: syncedValue || initialContent,
                 placeholder: placeholder,
                 onCopy: (isSuccess) => {
+                    var _a, _b;
                     if (isSuccess) {
-                        message.success({
-                            content: '复制成功',
+                        (_b = (_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.utils) === null || _b === void 0 ? void 0 : _b.showToast({
+                            title: '复制成功',
+                            icon: 'success',
                         });
                     }
                 },
                 iconPack: iconPack,
+                BeaconAction: false,
             }, {
                 HeadingPlugin: {
                     levels: [1, 2, 3, 4, 5, 6],
@@ -204,13 +212,15 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
                     accept: acceptTypes.join(),
                     inline: true,
                     acceptFile: (file) => {
-                        let typeRegex = new RegExp(`^((${acceptTypes.join(')|(').replace('+', '\\+')}))$`);
+                        var _a, _b;
+                        let typeRegex = new RegExp(`^((${acceptTypes.join(')|(').replaceAll('+', '\\+')}))$`);
                         if (acceptTypes.join().includes('*')) {
                             typeRegex = new RegExp(`^image/.+$`);
                         }
                         if (!typeRegex.test(file.type)) {
-                            message.error({
-                                content: '文件格式不支持',
+                            (_b = (_a = window === null || window === void 0 ? void 0 : window.$w) === null || _a === void 0 ? void 0 : _a.utils) === null || _b === void 0 ? void 0 : _b.showToast({
+                                title: '文件格式不支持',
+                                icon: 'error',
                             });
                             return false;
                         }
@@ -232,18 +242,17 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
                 const map = cloudRef.current.cloudToHttpsMap || {};
                 Object.keys(map).forEach((key) => {
                     if (map[key]) {
-                        html = html.replace(`${map[key]}`.replace('&', '&'), `${key}`);
+                        html = html.replaceAll(`${map[key]}`.replaceAll('&', '&'), `${key}`);
                     }
                 });
                 onDataChange(html);
-                if (html.length > 32768) {
+                if (html.length > 262144) {
                     console.warn('富文本长度过长，可能导致保存失败，当前', html.length);
                 }
             });
             editor.on('resize', () => {
-                var _a, _b;
+                var _a;
                 setEditorHeight(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0);
-                setEditorWidth(((_b = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0);
             });
             ref.current.editor = editor;
             return () => {
@@ -264,8 +273,8 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
     }, [readOnly, disabled, ref.current.editor]);
     const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
     const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
-    let tempValue = (_b = (_a = (defaultValue || '')) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
-    const getSrc = async (img, startSetHtml) => {
+    let tempValue = (_b = (_a = (syncedValue || '')) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
+    const getSrc = async (img) => {
         const url = img.replace(regex, '$1');
         if (img.includes('cloud://')) {
             const newURL = await getTempFileURL(url);
@@ -274,41 +283,37 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
                 cloudRef.current.cloudToHttpsMap[url] = newURL;
             }
         }
-        if (startSetHtml) {
-            ref.current.editor.setHTML(tempValue);
-        }
     };
     React.useEffect(() => {
         if (ref.current.editor) {
             cloudRef.current.cloudToHttpsMap = {};
-            const imgs = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.match(regex);
+            const imgs = syncedValue === null || syncedValue === void 0 ? void 0 : syncedValue.match(regex);
             if (imgs && imgs.length > 0) {
-                imgs.forEach((img, index) => {
-                    const startSetHtml = index === imgs.length - 1;
-                    getSrc(img, startSetHtml);
-                });
+                (async () => {
+                    await Promise.all(imgs.map(async (img) => {
+                        await getSrc(img);
+                    }));
+                    ref.current.editor.setHTML(tempValue);
+                })();
             }
             else {
                 ref.current.editor.setHTML(tempValue);
             }
         }
-    }, [defaultValue, ref.current.editor]);
-    React.useEffect(() => {
-        var _a;
-        setEditorWidth(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0);
-    }, [style === null || style === void 0 ? void 0 : style.width, (_c = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth]);
+    }, [syncedValue, ref.current.editor]);
     React.useEffect(() => {
         var _a;
         setEditorHeight(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0);
-    }, [style === null || style === void 0 ? void 0 : style.height, (_d = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight]);
+    }, [style === null || style === void 0 ? void 0 : style.height, (_c = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight]);
     React.useEffect(() => {
-        if (value && previousValueRef.current !== value) {
-            setDefaultValue(value);
-        }
-        if (!value) {
-            setDefaultValue('');
+        var _a, _b, _c, _d;
+        if ((style === null || style === void 0 ? void 0 : style.height) && !isH5 && layout === 'vertical') {
+            const ele = (_c = (_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.parentNode) === null || _c === void 0 ? void 0 : _c.children;
+            if (ele && ele.length > 1) {
+                ele[1].style.height = `calc(100% - ${((_d = ele === null || ele === void 0 ? void 0 : ele[0]) === null || _d === void 0 ? void 0 : _d.clientHeight) || 0}px - ${labelVisible ? 10 : 0}px)`;
+            }
         }
-    }, [value]);
+    }, [style === null || style === void 0 ? void 0 : style.height, isH5, layout, labelVisible]);
     React.useEffect(() => {
         var _a;
         const map = currentMap;
@@ -317,7 +322,7 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
                 ((_a = events === null || events === void 0 ? void 0 : events.finishUploadAll) === null || _a === void 0 ? void 0 : _a.call(events, { value: map }));
         }
     }, [currentMap]);
-    const children = (_g = (_f = (_e = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.children;
+    const children = (_f = (_e = (_d = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.children;
     React.useEffect(() => {
         var _a;
         if (platform === 'h5' && children && children.length > 0) {
@@ -339,29 +344,29 @@ initialContent, placeholder, iconPack, maxSize, cloudPath, visible, }) {
         // pc表单输入类的组件采用的是table布局，需要重新计算max高度
         if (platform !== 'h5') {
             const basicDiv = (_a = editorDomRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ExEditor-basic');
-            if (basicDiv && (style === null || style === void 0 ? void 0 : style.height) && editorHeight) {
-                basicDiv.style.maxHeight = `calc(${style === null || style === void 0 ? void 0 : style.height} - ${editorHeight}px)`;
+            if (basicDiv) {
+                basicDiv.style.maxHeight =
+                    (style === null || style === void 0 ? void 0 : style.height) && editorHeight
+                        ? `calc(${style === null || style === void 0 ? void 0 : style.height} - ${editorHeight}px)`
+                        : '100%';
             }
         }
-    }, [style === null || style === void 0 ? void 0 : style.height, editorHeight, (_h = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _h === void 0 ? void 0 : _h.clientHeight]);
-    useEventListener(window, 'resize', () => {
-        var _a;
-        setEditorWidth(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0);
-    });
-    useResizeObserver(toolbarDomRef, () => {
-        var _a;
-        setEditorWidth(((_a = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0);
-    });
-    const richTextEl = (_jsx("div", { className: subCls, style: { height: '100%' }, children: _jsx("div", { className: styleM.richtextInner, style: { height: '100%' }, children: _jsxs("div", { className: "weda-richtext-container", id: id, children: [_jsx("div", { ref: toolbarDomRef, className: "weda-richtext-toolbar", role: "richtext" }), _jsx("div", { ref: editorDomRef, className: "weda-richtext-editor", style: {
+    }, [
+        style === null || style === void 0 ? void 0 : style.height,
+        editorHeight,
+        (_g = toolbarDomRef === null || toolbarDomRef === void 0 ? void 0 : toolbarDomRef.current) === null || _g === void 0 ? void 0 : _g.clientHeight,
+        platform,
+    ]);
+    const richTextEl = (_jsx("div", { className: subCls, style: { height: '100%' }, ref: containerRef, children: _jsx("div", { className: 'richtext-inner', style: { height: '100%' }, children: _jsxs("div", { className: "weda-richtext-container", id: id, children: [_jsx("div", { ref: toolbarDomRef, className: "weda-richtext-toolbar", role: "richtext" }), _jsx("div", { ref: editorDomRef, className: "weda-richtext-editor", style: {
                             height: editorHeight
                                 ? `calc(100% - ${editorHeight + 1}px)`
                                 : '100%',
-                            width: editorWidth ? `${editorWidth}px` : '100%',
+                            width: '100%',
                         } })] }) }) }));
     return renderDecorator(richTextEl, decorator)({
         id,
         className: cls,
-        style,
+        style: (style === null || style === void 0 ? void 0 : style.width) && !isH5 ? { ...style, maxWidth: style === null || style === void 0 ? void 0 : style.width } : style,
         label: labelVisible ? label : null,
         layout,
         multiCell: false,

package/dist/web/components/richText/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../style';

package/dist/web/components/richTextView/index.css

@@ -102,3 +102,7 @@
 .weda-RichTextView img {
   vertical-align: unset;
 }
+.weda-RichTextView em,
+.weda-RichTextView i {
+  font-style: italic;
+}

package/dist/web/components/richTextView/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import './style';
+export interface PropsType extends CommonPropsType {
+    value: string;
+}
+export default function RichTextView({ value, className, style, id, }: PropsType): JSX.Element;

package/dist/web/components/richTextView/index.js

@@ -2,11 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from '../../utils/classnames';
 import { getTempFileURL } from '../../utils/tcb';
-import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
+import { LOAD_ERR_IMG_BASE64, getWhitelist } from '../../utils/constant';
 import destr from 'destr';
 import './style';
+// eslint-disable-next-line @typescript-eslint/no-var-requires, tree-shaking/no-side-effects-in-initialization
+const xss = require('xss');
 export default function RichTextView({ value = '', className, style, id, }) {
-    const parseValue = destr(value);
+    const parseValue = xss(destr(value) || '', getWhitelist());
     const cls = classNames({
         'weda-ui': true,
         'weda-RichTextView': true,
@@ -17,28 +19,35 @@ export default function RichTextView({ value = '', className, style, id, }) {
     const iferror = `javascript:this.width='80';this.src='${LOAD_ERR_IMG_BASE64}';this.onerror=null`;
     let tempValue = (parseValue || '')
         .toString()
-        .replace(/<img /g, `<img onerror=${iferror} style="max-width:100%" `);
+        .replace(/<img style="/g, `<img style="max-width:100%;`)
+        .replace(/<img /g, `<img onerror=${iferror} `);
     const getSrc = async (img) => {
         const url = img.replace(regex, '$1');
         if (img.includes('cloud://')) {
             const newURL = await getTempFileURL(url);
             if (newURL) {
                 tempValue = tempValue.replace(new RegExp(url, 'g'), newURL);
-                setDisplayValue(tempValue);
             }
         }
     };
     useEffect(() => {
-        setDisplayValue(tempValue);
         try {
             const imgs = parseValue.match(regex);
             if (imgs && imgs.length > 0) {
-                imgs.forEach((img) => {
-                    getSrc(img);
-                });
+                (async () => {
+                    await Promise.all(imgs.map(async (img) => {
+                        await getSrc(img);
+                    }));
+                    setDisplayValue(tempValue);
+                })();
+            }
+            else {
+                setDisplayValue(tempValue);
             }
         }
-        catch (e) { }
+        catch (e) {
+            setDisplayValue(tempValue);
+        }
     }, [value]);
     return (displayValue && (_jsx("div", { className: cls, style: style, id: id, children: _jsx("div", { dangerouslySetInnerHTML: { __html: displayValue } }) })));
 }

package/dist/web/components/richTextView/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../style';

package/dist/web/components/scrollView/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import './style';
+export interface PropsType extends CommonPropsType {
+    scrollX?: boolean;
+    scrollY?: boolean;
+    scrollTop?: number;
+    scrollLeft?: number;
+    scrollIntoView?: string;
+    upperThreshold?: number;
+    lowerThreshold?: number;
+}
+export default function ScrollView({ id, scrollX, scrollY, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold, lowerThreshold, events, }: {
+    id: any;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    style: any;
+    scrollTop: any;
+    scrollLeft: any;
+    scrollIntoView: any;
+    className: any;
+    children: any;
+    upperThreshold?: number;
+    lowerThreshold?: number;
+    events: any;
+}): JSX.Element;

package/dist/web/components/scrollView/style.d.ts

@@ -0,0 +1 @@
+import '../style';

package/dist/web/components/share/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import '../style';
+import type { ButtonProps } from '../../components/button';
+import type { DataType } from '../../../configs/components/wxOpenApi/share';
+import type { CommonPropsType } from '../../types';
+export type ShareProps = CommonPropsType & DataType;
+declare const Share: (props: ButtonProps) => JSX.Element;
+export default Share;

package/dist/web/components/slot/index.d.ts

@@ -0,0 +1,6 @@
+export interface PropsType {
+    className?: string;
+    name: string;
+    compositeParent: any;
+}
+export default function Slot({ compositeParent, name, className }: PropsType): any;