@nokecy/qc-ui-components 0.0.0-stage → 2.0.0-beta.0

package/dist/cjs/array-table/hooks.js

@@ -0,0 +1,326 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowDrag = exports.useKeyboardNavigation = exports.useCellFocus = exports.suppressNativeInputKeys = exports.isNativeInputKey = void 0;
+var _react = require("react");
+// setSelectionRange 仅 textarea 与 text/search/url/tel/password 类型 input 支持;
+// checkbox/number/date 等调用会抛 InvalidStateError,故用白名单守卫。@author nokecy
+var supportsSelectionRange = function supportsSelectionRange(el) {
+  return (
+    // 日期组件自行管理光标和分段选区，表格只聚焦，不覆盖其选区。@author nokecy
+    !el.closest('.ant-picker') && (el.tagName === 'TEXTAREA' || /^(text|search|url|tel|password)$/i.test(el.type || 'text'))
+  );
+};
+/** 点击、键盘导航和字段挂载共用一次聚焦意图，新交互使旧任务失效。@author nokecy */
+var useCellFocusRequests = function useCellFocusRequests() {
+  var enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var generation = (0, _react.useRef)(0);
+  var mounted = (0, _react.useRef)(true);
+  var timers = (0, _react.useRef)(new Set());
+  var pendingCell = (0, _react.useRef)(undefined);
+  var cancel = (0, _react.useCallback)(function () {
+    generation.current += 1;
+    pendingCell.current = undefined;
+    timers.current.forEach(clearTimeout);
+    timers.current.clear();
+  }, []);
+  (0, _react.useEffect)(function () {
+    mounted.current = true;
+    if (!enabled) return;
+    var onFocus = function onFocus(event) {
+      if (!pendingCell.current) return;
+      var cell = pendingCell.current();
+      if (!(cell !== null && cell !== void 0 && cell.isConnected) || !(event.target instanceof Node) || !cell.contains(event.target)) cancel();
+    };
+    document.addEventListener('pointerdown', cancel, true);
+    document.addEventListener('keydown', cancel, true);
+    document.addEventListener('focusin', onFocus, true);
+    window.addEventListener('blur', cancel);
+    return function () {
+      mounted.current = false;
+      cancel();
+      document.removeEventListener('pointerdown', cancel, true);
+      document.removeEventListener('keydown', cancel, true);
+      document.removeEventListener('focusin', onFocus, true);
+      window.removeEventListener('blur', cancel);
+    };
+  }, [cancel, enabled]);
+  return (0, _react.useCallback)(function (resolveCell) {
+    var isTargetCurrent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+      return true;
+    };
+    cancel();
+    var requestGeneration = generation.current;
+    pendingCell.current = resolveCell;
+    var isCurrent = function isCurrent() {
+      return mounted.current && generation.current === requestGeneration && isTargetCurrent();
+    };
+    return {
+      isCurrent: isCurrent,
+      schedule: function schedule(callback, delay) {
+        if (!isCurrent()) return;
+        var timer = setTimeout(function () {
+          timers.current.delete(timer);
+          if (isCurrent()) callback();
+        }, delay);
+        timers.current.add(timer);
+      }
+    };
+  }, [cancel]);
+};
+
+/** 单元格聚焦；已获得焦点的控件保留用户光标，等待挂载的请求可被新操作取消。@author nokecy */
+var useCellFocus = exports.useCellFocus = function useCellFocus() {
+  var beginFocusRequest = useCellFocusRequests();
+  var focusInputInCell = (0, _react.useCallback)(function (cell) {
+    var _ref, _cell$querySelector;
+    var isTargetCurrent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+      return true;
+    };
+    var row = cell.closest('.ag-row');
+    var rowId = row === null || row === void 0 ? void 0 : row.getAttribute('row-id');
+    var rowIndex = row === null || row === void 0 ? void 0 : row.getAttribute('row-index');
+    var colId = cell.getAttribute('col-id');
+    var request = beginFocusRequest(function () {
+      return cell;
+    }, function () {
+      return cell.isConnected && isTargetCurrent() && (row === null || row === void 0 ? void 0 : row.getAttribute('row-id')) === rowId && (row === null || row === void 0 ? void 0 : row.getAttribute('row-index')) === rowIndex && cell.getAttribute('col-id') === colId;
+    });
+    if (!request.isCurrent()) return;
+    var focusElement = function focusElement(element) {
+      if (!(element !== null && element !== void 0 && element.isConnected) || !cell.contains(element) || !request.isCurrent()) return;
+      if (document.activeElement === element) return;
+      element.focus();
+      // 同步设置首次进入的光标，避免延迟任务覆盖用户随后选择的文字。@author nokecy
+      if (document.activeElement === element && element.matches('input, textarea') && supportsSelectionRange(element)) {
+        var input = element;
+        input.setSelectionRange(input.value.length, input.value.length);
+      }
+    };
+    var active = document.activeElement;
+    if (active && cell.contains(active) && active.matches('input, textarea, [contenteditable="true"]')) return;
+    var selector = 'input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])';
+    var editableElement = cell.querySelector('.ant-formily-editable');
+    if (editableElement) {
+      var focusEditor = function focusEditor() {
+        return focusElement(editableElement.querySelector(selector));
+      };
+      if (editableElement.dataset.editableState === 'editing') {
+        focusEditor();
+      } else {
+        editableElement.click();
+        if (!request.isCurrent()) return;
+        editableElement.dispatchEvent(new Event('focus', {
+          bubbles: true
+        }));
+        request.schedule(focusEditor, 150);
+      }
+      return;
+    }
+    focusElement((_ref = (_cell$querySelector = cell.querySelector(selector)) !== null && _cell$querySelector !== void 0 ? _cell$querySelector : cell.querySelector('input:not([disabled]), textarea:not([disabled]), [contenteditable="true"], [tabindex]:not([disabled])')) !== null && _ref !== void 0 ? _ref : cell);
+  }, [beginFocusRequest]);
+  var scheduleCellFocus = (0, _react.useCallback)(function (resolveCell, delay, isTargetCurrent) {
+    var request = beginFocusRequest(resolveCell, isTargetCurrent);
+    request.schedule(function () {
+      var cell = resolveCell();
+      if (cell !== null && cell !== void 0 && cell.isConnected) focusInputInCell(cell, isTargetCurrent);
+    }, delay);
+  }, [beginFocusRequest, focusInputInCell]);
+  return {
+    focusInputInCell: focusInputInCell,
+    scheduleCellFocus: scheduleCellFocus,
+    beginFocusRequest: beginFocusRequest
+  };
+};
+
+/**
+ * 键盘导航 Hook
+ * 处理方向键在表格单元格间的导航
+ */
+var useKeyboardNavigation = exports.useKeyboardNavigation = function useKeyboardNavigation(ref, dataSource, focusInputInCell, activateCell, beginSharedFocusRequest) {
+  var beginLocalFocusRequest = useCellFocusRequests(!beginSharedFocusRequest);
+  var beginFocusRequest = beginSharedFocusRequest !== null && beginSharedFocusRequest !== void 0 ? beginSharedFocusRequest : beginLocalFocusRequest;
+  var handleCellKeyDown = (0, _react.useCallback)(function (event) {
+    var _nativeKeyDecisions$g;
+    var keyEvent = event.event,
+      node = event.node,
+      colDef = event.colDef,
+      api = event.api;
+    if (!keyEvent) return;
+    // 输入框里移动光标/扩选/全选的按键归输入框,表格不导航(见 isNativeInputKey)。
+    // 判定用 keydown 当时记下的(见 suppressNativeInputKeys);没记过(不是 AG-Grid 触发的)才现算。
+    if ((_nativeKeyDecisions$g = nativeKeyDecisions.get(keyEvent)) !== null && _nativeKeyDecisions$g !== void 0 ? _nativeKeyDecisions$g : isNativeInputKey(keyEvent)) return;
+
+    // 处理上下左右键导航
+    if (keyEvent.key === 'ArrowDown' || keyEvent.key === 'ArrowUp' || keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight') {
+      var currentRowIndex = node.rowIndex;
+      var currentColId = colDef.field;
+      var targetRowIndex = currentRowIndex;
+      var targetColId = currentColId;
+
+      // 确定目标位置
+      if (keyEvent.key === 'ArrowDown') {
+        targetRowIndex = currentRowIndex + 1;
+      } else if (keyEvent.key === 'ArrowUp') {
+        targetRowIndex = currentRowIndex - 1;
+      } else if (keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight') {
+        // 对于左右键,使用AG-Grid的API获取列信息
+        var visibleColumns = api.getAllDisplayedColumns();
+        if (visibleColumns && visibleColumns.length > 0) {
+          // 找到当前列的索引
+          var currentColIndex = visibleColumns.findIndex(function (col) {
+            return col.getColId() === currentColId;
+          });
+          var targetColIndex;
+          if (keyEvent.key === 'ArrowLeft') {
+            targetColIndex = currentColIndex - 1;
+          } else {
+            targetColIndex = currentColIndex + 1;
+          }
+
+          // 检查目标列索引是否有效
+          if (targetColIndex >= 0 && targetColIndex < visibleColumns.length) {
+            targetColId = visibleColumns[targetColIndex].getColId();
+          } else {
+            return; // 无法移动到目标列
+          }
+        } else {
+          return; // 无列信息
+        }
+      }
+
+      // 检查目标位置是否有效
+      var isValidTarget = keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight' || targetRowIndex >= 0 && targetRowIndex < dataSource.length;
+      if (isValidTarget) {
+        var _api$getDisplayedRowA;
+        var targetNode = (_api$getDisplayedRowA = api.getDisplayedRowAtIndex) === null || _api$getDisplayedRowA === void 0 ? void 0 : _api$getDisplayedRowA.call(api, targetRowIndex);
+        var navigated = false;
+        var resolveTarget = function resolveTarget() {
+          var _ref$current;
+          return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".ag-row[row-index=\"".concat(targetRowIndex, "\"] .ag-cell[col-id=\"").concat(targetColId, "\"]"));
+        };
+        var _isTargetCurrent = function _isTargetCurrent() {
+          var _ref$current2, _api$isDestroyed, _api$getDisplayedRowA2;
+          if (!((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.isConnected) || (_api$isDestroyed = api.isDestroyed) !== null && _api$isDestroyed !== void 0 && _api$isDestroyed.call(api)) return false;
+          if (targetNode && ((_api$getDisplayedRowA2 = api.getDisplayedRowAtIndex) === null || _api$getDisplayedRowA2 === void 0 ? void 0 : _api$getDisplayedRowA2.call(api, targetRowIndex)) !== targetNode) return false;
+          if (navigated && api.getFocusedCell) {
+            var _focused$column;
+            var focused = api.getFocusedCell();
+            return (focused === null || focused === void 0 ? void 0 : focused.rowIndex) === targetRowIndex && ((_focused$column = focused.column) === null || _focused$column === void 0 ? void 0 : _focused$column.getColId()) === targetColId;
+          }
+          return true;
+        };
+        var request = beginFocusRequest(resolveTarget, _isTargetCurrent);
+        // 延迟执行以确保当前编辑完成
+        request.schedule(function () {
+          api.setFocusedCell(targetRowIndex, targetColId);
+          navigated = true;
+
+          // 懒挂载:目标格若是懒列存量格,先激活挂树(refreshCells),下方 150ms 内完成挂载再聚焦 @author nokecy
+          if (activateCell && targetNode) {
+            activateCell(api, targetNode, targetColId);
+          }
+
+          // 不使用原生startEditingCell,而是手动触发编辑状态
+          // v33 themeQuartz 容器不再有 .ag-theme-alpine 类;且行虚拟化下 DOM 顺序与 rowIndex 不一致,
+          // 改为直接在 ref 容器内按 row-index + col-id 属性定位目标单元格 @author nokecy
+          request.schedule(function () {
+            var targetCell = resolveTarget();
+            if (targetCell !== null && targetCell !== void 0 && targetCell.isConnected) {
+              focusInputInCell(targetCell, _isTargetCurrent);
+            }
+          }, 150);
+        }, 10);
+      }
+      keyEvent.preventDefault();
+      keyEvent.stopPropagation();
+    }
+  }, [dataSource, focusInputInCell, ref, activateCell, beginFocusRequest]);
+  return {
+    handleCellKeyDown: handleCellKeyDown
+  };
+};
+
+/**
+ * 行拖拽 Hook
+ * 处理行拖拽排序逻辑
+ */
+var useRowDrag = exports.useRowDrag = function useRowDrag(field) {
+  var handleRowDragMove = (0, _react.useCallback)(function (event) {
+    var movingNode = event.node;
+    var overNode = event.overNode;
+    var rowNeedsToMove = movingNode !== overNode;
+    if (rowNeedsToMove) {
+      var movingData = movingNode.data;
+      var overData = overNode.data;
+      var dataSourceCopy = Array.isArray(field.value) ? field.value.slice() : [];
+      var fromIndex = dataSourceCopy.indexOf(movingData);
+      var toIndex = dataSourceCopy.indexOf(overData);
+      // 防护:任一索引未命中(引用不一致)时直接返回,避免 splice(-1) 误删末行 @author nokecy
+      if (fromIndex < 0 || toIndex < 0) return;
+      var newStore = dataSourceCopy.slice();
+
+      // 移动数组元素
+      var element = newStore[fromIndex];
+      newStore.splice(fromIndex, 1);
+      newStore.splice(toIndex, 0, element);
+      field.setValue(newStore);
+    }
+  }, [field]);
+  return {
+    handleRowDragMove: handleRowDragMove
+  };
+};
+
+/**
+ * 这个按键该不该交给单元格里的输入框自己处理(浏览器原生行为),而不是当成表格的快捷键/单元格导航。
+ *
+ * AG-Grid 把 Ctrl+A 当成「选中所有单元格」、Home/End 当成「跳到行首/行尾单元格」并 preventDefault;
+ * 我们的 handleCellKeyDown 又把方向键一律当成「跳到相邻单元格」——输入框里全选、用方向键移动光标、
+ * Shift+方向键扩选文字就全都做不了。规则:
+ *  - Ctrl/Cmd+A、Home/End、带 Shift/Ctrl/Alt/Cmd 的方向键、输入法组字期间的按键 -> 输入框自己处理;
+ *  - 左右方向键:光标还能动就移动光标(有选区时先收起选区),已经在最左/最右再按才跳到相邻单元格;
+ *  - 上下方向键:单行输入框没有纵向光标,照旧在行间导航;多行文本域在首行/末行才导航;
+ *  - 焦点不在输入框里(在单元格本身)、只读输入框(如下拉选择)、不支持光标的输入框:照旧导航。
+ * 复制/粘贴/剪切/撤销 AG-Grid 本来就没拦,不必处理。@author nokecy
+ */
+var isNativeInputKey = exports.isNativeInputKey = function isNativeInputKey(event) {
+  var _target$matches;
+  var target = event.target;
+  if (!(target !== null && target !== void 0 && (_target$matches = target.matches) !== null && _target$matches !== void 0 && _target$matches.call(target, 'input, textarea, [contenteditable="true"]'))) return false;
+  var key = event.key;
+  if (event.isComposing) return true;
+  if ((event.ctrlKey || event.metaKey) && key.toLowerCase() === 'a') return true;
+  if (key === 'Home' || key === 'End') return true;
+  if (!key.startsWith('Arrow')) return false;
+  if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return true;
+  var el = target;
+  var start = el.selectionStart,
+    end = el.selectionEnd,
+    value = el.value;
+  // 不支持光标的输入框(如 checkbox)、只读输入框:没有光标可动,方向键用来导航
+  if (start == null || end == null || el.readOnly || el.disabled) return false;
+  var collapsed = start === end;
+  if (key === 'ArrowLeft') return !(collapsed && start === 0);
+  if (key === 'ArrowRight') return !(collapsed && end === value.length);
+  if (el.tagName !== 'TEXTAREA') return false;
+  // 多行文本域:光标不在首行才能往上移,不在末行才能往下移
+  return key === 'ArrowUp' ? value.slice(0, start).includes('\n') : value.slice(end).includes('\n');
+};
+
+/**
+ * keydown 当时的判定。AG-Grid 的 onCellKeyDown 回调是在 setTimeout(0) 里才触发的,那时浏览器已经执行完默认动作、
+ * 光标被挪过了:光标从 1 挪到最左、选区收起到末尾之后再算,会误当成「本来就在边缘」而跳格。
+ * suppressKeyboardEvent 是 keydown 时同步调用的,状态还没变,所以在那里记下,回调里直接用。
+ */
+var nativeKeyDecisions = new WeakMap();
+
+/** AG-Grid 的 suppressKeyboardEvent:让 AG-Grid 不再拦截输入框自己处理的按键,并记下这次按键的判定 */
+var suppressNativeInputKeys = exports.suppressNativeInputKeys = function suppressNativeInputKeys(_ref2) {
+  var event = _ref2.event;
+  var native = isNativeInputKey(event);
+  nativeKeyDecisions.set(event, native);
+  return native;
+};

package/dist/cjs/array-table/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { AgGridReactProps } from "ag-grid-react";
+declare const _default: React.ForwardRefExoticComponent<Partial<AgGridReactProps<any> & {
+    height?: string | number | undefined;
+    gridKey: string;
+    onRowDrag?: boolean | undefined;
+    disabled?: boolean | undefined;
+    batchRemove?: boolean | undefined;
+    onRemove?: ((index: number) => void) | undefined;
+    fixedColumnsMaxRatio?: number | undefined;
+} & {
+    children?: React.ReactNode;
+}> & React.RefAttributes<any>>;
+export default _default;