@lingxiteam/ebe-utils 0.5.0 → 0.5.2

package/lib/public/src/components/pcfactory/src/Table/TableHead/index.tsx

@@ -0,0 +1,501 @@
+/* eslint-disable no-nested-ternary */
+import { Icon } from '@lingxiteam/icons';
+import { Button, Checkbox, Divider, Popover, Tooltip, Tree } from 'antd';
+import type { ButtonType } from 'antd/lib/button';
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import type { FunctionHandleType } from '../../Card';
+import CommIconEg from '../../Icon';
+import CommIconEd from '../../Icon/IconED';
+import IconFont from '../../IconFont';
+import { useLocale } from '../../utils/hooks/useLocale';
+
+const prefix = 'table-head';
+const { TreeNode } = Tree;
+
+enum BtnSize {
+  'default' = 'large',
+  'middle' = 'default',
+  'small' = 'small',
+}
+export interface MyTableHeadProps {
+  showHead?: boolean;
+  tableTitle?: string;
+  showCustom?: any;
+  customStyle?: ButtonType;
+  customTitle?: string;
+  type?: string;
+  iconPosition?: string;
+  isIconFont?: boolean;
+  headExtends?: any[];
+  theme?: 'filled' | 'outlined' | 'twoTone';
+  fontAddress?: string;
+  columns?: any[];
+  onHeadClickBtn1?: FunctionHandleType;
+  onHeadClickBtn2?: FunctionHandleType;
+  onHeadClickBtn3?: FunctionHandleType;
+  onHeadClickBtn4?: FunctionHandleType;
+  onHeadClickBtn5?: FunctionHandleType;
+  selectedCols?: any[];
+  setSelectedCols?: any;
+  setColOrder?: (value: React.SetStateAction<any[]>) => any | undefined;
+  source: 'editor' | 'engine';
+  size?: any;
+  colOrder?: any[];
+  iconFile?: any;
+  headBtnNum?: number;
+  sandBoxSafeRun?: any;
+  engineApis?: any;
+  getEdEngineApi?: any;
+}
+const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
+  const {
+    showHead,
+    tableTitle,
+    source = 'editor',
+    showCustom,
+    headExtends,
+    columns,
+    setSelectedCols,
+    selectedCols,
+    setColOrder,
+    onHeadClickBtn1,
+    onHeadClickBtn2,
+    onHeadClickBtn3,
+    onHeadClickBtn4,
+    onHeadClickBtn5,
+    iconFile,
+    colOrder,
+    headBtnNum = 3,
+    sandBoxSafeRun,
+    engineApis,
+  } = props;
+  const CommIcon = source === 'editor' ? CommIconEd : CommIconEg;
+
+  const { getLocale } = useLocale(engineApis);
+
+  const {
+    hasCustom = false,
+    iconPosition,
+    type,
+    theme,
+    fontAddress,
+    isIconFont,
+    customTitle,
+    customStyle,
+    iconFile: newIconFile,
+  } = !showCustom || typeof showCustom === 'boolean' ? ({} as any) : showCustom; // 兼容旧数据,旧数据是true、false、undefined
+
+  const [checkedKeys, checkedMap] = useMemo(() => {
+    const map: any = {};
+    if (selectedCols === undefined) {
+      return [
+        columns?.map((c: any) => {
+          map[c.dataIndex] = c;
+          return c.dataIndex;
+        }),
+        map,
+      ];
+    }
+    return [
+      selectedCols.map((c: any) => {
+        map[c] = c;
+        return c;
+      }),
+      map,
+    ];
+  }, [selectedCols, columns]);
+
+  const orderMap = useMemo(() => {
+    const map: any = {};
+    if (colOrder) {
+      colOrder.forEach((c: any) => {
+        map[c] = c;
+      });
+    }
+    return map;
+  }, [colOrder]);
+
+  const renderExtendBtn = (
+    _headExtends: any,
+    isPopover = false,
+    onClicks: FunctionHandleType[] = [],
+  ) => {
+    if (Array.isArray(_headExtends)) {
+      // const onClicks = visibleClick.length ? visibleClick : [
+      //   onHeadClickBtn1,
+      //   onHeadClickBtn2,
+      //   onHeadClickBtn3,
+      //   onHeadClickBtn4,
+      //   onHeadClickBtn5,
+      // ] as FunctionHandleType[];
+      return _headExtends.map((c, i) => {
+        const {
+          icon,
+          iconPos,
+          id,
+          btnType,
+          btnSize,
+          isIcon,
+          rule,
+          visible: buttonVisible = true,
+          disabled,
+        } = c;
+        const handleOnClick = (e: any) => {
+          if (typeof onClicks[i] === 'function') {
+            onClicks[i](e);
+          }
+        };
+        const BtnIcon = icon ? (
+          <Tooltip title={c.title}>
+            <Button
+              className={classnames(
+                'iconBtn',
+                `table-head-btn-${btnSize || 'default'}`,
+              )}
+              type="link"
+              disabled={disabled}
+              key={isIcon && id}
+              size={btnSize}
+              onClick={isIcon && handleOnClick}
+            >
+              <CommIcon
+                icon={icon}
+                className=""
+                $$componentItem={props.$$componentItem}
+                getEngineApis={props.getEngineApis}
+                engineApis={engineApis}
+                getEdEngineApi={props.getEdEngineApi}
+              />
+            </Button>
+          </Tooltip>
+        ) : undefined;
+        if (source === 'engine') {
+          try {
+            if (sandBoxSafeRun(rule)) {
+              return null;
+            }
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(e);
+          }
+        }
+
+        return (
+          <>
+            {' '}
+            {isPopover ? (
+              <div>
+                {buttonVisible ? (
+                  isIcon ? (
+                    BtnIcon
+                  ) : (
+                    <Button
+                      type="link"
+                      disabled={disabled}
+                      key={id}
+                      className={classnames(
+                        'btn',
+                        `table-head-btn-${btnSize || 'default'}`,
+                      )}
+                      size={btnSize}
+                      onClick={handleOnClick}
+                    >
+                      {iconPos && iconPos === 'left' && icon && (
+                        <CommIcon
+                          icon={icon}
+                          className=""
+                          $$componentItem={props.$$componentItem}
+                          getEngineApis={props.getEngineApis}
+                          engineApis={engineApis}
+                          getEdEngineApi={props.getEdEngineApi}
+                        />
+                      )}
+                      {c.title}
+                      {iconPos && iconPos === 'right' && icon && (
+                        <CommIcon
+                          icon={icon}
+                          className=""
+                          $$componentItem={props.$$componentItem}
+                          getEngineApis={props.getEngineApis}
+                          engineApis={engineApis}
+                          getEdEngineApi={props.getEdEngineApi}
+                        />
+                      )}
+                    </Button>
+                  )
+                ) : null}
+              </div>
+            ) : buttonVisible ? (
+              isIcon ? (
+                BtnIcon
+              ) : (
+                <Button
+                  disabled={disabled}
+                  key={id}
+                  className={classnames(
+                    'btn',
+                    `table-head-btn-${btnSize || 'default'}`,
+                  )}
+                  type={btnType}
+                  size={btnSize}
+                  onClick={handleOnClick}
+                >
+                  {iconPos && iconPos === 'left' && icon && (
+                    <CommIcon
+                      icon={icon}
+                      className=""
+                      $$componentItem={props.$$componentItem}
+                      getEngineApis={props.getEngineApis}
+                      engineApis={engineApis}
+                      getEdEngineApi={props.getEdEngineApi}
+                    />
+                  )}
+                  {c.title}
+                  {iconPos && iconPos === 'right' && icon && (
+                    <CommIcon
+                      icon={icon}
+                      className=""
+                      $$componentItem={props.$$componentItem}
+                      getEngineApis={props.getEngineApis}
+                      engineApis={engineApis}
+                      getEdEngineApi={props.getEdEngineApi}
+                    />
+                  )}
+                </Button>
+              )
+            ) : null}
+          </>
+        );
+      });
+    }
+    return undefined;
+  };
+  const renderHeaderBtn = () => {
+    if (Array.isArray(headExtends) && headExtends.length) {
+      const onClicks = [
+        onHeadClickBtn1,
+        onHeadClickBtn2,
+        onHeadClickBtn3,
+        onHeadClickBtn4,
+        onHeadClickBtn5,
+      ] as FunctionHandleType[];
+      const visibleClick: any = [];
+      const visibleBtn: any = [];
+      headExtends.forEach((item, index) => {
+        if (item.visible !== false && item?.checked !== false) {
+          visibleBtn.push(item);
+          if (item?.value) {
+            visibleClick.push(props[item?.value]); // 对应的value 直接获取扩展按钮当中对应的value
+          } else {
+            visibleClick.push(onClicks[index]); // 兼容旧数据
+          }
+        }
+      });
+      // if (headExtends.length <= headBtnNum) {
+      //   return renderExtendBtn(headExtends, false, visibleClick);
+      // } else {
+      if (visibleBtn.length <= headBtnNum) {
+        return renderExtendBtn(visibleBtn, false, visibleClick);
+      }
+      const tempList = [...visibleBtn];
+      const preList = tempList.splice(0, headBtnNum);
+      const preClick = visibleClick.splice(0, headBtnNum);
+      const content = (
+        <div style={{ maxHeight: '300px', overflow: 'auto' }}>
+          {renderExtendBtn(tempList, true, visibleClick)}
+        </div>
+      );
+      return (
+        <>
+          {renderExtendBtn(preList, false, preClick)}
+          <Divider type="vertical" />
+          <Popover content={content} trigger="click">
+            <Button type="link" key="more">
+              <div className="ued-table-actions-extendBtn">
+                {getLocale?.('more')}
+                <Icon className="actIcon-left" type="down" />
+              </div>
+            </Button>
+          </Popover>
+        </>
+      );
+
+      // }
+    }
+    return null;
+  };
+  const renderCustomContent = () => {
+    return (
+      <Tree
+        selectable={false}
+        onCheck={(keys) => {
+          setSelectedCols(keys);
+        }}
+        draggable={{ icon: false }}
+        onDrop={({ dragNodesKeys, dropPosition, node }) => {
+          const { dragOverGapTop = false } = (node as any)?.props || {};
+          if (typeof setColOrder === 'function') {
+            setColOrder((pre: any) => {
+              let orders: string[] = [...pre];
+              // 旧顺序列表为空时，表示是采用原始顺序
+              if (pre.length === 0) {
+                orders = columns?.map((c: any) => c.dataIndex) || [];
+              }
+              if (pre.length !== columns?.length) {
+                // 前后顺序列表不一致时，表格列发生变化
+                const extendCols: any[] = [];
+                columns?.forEach((col: any) => {
+                  if (!orderMap[col.dataIndex]) {
+                    extendCols.push(col.dataIndex);
+                  }
+                });
+                orders = orders.filter((o) => orderMap[o]).concat(extendCols);
+              }
+              const index = orders.findIndex((o) => o === dragNodesKeys[0]);
+              const dropPos = dropPosition + (dragOverGapTop ? 1 : 0);
+              if (index === dropPos) {
+                return orders;
+              }
+              if (index > dropPos) {
+                orders.splice(index, 1);
+                orders.splice(dropPos, 0, dragNodesKeys[0] as string);
+              } else {
+                orders.splice(dropPos, 0, dragNodesKeys[0] as string);
+                orders.splice(index, 1);
+              }
+              return orders;
+            });
+          }
+        }}
+      >
+        {columns?.map((col: any) => (
+          <TreeNode
+            selectable={false}
+            title={
+              <div className="title">
+                <div className="icon">
+                  <IconFont
+                    width={16}
+                    height={16}
+                    iconClass="lcdp-icon-tuozhuai"
+                  />
+                </div>
+                <Checkbox
+                  checked={checkedMap[col.dataIndex] !== undefined}
+                  className="checkbox"
+                  onChange={(e) => {
+                    if (typeof setSelectedCols === 'function') {
+                      setSelectedCols(() => {
+                        if (e.target.checked) {
+                          return [...(checkedKeys || []), col.dataIndex];
+                        }
+                        return (checkedKeys || []).filter(
+                          (co: any) => co !== col.dataIndex,
+                        );
+                      });
+                    }
+                  }}
+                />
+                {checkedMap[col.dataIndex] ? (
+                  <a>{col.originTitle}</a>
+                ) : (
+                  col.originTitle
+                )}
+              </div>
+            }
+            key={col.dataIndex}
+          />
+        ))}
+      </Tree>
+    );
+  };
+
+  const renderCustomBtn = () => {
+    const Btn = (
+      <Button
+        type={customStyle}
+        size={(BtnSize as any)[props?.size || 'middle']}
+        className={classnames('btn', `table-head-btn-${props.size}`)}
+      >
+        {iconPosition && iconPosition === 'left' && (
+          <CommIcon
+            icon={{
+              type,
+              theme,
+              isIconFont,
+              fontAddress,
+              iconFile: iconFile || newIconFile,
+            }}
+            getEngineApis={props.getEngineApis}
+            $$componentItem={props.$$componentItem}
+            className=""
+            getEdEngineApi={props.getEdEngineApi}
+          />
+        )}
+        {customTitle}
+        {iconPosition && iconPosition === 'right' && (
+          <CommIcon
+            icon={{
+              type,
+              theme,
+              isIconFont,
+              fontAddress,
+              iconFile: iconFile || newIconFile,
+            }}
+            getEngineApis={props.getEngineApis}
+            $$componentItem={props.$$componentItem}
+            className=""
+            getEdEngineApi={props.getEdEngineApi}
+          />
+        )}
+      </Button>
+    );
+    if (source === 'engine') {
+      return (
+        <Popover
+          overlayClassName={`${prefix}-popContent`}
+          trigger="click"
+          content={renderCustomContent()}
+          placement="bottomRight"
+          title={
+            <>
+              <div className="popHead">
+                <span>
+                  {getLocale?.('Table.headCol')}
+                  <a>({checkedKeys?.length})</a>
+                </span>
+                <a
+                  className="extend"
+                  onClick={() => {
+                    setSelectedCols(columns?.map((c: any) => c.dataIndex));
+                    setColOrder([]);
+                  }}
+                >
+                  {getLocale?.('reset') || '重置'}
+                </a>
+              </div>
+              <span className="tips">{getLocale?.('Table.headTips')}</span>
+            </>
+          }
+        >
+          {Btn}
+        </Popover>
+      );
+    }
+    return Btn;
+  };
+
+  return showHead ? (
+    <div className={classnames(prefix, `${prefix}-${props.size}`)}>
+      <div className={classnames('title', `${prefix}-title`)}>{tableTitle}</div>
+      <div className="extend">
+        {renderHeaderBtn()}
+        {(typeof showCustom === 'boolean' ? showCustom : hasCustom) &&
+          renderCustomBtn()}
+      </div>
+    </div>
+  ) : null;
+};
+
+export default TableHead;

package/lib/public/src/components/pcfactory/src/Table/TableSummaryRow/index.tsx

@@ -0,0 +1,46 @@
+import { Table, TableProps } from 'antd';
+import useSummaryCol, { SummaryProps } from '../hooks/useSummaryCol';
+import { SummaryConfig } from '../types/prop';
+
+const { Row, Cell } = Table.Summary;
+export interface SummaryRowProps<T> {
+  dataSource?: SummaryProps<T>['dataSource'];
+  columns?: SummaryProps<T>['columns'];
+
+  /**
+   * 合计行属性
+   */
+  summaryConfig?: SummaryConfig;
+
+  /**
+   * 默认总结行
+   */
+  summary?: TableProps<T>['summary'];
+}
+const TableSummaryRow = <T,>(props: SummaryRowProps<T>) => {
+  const { dataSource, columns, summaryConfig, summary } = props;
+  const { background } = summaryConfig || {};
+  const { summaryColList } = useSummaryCol({
+    dataSource,
+    columns,
+    summaryConfig,
+  });
+
+  return summaryColList?.length > 0 ? (
+    <Row
+      style={{
+        background,
+      }}
+    >
+      {summaryColList.map(({ colSpan, title, align }, i) => (
+        <Cell index={i} colSpan={colSpan || 1} align={align}>
+          {title}
+        </Cell>
+      ))}
+    </Row>
+  ) : (
+    ((summary?.(dataSource as any[]) || null) as any)
+  );
+};
+
+export default TableSummaryRow;

package/lib/public/src/components/pcfactory/src/Table/constant.ts

@@ -0,0 +1,73 @@
+export const SET_ROW_ALL_CELL_BACKGROUND_COLOR = 1; // 设置整行单元格颜色(背景+字体)
+export const SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR = 2; // 设置符合条件行的指定单元格颜色(背景+字体)
+export const SET_ROW_ALL_CELL_CONTENT_STYLE = 3; // 设置整行单元格内容样式
+export const SET_ROW_SPECIAL_CELL_CONTENT_STYLE = 4; // 设置符合条件行的指定单元格内容样式
+
+export const ROW_CELL_FORMAT_STYLE_MAP = {
+  [SET_ROW_ALL_CELL_BACKGROUND_COLOR]: '设置整行单元格颜色',
+  [SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR]: '设置符合条件行的指定单元格颜色',
+  [SET_ROW_ALL_CELL_CONTENT_STYLE]: '设置整行单元格内容样式',
+  [SET_ROW_SPECIAL_CELL_CONTENT_STYLE]: '设置符合条件行的指定单元格内容样式',
+};
+
+export const PURE_COLOUR_FILL = 'pureColourFill';
+export const POINT_TAG = 'pointTag';
+export const GHOST_TAG = 'ghostTag';
+export const FADE_COLOUR_TAG = 'fadeColourTag';
+export const PURE_COLOUR_TAG = 'pureColourTag';
+export const HYPER_LINK = 'hyperlink';
+
+export const ROW_CELL_CONTENT_STYLE_MAP = {
+  [PURE_COLOUR_FILL]: '纯色填充',
+  [POINT_TAG]: '圆点样式',
+  [GHOST_TAG]: '描边标签',
+  [FADE_COLOUR_TAG]: '方角标签',
+  [PURE_COLOUR_TAG]: '纯色标签',
+  [HYPER_LINK]: '超链接',
+};
+
+export const RELATION_OR = 'or';
+export const RELATION_AND = 'add'; // 历史因素，存量数据里都是 add，估计输错了
+export const OPERATOR_EQUAL = '=';
+export const OPERATOR_NOT_EQUAL = '!=';
+export const OPERATOR_GREATER_THAN = '>';
+export const OPERATOR_LESS_THAN = '<';
+export const OPERATOR_INCLUDE = 'include';
+export const OPERATOR_NOT_INCLUDE = 'notInclude';
+export const OPERATOR_STARTS_WITH = 'startsWith';
+export const OPERATOR_ENDS_WITH = 'endsWith';
+export const OPERATOR_NULL = 'null';
+export const OPERATOR_NOT_NULL = 'notNull';
+
+export const RELATION_MAP = {
+  [RELATION_OR]: '或',
+  [RELATION_AND]: '且',
+};
+
+export const OPERATOR_MAP = {
+  [OPERATOR_EQUAL]: '等于',
+  [OPERATOR_NOT_EQUAL]: '不等于',
+  [OPERATOR_GREATER_THAN]: '大于',
+  [OPERATOR_LESS_THAN]: '小于',
+  [OPERATOR_INCLUDE]: '包含',
+  [OPERATOR_NOT_INCLUDE]: '不包含',
+  [OPERATOR_STARTS_WITH]: '开头为',
+  [OPERATOR_ENDS_WITH]: '结尾为',
+  [OPERATOR_NULL]: '为空',
+  [OPERATOR_NOT_NULL]: '非空',
+};
+
+export const BODY_CELL_MODE_ED = 'editor';
+
+export const PAGE_JUMP = 'pageJump';
+export const OPEN_MODAL = 'openModal';
+export const DOWNLOAD_FILE = 'downloadFile';
+export const PREVIEW_FILE = 'previewFile';
+export const CUSTOM = 'custom';
+export const PREVIEW_POP_UP = 'popUp';
+export const PREVIEW_NEW_TAB = 'newTab';
+export const ROUTE_PUSH = 'push';
+export const ROUTE_REPLACE = 'replace';
+
+export const EDIT_COMPONENT_STOP_PROPAGATION_CLS =
+  'table-edit-component-stop-propagation';

package/lib/public/src/components/pcfactory/src/Table/hooks/index.ts

@@ -0,0 +1,32 @@
+import useCheckStrict from './useCheckStrict';
+import useCMDAction, { useCommonCMDAction } from './useCMDActions';
+import useColumns from './useColumns';
+import useCommon from './useCommon';
+import useDataSource from './useDataSource';
+import useExpandable from './useExpandable';
+import useFilter from './useFilter';
+import useFormatCell from './useFormatCell';
+import usePagination from './usePagination';
+import useRowEdit from './useRowEdit';
+import useRowMerge from './useRowMerge';
+import useScroll from './useScroll';
+import useSelection from './useSelection';
+import useSort from './useSort';
+
+export {
+  useExpandable,
+  useColumns,
+  useFormatCell,
+  useCMDAction,
+  useCommonCMDAction,
+  useCommon,
+  useDataSource,
+  useFilter,
+  usePagination,
+  useRowEdit,
+  useRowMerge,
+  useScroll,
+  useSelection,
+  useSort,
+  useCheckStrict,
+};