@lingxiteam/ebe-utils 0.2.22 → 0.2.23

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

@@ -1,44 +1,32 @@
-/* eslint-disable no-nested-ternary */
-/* eslint-disable eqeqeq */
-/* eslint-disable array-callback-return */
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-underscore-dangle */
-import { Form, Table } from 'antd';
-import classnames from 'classnames';
-import React, { useMemo, useRef } from 'react';
-import BodyCell from '../Table/BodyCell';
-import HeaderCell from '../Table/HeaderCell';
-import { useColumns, useCommon, useDataSource, useRowEdit, useScroll, useSelection } from '../Table/hooks';
-import TableHead from '../Table/TableHead';
-import type { MyTableProps } from '../Table/types/prop';
-import { useCreation } from '../utils/ahooks';
-import EmptyComp from '../utils/Empty';
+import React from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useCommon, useDataSource, useSelection } from '../Table/hooks';
 import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
 import { useLocale } from '../utils/hooks/useLocale';
 import { useCMDAction, useExpandable } from './hooks';
+import TableLoader from './loader';
+import IdleContainer from '../utils/IdleContainer';
 
-const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
-  const { dataSource: boundDataSource, visible = true, style: styles, className, onChange, $$componentItem, getEngineApis, ...restProps } = props;
+const Table = LingxiForwardRef<unknown, any>((props, ref) => {
+  const { dataSource: boundDataSource, $$componentItem, getEngineApis } = props;
 
   const { uid: compId } = $$componentItem;
-  const [form] = Form.useForm();
-
   const engineApis = getEngineApis?.();
-  const { sandBoxSafeRun, dataState } = engineApis || {};
+  const { sandBoxSafeRun } = engineApis || {};
 
   const { getLocale } = useLocale(engineApis);
 
   const funcExpExecute = useFuncExpExecute(sandBoxSafeRun as any, getLocale);
 
-  const appId = props?.appId || $$componentItem?.appId;
-  const pageId = props?.pageId || $$componentItem?.pageId;
-
-  const { currentRowKey, isBordered, innerClassName, setReplaceBoundDataSource, outerDataSource, outerDataSourceRef } = useCommon({
-    ...props,
-    boundDataSource,
-  });
+  const commonProps = useCommon({ ...props, boundDataSource });
+  const {
+    currentRowKey,
+    setReplaceBoundDataSource,
+    outerDataSource,
+    outerDataSourceRef,
+  } = commonProps;
 
-  const { innerDataSource, setInnerDataSource, setOuterDataSource, currentPageDataSource } = useDataSource({
+  const dataSourceProps = useDataSource({
     ...props,
     compId,
     currentRowKey,
@@ -47,52 +35,30 @@ const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     outerDataSource,
     outerDataSourceRef,
   });
+  const {
+    innerDataSource,
+    setInnerDataSource,
+    setOuterDataSource,
+    currentPageDataSource,
+  } = dataSourceProps;
 
-  // 根据id获取真实的下标，避免过滤和排序后影响下标
-  const { getRealIndexById } = useCreation(() => {
-    const indexMap = new Map<string | number, number>();
-    return {
-      getRealIndexById: (id: string | number) => {
-        if (indexMap.has(id)) {
-          return indexMap.get(id);
-        }
-        const index = (innerDataSource || []).findIndex((c: any) => c[currentRowKey] === id);
-        if (index !== -1) {
-          indexMap.set(id, index);
-        }
-        return index;
-      },
-    };
-  }, [innerDataSource, currentRowKey]);
-
-  const { rowSelection, selectedRows, selectedRowKeys, setSelectedRows, setSelectedRowKeys, setSelectedRowsRule, onRowSelected, onRowSelectClick } =
-    useSelection({
-      ...props,
-      innerDataSource,
-      currentRowKey,
-      currentPageDataSource,
-      funcExpExecute,
-    });
-
-  const { onRowDeleteClick, onRowEditClick, onRowDetailClick, onRowClick, onRowDoubleClick } = useRowEdit({
+  const selectionProps = useSelection({
     ...props,
-    funcExpExecute,
     innerDataSource,
-    outerDataSource,
-    setInnerDataSource,
     currentRowKey,
+    currentPageDataSource,
+    funcExpExecute,
+  });
+  const {
     selectedRows,
+    selectedRowKeys,
+    setSelectedRows,
+    setSelectedRowKeys,
+    setSelectedRowsRule,
     onRowSelected,
-    engineApis,
-  });
+  } = selectionProps;
 
-  const {
-    expandable: realExpandable,
-    childrenColumnName,
-    setChildrenColumnName,
-    setMode,
-    expandTableData,
-  } = useExpandable({
+  const expandProps = useExpandable({
     ...props,
     dataSource: innerDataSource,
     innerDataSource,
@@ -103,8 +69,14 @@ const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     engineApis,
     isTree: true,
   });
+  const {
+    childrenColumnName,
+    setChildrenColumnName,
+    setMode,
+    expandTableData,
+  } = expandProps;
 
-  const { loading, colServiceData } = useCMDAction({
+  const cmdProps = useCMDAction({
     ref,
     currentRowKey,
     childrenColumnName,
@@ -123,129 +95,18 @@ const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     expandTableData,
   });
 
-  const { tableRef, finalcolumns, columnWidth, setColumnWidth, initLoadColWidth, fixedAction } = useColumns({
-    ...props,
-    sandBoxSafeRun,
-    funcExpExecute,
-    engineApis,
-    form,
-    appId,
-    pageId,
-    compId,
-    innerDataSource,
-    currentRowKey,
-    colServiceData,
-    onRowDetailClick,
-    onRowDeleteClick,
-    onRowEditClick,
-    loading,
-    rowSelection,
-    getLocale,
-    getRealIndexById,
-  });
-
-  const { scroll, tableWrapRef, initTableWrapWidthRef, getTableWrapWidth } = useScroll({
-    ...props,
-    initLoadColWidth,
-    finalcolumns,
-    columnWidth,
-    setColumnWidth,
-  });
-
-  const superSelectTranslationMapRef: any = useRef(); // 防止state更新不及时，导致翻译无法获取翻译数据
-  if (!superSelectTranslationMapRef.current) {
-    superSelectTranslationMapRef.current = {};
-  }
-
-  const innerTableStyle: any = {};
-  if (styles?.overflowY) {
-    // 通过自定义样式给表格设置y轴滚动时， 认为希望只有表格滚动，但分页栏固定在底部
-    innerTableStyle.overflowY = styles.overflowY;
-  }
-
-  const handleTableChange = (newPagination: any, newFilters: any, newSorter: any, newExtra: any) => {
-    if (typeof onChange === 'function') {
-      onChange(newPagination, newFilters, newSorter, newExtra);
-    }
+  const innerProps = {
+    ...commonProps,
+    ...dataSourceProps,
+    ...selectionProps,
+    ...expandProps,
+    ...cmdProps,
   };
-
-  // 表格宽度需要根据列宽度赋值
-  const finalStyles = useMemo(() => {
-    const tmpStyle = { ...styles };
-    const tableWidth = getTableWrapWidth();
-    if (tableWrapRef.current && tableWidth) {
-      const realTableWidth = tableWidth >= initTableWrapWidthRef.current - 10 ? initTableWrapWidthRef.current - 9 : tableWidth;
-      tmpStyle.width = `${realTableWidth}px`;
-    }
-    return tmpStyle;
-  }, [columnWidth]);
-
-  return visible ? (
-    <div
-      // appId={appId} // TODO:先注释，不知道什么场景用到
-      // pageId={pageId} // TODO:先注释，不知道什么场景用到
-      data-compid={(props as any)?.['data-compid']}
-      style={finalStyles}
-      className={classnames('ued-table-wrap', className)}
-      ref={tableWrapRef}
-    >
-      <TableHead
-        {...restProps} // 涉及到不确定的事件，所以要这么传
-        source="engine"
-        columns={[]}
-        sandBoxSafeRun={sandBoxSafeRun}
-        engineApis={engineApis}
-      />
-      <Form form={form}>
-        <Table
-          locale={{
-            emptyText: <EmptyComp dataState={dataState} getLocale={getLocale} />,
-          }}
-          ref={tableRef}
-          bordered={isBordered}
-          className={innerClassName}
-          style={innerTableStyle}
-          components={{
-            body: {
-              cell: BodyCell,
-            },
-            header: {
-              cell: (info: any) => <HeaderCell {...info} tableData={innerDataSource} childrenColumnName={realExpandable.childrenColumnName} />,
-            },
-          }}
-          columns={finalcolumns.map((item, index) => {
-            // 固定列最后一项宽度根据本身计算返回
-            if (fixedAction && finalcolumns.length - 1 === index) {
-              return item;
-            }
-            item.width = columnWidth[index] || item.width;
-            return item;
-          })}
-          rowKey={currentRowKey}
-          scroll={scroll}
-          onChange={handleTableChange}
-          onRow={(record, index?: number) => {
-            return {
-              onClick: event => {
-                const hasOnRowClick = onRowClick(event, record, index);
-                !hasOnRowClick && onRowSelectClick(record, index);
-              }, // 点击行
-              onDoubleClick: event => {
-                onRowDoubleClick(event, record, index);
-              },
-              onContextMenu: event => {},
-              onMouseEnter: event => {}, // 鼠标移入行
-              onMouseLeave: event => {},
-            };
-          }}
-          rowSelection={rowSelection}
-          dataSource={innerDataSource}
-          expandable={realExpandable}
-          pagination={false}
-        />
-      </Form>
-    </div>
-  ) : null;
+  return (
+    <IdleContainer>
+      <TableLoader {...props} {...innerProps} />
+    </IdleContainer>
+  );
 });
 
-export default TreeTable;
+export default Table;

package/lib/pcpublic/src/components/pcfactory/src/TreeTable/loader.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+
+const TableLoader = Loadable<any, React.ComponentType<any>>({
+  loader: () => import(/* webpackChunkName: "pcfactory-TreeTable" */ './TreeTable'),
+  loading: LoadingComponennt,
+});
+
+export default TableLoader;
+
+
+// import TreeTable from './TreeTable';
+
+// export default TreeTable;

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

@@ -0,0 +1,34 @@
+import Loadable from 'react-loadable';
+
+const IconQuadrate = Loadable({
+  loader: () => import(/* webpackChunkName: 'IconQuadrate' */ './svg/quadrate'),
+  // eslint-disable-next-line react/react-in-jsx-scope
+  loading: () => <></>,
+});
+const IconRoundness = Loadable({
+  loader: () =>
+    import(/* webpackChunkName: 'IconRoundness' */ './svg/roundness'),
+  // eslint-disable-next-line react/react-in-jsx-scope
+  loading: () => <></>,
+});
+const IconSemicircle = Loadable({
+  loader: () =>
+    import(/* webpackChunkName: 'IconSemicircle' */ './svg/semicircle'),
+  // eslint-disable-next-line react/react-in-jsx-scope
+  loading: () => <></>,
+});
+const IconVerticalLine = Loadable({
+  loader: () =>
+    import(/* webpackChunkName: 'IconVerticalLine' */ './svg/verticalLine'),
+  // eslint-disable-next-line react/react-in-jsx-scope
+  loading: () => <></>,
+});
+
+const SystemIcon = {
+  IconQuadrate,
+  IconRoundness,
+  IconSemicircle,
+  IconVerticalLine,
+};
+
+export default SystemIcon;

package/lib/pcpublic/src/components/pcfactory/src/assets/svg/quadrate.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const IconQuadrate = (props: any) => {
+  const { className, style, width = '24px', height = '24px' } = props;
+  return (
+    <svg width={width} height={height} style={style} className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <rect x="7.5" y="7.5" width="14" height="14" rx="4" fillOpacity={1} />
+      <rect
+        x="2.5"
+        y="2.5"
+        width="14"
+        height="14"
+        rx="4"
+        fillOpacity="0.2"
+      />
+    </svg>
+  );
+};
+
+export default IconQuadrate;

package/lib/pcpublic/src/components/pcfactory/src/assets/svg/roundness.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const IconRoundness = (props: any) => {
+  const { className, style, width = '24px', height = '24px' } = props;
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} style={style} className={className} viewBox="0 0 24 24">
+      <rect x="6.5" y="6.5" width="16" height="16" rx="8" fillOpacity={1} />
+      <rect x="1.5" y="1.5" width="16" height="16" rx="8" fillOpacity="0.2" />
+    </svg>
+  );
+};
+
+export default IconRoundness;

package/lib/pcpublic/src/components/pcfactory/src/assets/svg/semicircle.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const IconSemicircle = (props: any) => {
+  const { className, style, width = '24px', height = '24px' } = props;
+  return (
+    <svg className={className} width={width} height={height} style={style} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0 3H9C13.9706 3 18 7.02944 18 12V12C18 16.9706 13.9706 21 9 21H0V3Z"
+        fillOpacity={1}
+      />
+    </svg>
+  );
+};
+
+export default IconSemicircle;

package/lib/pcpublic/src/components/pcfactory/src/assets/svg/verticalLine.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const IconVerticalLine = (props: any) => {
+  const { className, style, width = '24px', height = '24px' } = props;
+  return (
+    <svg className={className} width={width} height={height} style={style} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <rect x="9" y="3" width="6" height="18" rx="3" fillOpacity={1} />
+    </svg>
+  );
+};
+
+export default IconVerticalLine;

package/lib/pcpublic/src/components/pcfactory/src/styles/common.less

@@ -48,6 +48,23 @@
 
 .@{ant-prefix}-message {
   z-index: 1050;
+  &-btns {
+    display: flex;
+    align-self: flex-end;
+    margin-left: 48px;
+    span {
+      cursor: pointer;
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+    &-okBtn {
+      color: @primary-color;
+    }
+    &-cancelBtn {
+      color: @text-color-secondary;
+    }
+  }
 }
 
 // 图标使用主题色统一样式

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Card.less

@@ -9,7 +9,7 @@
   &.@{ant-prefix}-card-large {
     .@{ant-prefix}-card-head {
       & > .@{ant-prefix}-card-head-wrapper > .@{ant-prefix}-card-head-title {
-        padding: @padding-md 0;
+        padding: 0;
       }
     }
   }
@@ -17,6 +17,7 @@
   .ued-card-title {
     display: flex;
     align-items: center;
+    padding: 0;
 
     .main {
       white-space: nowrap;
@@ -25,18 +26,30 @@
       min-width: 10px;
     }
     &::before {
-      position: absolute;
-      top: 50%;
-      left: @padding-xs;
       width: @padding-xxs;
       height: @font-size-sm;
       margin-right: @margin-xs;
       background: @primary-color;
-      border-radius: @padding-xxs / 2;
-      transform: translateY(-50%);
+      border-radius: 2px;
       content: '';
     }
 
+    &.ued-card-title-middle,
+    &.ued-card-title-icon-left,
+    &.ued-card-title-icon-auto {
+      &::after {
+        left: -6px;
+      }
+    }
+
+    // 标题内置样式边距不受主题影响
+    &.ued-card-title-middle {
+      &::before {
+        position: static;
+        transform: none;
+        margin-right: 8px;
+      }
+    }
     &-icon-left {
       &::before {
         left: 0;
@@ -45,18 +58,39 @@
         border-radius: 0 (@padding-sm / 2) (@padding-sm / 2) 0;
       }
     }
+    &.ued-card-title-icon-left {
+      &::before {
+        position: static;
+        transform: none;
+        margin: 0 8px 0 0;
+      }
+    }
 
-    &-icon-auto {
+    &.ued-card-title-icon-auto {
+      &::after,
       &::before {
         content: none;
       }
+    }
 
+    &-icon-auto {
       > i,
       span {
         margin-right: @padding-xs;
         color: @primary-color;
       }
     }
+
+    &-icon-custom {
+      margin-left: 0;
+      padding-left: 0;
+      &::before {
+        width: 0 !important;
+      }
+      &::after {
+        width: 0 !important;
+      }
+    }
   }
 
   .ued-card-style-less-title {
@@ -115,6 +149,10 @@
     }
   }
 
+  &.@{ant-prefix}-card > .@{ant-prefix}-card-body {
+    background: transparent;
+  }
+
   .@{ant-prefix}-card-body {
     display: flex;
     flex: 1 1 auto;
@@ -124,12 +162,14 @@
 
   .@{ant-prefix}-card-head {
     position: relative;
-    padding: 0 @padding-20;
+    // padding: 0 @padding-20;
     border-color: #f0f0f0;
+    margin-bottom: 0px;
 
     & > .@{ant-prefix}-card-head-wrapper {
+      width: 100%;
       & > .@{ant-prefix}-card-head-title {
-        padding: @padding-sm 0;
+        padding: 0;
         font-weight: @font-weight-bold;
         font-size: @font-size-lg;
         line-height: 1.5;
@@ -143,11 +183,11 @@
 
   &.@{ant-prefix}-card-small {
     .@{ant-prefix}-card-head {
-      padding: 0 @padding-20;
+      // padding: 0 @padding-20;
 
       & > .@{ant-prefix}-card-head-wrapper {
         & > .@{ant-prefix}-card-head-title {
-          padding: @padding-xs 0;
+          padding: 0;
         }
 
         & > .@{ant-prefix}-card-extra {
@@ -159,6 +199,12 @@
 
   &.@{ant-prefix}-card-bordered {
     border-color: @border-color-base;
+    &.@{ant-prefix}-card {
+      padding: 0;
+      .@{ant-prefix}-card-head > .@{ant-prefix}-card-head-wrapper > .@{ant-prefix}-card-head-title {
+        padding: 0;
+      }
+    }
 
     .@{ant-prefix}-card-head {
       border-color: @border-color-base;