@nokecy/qc-ui 1.1.47 → 1.1.48

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useArrayTableSources = exports.useArrayTableActions = exports.useAddition = exports.isColumnComponent = exports.buildArrayTableColumns = exports.LazyReadOnlyText = exports.LazyAgField = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
 var _react2 = require("@formily/react");
 var _shared = require("@formily/shared");
 var _arrayBase = _interopRequireDefault(require("./arrayBase"));
@@ -169,6 +170,26 @@ var readByFieldPath = function readByFieldPath(record, path) {
   }, record);
 };
 
+/** 「选一个」型组件:空值占位说「请选择」,其余说「请输入」 */
+var SELECT_LIKE = new Set(['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Radio.Group', 'Checkbox.Group', 'Transfer']);
+
+/**
+ * 懒挂载空值格显示什么。
+ *
+ * 懒挂载把未激活的可编辑格降成纯文本,值为空时整格一片空白——连输入框边框都没有,
+ * 用户看不出这里能填,以为功能坏了。故空值时按真控件的 placeholder 出淡灰占位,
+ * 点开前后看到同一句话,观感连续。
+ *
+ * 同样的理由 Switch/Checkbox 早就强制 eager 了(见 buildArrayTableColumns 的
+ * isInlineToggle),这里是把那条理由推广到其余可编辑列。@author nokecy
+ */
+var resolveEmptyPlaceholder = function resolveEmptyPlaceholder(fieldSchema) {
+  var _fieldSchema$xCompon;
+  var configured = fieldSchema === null || fieldSchema === void 0 || (_fieldSchema$xCompon = fieldSchema['x-component-props']) === null || _fieldSchema$xCompon === void 0 ? void 0 : _fieldSchema$xCompon.placeholder;
+  if (typeof configured === 'string' && configured) return configured;
+  return SELECT_LIKE.has(fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema['x-component']) ? '请选择' : '请输入';
+};
+
 /**
  * 懒挂载单元格渲染器(可编辑列)。
  *
@@ -195,6 +216,9 @@ var LazyAgField = exports.LazyAgField = function LazyAgField(params) {
     formatter = params.formatter,
     columnProps = params.columnProps,
     fieldSchema = params.fieldSchema;
+  // hook 必须在下面的条件 return 之前调用
+  var _theme$useToken = _antd.theme.useToken(),
+    token = _theme$useToken.token;
   var key = "".concat(node === null || node === void 0 ? void 0 : node.id, ":").concat(colDef === null || colDef === void 0 ? void 0 : colDef.field);
   var activated = (record === null || record === void 0 ? void 0 : record._isNew) === true || (context === null || context === void 0 || (_context$activeCells = context.activeCells) === null || _context$activeCells === void 0 || (_context$activeCells$ = _context$activeCells.has) === null || _context$activeCells$ === void 0 ? void 0 : _context$activeCells$.call(_context$activeCells, key)) === true;
   if (activated) {
@@ -221,6 +245,18 @@ var LazyAgField = exports.LazyAgField = function LazyAgField(params) {
       fieldSchema: fieldSchema
     }) : liveValue == null ? '' : String(liveValue);
     // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
+    if (text === '') {
+      // 空值:出淡灰 placeholder,让用户看得出这格能填(颜色取 antd 输入框 placeholder 的 token,自动跟随暗色主题)
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "ag-array-table-lazy-placeholder",
+        style: {
+          display: 'inline-block',
+          width: '100%',
+          cursor: 'text',
+          color: token.colorTextPlaceholder
+        }
+      }, resolveEmptyPlaceholder(fieldSchema));
+    }
     return /*#__PURE__*/_react.default.createElement("span", {
       className: "ag-array-table-lazy-text",
       style: {

package/dist/esm/array-table/utils.js

@@ -8,6 +8,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 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; }
 import React from 'react';
+import { theme } from 'antd';
 import { useField, useFieldSchema, RecursionField, Observer } from '@formily/react';
 import { isArr } from '@formily/shared';
 import ArrayBase from "./arrayBase";
@@ -162,6 +163,26 @@ var readByFieldPath = function readByFieldPath(record, path) {
   }, record);
 };
 
+/** 「选一个」型组件:空值占位说「请选择」,其余说「请输入」 */
+var SELECT_LIKE = new Set(['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Radio.Group', 'Checkbox.Group', 'Transfer']);
+
+/**
+ * 懒挂载空值格显示什么。
+ *
+ * 懒挂载把未激活的可编辑格降成纯文本,值为空时整格一片空白——连输入框边框都没有,
+ * 用户看不出这里能填,以为功能坏了。故空值时按真控件的 placeholder 出淡灰占位,
+ * 点开前后看到同一句话,观感连续。
+ *
+ * 同样的理由 Switch/Checkbox 早就强制 eager 了(见 buildArrayTableColumns 的
+ * isInlineToggle),这里是把那条理由推广到其余可编辑列。@author nokecy
+ */
+var resolveEmptyPlaceholder = function resolveEmptyPlaceholder(fieldSchema) {
+  var _fieldSchema$xCompon;
+  var configured = fieldSchema === null || fieldSchema === void 0 || (_fieldSchema$xCompon = fieldSchema['x-component-props']) === null || _fieldSchema$xCompon === void 0 ? void 0 : _fieldSchema$xCompon.placeholder;
+  if (typeof configured === 'string' && configured) return configured;
+  return SELECT_LIKE.has(fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema['x-component']) ? '请选择' : '请输入';
+};
+
 /**
  * 懒挂载单元格渲染器(可编辑列)。
  *
@@ -188,6 +209,9 @@ var LazyAgField = function LazyAgField(params) {
     formatter = params.formatter,
     columnProps = params.columnProps,
     fieldSchema = params.fieldSchema;
+  // hook 必须在下面的条件 return 之前调用
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   var key = "".concat(node === null || node === void 0 ? void 0 : node.id, ":").concat(colDef === null || colDef === void 0 ? void 0 : colDef.field);
   var activated = (record === null || record === void 0 ? void 0 : record._isNew) === true || (context === null || context === void 0 || (_context$activeCells = context.activeCells) === null || _context$activeCells === void 0 || (_context$activeCells$ = _context$activeCells.has) === null || _context$activeCells$ === void 0 ? void 0 : _context$activeCells$.call(_context$activeCells, key)) === true;
   if (activated) {
@@ -214,6 +238,18 @@ var LazyAgField = function LazyAgField(params) {
       fieldSchema: fieldSchema
     }) : liveValue == null ? '' : String(liveValue);
     // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
+    if (text === '') {
+      // 空值:出淡灰 placeholder,让用户看得出这格能填(颜色取 antd 输入框 placeholder 的 token,自动跟随暗色主题)
+      return /*#__PURE__*/React.createElement("span", {
+        className: "ag-array-table-lazy-placeholder",
+        style: {
+          display: 'inline-block',
+          width: '100%',
+          cursor: 'text',
+          color: token.colorTextPlaceholder
+        }
+      }, resolveEmptyPlaceholder(fieldSchema));
+    }
     return /*#__PURE__*/React.createElement("span", {
       className: "ag-array-table-lazy-text",
       style: {