@cloudbase/weda-ui 3.1.2 → 3.1.6

package/dist/web/components/form/uploader/uploader.h5.js

@@ -10,7 +10,7 @@ const uploadPath = 'weda-uploader';
 /**
  * H5端
  */
-export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTypes, className, id, events, layout, defaultValue, single = false, requiredFlag = false, onChange, style, }) {
+export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTypes, className, id, events, layout, defaultValue, single = false, disabled = false, requiredFlag = false, onChange, style, }) {
     const cls = classNames({
         'weda-ui': true,
         'weui-cells': true,
@@ -123,24 +123,23 @@ export function ImageUploaderH5({ title, maxUploadCount, maxSize = 10, acceptTyp
                         React.createElement("div", { className: "weui-uploader__file-content" },
                             progress,
                             "%")))),
-                showAdd && (React.createElement("div", { className: "weui-uploader__input-box" },
-                    React.createElement("input", { id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: true, onChange: (e) => {
-                            const files = [...e.target.files];
-                            if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
-                                weui.alert('请上传不超过10M的图片');
-                                return false;
-                            }
-                            if (files.length > finalMaxImgCount) {
-                                // 防止一下子选择过多文件
-                                weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
-                                return false;
-                            }
-                            if (fileIdList.length + files.length > finalMaxImgCount) {
-                                weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
-                                return false;
-                            }
-                            files.forEach((f) => uploadToTcb(f));
-                        } })))))));
+                showAdd && (React.createElement("div", { className: "weui-uploader__input-box" }, !disabled && (React.createElement("input", { id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: true, onChange: (e) => {
+                        const files = [...e.target.files];
+                        if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
+                            weui.alert('请上传不超过10M的图片');
+                            return false;
+                        }
+                        if (files.length > finalMaxImgCount) {
+                            // 防止一下子选择过多文件
+                            weui.alert(`最多只能上传${finalMaxImgCount}张图片，请重新选择`);
+                            return false;
+                        }
+                        if (fileIdList.length + files.length > finalMaxImgCount) {
+                            weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
+                            return false;
+                        }
+                        files.forEach((f) => uploadToTcb(f));
+                    } }))))))));
 }
 function SingleImage({ src, deleteBySrc }) {
     const [error, setError] = React.useState(false);

package/dist/web/components/form/uploader/uploader.pc.js

@@ -36,7 +36,7 @@ export function UploaderPC({ layout, className, id, style, title, tips, ...props
 }
 export function UploaderPCInner(props) {
     const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, value: defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
-    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, onChange, } = props;
+    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, disabled = false, onChange, } = props;
     // 上传中
     const [uploading, setUploading] = React.useState(false);
     //上传进度
@@ -146,13 +146,16 @@ export function UploaderPCInner(props) {
                         "\u4E0A\u4F20",
                         progress,
                         "%..."))))),
-            React.createElement("div", { className: `${CLASS_PREFIX}__input-box` }, ((!single && fileIDList.length < maxUploadCount) ||
+            React.createElement("div", { className: `${CLASS_PREFIX}__input-box` }, disabled ? (React.createElement("li", { className: "_weda-fn-upload-result__item wedatea2td-disabled" },
+                React.createElement("div", { className: "_weda-fn-upload-result__status" },
+                    React.createElement("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }),
+                    React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle)))) : (((!single && fileIDList.length < maxUploadCount) ||
                 (single && fileIDList.length < 1)) && ( // single 模式时，仅当数组为空时显示
             React.createElement(Upload, { ...extraProps, beforeUpload: beforeHandle },
                 React.createElement("li", { className: "_weda-fn-upload-result__item _weda-fn-upload-result__item--upload" },
                     React.createElement("div", { className: "_weda-fn-upload-result__status" },
                         React.createElement("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }),
-                        React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle)))))))));
+                        React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle))))))))));
 }
 export const TcbImage = (props) => {
     const { fileID, isZoom, ...rest } = props;

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

@@ -27,6 +27,21 @@
   margin: 5PX 0PX 5PX 0PX !important;
 }
 
+.weda-richText .bf-controlbar .control-item.button-indent-increase,
+.weda-richText .bf-controlbar .control-item.button-indent-decrease,
+.weda-richText .bf-controlbar .control-item[data-alignment='left'],
+.weda-richText .bf-controlbar .control-item[data-alignment='center'],
+.weda-richText .bf-controlbar .control-item[data-alignment='right'],
+.weda-richText .bf-controlbar .control-item[data-alignment='justify'],
+.weda-richText .bf-controlbar .control-item.link-editor-dropdown,
+.weda-richText .bf-controlbar .control-item[data-title='清除链接'] {
+  margin-top: 0 !important;
+}
+
+.weda-richText .weda-formcells__content .weui-cell_form {
+  padding-top: 0;
+}
+
 .weda-richText .headings-dropdown {
   min-width: auto !important;
 }
@@ -40,11 +55,6 @@
   min-width: auto !important;
 }
 
-.weda-richText .weda-formcells__content .weui-cell {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
 .weda-richText {
   width: 100%;
 }
@@ -89,5 +99,9 @@
 }
 
 .weda-richText .weda-formcells__content.weui-flex__item {
-  margin-right: 2.28571rem;
+  margin-top: 1.14286rem;
+}
+
+.weda-richText .bf-font-size-dropdown {
+  min-width: 4.14286rem;
 }

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

@@ -21,14 +21,13 @@ declare function RichText({ id, style, className, events, label, labelVisible, v
 declare namespace RichText {
     var defaultProps: {
         events: {};
-        style: {
-            width: string;
-        };
+        style: {};
         label: string;
         labelVisible: boolean;
         name: string;
         value: string;
         readOnly: boolean;
+        disabled: boolean;
         layout: string;
         requiredFlag: boolean;
         maxSize: number;

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

@@ -1,17 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useSetState } from '../../utils/useSetState';
 import classNames from '../../utils/classnames';
-import Editor, { convertEditorStateToHTML } from 'kedao';
-import { ContentUtils } from 'kedao/lib/utils';
+import Editor, { EditorState, convertEditorStateToHTML } from 'kedao';
+import { insertMedias, handleKeyCommand } from 'kedao/lib/utils';
 import { createStateFromContent } from 'kedao/lib/editor';
-import { getCloudInstance, getTempFileURL } from '../../utils/tcb';
+import { getCloudInstance } from '../../utils/tcb';
 import { message, Button, Input, Modal, Progress, Upload, Text, } from 'tea-component';
 import { v4 as uuidv4 } from 'uuid';
 import { defaultBase64 } from './const';
 import { renderDecorator } from '../form/renderDecorator';
 import { usePlatform } from '../../utils/platform';
 import './index.css';
+import styleM from './richtext.module.css';
 import { useSyncedRef } from '@react-hookz/web';
+import { useTempUrl } from '../../utils/use-cloud-id-temp-url';
 // 默认图片类型
 const IMAGE_TYPES = [
     'image/jpeg',
@@ -21,6 +23,36 @@ const IMAGE_TYPES = [
     'image/tiff',
     'image/svg+xml',
 ];
+const defaultControls = [
+    'undo',
+    'redo',
+    'separator',
+    'headings',
+    'separator',
+    'font-size',
+    'separator',
+    'line-height',
+    'letter-spacing',
+    'text-color',
+    'bold',
+    'italic',
+    'underline',
+    'strike-through',
+    'superscript',
+    'subscript',
+    'remove-styles',
+    'emoji',
+    'text-indent',
+    'text-align',
+    'list-ul',
+    'list-ol',
+    'blockquote',
+    'code',
+    'link',
+    'hr',
+    'media',
+    'clear',
+];
 export default function RichText({ 
 // 系统属性
 id, style, className, events, 
@@ -37,46 +69,84 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
     const isH5 = platform === 'h5';
     const subCls = classNames({
         'weui-cell': isH5,
-        'weui-cell_active': isH5,
+        // 'weui-cell_active': isH5,
         'weui-cell_form': isH5,
         'weui-cell_disabled': isH5 && disabled,
     });
+    const previousValueRef = useRef();
     const onDataChange = function (value) {
-        events.change && events.change({ value: value === '<p></p>' ? '' : value });
-        if (onChange) {
-            if (value === '<p></p>') {
-                onChange('');
-            }
-            else {
-                onChange(value);
+        if (previousValueRef.current !== value) {
+            events.change &&
+                events.change({ value: value === '<p></p>' ? '' : value });
+            if (onChange) {
+                if (value === '<p></p>') {
+                    onChange('');
+                }
+                else {
+                    onChange(value);
+                }
             }
         }
+        previousValueRef.current = value;
     };
     useEffect(() => {
         const state = createStateFromContent(initialValue, {});
         setEditorState(state);
     }, []);
-    const extendControls = [
-        {
-            key: 'richtext-uploader',
-            type: 'component',
-            component: (React.createElement(CustomUploader, { acceptTypes: acceptTypes, maxSize: maxSize, cloudPath: cloudPath, onChange: (url) => {
-                    const state = ContentUtils.insertMedias(latestEditorState.current, [
-                        { type: 'IMAGE', url },
-                    ]);
-                    setEditorState(state);
-                } })),
-        },
-    ];
+    const excludeControls = useMemo(() => {
+        const result = [
+            'media',
+            'fullscreen',
+            'line-height',
+            'letter-spacing',
+            'emoji',
+            'superscript',
+            'subscript',
+        ];
+        if (isH5) {
+            result.push('separator', 'undo', 'redo', 'blockquote', 'code', 'link', 'hr', 'list-ul', 'list-ol', 'hr', 'clear', 'text-indent', 
+            // 'font-size',
+            'headings', 'remove-styles', 'text-align');
+        }
+        return result;
+    }, [isH5]);
+    const extendControls = useMemo(() => {
+        if (!isH5) {
+            return [
+                {
+                    key: 'richtext-uploader',
+                    type: 'component',
+                    component: (React.createElement(CustomUploader, { acceptTypes: acceptTypes, maxSize: maxSize, cloudPath: cloudPath, onChange: (url) => {
+                            const state = insertMedias(latestEditorState.current, [
+                                { type: 'IMAGE', url },
+                            ]);
+                            setEditorState((curState) => {
+                                const currentSelection = curState.getSelection();
+                                EditorState.forceSelection(state, currentSelection);
+                                return state;
+                            });
+                        } })),
+                },
+            ];
+        }
+    }, [
+        acceptTypes,
+        maxSize,
+        cloudPath,
+        latestEditorState,
+        insertMedias,
+        setEditorState,
+        isH5,
+    ]);
     // 修改img显示逻辑
     const blockRenderFn = (contentBlock, { editor, editorState }) => {
         var _a;
         if (contentBlock.getType() === 'atomic') {
             const entityKey = contentBlock.getEntityAt(0);
-            if (entityKey) {
+            if (!entityKey) {
                 return null;
             }
-            const entity = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getEntity();
+            const entity = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getEntity(entityKey);
             if (entity.getType() === 'IMAGE') {
                 return {
                     component: RichTextImg,
@@ -87,12 +157,8 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
         }
     };
     const richTextEl = (React.createElement("div", { className: subCls },
-        React.createElement("div", { style: {
-                border: '1px solid #d1d1d1',
-                backgroundColor: '#fff',
-                ...style,
-            } },
-            React.createElement(Editor, { key: id, value: editorState, readOnly: readOnly, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
+        React.createElement("div", { style: style, className: styleM.richtextInner },
+            React.createElement(Editor, { key: id, value: editorState, readOnly: readOnly, disabled: disabled, language: "zh", blockRendererFn: blockRenderFn, onBlur: (s) => {
                     setEditorState(s);
                     const html = convertEditorStateToHTML(s, {});
                     onDataChange(html);
@@ -101,11 +167,10 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
                             content: '富文本长度过长，可能导致保存失败',
                         });
                     }
-                }, excludeControls: ['media', 'fullscreen'], 
+                }, controls: defaultControls, excludeControls: excludeControls, 
                 /** @ts-ignore jsx */
                 extendControls: extendControls, handleKeyCommand: (command, editState) => {
-                    const newState = ContentUtils.handleKeyCommand(editState, command);
-                    console.log(newState, editState, command);
+                    const newState = handleKeyCommand(editState, command);
                     if (newState) {
                         setEditorState(newState);
                         return true;
@@ -158,10 +223,8 @@ export const CustomUploader = (props) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("button", { role: "richtext", type: "button", "data-title": "\u5A92\u4F53\u4E0A\u4F20", className: "control-item button", onClick: () => setState({ visible: true }) },
-            React.createElement("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "file-image", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
-                React.createElement("path", { d: "M534 352V136H232v752h560V394H576a42 42 0 01-42-42zm-134 50c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm296 294H328.1c-6.7 0-10.4-7.7-6.3-12.9l99.8-127.2a8 8 0 0112.6 0l41.1 52.4 77.8-99.2a8.1 8.1 0 0112.7 0l136.5 174c4.1 5.2.4 12.9-6.3 12.9z", fill: "#e6f7ff" }),
-                React.createElement("path", { d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v216a42 42 0 0042 42h216v494z", fill: "#006eff" }),
-                React.createElement("path", { d: "M553.1 509.1l-77.8 99.2-41.1-52.4a8 8 0 00-12.6 0l-99.8 127.2a7.98 7.98 0 006.3 12.9H696c6.7 0 10.4-7.7 6.3-12.9l-136.5-174a8.1 8.1 0 00-12.7 0zM360 442a40 40 0 1080 0 40 40 0 10-80 0z", fill: "#006eff" }))),
+            React.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.6205 1.61428V3.60631L15.6105 3.6063L15.6105 5.1063L13.6205 5.10631V7.08572H12.1205V5.10633L10.1391 5.10635L10.139 3.60635L12.1205 3.60633V1.61428H13.6205ZM8.84998 2.38572H2.49536C1.94308 2.38572 1.49536 2.83343 1.49536 3.38572V11.6761V13.3857C1.49536 13.403 1.4958 13.4201 1.49666 13.4372C1.5019 13.5405 1.52282 13.6397 1.5571 13.7324C1.69808 14.1138 2.06497 14.3857 2.49536 14.3857H4.49757H4.76178H12.4954C13.0476 14.3857 13.4954 13.938 13.4954 13.3857V13.2088L13.4954 13.2088V11.0909L13.4954 11.0909V8.38572H11.9954V9.59579L10.2484 7.85452L9.71895 7.32678L9.18948 7.85452L6.4372 10.5979L5.03662 9.20183L4.50715 8.67408L3.97769 9.20183L2.99536 10.181V3.88572H8.84998V2.38572ZM2.99536 12.8857V12.2988L4.50715 10.792L5.37481 11.6568L4.14188 12.8857H2.99536ZM11.9954 12.8857H6.26667L9.71895 9.44465L11.9954 11.7137V12.8857Z", fill: "#6A6F7B" }))),
         React.createElement(Modal, { onClose: () => {
                 setState({ visible: false });
             }, visible: visible, maskClosable: true },
@@ -235,38 +298,28 @@ export const CustomUploader = (props) => {
                 React.createElement(Text, { theme: "weak" }, "/\u62D6\u62FD\u5230\u6B64\u533A\u57DF")))))),
             uploading && (React.createElement(Progress, { style: { marginTop: '10px' }, percent: percent })))));
 };
+const Img = React.memo(function Img(props) {
+    const { src, style, onError } = props;
+    const { data: realSrc, error } = useTempUrl(src);
+    const realstyle = useMemo(() => {
+        if (error) {
+            return { ...style, width: '80px' };
+        }
+        return style;
+    }, [error, style]);
+    return (React.createElement("img", { src: error ? defaultBase64 : realSrc, style: realstyle, onError: () => {
+            onError === null || onError === void 0 ? void 0 : onError();
+        } }));
+});
+const imgStyle = { maxWidth: '100%' };
 export const RichTextImg = ({ contentState, block }) => {
     const blockData = contentState.getEntity(block.getEntityAt(0)).getData();
     const { url } = blockData || {};
-    const [src, setSrc] = React.useState('');
-    const [width, setWidth] = React.useState('unset');
-    useEffect(() => {
-        const getSrc = async () => {
-            try {
-                if (url.includes('cloud://')) {
-                    const _src = await getTempFileURL(url);
-                    setSrc(_src || url);
-                }
-                else {
-                    setSrc(url);
-                }
-            }
-            catch (e) {
-                message.error({
-                    content: `显示图片失败：${e.message || '未知原因'}`,
-                });
-            }
-        };
-        getSrc();
-    }, [url]);
-    return (src && (React.createElement(React.Fragment, null,
+    return (url && (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "bf-media" },
             React.createElement("div", { draggable: "true", className: "bf-image", style: { float: 'left' } },
                 React.createElement("div", { style: { position: 'relative', display: 'inline-block' } },
-                    React.createElement("img", { src: src, key: url + Math.random(), style: { maxWidth: '100%', width }, onError: () => {
-                            setSrc(defaultBase64);
-                            setWidth('80px');
-                        } }),
+                    React.createElement(Img, { src: url, style: imgStyle }),
                     React.createElement("div", { className: "bf-pre-csize" }))),
             React.createElement("div", { style: {
                     clear: 'both',
@@ -278,13 +331,14 @@ export const RichTextImg = ({ contentState, block }) => {
 RichText.defaultProps = {
     // 系统属性
     events: {},
-    style: { width: '100%' },
+    style: {},
     // 组件属性
     label: '标题',
     labelVisible: true,
     name: 'formRichText',
     value: '',
-    readOnly: false,
+    readOnly: true,
+    disabled: true,
     layout: 'vertical',
     requiredFlag: false,
     maxSize: 10,

package/dist/web/components/richText/richtext.module.css

@@ -0,0 +1,5 @@
+.richtext_richtextInner__-9STf {
+  border: 0.07143rem solid #d1d1d1;
+  background-color: #fff;
+  width: 100%;
+}

package/dist/web/utils/tcb.d.ts

@@ -11,7 +11,11 @@ export function getTempFileURL(data: any): Promise<any>;
 /**
  * 云函数获取数据
  */
-export function callDataSource(param: any): Promise<any>;
+export function callDataSource(param: any, throwError?: boolean): Promise<any>;
+/**
+ * 云函数获取连接器数据
+ */
+export function callConnector(param: any, throwError?: boolean): Promise<any>;
 /**
  * 云API：获取用户自定义导航内容
  *  param

package/dist/web/utils/tcb.js

@@ -34,19 +34,42 @@ export async function getTempFileURL(data) {
 /**
  * 云函数获取数据
  */
-export async function callDataSource(param) {
+export async function callDataSource(param, throwError = false) {
     var _a, _b, _c;
-    const { params, dataSourceName, methodName } = param;
+    const { dataSourceName, methodName, params } = param;
     try {
         const res = await ((_c = (_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.callDataSource) === null || _c === void 0 ? void 0 : _c.call(_b, {
+            dataSourceName,
+            methodName,
             params,
+        }));
+        return res;
+    }
+    catch (error) {
+        console.error('callDataSource: ', error);
+        if (throwError)
+            throw error;
+        return {};
+    }
+}
+/**
+ * 云函数获取连接器数据
+ */
+export async function callConnector(param, throwError = false) {
+    var _a, _b, _c;
+    const { dataSourceName, methodName, params } = param;
+    try {
+        const res = await ((_c = (_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.callConnector) === null || _c === void 0 ? void 0 : _c.call(_b, {
             dataSourceName,
             methodName,
+            params,
         }));
         return res;
     }
     catch (error) {
-        console.error('错误', error);
+        console.error('callConnector: ', error);
+        if (throwError)
+            throw error;
         return {};
     }
 }

package/dist/web/utils/use-cloud-id-temp-url.d.ts

@@ -0,0 +1 @@
+export declare function useTempUrl(cloudId: string): import("swr").SWRResponse<any, any>;

package/dist/web/utils/use-cloud-id-temp-url.js

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+import { getTempFileURL } from './tcb';
+export function useTempUrl(cloudId) {
+    const prefix = 'tcb:cloud-id:temp-url';
+    const key = `${prefix}:${cloudId}`;
+    return useSWR(key, async () => {
+        if (!cloudId.startsWith('cloud://')) {
+            return cloudId;
+        }
+        const tempUrl = await getTempFileURL(cloudId);
+        return tempUrl;
+    });
+}