@arim-aisdc/public-components 0.0.70 → 0.0.71

package/dist/components/ConfigProvider/ConfigProvider.js

@@ -15,7 +15,7 @@ export var ConfigProvider = function ConfigProvider(_ref) {
     children = _ref.children;
   var memoedConfig = useMemo(function () {
     return _objectSpread(_objectSpread({}, DEFAULT_CONTEXT), config);
-  }, [JSON.stringify(config)]);
+  }, [Object.values(config)]);
   var root = config.root,
     theme = config.theme,
     variablesJson = config.variablesJson,

package/dist/components/ConfigProvider/context.d.ts

@@ -10,6 +10,8 @@ export interface ConfigConsumerProps {
     getRootContainer?: () => HTMLElement;
     /**项目根节名称 */
     root?: string;
+    /** 空数据图标组件 */
+    renderEmpty?: () => React.ReactNode;
 }
 export declare const DEFAULT_CONTEXT: {
     theme: string;

package/dist/components/TableMax/TableBody/index.d.ts

@@ -44,7 +44,6 @@ type TableBodyPropsType = {
     selectRowWhenClick: boolean;
     datas: any[];
     hasVerticalScrollBar: boolean;
-    emptyDataHeight: number;
     canEditRowWhenDClick: boolean;
     editingRowId: string;
     handleEditRowWhenDClick: (row: any) => void;
@@ -71,5 +70,5 @@ type TableBodyPropsType = {
     };
     tableTooltip: boolean;
 };
-declare const TableBody: ({ tableContentRef, tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, emptyDataHeight, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
+declare const TableBody: ({ tableContentRef, tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

package/dist/components/TableMax/TableBody/index.js

@@ -18,7 +18,7 @@ import { useDrop } from 'react-dnd';
 import { CustomDragLayer } from "../components/CustomDragerLayer";
 // import RowContent from "../components/RowContent";
 
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 // @ts-ignore
 import DataEmptyDarkPng from "../../../assets/images/data-empty-dark.png";
@@ -30,10 +30,10 @@ import Row from "./Row";
 import ContextMenu from "./contextMenu/ContextMenu";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var TableBody = function TableBody(_ref) {
-  var _tableContentRef$curr, _headerGroups;
+  var _table$getRowModel$ro2, _tableContentRef$curr, _headerGroups;
   var tableContentRef = _ref.tableContentRef,
     tableBodyRef = _ref.tableBodyRef,
     table = _ref.table,
@@ -67,7 +67,6 @@ var TableBody = function TableBody(_ref) {
     selectRowWhenClick = _ref.selectRowWhenClick,
     hasVerticalScrollBar = _ref.hasVerticalScrollBar,
     datas = _ref.datas,
-    emptyDataHeight = _ref.emptyDataHeight,
     canEditRowWhenDClick = _ref.canEditRowWhenDClick,
     editingRowId = _ref.editingRowId,
     handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
@@ -78,7 +77,8 @@ var TableBody = function TableBody(_ref) {
     getRowHoverTipConfig = _ref.getRowHoverTipConfig,
     tableTooltip = _ref.tableTooltip;
   var _useConfig = useConfig(),
-    root = _useConfig.root;
+    root = _useConfig.root,
+    renderEmpty = _useConfig.renderEmpty;
   var headerGroups = table.getHeaderGroups();
   var _useState = useState({
       visible: false,
@@ -219,25 +219,15 @@ var TableBody = function TableBody(_ref) {
     _useDrop2 = _slicedToArray(_useDrop, 2),
     dropRef = _useDrop2[1];
   var EmptyContent = function EmptyContent() {
-    var _tableBodyRef$current;
-    return /*#__PURE__*/_jsx("tr", {
-      className: "empty-container",
-      style: {
-        width: table.getTotalSize()
-      },
-      children: /*#__PURE__*/_jsx("td", {
-        className: "empty-wapper",
-        style: {
-          width: "".concat(tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.clientWidth, "px"),
-          height: emptyDataHeight
-        },
-        children: loading ? /*#__PURE__*/_jsx(_Spin, {}) : /*#__PURE__*/_jsxs("span", {
-          className: "empty-content",
-          ref: dropRef,
+    return /*#__PURE__*/_jsx("div", {
+      className: "empty-wapper",
+      children: loading ? /*#__PURE__*/_jsx(_Spin, {}) : /*#__PURE__*/_jsx("span", {
+        className: "empty-content",
+        ref: dropRef,
+        children: renderEmpty ? renderEmpty() : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("img", {
             className: "empty-img",
-            src: theme === 'dark' ? DataEmptyDarkPng : DataEmptyLightPng,
-            height: "60"
+            src: theme === 'dark' ? DataEmptyDarkPng : DataEmptyLightPng
           }), /*#__PURE__*/_jsx("span", {
             className: "empty-text",
             children: "\u6682\u65E0\u6570\u636E"
@@ -294,13 +284,12 @@ var TableBody = function TableBody(_ref) {
       }, row.id);
     });
   };
-  var tbodyRender = function tbodyRender() {
+
+  // 是否有数据
+  var showTable = useMemo(function () {
     var _table$getRowModel$ro;
-    if (!loading && datas.length !== 0 && ((_table$getRowModel$ro = table.getRowModel().rows) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.length) !== 0) {
-      return TBodyContent();
-    }
-    return EmptyContent();
-  };
+    return !loading && datas.length !== 0 && ((_table$getRowModel$ro = table.getRowModel().rows) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.length) !== 0;
+  }, [loading, datas.length, (_table$getRowModel$ro2 = table.getRowModel().rows) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.length]);
   return (
     /*#__PURE__*/
     // 修复筛选数据为空时，滚动条丢失
@@ -316,7 +305,7 @@ var TableBody = function TableBody(_ref) {
         tableId: tableId
       }),
       // document.body,
-      root ? document.querySelector(root) : document.body), /*#__PURE__*/_jsxs("table", {
+      root ? document.querySelector(root) : document.body), showTable ? /*#__PURE__*/_jsxs("table", {
         style: {
           width: "".concat(((_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientWidth) - (hasVerticalScrollBar ? 10 : 0), "px")
         },
@@ -329,9 +318,9 @@ var TableBody = function TableBody(_ref) {
           })
         }), /*#__PURE__*/_jsx("tbody", {
           id: "table-max-tableBody-tbody-".concat(tableId),
-          children: tbodyRender()
+          children: TBodyContent()
         })]
-      }), /*#__PURE__*/_jsx(ContextMenu, _objectSpread(_objectSpread({}, contextMenuData), {}, {
+      }) : EmptyContent(), /*#__PURE__*/_jsx(ContextMenu, _objectSpread(_objectSpread({}, contextMenuData), {}, {
         onClickContextMenu: onClickContextMenu,
         closeContextMenu: closeContextMenu
       }))]

package/dist/components/TableMax/TableBody/index.less

@@ -87,30 +87,32 @@ table {
   height: 100%;
 }
 
-.empty-container {
-  width: 100%;
+.empty-wapper {
   height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: sticky;
+  left: 0;
 
-  .empty-wapper {
+  .empty-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    position: sticky;
-    left: 0;
+    width: 100%;
 
-    .empty-content {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
+    .empty-img {
+      height: 80px;
     }
-  }
 
-  .empty-text {
-    color: @globalColor2;
-    font-size: 12px;
+    .empty-text {
+      color: @globalColor2;
+      font-size: 12px;
+      margin-top: 12px;
+    }
   }
 }
 

package/dist/components/TableMax/TableMax.js

@@ -161,8 +161,6 @@ var TableMax = function TableMax(_ref) {
     originSelectRowWhenClick = _ref$selectRowWhenCli === void 0 ? true : _ref$selectRowWhenCli,
     _ref$autoHeight = _ref.autoHeight,
     autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
-    _ref$emptyDataHeight = _ref.emptyDataHeight,
-    emptyDataHeight = _ref$emptyDataHeight === void 0 ? 100 : _ref$emptyDataHeight,
     _ref$dragBeforeEnd = _ref.dragBeforeEnd,
     dragBeforeEnd = _ref$dragBeforeEnd === void 0 ? function () {
       return true;
@@ -983,7 +981,6 @@ var TableMax = function TableMax(_ref) {
   var tableBodyProps = {
     tableContentRef: tableContentRef,
     tableBodyRef: tableBodyRef,
-    emptyDataHeight: emptyDataHeight,
     table: table,
     tableId: tableId,
     reorderRow: reorderRow,

package/dist/components/TableMax/components/ColumnSetting/index.js

@@ -33,7 +33,8 @@ var SettingItem = function SettingItem(_ref) {
     column = _ref.column,
     canSelection = _ref.canSelection,
     selectionWithoutChecked = _ref.selectionWithoutChecked,
-    getRowCanExpand = _ref.getRowCanExpand;
+    getRowCanExpand = _ref.getRowCanExpand,
+    draggable = _ref.draggable;
   var getState = table.getState,
     setColumnOrder = table.setColumnOrder;
   var _getState = getState(),
@@ -174,7 +175,9 @@ var SettingItem = function SettingItem(_ref) {
     }
   };
   return /*#__PURE__*/_jsx("div", {
-    ref: dropRef,
+    ref: function ref(node) {
+      dropRef(node && draggable ? node : null);
+    },
     className: "setting-item",
     style: {
       opacity: isDragging ? 0.5 : 1
@@ -182,15 +185,18 @@ var SettingItem = function SettingItem(_ref) {
     children: /*#__PURE__*/_jsx("div", {
       ref: previewRef,
       children: /*#__PURE__*/_jsxs("div", {
-        ref: dragRef,
+        ref: function ref(node) {
+          dragRef(node && draggable ? node : null);
+        },
         className: "setting-item-content",
-        children: [/*#__PURE__*/_jsxs("span", {
+        children: [/*#__PURE__*/_jsxs("div", {
           className: "content-left",
-          children: [/*#__PURE__*/_jsx("i", {
+          children: [draggable && /*#__PURE__*/_jsx("i", {
             className: "icon iconfont-other icon-other-drag drag-handle"
           }), /*#__PURE__*/_jsx(_Checkbox, {
             checked: column.getIsVisible(),
             onChange: column.getToggleVisibilityHandler(),
+            className: "content-left-checkbox",
             children: typeof (column === null || column === void 0 || (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : _column$columnDef.header) === 'function' ? column.columnDef.header() : column === null || column === void 0 || (_column$columnDef2 = column.columnDef) === null || _column$columnDef2 === void 0 ? void 0 : _column$columnDef2.header
           })]
         }), /*#__PURE__*/_jsx("span", {
@@ -198,6 +204,7 @@ var SettingItem = function SettingItem(_ref) {
             return /*#__PURE__*/_jsx(_Tooltip, {
               placement: "top",
               title: item.tooltip,
+              zIndex: 99999,
               children: /*#__PURE__*/_jsx("i", {
                 className: "icon iconfont-other icon-other-".concat(item.icon, " move-handle"),
                 onClick: function onClick() {
@@ -294,17 +301,20 @@ var ColumnSetting = function ColumnSetting(_ref3) {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     table.getLeftLeafColumns().length > leftLength && arr.push({
       groupName: '固定列首',
-      groupList: table.getLeftLeafColumns()
+      groupList: table.getLeftLeafColumns(),
+      draggable: false
     });
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     table.getCenterLeafColumns().length > 0 && arr.push({
       groupName: table.getLeftLeafColumns().length > leftLength || table.getRightLeafColumns().length > 0 ? '不固定' : '',
-      groupList: table.getCenterLeafColumns()
+      groupList: table.getCenterLeafColumns(),
+      draggable: true
     });
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     table.getRightLeafColumns().length > 0 && arr.push({
       groupName: '固定列尾',
-      groupList: table.getRightLeafColumns()
+      groupList: table.getRightLeafColumns(),
+      draggable: false
     });
     // console.log('columnPinningGroup===============', arr);
 
@@ -332,7 +342,7 @@ var ColumnSetting = function ColumnSetting(_ref3) {
           defaultChecked: enableFilters,
           onChange: onFilterSwitchChange
         })]
-      }) : '', /*#__PURE__*/_jsxs("div", {
+      }) : null, /*#__PURE__*/_jsxs("div", {
         className: "column-setting-wapper",
         children: [/*#__PURE__*/_jsxs("div", {
           className: "column-setting-header",
@@ -363,7 +373,8 @@ var ColumnSetting = function ColumnSetting(_ref3) {
                   table: table,
                   canSelection: canSelection,
                   selectionWithoutChecked: selectionWithoutChecked,
-                  getRowCanExpand: getRowCanExpand
+                  getRowCanExpand: getRowCanExpand,
+                  draggable: item.draggable
                 }, column.id);
               })]
             }, item === null || item === void 0 ? void 0 : item.groupName);

package/dist/components/TableMax/components/ColumnSetting/index.less

@@ -1,4 +1,3 @@
-
 .column-setting-container {
   position: relative;
   display: inline-block;
@@ -33,7 +32,7 @@
   flex-direction: column;
   overflow: hidden;
   max-height: 380px;
-  padding: 10px 12px 12px;
+  padding: 10px 6px 12px;
 }
 
 .column-setting-header {
@@ -41,6 +40,7 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
+  padding: 0 6px;
 
   .reset {
     color: @global-primary-color;
@@ -54,23 +54,40 @@
   .column-setting-group-name {
     color: @globalColor3;
     font-size: 12px;
-    padding: 4px 0;
+    padding: 4px 6px;
   }
 
   .setting-item {
     line-height: 30px;
-    border: 1px solid @tableColor7;
     border-radius: 2px;
-    margin-bottom: 4px;
-    padding: 0 8px;
+    padding: 0 6px;
+
+    &:hover {
+      .move-handle {
+        display: inline;
+      }
+
+      background-color: @tableColor8;
+    }
 
     .setting-item-content {
       display: flex;
       justify-content: space-between;
+      align-items: center;
 
       .content-left {
         overflow: hidden;
         white-space: nowrap;
+        display: flex;
+        align-items: center;
+
+        .content-left-checkbox {
+          align-items: center !important;
+
+          span:first-child {
+            top: 0;
+          }
+        }
       }
     }
 
@@ -79,6 +96,7 @@
     }
 
     .move-handle {
+      display: none;
       margin-left: 4px;
       margin-right: 0;
       color: @tableColor6;

package/dist/components/TableMax/tableMax.less

@@ -1,4 +1,3 @@
-
 .table-max-container {
   color: @tableColor1;
   // height: 100%;
@@ -164,11 +163,6 @@
         position: sticky;
         left: 0;
       }
-
-      .empty-text {
-        color: @globalColor2;
-        font-size: 12px;
-      }
     }
   }
 

package/dist/components/TableMax/type.d.ts

@@ -192,8 +192,11 @@ export type TableMaxProps = {
     defaultHighLightRowId?: string;
     /**高度是否自动占满父级高度 */
     autoHeight?: boolean;
-    /**暂无数据高度 */
-    emptyDataHeight?: number;
+    /**
+     * @deprecated 已废弃
+     * 暂无数据高度
+     */
+    emptyDataHeight?: number | string;
     /**禁止拖动的行ID */
     disableDragRowIds?: any[];
     /**拖动列宽时，更改列宽的时机 */

package/dist/themes/variables.less

@@ -1,4 +1,3 @@
-
 // @primary-color: #fa541c; // 全局主色
 @global-primary-color: var(--global-primary-color, #fa541c); // 全局主色
 
@@ -13,6 +12,7 @@
 @rowHoverBackgroundColor: var(--table-row-hover-bgc, #ececee);
 
 @splite-line: var(--split-line, #ececee);
+@globalColor0: var(--globalColor0, #fdfdfe); // 网格遮罩色
 @globalColor1: var(--globalColor1, #05081a); // 文字颜色
 @globalColor2: var(--globalColor2, #5e6175);
 @globalColor3: var(--globalColor3, #838695);
@@ -22,7 +22,6 @@
 @globalColor7: var(--globalColor7, #ffffff); // 背景色
 @globalColor8: var(--globalColor8, #f5f6f7); // 背景衬托色
 @globalColor9: var(--globalColor9, #f7f7f9); // 网格遮罩色（passed）
-@globalColor0: var(--globalColor0, #fdfdfe); // 网格遮罩色
 @globalColor_10: var(--globalColor_10, #f5f6f7); // 网格遮罩色
 @globalColor_11: var(--globalColor_11, #ececee); //
 @globalColor_12: var(--globalColor_12, #838695); // 铁包运行左侧菜单线
@@ -37,5 +36,6 @@
 @tableColor3: var(--tableColor3, #dadbdfff); // 表格边框颜色
 @tableColor4: var(--tableColor4, #dadbdf7f); // 表格筛选区时间选择框分割线颜色
 @tableColor5: var(--tableColor5, #ffffff); // 表格列设置区拖拽图标颜色
-@tableColor6: var(--tableColor6, #fa541cff); // 表格列设置区列显隐图标颜色
-@tableColor7: var(--tableColor7, #1A1D2EFF;); // 表格列设置区列表元素边框颜色
+@tableColor6: var(--tableColor6, #fa541cff); // 表格列设置区-列固定图标颜色
+@tableColor7: var(--tableColor7, #1A1D2EFF;); // 表格列设置区-【显示筛选】下边框颜色
+@tableColor8: var(--tableColor8, #F5F6F7;); // 表格列设置区-列表元素hover背景色

package/dist/themes/variablesConfig.js

@@ -53,7 +53,9 @@ export var PublicThemeVariablesConfig = {
     // 表格列设置区拖拽图标颜色
     '--tableColor6': '#5E6175',
     // 表格列设置区列显隐图标颜色
-    '--tableColor7': '#F5F6F7' // 表格列设置区列表元素边框颜色
+    '--tableColor7': '#F5F6F7',
+    // 表格列设置区列表元素边框颜色
+    '--tableColor8': '#F5F6F7' // 表格列设置区列表元素-hover背景色
   },
   dark: {
     '--global-curd-input-background-color': '#494c5dff',
@@ -110,6 +112,8 @@ export var PublicThemeVariablesConfig = {
     // 表格列设置区拖拽图标颜色
     '--tableColor6': '#FA541CFF',
     // 表格列设置区列显隐图标颜色
-    '--tableColor7': '#1A1D2EFF' // 表格列设置区列表元素边框颜色
+    '--tableColor7': '#1A1D2EFF',
+    // 表格列设置区列表元素边框颜色
+    '--tableColor8': '#838695' // 表格列设置区列表元素-hover背景色
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",