@lingxiteam/ebe-utils 0.2.21 → 0.2.23

package/lib/pcpublic/src/components/pcfactory/src/Transfer/index.tsx

@@ -1,644 +1,50 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
-import { useThrottleFn } from 'ahooks';
-import { Table, Transfer, Tree } from 'antd';
-import type { FormItemProps } from 'antd/lib/form';
-import { TableRowSelection } from 'antd/lib/table/interface';
-import { TransferDirection, TransferItem } from 'antd/lib/transfer';
-import { difference } from 'lodash';
-import React, { CSSProperties, useMemo, useRef, useState } from 'react';
-import { FormFields, getFieldsProps, useCommonImperativeHandle, useListenProps } from '../utils';
-import CustomModule from '../utils/CustomModule';
-import EmptyComp from '../utils/Empty';
-import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import React, { useMemo } from 'react';
+import { useCommonImperativeHandle } from '../utils/hooks/useCommonImperativeHandle';
+import { useListenProps } from '../utils/hooks/useListenState';
+import { FormFields, getFieldsProps } from '../utils/formUtils/FormFields';
 import { useLocale } from '../utils/hooks/useLocale';
-
-export interface WrapperTransferProps {
-  children: JSX.Element;
-  className: string;
-}
-const WrapperTransfer = ({ children, className }: WrapperTransferProps) =>
-  React.cloneElement(children, {
-    className: `ued-transfer-wrap ${className} ${children.props.className || ''}`,
-  });
+import TransferLoad from './loader';
 
 const prefixCls = 'ued-transfer-wrap';
-export interface MyTransferProps extends FormItemProps {
-  value?: any;
-  visible?: boolean;
-  onTransferChange?: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
-  onValueRelease?: (e: any) => void;
-  getCompPropMapState?: (id: string, type: string) => any;
-  compId?: string;
-  name?: string;
-  fieldName: string;
-  hidden?: boolean;
-  regexp?: any;
-  message?: string;
-  selfSpan?: number;
-  colSpan?: number;
-  showWrapperContainer: boolean;
-  wrapperContainer: any;
-  titleTip?: any;
-  tipIcon?: any;
-  tipLocation?: any;
-  tipContent?: any;
-  tipPlacement?: any;
-  colon?: boolean;
-  displayStyle: 'base' | 'tree' | 'table';
-  labelCode: string;
-  uid: string;
-  dataSource: any[];
-  columns?: any[];
-  childrenColumnName?: string;
-  onSearch?: (direction: 'left' | 'right', value: string) => void;
-  showSearch: boolean;
-  transferLeftTitle: string;
-  transferRightTitle: string;
-  transferWidth: number;
-  transferHeight: number;
-  size: 'small' | 'large';
-  page: boolean;
-  showQuickJumper?: boolean;
-  showSizeChanger?: boolean;
-  showTotal?: boolean;
-  total: number;
-  pageSize: number;
-  current: number;
-  pageSizeOptions: string;
-  onPageChange: (pageNo: number, pageSize: number) => void;
-  min: number;
-  max: number;
-  isFormChild?: boolean | undefined;
-  $$componentItem: any;
-  tipSize?: string; // 文字提示
-  tipWidth?: string; // 提示自定义的宽度
-  tipHeight?: string; // 提示自定义的高度
-  hideLeftSelected?: boolean; // 是否隐藏左侧已选数据
-}
-
-const MyTransfer = LingxiForwardRef<any, MyTransferProps>((props, ref) => {
-  const {
-    value,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    visible = true,
-    onTransferChange,
-    onValueRelease,
-    getCompPropMapState,
-    compId,
-    name,
-    fieldName: rawFieldName,
-    hidden,
-    regexp,
-    message,
-    label,
-    labelCol,
-    wrapperCol,
-    selfSpan,
-    colSpan,
-    showWrapperContainer,
-    wrapperContainer: WrapperContainer,
-    titleTip,
-    tipIcon,
-    tipLocation,
-    tipContent,
-    tipPlacement,
-    displayStyle,
-    labelCode,
-    uid,
-    columns,
-    childrenColumnName,
-    transferHeight,
-    transferWidth,
-    size,
-    pageSizeOptions,
-    min,
-    max,
-    isFormChild,
-    tipSize,
-    tipWidth,
-    tipHeight,
-    getEngineApis,
-    hideLeftSelected = false,
-    ...restProps
-  } = props;
-
-  const { sandBoxSafeRun, sandBoxLoadModule, dataState } = getEngineApis() || {};
-
-  const { getLocale, lang } = useLocale(getEngineApis());
-
-  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun, getLocale);
-
-  const [_dataSource, setDataSource] = useListenProps(props.dataSource);
-  const [transferLeftTitle, setTransferLeftTitle] = useListenProps(props.transferLeftTitle);
-  const [transferRightTitle, setTransferRightTitle] = useListenProps(props.transferRightTitle);
-
-  const dataSource = useMemo(() => {
-    return _dataSource ?? [];
-  }, [_dataSource]);
-
+const Transfer = LingxiForwardRef<unknown, any>((props, ref) => {
+  const { value, getEngineApis, min, max, name, size } = props;
   const compValue = useMemo(() => {
     return value ?? [];
   }, [value]);
 
-  const { formFieldsRef, readOnly, required, disabled } = useCommonImperativeHandle(ref, props, {
-    value: compValue,
-    clearValue: [],
-    setDataSource(_list: any[]) {
-      if (Array.isArray(_list)) {
-        setDataSource(_list);
-      }
-    },
-    // 设置右侧标题
-    setTransferRightTitle(_title: string) {
-      setTransferRightTitle(_title);
-    },
-    // 设置左侧
-    setTransferLeftTitle(_title: string) {
-      setTransferLeftTitle(_title);
-    },
-  });
-
-  const [currentPage, setCurrentPage] = useState(props.current || 1); // 当前页码
-  const [currentPageSize, setCurrentPageSize] = useState(props.pageSize); // 当前每页数量
-  // const [rightData, setRigthData] = useState<any>([]);
-
-  const currentSearchDirection = useRef<'left' | 'right'>('left');
-  const searchVal = useRef<string>('');
-
-  const titles = useMemo(() => {
-    return [transferLeftTitle, transferRightTitle];
-  }, [transferLeftTitle, transferRightTitle]);
-
-  const listStyle = useMemo(() => {
-    const tmpStyle: CSSProperties = {
-      height: transferHeight,
-    };
-    if (transferWidth) {
-      tmpStyle.maxWidth = transferWidth;
-    } else {
-      tmpStyle.flex = 1;
-    }
-    return tmpStyle;
-  }, [transferWidth, transferHeight]);
-
-  // 解析分页选择器配置
-  const parsedPageSizeOptions = useMemo(() => {
-    if (pageSizeOptions) {
-      try {
-        const arr = JSON.parse(pageSizeOptions);
-        if (Array.isArray(arr)) {
-          return arr.map(s => String(s));
-        }
-        return [];
-      } catch (e) {
-        console.error('条数可选值 pageSizeOptions 必须配置为数字数组字符串'); // eslint-disable-line no-console
-      }
-    }
-    return [];
-  }, [pageSizeOptions]);
-
-  // 分页
-  const pagination = useMemo((): any => {
-    if (props.page) {
-      const res: any = {
-        showQuickJumper: props.showQuickJumper,
-        pageSize: currentPageSize,
-        current: currentPage,
-        onChange: (pageNo: number, pageSize: number) => {
-          setCurrentPage(pageNo);
-          setCurrentPageSize(pageSize);
-        },
-      };
-      if (props.showSizeChanger) {
-        res.showSizeChanger = props.showSizeChanger;
-        res.pageSizeOptions = parsedPageSizeOptions;
-      }
-      if (props?.showTotal) {
-        res.showTotal = (total: any) => getLocale?.('Pagination.showTotal', { tol: total });
-      }
-      // if(props.onPageChange) {
-      //   res.onChange = (pageNo: number, pageSize: number) => {
-      //     setCurrentPage(pageNo);
-      //     setCurrentPageSize(pageSize);
-      //     props.onPageChange(pageNo, pageSize);
-      //   };
-      // }
-      return res;
-    }
-    return false;
-  }, [props, currentPage, currentPageSize]);
-
-  /**
-   * 向右添加数据
-   * @param targetKeys
-   */
-  // const getRigthData = (targetKeys: any) => { // 每次选中的右侧数据进行保存，左侧搜索框配置请求数据，数据重新渲染会导致右侧数据一起被过滤
-  //   const selectedData = [...rightData];
-  //   const newData: any = [];
-  //   if (targetKeys && targetKeys.length) { // 当前有选中的情况
-  //     targetKeys.forEach((item: any) => {
-  //       const selectedObj = selectedData.find(child => child[uid] === item);
-  //       const targetObj = tmpDataSource.find(i => i[uid] === item);
-  //       if (!selectedObj && targetObj) {
-  //         newData.push({ ...targetObj, key: item });
-  //       }
-  //     });
-  //     setRigthData([...newData, ...rightData]);
-  //   } else {
-  //     setRigthData([]);
-  //   }
-  // }
-  /**
-   * 向左移除
-   * @param moveKeys
-   */
-  // const removeRigthDataSource = (moveKeys: any) => {
-  //   if (moveKeys && Array.isArray(moveKeys) && moveKeys.length) {
-  //     // const uids = moveKeys.map(it => it[uid]); // 要移除的所有id
-  //     const targetData: any = [];
-  //     if (rightData && rightData.length > 0) {
-  //       rightData.forEach((item: { [x: string]: any; }) => {
-  //         if (!moveKeys.includes(item[uid])) {
-  //           targetData.push({ ...item });
-  //         }
-  //       })
-  //     }
-  //     setRigthData([...targetData]);
-  //   }
-  // }
-  const { run } = useThrottleFn((d, v) => {
-    if (props?.onSearch) {
-      props.onSearch(d, v);
-    }
-  });
-  const commonProps: any = {
-    ...restProps,
-    titles,
-    listStyle,
-    style: props.style,
-    onSearch: (direction: 'left' | 'right', value: string) => {
-      searchVal.current = value;
-      currentSearchDirection.current = direction;
-      // 增加节流，防止在搜索框输入的过程中，一直请求
-      run && run(direction, value);
-      // if (props?.onSearch) {
-      //   props.onSearch(direction, value);
-      // }
-    },
-    targetKeys: compValue || [],
-    render: (item: any) => item[labelCode],
-    filterOption: (val: any, item: any) => {
-      // 开启了搜索并且配置了搜索事件，左侧不触发本地过滤
-      if (props.showSearch && currentSearchDirection.current === 'left' && props.onSearch) {
-        return true;
-      }
-      const isTable = displayStyle === 'table';
-      if (isTable) {
-        let flag = false;
-        try {
-          columns?.forEach(col => {
-            // 原先写法indexof item[col.dataIndex]? 如果字段为null或者undefined，则返回void 0 === undefined，导致还是会进入该判断
-            if (item[col.dataIndex] && item[col.dataIndex]?.indexOf(val) > -1) {
-              flag = true;
-              throw Error(); // 异常跳出循环
-            }
-          });
-        } catch (error) {
-          //
+  const { getLocale, lang } = useLocale(getEngineApis());
+  const [dataSource, setDataSource] = useListenProps(props.dataSource);
+  const [transferLeftTitle, setTransferLeftTitle] = useListenProps(
+    props.transferLeftTitle
+  );
+  const [transferRightTitle, setTransferRightTitle] = useListenProps(
+    props.transferRightTitle
+  );
+  const { formFieldsRef, readOnly, required, disabled } =
+    useCommonImperativeHandle(ref, props, {
+      value: compValue,
+      clearValue: [],
+      setDataSource(_list: any[]) {
+        if (Array.isArray(_list)) {
+          setDataSource(_list);
         }
-        return flag;
-      }
-      return item?.[labelCode] && `${item?.[labelCode]}`.indexOf(val) > -1; // 同上的原因
-    },
-    rowKey: (record: any) => record[uid],
-    onChange: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
-      // if (direction === 'left') {
-      //   removeRigthDataSource(moveKeys);
-      // } else {
-      //   getRigthData(targetKeys);
-      // }
-      // console.log('值变化了');
-      if (onTransferChange) {
-        onTransferChange(targetKeys, direction, moveKeys);
-      }
-    },
-    selectAllLabels: [
-      null,
-      () => {
-        // 自定义右侧
-        return getLocale?.('Transfer.unit', { num: compValue.length });
       },
-    ],
-  };
-  const finalColumns = useMemo(() => {
-    if (displayStyle === 'table') {
-      return columns?.map(col => {
-        // 自定义渲染函数-
-        if (col.jsx) {
-          col.render = (text: any, row: any, index: any) => {
-            return (
-              <span>
-                <CustomModule
-                  sandBoxLoadModule={sandBoxLoadModule}
-                  errorInfo={{ id: props.$$componentItem.id }}
-                  code={col.customRendering}
-                  compProps={{
-                    text,
-                    item: row,
-                    index,
-                  }}
-                />
-              </span>
-            );
-          };
-        } else if (col.customRendering) {
-          col.render = (text: any, row: any, index: any) => {
-            return {
-              children: (
-                <span
-                  // eslint-disable-next-line react/no-danger
-                  dangerouslySetInnerHTML={{
-                    __html: `${funcExpExecute(col.customRendering, [
-                      {
-                        key: 'text',
-                        value: text,
-                      },
-                      {
-                        key: 'row',
-                        value: row,
-                      },
-                      {
-                        key: 'index',
-                        value: index,
-                      },
-                    ])}`,
-                  }}
-                />
-              ),
-              props: {},
-            };
-          };
-        } else if (col.lineNum && typeof col.lineNum === 'number' && col.lineNum > 0) {
-          // 自定义可以单行或者多行溢出
-          const controllLineStyle = {
-            WebkitLineClamp: col.lineNum,
-          };
-          return {
-            ...col,
-            render: (text: any) => (
-              <span className="ued-control-line-number" style={controllLineStyle}>
-                {text}
-              </span>
-            ),
-          };
-        }
-        return col;
-      });
-    }
-    return [{ title: getLocale?.('title'), dataIndex: labelCode }];
-  }, [displayStyle]);
-
-  const renderTransferTable = (isTable: boolean = false) => {
-    // 格式化数据
-    const generateData = (list: any[]): any[] => {
-      return list?.map((item: any) => {
-        return {
-          ...item,
-          key: item[uid],
-          children: generateData(childrenColumnName ? item[childrenColumnName] : item.children),
-        };
-      });
-    };
-
-    // 穿梭框数据
-    const transferDataSource: any[] = [];
-    function flatten(list: any[] = []) {
-      list.forEach(item => {
-        transferDataSource.push(item);
-        flatten(item?.children);
-      });
-    }
-    flatten(dataSource);
-    return (
-      <Transfer {...commonProps} dataSource={transferDataSource}>
-        {({ direction, filteredItems, disabled: listDisabled, selectedKeys: listSelectedKeys, onItemSelectAll, onItemSelect }) => {
-          const rowSelection: TableRowSelection<TransferItem> = {
-            getCheckboxProps: (item: any) => {
-              return {
-                disabled: listDisabled || item.disabled || (direction === 'left' && compValue.includes?.(item.key)),
-              };
-            },
-            onSelectAll(selected, selectedRows) {
-              const treeSelectedKeys = selectedRows.filter(item => !item?.disabled).map(({ key }) => key);
-              // 由于左侧列表保留了右侧选中数据compValue，点击全选时，需要过滤掉compValue内的值，否则会重复
-              const diffKeys = selected
-                ? difference(
-                  direction === 'left' && isTable ? treeSelectedKeys.filter(c => !compValue.includes?.(c)) : treeSelectedKeys,
-                  listSelectedKeys
-                )
-                : difference(listSelectedKeys, treeSelectedKeys);
-              onItemSelectAll(diffKeys as string[], selected);
-            },
-            onSelect({ key }, selected) {
-              onItemSelect(key as string, selected);
-            },
-            selectedRowKeys: direction === 'left' ? [...listSelectedKeys, ...compValue] : listSelectedKeys,
-          };
-          const tSize = size === 'large' ? 40 : 32;
-          const scrollY = transferHeight - 40 - 44 - (isTable ? tSize : 0) - (props.showSearch ? 50 : 0);
-          const scroll: any = { y: scrollY };
-          if (!props.page) {
-            scroll.y += 40;
-          }
-          let currentDataSource: any[] = [];
-          if (direction === 'left') {
-            const filterKeys: string[] = [];
-            // 过滤表格数据
-            const filterTableData = (obj: any) => {
-              if (obj) {
-                if (Array.isArray(obj)) {
-                  obj.forEach(item => {
-                    filterKeys.push(item.key);
-                    filterTableData(item.children);
-                  });
-                } else {
-                  filterKeys.push(obj?.key);
-                  filterTableData(obj?.children);
-                }
-              }
-            };
-            if (searchVal.current) {
-              const targetFilterData = generateData(filteredItems);
-              if (targetFilterData && Array.isArray(targetFilterData) && targetFilterData.length) {
-                // 如果搜索父级里面和子级含有相同的文字，会导致数据有问题，所以条件搜索的情况直接将数据按照一级展示
-                targetFilterData.forEach(item => {
-                  if (!filterKeys.includes(item.key)) {
-                    // 过滤会将子级也过滤进来 eg [{key:1,label:1,children:[{key:2,label:2},{key:3,label:3}]},{key:2,label:2}],需要将子级{key:2,label:2}过滤
-                    currentDataSource.push(item);
-                  }
-                  filterTableData(item);
-                });
-              }
-            } else if (!isTable) {
-              // 增加基础样式下左侧选中数据不显示的逻辑
-              currentDataSource = generateData(transferDataSource.filter(item => !(hideLeftSelected && compValue.includes?.(item?.[uid]))));
-            } else {
-              currentDataSource = generateData([...dataSource]);
-            }
-          }
-          // 有选中数据的时候，左侧数据发生改变，则会导致右侧是数据被重新渲染。
-          // 这里如果是渲染右侧数据，则取之前保存的数据进行渲染
-          if (direction === 'right') {
-            currentDataSource = [...filteredItems];
-            // 删除children字段, 由于原先字段默认值配置的是false，这里就保持一致
-            currentDataSource.forEach(row => {
-              if (row[childrenColumnName || 'false']) {
-                delete row[childrenColumnName || 'false'];
-              }
-            });
-          }
-          return (
-            <Table
-              locale={{
-                emptyText: <EmptyComp dataState={dataState} getLocale={getLocale} />,
-              }}
-              columns={finalColumns}
-              dataSource={currentDataSource}
-              rowKey={`${uid}`}
-              showHeader={isTable}
-              rowSelection={rowSelection}
-              className={!isTable ? `${prefixCls}-table-hideBorder` : ''}
-              childrenColumnName={isTable ? childrenColumnName || 'false' : 'false'}
-              scroll={scroll}
-              onRow={({ key, disabled: itemDisabled }: any) => ({
-                onClick: () => {
-                  if (itemDisabled || listDisabled || (direction === 'left' && compValue.includes(key))) {
-                    return;
-                  }
-                  onItemSelect(key as string, !listSelectedKeys.includes(key as string));
-                },
-              })}
-              size={size === 'large' ? 'middle' : 'small'}
-              pagination={direction === 'left' ? pagination : !!props.page}
-            />
-          );
-        }}
-      </Transfer>
-    );
-  };
-  // 展开 dataSource
-  const renderTransferTree = () => {
-    // 是否选中
-    const isChecked = (selectedKeys: (string | number)[], eventKey: string | number) => selectedKeys.includes(eventKey);
-    // 格式化数据
-    const generateData = (list: any[]): any[] => {
-      return list?.map((item: any) => {
-        return {
-          ...item,
-          key: item[uid],
-          title: item[labelCode],
-          disabled: compValue?.includes(item[uid]),
-          children: generateData(childrenColumnName ? item[childrenColumnName] : item.children),
-        };
-      });
-    };
-    const transferDataSource: any[] = [];
-    function flatten(list: any[] = []) {
-      list.forEach(item => {
-        transferDataSource.push(item);
-        flatten(item.children);
-      });
-    }
-    flatten(dataSource);
-    return (
-      <Transfer {...commonProps} dataSource={transferDataSource}>
-        {({ direction, onItemSelect, selectedKeys, filteredItems }) => {
-          if (direction === 'left') {
-            const targetKeysData: any = [];
-            // eslint-disable-next-line no-inner-declarations
-            function flattenTreeData(obj: any) {
-              // 将过滤的所有数据id存储，用于后面对比
-              if (obj) {
-                if (Array.isArray(obj)) {
-                  obj.forEach(item => {
-                    targetKeysData.push(item.key);
-                    flattenTreeData(item.children);
-                  });
-                } else {
-                  targetKeysData.push(obj?.key);
-                  flattenTreeData(obj?.children);
-                }
-              }
-            }
-            const checkedKeys = [...selectedKeys, ...(compValue || [])];
-            let curTreeData: any[] = [];
-            if (searchVal.current) {
-              const targetFilterData = generateData(filteredItems);
-              if (targetFilterData && Array.isArray(targetFilterData) && targetFilterData.length) {
-                // 如果搜索父级里面和子级含有相同的文字，会导致数据有问题，所以条件搜索的情况直接将数据按照一级展示
-                targetFilterData.forEach(item => {
-                  if (!targetKeysData.includes(item.key)) {
-                    // 过滤会将子级也过滤进来 eg [{key:1,label:1,children:[{key:2,label:2},{key:3,label:3}]},{key:2,label:2}],需要将子级{key:2,label:2}过滤
-                    curTreeData.push(item);
-                  }
-                  flattenTreeData(item);
-                });
-              }
-            } else {
-              curTreeData = generateData(dataSource);
-            }
-            return (
-              <Tree
-                treeData={[...curTreeData]}
-                checkable
-                checkStrictly
-                blockNode
-                defaultExpandAll
-                fieldNames={{
-                  title: labelCode,
-                  key: uid,
-                  children: childrenColumnName,
-                }}
-                checkedKeys={checkedKeys}
-                onCheck={(_, { node: { key } }) => {
-                  onItemSelect(key as string, !isChecked(checkedKeys, key));
-                }}
-                onSelect={(_, { node: { key } }) => {
-                  onItemSelect(key as string, !isChecked(checkedKeys, key));
-                }}
-                disabled={disabled}
-              />
-            );
-          }
-          return null;
-        }}
-      </Transfer>
-    );
-  };
-
-  const renderTransferContent = useMemo(() => {
-    let resComp: any = null;
-    switch (displayStyle) {
-      case 'tree':
-        resComp = renderTransferTree();
-        break;
-      case 'table':
-        resComp = renderTransferTable(true);
-        break;
-      default:
-        resComp = renderTransferTable(false);
-        break;
-    }
-    return resComp;
-  }, [props, compValue, pagination, dataSource, transferLeftTitle, transferRightTitle]);
+      // 设置右侧标题
+      setTransferRightTitle(_title: string) {
+        setTransferRightTitle(_title);
+      },
+      // 设置左侧
+      setTransferLeftTitle(_title: string) {
+        setTransferLeftTitle(_title);
+      },
+    });
 
   const finalRules = useMemo(() => {
-    const rules: any[] = [
-      {
-        required,
-        message: getLocale?.('notEmpty', { name }),
-      },
-    ];
+    const rules: any[] = [{
+      required,
+      message: getLocale?.('notEmpty', { name }),
+    }];
 
     if (min && +min >= 0) {
       const rule: any = {
@@ -658,9 +64,7 @@ const MyTransfer = LingxiForwardRef<any, MyTransferProps>((props, ref) => {
     }
     return rules;
   }, [required, min, name, max, lang]);
-
-  // console.log(compValue, 'compValue===');
-
+  console.log('=======disabled', disabled);
   return (
     <FormFields
       {...getFieldsProps(props)}
@@ -674,10 +78,18 @@ const MyTransfer = LingxiForwardRef<any, MyTransferProps>((props, ref) => {
       value={compValue}
       defaultValue={[]}
     >
-      {renderTransferContent}
-    </FormFields>
-  );
+      <TransferLoad
+        {...props}
+        formFieldsRef={formFieldsRef}
+        readOnly={readOnly}
+        required={required}
+        disabled={disabled}
+        dataSource={dataSource ?? []}
+        transferLeftTitle={transferLeftTitle}
+        transferRightTitle={transferRightTitle}
+        value={compValue}
+      />
+    </FormFields>);
 });
 
-export default MyTransfer;
-export { WrapperTransfer };
+export default Transfer;