@arim-aisdc/public-components 2.3.37 → 2.3.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/components/CenterModal/CenterModal.js +11 -10
  2. package/dist/components/CustomForm/CustomForm.js +11 -11
  3. package/dist/components/TableMax/TableBody/Row.d.ts +1 -5
  4. package/dist/components/TableMax/TableBody/Row.js +51 -33
  5. package/dist/components/TableMax/TableBody/Row1.d.ts +1 -5
  6. package/dist/components/TableMax/TableBody/Row1.js +1 -4
  7. package/dist/components/TableMax/TableBody/components/Total.d.ts +1 -2
  8. package/dist/components/TableMax/TableBody/components/Total.js +1 -4
  9. package/dist/components/TableMax/TableBody/index.d.ts +1 -5
  10. package/dist/components/TableMax/TableBody/index.js +0 -4
  11. package/dist/components/TableMax/TableBody/index.less +0 -27
  12. package/dist/components/TableMax/TableHeader/index.d.ts +1 -5
  13. package/dist/components/TableMax/TableHeader/index.js +16 -5
  14. package/dist/components/TableMax/TableHeader/index.less +2 -29
  15. package/dist/components/TableMax/TableHeader/utils.js +12 -4
  16. package/dist/components/TableMax/TableMax.js +22 -53
  17. package/dist/components/TableMax/components/ColumnSort/customSortFns.d.ts +8 -8
  18. package/dist/components/TableMax/hooks/useColumnResize.js +6 -4
  19. package/dist/components/TableMax/hooks/useColumnWidth.js +3 -2
  20. package/dist/components/TableMax/hooks/useTableScrollShadow.d.ts +14 -0
  21. package/dist/components/TableMax/hooks/useTableScrollShadow.js +106 -0
  22. package/dist/components/TableMax/tableMax.less +69 -1
  23. package/dist/components/TableMax/utils.d.ts +1 -0
  24. package/dist/components/TableMax/utils.js +13 -1
  25. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  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); }
2
- var _excluded = ["open", "title", "okText", "hasfooter", "footer", "width", "height", "size", "renderContent", "handleConfirm", "handleCancel", "confirmLoading", "maskClosable", "bodyStyle", "afterClose", "enableResizing", "enableDragging", "minResizeWidth", "minResizeHeight", "maxResizeWidth", "maxResizeHeight"];
2
+ var _excluded = ["open", "title", "okText", "hasfooter", "footer", "width", "height", "size", "renderContent", "handleConfirm", "handleCancel", "confirmLoading", "maskClosable", "bodyStyle", "afterClose", "enableResizing", "enableDragging", "minResizeWidth", "minResizeHeight", "maxResizeWidth", "maxResizeHeight", "className"];
3
3
  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; }
4
4
  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; }
5
5
  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; }
@@ -13,14 +13,14 @@ import { Rnd } from 'react-rnd';
13
13
  import "./index.less";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  var resizeHandleClasses = {
16
- bottom: "resizeHandleBottom",
17
- bottomLeft: "resizeHandleBottomLeft",
18
- bottomRight: "resizeHandleBottomRight",
19
- left: "resizeHandleLeft",
20
- right: "resizeHandleRight",
21
- top: "resizeHandleTop",
22
- topLeft: "resizeHandleTopLeft",
23
- topRight: "resizeHandleTopRight"
16
+ bottom: 'resizeHandleBottom',
17
+ bottomLeft: 'resizeHandleBottomLeft',
18
+ bottomRight: 'resizeHandleBottomRight',
19
+ left: 'resizeHandleLeft',
20
+ right: 'resizeHandleRight',
21
+ top: 'resizeHandleTop',
22
+ topLeft: 'resizeHandleTopLeft',
23
+ topRight: 'resizeHandleTopRight'
24
24
  };
25
25
  var CenterModal = function CenterModal(_ref) {
26
26
  var _ref$open = _ref.open,
@@ -59,6 +59,7 @@ var CenterModal = function CenterModal(_ref) {
59
59
  _ref$maxResizeWidth = _ref.maxResizeWidth,
60
60
  maxResizeWidth = _ref$maxResizeWidth === void 0 ? 1800 : _ref$maxResizeWidth,
61
61
  maxResizeHeight = _ref.maxResizeHeight,
62
+ className = _ref.className,
62
63
  rest = _objectWithoutProperties(_ref, _excluded);
63
64
  var modalBodyRef = useRef(null);
64
65
  var modalBodySizeRef = useRef(null);
@@ -179,7 +180,7 @@ var CenterModal = function CenterModal(_ref) {
179
180
  }
180
181
  };
181
182
  return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
182
- className: "centerModalContainer centerModal".concat(size),
183
+ className: "centerModalContainer centerModal".concat(size, " ").concat(className || ''),
183
184
  wrapClassName: 'wrapClassName',
184
185
  title: /*#__PURE__*/_jsx("div", {
185
186
  className: "modal-header ".concat(dragHandleClassName),
@@ -239,7 +239,7 @@ var CustomForm = function CustomForm(_ref, ref) {
239
239
  };
240
240
  }, []);
241
241
  var getElement = function getElement(item) {
242
- var _item$setting, _item$inputTips, _item$inputTips2, _item$setting2, _item$setting3;
242
+ var _item$setting, _item$setting2, _item$inputTips, _item$inputTips2, _item$setting3, _item$setting4;
243
243
  var element = /*#__PURE__*/_jsx(Input, {});
244
244
  switch (item.formType) {
245
245
  case CustomFormItemType.Text:
@@ -316,7 +316,7 @@ var CustomForm = function CustomForm(_ref, ref) {
316
316
  maxTagCount: item.maxTagCount,
317
317
  optionFilterProp: item.optionFilterProp || 'value',
318
318
  optionLabelProp: item.optionLabelProp || 'children',
319
- children: item.setting.map(function (el, num) {
319
+ children: (item === null || item === void 0 ? void 0 : item.setting) && Array.isArray(item.setting) && ((_item$setting2 = item.setting) === null || _item$setting2 === void 0 ? void 0 : _item$setting2.map(function (el, num) {
320
320
  var _el$options;
321
321
  if (el !== null && el !== void 0 && el.options && (el === null || el === void 0 || (_el$options = el.options) === null || _el$options === void 0 ? void 0 : _el$options.length) > 0) {
322
322
  return /*#__PURE__*/_jsx(OptGroup, {
@@ -342,7 +342,7 @@ var CustomForm = function CustomForm(_ref, ref) {
342
342
  }) : el.label
343
343
  }, num);
344
344
  }
345
- })
345
+ }))
346
346
  });
347
347
  break;
348
348
  case CustomFormItemType.Radio:
@@ -352,7 +352,7 @@ var CustomForm = function CustomForm(_ref, ref) {
352
352
  return commonChange(e, item);
353
353
  },
354
354
  disabled: item === null || item === void 0 ? void 0 : item.disabled,
355
- children: item.setting.map(function (el, num) {
355
+ children: (item === null || item === void 0 ? void 0 : item.setting) && Array.isArray(item.setting) && item.setting.map(function (el, num) {
356
356
  return /*#__PURE__*/_jsx(Radio, {
357
357
  value: el.value,
358
358
  children: el.label
@@ -368,7 +368,7 @@ var CustomForm = function CustomForm(_ref, ref) {
368
368
  // style={{ width: 200 }}
369
369
  ,
370
370
  allowClear: item.allowClear === false ? false : true,
371
- options: item.setting,
371
+ options: item.setting || [],
372
372
  placeholder: item.inputTips,
373
373
  onSearch: debounce(function (value) {
374
374
  var _item$handleSearch3;
@@ -385,7 +385,7 @@ var CustomForm = function CustomForm(_ref, ref) {
385
385
  break;
386
386
  case CustomFormItemType.Cascader:
387
387
  element = /*#__PURE__*/_jsx(Cascader, {
388
- options: item.setting,
388
+ options: item.setting || [],
389
389
  expandTrigger: "hover",
390
390
  displayRender: displayRender,
391
391
  onChange: function onChange(e) {
@@ -568,13 +568,13 @@ var CustomForm = function CustomForm(_ref, ref) {
568
568
  var _item$handleSelect2;
569
569
  return (_item$handleSelect2 = item.handleSelect) === null || _item$handleSelect2 === void 0 ? void 0 : _item$handleSelect2.call(item, value);
570
570
  }, 500) : undefined,
571
- notFoundContent: ((_item$setting2 = item.setting) === null || _item$setting2 === void 0 ? void 0 : _item$setting2.length) >= 0 ? null : /*#__PURE__*/_jsx(Spin, {
571
+ notFoundContent: ((_item$setting3 = item.setting) === null || _item$setting3 === void 0 ? void 0 : _item$setting3.length) >= 0 ? null : /*#__PURE__*/_jsx(Spin, {
572
572
  size: "small"
573
573
  }),
574
574
  style: {
575
575
  width: '100%'
576
576
  },
577
- children: item.setting.map(function (el, num) {
577
+ children: (item === null || item === void 0 ? void 0 : item.setting) && Array.isArray(item.setting) && item.setting.map(function (el, num) {
578
578
  return /*#__PURE__*/_jsx(Option, {
579
579
  value: el.value,
580
580
  label: el.label,
@@ -611,7 +611,7 @@ var CustomForm = function CustomForm(_ref, ref) {
611
611
  var _item$handleSelect3;
612
612
  return (_item$handleSelect3 = item.handleSelect) === null || _item$handleSelect3 === void 0 ? void 0 : _item$handleSelect3.call(item, value);
613
613
  }, 500) : undefined,
614
- notFoundContent: ((_item$setting3 = item.setting) === null || _item$setting3 === void 0 ? void 0 : _item$setting3.length) >= 0 ? null : /*#__PURE__*/_jsx(Spin, {
614
+ notFoundContent: ((_item$setting4 = item.setting) === null || _item$setting4 === void 0 ? void 0 : _item$setting4.length) >= 0 ? null : /*#__PURE__*/_jsx(Spin, {
615
615
  size: "small"
616
616
  }),
617
617
  style: {
@@ -637,7 +637,7 @@ var CustomForm = function CustomForm(_ref, ref) {
637
637
  onChange: function onChange(e) {
638
638
  commonChange(e, item);
639
639
  },
640
- options: item.setting,
640
+ options: item.setting || [],
641
641
  defaultValue: item.defaultValue
642
642
  });
643
643
  break;
@@ -647,7 +647,7 @@ var CustomForm = function CustomForm(_ref, ref) {
647
647
  case CustomFormItemType.ConditionExpression:
648
648
  element = /*#__PURE__*/_jsx(ConditionExpression, {
649
649
  showParameter: item === null || item === void 0 ? void 0 : item.showParameter,
650
- parameterOptions: item === null || item === void 0 ? void 0 : item.setting
650
+ parameterOptions: (item === null || item === void 0 ? void 0 : item.setting) || []
651
651
  });
652
652
  break;
653
653
  case CustomFormItemType.RemoteSelect:
@@ -40,10 +40,6 @@ type IRowProps = {
40
40
  theme: string;
41
41
  dragBeforeStart?: (datas: any) => boolean;
42
42
  rowKey?: string;
43
- shadowColumnInfo: {
44
- leftLastColumnId: string;
45
- rightFirstColumnId: string;
46
- };
47
43
  onCellContextMenu: (e: React.MouseEvent, cell: any) => void;
48
44
  /**获取行hover时的tip信息 */
49
45
  getRowHoverTipConfig?: (row: any) => {
@@ -62,5 +58,5 @@ type IRowProps = {
62
58
  setRowSelection?: Function;
63
59
  openMemo?: boolean;
64
60
  };
65
- declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, 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, tableTooltip, changeHoverRow, clearHoverRowIndex, hoverRowIndex, dropSide, onEditValueChange, setRowSelection, openMemo }: IRowProps) => import("react/jsx-runtime").JSX.Element;
61
+ declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, 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, onCellContextMenu, getRowHoverTipConfig, tableTooltip, changeHoverRow, clearHoverRowIndex, hoverRowIndex, dropSide, onEditValueChange, setRowSelection, openMemo }: IRowProps) => import("react/jsx-runtime").JSX.Element;
66
62
  export default Row;
@@ -66,7 +66,6 @@ var Row = function Row(_ref) {
66
66
  canEditRowWhenDClick = _ref.canEditRowWhenDClick,
67
67
  theme = _ref.theme,
68
68
  dragBeforeStart = _ref.dragBeforeStart,
69
- shadowColumnInfo = _ref.shadowColumnInfo,
70
69
  onCellContextMenu = _ref.onCellContextMenu,
71
70
  getRowHoverTipConfig = _ref.getRowHoverTipConfig,
72
71
  tableTooltip = _ref.tableTooltip,
@@ -299,8 +298,6 @@ var Row = function Row(_ref) {
299
298
  var handleCellRightClick = useCallback(function (e, cell) {
300
299
  onCellContextMenu(e, cell);
301
300
  }, [onCellContextMenu]);
302
- var leftLastColumnId = shadowColumnInfo.leftLastColumnId,
303
- rightFirstColumnId = shadowColumnInfo.rightFirstColumnId;
304
301
  var _useState = useState({
305
302
  title: ' ',
306
303
  color: ''
@@ -325,22 +322,37 @@ var Row = function Row(_ref) {
325
322
  }
326
323
  };
327
324
  }, []);
328
-
329
- // 优化:将行渲染逻辑提取为useMemo
330
- var rowComMemo = useCallback(function (row) {
325
+ var rowComMemo = useMemo(function () {
326
+ // 添加数据验证
327
+ if (!(row !== null && row !== void 0 && row.getVisibleCells)) {
328
+ console.warn('Row data not ready');
329
+ return null;
330
+ }
331
331
  var renderCell = function renderCell(cell) {
332
- var _cellClassName;
332
+ var _cell$column, _cell$getValue, _cell$getValue2, _cellClassName;
333
+ // 确保 cell.column.columnDef 存在
334
+ if (!(cell !== null && cell !== void 0 && (_cell$column = cell.column) !== null && _cell$column !== void 0 && _cell$column.columnDef)) {
335
+ console.warn('Cell column definition missing', cell);
336
+ return null;
337
+ }
333
338
  var _cell$column$columnDe = cell.column.columnDef,
334
339
  columnEditable = _cell$column$columnDe.editable,
335
340
  accessorKey = _cell$column$columnDe.accessorKey,
336
341
  header = _cell$column$columnDe.header,
337
342
  columnClassName = _cell$column$columnDe.columnClassName,
338
- id = _cell$column$columnDe.id,
343
+ columnId = _cell$column$columnDe.id,
339
344
  filterType = _cell$column$columnDe.filterType;
345
+
346
+ // 多重保障确保列ID不为undefined
347
+ var safeColumnId = columnId || accessorKey || (cell === null || cell === void 0 ? void 0 : cell.id) || "cell-".concat(Math.random().toString(36).slice(2, 9));
340
348
  var columnEditing = rowEditing && columnEditable;
341
- var rawValue = cell.getValue();
349
+ var rawValue = (_cell$getValue = (_cell$getValue2 = cell.getValue) === null || _cell$getValue2 === void 0 ? void 0 : _cell$getValue2.call(cell)) !== null && _cell$getValue !== void 0 ? _cell$getValue : '';
342
350
 
343
- // 创建增强上下文
351
+ // 检查必要的函数是否存在
352
+ if (typeof cell.getContext !== 'function') {
353
+ console.warn('cell.getContext is not a function', cell);
354
+ return null;
355
+ }
344
356
  var originalContext = cell.getContext();
345
357
  var enhancedContext = _objectSpread(_objectSpread({}, originalContext), {}, {
346
358
  getValue: function getValue() {
@@ -354,7 +366,7 @@ var Row = function Row(_ref) {
354
366
  return enhancedContext.getFormattedValue();
355
367
  }
356
368
  });
357
- var cellClassNames = [columnEditing ? 'tbody-tr-td-editting' : '', id === leftLastColumnId ? 'tbody-tr-td-cell-fix-left-last' : '', id === rightFirstColumnId ? 'tbody-tr-td-cell-fix-right-first' : '', columnClassName ? columnClassName.join(' ') : ''].concat(_toConsumableArray((cellClassName === null || cellClassName === void 0 || (_cellClassName = cellClassName(cell)) === null || _cellClassName === void 0 ? void 0 : _cellClassName.map(function (item) {
369
+ var cellClassNames = [columnEditing ? 'tbody-tr-td-editting' : '', columnClassName ? columnClassName.join(' ') : ''].concat(_toConsumableArray((cellClassName === null || cellClassName === void 0 || (_cellClassName = cellClassName(cell)) === null || _cellClassName === void 0 ? void 0 : _cellClassName.map(function (item) {
358
370
  return "".concat(item, "-").concat(theme);
359
371
  })) || []), ['tbody-tr-td']).filter(Boolean).join(' ');
360
372
  return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
@@ -376,25 +388,31 @@ var Row = function Row(_ref) {
376
388
  }))
377
389
  }), cell.id);
378
390
  };
379
- return /*#__PURE__*/_jsx("tr", {
380
- id: rowEditing ? "".concat(tableId, "-tbody-tr-editing") : undefined,
381
- ref: function ref(node) {
382
- dropRef(node && !editting ? node : null);
383
- dragRef(node && canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? node : null);
384
- },
385
- style: _objectSpread({
386
- opacity: isDragging || selectedRowDragging && row.getIsSelected() ? 0.5 : 1,
387
- cursor: canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? 'move' : 'auto'
388
- }, rowStyle),
389
- onClick: handleRowClick,
390
- onMouseEnter: rowMouseEnter,
391
- onMouseLeave: rowMouseLeave,
392
- className: rowClassNames,
393
- children: row.getVisibleCells().map(renderCell)
394
- });
395
- }, [rowEditing, tableId, editting, canRowDrag, disableDragRowIds, isDragging, selectedRowDragging, rowStyle, handleRowClick, rowMouseEnter, rowMouseLeave, rowClassNames, leftLastColumnId, rightFirstColumnId, cellClassName, theme, rowHeight, table, handleCellRightClick, getCellProps, tableTooltip, onEditValueChange, dateFormat
396
- // row, row.getVisibleCells(), row.getIsSelected(), row.getValue(), row.renderValue()
397
- ]);
391
+ try {
392
+ var cells = row.getVisibleCells();
393
+ return /*#__PURE__*/_jsx("tr", {
394
+ id: rowEditing ? "".concat(tableId, "-tbody-tr-editing") : undefined,
395
+ ref: function ref(node) {
396
+ dropRef(node && !editting ? node : null);
397
+ dragRef(node && canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? node : null);
398
+ },
399
+ style: _objectSpread({
400
+ opacity: isDragging || selectedRowDragging && row.getIsSelected() ? 0.5 : 1,
401
+ cursor: canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? 'move' : 'auto'
402
+ }, rowStyle),
403
+ onClick: handleRowClick,
404
+ onMouseEnter: rowMouseEnter,
405
+ onMouseLeave: rowMouseLeave,
406
+ className: rowClassNames,
407
+ children: cells.map(renderCell)
408
+ });
409
+ } catch (error) {
410
+ console.error('Error rendering row:', error);
411
+ return null;
412
+ }
413
+ }, [
414
+ // 依赖项保持不变
415
+ row, row.id, rowEditing, tableId, editting, canRowDrag, disableDragRowIds, isDragging, selectedRowDragging, rowStyle, handleRowClick, rowMouseEnter, rowMouseLeave, rowClassNames, cellClassName, theme, rowHeight, table, handleCellRightClick, getCellProps, tableTooltip, onEditValueChange, dateFormat, row.getVisibleCells(), row.getIsSelected()]);
398
416
  var rowCom = function rowCom() {
399
417
  var renderCell = function renderCell(cell) {
400
418
  var _cellClassName2;
@@ -422,7 +440,7 @@ var Row = function Row(_ref) {
422
440
  return enhancedContext.getFormattedValue();
423
441
  }
424
442
  });
425
- var cellClassNames = [columnEditing ? 'tbody-tr-td-editting' : '', id === leftLastColumnId ? 'tbody-tr-td-cell-fix-left-last' : '', id === rightFirstColumnId ? 'tbody-tr-td-cell-fix-right-first' : '', columnClassName ? columnClassName.join(' ') : ''].concat(_toConsumableArray((cellClassName === null || cellClassName === void 0 || (_cellClassName2 = cellClassName(cell)) === null || _cellClassName2 === void 0 ? void 0 : _cellClassName2.map(function (item) {
443
+ var cellClassNames = [columnEditing ? 'tbody-tr-td-editting' : '', columnClassName ? columnClassName.join(' ') : ''].concat(_toConsumableArray((cellClassName === null || cellClassName === void 0 || (_cellClassName2 = cellClassName(cell)) === null || _cellClassName2 === void 0 ? void 0 : _cellClassName2.map(function (item) {
426
444
  return "".concat(item, "-").concat(theme);
427
445
  })) || []), ['tbody-tr-td']).filter(Boolean).join(' ');
428
446
  return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
@@ -471,8 +489,8 @@ var Row = function Row(_ref) {
471
489
  getPopupContainer: function getPopupContainer() {
472
490
  return tableBodyRef.current || document.body;
473
491
  },
474
- children: openMemo ? rowComMemo(row) : rowCom()
475
- })) : openMemo ? rowComMemo(row) : rowCom(), row.getIsExpanded() && /*#__PURE__*/_jsx("tr", {
492
+ children: openMemo ? rowComMemo : rowCom()
493
+ })) : openMemo ? rowComMemo : rowCom(), row.getIsExpanded() && /*#__PURE__*/_jsx("tr", {
476
494
  className: "tbody-tr-subrow",
477
495
  children: /*#__PURE__*/_jsx("td", {
478
496
  colSpan: row.getVisibleCells().length,
@@ -40,10 +40,6 @@ type IRowProps = {
40
40
  theme: string;
41
41
  dragBeforeStart?: (datas: any) => boolean;
42
42
  rowKey?: string;
43
- shadowColumnInfo: {
44
- leftLastColumnId: string;
45
- rightFirstColumnId: string;
46
- };
47
43
  onCellContextMenu: (e: React.MouseEvent, cell: any) => void;
48
44
  /**获取行hover时的tip信息 */
49
45
  getRowHoverTipConfig?: (row: any) => {
@@ -60,5 +56,5 @@ type IRowProps = {
60
56
  dropSide: DropSide;
61
57
  onEditValueChange?: (field: string, value: any, extra?: any) => void;
62
58
  };
63
- declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, 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, tableTooltip, changeHoverRow, clearHoverRowIndex, hoverRowIndex, dropSide, onEditValueChange, }: IRowProps) => import("react/jsx-runtime").JSX.Element;
59
+ declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, 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, onCellContextMenu, getRowHoverTipConfig, tableTooltip, changeHoverRow, clearHoverRowIndex, hoverRowIndex, dropSide, onEditValueChange, }: IRowProps) => import("react/jsx-runtime").JSX.Element;
64
60
  export default Row;
@@ -62,7 +62,6 @@ var Row = function Row(_ref) {
62
62
  canEditRowWhenDClick = _ref.canEditRowWhenDClick,
63
63
  theme = _ref.theme,
64
64
  dragBeforeStart = _ref.dragBeforeStart,
65
- shadowColumnInfo = _ref.shadowColumnInfo,
66
65
  onCellContextMenu = _ref.onCellContextMenu,
67
66
  getRowHoverTipConfig = _ref.getRowHoverTipConfig,
68
67
  tableTooltip = _ref.tableTooltip,
@@ -267,8 +266,6 @@ var Row = function Row(_ref) {
267
266
  var handleCellRightClick = function handleCellRightClick(e, cell) {
268
267
  onCellContextMenu(e, cell);
269
268
  };
270
- var leftLastColumnId = shadowColumnInfo.leftLastColumnId,
271
- rightFirstColumnId = shadowColumnInfo.rightFirstColumnId;
272
269
  var _useState = useState({
273
270
  title: ' ',
274
271
  color: ''
@@ -359,7 +356,7 @@ var Row = function Row(_ref) {
359
356
  }
360
357
  });
361
358
  return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
362
- className: "".concat(columnEditing ? 'tbody-tr-td-editting' : '', " ").concat(id === leftLastColumnId ? 'tbody-tr-td-cell-fix-left-last' : '', " ").concat(id === rightFirstColumnId ? 'tbody-tr-td-cell-fix-right-first' : '', " ").concat(columnClassName ? columnClassName.join(' ') : '', " ").concat((cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(cell).map(function (item) {
359
+ className: "".concat(columnEditing ? 'tbody-tr-td-editting' : '', " ").concat(columnClassName ? columnClassName.join(' ') : '', " ").concat((cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(cell).map(function (item) {
363
360
  return "".concat(item, "-").concat(theme);
364
361
  })) || '', " tbody-tr-td"),
365
362
  style: _objectSpread({
@@ -1,7 +1,6 @@
1
1
  import '../../TableBody/index.less';
2
- export declare const Total: ({ table, totalDatas, shadowColumnInfo, rowHeight }: {
2
+ export declare const Total: ({ table, totalDatas, rowHeight }: {
3
3
  table: any;
4
4
  totalDatas: any;
5
- shadowColumnInfo: any;
6
5
  rowHeight: any;
7
6
  }) => import("react/jsx-runtime").JSX.Element;
@@ -11,10 +11,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
11
11
  export var Total = function Total(_ref) {
12
12
  var table = _ref.table,
13
13
  totalDatas = _ref.totalDatas,
14
- shadowColumnInfo = _ref.shadowColumnInfo,
15
14
  rowHeight = _ref.rowHeight;
16
- var leftLastColumnId = shadowColumnInfo.leftLastColumnId,
17
- rightFirstColumnId = shadowColumnInfo.rightFirstColumnId;
18
15
  var footerGroups = table.getFooterGroups();
19
16
 
20
17
  // 公共样式对象,避免重复创建
@@ -45,7 +42,7 @@ export var Total = function Total(_ref) {
45
42
  var cellStyle = _objectSpread(_objectSpread({}, pinningStyle), {}, {
46
43
  height: "".concat(rowHeight - 1, "px")
47
44
  });
48
- var cellClassNames = ['tbody-tr-td', headerId === leftLastColumnId && 'thead-tr-th-cell-fix-left-last', headerId === rightFirstColumnId && 'thead-tr-th-cell-fix-right-first'].filter(Boolean).join(' ');
45
+ var cellClassNames = ['tbody-tr-td'].filter(Boolean).join(' ');
49
46
  return /*#__PURE__*/_jsx("td", {
50
47
  colSpan: colSpan,
51
48
  style: cellStyle,
@@ -48,10 +48,6 @@ type TableBodyPropsType = {
48
48
  editingRowId: string;
49
49
  handleEditRowWhenDClick: (row: any) => void;
50
50
  dragBeforeStart: (datas: any) => boolean;
51
- shadowColumnInfo: {
52
- leftLastColumnId: string;
53
- rightFirstColumnId: string;
54
- };
55
51
  /**右键菜单,配置后,开启右键菜单功能:点击右键时,获取菜单可选项 */
56
52
  getContextMenu?: (params: {
57
53
  row: any;
@@ -76,5 +72,5 @@ type TableBodyPropsType = {
76
72
  setRowSelection: Function;
77
73
  openMemo?: boolean;
78
74
  };
79
- declare const TableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, compactMode, onEditValueChange, hasTotalRow, totalDatas, setRowSelection, openMemo }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
75
+ declare const TableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, compactMode, onEditValueChange, hasTotalRow, totalDatas, setRowSelection, openMemo }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
80
76
  export default TableBody;
@@ -67,7 +67,6 @@ var TableBody = function TableBody(_ref) {
67
67
  editingRowId = _ref.editingRowId,
68
68
  handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
69
69
  dragBeforeStart = _ref.dragBeforeStart,
70
- shadowColumnInfo = _ref.shadowColumnInfo,
71
70
  getContextMenu = _ref.getContextMenu,
72
71
  onClickContextMenu = _ref.onClickContextMenu,
73
72
  getRowHoverTipConfig = _ref.getRowHoverTipConfig,
@@ -369,7 +368,6 @@ var TableBody = function TableBody(_ref) {
369
368
  selectRowWhenClick: selectRowWhenClick,
370
369
  handleEditRowWhenDClick: handleEditRowWhenDClick,
371
370
  canEditRowWhenDClick: canEditRowWhenDClick,
372
- shadowColumnInfo: shadowColumnInfo,
373
371
  onCellContextMenu: handleCellContextMenu,
374
372
  getRowHoverTipConfig: getRowHoverTipConfig,
375
373
  tableTooltip: tableTooltip,
@@ -465,7 +463,6 @@ var TableBody = function TableBody(_ref) {
465
463
  selectRowWhenClick: selectRowWhenClick,
466
464
  handleEditRowWhenDClick: handleEditRowWhenDClick,
467
465
  canEditRowWhenDClick: canEditRowWhenDClick,
468
- shadowColumnInfo: shadowColumnInfo,
469
466
  onCellContextMenu: handleCellContextMenu,
470
467
  getRowHoverTipConfig: getRowHoverTipConfig,
471
468
  tableTooltip: tableTooltip,
@@ -483,7 +480,6 @@ var TableBody = function TableBody(_ref) {
483
480
  children: hasTotalRow && /*#__PURE__*/_jsx(Total, {
484
481
  table: table,
485
482
  totalDatas: totalDatas,
486
- shadowColumnInfo: shadowColumnInfo,
487
483
  rowHeight: rowHeight
488
484
  })
489
485
  })]
@@ -159,33 +159,6 @@ table {
159
159
  }
160
160
  }
161
161
 
162
- .tbody-tr-td-cell-fix-left-last::after {
163
- box-shadow: inset 10px 0 8px -8px #00000026;
164
- position: absolute;
165
- top: 0;
166
- right: 0;
167
- bottom: -1px;
168
- width: 30px;
169
- transform: translate(100%);
170
- transition: box-shadow 0.3s;
171
- content: '';
172
- pointer-events: none;
173
- box-sizing: border-box;
174
- }
175
-
176
- .tbody-tr-td-cell-fix-right-first::after {
177
- box-shadow: inset -10px 0 8px -8px #00000026;
178
- position: absolute;
179
- top: 0;
180
- bottom: -1px;
181
- left: 0;
182
- width: 30px;
183
- transform: translate(-100%);
184
- transition: box-shadow 0.3s;
185
- content: '';
186
- pointer-events: none;
187
- }
188
-
189
162
  .thead-tr-th-cell {
190
163
  background: @globalColor0;
191
164
  }
@@ -12,13 +12,9 @@ type TableHeaderProps = {
12
12
  hasGroup?: boolean;
13
13
  getHeaderCellProps?: (columns: TableMaxColumnType[]) => object;
14
14
  columnResizeMode: ColumnResizeMode;
15
- shadowColumnInfo: {
16
- leftLastColumnId: string;
17
- rightFirstColumnId: string;
18
- };
19
15
  disableColumnDrag?: boolean;
20
16
  headerRowNum: number;
21
17
  manualFiltering: boolean;
22
18
  };
23
- declare const TableHeader: ({ tableContentRef, table, canFilter, enableFilters, canSorting, hasGroup, getHeaderCellProps, columnResizeMode, shadowColumnInfo, disableColumnDrag, rowHeight, headerRowNum, manualFiltering, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
19
+ declare const TableHeader: ({ tableContentRef, table, canFilter, enableFilters, canSorting, hasGroup, getHeaderCellProps, columnResizeMode, disableColumnDrag, rowHeight, headerRowNum, manualFiltering, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
24
20
  export default TableHeader;
@@ -12,6 +12,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
12
12
  import Cell from "./Cell";
13
13
  import "./index.less";
14
14
  import { getPinningStyle } from "./utils";
15
+ import { useWhyDidYouUpdate } from 'ahooks';
15
16
  import { jsx as _jsx } from "react/jsx-runtime";
16
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
18
  var TableHeader = function TableHeader(_ref) {
@@ -24,15 +25,26 @@ var TableHeader = function TableHeader(_ref) {
24
25
  hasGroup = _ref.hasGroup,
25
26
  getHeaderCellProps = _ref.getHeaderCellProps,
26
27
  columnResizeMode = _ref.columnResizeMode,
27
- shadowColumnInfo = _ref.shadowColumnInfo,
28
28
  disableColumnDrag = _ref.disableColumnDrag,
29
29
  rowHeight = _ref.rowHeight,
30
30
  headerRowNum = _ref.headerRowNum,
31
31
  manualFiltering = _ref.manualFiltering;
32
32
  var headerGroups = table.getHeaderGroups();
33
33
  var headers = (headerGroups === null || headerGroups === void 0 || (_headerGroups = headerGroups[headerGroups.length - 1]) === null || _headerGroups === void 0 ? void 0 : _headerGroups.headers) || [];
34
- var leftLastColumnId = shadowColumnInfo.leftLastColumnId,
35
- rightFirstColumnId = shadowColumnInfo.rightFirstColumnId;
34
+ useWhyDidYouUpdate('useWhyDidYouUpdate', {
35
+ tableContentRef: tableContentRef,
36
+ table: table,
37
+ canFilter: canFilter,
38
+ enableFilters: enableFilters,
39
+ canSorting: canSorting,
40
+ hasGroup: hasGroup,
41
+ getHeaderCellProps: getHeaderCellProps,
42
+ columnResizeMode: columnResizeMode,
43
+ disableColumnDrag: disableColumnDrag,
44
+ rowHeight: rowHeight,
45
+ headerRowNum: headerRowNum,
46
+ manualFiltering: manualFiltering
47
+ });
36
48
  return /*#__PURE__*/_jsxs("table", {
37
49
  children: [/*#__PURE__*/_jsx("colgroup", {
38
50
  children: headers.map(function (header) {
@@ -53,8 +65,7 @@ var TableHeader = function TableHeader(_ref) {
53
65
  children: headerGroup.headers.map(function (header) {
54
66
  return /*#__PURE__*/_jsx("th", {
55
67
  colSpan: header.colSpan,
56
- style: _objectSpread({}, getPinningStyle(header, table)),
57
- className: "".concat(header.id === leftLastColumnId ? 'thead-tr-th-cell-fix-left-last' : '', " ").concat(header.id === rightFirstColumnId ? 'thead-tr-th-cell-fix-right-first' : ''),
68
+ style: _objectSpread({}, getPinningStyle(header, table, true)),
58
69
  children: header.isPlaceholder || header.id === 'placeholder-column' ? null : /*#__PURE__*/_jsx(Cell, {
59
70
  tableContentRef: tableContentRef,
60
71
  header: header,
@@ -3,6 +3,7 @@ table {
3
3
  // background: @globalColor_14;
4
4
  width: 100%;
5
5
  border-collapse: collapse;
6
+
6
7
  // overflow: hidden;
7
8
 
8
9
  th {
@@ -92,8 +93,7 @@ table {
92
93
  top: 30%;
93
94
  height: 40%;
94
95
  width: 5px;
95
- // background-color: @globalColor_15;
96
- border-right: 1px solid @globalColor_15;
96
+ border-right: 2px solid @globalColor_15;
97
97
  cursor: ew-resize;
98
98
  user-select: none;
99
99
  touch-action: none;
@@ -139,33 +139,6 @@ table {
139
139
  font-weight: @global-table-max-header-font-weight;
140
140
  }
141
141
 
142
- .thead-tr-th-cell-fix-left-last::after {
143
- box-shadow: inset 10px 0 8px -8px #00000026;
144
- position: absolute;
145
- top: 0;
146
- right: 0;
147
- bottom: -1px;
148
- width: 30px;
149
- transform: translate(100%);
150
- transition: box-shadow 0.3s;
151
- content: '';
152
- pointer-events: none;
153
- box-sizing: border-box;
154
- }
155
-
156
- .thead-tr-th-cell-fix-right-first::after {
157
- box-shadow: inset -10px 0 8px -8px #00000026;
158
- position: absolute;
159
- top: 0;
160
- bottom: -1px;
161
- left: 0;
162
- width: 30px;
163
- transform: translate(-100%);
164
- transition: box-shadow 0.3s;
165
- content: '';
166
- pointer-events: none;
167
- }
168
-
169
142
  .table-filter-tr {
170
143
  border-top: 1px solid @tableColor2;
171
144
 
@@ -11,6 +11,7 @@ var getOffsetLeft = function getOffsetLeft(list, column, visibleColumnSizesMap)
11
11
  };
12
12
  var getOffsetRight = function getOffsetRight(list, column, visibleColumnSizesMap) {
13
13
  var x = 0;
14
+ console.log(list, 'list');
14
15
  for (var i = list.length - 1; i > 0; i--) {
15
16
  var curr = list[i];
16
17
  if (curr === column.id) {
@@ -20,7 +21,7 @@ var getOffsetRight = function getOffsetRight(list, column, visibleColumnSizesMap
20
21
  }
21
22
  return x;
22
23
  };
23
- export var getPinningStyle = function getPinningStyle(header, table) {
24
+ export var getPinningStyle = function getPinningStyle(header, table, isHeader) {
24
25
  var _table$getVisibleLeaf;
25
26
  var column = header.column;
26
27
  var visibleColumnSizes = (_table$getVisibleLeaf = table.getVisibleLeafColumns()) === null || _table$getVisibleLeaf === void 0 ? void 0 : _table$getVisibleLeaf.map(function (item) {
@@ -42,7 +43,10 @@ export var getPinningStyle = function getPinningStyle(header, table) {
42
43
  return {
43
44
  position: 'sticky',
44
45
  left: offsetLeft,
45
- zIndex: 100
46
+ zIndex: 100,
47
+ transform: 'translateZ(0)',
48
+ backfaceVisibility: 'hidden' /* 修复渲染抖动 */
49
+
46
50
  // width: column.getSize(),
47
51
  };
48
52
  }
@@ -50,10 +54,14 @@ export var getPinningStyle = function getPinningStyle(header, table) {
50
54
  {
51
55
  var offsetRight = 0;
52
56
  offsetRight += getOffsetRight(columnPinning.right, column, visibleColumnSizesMap);
57
+ console.log(offsetRight, 'offsetRight');
53
58
  return {
54
59
  position: 'sticky',
55
- right: offsetRight,
56
- zIndex: 100
60
+ right: offsetRight - 0.5,
61
+ zIndex: 100,
62
+ backfaceVisibility: 'hidden',
63
+ /* 修复渲染抖动 */
64
+ transform: 'translateZ(0)'
57
65
  // width: column.getSize(),
58
66
  };
59
67
  }
@@ -38,6 +38,7 @@ import PaginationV2 from "./components/PaginationV2";
38
38
  import { useColumnWidth } from "./hooks/useColumnWidth";
39
39
  import "./tableMax.less";
40
40
  import { downloadExcel, getFormatFilters, getFormatFiltersV2, getFormatSorting, operationColumnNoTooltips } from "./utils";
41
+ import { useTableScrollShadow } from "./hooks/useTableScrollShadow";
41
42
  import { jsx as _jsx } from "react/jsx-runtime";
42
43
  import { jsxs as _jsxs } from "react/jsx-runtime";
43
44
  export var ColumnType = /*#__PURE__*/function (ColumnType) {
@@ -62,7 +63,7 @@ var defaultColumnPinningConfig = {
62
63
  var initSelectedRowIds = [];
63
64
  var initColumnFilters = [];
64
65
  var TableMax = function TableMax(_ref) {
65
- var _JSON$parse, _tableContentRef$curr;
66
+ var _JSON$parse;
66
67
  var tableId = _ref.tableId,
67
68
  originColumns = _ref.columns,
68
69
  _ref$datas = _ref.datas,
@@ -376,17 +377,11 @@ var TableMax = function TableMax(_ref) {
376
377
  setExpanded = _React$useState2[1];
377
378
 
378
379
  // 固定列是否显示阴影
379
- var _useState35 = useState({
380
- left: false,
381
- right: false
382
- }),
380
+ var scrollRafId = useRef(null);
381
+ var _useState35 = useState(defaultCompactMode),
383
382
  _useState36 = _slicedToArray(_useState35, 2),
384
- pinShadowVisible = _useState36[0],
385
- setPinShadowVisible = _useState36[1];
386
- var _useState37 = useState(defaultCompactMode),
387
- _useState38 = _slicedToArray(_useState37, 2),
388
- compactMode = _useState38[0],
389
- setCompactMode = _useState38[1];
383
+ compactMode = _useState36[0],
384
+ setCompactMode = _useState36[1];
390
385
  var onColumnVisibilityChange = function onColumnVisibilityChange(data) {
391
386
  if (typeof data === 'function') {
392
387
  var _Object$values, _Object$keys;
@@ -965,41 +960,16 @@ var TableMax = function TableMax(_ref) {
965
960
  })) === null || _tableRows$find3 === void 0 ? void 0 : _tableRows$find3.original);
966
961
  }
967
962
  };
968
- var getPinShadowInfo = useCallback(function () {
969
- var _tableBodyRef$current = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : tableBodyRef.current,
970
- scrollWidth = _tableBodyRef$current.scrollWidth,
971
- clientWidth = _tableBodyRef$current.clientWidth,
972
- scrollLeft = _tableBodyRef$current.scrollLeft;
973
- var newLeftShadowVisible, newRightShadowVisible;
974
- newLeftShadowVisible = scrollLeft > 0;
975
- newRightShadowVisible = scrollWidth - clientWidth - scrollLeft > 1; // 为什么大于1?排除掉小数的情况
976
- if (pinShadowVisible.left !== newLeftShadowVisible || pinShadowVisible.right !== newRightShadowVisible) {
977
- setPinShadowVisible({
978
- left: newLeftShadowVisible,
979
- right: newRightShadowVisible
980
- });
981
- }
982
- }, [pinShadowVisible]);
983
- useEffect(function () {
984
- // 表格宽度变化时(比如调整页面宽度大小),重新计算是否展示阴影
985
- getPinShadowInfo();
986
- }, [tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientWidth, table.getState().columnSizing]);
987
- var scrollHandler = useCallback(function (event) {
988
- if (!event.currentTarget) return;
989
- tableHeaderRef.current.scrollLeft = event.currentTarget.scrollLeft / event.currentTarget.scrollWidth * (tableHeaderRef === null || tableHeaderRef === void 0 ? void 0 : tableHeaderRef.current.scrollWidth);
990
- getPinShadowInfo();
991
- }, [getPinShadowInfo]);
992
963
 
993
- // 获取展示阴影的列
994
- var shadowColumnInfo = useMemo(function () {
995
- var _pop, _shift;
996
- var leftLastColumnId = pinShadowVisible.left ? (_pop = _toConsumableArray(table.getLeftVisibleLeafColumns()).pop()) === null || _pop === void 0 ? void 0 : _pop['id'] : '';
997
- var rightFirstColumnId = pinShadowVisible.right ? (_shift = _toConsumableArray(table.getRightVisibleLeafColumns()).shift()) === null || _shift === void 0 ? void 0 : _shift['id'] : '';
998
- return {
999
- leftLastColumnId: leftLastColumnId,
1000
- rightFirstColumnId: rightFirstColumnId
1001
- };
1002
- }, [columnVisibility, columnPinning, pinShadowVisible]);
964
+ // 横向滚动时,添加列固定阴影
965
+ useTableScrollShadow({
966
+ tableBodyRef: tableBodyRef,
967
+ tableHeaderRef: tableHeaderRef,
968
+ tableContentRef: tableContentRef,
969
+ table: table,
970
+ columnPinning: columnPinning,
971
+ columnSizing: columnSizing
972
+ });
1003
973
  var tableHeaderProps = {
1004
974
  tableId: tableId,
1005
975
  tableContentRef: tableContentRef,
@@ -1012,7 +982,6 @@ var TableMax = function TableMax(_ref) {
1012
982
  hasGroup: hasGroup,
1013
983
  getHeaderCellProps: getHeaderCellProps,
1014
984
  columnResizeMode: columnResizeMode,
1015
- shadowColumnInfo: shadowColumnInfo,
1016
985
  disableColumnDrag: disableColumnDrag,
1017
986
  compactMode: compactMode,
1018
987
  manualFiltering: manualFiltering
@@ -1061,7 +1030,6 @@ var TableMax = function TableMax(_ref) {
1061
1030
  datas: datas,
1062
1031
  theme: theme,
1063
1032
  dragBeforeStart: dragBeforeStart,
1064
- shadowColumnInfo: shadowColumnInfo,
1065
1033
  getContextMenu: getContextMenu,
1066
1034
  onClickContextMenu: onClickContextMenu,
1067
1035
  getRowHoverTipConfig: getRowHoverTipConfig,
@@ -1221,20 +1189,21 @@ var TableMax = function TableMax(_ref) {
1221
1189
  })]
1222
1190
  }), /*#__PURE__*/_jsx("div", {
1223
1191
  ref: tableBodyRef,
1224
- className: "table-body",
1225
- onScroll: scrollHandler,
1192
+ className: "table-body"
1193
+ // onScroll={scrollHandler}
1194
+ ,
1226
1195
  style: {
1227
1196
  width: "100%"
1228
1197
  },
1229
1198
  onMouseEnter: function onMouseEnter() {
1230
- var _tableBodyRef$current2;
1199
+ var _tableBodyRef$current;
1231
1200
  // 给当前元素添加hover类
1232
- (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 || _tableBodyRef$current2.classList.add('hover-active');
1201
+ (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 || _tableBodyRef$current.classList.add('hover-active');
1233
1202
  },
1234
1203
  onMouseLeave: function onMouseLeave() {
1235
- var _tableBodyRef$current3;
1204
+ var _tableBodyRef$current2;
1236
1205
  // 移除当前元素的hover类
1237
- (_tableBodyRef$current3 = tableBodyRef.current) === null || _tableBodyRef$current3 === void 0 || _tableBodyRef$current3.classList.remove('hover-active');
1206
+ (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 || _tableBodyRef$current2.classList.remove('hover-active');
1238
1207
  },
1239
1208
  children: /*#__PURE__*/_jsx(TableBody, _objectSpread({}, tableBodyProps))
1240
1209
  })]
@@ -1,13 +1,13 @@
1
1
  import { TableMaxColumnType } from "../../type";
2
- export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
3
- export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
4
- export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
5
- export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
2
+ export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
3
+ export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
4
+ export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
5
+ export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
6
6
  declare const customSortFns: {
7
- numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
8
- stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
9
- timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
10
- numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
7
+ numberSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
8
+ stringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
9
+ timeSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
10
+ numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
11
11
  };
12
12
  export default customSortFns;
13
13
  export type SortFnType = keyof typeof customSortFns | undefined;
@@ -125,10 +125,12 @@ export var useColumnResize = function useColumnResize(_ref) {
125
125
 
126
126
  // 立即更新列宽(关键修改点)
127
127
  var finalDelta = lastClientXRef.current - startXRef.current;
128
- var newWidth = Math.max(20, startWidthRef.current + finalDelta);
129
- table.setColumnSizing(function (old) {
130
- return _objectSpread(_objectSpread({}, old), {}, _defineProperty({}, header.column.id, newWidth));
131
- });
128
+ if (finalDelta) {
129
+ var newWidth = Math.max(20, startWidthRef.current + finalDelta);
130
+ table.setColumnSizing(function (old) {
131
+ return _objectSpread(_objectSpread({}, old), {}, _defineProperty({}, header.column.id, newWidth));
132
+ });
133
+ }
132
134
 
133
135
  // 隐藏元素
134
136
  if (resizeLineRef.current) {
@@ -244,9 +244,10 @@ export var useColumnWidth = function useColumnWidth(_ref) {
244
244
  */
245
245
  var handleColumnSizingChange = useCallback(function (updater) {
246
246
  var changedColumn = updater();
247
- if (!changedColumn) return;
247
+ if (!changedColumn || JSON.stringify(changedColumn) === '{}') return;
248
248
  setState(produce(function (prevState) {
249
- var _ref2 = Object.entries(changedColumn)[0],
249
+ var _Object$entries;
250
+ var _ref2 = (_Object$entries = Object.entries(changedColumn)) === null || _Object$entries === void 0 ? void 0 : _Object$entries[0],
250
251
  _ref3 = _slicedToArray(_ref2, 2),
251
252
  changedKey = _ref3[0],
252
253
  newWidth = _ref3[1];
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ interface UseTableScrollShadowProps {
3
+ tableBodyRef: React.RefObject<HTMLElement>;
4
+ tableHeaderRef: React.RefObject<HTMLElement>;
5
+ tableContentRef: React.RefObject<HTMLElement>;
6
+ table: any;
7
+ columnPinning: any;
8
+ columnSizing: any;
9
+ }
10
+ export declare const useTableScrollShadow: ({ tableBodyRef, tableHeaderRef, tableContentRef, table, columnPinning, columnSizing }: UseTableScrollShadowProps) => {
11
+ changePinShadow: () => void;
12
+ updateFixedColumnsWidth: () => void;
13
+ };
14
+ export {};
@@ -0,0 +1,106 @@
1
+ // hooks/useTableScrollShadow.ts
2
+ import { useCallback, useEffect, useRef } from 'react';
3
+ export var useTableScrollShadow = function useTableScrollShadow(_ref) {
4
+ var _tableContentRef$curr3;
5
+ var tableBodyRef = _ref.tableBodyRef,
6
+ tableHeaderRef = _ref.tableHeaderRef,
7
+ tableContentRef = _ref.tableContentRef,
8
+ table = _ref.table,
9
+ columnPinning = _ref.columnPinning,
10
+ columnSizing = _ref.columnSizing;
11
+ var scrollRafId = useRef(null);
12
+ var hasShadow = useRef({
13
+ left: false,
14
+ right: true
15
+ });
16
+
17
+ // 检测是否支持 passive events
18
+ var supportsPassive = function () {
19
+ var supports = false;
20
+ try {
21
+ var opts = Object.defineProperty({}, 'passive', {
22
+ get: function get() {
23
+ supports = true;
24
+ }
25
+ });
26
+ window.addEventListener('test', null, opts);
27
+ } catch (e) {}
28
+ return supports;
29
+ }();
30
+
31
+ // 更新阴影状态
32
+ var changePinShadow = useCallback(function () {
33
+ var _tableContentRef$curr, _tableContentRef$curr2;
34
+ var tableBody = tableBodyRef.current;
35
+ if (!tableBody) return;
36
+ var scrollWidth = tableBody.scrollWidth,
37
+ clientWidth = tableBody.clientWidth,
38
+ scrollLeft = tableBody.scrollLeft;
39
+ var hasLeftShadow = scrollLeft > 0;
40
+ var hasRightShadow = Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1;
41
+ (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 || _tableContentRef$curr.style.setProperty('--left-fixed-opacity', "".concat(hasLeftShadow ? 1 : 0));
42
+ (_tableContentRef$curr2 = tableContentRef.current) === null || _tableContentRef$curr2 === void 0 || _tableContentRef$curr2.style.setProperty('--right-fixed-opacity', "".concat(hasRightShadow ? 1 : 0));
43
+ // tableContentRef.current?.classList.toggle('shadow-left', hasLeftShadow);
44
+ // tableContentRef.current?.classList.toggle('shadow-right', hasRightShadow);
45
+ }, [tableBodyRef, tableContentRef]);
46
+
47
+ // 计算固定列宽度
48
+ var updateFixedColumnsWidth = useCallback(function () {
49
+ var container = tableContentRef.current;
50
+ if (!container) return;
51
+ var leftColumns = table.getLeftVisibleLeafColumns();
52
+ var rightColumns = table.getRightVisibleLeafColumns();
53
+ var leftWidth = 0;
54
+ var rightWidth = 0;
55
+ leftColumns.forEach(function (col) {
56
+ leftWidth += col.getSize();
57
+ });
58
+ rightColumns.forEach(function (col) {
59
+ rightWidth += col.getSize();
60
+ });
61
+ container.style.setProperty('--left-fixed-columns-width', "".concat(leftWidth, "px"));
62
+ container.style.setProperty('--right-fixed-columns-width', "".concat(rightWidth + 10, "px"));
63
+ }, [table, tableContentRef]);
64
+
65
+ // 滚动处理函数
66
+ var handleScroll = useCallback(function (event) {
67
+ var target = event.currentTarget;
68
+ if (!target || !tableHeaderRef.current) return;
69
+ var scrollLeft = target.scrollLeft,
70
+ scrollWidth = target.scrollWidth;
71
+ var headerScrollLeft = scrollLeft / scrollWidth * tableHeaderRef.current.scrollWidth;
72
+
73
+ // 实时同步表头滚动
74
+ tableHeaderRef.current.scrollLeft = headerScrollLeft;
75
+ changePinShadow();
76
+ }, [tableHeaderRef, changePinShadow]);
77
+
78
+ // 初始化滚动监听
79
+ useEffect(function () {
80
+ var tableBody = tableBodyRef.current;
81
+ if (!tableBody) return;
82
+ tableBody.addEventListener('scroll', handleScroll, supportsPassive ? {
83
+ passive: true
84
+ } : false);
85
+ return function () {
86
+ if (scrollRafId.current) {
87
+ cancelAnimationFrame(scrollRafId.current);
88
+ }
89
+ tableBody.removeEventListener('scroll', handleScroll);
90
+ };
91
+ }, [tableBodyRef, handleScroll, supportsPassive]);
92
+
93
+ // 监听表格宽度和列尺寸变化
94
+ useEffect(function () {
95
+ changePinShadow();
96
+ }, [(_tableContentRef$curr3 = tableContentRef.current) === null || _tableContentRef$curr3 === void 0 ? void 0 : _tableContentRef$curr3.clientWidth, columnSizing, changePinShadow]);
97
+
98
+ // 监听固定列变化
99
+ useEffect(function () {
100
+ updateFixedColumnsWidth();
101
+ }, [columnPinning, columnSizing, updateFixedColumnsWidth]);
102
+ return {
103
+ changePinShadow: changePinShadow,
104
+ updateFixedColumnsWidth: updateFixedColumnsWidth
105
+ };
106
+ };
@@ -127,12 +127,17 @@
127
127
  .table-header-wrapper {
128
128
  display: flex;
129
129
  background: @tableColor2;
130
+ padding: 0;
130
131
 
131
132
  .table-header {
133
+ position: relative;
132
134
  overflow: hidden;
133
135
  box-sizing: border-box;
134
136
  height: fit-content;
135
- flex: 1;
137
+ width: calc(100% - 10px);
138
+ margin: 0;
139
+ // flex: 1;
140
+ justify-content: space-between;
136
141
  .cell-wapper {
137
142
  line-height: @global-table-max-header-cell-wapper-line-height;
138
143
  }
@@ -141,12 +146,15 @@
141
146
  .table-header-scroll {
142
147
  width: 10px;
143
148
  height: 100%;
149
+ margin: 0;
150
+ padding: 0;
144
151
  }
145
152
  }
146
153
 
147
154
  .table-body {
148
155
  flex: 1;
149
156
  overflow: scroll scroll;
157
+ scroll-behavior: smooth;
150
158
  font-weight: @global-table-max-body-font-weight;
151
159
  // background: @tableColor2;
152
160
  .tbody-tr-td {
@@ -270,3 +278,63 @@
270
278
  }
271
279
  }
272
280
  }
281
+
282
+ .table-center::before {
283
+ // content: '';
284
+ // position: absolute;
285
+ // top: 0;
286
+ // bottom: 0;
287
+ // width: 30px;
288
+ // pointer-events: none;
289
+ // opacity: 0;
290
+ // transition: opacity 0.3s;
291
+ // z-index: 1000;
292
+
293
+ box-shadow: inset 10px 0 8px -8px #00000026;
294
+ position: absolute;
295
+ top: 0;
296
+ bottom: -1px;
297
+ left: 0;
298
+ width: 30px;
299
+ // transform: translate(-100%);
300
+ // transition: box-shadow 0.3s;
301
+ content: '';
302
+ pointer-events: none;
303
+ opacity: var(--left-fixed-opacity);
304
+ transition: opacity 0.3s ease; /* 添加透明度过渡 */
305
+ z-index: 1000;
306
+ }
307
+
308
+ .table-center::after {
309
+ box-shadow: inset -10px 0 8px -8px #00000026;
310
+ position: absolute;
311
+ top: 0;
312
+ bottom: -1px;
313
+ right: 0;
314
+ width: 30px;
315
+ // transform: translate(100%);
316
+ // transition: box-shadow 0.3s;
317
+ content: '';
318
+ pointer-events: none;
319
+ opacity: var(--right-fixed-opacity);
320
+ transition: opacity 0.3s ease; /* 添加透明度过渡 */
321
+ z-index: 1000;
322
+ }
323
+
324
+ .table-center::before {
325
+ left: var(--left-fixed-columns-width);
326
+ // background: linear-gradient(to right, rgba(0,0,0,0.15), transparent);
327
+ }
328
+
329
+ .table-center::after {
330
+ right: var(--right-fixed-columns-width);
331
+ // background: linear-gradient(to left, rgba(0,0,0,0.15), transparent);
332
+ }
333
+
334
+ .table-center.shadow-left::before {
335
+ opacity: 1;
336
+ }
337
+
338
+ .table-center.shadow-right::after {
339
+ opacity: 1;
340
+ }
@@ -44,3 +44,4 @@ export declare const downloadExcel: ({ url, data, title, setDownLoading, method,
44
44
  request?: (...params: any[]) => Promise<Blob>;
45
45
  }) => void;
46
46
  export declare const filterOptions: (inputValue: any, option: any) => boolean;
47
+ export declare const supportsPassive: boolean;
@@ -275,4 +275,16 @@ export var filterOptions = function filterOptions(inputValue, option) {
275
275
  var input = (inputValue !== null && inputValue !== void 0 ? inputValue : '').toUpperCase().trim();
276
276
  var optionFilterString = ('' + ((_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.children)).toUpperCase().trim();
277
277
  return optionFilterString.indexOf(input) !== -1;
278
- };
278
+ };
279
+ export var supportsPassive = function () {
280
+ var supports = false;
281
+ try {
282
+ var opts = Object.defineProperty({}, 'passive', {
283
+ get: function get() {
284
+ supports = true;
285
+ }
286
+ });
287
+ window.addEventListener('test', null, opts);
288
+ } catch (e) {}
289
+ return supports;
290
+ }();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arim-aisdc/public-components",
3
- "version": "2.3.37",
3
+ "version": "2.3.39",
4
4
  "description": "前端组件库",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",