@arim-aisdc/public-components 0.0.50 → 0.0.51

package/dist/components/BaseInfo/BaseInfo.d.ts

@@ -23,7 +23,7 @@ export declare const foramtBaseInfoField: (data: any, dataField: BaseInfoFieldTy
     labelWidth?: string;
     color?: string;
     disabledColor?: string;
-    formatFun?: (field: string, data: any) => void;
+    formatFun?: (field: string | number, data: any) => void;
     detail?: object;
     isShowInterval?: boolean;
     isActiveTrigger?: boolean;

package/dist/components/BaseInfo/BaseInfo.js

@@ -50,7 +50,7 @@ var BaseInfo = function BaseInfo(_ref) {
               width: el.labelWidth ? el.labelWidth : ''
             },
             children: typeof el.text === 'string' ? /*#__PURE__*/_jsxs(_Fragment, {
-              children: [el.text, ":"]
+              children: [el.text, "\uFF1A"]
             }) : /*#__PURE__*/_jsxs(React.Fragment, {
               children: [el.text, "\uFF1A"]
             })

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

@@ -9,7 +9,7 @@ export interface BaseInfoFieldType {
     labelWidth?: string;
     color?: string;
     disabledColor?: string;
-    formatFun?: (field: string, data: any) => void;
+    formatFun?: (field: string | number, data: any) => void;
     detail?: object;
     isShowInterval?: boolean;
     isActiveTrigger?: boolean;

package/dist/components/GlobalTip/ModalTip/ModalTip.d.ts

@@ -7,6 +7,6 @@ declare const ModalTip: {
     error: (info: ModalTipType) => void;
     info: (info: ModalTipType) => void;
     attention: (info: ModalTipType) => void;
-    delete: (theme: any, info: ModalDeleteType) => void;
+    delete: (info: ModalDeleteType, theme?: 'light' | 'dark') => void;
 };
 export default ModalTip;

package/dist/components/GlobalTip/ModalTip/ModalTip.js

@@ -93,7 +93,7 @@ var updateModal = function updateModal(_ref3) {
     afterClose === null || afterClose === void 0 || afterClose();
   }, duration);
 };
-var confirmModal = function confirmModal(theme, _ref4) {
+var confirmModal = function confirmModal(_ref4, theme) {
   var handlerConfirm = _ref4.handlerConfirm,
     title = _ref4.title,
     content = _ref4.content,
@@ -105,16 +105,16 @@ var confirmModal = function confirmModal(theme, _ref4) {
     content: content ? content : '删除后可能无法恢复，请谨慎操作！',
     okText: okText ? okText : '确认',
     cancelText: cancelText ? cancelText : '取消',
-    bodyStyle: themeStyle(theme, 'bodyStyle'),
+    bodyStyle: themeStyle('bodyStyle', theme),
     // 背景颜色
-    maskStyle: themeStyle(theme, 'maskStyle'),
+    maskStyle: themeStyle('maskStyle', theme),
     // 网罩颜色
     okButtonProps: {
-      style: themeStyle(theme, 'okButtonProps')
+      style: themeStyle('okButtonProps', theme)
     },
     // 确认按钮样式
     cancelButtonProps: {
-      style: themeStyle(theme, 'cancelButtonProps')
+      style: themeStyle('cancelButtonProps', theme)
     },
     // 取消按钮样式
     centered: centered ? centered : true,
@@ -179,8 +179,8 @@ var ModalTip = {
       tipCode: 'attention'
     }));
   },
-  delete: function _delete(theme, info) {
-    return confirmModal(theme, info);
+  delete: function _delete(info, theme) {
+    return confirmModal(info, theme);
   }
 };
 export default ModalTip;

package/dist/components/GlobalTip/ModalTip/utils.d.ts

@@ -2,4 +2,4 @@ export declare const themeType: {
     light: string;
     dark: string;
 };
-export declare const themeStyle: (theme: string, type: string) => React.CSSProperties;
+export declare const themeStyle: (type: string, theme?: string) => React.CSSProperties;

package/dist/components/GlobalTip/ModalTip/utils.js

@@ -4,7 +4,8 @@ export var themeType = {
   dark: 'dark'
 };
 // 返回主题样式
-export var themeStyle = function themeStyle(theme, type) {
+export var themeStyle = function themeStyle(type) {
+  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : themeType.dark;
   var isDark = theme === themeType.dark;
   switch (type) {
     case 'bodyStyle':

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

@@ -2,7 +2,7 @@ import { OnSelectChangeType } from "../type";
 import { Table } from '@tanstack/react-table';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import './index.less';
-declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, reorderRow, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, rowHeight, disableDragRowIds, selectRowWhenClick, handleEditRowWhenDClick, canEditRowWhenDClick, theme, dragBeforeStart, shadowColumnInfo, }: {
+type IRowProps = {
     table: Table<any>;
     tableId: string;
     row: any;
@@ -43,5 +43,12 @@ declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSe
         leftLastColumnId: string;
         rightFirstColumnId: string;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+    onCellContextMenu: (e: React.MouseEvent, cell: any) => void;
+    /**获取行hover时的tip信息 */
+    getRowHoverTipConfig?: (row: any) => {
+        title: string;
+        color: string;
+    };
+};
+declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, reorderRow, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, rowHeight, disableDragRowIds, selectRowWhenClick, handleEditRowWhenDClick, canEditRowWhenDClick, theme, dragBeforeStart, shadowColumnInfo, onCellContextMenu, getRowHoverTipConfig, }: IRowProps) => import("react/jsx-runtime").JSX.Element;
 export default Row;

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

@@ -1,4 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -11,7 +13,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { flexRender } from '@tanstack/react-table';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { EditableCell } from "../components/ColumnEdit";
@@ -22,7 +24,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var initselectedIndex;
 var Row = function Row(_ref) {
-  var _row, _row2, _tableBodyRef$current, _tableBodyRef$current2;
+  var _row2, _tableBodyRef$current, _tableBodyRef$current2;
   var tableBodyRef = _ref.tableBodyRef,
     table = _ref.table,
     tableId = _ref.tableId,
@@ -55,7 +57,9 @@ var Row = function Row(_ref) {
     canEditRowWhenDClick = _ref.canEditRowWhenDClick,
     theme = _ref.theme,
     dragBeforeStart = _ref.dragBeforeStart,
-    shadowColumnInfo = _ref.shadowColumnInfo;
+    shadowColumnInfo = _ref.shadowColumnInfo,
+    onCellContextMenu = _ref.onCellContextMenu,
+    getRowHoverTipConfig = _ref.getRowHoverTipConfig;
   var timerRef = useRef();
   var _useDrop = useDrop({
       accept: 'TABLE_ROW',
@@ -125,44 +129,69 @@ var Row = function Row(_ref) {
     if (!selectRowWhenClick || !row.getCanSelect()) {
       return;
     }
-    // 能勾选且展示勾选框
-    if (canSelection && !selectionWithoutChecked) {
-      var selectionConfig = _objectSpread(_objectSpread({}, table.getState().rowSelection), {}, _defineProperty({}, row.id, !row.getIsSelected()));
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      row.getCanSelect() && (table === null || table === void 0 ? void 0 : table.setRowSelection(selectionConfig));
-      onSelectChange === null || onSelectChange === void 0 || onSelectChange(row, row === null || row === void 0 ? void 0 : row.original, row.getCanSelect() ? !row.getIsSelected() : false, evt);
-    }
-    // selectionWithoutChecked能多选不展示勾选框
-    else if (canSelection && selectionWithoutChecked) {
-      if (evt.ctrlKey) {
-        var _selectionConfig = _objectSpread({}, table.getState().rowSelection);
-        if (!row.getIsSelected()) {
-          _selectionConfig[row.id] = true;
+    // 多选
+    if (canSelection) {
+      // 不展示多选框
+      if (selectionWithoutChecked) {
+        if (evt.ctrlKey) {
+          var selectionConfig = _objectSpread({}, table.getState().rowSelection);
+          if (!row.getIsSelected()) {
+            selectionConfig[row.id] = true;
+          } else {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            selectionConfig[row.id] && Object.keys(selectionConfig).length > 1 && delete selectionConfig[row.id];
+          }
+          table === null || table === void 0 || table.setRowSelection(_objectSpread({}, selectionConfig));
+        } else if (evt.shiftKey) {
+          var _table$getRowModel$ro;
+          var _selectionConfig = {};
+          var min = Math.min(initselectedIndex || 0, row.index);
+          var max = Math.max(initselectedIndex || 0, row.index);
+          // console.log(selectionConfig, table.getRowModel(), 'selectionConfig');
+          var newSelectedRowIds = ((_table$getRowModel$ro = table.getRowModel().rows.filter(function (row) {
+            return row.index >= min && row.index <= max;
+          })) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.map(function (row) {
+            return row.id;
+          })) || [];
+          for (var i = 0; i <= newSelectedRowIds.length; i++) {
+            _selectionConfig[newSelectedRowIds[i]] = true;
+          }
+          table === null || table === void 0 || table.setRowSelection(_selectionConfig);
         } else {
-          // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-          _selectionConfig[row.id] && Object.keys(_selectionConfig).length > 1 && delete _selectionConfig[row.id];
+          initselectedIndex = row.index;
+          table === null || table === void 0 || table.setRowSelection(_defineProperty({}, row === null || row === void 0 ? void 0 : row.id, true));
         }
-        table === null || table === void 0 || table.setRowSelection(_objectSpread({}, _selectionConfig));
-      } else if (evt.shiftKey) {
-        var _table$getRowModel$ro;
-        var _selectionConfig2 = {};
-        var min = Math.min(initselectedIndex || 0, row.index);
-        var max = Math.max(initselectedIndex || 0, row.index);
-        console.log(_selectionConfig2, table.getRowModel(), 'selectionConfig');
-        var newSelectedRowIds = ((_table$getRowModel$ro = table.getRowModel().rows.filter(function (row) {
-          return row.index >= min && row.index <= max;
-        })) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.map(function (row) {
-          return row.id;
-        })) || [];
-        for (var i = 0; i <= newSelectedRowIds.length; i++) {
-          _selectionConfig2[newSelectedRowIds[i]] = true;
+      }
+      // 展示多选框
+      else {
+        if (evt.shiftKey) {
+          var _table$getRowModel$ro2;
+          console.log('table.getState().rowSelection :>> ', table.getState().rowSelection);
+          var _selectionConfig2 = _objectSpread({}, table.getState().rowSelection);
+          var _min = Math.min(initselectedIndex || 0, row.index);
+          var _max = Math.max(initselectedIndex || 0, row.index);
+          // console.log(selectionConfig, table.getRowModel(), 'selectionConfig');
+          var _newSelectedRowIds = ((_table$getRowModel$ro2 = table.getRowModel().rows.filter(function (row) {
+            return row.index >= _min && row.index <= _max;
+          })) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.map(function (row) {
+            return row.id;
+          })) || [];
+          for (var _i = 0; _i <= _newSelectedRowIds.length; _i++) {
+            _selectionConfig2[_newSelectedRowIds[_i]] = true;
+          }
+          table === null || table === void 0 || table.setRowSelection(_selectionConfig2);
+        } else {
+          if (!row.getIsSelected()) {
+            initselectedIndex = row.index;
+          }
+          var _selectionConfig3 = _objectSpread(_objectSpread({}, table.getState().rowSelection), {}, _defineProperty({}, row.id, !row.getIsSelected()));
+          // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+          row.getCanSelect() && (table === null || table === void 0 ? void 0 : table.setRowSelection(_selectionConfig3));
         }
-        table === null || table === void 0 || table.setRowSelection(_selectionConfig2);
-      } else {
-        initselectedIndex = row.index;
-        table === null || table === void 0 || table.setRowSelection(_defineProperty({}, row === null || row === void 0 ? void 0 : row.id, true));
       }
-    } else {
+    }
+    // 单选
+    else {
       setRowSelectedId === null || setRowSelectedId === void 0 || setRowSelectedId(row === null || row === void 0 ? void 0 : row.id);
       selectedRowChange === null || selectedRowChange === void 0 || selectedRowChange(row);
       onSelectChange === null || onSelectChange === void 0 || onSelectChange(row, row === null || row === void 0 ? void 0 : row.original, true, evt);
@@ -231,10 +260,26 @@ var Row = function Row(_ref) {
   var rowMouseLeave = function rowMouseLeave() {
     onRowMouseLeave === null || onRowMouseLeave === void 0 || onRowMouseLeave(row);
   };
+  var handleCellRightClick = function handleCellRightClick(e, cell) {
+    onCellContextMenu(e, cell);
+  };
   var leftLastColumnId = shadowColumnInfo.leftLastColumnId,
     rightFirstColumnId = shadowColumnInfo.rightFirstColumnId;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("tr", {
+  var _useState = useState({
+      title: ' ',
+      color: ''
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipConfig = _useState2[0],
+    setTooltipConfig = _useState2[1];
+  var onOpenChange = function onOpenChange(open) {
+    if (open) {
+      setTooltipConfig(getRowHoverTipConfig(row.original));
+    }
+  };
+  var rowCom = function rowCom() {
+    var _row;
+    return /*#__PURE__*/_jsx("tr", {
       // ref={canRowDrag && !editting ? dropRef : null}
       id: rowEditing ? "".concat(tableId, "-tbody-tr-editing") : undefined,
       ref: function ref(node) {
@@ -266,7 +311,10 @@ var Row = function Row(_ref) {
           })) || '', " tbody-tr-td"),
           style: _objectSpread({
             height: rowHeight - 1
-          }, getPinningStyle(cell, table, false))
+          }, getPinningStyle(cell, table, false)),
+          onContextMenu: function onContextMenu(e) {
+            return handleCellRightClick(e, cell);
+          }
         }, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell.getContext())), {}, {
           children: EditableCell(_objectSpread(_objectSpread({}, cell.column.columnDef), {}, {
             editing: columnEditing,
@@ -276,7 +324,21 @@ var Row = function Row(_ref) {
           }))
         }), cell.id);
       })
-    }), row.getIsExpanded() && /*#__PURE__*/_jsx("tr", {
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!!getRowHoverTipConfig ? /*#__PURE__*/_jsx(_Tooltip, _objectSpread(_objectSpread({}, tooltipConfig), {}, {
+      autoAdjustOverflow: false,
+      onOpenChange: onOpenChange,
+      destroyTooltipOnHide: {
+        keepParent: false
+      },
+      overlayClassName: "table-max-row-tooltip-wrapper",
+      getPopupContainer: function getPopupContainer() {
+        return tableBodyRef.current || document.body;
+      },
+      children: rowCom()
+    })) : rowCom(), row.getIsExpanded() && /*#__PURE__*/_jsx("tr", {
       className: "tbody-tr-subrow",
       children: /*#__PURE__*/_jsx("td", {
         colSpan: (_row2 = row["getVisibleCells"]) === null || _row2 === void 0 ? void 0 : _row2.call(row).length,

package/dist/components/TableMax/TableBody/contextMenu/ContextMenu.d.ts

@@ -0,0 +1,15 @@
+import { IMenuOptionsType } from '../../type';
+import './index.less';
+type IContextMenuType = {
+    visible: boolean;
+    clientX: number;
+    clientY: number;
+    row: any;
+    column: any;
+    options: IMenuOptionsType;
+    /**点击菜单选项 */
+    onClickContextMenu?: (menuItem: any) => void;
+    closeContextMenu: () => void;
+};
+declare const ContextMenu: ({ visible, clientX, clientY, row, column, options, onClickContextMenu, closeContextMenu, }: IContextMenuType) => import("react/jsx-runtime").JSX.Element;
+export default ContextMenu;

package/dist/components/TableMax/TableBody/contextMenu/ContextMenu.js

@@ -0,0 +1,71 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var ContextMenu = function ContextMenu(_ref) {
+  var visible = _ref.visible,
+    clientX = _ref.clientX,
+    clientY = _ref.clientY,
+    row = _ref.row,
+    column = _ref.column,
+    options = _ref.options,
+    onClickContextMenu = _ref.onClickContextMenu,
+    closeContextMenu = _ref.closeContextMenu;
+  var wrapperRef = useRef(null);
+  var handleClickMenu = function handleClickMenu(value) {
+    onClickContextMenu({
+      row: row,
+      column: column,
+      value: value
+    });
+  };
+  useEffect(function () {
+    if (visible) {
+      window.addEventListener('click', closeContextMenu);
+    }
+    return function () {
+      window.removeEventListener('click', closeContextMenu);
+    };
+  }, [visible]);
+  useLayoutEffect(function () {
+    if (visible && wrapperRef.current) {
+      // console.log('useLayoutEffect', wrapperRef.current.getBoundingClientRect(), window.innerHeight);
+      var _wrapperRef$current$g = wrapperRef.current.getBoundingClientRect(),
+        bottom = _wrapperRef$current$g.bottom,
+        height = _wrapperRef$current$g.height,
+        top = _wrapperRef$current$g.top,
+        width = _wrapperRef$current$g.width,
+        left = _wrapperRef$current$g.left,
+        right = _wrapperRef$current$g.right;
+      if (bottom > window.innerHeight && top >= height) {
+        // 如果弹层下方被遮挡，不能完整展示 & 上方可完整展示弹层 就把弹层展示到上方
+        wrapperRef.current.style.top = "".concat(top - height, "px");
+      }
+      if (right > window.innerWidth && left >= width) {
+        // 如果弹层右侧被遮挡，不能完整展示 & 左侧可完整展示弹层 就把弹层展示到左侧
+        wrapperRef.current.style.left = "".concat(left - width, "px");
+      }
+    }
+  }, [clientX, clientY, visible]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: visible && /*#__PURE__*/createPortal( /*#__PURE__*/_jsx("div", {
+      className: "cell-context-menu-wrapper",
+      ref: wrapperRef,
+      style: {
+        left: clientX,
+        top: clientY
+      },
+      children: options.map(function (option) {
+        return /*#__PURE__*/_jsx("div", {
+          className: "cell-context-menu-item",
+          onClick: function onClick() {
+            return handleClickMenu(option.value);
+          },
+          children: option.label
+        }, option.value);
+      })
+    }), document.body)
+  });
+};
+export default ContextMenu;

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

@@ -0,0 +1,20 @@
+.cell-context-menu-wrapper {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  background: @globalColor7;
+  cursor: pointer;
+  padding: 6px;
+  color: @globalColor1;
+  box-shadow: 3px 3px 7px rgba(0, 0, 0, 10%);
+
+  .cell-context-menu-item {
+    padding: 5px;
+    min-width: 150px;
+    font-size: 14px;
+
+    &:hover {
+      background-color: @rowHoverBackgroundColor;
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import { Table } from '@tanstack/react-table';
-import { OnSelectChangeType } from "../type";
+import { IMenuOptionsType, OnSelectChangeType } from "../type";
 import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import './index.less';
 type TableBodyPropsType = {
@@ -51,6 +51,22 @@ type TableBodyPropsType = {
         leftLastColumnId: string;
         rightFirstColumnId: string;
     };
+    /**右键菜单，配置后，开启右键菜单功能：点击右键时，获取菜单可选项 */
+    getContextMenu?: (params: {
+        row: any;
+        column: any;
+    }) => IMenuOptionsType;
+    /**点击菜单选项 */
+    onClickContextMenu?: (params: {
+        row: any;
+        column: any;
+        clickedMenuValue: any;
+    }) => void;
+    /**获取行hover时的tip信息 */
+    getRowHoverTipConfig?: (row: any) => {
+        title: string;
+        color: string;
+    };
 };
-declare const TableBody: ({ tableContentRef, tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, 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, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
+declare const TableBody: ({ tableContentRef, tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, 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, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

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

@@ -1,5 +1,11 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import "antd/es/spin/style";
 import _Spin from "antd/es/spin";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -12,6 +18,7 @@ import { useDrop } from 'react-dnd';
 import { CustomDragLayer } from "../components/CustomDragerLayer";
 // import RowContent from "../components/RowContent";
 
+import { useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 // @ts-ignore
 import DataEmptyDarkPng from "../../../assets/images/data-empty-dark.png";
@@ -19,6 +26,7 @@ import DataEmptyDarkPng from "../../../assets/images/data-empty-dark.png";
 import DataEmptyLightPng from "../../../assets/images/data-empty-light.png";
 import { ColumnType } from "../TableMax";
 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";
@@ -61,8 +69,48 @@ var TableBody = function TableBody(_ref) {
     editingRowId = _ref.editingRowId,
     handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
     dragBeforeStart = _ref.dragBeforeStart,
-    shadowColumnInfo = _ref.shadowColumnInfo;
+    shadowColumnInfo = _ref.shadowColumnInfo,
+    getContextMenu = _ref.getContextMenu,
+    onClickContextMenu = _ref.onClickContextMenu,
+    getRowHoverTipConfig = _ref.getRowHoverTipConfig;
   var headerGroups = table.getHeaderGroups();
+  var _useState = useState({
+      visible: false,
+      clientX: 0,
+      clientY: 0,
+      row: {},
+      column: {},
+      options: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    contextMenuData = _useState2[0],
+    setContextMenuData = _useState2[1];
+
+  // cell右键菜单
+  var handleCellContextMenu = function handleCellContextMenu(e, cell) {
+    // console.log('cell :>> ', cell);
+    if (getContextMenu) {
+      setContextMenuData({
+        visible: true,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        row: cell.row.original,
+        column: cell.column.columnDef,
+        options: getContextMenu({
+          row: cell.row.original,
+          column: cell.column.columnDef
+        })
+      });
+      e.preventDefault();
+    }
+  };
+
+  // 关闭菜单
+  var closeContextMenu = useCallback(function () {
+    setContextMenuData(_objectSpread(_objectSpread({}, contextMenuData), {}, {
+      visible: false
+    }));
+  }, []);
 
   // useEffect(() => {
   //   if (tbodyRef.current) {
@@ -230,7 +278,9 @@ var TableBody = function TableBody(_ref) {
         hasVerticalScrollBar: hasVerticalScrollBar,
         handleEditRowWhenDClick: handleEditRowWhenDClick,
         canEditRowWhenDClick: canEditRowWhenDClick,
-        shadowColumnInfo: shadowColumnInfo
+        shadowColumnInfo: shadowColumnInfo,
+        onCellContextMenu: handleCellContextMenu,
+        getRowHoverTipConfig: getRowHoverTipConfig
       }, row.id);
     });
   };
@@ -269,7 +319,10 @@ var TableBody = function TableBody(_ref) {
           id: "table-max-tableBody-tbody-".concat(tableId),
           children: tbodyRender()
         })]
-      })]
+      }), /*#__PURE__*/_jsx(ContextMenu, _objectSpread(_objectSpread({}, contextMenuData), {}, {
+        onClickContextMenu: onClickContextMenu,
+        closeContextMenu: closeContextMenu
+      }))]
     })
   );
 };

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

@@ -1,4 +1,3 @@
-
 table {
   table-layout: fixed;
 
@@ -141,3 +140,8 @@ table {
   content: '';
   pointer-events: none;
 }
+
+.table-max-row-tooltip-wrapper {
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+}

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

@@ -133,26 +133,26 @@ table {
 
     .custom-light-select:not(.custom-light-select-customize-input) .custom-light-select-selector {
       border-radius: 2px;
-      background-color: #f5f6f7ff;
+      background-color: @global-curd-input-background-color;
       padding: 0 2px;
     }
 
     .custom-dark-select:not(.custom-dark-select-customize-input) .custom-dark-select-selector {
       border-radius: 2px;
-      background-color: #494c5dff;
+      background-color: @global-curd-input-background-color;
       padding: 0 2px;
     }
 
     .custom-light-input-number {
       width: 100% !important;
       border-radius: 2px;
-      background-color: #f5f6f7ff;
+      background-color: @global-curd-input-background-color;
     }
 
     .custom-dark-input-number {
       width: 100% !important;
       border-radius: 2px;
-      background-color: #494c5dff;
+      background-color: @global-curd-input-background-color;
     }
 
     .custom-dark-select-single .custom-dark-select-selector .custom-dark-select-selection-search {
@@ -171,23 +171,23 @@ table {
 
     .custom-dark-picker {
       padding: 4px;
-      background: #494c5dff;
+      background: @global-curd-input-background-color;
     }
 
     .custom-dark-input-affix-wrapper,
     .custom-dark-picker-input .custom-dark-picker-clear {
-      background: #494c5dff;
+      background: @global-curd-input-background-color;
     }
 
     .custom-light-picker {
       padding: 4px;
-      background: #f5f6f7ff;
+      background:  @global-curd-input-background-color;
     }
 
     .custom-light-input-affix-wrapper,
     .custom-light-input,
     .custom-light-picker-input .custom-light-picker-clear {
-      background: #f5f6f7ff;
+      background:  @global-curd-input-background-color;
     }
   }
 }

package/dist/components/TableMax/TableMax.js

@@ -167,7 +167,10 @@ var TableMax = function TableMax(_ref) {
     dragBeforeEnd = _ref$dragBeforeEnd === void 0 ? function () {
       return true;
     } : _ref$dragBeforeEnd,
-    dragBeforeStart = _ref.dragBeforeStart;
+    dragBeforeStart = _ref.dragBeforeStart,
+    getContextMenu = _ref.getContextMenu,
+    onClickContextMenu = _ref.onClickContextMenu,
+    getRowHoverTipConfig = _ref.getRowHoverTipConfig;
   var columns = useMemo(function () {
     // 给columns配置默认的过滤函数、排序函数
     return setDefaultSortFn(setDefaultFilterFn(cloneDeep(originColumns)));
@@ -1005,7 +1008,10 @@ var TableMax = function TableMax(_ref) {
     theme: theme,
     dragBeforeStart: dragBeforeStart,
     hasVerticalScrollBar: hasVerticalScrollBar,
-    shadowColumnInfo: shadowColumnInfo
+    shadowColumnInfo: shadowColumnInfo,
+    getContextMenu: getContextMenu,
+    onClickContextMenu: onClickContextMenu,
+    getRowHoverTipConfig: getRowHoverTipConfig
   };
   return /*#__PURE__*/_jsx(_Form, {
     form: form,

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

@@ -23,15 +23,33 @@
   .custom-dark-input,
   .custom-dark-input-affix-wrapper,
   .custom-dark-switch {
-    background-color: #494c5dff;
+    background-color: @global-curd-input-background-color;
   }
 
   .custom-dark-switch-checked {
-    background-color: #fa541c;
+    background-color: @global-primary-color;
   }
 
   .custom-dark-picker-clear,
   .custom-dark-select-clear {
-    background-color: #494c5dff;
+    background-color: @global-curd-input-background-color;
+  }
+
+  .custom-light-select,
+  .custom-light-picker,
+  .custom-light-input-number,
+  .custom-light-input,
+  .custom-light-input-affix-wrapper,
+  .custom-light-switch {
+    background-color: @global-curd-input-background-color;
+  }
+
+  .custom-light-switch-checked {
+    background-color: @global-primary-color;
+  }
+
+  .custom-light-picker-clear,
+  .custom-light-select-clear {
+    background-color: @global-curd-input-background-color;
   }
 }

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

@@ -43,7 +43,7 @@
   margin-bottom: 10px;
 
   .reset {
-    color: #fa541cff;
+    color: @global-primary-color;
   }
 }
 
@@ -109,6 +109,6 @@
   color: @globalColor1;
 
   &:hover {
-    color: #fa541c;
+    color: @global-primary-color;
   }
 }

package/dist/components/TableMax/tableMax.less

@@ -34,7 +34,7 @@
       // margin-bottom: 6px;
 
       &:hover {
-        color: #fa541c;
+        color: @global-primary-color;
       }
     }
 

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

@@ -12,6 +12,10 @@ export type ColumnPinningConfigType = {
     right: string[];
 };
 export type OnSelectChangeType = (row: any, original: any, selected: boolean, event: any) => void;
+export type IMenuOptionsType = {
+    label: string;
+    value: any;
+}[];
 export type TableMaxProps = {
     /**
      * @description ddd
@@ -194,6 +198,22 @@ export type TableMaxProps = {
     columnResizeMode?: ColumnResizeMode;
     /**行拖动开始前 */
     dragBeforeStart?: () => boolean;
+    /**右键菜单，配置后，开启右键菜单功能：点击右键时，获取菜单可选项 */
+    getContextMenu?: (params: {
+        row: any;
+        column: any;
+    }) => IMenuOptionsType;
+    /**点击菜单选项 */
+    onClickContextMenu?: (params: {
+        row: any;
+        column: any;
+        clickedMenuValue: any;
+    }) => void;
+    /**获取行hover时的tip信息 */
+    getRowHoverTipConfig?: (row: any) => {
+        title: string;
+        color: string;
+    };
 };
 export type TableContextType = {
     table: any;

package/dist/themes/variables.less

@@ -1,5 +1,9 @@
 
 // @primary-color: #fa541c; // 全局主色
+@global-primary-color: var(--global-primary-color, #fa541c); // 全局主色
+
+// 输入框背景色
+@global-curd-input-background-color: var(--global-curd-input-background-color, #494c5dff);
 
 @scrollThumb: var(--scrollThumb, rgba(255, 255, 255, 0.2));
 @scrollThumbHover: var(--scrollThumbHover, rgba(255, 255, 255, 0.3));

package/dist/themes/variablesConfig.d.ts

@@ -1,2 +1,2 @@
-import { VariablesConfigType } from "../components/ThemeProvider";
+import { VariablesConfigType } from '../components/ThemeProvider';
 export declare const PublicThemeVariablesConfig: VariablesConfigType;

package/dist/themes/variablesConfig.js

@@ -1,5 +1,7 @@
 export var PublicThemeVariablesConfig = {
-  "light": {
+  light: {
+    '--global-curd-input-background-color': '#f5f6f7ff',
+    '--global-primary-color': '#fa541c',
     '--scrollThumb': 'rgba(0, 0, 0, 0.2)',
     '--scrollThumbHover': 'rgba(0, 0, 0, 0.3)',
     '--sliderRightBorder': '#221919',
@@ -53,7 +55,9 @@ export var PublicThemeVariablesConfig = {
     // 表格列设置区列显隐图标颜色
     '--tableColor7': '#F5F6F7' // 表格列设置区列表元素边框颜色
   },
-  "dark": {
+  dark: {
+    '--global-curd-input-background-color': '#494c5dff',
+    '--global-primary-color': '#fa541c',
     '--primaryColor': 'blue',
     '--split-line': '#5E6175',
     '--scrollThumb': 'rgba(255, 255, 255, 0.2)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",
@@ -18,6 +18,7 @@
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "local": "dumi dev",
     "prepare": "husky install && dumi setup",
     "prepublishOnly": "father doctor && npm run build",
     "start": "npm run dev"