@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/relative-time.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RelativeTime;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _util = require("./util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function RelativeTime(_ref) {
+  let {
+    value
+  } = _ref;
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  if (!value) {
+    return '-';
+  }
+  const prettyOption = {
+    locale: locale === 'zh' ? 'zh_CN' : 'zh_US',
+    compact: true
+  };
+  const valTime = new Date(value).getTime();
+  const now = Date.now();
+  if (valTime > now) {
+    const time = (0, _prettyMsI18n.default)(valTime - now, prettyOption);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: (0, _util.formatToDatetime)(value),
+      placement: "top-end",
+      enterTouchDelay: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: t('common.afterTime', {
+          time
+        })
+      })
+    });
+  }
+  const time = (0, _prettyMsI18n.default)(now - valTime, prettyOption);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    title: (0, _util.formatToDatetime)(value),
+    placement: "top-end",
+    enterTouchDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: t('common.timeAgo', {
+        time
+      })
+    })
+  });
+}
+RelativeTime.propTypes = {
+  value: _propTypes.default.any
+};
+RelativeTime.defaultProps = {
+  value: ''
+};

package/lib/schema-form/color-input.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ColorInput;
+var _react = require("react");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _reactColor = require("react-color");
+var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ColorInput(_ref) {
+  let {
+    editing,
+    value,
+    onChange
+  } = _ref;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const colorElm = (0, _react.useRef)();
+  const colorValue = (0, _react.useRef)(value);
+
+  // auto open color picker when editing, should wait the useRef to be ready
+  (0, _react.useEffect)(() => {
+    let timer = null;
+    if (editing) {
+      timer = setTimeout(() => {
+        setOpen(true);
+      }, 50);
+    }
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [editing]);
+  const onColorChange = color => {
+    colorValue.current = color;
+    onChange(color);
+  };
+  const handleEnterKeyDown = () => {
+    setOpen(false);
+    onChange(colorValue.current);
+  };
+  const ReadView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    className: "form-item-input slot",
+    px: 1,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      children: [value, value !== 'auto' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginLeft: 4,
+          backgroundColor: value,
+          width: '1em',
+          height: '1em',
+          borderRadius: '0.2em'
+        }
+      })]
+    })
+  });
+  const EditView = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    flexGrow: 1,
+    alignItems: "center",
+    height: "40px",
+    onKeyDown: handleEnterKeyDown,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      onClick: () => setOpen(true),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: colorElm,
+        style: {
+          flexShrink: 0,
+          marginLeft: '8px',
+          backgroundColor: value,
+          width: '32px',
+          height: '32px',
+          boxSizing: 'border-box',
+          borderRadius: '8px',
+          border: '1px solid #eee',
+          cursor: value === 'auto' ? 'default' : 'pointer'
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      open: open,
+      anchorEl: colorElm.current,
+      onClose: () => setOpen(false),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColor.ChromePicker, {
+        color: value,
+        onChange: c => onColorChange(c.hex)
+      })
+    })]
+  });
+  return editing ? EditView : ReadView;
+}
+ColorInput.propTypes = _commonPropTypes.default;

package/lib/schema-form/common-prop-types.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  description: _propTypes.default.string,
+  editing: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  required: _propTypes.default.bool,
+  // eslint-disable-next-line react/no-unused-prop-types
+  value: _propTypes.default.any,
+  // eslint-disable-next-line react/no-unused-prop-types
+  componentProps: _propTypes.default.object,
+  render: _propTypes.default.func,
+  renderFormItem: _propTypes.default.func
+};
+exports.default = _default;

package/lib/schema-form/index.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SchemaForm;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _colorInput = _interopRequireDefault(require("./color-input"));
+var _textInput = _interopRequireDefault(require("./text-input"));
+var _passportInput = _interopRequireDefault(require("./passport-input"));
+var _required = _interopRequireDefault(require("../form/required"));
+var _formWrapper = _interopRequireDefault(require("../form/form-wrapper"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function getComponent(item, _ref) {
+  let {
+    editing = false
+  } = _ref;
+  const {
+    componentType = 'input',
+    render,
+    renderFormItem
+  } = item;
+  // if provided renderItem and editing is true, use it
+  if (editing && renderFormItem) {
+    return renderFormItem;
+  }
+
+  // if provided render and editing is false, use it
+  if (!editing && render) {
+    return render;
+  }
+  const componentMap = {
+    input: _textInput.default,
+    color: _colorInput.default,
+    passport: _passportInput.default
+  };
+  return componentMap[componentType === null || componentType === void 0 ? void 0 : componentType.toLowerCase()];
+}
+function SchemaForm(_ref2) {
+  let {
+    schema,
+    loading,
+    value,
+    defaultValue,
+    onChange,
+    style,
+    disabled
+  } = _ref2;
+  const isControlled = Object.prototype.toString.call(value) === '[object Object]';
+  const [editingItem, setEditingItem] = (0, _react.useState)(null);
+  const [formValues, setFormValues] = (0, _react.useState)(isControlled ? value : defaultValue);
+  const editingItemInitialValue = (0, _react.useRef)();
+  function onFormItemChange(item, changeValue, action) {
+    const {
+      key,
+      secure
+    } = item;
+    const oldValue = formValues[key];
+    const isChanged = oldValue !== changeValue;
+    const newValues = _objectSpread(_objectSpread({}, formValues), {}, {
+      [key]: changeValue
+    });
+    if (isChanged) {
+      setFormValues(newValues);
+    }
+    onChange({
+      [key]: changeValue
+    }, {
+      allValues: newValues,
+      action,
+      currentItem: item
+    });
+
+    // hide secure text after confirm
+    if (action === 'confirm' && secure) {
+      setFormValues(_objectSpread(_objectSpread({}, formValues), {}, {
+        [key]: '__encrypted__'
+      }));
+    }
+    if (['confirm', 'cancel'].includes(action)) {
+      onItemEditingStatusChange(null);
+    } else {
+      onItemEditingStatusChange(item);
+    }
+  }
+  function onItemEditingStatusChange(item) {
+    if (item) {
+      editingItemInitialValue.current = formValues[item.key];
+      setEditingItem(item);
+      return;
+    }
+    editingItemInitialValue.current = null;
+    setEditingItem(null);
+  }
+  function getValue(item, _ref3) {
+    let {
+      editing = false
+    } = _ref3;
+    const {
+      key
+    } = item;
+    const currentValue = isControlled ? value[key] : formValues[key];
+    if (currentValue === '__encrypted__') {
+      if (!editing) {
+        return '******';
+      }
+      return '';
+    }
+    return currentValue;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFormWrapper, {
+    className: "form",
+    style: style,
+    children: schema === null || schema === void 0 ? void 0 : schema.map(x => {
+      const {
+        key,
+        description,
+        required,
+        hidden = false,
+        componentProps = {}
+      } = x;
+      if (hidden) {
+        return null;
+      }
+      const editing = !!(editingItem && key === editingItem.key);
+      const currentValue = getValue(x, {
+        editing
+      });
+      // get component by componentType
+      const CurrentComponent = getComponent(x, {
+        editing
+      });
+      const renderComponentProps = {
+        inputProps: {
+          'data-cy': 'schema-form-item-component'
+        },
+        key,
+        description,
+        editing,
+        value: currentValue,
+        onChange: function onChange(changeValue) {
+          let action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'change';
+          return onFormItemChange(x, changeValue, action);
+        },
+        componentProps
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "form-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "form-item-label",
+          style: {
+            color: required && !currentValue ? '#ff0000' : '#333'
+          },
+          children: [description, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "form-item-body",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "form-item-input",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentComponent, _objectSpread({}, renderComponentProps))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "form-item-action",
+            children: editing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                "data-cy": "schema-form-item-confirm",
+                onClick: () => {
+                  onFormItemChange(x, currentValue, 'confirm');
+                },
+                disabled: disabled || loading,
+                size: "large",
+                children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+                  size: 24
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Done.default, {})
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                "data-cy": "schema-form-item-cancel",
+                onClick: () => {
+                  onFormItemChange(x, editingItemInitialValue.current, 'cancel');
+                },
+                disabled: disabled || loading,
+                size: "large",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
+              })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              "data-cy": "schema-form-item-edit",
+              onClick: () => {
+                onFormItemChange(x, formValues[key], 'edit');
+              },
+              disabled: disabled || editingItem,
+              size: "large",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
+            })
+          })]
+        })]
+      }, key);
+    })
+  });
+}
+SchemaForm.propTypes = {
+  schema: _propTypes.default.array.isRequired,
+  loading: _propTypes.default.bool,
+  onChange: _propTypes.default.func.isRequired,
+  value: _propTypes.default.object,
+  defaultValue: _propTypes.default.object,
+  style: _propTypes.default.object,
+  disabled: _propTypes.default.bool
+};
+SchemaForm.defaultProps = {
+  loading: false,
+  value: undefined,
+  defaultValue: {},
+  style: {},
+  disabled: false
+};
+const StyledFormWrapper = (0, _styled.default)(_formWrapper.default)(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));

package/lib/schema-form/passport-input.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportInput;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
+var _passportColor = require("@abtnode/auth/lib/util/passport-color");
+var _util = require("@blocklet/meta/lib/util");
+var _colorInput = _interopRequireDefault(require("./color-input"));
+var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["editing", "value", "onChange", "componentProps"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+function PassportInput(_ref) {
+  let {
+      editing,
+      value,
+      onChange,
+      componentProps
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    blocklet
+  } = componentProps;
+  const color = value === 'auto' ? (0, _passportColor.getPassportColorFromDid)(blocklet.appDid) : value;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      style: {
+        width: 96,
+        marginRight: 12
+      },
+      alt: "",
+      src: (0, _createPassportSvg.default)({
+        title: 'Owner',
+        issuer: (0, _util.getDisplayName)(blocklet),
+        issuerDid: blocklet.appDid,
+        ownerName: 'Your Name',
+        isDataUrl: true,
+        preferredColor: value || 'auto'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorInput.default, _objectSpread(_objectSpread({}, rest), {}, {
+      editing: editing,
+      value: editing ? color : value,
+      onChange: onChange,
+      componentProps: componentProps
+    }))]
+  });
+}
+PassportInput.propTypes = _objectSpread(_objectSpread({}, _commonPropTypes.default), {}, {
+  componentProps: _propTypes.default.shape({
+    blocklet: _propTypes.default.object.isRequired
+  }).isRequired
+});
+PassportInput.defaultProps = {};

package/lib/schema-form/text-input.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TextInput;
+var _react = require("react");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["editing", "description", "value", "onChange", "componentProps"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+function TextInput(_ref) {
+  let {
+      editing,
+      description,
+      value,
+      onChange,
+      componentProps
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    placeholder
+  } = componentProps;
+  const inputValue = (0, _react.useRef)(value);
+
+  // enter keydown
+  const handleKeydown = e => {
+    if (e.key === 'Enter') {
+      onChange(inputValue.current, 'confirm');
+    }
+  };
+  const onInputChange = changeValue => {
+    inputValue.current = changeValue;
+    onChange(changeValue);
+  };
+  if (editing) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, _objectSpread({
+      style: {
+        flex: 1
+      },
+      fullWidth: true,
+      value: value,
+      onChange: e => {
+        e.persist();
+        onInputChange(e.target.value);
+      },
+      autoFocus: true,
+      size: "small",
+      variant: "outlined",
+      placeholder: description || placeholder,
+      onKeyDown: handleKeydown
+    }, rest));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    px: 1,
+    className: "form-item-input slot",
+    children: value
+  });
+}
+TextInput.propTypes = _commonPropTypes.default;
+TextInput.defaultProps = {
+  componentProps: {}
+};