@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/pcpublic/src/components/pcfactory/src/FormList/FormListMain.tsx

@@ -0,0 +1,205 @@
+import React, { useImperativeHandle, useMemo, useRef } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { IFormListMainProps } from './type';
+import useFormListPaginationData from './hooks/useFormListPaginationData';
+import FormListLoader from './loader';
+import { message } from 'antd';
+import { antPrefix } from '../variables';
+import { useMemoizedFn } from 'ahooks';
+  
+
+/**
+ * 表单列表控件
+ */
+const FormListMain = LingxiForwardRef<any, IFormListMainProps>((props, ref) => {
+  const {
+    onChange,
+    rowKey,
+    formDisplayType,
+    maxSize,
+  } = props;
+
+  const tableMode = useMemo(() => {
+    return ['standardTable'].includes(formDisplayType);
+  }, [formDisplayType]);
+
+  const useFormListResult = useFormListPaginationData({
+    ...props,
+    onDataListChange: (dataList) => {
+      onChange(dataList);
+    } });
+
+  const { handleAction, dataList, currentDataList, selectedKeys, resetDataList, getCurrentPageData, getDataListForActionType } = useFormListResult;
+
+  const imperativeHandleRef = useRef<any>({});
+
+  const wrapperRef = useRef<HTMLDivElement>();
+
+  /**
+   * 表单列表
+   */
+  const formListRef = useRef<any[]>([]);
+
+
+  /**
+   * 表格模式下滚动到错误字段处
+   */
+  const scrollToErrorFieldInTableMode = useMemoizedFn(() => {
+    if (tableMode && wrapperRef.current) {
+      setTimeout(() => {
+        if (wrapperRef.current) {
+          const errorDom = wrapperRef.current.querySelector(`.${antPrefix}-form-item-has-error`);
+          errorDom?.scrollIntoView?.({ behavior: 'smooth' });
+        }
+      }, 50);
+    }
+  });
+
+  imperativeHandleRef.current = {
+    // 当前页数据校验并取值
+    validateCurrentPageForm: () => {
+      return Promise.all(
+        formListRef.current
+          .filter(el => !!el?.form)
+          .map(formItem => formItem.validateFormAndScroll(true))
+      )
+        .then(values => {
+          // 表单模式下取 [0]data 作为子表单项返回值
+          if (tableMode) {
+            return values[0]?.data;
+          }
+          return values;
+        }).catch(errors => {
+          // NOTE 表格模式下需要自己实现滚动
+          if (errors?.errorFields?.length > 0) {
+            scrollToErrorFieldInTableMode();
+          }
+          // 有表单验证失败，处理错误信息
+          // errors 包含每个表单的验证错误信息，可以根据需要处理
+          return errors;
+        });
+    },
+
+    // 当前页数据取值
+    getCurrentPageData: () => {
+      return getCurrentPageData() || [];
+    },
+
+    // 重置当前子表单
+    resetForm: () => {
+      // 重置逻辑
+      formListRef.current.forEach(item => {
+        item?.form?.resetFields();
+      });
+    },
+
+    // 获取选中行
+    getTableSelected: () => {
+    // 获取选中行逻辑
+      return selectedKeys.map(key => dataList.find(el => el[rowKey] === key)).filter(Boolean);
+    },
+
+    // 获取选中行主键
+    getTableSelectedKey: () => {
+    // 获取主键逻辑
+      return selectedKeys;
+    },
+
+    // 获取当前页选中行
+    getTableCurrentPageSelected: () => {
+    // 获取当前页选中行逻辑
+      return selectedKeys.map(key => currentDataList.find(el => el[rowKey] === key)).filter(Boolean);
+    },
+
+    // 获取当前页选中行主键
+    getTableCurrentPageSelectedKey: () => {
+    // 获取当前页选中行主键逻辑
+      return selectedKeys.filter(key => currentDataList.find(el => el[rowKey] === key));
+    },
+
+    // 加载数据
+    setDataSource: (dataSource: any[]) => {
+      // 加载数据逻辑
+      if (Array.isArray(dataSource)) {
+        if (dataSource.length > maxSize) {
+          message.warning(`最大条数限制 ${maxSize} 条，请检查数据后再操作`);
+          return;
+        }
+        resetDataList(dataSource);
+      }
+    },
+
+    // 新增一行空白数据
+    addTableEmptyRow: () => {
+    // 新增空白行逻辑
+      handleAction.addOne();
+    },
+
+    // 新增一行数据
+    addTableRowData: (rowData: any) => {
+    // 新增行数据逻辑
+      handleAction.addOne(rowData);
+    },
+
+    // 设置选中行
+    setSelectedRowKeys: (rowIds: string | string[]) => {
+    // 设置选中行逻辑
+      handleAction.onSelect(rowIds);
+    },
+
+    // 设置行数据
+    setTableRowData: (rowId: string, rowData: any) => {
+    // 设置行数据逻辑
+      handleAction.updateDataByRowId(rowId, rowData, false);
+    },
+
+    /**
+     * 删除指定行数据 => 表格删除行入参
+     * @param type 配置数据
+     * @param data 解析值
+     */
+    deleteTableRow: (type: string, data: string) => {
+      const rowId = typeof data === 'object' ? data[rowKey] : data;
+      // 删除行数据逻辑
+      handleAction.deleteByRowId(rowId);
+    },
+
+    // 清除选中数据
+    clearTableSelected: () => {
+      // 清除选中数据逻辑
+      handleAction.onSelectAll(false);
+    },
+
+    // 过程动作数据
+    getDataListForActionType: () => {
+      return getDataListForActionType();
+    },
+    // 获取表单实例列表
+    getFormInstList: () => {
+      return formListRef.current;
+    },
+  };
+
+  useImperativeHandle(ref, () => {
+    const actions:any = {};
+    Object.keys(imperativeHandleRef.current).forEach(key => {
+      actions[key] = (...args: any[]) => imperativeHandleRef.current[key](...args);
+    });
+
+    return actions;
+  }, []);
+  
+
+  return (
+    <FormListLoader
+      {...props}
+      {...useFormListResult}
+      formListRef={formListRef}
+      getWrapperRef={(_ref: any) => {
+        wrapperRef.current = _ref;
+      }}
+    />
+  );
+});
+  
+export default FormListMain;

package/lib/pcpublic/src/components/pcfactory/src/FormList/FormListProvider.tsx

@@ -0,0 +1,25 @@
+import { useContext, createContext } from 'react';
+
+
+export interface FormListContextProps {
+    prefixNamePaths: any[];
+}
+
+
+export const formListContext = createContext<FormListContextProps>({
+  prefixNamePaths: [],
+});
+
+formListContext.displayName = 'PCFactoryFormListContext';
+
+const FormListProvider = formListContext.Provider;
+
+const useFormListContext = () => {
+  return useContext(formListContext);
+};
+
+
+export {
+  FormListProvider,
+  useFormListContext,
+};

package/lib/pcpublic/src/components/pcfactory/src/FormList/components/WrapperContainer.tsx

@@ -0,0 +1,266 @@
+import React, { useMemo, useRef } from 'react';
+import { IFormListComponentProps } from '../type';
+import { usePersistFn } from '../../utils/ahooks';
+import ExtraButtonComp from '../../utils/ExtraButtonComp';
+import TitleComp from '../../FormGroup/TitleComp';
+import { formGroupPrefixCls } from '../../FormGroup/FormGroup';
+import { Checkbox, Pagination, Popconfirm } from 'antd';
+import classNames from 'classnames';
+import useBackgroundStyle from '../../View/useBackgroundStyle';
+import AnalysisCustomDataModal, { AnalysisCustomDataModalHooks } from '../../utils/AnalysisCustomDataModal';
+
+export const formListPrefixCls = 'ued-form-list';
+
+export interface WrapperContainerProps extends IFormListComponentProps {
+    children: React.ReactNode;
+
+    /**
+     * 是否配置态
+     */
+    source: 'editor' | 'engine';
+}
+
+const WrapperContainer:React.FC<WrapperContainerProps> = props => {
+  const {
+    children,
+    source = 'engine',
+    handleExtends = [],
+    actionPosition,
+    page,
+    pagination,
+    selectAllFlag,
+    handleAction,
+    rowSelection,
+    selectedKeys = [],
+    style,
+    showSelectLabel = false,
+    formDisplayType,
+    dataList,
+    getTemplateRequestData,
+    rowKey,
+    className,
+    allowAdd,
+    disabledOrReadOnly,
+    getEngineApis,
+  } = props;
+
+
+  const analysisCustomDataModalRef = useRef<AnalysisCustomDataModalHooks>();
+
+
+  const titleStyle = useMemo(() => {
+    return JSON.parse(JSON.stringify({
+      color: props.mainTitleColor,
+      fontSize: props.mainTitleFontSize,
+      fontWeight: props.mainTitleFontWeight,
+      lineHeight: props.mainTitleLineHeight,
+    }));
+  }, [props.mainTitleColor, props.mainTitleFont, props.mainTitleFontWeight, props.mainTitleLineHeight]);
+
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis: source === 'editor' ? props?.getEdEngineApi : props?.getEngineApis(),
+    backgroundType: props.backgroundType,
+    mode: source,
+  });
+
+  const renderHandleExtends = useMemo(() => {
+    if (source === 'editor') {
+      return handleExtends;
+    }
+    return handleExtends.filter(item => {
+      if (item.type && disabledOrReadOnly && item.type !== 'export') {
+        return false;
+      }
+      return true;
+    });
+  }, [handleExtends, disabledOrReadOnly]);
+
+  const renderActions = usePersistFn(() => {
+    return (
+      <div className={
+        classNames(
+          `${formListPrefixCls}-wrapper-header-actions`,
+        )}
+      >
+        {
+          (renderHandleExtends || []).map(_item => {
+            const item = { ..._item };
+            if (item.type === 'addRow' && !allowAdd) {
+              item.disabled = true;
+            }
+            if (item.type === 'batchDelete') {
+              return (
+                <Popconfirm
+                  title="确认删除所选数据吗？"
+                  overlayClassName="ued-pop-confirm"
+                  onConfirm={() => {
+                    // @ts-ignore
+                    props[item.value]?.(selectedKeys, dataList.filter(dataItem => selectedKeys.includes(dataItem[rowKey])));
+                    handleAction.batchDelete(selectedKeys);
+                  }}
+                >
+                  <ExtraButtonComp
+                    source={source}
+                    buttonConfig={item as any}
+                    compProps={props as any}
+                    style={{ marginLeft: 4 }}
+                  />
+                </Popconfirm>
+              );
+            }
+            return (
+              <ExtraButtonComp
+                source={source}
+                buttonConfig={item as any}
+                compProps={props as any}
+                onClick={(e) => {
+                  switch (item.type) {
+                    // 新增一行
+                    case 'addRow':
+                      handleAction.addOne();
+                      break;
+                    case 'import':
+                      analysisCustomDataModalRef.current?.open({
+                        templateDataObject: getTemplateRequestData?.(),
+                        onSuccess: (resultList) => {
+                          if (Array.isArray(resultList)) {
+                            if (!props.checkIsOverSize(resultList.length)) {
+                              handleAction.appendList(resultList);
+                              return {
+                                close: true,
+                                status: 'success',
+                              };
+                            }
+                            return {
+                              close: false,
+                              status: 'fail',
+                              message: `最大条数限制 ${props.maxSize} 条，请删除数据后再操作。`,
+                            };
+                          }
+                          return {
+                            close: false,
+                            status: 'fail',
+                          };
+                        },
+                      });
+                      break;
+                    default:
+                      break;
+                  }
+
+                  // @ts-ignore
+                  props[item.value]?.();
+                }}
+                style={{ marginLeft: 4 }}
+              />
+            );
+          })
+        }
+      </div>
+    );
+  });
+
+  /**
+   * 已选文本
+   */
+  const renderSelectLabel = useMemo(() => {
+    if (showSelectLabel && rowSelection === 'checkbox' && !disabledOrReadOnly) {
+      return (
+        <div className={`${formListPrefixCls}-wrapper-header-selectLabel`}>
+          {`已选：${selectedKeys.length}项`}
+        </div>
+      );
+    }
+    return null;
+  }, [showSelectLabel, selectedKeys.length]);
+
+  return (
+    <div
+      className={classNames(
+        `${formListPrefixCls}-wrapper`,
+        `${formListPrefixCls}-wrapper-${props.size}`,
+        className
+      )}
+      style={{
+        ...backgroundStyle,
+        ...(style || {}),
+      }}
+      ref={(_ref) => {
+        props?.getWrapperRef?.(_ref);
+      }}
+    >
+      <div className={
+        classNames(
+          `${formListPrefixCls}-wrapper-header`,
+          {
+            [`${formListPrefixCls}-editor`]: source === 'editor',
+          }
+        )}
+      >
+        <div className={`${formListPrefixCls}-common-title`}>
+          {
+            rowSelection === 'checkbox' && formDisplayType === 'standardForm' && !disabledOrReadOnly ? <Checkbox
+              indeterminate={!!selectedKeys.length && !selectAllFlag}
+              checked={selectAllFlag}
+              onChange={(e) => {
+                handleAction.onSelectAll(e.target.checked);
+              }}
+            /> : null
+          }
+          <TitleComp
+            {...props}
+            title={props.name}
+            getEngineApis={props?.getEngineApis}
+            $$componentItem={props?.$$componentItem}
+            prefixCls={formGroupPrefixCls}
+            iconType={props?.titleIconType}
+            hasIcon={props.hasIcon}
+            prefixIcon={props.titlePrefixIcon}
+            isED={source === 'editor'}
+            titleStyle={titleStyle}
+          />
+        </div>
+        <div className={`${formListPrefixCls}-wrapper-header-control`}>
+          {actionPosition === 'rightTop' && renderSelectLabel}
+          {actionPosition === 'rightTop' && renderActions()}
+        </div>
+      </div>
+      <div className={`${formListPrefixCls}-wrapper-content`}>
+        {children}
+      </div>
+      <div className={classNames(
+        `${formListPrefixCls}-wrapper-footer`,
+        {
+          [`${formListPrefixCls}-editor`]: source === 'editor',
+        }
+      )}
+      >
+        <div className={`${formListPrefixCls}-wrapper-header-control`}>
+          {actionPosition === 'leftBottom' && renderActions()}
+          {actionPosition === 'leftBottom' && renderSelectLabel}
+        </div>
+        <div>
+          {
+           page && (dataList?.length > (pagination?.pageSize || 0) || source === 'editor') ?
+             <Pagination
+               {...pagination}
+               size="small"
+             /> : null
+         }
+        </div>
+      </div>
+      {
+        source === 'engine' && (
+          <AnalysisCustomDataModal
+            getEngineApis={getEngineApis}
+            appId={props.$$componentItem?.appId}
+            pageId={props.$$componentItem?.pageId}
+            forwardRef={analysisCustomDataModalRef}
+          />
+        )
+      }
+    </div>
+  );
+};
+
+export default WrapperContainer;