@hi-ui/schema-fields 4.0.0-experimental.1

package/lib/cjs/editable/editable.js

@@ -0,0 +1,141 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var schemaUtils = require('@hi-ui/schema-utils');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function EditableCase(props) {
+  var _a, _b, _c;
+  var field = props.field,
+    ctx = props.ctx,
+    value = props.value;
+  var fieldRenderer = new props.FieldClass();
+  // 控制是否显示实际的表单组件
+  var _useState = React.useState(function () {
+      return props.defaultActive || false;
+    }),
+    isActive = _useState[0],
+    _setIsActive = _useState[1];
+  // 启用 defaultActive 时，isActive始终为 true
+  var setIsActive = function setIsActive(value) {
+    return _setIsActive(props.defaultActive || value);
+  };
+  var handleActivate = function handleActivate() {
+    setIsActive(true);
+  };
+  var handleBlur = function handleBlur(event) {
+    // 如果配置了失焦时保持激活状态，则直接跳过
+    if (props.keepActiveOnBlur) return;
+    if (!event) return;
+    var currentTarget = event.currentTarget,
+      relatedTarget = event.relatedTarget;
+    // 检查是否在当前容器内
+    if (relatedTarget && currentTarget.contains(relatedTarget)) return;
+    // // 检查是否在HiUI的Portal中
+    if (relatedTarget instanceof Element) {
+      var portalElement = relatedTarget.closest("[class^=\"" + classname.getPrefixCls('portal') + "-\"]");
+      if (portalElement) return;
+    }
+    // 延迟一小会儿再设置为非激活状态
+    // 避免在失焦时，订阅状态还没有更新，导致只读的文本闪烁
+    schemaUtils.Schedular.nextMacro(function () {
+      setIsActive(false);
+    }, 20); // 20*16 = 320ms // 是个经验值，不合适可以修改
+  };
+  // 可编辑但未激活时显示占位 Input
+  if (!isActive) {
+    var editableCtx = {
+      field: field,
+      rowData: ctx.rowData,
+      rawData: ctx.rawData,
+      formBinding: ctx.formBinding,
+      formRef: ctx.formRef,
+      onActivate: handleActivate,
+      onDeactivate: handleBlur,
+      rowIndex: ctx.rowIndex,
+      dataKey: ctx.dataKey
+    };
+    var renderEditable = ((_a = field.renderer) === null || _a === void 0 ? void 0 : _a.renderEditable) ||
+    // renderEditable
+    fieldRenderer.renderEditable.bind(fieldRenderer);
+    var dom = renderEditable(value, editableCtx);
+    var enhancedRenderers = (_b = field.extra) === null || _b === void 0 ? void 0 : _b.enhancedRenderers;
+    if (enhancedRenderers === null || enhancedRenderers === void 0 ? void 0 : enhancedRenderers.renderEditable) {
+      var finalDom = enhancedRenderers.renderEditable(dom, {
+        data: value,
+        render: fieldRenderer,
+        renderCtx: editableCtx
+      });
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, finalDom);
+    }
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderEditable(value, editableCtx));
+  }
+  // TODO 这里打个补丁，待后续表格支持全局的焦点管理能力后移除
+  // 单选和单选级联在值变化时，直接触发失焦
+  var patchedOnBlur = function patchedOnBlur() {
+    var _b2;
+    var _a, _b;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (field.valueType === 'select' || field.valueType === 'cascader') {
+      handleBlur.apply(void 0, args);
+    }
+    (_b = (_a = ctx.formBinding).onBlur) === null || _b === void 0 ? void 0 : (_b2 = _b).call.apply(_b2, [_a].concat(args));
+  };
+  var nextCtx = Object.assign(Object.assign({}, ctx), {
+    formBinding: Object.assign(Object.assign({}, ctx.formBinding), {
+      onBlur: patchedOnBlur
+    })
+  });
+  // 激活编辑态时显示实际的表单组件
+  var renderFormItem = ((_c = field.renderer) === null || _c === void 0 ? void 0 : _c.renderFormItem) ||
+  // renderFormItem
+  fieldRenderer.renderFormItem.bind(fieldRenderer);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-case": "editing",
+    onBlur: handleBlur
+  }, renderFormItem(null, nextCtx));
+}
+// 实测不处理这个失焦问题，体验反而更好
+// 把处理的逻辑留在这里，如有需要再考虑启用吧
+// export function EditableCase(props: EditableCaseProps) {
+//   // ~~一个已知问题是，表单项的组件需要彻底激活后失焦，才会触发 onBlur
+//   // ~~如果仅仅是聚焦到占位元素，进入active 状态，但不使用表单项，就无法正确回到 unActive 状态
+//   // ~~也就会一直处于 active 状态，渲染真实的表单项
+//   // 下面一段代码用来解决这个问题 ↑↑↑↑↑
+//   const editingWrapperRef = React.useRef<HTMLDivElement>(null)
+//   React.useEffect(() => {
+//     if (isActive && editingWrapperRef.current) {
+//       editingWrapperRef.current.focus()
+//     }
+//   }, [isActive])
+//   // 激活编辑态时显示实际的表单组件
+//   return (
+//     <div
+//       // 下面两个属性允许 div 获取焦点
+//       ref={editingWrapperRef}
+//       tabIndex={-1} // 只能通过代码(focus()方法)聚焦，不能通过Tab键聚焦
+//     ></div>
+//   )
+// }
+
+exports.EditableCase = EditableCase;

package/lib/cjs/editable/index.js

@@ -0,0 +1,62 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var ctx$1 = require('../ctx.js');
+var useReadonly = require('./use-readonly.js');
+var simple = require('./simple.js');
+var readonly = require('./readonly.js');
+var editable = require('./editable.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function EditableField(props) {
+  var field = props.field,
+    ctx = props.ctx,
+    value = props.value,
+    _props$usedBy = props.usedBy,
+    usedBy = _props$usedBy === void 0 ? 'other' : _props$usedBy;
+  // 获取字段渲染器
+  var FieldClass = ctx$1.useMatchFieldClass({
+    name: 'EditableFieldWrapper',
+    field: field,
+    fieldMap: props.fieldMap
+  });
+  var readonly$1 = useReadonly.useReadonly(field, props.runtimeEditable);
+  // 简单字段且无自定义渲染，使用 SimpleCase
+  if (simple.isSimpleCase(field)) return /*#__PURE__*/React__default["default"].createElement(simple.SimpleCase, {
+    value: value
+  });
+  var passedProps = {
+    field: field,
+    ctx: ctx,
+    value: value,
+    FieldClass: FieldClass
+  };
+  if (readonly$1) return /*#__PURE__*/React__default["default"].createElement(readonly.ReadonlyCase, Object.assign({}, passedProps, {
+    usedBy: usedBy
+  }));else return /*#__PURE__*/React__default["default"].createElement(editable.EditableCase, Object.assign({}, passedProps));
+}
+exports.isReadonly = useReadonly.isReadonly;
+exports.runDynamicEditable = useReadonly.runDynamicEditable;
+exports.useReadonly = useReadonly.useReadonly;
+exports.SimpleCase = simple.SimpleCase;
+exports.isSimpleCase = simple.isSimpleCase;
+exports.ReadonlyCase = readonly.ReadonlyCase;
+exports.EditableCase = editable.EditableCase;
+exports.EditableField = EditableField;

package/lib/cjs/editable/readonly.js

@@ -0,0 +1,36 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function ReadonlyCase(props) {
+  var _a, _b, _c;
+  var field = props.field,
+    ctx = props.ctx,
+    value = props.value,
+    _props$usedBy = props.usedBy,
+    usedBy = _props$usedBy === void 0 ? 'other' : _props$usedBy;
+  var fieldRenderer = new props.FieldClass();
+  // 只读态时直接渲染只读视图
+  // 此处实际上是 render | renderCell 的联合类型，收敛至 render 类型，避免 Any 缺少检查
+  var render = usedBy === 'table' ? ((_a = field.renderer) === null || _a === void 0 ? void 0 : _a.renderCell) || ((_b = field.renderer) === null || _b === void 0 ? void 0 : _b.render) || fieldRenderer.renderCell.bind(fieldRenderer) : ((_c = field.renderer) === null || _c === void 0 ? void 0 : _c.render) || fieldRenderer.render.bind(fieldRenderer);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, render(value, ctx));
+}
+exports.ReadonlyCase = ReadonlyCase;

package/lib/cjs/editable/simple.js

@@ -0,0 +1,61 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * 简单字段且无自定义渲染，使用 SimpleCase
+ */
+function isSimpleCase(field) {
+  var _a;
+  var customRender = field === null || field === void 0 ? void 0 : field.renderer;
+  if ((customRender === null || customRender === void 0 ? void 0 : customRender.renderCell) || (customRender === null || customRender === void 0 ? void 0 : customRender.render)) return false;
+  return (_a = field.control) === null || _a === void 0 ? void 0 : _a.simple;
+}
+function SimpleCase(props) {
+  var value = props.value;
+  // NOTE：此处 SimpleCase 的结构和样式说明
+  // 简单场景时，实际上可以使用 :not(:has(*)) 来直接选中这种仅包含文本的单元格
+  // 但是 :not(:has(*)) 的兼容性不好，所以此处使用 span[data-case='simple'] 来选中
+  // 若后续 :has 的兼容性提升，则可以考虑删除此处的 span 标签，进一步降低渲染成本
+  // 此处注释在样式位置中也有相同的一份~
+  if (value === undefined || value === null || value === '') return /*#__PURE__*/React__default["default"].createElement("span", {
+    "data-case": "simple"
+  }, "-");
+  // 如果 value 是对象，则直接显示 JSON 字符串
+  if (_typeof(value) === 'object') {
+    try {
+      return /*#__PURE__*/React__default["default"].createElement("span", {
+        "data-case": "simple"
+      }, JSON.stringify(value));
+    } catch (error) {
+      console.error('SimpleCase Failed to stringify object', error);
+      return /*#__PURE__*/React__default["default"].createElement("span", {
+        "data-case": "simple"
+      }, "[Object Unknown]");
+    }
+  }
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    "data-case": "simple"
+  }, value);
+}
+exports.SimpleCase = SimpleCase;
+exports.isSimpleCase = isSimpleCase;

package/lib/cjs/editable/use-readonly.js

@@ -0,0 +1,200 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var ctx = require('./ctx.js');
+
+/**
+ * 判断字段是否只读
+ * @param field 字段配置
+ * @param runtimeEditable 运行时的可编辑状态(可选)
+ */
+function useReadonly(field, runtimeEditable) {
+  var component = ctx.useEditableControlCtx();
+  return isReadonly({
+    component: component,
+    field: field.control || {},
+    runtimeEditable: runtimeEditable
+  });
+}
+// 是否只读的判断逻辑：
+// - 影响这个值的有四个属性 组件层级的 'editable' | 'readonly' 和字段层级的 'editable' | 'readonly'
+// - 先看外部的配置，再看内部的配置，内部的优先级更高
+// - 这四个值，是 undefined 的直接忽略
+// - 默认是可编辑的，只有在 readonly 为 true 或者 editable 为 false 时 才会不可编辑
+// - 如果 readonly 和 editable 有冲突，editable 的优先级更高
+// NOTE 其实完全可以使用一个值来表示，但是为了方便写代码，还是分开两个字段来控制
+/**
+ * 判断是否只读的工具函数
+ */
+function isReadonly(ctx) {
+  var component = ctx.component,
+    field = ctx.field,
+    runtimeEditable = ctx.runtimeEditable;
+  // 检查字段级别的 editable
+  if (field.editable !== undefined) {
+    return !field.editable;
+  }
+  // 检查字段级别的 readonly
+  if (field.readonly !== undefined) {
+    return field.readonly;
+  }
+  // 检查运行时配置
+  if (runtimeEditable !== undefined) {
+    return !runtimeEditable;
+  }
+  // 检查组件级别的 editable
+  if (component.editable !== undefined) {
+    return !component.editable;
+  }
+  // 检查组件级别的 readonly
+  if (component.readonly !== undefined) {
+    return component.readonly;
+  }
+  // 默认可编辑
+  return false;
+}
+/**
+ * 运行动态可编辑函数
+ * - 会在字段内部完成【只读/可编辑/运行时可编辑】的判断后执行
+ * - 仅在上述判断为【可编辑】时，才会调用本函数
+ * - 本函数返回真值时，字段开启编辑，否则改为只读
+ */
+function runDynamicEditable(field, readonly, getCtx) {
+  var _a;
+  // 只读直接返回false
+  if (readonly) return false;
+  // 以下字段是可编辑的
+  // 再检查 dynamicEditable 函数
+  var dynamicEditable = (_a = field.control) === null || _a === void 0 ? void 0 : _a.dynamicEditable;
+  // 不存在，就保持可编辑
+  if (!dynamicEditable) return true;
+  try {
+    // 存在，就调用函数
+    var ctx = getCtx();
+    return !!dynamicEditable(ctx);
+  } catch (error) {
+    console.warn('runDynamicEditable', error);
+    // 如果函数抛出错误，就保持可编辑
+    return true;
+  }
+}
+// NOTE 以下是 isReadonly 的测试代码
+// // 创建测试上下文的辅助函数
+// const createCtx = (config: {
+//   componentEditable?: boolean
+//   componentReadonly?: boolean
+//   fieldEditable?: boolean
+//   fieldReadonly?: boolean
+//   runtimeEditable?: boolean
+// }) => {
+//   return {
+//     component: { editable: config.componentEditable, readonly: config.componentReadonly },
+//     field: { editable: config.fieldEditable, readonly: config.fieldReadonly },
+//     runtimeEditable: config.runtimeEditable,
+//   }
+// }
+// // 测试辅助函数
+// function runTest(description: string, ctx: ReadonlyCtxType, expectedResult: boolean) {
+//   const actualResult = isReadonly(ctx)
+//   const passed = actualResult === expectedResult
+//   console.log(
+//     `${passed ? '✅' : '❌'} ${description}\n`,
+//     `  预期结果: ${expectedResult}\n`,
+//     `  实际结果: ${actualResult}\n`
+//   )
+// }
+// console.log('=== isReadOnly 函数测试 ===\n')
+// // 默认行为测试
+// console.log('📋 测试组：默认行为\n')
+// runTest('所有配置都是undefined时应该可编辑', createCtx({}), false)
+// // 运行时配置测试
+// console.log('\n📋 测试组：运行时配置\n')
+// runTest('runtimeEditable=false 时应该只读', createCtx({ runtimeEditable: false }), true)
+// runTest('runtimeEditable=true 时应该可编辑', createCtx({ runtimeEditable: true }), false)
+// // 组件级别配置测试
+// console.log('\n📋 测试组：组件级别配置\n')
+// runTest('componentEditable=false 时应该只读', createCtx({ componentEditable: false }), true)
+// runTest('componentEditable=true 时应该可编辑', createCtx({ componentEditable: true }), false)
+// runTest('componentReadonly=true 时应该只读', createCtx({ componentReadonly: true }), true)
+// runTest('componentReadonly=false 时应该可编辑', createCtx({ componentReadonly: false }), false)
+// runTest(
+//   'componentEditable=false 且 componentReadonly=false 时应该只读(editable优先)',
+//   createCtx({ componentEditable: false, componentReadonly: false }),
+//   true
+// )
+// // 字段级别配置测试
+// console.log('\n📋 测试组：字段级别配置\n')
+// runTest('fieldEditable=false 时应该只读', createCtx({ fieldEditable: false }), true)
+// runTest('fieldEditable=true 时应该可编辑', createCtx({ fieldEditable: true }), false)
+// runTest('fieldReadonly=true 时应该只读', createCtx({ fieldReadonly: true }), true)
+// runTest('fieldReadonly=false 时应该可编辑', createCtx({ fieldReadonly: false }), false)
+// // 运行时与字段配置组合测试
+// console.log('\n📋 测试组：运行时与字段配置组合\n')
+// runTest(
+//   '字段 editable=false 时 runtimeEditable=true 不应生效',
+//   createCtx({ fieldEditable: false, runtimeEditable: true }),
+//   true
+// )
+// runTest(
+//   '字段 readonly=true 时 runtimeEditable=true 不应生效',
+//   createCtx({ fieldReadonly: true, runtimeEditable: true }),
+//   true
+// )
+// // 运行时与组件配置组合测试
+// console.log('\n📋 测试组：运行时与组件配置组合\n')
+// runTest(
+//   'runtimeEditable=false 应覆盖组件 editable=true',
+//   createCtx({ componentEditable: true, runtimeEditable: false }),
+//   true
+// )
+// runTest(
+//   'runtimeEditable=true 应覆盖组件 readonly=true',
+//   createCtx({ componentReadonly: true, runtimeEditable: true }),
+//   false
+// )
+// // 复杂组合场景测试
+// console.log('\n📋 测试组：复杂组合场景\n')
+// runTest(
+//   '字段配置优先：字段readonly=true时其他配置都不生效',
+//   createCtx({
+//     fieldReadonly: true,
+//     runtimeEditable: true,
+//     componentEditable: true,
+//   }),
+//   true
+// )
+// runTest(
+//   'runtime配置次之：无字段配置时runtime覆盖组件配置',
+//   createCtx({
+//     runtimeEditable: true,
+//     componentReadonly: true,
+//   }),
+//   false
+// )
+// runTest(
+//   '字段级editable优先级最高：fieldEditable=true时覆盖其他所有配置',
+//   createCtx({
+//     fieldEditable: true,
+//     fieldReadonly: true,
+//     runtimeEditable: false,
+//     componentEditable: false,
+//     componentReadonly: true,
+//   }),
+//   false
+// )
+// console.log('\n=== 测试结束 ===')
+
+exports.isReadonly = isReadonly;
+exports.runDynamicEditable = runDynamicEditable;
+exports.useReadonly = useReadonly;

package/lib/cjs/extensible/selectable/index.js

@@ -0,0 +1,114 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
+var React = require('react');
+var icons = require('@hi-ui/icons');
+var classname = require('@hi-ui/classname');
+var schemaOptionInjector = require('@hi-ui/schema-option-injector');
+var schemaCore = require('@hi-ui/schema-core');
+var schemaUtils = require('@hi-ui/schema-utils');
+var base = require('../../base.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var _inheritsLoose__default = /*#__PURE__*/_interopDefaultCompat(_inheritsLoose);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ProSelectableField = /*#__PURE__*/function (_ProField) {
+  _inheritsLoose__default["default"](ProSelectableField, _ProField);
+  function ProSelectableField() {
+    var _this;
+    _this = _ProField.apply(this, arguments) || this;
+    _this.suffixEl = /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, {
+      size: 16,
+      color: "var(" + classname.getPrefixStyleVar('color-gray-500') + ", #929aa6)"
+    });
+    return _this;
+  }
+  /**
+   * 过滤掉原始参数中的自引用属性
+   * - 防止 immer 在处理数据时出现崩溃
+   * - 主要用在级联及树形选择组件中
+   */
+  var _proto = ProSelectableField.prototype;
+  _proto.hookedSetSelectedRawOption = function hookedSetSelectedRawOption(ctx, args) {
+    var _a;
+    if ((_a = ctx.field.payload) === null || _a === void 0 ? void 0 : _a.setSelectedRawOption) {
+      var nextArgs = schemaUtils.filterCascaderSelfReferenceOpts.apply(void 0, args);
+      ctx.field.payload.setSelectedRawOption(nextArgs);
+    }
+  };
+  _proto.getOptionTitle = function getOptionTitle(ctx, dataKey) {
+    var rowData = ctx.rowData,
+      _ctx$field = ctx.field,
+      valueType = _ctx$field.valueType,
+      dataIndex = _ctx$field.dataIndex;
+    var fieldKey = dataKey || dataIndex;
+    // 内部会区分组件类型，返回对应的标题
+    return schemaOptionInjector.getSelectedOptionTitle(rowData, valueType, fieldKey);
+  };
+  _proto.getDftPlaceholder = function getDftPlaceholder(ctx) {
+    var titleText = ctx.field._titleText;
+    if (titleText) return "\u8BF7\u9009\u62E9" + titleText;
+  }
+  /**
+   * 渲染字符串类型的已选结果
+   * - 用在单选、单选级联
+   */;
+  _proto.renderEditableForStringSelected = function renderEditableForStringSelected(data, ctx) {
+    var dataKey = ctx.dataKey;
+    // 如果数据为无效值，则不渲染 // null/undefined/空串/空数组
+    if (schemaUtils.isInvalidValue(data)) return null;
+    // 尝试获取已选中的标题
+    // SELECTED_OPTION_RAW 来自可编辑表，原始数据中没有的直接跳过这里的逻辑
+    if (schemaCore.SELECTED_OPTION_RAW in ctx.rawData) {
+      var selectedTitle = this.getOptionTitle(ctx, dataKey);
+      if (selectedTitle) {
+        return _ProField.prototype.renderEditable.call(this, selectedTitle, ctx, {
+          suffix: this.suffixEl
+        });
+      }
+    }
+    return null;
+  }
+  /**
+   * 渲染字符串类型的首次回显元素
+   * - 用在单选、单选级联
+   */;
+  _proto.renderEditableForStringFirstRefill = function renderEditableForStringFirstRefill(data, ctx, extra) {
+    var _a;
+    // 如果数据为无效值，则不渲染 // null/undefined/空串/空数组
+    if (!schemaUtils.isInvalidValue(data)) {
+      var RefillComponent = extra.RefillComponent,
+        dftRender = extra.dftRender;
+      var fieldProps = this.getFieldProps({}, ctx);
+      return /*#__PURE__*/React__default["default"].createElement(schemaOptionInjector.AsyncOptsDataGetter, Object.assign({}, fieldProps, {
+        renderCtx: ctx
+      }), /*#__PURE__*/React__default["default"].createElement(RefillComponent, {
+        value: data,
+        data: [],
+        ctx: ctx,
+        instance: this,
+        dftRender: dftRender,
+        fieldNames: (_a = fieldProps.fieldNames) !== null && _a !== void 0 ? _a : {}
+      }));
+    }
+    return null;
+  };
+  return ProSelectableField;
+}(base.ProField);
+exports.ProSelectableField = ProSelectableField;