@nocobase/client 0.9.0-alpha.2 → 0.9.1-alpha.2

package/lib/schema-component/antd/variable/JSONInput.js

@@ -0,0 +1,100 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JSONInput = JSONInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _css = require("@emotion/css");
+
+var _input = require("../input");
+
+var _reactI18next = require("react-i18next");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+// NOTE: https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js/46012210#46012210
+function setNativeInputValue(input, value) {
+  var nativeInputValueSetter = Object.getOwnPropertyDescriptor(input.constructor.prototype, 'value').set;
+  nativeInputValueSetter.call(input, value);
+  input.dispatchEvent(new Event('input', {
+    bubbles: true
+  }));
+}
+
+function JSONInput(props) {
+  var inputRef = (0, _react.useRef)(null);
+  var value = props.value,
+      _props$space = props.space,
+      space = _props$space === void 0 ? 2 : _props$space,
+      scope = props.scope;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var options = typeof scope === 'function' ? scope() : scope !== null && scope !== void 0 ? scope : [];
+
+  function onFormat() {
+    if (!inputRef.current) {
+      return;
+    }
+
+    if (!value) {
+      return;
+    }
+
+    var textArea = inputRef.current.resizableTextArea.textArea;
+    var nextValue = JSON.stringify(value, null, space);
+    setNativeInputValue(textArea, nextValue);
+    textArea.setSelectionRange(nextValue.length, nextValue.length);
+    textArea.focus();
+  }
+
+  function onInsert(selected) {
+    if (!inputRef.current) {
+      return;
+    }
+
+    var variable = "{{".concat(selected.join('.'), "}}");
+    var textArea = inputRef.current.resizableTextArea.textArea;
+    var nextValue = textArea.value.slice(0, textArea.selectionStart) + variable + textArea.value.slice(textArea.selectionEnd);
+    var nextPos = [textArea.selectionStart, textArea.selectionStart + variable.length];
+    setNativeInputValue(textArea, nextValue);
+    textArea.setSelectionRange.apply(textArea, nextPos);
+    textArea.focus();
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n      .ant-input{\n        width: 100%;\n      }\n    "])))
+  }, /*#__PURE__*/_react.default.createElement(_input.Input.JSON, _objectSpread(_objectSpread({}, props), {}, {
+    ref: inputRef
+  })), /*#__PURE__*/_react.default.createElement(_antd.Button.Group, {
+    className: (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          right: 0;\n          top: 0;\n          .ant-btn-sm{\n            font-size: 85%;\n          }\n        "])))
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    onClick: onFormat
+  }, t('Prettify')), /*#__PURE__*/_react.default.createElement(_antd.Cascader, {
+    value: [],
+    options: options,
+    onChange: onInsert
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    className: (0, _css.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              font-style: italic;\n              font-family: \"New York\", \"Times New Roman\", Times, serif;\n            "])))
+  }, "x"))));
+}

package/lib/schema-component/antd/variable/TextArea.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function TextArea(props: any): JSX.Element;

package/lib/schema-component/antd/variable/TextArea.js

@@ -0,0 +1,341 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextArea = TextArea;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _react2 = require("@formily/react");
+
+var _css = require("@emotion/css");
+
+var _reactI18next = require("react-i18next");
+
+var _2 = require("../..");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var VARIABLE_RE = /{{\s*([^{}]+)\s*}}/g;
+
+function pasteHtml(container, html, _ref) {
+  var _window$getSelection, _window;
+
+  var _ref$selectPastedCont = _ref.selectPastedContent,
+      selectPastedContent = _ref$selectPastedCont === void 0 ? false : _ref$selectPastedCont,
+      indexes = _ref.range;
+  // IE9 and non-IE
+  var sel = (_window$getSelection = (_window = window).getSelection) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.call(_window);
+
+  if (!(sel === null || sel === void 0 ? void 0 : sel.getRangeAt) || !sel.rangeCount) {
+    return;
+  }
+
+  var range = sel.getRangeAt(0);
+
+  if (!range) {
+    return;
+  }
+
+  var children = Array.from(container.childNodes);
+
+  if (indexes[0] === -1) {
+    if (indexes[1]) {
+      range.setStartAfter(children[indexes[1] - 1]);
+    }
+  } else {
+    range.setStart(children[indexes[0]], indexes[1]);
+  }
+
+  if (indexes[2] === -1) {
+    if (indexes[3]) {
+      range.setEndAfter(children[indexes[3] - 1]);
+    }
+  } else {
+    range.setEnd(children[indexes[2]], indexes[3]);
+  }
+
+  range.deleteContents(); // Range.createContextualFragment() would be useful here but is
+  // only relatively recently standardized and is not supported in
+  // some browsers (IE9, for one)
+
+  var el = document.createElement('div');
+  el.innerHTML = html;
+  var frag = document.createDocumentFragment();
+  var lastNode;
+
+  while (el.firstChild) {
+    lastNode = frag.appendChild(el.firstChild);
+  }
+
+  var firstChild = frag.firstChild;
+  range.insertNode(frag); // Preserve the selection
+
+  if (lastNode) {
+    var next = range.cloneRange();
+    next.setStartAfter(lastNode);
+
+    if (selectPastedContent) {
+      if (firstChild) {
+        next.setStartBefore(firstChild);
+      }
+    } else {
+      next.collapse(true);
+    }
+
+    sel.removeAllRanges();
+    sel.addRange(next);
+  }
+}
+
+function getValue(el) {
+  var values = [];
+
+  var _iterator = _createForOfIteratorHelper(el.childNodes),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var node = _step.value;
+
+      if (node.nodeName === 'SPAN') {
+        values.push("{{".concat(node['dataset']['key'], "}}"));
+      } else {
+        var _node$textContent, _node$textContent$tri;
+
+        values.push((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : (_node$textContent$tri = _node$textContent.trim) === null || _node$textContent$tri === void 0 ? void 0 : _node$textContent$tri.call(_node$textContent));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return values.join(' ').replace(/\s+/g, ' ').trim();
+}
+
+function renderHTML(exp, keyLabelMap) {
+  return exp.replace(VARIABLE_RE, function (_, i) {
+    var _createVariableTagHTM;
+
+    var key = i.trim();
+    return (_createVariableTagHTM = createVariableTagHTML(key, keyLabelMap)) !== null && _createVariableTagHTM !== void 0 ? _createVariableTagHTM : '';
+  });
+}
+
+function createOptionsValueLabelMap(options) {
+  var map = new Map();
+
+  var _iterator2 = _createForOfIteratorHelper(options),
+      _step2;
+
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var option = _step2.value;
+      map.set(option.value, [option.label]);
+
+      if (option.children) {
+        var _iterator3 = _createForOfIteratorHelper(createOptionsValueLabelMap(option.children)),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var _step3$value = _slicedToArray(_step3.value, 2),
+                value = _step3$value[0],
+                labels = _step3$value[1];
+
+            map.set("".concat(option.value, ".").concat(value), [option.label].concat(_toConsumableArray(labels)));
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+
+  return map;
+}
+
+function createVariableTagHTML(variable, keyLabelMap) {
+  var labels = keyLabelMap.get(variable);
+  return "<span class=\"ant-tag ant-tag-blue\" contentEditable=\"false\" data-key=\"".concat(variable, "\">").concat(labels === null || labels === void 0 ? void 0 : labels.join(' / '), "</span>");
+}
+
+function TextArea(props) {
+  var _ref2;
+
+  var _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value,
+      scope = props.scope,
+      onChange = props.onChange,
+      _props$multiline = props.multiline,
+      multiline = _props$multiline === void 0 ? true : _props$multiline,
+      button = props.button;
+  var compile = (0, _2.useCompile)();
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var inputRef = (0, _react.useRef)(null);
+  var options = compile((_ref2 = typeof scope === 'function' ? scope() : scope) !== null && _ref2 !== void 0 ? _ref2 : []);
+  var form = (0, _react2.useForm)();
+  var keyLabelMap = (0, _react.useMemo)(function () {
+    return createOptionsValueLabelMap(options);
+  }, [scope]);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      changed = _useState2[0],
+      setChanged = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(function () {
+    return renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap);
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      html = _useState4[0],
+      setHtml = _useState4[1]; // [startElementIndex, startOffset, endElementIndex, endOffset]
+
+
+  var _useState5 = (0, _react.useState)([-1, 0, -1, 0]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      range = _useState6[0],
+      setRange = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    if (changed) {
+      return;
+    }
+
+    setHtml(renderHTML(value !== null && value !== void 0 ? value : '', keyLabelMap));
+  }, [value]);
+  (0, _react.useEffect)(function () {
+    var current = inputRef.current;
+
+    if (!current || changed) {
+      return;
+    }
+
+    var nextRange = new Range();
+    var lastChild = current.lastChild;
+
+    if (lastChild) {
+      nextRange.setStartAfter(lastChild);
+      nextRange.setEndAfter(lastChild);
+      var nodes = Array.from(current.childNodes);
+      var startElementIndex = nextRange.startContainer === current ? -1 : nodes.indexOf(lastChild);
+      var endElementIndex = nextRange.startContainer === current ? -1 : nodes.indexOf(lastChild);
+      setRange([startElementIndex, nextRange.startOffset, endElementIndex, nextRange.endOffset]);
+    }
+  }, [html]);
+
+  function onInsert(keyPath) {
+    var variable = keyPath.filter(function (key) {
+      return Boolean(key.trim());
+    });
+    var current = inputRef.current;
+
+    if (!current || !variable) {
+      return;
+    }
+
+    current.focus();
+    pasteHtml(current, createVariableTagHTML(variable.join('.'), keyLabelMap), {
+      range: range
+    });
+    setChanged(true);
+    onChange(getValue(current));
+  }
+
+  function onInput(_ref3) {
+    var currentTarget = _ref3.currentTarget;
+    setChanged(true);
+    onChange(getValue(currentTarget));
+  }
+
+  function onBlur(_ref4) {
+    var _window$getSelection2, _window2;
+
+    var currentTarget = _ref4.currentTarget;
+    var sel = (_window$getSelection2 = (_window2 = window).getSelection) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.call(_window2);
+
+    if (!(sel === null || sel === void 0 ? void 0 : sel.getRangeAt) || !sel.rangeCount) {
+      return;
+    }
+
+    var r = sel.getRangeAt(0);
+    var nodes = Array.from(currentTarget.childNodes);
+    var startElementIndex = nodes.indexOf(r.startContainer);
+    var endElementIndex = nodes.indexOf(r.endContainer);
+    setRange([startElementIndex, r.startOffset, endElementIndex, r.endOffset]);
+  }
+
+  var disabled = props.disabled || form.disabled;
+  return /*#__PURE__*/_react.default.createElement(_antd.Input.Group, {
+    compact: true,
+    className: (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        &.ant-input-group.ant-input-group-compact {\n          display: flex;\n          .ant-input {\n            flex-grow: 1;\n            min-width: 200px;\n          }\n          .ant-input-disabled {\n            .ant-tag {\n              color: #bfbfbf;\n              border-color: #d9d9d9;\n            }\n          }\n        }\n      "])))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onInput: onInput,
+    onBlur: onBlur,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+    },
+    className: (0, _css.cx)('ant-input', {
+      'ant-input-disabled': disabled
+    }, (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            overflow: auto;\n            white-space: ", ";\n\n            .ant-tag {\n              display: inline;\n              line-height: 19px;\n              margin: 0 0.5em;\n              padding: 2px 7px;\n              border-radius: 10px;\n            }\n          "])), multiline ? 'normal' : 'nowrap')),
+    ref: inputRef,
+    contentEditable: !disabled,
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: t('Use variable')
+  }, /*#__PURE__*/_react.default.createElement(_antd.Cascader, {
+    value: [],
+    options: options,
+    onChange: onInsert
+  }, button !== null && button !== void 0 ? button : /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    className: (0, _css.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                font-style: italic;\n                font-family: 'New York', 'Times New Roman', Times, serif;\n              "])))
+  }, "x"))));
+}

package/lib/schema-component/antd/variable/Variable.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function Variable(): any;
+export declare namespace Variable {
+    var Input: import("react").ForwardRefExoticComponent<Pick<Partial<any>, string | number | symbol> & import("react").RefAttributes<unknown>>;
+    var TextArea: import("react").ForwardRefExoticComponent<Pick<Partial<any>, string | number | symbol> & import("react").RefAttributes<unknown>>;
+    var JSON: import("react").ForwardRefExoticComponent<Pick<Partial<any>, string | number | symbol> & import("react").RefAttributes<unknown>>;
+}
+export default Variable;

package/lib/schema-component/antd/variable/Variable.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Variable = Variable;
+exports.default = void 0;
+
+var _react = require("@formily/react");
+
+var _Input = require("./Input");
+
+var _TextArea = require("./TextArea");
+
+var _JSONInput = require("./JSONInput");
+
+function Variable() {
+  return null;
+}
+
+Variable.Input = (0, _react.connect)(_Input.Input);
+Variable.TextArea = (0, _react.connect)(_TextArea.TextArea);
+Variable.JSON = (0, _react.connect)(_JSONInput.JSONInput);
+var _default = Variable;
+exports.default = _default;

package/lib/schema-component/antd/variable/index.d.ts

@@ -0,0 +1 @@
+export * from './Variable';

package/lib/schema-component/antd/variable/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Variable = require("./Variable");
+
+Object.keys(_Variable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Variable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Variable[key];
+    }
+  });
+});

package/lib/schema-component/common/sortable-item/SortableItem.js

@@ -13,7 +13,8 @@ var _react = require("@formily/react");
 
 var _react2 = _interopRequireWildcard(require("react"));
 
-var _excluded = ["component", "style", "children", "openMode"];
+var _excluded = ["component", "style", "children", "openMode"],
+    _excluded2 = ["schema", "id"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -82,16 +83,45 @@ var Sortable = function Sortable(props) {
 };
 
 exports.Sortable = Sortable;
-var SortableItem = (0, _react.observer)(function (props) {
+
+var useSortableItemProps = function useSortableItemProps(props) {
+  var id = useSortableItemId(props);
+
+  if (props.schema) {
+    return _objectSpread(_objectSpread({}, props), {}, {
+      id: id
+    });
+  }
+
+  var schema = (0, _react.useFieldSchema)();
+  return _objectSpread(_objectSpread({}, props), {}, {
+    id: id,
+    schema: schema
+  });
+};
+
+var useSortableItemId = function useSortableItemId(props) {
+  if (props.id) {
+    return props.id;
+  }
+
   var field = (0, _react.useField)();
-  var fieldSchema = (0, _react.useFieldSchema)();
+  return field.address.toString();
+};
+
+var SortableItem = (0, _react.observer)(function (props) {
+  var _useSortableItemProps = useSortableItemProps(props),
+      schema = _useSortableItemProps.schema,
+      id = _useSortableItemProps.id,
+      others = _objectWithoutProperties(_useSortableItemProps, _excluded2);
+
   return /*#__PURE__*/_react2.default.createElement(SortableProvider, {
-    id: field.address.toString(),
+    id: id,
     data: {
       insertAdjacent: 'afterEnd',
-      schema: fieldSchema
+      schema: schema
     }
-  }, /*#__PURE__*/_react2.default.createElement(Sortable, _objectSpread({}, props), props.children));
+  }, /*#__PURE__*/_react2.default.createElement(Sortable, _objectSpread({}, others), props.children));
 });
 exports.SortableItem = SortableItem;