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

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

@@ -0,0 +1,266 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrayBase = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _formilyReact = require("@nokecy/formily-react");
+var _formilyShared = require("@nokecy/formily-shared");
+var _builtins__ = require("@nokecy/formily-antd/lib/__builtins__");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ArrayBaseContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var ItemContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var takeRecord = function takeRecord(val, index) {
+  return typeof val === 'function' ? val(index) : val;
+};
+var useArray = function useArray() {
+  return (0, _react.useContext)(ArrayBaseContext);
+};
+var useIndex = function useIndex(index) {
+  var ctx = (0, _react.useContext)(ItemContext);
+  return ctx ? ctx.index : index || 0;
+};
+var useRecord = function useRecord(record) {
+  var ctx = (0, _react.useContext)(ItemContext);
+  return takeRecord(ctx ? ctx.record : record, ctx === null || ctx === void 0 ? void 0 : ctx.index);
+};
+var ArrayBase = exports.ArrayBase = function ArrayBase(props) {
+  var field = (0, _formilyReact.useField)();
+  var schema = (0, _formilyReact.useFieldSchema)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrayBaseContext.Provider, {
+    value: {
+      field: field,
+      schema: schema,
+      props: props
+    },
+    children: props.children
+  });
+};
+ArrayBase.Item = function (_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContext.Provider, {
+    value: props,
+    children: children
+  });
+};
+ArrayBase.Index = function (props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- Formily 复合组件,ArrayBase.Index 实为函数组件,误报
+  var index = useIndex();
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- 同上
+  var prefixCls = (0, _builtins__.usePrefixCls)('formily-array-base');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, props), {}, {
+    className: "".concat(prefixCls, "-index"),
+    children: ["#", (index ? index : 0) + 1, "."]
+  }));
+};
+
+/**
+ * Addition 是 schema 占位节点：ArrayTable 通过 useAddition 识别 x-component 含 Addition 的 void 节点，
+ * 并在表格工具栏渲染自己的新增按钮，节点本身不渲染任何内容。
+ * 这里注册为空组件，是为了让 SchemaField 能解析 `ArrayTable.Addition`（否则会报 incorrect casing / unrecognized），
+ * 即使它被误放进某个列或 Operations 里也只是不渲染。
+ */
+ArrayBase.Addition = function () {
+  return null;
+};
+
+/**
+ * SortHandle 是 schema 占位节点：ArrayTable 的拖拽排序靠 AG-Grid 行拖拽（rowDrag）实现，
+ * 含 SortHandle 的 Column 会被 buildArrayTableColumns 变成行拖拽手柄列，手柄由 AG-Grid 在单元格里绘制，
+ * 落点后的数据重排见 hooks 的 useRowDrag。这里注册为空组件，让 `ArrayTable.SortHandle` 能被 SchemaField 解析，
+ * 即使它被放在手柄列之外也只是不渲染。
+ */
+ArrayBase.SortHandle = function () {
+  return null;
+};
+
+//@ts-ignore
+ArrayBase.Copy = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _array$field;
+  var self = (0, _formilyReact.useField)();
+  var array = useArray();
+  var index = useIndex(props.index);
+  var prefixCls = (0, _builtins__.usePrefixCls)('formily-array-base');
+  if (!array) return null;
+  if (((_array$field = array.field) === null || _array$field === void 0 ? void 0 : _array$field.pattern) !== 'editable') return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, _objectSpread(_objectSpread({
+    type: "text"
+  }, props), {}, {
+    disabled: self === null || self === void 0 ? void 0 : self.disabled,
+    className: (0, _classnames.default)("".concat(prefixCls, "-copy"), self !== null && self !== void 0 && self.disabled ? "".concat(prefixCls, "-copy-disabled") : '', props.className)
+
+    //@ts-ignore
+    ,
+    ref: ref,
+    onClick: function onClick(e) {
+      var _array$props, _array$field2, _array$field3, _array$field3$insert, _array$props2, _array$props2$onCopy;
+      if (self !== null && self !== void 0 && self.disabled) return;
+      e.stopPropagation();
+      if ((_array$props = array.props) !== null && _array$props !== void 0 && _array$props.disabled) return;
+      var value = (0, _formilyShared.clone)(array === null || array === void 0 || (_array$field2 = array.field) === null || _array$field2 === void 0 ? void 0 : _array$field2.value[index]);
+      var distIndex = index + 1;
+      (_array$field3 = array.field) === null || _array$field3 === void 0 || (_array$field3$insert = _array$field3.insert) === null || _array$field3$insert === void 0 || _array$field3$insert.call(_array$field3, distIndex, _objectSpread(_objectSpread({}, value), {}, {
+        id: undefined,
+        _id: (0, _uniqueId.default)(),
+        _isNew: true
+      }));
+      (_array$props2 = array.props) === null || _array$props2 === void 0 || (_array$props2$onCopy = _array$props2.onCopy) === null || _array$props2$onCopy === void 0 || _array$props2$onCopy.call(_array$props2, distIndex);
+      if (props.onClick) {
+        //@ts-ignore
+        props.onClick(e);
+      }
+    },
+    icon: (0, _formilyShared.isUndef)(props.icon) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CopyOutlined, {}) : props.icon,
+    children: props.title || self.title
+  }));
+});
+
+//@ts-ignore
+ArrayBase.Remove = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _array$field4;
+  var index = useIndex(props.index);
+  var self = (0, _formilyReact.useField)();
+  var array = useArray();
+  var prefixCls = (0, _builtins__.usePrefixCls)('formily-array-base');
+  if (!array) return null;
+  if (((_array$field4 = array.field) === null || _array$field4 === void 0 ? void 0 : _array$field4.pattern) !== 'editable') return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, _objectSpread(_objectSpread({
+    type: "text"
+  }, props), {}, {
+    disabled: self === null || self === void 0 ? void 0 : self.disabled,
+    className: (0, _classnames.default)("".concat(prefixCls, "-remove"), self !== null && self !== void 0 && self.disabled ? "".concat(prefixCls, "-remove-disabled") : '', props.className)
+
+    //@ts-ignore
+    ,
+    ref: ref,
+    onClick: function onClick(e) {
+      if (self !== null && self !== void 0 && self.disabled) return;
+      e.stopPropagation();
+      // 明细删除会直接改变表单值，必须在共享组件源头统一确认，避免业务页面漏包确认。@author nokecy
+      _antd.Modal.confirm({
+        title: '确认删除明细',
+        content: '删除当前明细行后将从当前表单中移除，保存后不可恢复。',
+        okText: '删除',
+        okButtonProps: {
+          danger: true
+        },
+        onOk: function onOk() {
+          var _array$field5, _array$field5$remove, _array$props3, _array$props3$onRemov;
+          (_array$field5 = array.field) === null || _array$field5 === void 0 || (_array$field5$remove = _array$field5.remove) === null || _array$field5$remove === void 0 || _array$field5$remove.call(_array$field5, index);
+          (_array$props3 = array.props) === null || _array$props3 === void 0 || (_array$props3$onRemov = _array$props3.onRemove) === null || _array$props3$onRemov === void 0 || _array$props3$onRemov.call(_array$props3, index);
+          if (props.onClick) {
+            //@ts-ignore
+            props.onClick(e);
+          }
+        }
+      });
+    },
+    icon: (0, _formilyShared.isUndef)(props.icon) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {}) : props.icon,
+    children: props.title || self.title
+  }));
+});
+
+//@ts-ignore
+ArrayBase.MoveDown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _array$field6;
+  var index = useIndex(props.index);
+  var self = (0, _formilyReact.useField)();
+  var array = useArray();
+  var prefixCls = (0, _builtins__.usePrefixCls)('formily-array-base');
+  if (!array) return null;
+  if (((_array$field6 = array.field) === null || _array$field6 === void 0 ? void 0 : _array$field6.pattern) !== 'editable') return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, _objectSpread(_objectSpread({
+    type: "text"
+  }, props), {}, {
+    disabled: self === null || self === void 0 ? void 0 : self.disabled,
+    className: (0, _classnames.default)("".concat(prefixCls, "-move-down"), self !== null && self !== void 0 && self.disabled ? "".concat(prefixCls, "-move-down-disabled") : '', props.className)
+
+    //@ts-ignore
+    ,
+    ref: ref,
+    onClick: function onClick(e) {
+      var _array$field7, _array$field7$moveDow, _array$props4, _array$props4$onMoveD;
+      if (self !== null && self !== void 0 && self.disabled) return;
+      e.stopPropagation();
+      (_array$field7 = array.field) === null || _array$field7 === void 0 || (_array$field7$moveDow = _array$field7.moveDown) === null || _array$field7$moveDow === void 0 || _array$field7$moveDow.call(_array$field7, index);
+      (_array$props4 = array.props) === null || _array$props4 === void 0 || (_array$props4$onMoveD = _array$props4.onMoveDown) === null || _array$props4$onMoveD === void 0 || _array$props4$onMoveD.call(_array$props4, index);
+      if (props.onClick) {
+        //@ts-ignore
+        props.onClick(e);
+      }
+    },
+    icon: (0, _formilyShared.isUndef)(props.icon) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {}) : props.icon,
+    children: props.title || self.title
+  }));
+});
+
+//@ts-ignore
+ArrayBase.MoveUp = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _array$field8;
+  var index = useIndex(props.index);
+  var self = (0, _formilyReact.useField)();
+  var array = useArray();
+  var prefixCls = (0, _builtins__.usePrefixCls)('formily-array-base');
+  if (!array) return null;
+  if (((_array$field8 = array.field) === null || _array$field8 === void 0 ? void 0 : _array$field8.pattern) !== 'editable') return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, _objectSpread(_objectSpread({
+    type: "text"
+  }, props), {}, {
+    disabled: self === null || self === void 0 ? void 0 : self.disabled,
+    className: (0, _classnames.default)("".concat(prefixCls, "-move-up"), self !== null && self !== void 0 && self.disabled ? "".concat(prefixCls, "-move-up-disabled") : '', props.className)
+
+    //@ts-ignore
+    ,
+    ref: ref,
+    onClick: function onClick(e) {
+      var _array$field9, _array$props5, _array$props5$onMoveU;
+      if (self !== null && self !== void 0 && self.disabled) return;
+      e.stopPropagation();
+      array === null || array === void 0 || (_array$field9 = array.field) === null || _array$field9 === void 0 || _array$field9.moveUp(index);
+      array === null || array === void 0 || (_array$props5 = array.props) === null || _array$props5 === void 0 || (_array$props5$onMoveU = _array$props5.onMoveUp) === null || _array$props5$onMoveU === void 0 || _array$props5$onMoveU.call(_array$props5, index);
+      if (props.onClick) {
+        //@ts-ignore
+        props.onClick(e);
+      }
+    },
+    icon: (0, _formilyShared.isUndef)(props.icon) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UpOutlined, {}) : props.icon,
+    children: props.title || self.title
+  }));
+});
+
+//@ts-ignore
+ArrayBase.useArray = useArray;
+ArrayBase.useIndex = useIndex;
+ArrayBase.useRecord = useRecord;
+ArrayBase.mixin = function (target) {
+  target.Index = ArrayBase.Index;
+  target.SortHandle = ArrayBase.SortHandle;
+  target.Addition = ArrayBase.Addition;
+  target.Copy = ArrayBase.Copy;
+  target.Remove = ArrayBase.Remove;
+  target.MoveDown = ArrayBase.MoveDown;
+  target.MoveUp = ArrayBase.MoveUp;
+  target.useArray = ArrayBase.useArray;
+  target.useIndex = ArrayBase.useIndex;
+  target.useRecord = ArrayBase.useRecord;
+  return target;
+};
+var _default = exports.default = ArrayBase;

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

@@ -0,0 +1,18 @@
+/** height="auto" 时明细区最多显示的行数，超出后表格内部滚动 */
+export declare const ARRAY_TABLE_AUTO_MAX_ROWS = 10;
+export interface AutoHeightInput {
+    rowCount: number;
+    rowHeight: number;
+    headerHeight: number;
+    /** 合计行（固定在底部，占一行高度） */
+    hasSummary?: boolean;
+    /** 带行内错误文字、被撑高的行数 */
+    feedbackRows?: number;
+    minRows?: number;
+    maxRows?: number;
+}
+/**
+ * height="auto"：按行数算出网格高度，免得空表留大片空白、行少时不必手算像素。
+ * AG Grid 的 domLayout=autoHeight 会让合计行与滚动行为失效，这里改为按密度三档的行高直接计算。
+ */
+export declare const calcAutoGridHeight: ({ rowCount, rowHeight, headerHeight, hasSummary, feedbackRows, minRows, maxRows, }: AutoHeightInput) => number;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calcAutoGridHeight = exports.ARRAY_TABLE_AUTO_MAX_ROWS = void 0;
+var _rowFeedback = require("./rowFeedback");
+/** height="auto" 时明细区最多显示的行数，超出后表格内部滚动 */
+var ARRAY_TABLE_AUTO_MAX_ROWS = exports.ARRAY_TABLE_AUTO_MAX_ROWS = 10;
+
+/** 表格外框上下各 1px 边线 */
+var BORDER = 2;
+/**
+ * height="auto"：按行数算出网格高度，免得空表留大片空白、行少时不必手算像素。
+ * AG Grid 的 domLayout=autoHeight 会让合计行与滚动行为失效，这里改为按密度三档的行高直接计算。
+ */
+var calcAutoGridHeight = exports.calcAutoGridHeight = function calcAutoGridHeight(_ref) {
+  var rowCount = _ref.rowCount,
+    rowHeight = _ref.rowHeight,
+    headerHeight = _ref.headerHeight,
+    hasSummary = _ref.hasSummary,
+    _ref$feedbackRows = _ref.feedbackRows,
+    feedbackRows = _ref$feedbackRows === void 0 ? 0 : _ref$feedbackRows,
+    _ref$minRows = _ref.minRows,
+    minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
+    _ref$maxRows = _ref.maxRows,
+    maxRows = _ref$maxRows === void 0 ? ARRAY_TABLE_AUTO_MAX_ROWS : _ref$maxRows;
+  var rows = Math.min(Math.max(rowCount, minRows), Math.max(maxRows, minRows));
+  return headerHeight + rows * rowHeight + (hasSummary ? rowHeight : 0) + Math.min(feedbackRows, rows) * _rowFeedback.ROW_FEEDBACK_EXTRA_HEIGHT + BORDER;
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { ArrayField } from '@nokecy/formily-core';
+import type { GridApi, IRowNode, SelectionChangedEvent } from 'ag-grid-community';
+import type { ArrayTableProps, ObservableColumnSource } from './interface';
+/** 标准删除控件在行内的字段路径与静态约束。@author nokecy */
+export type RemovalAction = {
+    path: string[];
+    schemas: any[];
+    column: ObservableColumnSource;
+};
+/** 收集标准删除入口，保留列级显隐约束，不把其他业务按钮当成删除。@author nokecy */
+export declare function collectRemovalActions(sources: ObservableColumnSource[]): RemovalAction[];
+/**
+ * 与行内删除共用字段的运行时权限；未挂载的普通行采用静态规则。
+ * 含动态权限且尚未求值的行保持不可删除，避免绕过业务禁用条件。@author nokecy
+ */
+export declare function findRemovalAction(field: ArrayField, index: number, actions: RemovalAction[]): RemovalAction | undefined;
+/**
+ * 把选择时的稳定行标识转换为当前表单索引；确认前全部复核，倒序删除保持数组地址正确。
+ * 返回 false 表示所选行已删除或变为不可删除，整个批次不执行。@author nokecy
+ */
+export declare function removeSelectedRows(field: ArrayField, ids: string[], actions: RemovalAction[], getId: (row: any) => string, onRemove?: (index: number) => void, event?: React.MouseEvent): boolean;
+/** 公共明细表格的勾选及批量删除，沿用业务行权限、行标识与删除通知。@author nokecy */
+export declare function useArrayTableBatchRemove(field: ArrayField, sources: ObservableColumnSource[], props: ArrayTableProps, apiRef: React.MutableRefObject<GridApi | undefined>, getId: (row: any) => string): {
+    rowSelection: "single" | "multiple" | import("ag-grid-community/dist/types/src/entities/gridOptions").SingleRowSelectionOptions<any, any> | import("ag-grid-community/dist/types/src/entities/gridOptions").MultiRowSelectionOptions<any, any> | {
+        isRowSelectable: (node: IRowNode) => boolean;
+        headerCheckbox?: boolean | undefined;
+        selectAll?: "filtered" | undefined;
+        mode: "multiRow" | "singleRow";
+        checkboxes: boolean;
+        enableClickSelection: boolean;
+    } | undefined;
+    selectionColumnDef: import("ag-grid-community").SelectionColumnDef | undefined;
+    onSelectionChanged: (event: SelectionChangedEvent) => void;
+    toolbar: React.JSX.Element;
+};