@cloudbase/weda-ui 3.4.11-alpha.1 → 3.4.12

package/dist/web/components/wd-table/wd-table.js

@@ -118,8 +118,10 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
     // 筛选条件
     const wList = where;
     // 搜索和分页参数
-    const initPageIndex = isModel ? defaultPageIndex : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo;
-    const initPageSize = isModel ? defaultPageSize : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize;
+    let initPageIndex = isModel ? defaultPageIndex : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo;
+    let initPageSize = isModel ? defaultPageSize : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize;
+    initPageIndex = parseInt(initPageIndex);
+    initPageSize = parseInt(initPageSize);
     const [queryParams, setQueryParams] = useState({
         pageIndex: initPageIndex,
         pageSize: initPageSize,
@@ -147,60 +149,11 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
     const filterFieldsData = getFilterFields(filterFields, fields);
     // 可排序字段
     const sortColumns = getSortColumns({ fields, columnSets });
-    // 查询参数
-    const { query } = useQueryParams({
-        queryParams,
-        wList,
-        viewFieldsData,
-        connectorParams,
-        isModel,
-        isViewTable,
-        events,
-    });
-    // 查询数据
-    const { tableData, total, tableLoading, getNewList } = useTableData({
-        dataSourceAPI,
-        dbName,
-        connectorMethod,
-        query,
-        events,
-        isModel,
-        isH5,
-        isNoDataSourceBind,
-    });
-    const refreshTable = () => {
-        // 清除选中的 key
-        setSelectedKeys([]);
-        if (queryParams.pageIndex === _defaultPageIndex) {
-            getNewList();
-        }
-        else {
-            setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
-        }
-    };
-    const isTableLoading = !isNoDataSourceBind && (tableLoading || fieldsLoading || !fields.length);
-    // 表格数据
-    const mapTableData = () => {
-        if (isMock || (isInIde() && isNoDataSourceBind)) {
-            return Mock.records;
-        }
-        // 加载过程中,pc端每次查询置空,h5端仅首页置空
-        // 避免编辑器内切换数据源时,column更改,table render还未更新造成渲染问题
-        if ((isTableLoading && !isH5) || isNoDataSourceBind) {
-            return [];
-        }
-        if (isTableLoading &&
-            isH5 &&
-            (queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === _defaultPageIndex) {
-            return [];
-        }
-        if (viewFieldsData === null || viewFieldsData === void 0 ? void 0 : viewFieldsData.selectedViewId) {
-            mapTableDataWithView(viewFieldsData, tableData);
-        }
-        return tableData;
-    };
-    const tableRecords = mapTableData();
     // 表格 columns
+    const [resizeColumns, setColumns] = useState([]);
+    useEffect(() => {
+        setColumns([]);
+    }, [columnSets]);
     const columns = useMemo(() => {
         if (isMock || (isInIde() && isNoDataSourceBind)) {
             return Mock.columns;
@@ -208,7 +161,7 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
         if (fieldsLoading || isNoDataSourceBind) {
             return [];
         }
-        const baseColumns = getTableColumns({
+        let baseColumns = getTableColumns({
             fields,
             columnSets,
             slots,
@@ -246,6 +199,11 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
                 fixed: 'left',
             });
         }
+        baseColumns = baseColumns.map((i) => {
+            var _a;
+            const width = (_a = resizeColumns === null || resizeColumns === void 0 ? void 0 : resizeColumns.find((j) => i.key === j.key)) === null || _a === void 0 ? void 0 : _a.width;
+            return width ? { ...i, width } : i;
+        });
         return baseColumns;
     }, [
         isMock,
@@ -260,7 +218,62 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
         enableCellCustomOption,
         columnSelectType,
         classPrefix,
+        resizeColumns,
     ]);
+    // 查询参数
+    const { query } = useQueryParams({
+        queryParams,
+        wList,
+        viewFieldsData,
+        connectorParams,
+        isModel,
+        isViewTable,
+        events,
+        columns,
+    });
+    // 查询数据
+    const { tableData, total, tableLoading, getNewList } = useTableData({
+        dataSourceAPI,
+        dbName,
+        connectorMethod,
+        query,
+        events,
+        isModel,
+        isH5,
+        isNoDataSourceBind,
+    });
+    const refreshTable = () => {
+        // 清除选中的 key
+        setSelectedKeys([]);
+        if (queryParams.pageIndex === _defaultPageIndex) {
+            getNewList();
+        }
+        else {
+            setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
+        }
+    };
+    const isTableLoading = !isNoDataSourceBind && (tableLoading || fieldsLoading || !fields.length);
+    // 表格数据
+    const mapTableData = () => {
+        if (isMock || (isInIde() && isNoDataSourceBind)) {
+            return Mock.records;
+        }
+        // 加载过程中,pc端每次查询置空,h5端仅首页置空
+        // 避免编辑器内切换数据源时,column更改,table render还未更新造成渲染问题
+        if ((isTableLoading && !isH5) || isNoDataSourceBind) {
+            return [];
+        }
+        if (isTableLoading &&
+            isH5 &&
+            (queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === _defaultPageIndex) {
+            return [];
+        }
+        if (viewFieldsData === null || viewFieldsData === void 0 ? void 0 : viewFieldsData.selectedViewId) {
+            mapTableDataWithView(viewFieldsData, tableData);
+        }
+        return tableData;
+    };
+    const tableRecords = mapTableData();
     // 总数
     const beforeModalDestroy = () => {
         // 重新加载数据
@@ -421,7 +434,7 @@ enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText, ...props },
                                     enableTableHeightSizeBtn ||
                                     hasFilterButton) && (_jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: refreshTable, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
                                     setOpenMobileFilter(true);
-                                }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination })), _jsx(Table, { emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: tableClassList, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, records: tableRecords, sort: queryParams.sort, selectedKeys: selectedKeys, onSelectChange: (keys, context) => {
+                                }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination })), _jsx(Table, { emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: tableClassList, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, setColumns: setColumns, records: tableRecords, sort: queryParams.sort, selectedKeys: selectedKeys, onSelectChange: (keys, context) => {
                                     setSelectedKeys([].concat(keys));
                                     if (events === null || events === void 0 ? void 0 : events.rowsSelect) {
                                         const selectValue = columnSelectType === 'radio'

package/dist/web/components/wd-textarea/index.js

@@ -0,0 +1,3 @@
+import { WdTextarea } from './wd-textarea';
+export { WdTextarea };
+export default WdTextarea;

package/dist/web/components/wd-textarea/wd-textarea.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { WdFormItem } from '../wd-form-item';
+import { FORM_MAX_LENGTH } from '../../utils/constant';
+import { useFormInputTrait } from '../form-input-hooks';
+import { filterPropsWithOn, getUuid } from '../../utils/tool';
+import { useSize } from '../../utils/hooks/useFormLegacy';
+import { usePlatform } from '../../utils/platform';
+/**
+ * 标准化：多行输入组件
+ */
+export const WdTextarea = forwardRef(function WdTextarea(props, ref) {
+    const { name, placeholder = '请输入', counterVisible = true, focus = false, maxLength = FORM_MAX_LENGTH, events, block: _block, classRoot = 'textarea', label, required, } = props;
+    /** 兼容从 Form 获取属性，必须引入，自动挂载组件方法 */
+    const [innerHandle, setInnerHandle] = useState({});
+    const traitProps = { ...props, setInnerHandle, inputRef: ref };
+    const { value, onChange: onChangeForm, disabled, readOnly, validateErrorMsg, validateState, visible, layout, } = useFormInputTrait(traitProps);
+    const block = usePlatform() === 'h5' ? true : _block;
+    const { classPrefix } = useConfig();
+    const startWithOnProps = useMemo(() => filterPropsWithOn(props), [props]);
+    const inputId = useMemo(() => getUuid(), []);
+    const size = useSize(props);
+    const textareaRef = useRef(null);
+    const counter = typeof value === 'string' ? value.length : 0;
+    const wrapRef = useRef(null);
+    const root = `${classPrefix}-${classRoot}`;
+    const inputWrap = `${classPrefix}-form-input-wrap`;
+    const textareaWrap = `${classPrefix}-form-textarea-wrap`;
+    const cls = classNames(inputWrap, textareaWrap, `${root}-${classRoot}`, `size-width-${size}`, `size-font-${size}`, {
+        'size-width-hundred': block,
+        'is-disabled': disabled,
+        'textarea-restriction': counterVisible,
+    });
+    const countCls = `${textareaWrap}__label ${root}-${classRoot}__count-text`;
+    useEffect(() => {
+        autoScroll();
+    }, []);
+    // 输入自动滚动
+    const autoScroll = function () {
+        if (!textareaRef.current)
+            return;
+        textareaRef.current.style.height = 'auto';
+        if (textareaRef.current.scrollHeight >= textareaRef.current.offsetHeight) {
+            textareaRef.current.style.height =
+                textareaRef.current.scrollHeight + 'px';
+        }
+    };
+    /** 内部事件 */
+    const onChange = function (e) {
+        var _a;
+        autoScroll();
+        const text = typeof e === 'string' ? e : e.target.value;
+        onChangeForm(text);
+        (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: text }, { originEvent: e });
+    };
+    const onFocus = function (e) {
+        var _a;
+        (_a = events.focus) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
+    };
+    const onBlur = function (e) {
+        var _a;
+        (_a = events.blur) === null || _a === void 0 ? void 0 : _a.call(events, { value: e.target.value }, { originEvent: e });
+    };
+    /** widgets */
+    useImperativeHandle(ref, () => ({
+        ...innerHandle,
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+    }), [innerHandle, name, value, label, required, visible, disabled, readOnly]);
+    return (visible && (_jsx(WdFormItem, { ...props, validateErrorMsg: validateErrorMsg, validateState: validateState, readOnly: readOnly, disabled: disabled, readValue: value, classRoot: classRoot, inputId: inputId, layout: layout, children: _jsxs("div", { className: cls, ref: wrapRef, onFocus: () => wrapRef.current.classList.add('is-focused'), onBlur: () => wrapRef.current.classList.remove('is-focused'), children: [_jsx("textarea", { id: inputId, ref: textareaRef, rows: 2, placeholder: placeholder, name: name, value: value, maxLength: maxLength, autoFocus: focus, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, ...startWithOnProps }), counterVisible && (_jsxs("label", { className: countCls, children: [counter, "/", maxLength] }))] }) })));
+});

package/dist/web/components/wd-tree/index.js

@@ -0,0 +1,3 @@
+import { WdTree } from './wd-tree';
+export { WdTree } from './wd-tree';
+export default WdTree;

package/dist/web/components/wd-tree/utils.js

@@ -0,0 +1,291 @@
+/* eslint-disable max-lines */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { deepClone } from '../../utils/tool';
+const TREE_INFO_GOT = [
+    { key: 'value', infoKey: 'selected', alias: 'selected' },
+    { key: 'value', infoKey: 'selected', alias: 'selectedPositions', aim: 'pos' },
+    { key: 'value', infoKey: 'selected', alias: 'selectedNodes', aim: 'root' },
+    { key: 'isExpand', value: true, alias: 'expanded' },
+    { key: 'isExpand', value: true, alias: 'expandedPositions', aim: 'pos' },
+    { key: 'isExpand', value: true, alias: 'expandedNodes', aim: 'root' },
+    { key: 'searched', value: 'searched' },
+    {
+        key: 'searched',
+        value: 'searched',
+        alias: 'searchedPositions',
+        aim: 'pos',
+    },
+    { key: 'searched', value: 'searched', alias: 'searchedNodes', aim: 'root' },
+    { key: 'checked', value: 'checked' },
+    { key: 'checked', value: 'checked', alias: 'checkedPositions', aim: 'pos' },
+    { key: 'checked', value: 'checked', alias: 'checkedNodes', aim: 'root' },
+    { key: 'checked', value: 'childChecked', alias: 'childChecked' },
+    {
+        key: 'checked',
+        value: 'childChecked',
+        alias: 'childCheckedPositions',
+        aim: 'pos',
+    },
+    {
+        key: 'checked',
+        value: 'childChecked',
+        alias: 'childCheckedNodes',
+        aim: 'root',
+    },
+];
+/**
+ * 仅根据初始值判断当前节点的展开状态
+ * @param treeNode 当前节点
+ * @param expandType 节点展开类型
+ * @param expandCustom 自定义要展开的节点
+ * @returns
+ */
+const judgeExpand = (treeNode, expandType, expandCustom) => {
+    if (!expandType)
+        return treeNode.expanded || '';
+    if (expandType === 'all')
+        return 'expand';
+    if (expandType !== 'none') {
+        return (expandCustom === null || expandCustom === void 0 ? void 0 : expandCustom.includes(treeNode.value)) ? 'expand' : '';
+    }
+    return '';
+};
+/**
+ * 仅根据搜索关键字判断节点是否被搜索到
+ * @param treeNode 当前节点
+ * @param searchKey 关键字
+ * @returns
+ */
+const judgeSearch = (treeNode, searchKey) => {
+    var _a;
+    return searchKey && ((_a = treeNode.label) === null || _a === void 0 ? void 0 : _a.includes(searchKey)) ? 'searched' : '';
+};
+/**
+ * 仅根据初始值判断是否选中
+ * @param treeNode 当前节点
+ * @param checkedCustom 自定义选中的节点
+ * @returns
+ */
+const judgeCheck = (treeNode, checkedCustom) => {
+    if (!(checkedCustom === null || checkedCustom === void 0 ? void 0 : checkedCustom.length))
+        return treeNode.checked || '';
+    return checkedCustom.includes(treeNode.value) ? 'checked' : '';
+};
+/**
+ * 根据初始值获取用于组件展示的数据
+ * @param {IInitData} param0
+ * @returns
+ */
+const initData = ({ data, parent, showIcon, expendIcon, foldIcon, leafIcon, pos = '', }) => {
+    if (!Array.isArray(data))
+        return [];
+    return data
+        .filter((item) => item === null || item === void 0 ? void 0 : item.value)
+        .map((item, index) => {
+        var _a;
+        item.pos = `${pos ? `${pos}-` : ''}${index}`;
+        item.root = item.root || { ...deepClone(item), pos: item.pos };
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            item.children = initData({
+                data: item.children,
+                parent: item,
+                showIcon,
+                expendIcon,
+                foldIcon,
+                leafIcon,
+                pos: item.pos,
+            });
+        }
+        item.expendIcon = item.expendIcon || expendIcon;
+        item.foldIcon = item.foldIcon || foldIcon;
+        item.leafIcon = item.leafIcon || leafIcon;
+        item.showIcon = showIcon;
+        item.parent = parent;
+        return item;
+    });
+};
+/**
+ * 根据子节点的状态处理父节点的相关状态，如选中、展开
+ * @param {IGetStateOfChildrenParams} param0
+ * @returns
+ */
+const getStateOfChildren = ({ treeNode, key, state, }) => {
+    var _a, _b, _c;
+    const notHas = (_a = treeNode.children) === null || _a === void 0 ? void 0 : _a.map((v) => v[key]).includes(state.notHas);
+    const has = (_b = treeNode.children) === null || _b === void 0 ? void 0 : _b.map((v) => v[key]).includes(state.has);
+    const childHas = (_c = treeNode.children) === null || _c === void 0 ? void 0 : _c.map((v) => v[key]).includes(state.childHas);
+    if (notHas && !has && !childHas) {
+        return state.notHas;
+    }
+    else if (has && !notHas && !childHas) {
+        return state.has;
+    }
+    return state.childHas;
+};
+/**
+ * 处理节点的搜索状态
+ * @param treeNode 节点
+ * @returns
+ */
+const getSearched = (treeNode) => getStateOfChildren({
+    treeNode,
+    key: 'searched',
+    state: {
+        notHas: '',
+        has: 'searched',
+        childHas: 'childSearched',
+    },
+});
+/**
+ * 处理节点的展开状态
+ * @param treeNode 节点
+ * @returns
+ */
+const getExpand = (treeNode) => getStateOfChildren({
+    treeNode,
+    key: 'expanded',
+    state: {
+        notHas: '',
+        has: 'expand',
+        childHas: 'childExpand',
+    },
+});
+/**
+ * 处理节点的选中状态
+ * @param treeNode 节点
+ * @returns
+ */
+const getChecked = (treeNode) => getStateOfChildren({
+    treeNode,
+    key: 'checked',
+    state: {
+        notHas: '',
+        has: 'checked',
+        childHas: 'childChecked',
+    },
+});
+/**
+ * 初始化节点状态
+ * @param param0
+ * @returns
+ */
+const initTreeState = ({ data, checkedCustom, expandType, expandCustom, searchKey = '', parentChecked = '', }) => {
+    if (!Array.isArray(data))
+        return [];
+    return data.map((item) => {
+        var _a, _b, _c;
+        const currentChecked = parentChecked || judgeCheck(item, checkedCustom);
+        const currentSearched = judgeSearch(item, searchKey);
+        const currentExpand = judgeExpand(item, expandType, expandCustom);
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            item.children = initTreeState({
+                data: item.children,
+                checkedCustom,
+                expandType,
+                expandCustom,
+                searchKey,
+                parentChecked: currentChecked === 'checked' ? 'checked' : '', // 只有父节点选中才去操作子节点选中
+            });
+            item.checked = currentChecked || getChecked(item);
+            item.searched = currentSearched || getSearched(item);
+            item.expanded = currentExpand || getExpand(item);
+        }
+        else {
+            item.checked = currentChecked || judgeCheck(item, checkedCustom);
+            item.searched = currentSearched;
+            item.expanded = item.searched ? 'expand' : '';
+        }
+        // 被搜索到的或根据输入判断需要展开的都认为要展开
+        item.isExpand =
+            !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) &&
+                (searchKey ? !!item.searched : !!item.expanded);
+        if (item.showIcon) {
+            if ((_c = item.children) === null || _c === void 0 ? void 0 : _c.length) {
+                item.iconShow = item.isExpand ? item.expendIcon : item.foldIcon;
+            }
+            else {
+                item.iconShow = item.leafIcon;
+            }
+        }
+        return item;
+    });
+};
+/**
+ * 当某节点的选择状态变化时，处理该节点的父和子的选择状态
+ * @param treeNode
+ */
+const dealCheck = (treeNode) => {
+    var _a;
+    let parent = treeNode.parent;
+    const adjust = (arr, checked) => {
+        arr.forEach((item) => {
+            var _a;
+            item.checked = checked;
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                adjust(item.children, item.checked);
+            }
+        });
+    };
+    while (parent) {
+        parent.checked = getChecked(parent);
+        parent = parent.parent;
+    }
+    if ((_a = treeNode.children) === null || _a === void 0 ? void 0 : _a.length) {
+        adjust(treeNode.children, treeNode.checked);
+    }
+};
+/**
+ * 查找满足要求的节点
+ * @param tree 树
+ * @param condition 需要获取的内容
+ * @returns
+ */
+const findNode = (params) => {
+    const { tree, info, condition } = params;
+    const list = {};
+    tree.forEach((item) => {
+        var _a;
+        let childList = {};
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            childList = findNode({ tree: item.children, info, condition });
+        }
+        condition.forEach((v) => {
+            var _a;
+            const { key, value, alias, aim, infoKey } = v;
+            const k = alias || key;
+            const aimValue = infoKey ? info[infoKey] : value;
+            if (!list[k])
+                list[k] = [];
+            if (item[key] === aimValue) {
+                list[k].push(item[aim || 'value']);
+            }
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                list[k] = [...new Set([...list[k], ...childList[k]])];
+            }
+        });
+    });
+    return list;
+};
+/**
+ * 根据checkable状态获取树信息
+ * @param params
+ * @param checkable
+ * @returns
+ */
+const getTreeInfo = (params, checkable) => {
+    const info = findNode(params);
+    // 如果未开启多选，则将点击状态覆盖选中状态
+    if (!checkable) {
+        info.checked = info.selected;
+        info.checkedNodes = info.selectedNodes;
+        info.checkedPositions = info.selectedPositions;
+        info.childChecked = [];
+        info.childCheckedNodes = [];
+        info.childCheckedPositions = [];
+    }
+    delete info.selected;
+    delete info.selectedNodes;
+    delete info.selectedPositions;
+    return info;
+};
+export { TREE_INFO_GOT, initData, initTreeState, dealCheck, findNode, getTreeInfo, };