@cloudbase/weda-ui 3.1.1 → 3.1.4

package/dist/web/components/form/select/index.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import * as _moment from 'moment';
-import { usePlatform, getWhereList } from '../../../utils/platform';
+import { usePlatform } from '../../../utils/platform';
 import SelectH5, { decodeIsoDatetime } from './h5';
 import classNames from '../../../utils/classnames';
-import { Select as TeaSelect, DatePicker, TimePicker, Cascader, ConfigProvider, } from 'tea-component';
+import { DatePicker, TimePicker, Cascader, ConfigProvider, } from 'tea-component';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import { getRegionTree, getAreaCode } from './region';
 import { renderDecorator } from '../renderDecorator';
 import YearPicker from './year';
-import { callDataSource, callWedaApi } from '../../../utils/tcb';
-import destr from 'destr';
 import { emptyObject } from '../../../utils/constant';
+import { PureSelectPc } from './dropdown-select/ui';
+import { useOptions } from './use-options';
+import { getRegionTree, getAreaCode } from './region';
 // @ts-ignore TODO: fix 与plugin构建阶段效果不同
 export const moment = (typeof _moment === 'function' ? _moment : _moment.default);
 export default function Select(props) {
@@ -70,89 +70,27 @@ function SelectPc({ where, dataSourceName, viewId, format, primaryField, enumNam
     const [region, setRegion] = React.useState(defaultRegion || undefined);
     const [mutiRegion, setMutiRegion] = React.useState(defaultMutiRegion != null ? defaultMutiRegion.split(',') : []);
     const [selectedValue, setSelectedValue] = React.useState(defaultValue);
-    const [option, setOption] = React.useState([]);
-    const [records, setRecords] = React.useState([]);
-    React.useEffect(() => {
-        // 筛选参数
-        const whereEffected = [].concat(getWhereList(where));
-        if ((format === 'father-son' || format === 'related') &&
-            dataSourceName &&
-            viewId) {
-            fetchData({
-                dataSourceName: dataSourceName,
-                viewId: viewId,
-                methodName: 'wedaGetRecords',
-                params: whereEffected,
-            });
-        }
-    }, [where]);
-    // 获取数据列表中主列字段，将其作为选项
-    React.useEffect(() => {
-        var _a;
-        if (records && records.length !== 0 && primaryField) {
-            const option = records.map((item) => {
-                return {
-                    label: item[primaryField] || item._id,
-                    value: item._id,
-                };
-            });
-            setOption(option);
-        }
-        else {
-            setOption([{ label: '', value: '' }]);
-            setSelectedValue('');
-            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: '' });
-        }
-    }, [records]);
-    // 获取数据源列表
-    const fetchData = async (param) => {
-        let pageNo = 1;
-        const pageSize = 200;
-        let records = [];
-        let total = 99999;
-        for (let index = 0; index < Math.floor(total / pageSize) + 1; index++) {
-            const data = await callDataSource({
-                dataSourceName: param.dataSourceName,
-                viewId: param.viewId,
-                methodName: param.methodName,
-                params: {
-                    pageNo: pageNo,
-                    pageSize: pageSize,
-                    where: param.params,
-                },
-            });
-            pageNo = pageNo + 1;
-            if (data === null || data === void 0 ? void 0 : data.records) {
-                total = (data === null || data === void 0 ? void 0 : data.total) || 0;
-                records = records.concat(data === null || data === void 0 ? void 0 : data.records);
-            }
-        }
-        if (records) {
-            setRecords(records);
-        }
-    };
-    React.useEffect(() => {
-        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
-        if (format === 'x-enum' && enumName) {
-            fetchEnumData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
-        }
-    }, [enumName]);
-    // 获取自定义选项集
-    const fetchEnumData = async (param) => {
-        var _a, _b, _c;
-        const data = await callWedaApi({
-            action: 'DescribeGeneralOptionsDetailList',
-            data: param,
-        });
-        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
-        const enumOption = config.map((item) => {
-            return {
-                label: item.value,
-                value: item.key,
-            };
-        });
-        setOption(enumOption);
+    let params = {
+        controlledValue: range,
     };
+    if (format === 'father-son' || format === 'related') {
+        params = {
+            format,
+            dataSourceName,
+            viewId,
+            where,
+            primaryField,
+            controlledValue: range,
+        };
+    }
+    else if (format === 'x-enum') {
+        params = {
+            format,
+            enumName,
+            controlledValue: range,
+        };
+    }
+    const [options] = useOptions(params);
     React.useEffect(() => {
         var _a, _b, _c, _d, _e;
         let hasChange = false;
@@ -179,6 +117,7 @@ function SelectPc({ where, dataSourceName, viewId, format, primaryField, enumNam
         }
         if (hasChange) {
             prevDefaultRef.current = {
+                defaultValue,
                 defaultDate,
                 defaultTime,
                 defaultRegion,
@@ -186,7 +125,7 @@ function SelectPc({ where, dataSourceName, viewId, format, primaryField, enumNam
             };
         }
     });
-    const regionTreeMode = React.useMemo(() => {
+    React.useEffect(() => {
         if (mode == 'region' || mode == 'mutiRegion') {
             if (regionData.length < 1) {
                 getAreaCode().then((value) => {
@@ -235,12 +174,12 @@ function SelectPc({ where, dataSourceName, viewId, format, primaryField, enumNam
     const createDropdown = () => {
         switch (mode) {
             case 'selector':
-                return (React.createElement("div", { "data-testid": "form-select" },
-                    React.createElement(TeaSelect, { matchButtonWidth: true, size: size, onChange: onDataChange, disabled: disabled, value: selectedValue, type: "simulate", appearance: "button", placeholder: placeholder, options: format === 'father-son' ||
-                            format === 'related' ||
-                            format === 'x-enum'
-                            ? option.map((i) => ({ text: i.label, value: i.value }))
-                            : range.map((i) => ({ text: i.label, value: i.value })) })));
+                return (React.createElement(PureSelectPc, { size: size, onChange: (value) => {
+                        var _a;
+                        onChange && onChange(value);
+                        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
+                        setSelectedValue(value);
+                    }, value: selectedValue, placeholder: placeholder, options: options }));
             case 'date': {
                 const now = moment();
                 const start = startDate

package/dist/web/components/form/select/use-options.d.ts

@@ -0,0 +1,26 @@
+declare type OptionItem = {
+    label: string;
+    value: string;
+};
+declare type IRelationFetchOptions = {
+    format: 'father-son' | 'related';
+    viewId: string;
+    dataSourceName: string;
+    where: unknown;
+    primaryField: string;
+    controlledValue: OptionItem[];
+};
+declare type IEnumFetchOptions = {
+    format: 'x-enum';
+    enumName: string;
+    controlledValue: OptionItem[];
+};
+export declare type IUseoptionsParams = (IRelationFetchOptions | IEnumFetchOptions | {
+    format?: string;
+    controlledValue: OptionItem[];
+}) & {
+    callWedaApi?: (params: any) => Promise<any> | any;
+    callDataSource?: (params: any) => Promise<any>;
+};
+export declare function useOptions(params: IUseoptionsParams): [options: OptionItem[]];
+export {};

package/dist/web/components/form/select/use-options.js

@@ -0,0 +1,103 @@
+import { useAsync, useDeepCompareEffect } from '@react-hookz/web';
+import destr from 'destr';
+import { useCallback, useEffect } from 'react';
+import { getWhereList } from '../../../utils/platform';
+import { callDataSource as tcbCallDataSource, callWedaApi as tcbCallWedaApi, } from '../../../utils/tcb';
+import { useSyncValue } from '../../../utils/useSyncValue';
+const formatNeedDataFetch = ['father-son', 'related', 'x-enum'];
+export function useOptions(params) {
+    const { format, controlledValue, callDataSource = tcbCallDataSource, callWedaApi = tcbCallWedaApi, ...restOptions } = params;
+    // 获取自定义选项集
+    const fetchEnumData = useCallback(async (param) => {
+        var _a, _b, _c;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+            };
+        });
+        return enumOption;
+    }, [callWedaApi]);
+    const fetchData = useCallback(async (param) => {
+        let pageNo = 1;
+        const pageSize = 200;
+        let records = [];
+        let total = 99999;
+        for (let index = 0; index < Math.floor(total / pageSize) + 1; index++) {
+            const data = await callDataSource({
+                dataSourceName: param.dataSourceName,
+                viewId: param.viewId,
+                methodName: param.methodName,
+                params: {
+                    pageNo: pageNo,
+                    pageSize: pageSize,
+                    where: param.params,
+                },
+            });
+            pageNo = pageNo + 1;
+            if (data === null || data === void 0 ? void 0 : data.records) {
+                total = (data === null || data === void 0 ? void 0 : data.total) || 0;
+                records = records.concat(data === null || data === void 0 ? void 0 : data.records);
+            }
+        }
+        return records;
+    }, [callDataSource]);
+    const [options, setOptions] = useSyncValue(controlledValue);
+    const [state, actions] = useAsync(async () => {
+        if (format === 'father-son' || format === 'related') {
+            const { dataSourceName, viewId, where, primaryField } = restOptions;
+            const whereEffected = [].concat(getWhereList(where));
+            const results = await fetchData({
+                dataSourceName,
+                viewId,
+                methodName: 'wedaGetRecords',
+                params: whereEffected,
+            });
+            if (primaryField) {
+                if (results && results.length !== 0) {
+                    const option = results.map((item) => {
+                        return {
+                            label: item[primaryField] || item._id,
+                            value: item._id,
+                        };
+                    });
+                    return option;
+                }
+                else {
+                    // 留一个空的weui才正常
+                    return [{ label: '', value: '' }];
+                }
+            }
+            return results.map((opt) => ({
+                label: opt._id,
+                value: opt._id,
+            })); // 兜底 正常来说一定有primaryField
+        }
+        if (format === 'x-enum') {
+            // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+            const { enumName } = restOptions;
+            return fetchEnumData({
+                OptNameList: [enumName],
+                PageIndex: 1,
+                PageSize: 10,
+            });
+        }
+    }, []);
+    useDeepCompareEffect(() => {
+        if (formatNeedDataFetch.includes(format)) {
+            actions.execute();
+        }
+        // @ts-ignore not check
+    }, [format, restOptions.enumName, restOptions.where]);
+    useEffect(() => {
+        if (state.status === 'success') {
+            setOptions(state.result);
+        }
+    }, [state, state.status]);
+    return [options];
+}

package/dist/web/components/form/uploader/index.css

@@ -3,9 +3,6 @@
   padding: 0;
 }
 
-.weda-uploader-pc .weda-uploader-pc__header {
-}
-
 .weda-uploader-pc .weda-uploader-pc__title {
   color: #000000;
   line-height: 1.42857rem;
@@ -34,6 +31,7 @@
 .weda-uploader-pc .weda-uploader-pc__input-box {
   margin-bottom: 0.57143rem;
 }
+
 .weda-uploader-pc.cloudbase_standard .weda-uploader-pc__body {
   margin-bottom: 0;
 }
@@ -41,6 +39,7 @@
 .weda-uploader-pc.cloudbase_standard .weda-uploader-pc__input-box {
   margin-bottom: 0;
 }
+
 .weda-uploader-pc.cloudbase_standard .weda-uploader-pc__image-list {
   margin-left: 0.57143rem;
 }
@@ -56,6 +55,10 @@
   cursor: zoom-in;
 }
 
+.weda-uploader-pc__input-box .wedatea2td-disabled {
+  cursor: not-allowed;
+}
+
 .weda-uploader-pc .weda-uploader-pc__action {
   display: none;
   position: absolute;
@@ -71,10 +74,12 @@
 .weui-uploader.horizontal {
   display: flex;
 }
+
 .weui-uploader.horizontal .weui-uploader__hd {
   display: inline-block;
   align-self: center;
 }
+
 .weda-uploader-pc.horizontal {
   display: flex;
   justify-content: space-between;
@@ -92,6 +97,7 @@
   display: flex;
   flex: 1;
 }
+
 .weui-uploader.vertical .weui-uploader__title {
   flex: unset;
 }
@@ -99,6 +105,7 @@
 .weda-ui .weui-uploader.horizontal .weui-uploader__bd {
   padding: 1.14286rem 0;
 }
+
 .weda-ui .weui-uploader.vertical .weui-uploader__bd {
   padding: 1.14286rem;
 }

package/dist/web/components/form/uploader/uploader.h5.d.ts

@@ -3,7 +3,7 @@ import type { CommonFormPropsType } from '../types';
 /**
  * H5端
  */
-export declare function ImageUploaderH5({ title, maxUploadCount, maxSize, acceptTypes, className, id, events, layout, defaultValue, single, requiredFlag, onChange, style, }: H5UploaderProps): JSX.Element;
+export declare function ImageUploaderH5({ title, maxUploadCount, maxSize, acceptTypes, className, id, events, layout, defaultValue, single, disabled, requiredFlag, onChange, style, }: H5UploaderProps): JSX.Element;
 export interface SingleImageProps {
     src: string;
     deleteBySrc: (url: string) => void;

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.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useSetState } from '../../utils/useSetState';
 import classNames from '../../utils/classnames';
 import Editor, { convertEditorStateToHTML } from 'kedao';
@@ -56,24 +56,27 @@ label, labelVisible, value: initialValue, readOnly, layout, requiredFlag, onChan
         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 extendControls = useMemo(() => {
+        return [
+            {
+                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);
+                    } })),
+            },
+        ];
+    }, [setEditorState, acceptTypes, maxSize, cloudPath, ContentUtils]);
     // 修改img显示逻辑
     const blockRenderFn = (contentBlock, { editor, editorState }) => {
+        var _a;
         if (contentBlock.getType() === 'atomic') {
-            const entity = editorState
-                .getCurrentContent()
-                .getEntity(contentBlock.getEntityAt(0));
+            const entityKey = contentBlock.getEntityAt(0);
+            if (!entityKey) {
+                return null;
+            }
+            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,
@@ -260,7 +263,7 @@ export const RichTextImg = ({ contentState, block }) => {
         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: () => {
+                    React.createElement("img", { src: src, style: { maxWidth: '100%', width }, onError: () => {
                             setSrc(defaultBase64);
                             setWidth('80px');
                         } }),

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

@@ -1,2 +1,2 @@
 export function serde(a: any): any;
-export default function _default(a: any, b: any, shouldSerde?: boolean): boolean;
+export default function _default(a: any, b: any, shouldSerde?: boolean): any;

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 {};
     }
 }