@canvas-components/react-list-table 0.3.35 → 0.3.37

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 (3) hide show
  1. package/dist/index.cjs +171 -108
  2. package/dist/index.js +171 -108
  3. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -5003,14 +5003,18 @@ function SortableList(props) {
5003
5003
  );
5004
5004
  react.useEffect(() => {
5005
5005
  if (!dragState) return;
5006
- const handleMove = (event) => {
5006
+ const scrollContainer = props.scrollContainerRef?.current;
5007
+ let frameId = 0;
5008
+ let lastTime = null;
5009
+ const updateTarget = () => {
5007
5010
  const current = dragRef.current;
5008
5011
  if (!current) return;
5009
5012
  const target = resolveClosestSortableItem({
5010
5013
  items,
5011
5014
  parentKey: current.source.parentKey,
5012
5015
  layouts: current.layouts,
5013
- overlayCenterY: event.clientY - current.offsetY + current.height / 2
5016
+ // 保留拖拽开始时的布局，补偿滚动位移，避免受行交换动画影响。
5017
+ overlayCenterY: current.pointerY - current.offsetY + current.height / 2 + current.rootTop - (rootRef.current?.getBoundingClientRect().top ?? current.rootTop)
5014
5018
  });
5015
5019
  if (target) {
5016
5020
  current.target = target;
@@ -5018,12 +5022,44 @@ function SortableList(props) {
5018
5022
  setDragState({
5019
5023
  sourceKey: current.source.key,
5020
5024
  targetKey: current.target.key,
5021
- pointerY: event.clientY
5025
+ pointerY: current.pointerY
5022
5026
  });
5023
5027
  };
5024
- const handleEnd = () => {
5028
+ const handleMove = (event) => {
5029
+ const current = dragRef.current;
5030
+ if (!current || event.pointerId !== current.pointerId) return;
5031
+ current.pointerY = event.clientY;
5032
+ updateTarget();
5033
+ };
5034
+ const tick = (time) => {
5035
+ const current = dragRef.current;
5036
+ if (!current) return;
5037
+ const elapsed = lastTime == null ? 0 : Math.min(time - lastTime, 50);
5038
+ lastTime = time;
5039
+ if (scrollContainer) {
5040
+ const rect = scrollContainer.getBoundingClientRect();
5041
+ const top = rect.top + scrollContainer.clientTop;
5042
+ const height = scrollContainer.clientHeight;
5043
+ const edge = Math.min(40, height / 2);
5044
+ const bottom = top + height;
5045
+ const direction = edge <= 0 ? 0 : current.pointerY < top + edge ? -Math.min(1, (top + edge - current.pointerY) / edge) : current.pointerY > bottom - edge ? Math.min(1, (current.pointerY - bottom + edge) / edge) : 0;
5046
+ if (direction) {
5047
+ scrollContainer.scrollTop = Math.max(
5048
+ 0,
5049
+ Math.min(
5050
+ scrollContainer.scrollHeight - height,
5051
+ scrollContainer.scrollTop + direction * elapsed * 0.5
5052
+ )
5053
+ );
5054
+ updateTarget();
5055
+ }
5056
+ }
5057
+ frameId = requestAnimationFrame(tick);
5058
+ };
5059
+ const finish = (commit) => {
5025
5060
  const current = dragRef.current;
5026
- if (current && current.source.key !== current.target.key) {
5061
+ cancelAnimationFrame(frameId);
5062
+ if (commit && current && current.source.key !== current.target.key) {
5027
5063
  const siblings = items.filter(
5028
5064
  (item) => item.parentKey === current.source.parentKey
5029
5065
  );
@@ -5041,15 +5077,30 @@ function SortableList(props) {
5041
5077
  document.body.classList.remove("react-list-table-sorting");
5042
5078
  document.body.style.removeProperty("user-select");
5043
5079
  };
5080
+ const handleEnd = (event) => {
5081
+ if (event.pointerId !== dragRef.current?.pointerId) return;
5082
+ handleMove(event);
5083
+ finish(true);
5084
+ };
5085
+ const handleCancel = (event) => {
5086
+ if (event.pointerId === dragRef.current?.pointerId) finish(false);
5087
+ };
5088
+ const handleBlur = () => finish(false);
5089
+ frameId = requestAnimationFrame(tick);
5090
+ scrollContainer?.addEventListener("scroll", updateTarget);
5044
5091
  window.addEventListener("pointermove", handleMove);
5045
- window.addEventListener("pointerup", handleEnd, { once: true });
5046
- window.addEventListener("pointercancel", handleEnd, { once: true });
5092
+ window.addEventListener("pointerup", handleEnd);
5093
+ window.addEventListener("pointercancel", handleCancel);
5094
+ window.addEventListener("blur", handleBlur);
5047
5095
  return () => {
5096
+ cancelAnimationFrame(frameId);
5097
+ scrollContainer?.removeEventListener("scroll", updateTarget);
5048
5098
  window.removeEventListener("pointermove", handleMove);
5049
5099
  window.removeEventListener("pointerup", handleEnd);
5050
- window.removeEventListener("pointercancel", handleEnd);
5100
+ window.removeEventListener("pointercancel", handleCancel);
5101
+ window.removeEventListener("blur", handleBlur);
5051
5102
  };
5052
- }, [dragState != null, items, onOrderChange]);
5103
+ }, [dragState != null, items, onOrderChange, props.scrollContainerRef]);
5053
5104
  const sourceIndex = dragState ? items.findIndex((item) => item.key === dragState.sourceKey) : -1;
5054
5105
  const targetIndex = dragState ? items.findIndex((item) => item.key === dragState.targetKey) : -1;
5055
5106
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, children: [
@@ -5068,7 +5119,7 @@ function SortableList(props) {
5068
5119
  style,
5069
5120
  children: props.renderItem(item, {
5070
5121
  onPointerDown: (event) => {
5071
- if (event.button !== 0) return;
5122
+ if (event.button !== 0 || dragRef.current) return;
5072
5123
  const row = event.currentTarget.closest(
5073
5124
  "[data-sortable-key]"
5074
5125
  );
@@ -5081,7 +5132,10 @@ function SortableList(props) {
5081
5132
  offsetY: event.clientY - rect.top,
5082
5133
  width: rect.width,
5083
5134
  left: rect.left,
5084
- height: rect.height
5135
+ height: rect.height,
5136
+ pointerId: event.pointerId,
5137
+ pointerY: event.clientY,
5138
+ rootTop: rootRef.current?.getBoundingClientRect().top ?? 0
5085
5139
  };
5086
5140
  setDragState({
5087
5141
  sourceKey: item.key,
@@ -5168,13 +5222,14 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
5168
5222
  }
5169
5223
 
5170
5224
  // src/features/toolbar/style.css
5171
- styleInject(".react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 32px;\n padding: 0 10px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #374151;\n font-size: 14px;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu {\n width: max-content;\n min-width: 0;\n padding: 8px;\n border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n width: 16px;\n flex: 0 0 16px;\n margin-right: 6px;\n text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n background: #f3f4f6;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-sort-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n");
5225
+ styleInject(".react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 32px;\n padding: 0 10px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #374151;\n font-size: 14px;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu {\n width: max-content;\n min-width: 0;\n padding: 8px;\n border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n width: 16px;\n flex: 0 0 16px;\n margin-right: 6px;\n text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n background: #f3f4f6;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-sort-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n touch-action: none;\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n");
5172
5226
  function ReactTableToolbar(props) {
5173
5227
  const { toolbar, title } = props;
5174
5228
  const [densityOpen, setDensityOpen] = react.useState(false);
5175
5229
  const [settingOpen, setSettingOpen] = react.useState(false);
5176
5230
  const [isFullscreen, setIsFullscreen] = react.useState(false);
5177
5231
  const rootRef = react.useRef(null);
5232
+ const columnSettingsBodyRef = react.useRef(null);
5178
5233
  const hasToolbar = toolbar !== void 0 && toolbar !== false;
5179
5234
  react.useEffect(() => {
5180
5235
  const close = (event) => {
@@ -5313,116 +5368,124 @@ function ReactTableToolbar(props) {
5313
5368
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "auto" }, children: config.columnSettingHeaderExtra }),
5314
5369
  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: props.onResetColumns, children: "\u91CD\u7F6E" })
5315
5370
  ] }),
5316
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "react-list-table-column-setting-body canvas-react-scrollbar", children: /* @__PURE__ */ jsxRuntime.jsx(
5317
- SortableList,
5371
+ /* @__PURE__ */ jsxRuntime.jsx(
5372
+ "div",
5318
5373
  {
5319
- items: flattenColumns(props.columns),
5320
- onOrderChange: props.onColumnOrderChange,
5321
- renderItem: (column, handleProps) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-column-item", children: [
5322
- /* @__PURE__ */ jsxRuntime.jsxs(
5323
- "span",
5324
- {
5325
- className: "react-list-table-column-main",
5326
- style: { paddingLeft: column.level * 16 },
5327
- children: [
5374
+ ref: columnSettingsBodyRef,
5375
+ className: "react-list-table-column-setting-body canvas-react-scrollbar",
5376
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5377
+ SortableList,
5378
+ {
5379
+ scrollContainerRef: columnSettingsBodyRef,
5380
+ items: flattenColumns(props.columns),
5381
+ onOrderChange: props.onColumnOrderChange,
5382
+ renderItem: (column, handleProps) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-column-item", children: [
5383
+ /* @__PURE__ */ jsxRuntime.jsxs(
5384
+ "span",
5385
+ {
5386
+ className: "react-list-table-column-main",
5387
+ style: { paddingLeft: column.level * 16 },
5388
+ children: [
5389
+ /* @__PURE__ */ jsxRuntime.jsx(
5390
+ "span",
5391
+ {
5392
+ className: "react-list-table-column-drag",
5393
+ ...handleProps,
5394
+ onClick: (event) => {
5395
+ event.preventDefault();
5396
+ event.stopPropagation();
5397
+ },
5398
+ children: /* @__PURE__ */ jsxRuntime.jsx(HolderOutlined, {})
5399
+ }
5400
+ ),
5401
+ /* @__PURE__ */ jsxRuntime.jsx(
5402
+ "input",
5403
+ {
5404
+ type: "checkbox",
5405
+ checked: !column.hidden,
5406
+ disabled: column.disableHide,
5407
+ onChange: (event) => props.onColumnVisibilityChange(
5408
+ column.key,
5409
+ event.target.checked
5410
+ )
5411
+ }
5412
+ ),
5413
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "react-list-table-column-label", children: column.label })
5414
+ ]
5415
+ }
5416
+ ),
5417
+ !column.isGroup ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "react-list-table-column-actions", children: [
5328
5418
  /* @__PURE__ */ jsxRuntime.jsx(
5329
- "span",
5419
+ reactComponents.ReactNumberInput,
5330
5420
  {
5331
- className: "react-list-table-column-drag",
5332
- ...handleProps,
5333
- onClick: (event) => {
5334
- event.preventDefault();
5335
- event.stopPropagation();
5336
- },
5337
- children: /* @__PURE__ */ jsxRuntime.jsx(HolderOutlined, {})
5421
+ className: "react-list-table-column-width-input",
5422
+ min: column.minWidth,
5423
+ max: column.maxWidth,
5424
+ value: column.width,
5425
+ allowClear: false,
5426
+ "aria-label": `${column.label}\u5217\u5BBD`,
5427
+ style: { width: 80, height: 24 },
5428
+ onChange: (width) => {
5429
+ if (width != null && Number.isFinite(width) && width > 0 && (column.minWidth == null || width >= column.minWidth) && (column.maxWidth == null || width <= column.maxWidth)) {
5430
+ props.onColumnWidthChange(
5431
+ column.key,
5432
+ width
5433
+ );
5434
+ }
5435
+ }
5338
5436
  }
5339
5437
  ),
5340
5438
  /* @__PURE__ */ jsxRuntime.jsx(
5341
- "input",
5439
+ reactComponents.ReactSelect,
5342
5440
  {
5343
- type: "checkbox",
5344
- checked: !column.hidden,
5345
- disabled: column.disableHide,
5346
- onChange: (event) => props.onColumnVisibilityChange(
5441
+ className: "react-list-table-column-sort-input",
5442
+ value: props.sortState.find(
5443
+ (item) => item.key === column.key
5444
+ )?.order ?? "default",
5445
+ options: [
5446
+ { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
5447
+ { label: "\u5347\u5E8F", value: "ascend" },
5448
+ { label: "\u964D\u5E8F", value: "descend" }
5449
+ ],
5450
+ disabled: !column.sortable,
5451
+ allowClear: false,
5452
+ showSearch: false,
5453
+ style: { width: "100%", height: 24 },
5454
+ "aria-label": `${column.label}\u6392\u5E8F\u65B9\u5F0F`,
5455
+ onChange: (value) => props.onColumnSortChange(
5347
5456
  column.key,
5348
- event.target.checked
5457
+ value === "ascend" || value === "descend" ? value : null
5349
5458
  )
5350
5459
  }
5351
5460
  ),
5352
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "react-list-table-column-label", children: column.label })
5353
- ]
5354
- }
5355
- ),
5356
- !column.isGroup ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "react-list-table-column-actions", children: [
5357
- /* @__PURE__ */ jsxRuntime.jsx(
5358
- reactComponents.ReactNumberInput,
5359
- {
5360
- className: "react-list-table-column-width-input",
5361
- min: column.minWidth,
5362
- max: column.maxWidth,
5363
- value: column.width,
5364
- allowClear: false,
5365
- "aria-label": `${column.label}\u5217\u5BBD`,
5366
- style: { width: 80, height: 24 },
5367
- onChange: (width) => {
5368
- if (width != null && Number.isFinite(width) && width > 0 && (column.minWidth == null || width >= column.minWidth) && (column.maxWidth == null || width <= column.maxWidth)) {
5369
- props.onColumnWidthChange(
5370
- column.key,
5371
- width
5372
- );
5461
+ /* @__PURE__ */ jsxRuntime.jsx(
5462
+ reactComponents.ReactSelect,
5463
+ {
5464
+ className: "react-list-table-column-fixed-input",
5465
+ value: column.fixed ?? "none",
5466
+ options: [
5467
+ { label: "\u4E0D\u56FA\u5B9A", value: "none" },
5468
+ { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
5469
+ { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
5470
+ ],
5471
+ allowClear: false,
5472
+ showSearch: false,
5473
+ style: { width: "100%", height: 24 },
5474
+ "aria-label": `${column.label}\u56FA\u5B9A\u65B9\u5411`,
5475
+ onChange: (value) => {
5476
+ props.onColumnFixedChange(
5477
+ column.key,
5478
+ value === "left" || value === "right" ? value : void 0
5479
+ );
5480
+ }
5373
5481
  }
5374
- }
5375
- }
5376
- ),
5377
- /* @__PURE__ */ jsxRuntime.jsx(
5378
- reactComponents.ReactSelect,
5379
- {
5380
- className: "react-list-table-column-sort-input",
5381
- value: props.sortState.find(
5382
- (item) => item.key === column.key
5383
- )?.order ?? "default",
5384
- options: [
5385
- { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
5386
- { label: "\u5347\u5E8F", value: "ascend" },
5387
- { label: "\u964D\u5E8F", value: "descend" }
5388
- ],
5389
- disabled: !column.sortable,
5390
- allowClear: false,
5391
- showSearch: false,
5392
- style: { width: "100%", height: 24 },
5393
- "aria-label": `${column.label}\u6392\u5E8F\u65B9\u5F0F`,
5394
- onChange: (value) => props.onColumnSortChange(
5395
- column.key,
5396
- value === "ascend" || value === "descend" ? value : null
5397
5482
  )
5398
- }
5399
- ),
5400
- /* @__PURE__ */ jsxRuntime.jsx(
5401
- reactComponents.ReactSelect,
5402
- {
5403
- className: "react-list-table-column-fixed-input",
5404
- value: column.fixed ?? "none",
5405
- options: [
5406
- { label: "\u4E0D\u56FA\u5B9A", value: "none" },
5407
- { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
5408
- { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
5409
- ],
5410
- allowClear: false,
5411
- showSearch: false,
5412
- style: { width: "100%", height: 24 },
5413
- "aria-label": `${column.label}\u56FA\u5B9A\u65B9\u5411`,
5414
- onChange: (value) => {
5415
- props.onColumnFixedChange(
5416
- column.key,
5417
- value === "left" || value === "right" ? value : void 0
5418
- );
5419
- }
5420
- }
5421
- )
5422
- ] }) : null
5423
- ] })
5483
+ ] }) : null
5484
+ ] })
5485
+ }
5486
+ )
5424
5487
  }
5425
- ) })
5488
+ )
5426
5489
  ]
5427
5490
  }
5428
5491
  ) : null
package/dist/index.js CHANGED
@@ -5002,14 +5002,18 @@ function SortableList(props) {
5002
5002
  );
5003
5003
  useEffect(() => {
5004
5004
  if (!dragState) return;
5005
- const handleMove = (event) => {
5005
+ const scrollContainer = props.scrollContainerRef?.current;
5006
+ let frameId = 0;
5007
+ let lastTime = null;
5008
+ const updateTarget = () => {
5006
5009
  const current = dragRef.current;
5007
5010
  if (!current) return;
5008
5011
  const target = resolveClosestSortableItem({
5009
5012
  items,
5010
5013
  parentKey: current.source.parentKey,
5011
5014
  layouts: current.layouts,
5012
- overlayCenterY: event.clientY - current.offsetY + current.height / 2
5015
+ // 保留拖拽开始时的布局，补偿滚动位移，避免受行交换动画影响。
5016
+ overlayCenterY: current.pointerY - current.offsetY + current.height / 2 + current.rootTop - (rootRef.current?.getBoundingClientRect().top ?? current.rootTop)
5013
5017
  });
5014
5018
  if (target) {
5015
5019
  current.target = target;
@@ -5017,12 +5021,44 @@ function SortableList(props) {
5017
5021
  setDragState({
5018
5022
  sourceKey: current.source.key,
5019
5023
  targetKey: current.target.key,
5020
- pointerY: event.clientY
5024
+ pointerY: current.pointerY
5021
5025
  });
5022
5026
  };
5023
- const handleEnd = () => {
5027
+ const handleMove = (event) => {
5028
+ const current = dragRef.current;
5029
+ if (!current || event.pointerId !== current.pointerId) return;
5030
+ current.pointerY = event.clientY;
5031
+ updateTarget();
5032
+ };
5033
+ const tick = (time) => {
5034
+ const current = dragRef.current;
5035
+ if (!current) return;
5036
+ const elapsed = lastTime == null ? 0 : Math.min(time - lastTime, 50);
5037
+ lastTime = time;
5038
+ if (scrollContainer) {
5039
+ const rect = scrollContainer.getBoundingClientRect();
5040
+ const top = rect.top + scrollContainer.clientTop;
5041
+ const height = scrollContainer.clientHeight;
5042
+ const edge = Math.min(40, height / 2);
5043
+ const bottom = top + height;
5044
+ const direction = edge <= 0 ? 0 : current.pointerY < top + edge ? -Math.min(1, (top + edge - current.pointerY) / edge) : current.pointerY > bottom - edge ? Math.min(1, (current.pointerY - bottom + edge) / edge) : 0;
5045
+ if (direction) {
5046
+ scrollContainer.scrollTop = Math.max(
5047
+ 0,
5048
+ Math.min(
5049
+ scrollContainer.scrollHeight - height,
5050
+ scrollContainer.scrollTop + direction * elapsed * 0.5
5051
+ )
5052
+ );
5053
+ updateTarget();
5054
+ }
5055
+ }
5056
+ frameId = requestAnimationFrame(tick);
5057
+ };
5058
+ const finish = (commit) => {
5024
5059
  const current = dragRef.current;
5025
- if (current && current.source.key !== current.target.key) {
5060
+ cancelAnimationFrame(frameId);
5061
+ if (commit && current && current.source.key !== current.target.key) {
5026
5062
  const siblings = items.filter(
5027
5063
  (item) => item.parentKey === current.source.parentKey
5028
5064
  );
@@ -5040,15 +5076,30 @@ function SortableList(props) {
5040
5076
  document.body.classList.remove("react-list-table-sorting");
5041
5077
  document.body.style.removeProperty("user-select");
5042
5078
  };
5079
+ const handleEnd = (event) => {
5080
+ if (event.pointerId !== dragRef.current?.pointerId) return;
5081
+ handleMove(event);
5082
+ finish(true);
5083
+ };
5084
+ const handleCancel = (event) => {
5085
+ if (event.pointerId === dragRef.current?.pointerId) finish(false);
5086
+ };
5087
+ const handleBlur = () => finish(false);
5088
+ frameId = requestAnimationFrame(tick);
5089
+ scrollContainer?.addEventListener("scroll", updateTarget);
5043
5090
  window.addEventListener("pointermove", handleMove);
5044
- window.addEventListener("pointerup", handleEnd, { once: true });
5045
- window.addEventListener("pointercancel", handleEnd, { once: true });
5091
+ window.addEventListener("pointerup", handleEnd);
5092
+ window.addEventListener("pointercancel", handleCancel);
5093
+ window.addEventListener("blur", handleBlur);
5046
5094
  return () => {
5095
+ cancelAnimationFrame(frameId);
5096
+ scrollContainer?.removeEventListener("scroll", updateTarget);
5047
5097
  window.removeEventListener("pointermove", handleMove);
5048
5098
  window.removeEventListener("pointerup", handleEnd);
5049
- window.removeEventListener("pointercancel", handleEnd);
5099
+ window.removeEventListener("pointercancel", handleCancel);
5100
+ window.removeEventListener("blur", handleBlur);
5050
5101
  };
5051
- }, [dragState != null, items, onOrderChange]);
5102
+ }, [dragState != null, items, onOrderChange, props.scrollContainerRef]);
5052
5103
  const sourceIndex = dragState ? items.findIndex((item) => item.key === dragState.sourceKey) : -1;
5053
5104
  const targetIndex = dragState ? items.findIndex((item) => item.key === dragState.targetKey) : -1;
5054
5105
  return /* @__PURE__ */ jsxs("div", { ref: rootRef, children: [
@@ -5067,7 +5118,7 @@ function SortableList(props) {
5067
5118
  style,
5068
5119
  children: props.renderItem(item, {
5069
5120
  onPointerDown: (event) => {
5070
- if (event.button !== 0) return;
5121
+ if (event.button !== 0 || dragRef.current) return;
5071
5122
  const row = event.currentTarget.closest(
5072
5123
  "[data-sortable-key]"
5073
5124
  );
@@ -5080,7 +5131,10 @@ function SortableList(props) {
5080
5131
  offsetY: event.clientY - rect.top,
5081
5132
  width: rect.width,
5082
5133
  left: rect.left,
5083
- height: rect.height
5134
+ height: rect.height,
5135
+ pointerId: event.pointerId,
5136
+ pointerY: event.clientY,
5137
+ rootTop: rootRef.current?.getBoundingClientRect().top ?? 0
5084
5138
  };
5085
5139
  setDragState({
5086
5140
  sourceKey: item.key,
@@ -5167,13 +5221,14 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
5167
5221
  }
5168
5222
 
5169
5223
  // src/features/toolbar/style.css
5170
- styleInject(".react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 32px;\n padding: 0 10px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #374151;\n font-size: 14px;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu {\n width: max-content;\n min-width: 0;\n padding: 8px;\n border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n width: 16px;\n flex: 0 0 16px;\n margin-right: 6px;\n text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n background: #f3f4f6;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-sort-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n");
5224
+ styleInject(".react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 32px;\n padding: 0 10px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #374151;\n font-size: 14px;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu {\n width: max-content;\n min-width: 0;\n padding: 8px;\n border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n width: 16px;\n flex: 0 0 16px;\n margin-right: 6px;\n text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n background: #f3f4f6;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-sort-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n touch-action: none;\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n");
5171
5225
  function ReactTableToolbar(props) {
5172
5226
  const { toolbar, title } = props;
5173
5227
  const [densityOpen, setDensityOpen] = useState(false);
5174
5228
  const [settingOpen, setSettingOpen] = useState(false);
5175
5229
  const [isFullscreen, setIsFullscreen] = useState(false);
5176
5230
  const rootRef = useRef(null);
5231
+ const columnSettingsBodyRef = useRef(null);
5177
5232
  const hasToolbar = toolbar !== void 0 && toolbar !== false;
5178
5233
  useEffect(() => {
5179
5234
  const close = (event) => {
@@ -5312,116 +5367,124 @@ function ReactTableToolbar(props) {
5312
5367
  /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto" }, children: config.columnSettingHeaderExtra }),
5313
5368
  /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onResetColumns, children: "\u91CD\u7F6E" })
5314
5369
  ] }),
5315
- /* @__PURE__ */ jsx("div", { className: "react-list-table-column-setting-body canvas-react-scrollbar", children: /* @__PURE__ */ jsx(
5316
- SortableList,
5370
+ /* @__PURE__ */ jsx(
5371
+ "div",
5317
5372
  {
5318
- items: flattenColumns(props.columns),
5319
- onOrderChange: props.onColumnOrderChange,
5320
- renderItem: (column, handleProps) => /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-item", children: [
5321
- /* @__PURE__ */ jsxs(
5322
- "span",
5323
- {
5324
- className: "react-list-table-column-main",
5325
- style: { paddingLeft: column.level * 16 },
5326
- children: [
5373
+ ref: columnSettingsBodyRef,
5374
+ className: "react-list-table-column-setting-body canvas-react-scrollbar",
5375
+ children: /* @__PURE__ */ jsx(
5376
+ SortableList,
5377
+ {
5378
+ scrollContainerRef: columnSettingsBodyRef,
5379
+ items: flattenColumns(props.columns),
5380
+ onOrderChange: props.onColumnOrderChange,
5381
+ renderItem: (column, handleProps) => /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-item", children: [
5382
+ /* @__PURE__ */ jsxs(
5383
+ "span",
5384
+ {
5385
+ className: "react-list-table-column-main",
5386
+ style: { paddingLeft: column.level * 16 },
5387
+ children: [
5388
+ /* @__PURE__ */ jsx(
5389
+ "span",
5390
+ {
5391
+ className: "react-list-table-column-drag",
5392
+ ...handleProps,
5393
+ onClick: (event) => {
5394
+ event.preventDefault();
5395
+ event.stopPropagation();
5396
+ },
5397
+ children: /* @__PURE__ */ jsx(HolderOutlined, {})
5398
+ }
5399
+ ),
5400
+ /* @__PURE__ */ jsx(
5401
+ "input",
5402
+ {
5403
+ type: "checkbox",
5404
+ checked: !column.hidden,
5405
+ disabled: column.disableHide,
5406
+ onChange: (event) => props.onColumnVisibilityChange(
5407
+ column.key,
5408
+ event.target.checked
5409
+ )
5410
+ }
5411
+ ),
5412
+ /* @__PURE__ */ jsx("span", { className: "react-list-table-column-label", children: column.label })
5413
+ ]
5414
+ }
5415
+ ),
5416
+ !column.isGroup ? /* @__PURE__ */ jsxs("span", { className: "react-list-table-column-actions", children: [
5327
5417
  /* @__PURE__ */ jsx(
5328
- "span",
5418
+ ReactNumberInput,
5329
5419
  {
5330
- className: "react-list-table-column-drag",
5331
- ...handleProps,
5332
- onClick: (event) => {
5333
- event.preventDefault();
5334
- event.stopPropagation();
5335
- },
5336
- children: /* @__PURE__ */ jsx(HolderOutlined, {})
5420
+ className: "react-list-table-column-width-input",
5421
+ min: column.minWidth,
5422
+ max: column.maxWidth,
5423
+ value: column.width,
5424
+ allowClear: false,
5425
+ "aria-label": `${column.label}\u5217\u5BBD`,
5426
+ style: { width: 80, height: 24 },
5427
+ onChange: (width) => {
5428
+ if (width != null && Number.isFinite(width) && width > 0 && (column.minWidth == null || width >= column.minWidth) && (column.maxWidth == null || width <= column.maxWidth)) {
5429
+ props.onColumnWidthChange(
5430
+ column.key,
5431
+ width
5432
+ );
5433
+ }
5434
+ }
5337
5435
  }
5338
5436
  ),
5339
5437
  /* @__PURE__ */ jsx(
5340
- "input",
5438
+ ReactSelect,
5341
5439
  {
5342
- type: "checkbox",
5343
- checked: !column.hidden,
5344
- disabled: column.disableHide,
5345
- onChange: (event) => props.onColumnVisibilityChange(
5440
+ className: "react-list-table-column-sort-input",
5441
+ value: props.sortState.find(
5442
+ (item) => item.key === column.key
5443
+ )?.order ?? "default",
5444
+ options: [
5445
+ { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
5446
+ { label: "\u5347\u5E8F", value: "ascend" },
5447
+ { label: "\u964D\u5E8F", value: "descend" }
5448
+ ],
5449
+ disabled: !column.sortable,
5450
+ allowClear: false,
5451
+ showSearch: false,
5452
+ style: { width: "100%", height: 24 },
5453
+ "aria-label": `${column.label}\u6392\u5E8F\u65B9\u5F0F`,
5454
+ onChange: (value) => props.onColumnSortChange(
5346
5455
  column.key,
5347
- event.target.checked
5456
+ value === "ascend" || value === "descend" ? value : null
5348
5457
  )
5349
5458
  }
5350
5459
  ),
5351
- /* @__PURE__ */ jsx("span", { className: "react-list-table-column-label", children: column.label })
5352
- ]
5353
- }
5354
- ),
5355
- !column.isGroup ? /* @__PURE__ */ jsxs("span", { className: "react-list-table-column-actions", children: [
5356
- /* @__PURE__ */ jsx(
5357
- ReactNumberInput,
5358
- {
5359
- className: "react-list-table-column-width-input",
5360
- min: column.minWidth,
5361
- max: column.maxWidth,
5362
- value: column.width,
5363
- allowClear: false,
5364
- "aria-label": `${column.label}\u5217\u5BBD`,
5365
- style: { width: 80, height: 24 },
5366
- onChange: (width) => {
5367
- if (width != null && Number.isFinite(width) && width > 0 && (column.minWidth == null || width >= column.minWidth) && (column.maxWidth == null || width <= column.maxWidth)) {
5368
- props.onColumnWidthChange(
5369
- column.key,
5370
- width
5371
- );
5460
+ /* @__PURE__ */ jsx(
5461
+ ReactSelect,
5462
+ {
5463
+ className: "react-list-table-column-fixed-input",
5464
+ value: column.fixed ?? "none",
5465
+ options: [
5466
+ { label: "\u4E0D\u56FA\u5B9A", value: "none" },
5467
+ { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
5468
+ { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
5469
+ ],
5470
+ allowClear: false,
5471
+ showSearch: false,
5472
+ style: { width: "100%", height: 24 },
5473
+ "aria-label": `${column.label}\u56FA\u5B9A\u65B9\u5411`,
5474
+ onChange: (value) => {
5475
+ props.onColumnFixedChange(
5476
+ column.key,
5477
+ value === "left" || value === "right" ? value : void 0
5478
+ );
5479
+ }
5372
5480
  }
5373
- }
5374
- }
5375
- ),
5376
- /* @__PURE__ */ jsx(
5377
- ReactSelect,
5378
- {
5379
- className: "react-list-table-column-sort-input",
5380
- value: props.sortState.find(
5381
- (item) => item.key === column.key
5382
- )?.order ?? "default",
5383
- options: [
5384
- { label: "\u9ED8\u8BA4\u6392\u5E8F", value: "default" },
5385
- { label: "\u5347\u5E8F", value: "ascend" },
5386
- { label: "\u964D\u5E8F", value: "descend" }
5387
- ],
5388
- disabled: !column.sortable,
5389
- allowClear: false,
5390
- showSearch: false,
5391
- style: { width: "100%", height: 24 },
5392
- "aria-label": `${column.label}\u6392\u5E8F\u65B9\u5F0F`,
5393
- onChange: (value) => props.onColumnSortChange(
5394
- column.key,
5395
- value === "ascend" || value === "descend" ? value : null
5396
5481
  )
5397
- }
5398
- ),
5399
- /* @__PURE__ */ jsx(
5400
- ReactSelect,
5401
- {
5402
- className: "react-list-table-column-fixed-input",
5403
- value: column.fixed ?? "none",
5404
- options: [
5405
- { label: "\u4E0D\u56FA\u5B9A", value: "none" },
5406
- { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
5407
- { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
5408
- ],
5409
- allowClear: false,
5410
- showSearch: false,
5411
- style: { width: "100%", height: 24 },
5412
- "aria-label": `${column.label}\u56FA\u5B9A\u65B9\u5411`,
5413
- onChange: (value) => {
5414
- props.onColumnFixedChange(
5415
- column.key,
5416
- value === "left" || value === "right" ? value : void 0
5417
- );
5418
- }
5419
- }
5420
- )
5421
- ] }) : null
5422
- ] })
5482
+ ] }) : null
5483
+ ] })
5484
+ }
5485
+ )
5423
5486
  }
5424
- ) })
5487
+ )
5425
5488
  ]
5426
5489
  }
5427
5490
  ) : null
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canvas-components/react-list-table",
3
- "version": "0.3.35",
3
+ "version": "0.3.37",
4
4
  "description": "React adapter for the list table core engine.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -29,7 +29,7 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@canvas-components/chart": "0.3.7",
32
- "@canvas-components/list-table": "0.3.31",
32
+ "@canvas-components/list-table": "0.3.32",
33
33
  "@canvas-components/react-components": "0.3.16"
34
34
  },
35
35
  "peerDependencies": {