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

package/es/schema-component/antd/rich-text/RichText.js

@@ -19,12 +19,14 @@ export var RichText = connect(function (props) {
   };
   var formats = ['header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image'];
   var value = props.value,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      disabled = props.disabled;
   return /*#__PURE__*/React.createElement(ReactQuill, {
     modules: modules,
     formats: formats,
     value: typeof value === 'string' ? value : '',
-    onChange: onChange
+    onChange: onChange,
+    readOnly: disabled
   });
 }, mapReadPretty(function (props) {
   return /*#__PURE__*/React.createElement(InputReadPretty.Html, _objectSpread({}, props));

package/es/schema-component/antd/select/Select.js

@@ -1,5 +1,5 @@
 var _excluded = ["value", "options", "onChange", "fieldNames", "mode"],
-    _excluded2 = ["objectValue"];
+    _excluded2 = ["objectValue", "value"];
 
 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; }
 
@@ -99,12 +99,22 @@ var filterOption = function filterOption(input, option) {
 
 var InternalSelect = connect(function (props) {
   var objectValue = props.objectValue,
+      value = props.value,
       others = _objectWithoutProperties(props, _excluded2);
 
   var mode = props.mode || props.multiple ? 'multiple' : undefined;
 
+  var toValue = function toValue(v) {
+    if (['multiple', 'tags'].includes(mode)) {
+      return v || [];
+    }
+
+    return v;
+  };
+
   if (objectValue) {
     return /*#__PURE__*/React.createElement(ObjectSelect, _objectSpread(_objectSpread({}, others), {}, {
+      value: toValue(value),
       mode: mode
     }));
   }
@@ -112,7 +122,8 @@ var InternalSelect = connect(function (props) {
   return /*#__PURE__*/React.createElement(AntdSelect, _objectSpread(_objectSpread({
     showSearch: true,
     filterOption: filterOption,
-    allowClear: true
+    allowClear: true,
+    value: toValue(value)
   }, others), {}, {
     onChange: function onChange(changed) {
       var _props$onChange;
@@ -122,8 +133,7 @@ var InternalSelect = connect(function (props) {
     mode: mode
   }));
 }, mapProps({
-  dataSource: 'options',
-  loading: true
+  dataSource: 'options'
 }, function (props, field) {
   return _objectSpread(_objectSpread({}, props), {}, {
     fieldNames: _objectSpread(_objectSpread({}, defaultFieldNames), props.fieldNames),

package/es/schema-component/antd/table/Table.Array.js

@@ -32,10 +32,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import { MenuOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
-import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
+import { observer, RecursionField, useField, useFieldSchema, SchemaExpressionScopeContext } from '@formily/react';
 import { Table } from 'antd';
 import { default as classNames, default as cls } from 'classnames';
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import ReactDragListView from 'react-drag-listview';
 import { DndContext } from '../..';
 import { RecordIndexProvider, RecordProvider, useRequest, useSchemaInitializer } from '../../../';
@@ -46,6 +46,11 @@ var isColumnComponent = function isColumnComponent(schema) {
   return ((_schema$xComponent = schema['x-component']) === null || _schema$xComponent === void 0 ? void 0 : _schema$xComponent.endsWith('.Column')) > -1;
 };
 
+var useScope = function useScope(key) {
+  var scope = useContext(SchemaExpressionScopeContext);
+  return scope[key] !== false;
+};
+
 var useTableColumns = function useTableColumns() {
   var start = Date.now();
   var field = useField();
@@ -56,9 +61,11 @@ var useTableColumns = function useTableColumns() {
       render = _useSchemaInitializer.render;
 
   var columns = schema.reduceProperties(function (buf, s) {
-    if (isColumnComponent(s)) {
+    if (isColumnComponent(s) && useScope(s['x-visible'])) {
       return buf.concat([s]);
     }
+
+    return buf;
   }, []).map(function (s) {
     return {
       title: /*#__PURE__*/React.createElement(RecursionField, {

package/es/schema-component/antd/table-v2/Table.Column.Designer.js

@@ -37,7 +37,7 @@ var useLabelFields = function useLabelFields(collectionName) {
 };
 
 export var TableColumnDesigner = function TableColumnDesigner(props) {
-  var _fieldSchema$xCompon, _uiSchema$xComponent, _collectionField$uiSc, _columnSchema$xCompo;
+  var _fieldSchema$xCompon, _uiSchema$xComponent, _collectionField$targ, _collectionField$uiSc, _columnSchema$xCompo;
 
   var uiSchema = props.uiSchema,
       fieldSchema = props.fieldSchema,
@@ -57,7 +57,7 @@ export var TableColumnDesigner = function TableColumnDesigner(props) {
       dn = _useDesignable.dn;
 
   var fieldNames = (fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xCompon = fieldSchema['x-component-props']) === null || _fieldSchema$xCompon === void 0 ? void 0 : _fieldSchema$xCompon['fieldNames']) || (uiSchema === null || uiSchema === void 0 ? void 0 : (_uiSchema$xComponent = uiSchema['x-component-props']) === null || _uiSchema$xComponent === void 0 ? void 0 : _uiSchema$xComponent['fieldNames']);
-  var options = useLabelFields(collectionField === null || collectionField === void 0 ? void 0 : collectionField.target);
+  var options = useLabelFields((_collectionField$targ = collectionField === null || collectionField === void 0 ? void 0 : collectionField.target) !== null && _collectionField$targ !== void 0 ? _collectionField$targ : collectionField === null || collectionField === void 0 ? void 0 : collectionField.targetCollection);
   var intefaceCfg = getInterface(collectionField === null || collectionField === void 0 ? void 0 : collectionField.interface);
   return /*#__PURE__*/React.createElement(GeneralSchemaDesigner, {
     disableInitializer: true

package/es/schema-component/antd/table-v2/TableBlockDesigner.js

@@ -29,7 +29,7 @@ import { useSchemaTemplate } from '../../../schema-templates';
 import { useDesignable } from '../../hooks';
 import { useFixedBlockDesignerSetting } from '../page';
 export var TableBlockDesigner = function TableBlockDesigner() {
-  var _fieldSchema$xDecora, _fieldSchema$xDecora$, _fieldSchema$xDecora2, _fieldSchema$xDecora3, _fieldSchema$xDecora4, _field$decoratorProps, _field$decoratorProps2;
+  var _fieldSchema$xDecora, _fieldSchema$xDecora$, _fieldSchema$xDecora2, _fieldSchema$xDecora3, _fieldSchema$xDecora4, _fieldSchema$xDecora5, _field$decoratorProps, _field$decoratorProps2;
 
   var _useCollection = useCollection(),
       name = _useCollection.name,
@@ -54,6 +54,7 @@ export var TableBlockDesigner = function TableBlockDesigner() {
   var defaultFilter = (fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora === void 0 ? void 0 : (_fieldSchema$xDecora$ = _fieldSchema$xDecora.params) === null || _fieldSchema$xDecora$ === void 0 ? void 0 : _fieldSchema$xDecora$.filter) || {};
   var defaultSort = (fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora2 = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora2 === void 0 ? void 0 : (_fieldSchema$xDecora3 = _fieldSchema$xDecora2.params) === null || _fieldSchema$xDecora3 === void 0 ? void 0 : _fieldSchema$xDecora3.sort) || [];
   var defaultResource = fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora4 = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora4 === void 0 ? void 0 : _fieldSchema$xDecora4.resource;
+  var supportTemplate = !(fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora5 = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora5 === void 0 ? void 0 : _fieldSchema$xDecora5.disableTemplate);
   var sort = defaultSort === null || defaultSort === void 0 ? void 0 : defaultSort.map(function (item) {
     return item.startsWith('-') ? {
       field: item.substring(1),
@@ -241,7 +242,7 @@ export var TableBlockDesigner = function TableBlockDesigner() {
         schema: (_schema4 = {}, _defineProperty(_schema4, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema4, 'x-decorator-props', fieldSchema['x-decorator-props']), _schema4)
       });
     }
-  }), /*#__PURE__*/React.createElement(SchemaSettings.Divider, null), /*#__PURE__*/React.createElement(SchemaSettings.Template, {
+  }), supportTemplate && /*#__PURE__*/React.createElement(SchemaSettings.Divider, null), supportTemplate && /*#__PURE__*/React.createElement(SchemaSettings.Template, {
     componentName: 'Table',
     collectionName: name,
     resourceName: defaultResource

package/es/schema-component/antd/tabs/Tabs.Designer.js

@@ -18,6 +18,7 @@ export var TabsDesigner = function TabsDesigner() {
   return /*#__PURE__*/React.createElement(GeneralSchemaDesigner, {
     disableInitializer: true
   }, /*#__PURE__*/React.createElement(SchemaSettings.ModalItem, {
+    key: "edit",
     title: t('Edit'),
     schema: {
       type: 'object',

package/es/schema-component/antd/tabs/Tabs.js

@@ -19,6 +19,7 @@ export var Tabs = observer(function (props) {
       render = _useSchemaInitializer.render;
 
   return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(AntdTabs, {
+    style: props.style,
     tabBarExtraContent: {
       right: render()
     }

package/es/schema-component/antd/time-picker/TimePicker.js

@@ -10,7 +10,7 @@ import { TimePicker as AntdTimePicker } from 'antd';
 import { ReadPretty } from './ReadPretty';
 
 var mapTimeFormat = function mapTimeFormat() {
-  return function (props) {
+  return function (props, field) {
     var format = props['format'] || 'HH:mm:ss';
     var _onChange = props.onChange;
     return _objectSpread(_objectSpread({}, props), {}, {

package/es/schema-component/antd/variable/Input.d.ts

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

package/es/schema-component/antd/variable/Input.js

@@ -0,0 +1,244 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 _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 _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 _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; }
+
+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); }
+
+import React from 'react';
+import { useForm } from '@formily/react';
+import { Cascader, Input as AntInput, Button, Tag, InputNumber, Select, DatePicker } from 'antd';
+import { CloseCircleFilled } from '@ant-design/icons';
+import { cx, css } from '@emotion/css';
+import { useTranslation } from 'react-i18next';
+import moment from 'moment';
+import { useCompile } from '../..';
+var JT_VALUE_RE = /^\s*{{\s*([^{}]+)\s*}}\s*$/;
+
+function parseValue(value) {
+  if (value == null) {
+    return 'null';
+  }
+
+  var type = _typeof(value);
+
+  if (type === 'string') {
+    var matched = value.match(JT_VALUE_RE);
+
+    if (matched) {
+      return matched[1].split('.');
+    } // const ts = Date.parse(value);
+    // if (value.match(/^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d{0,3})Z$/) && !Number.isNaN(Date.parse(value))) {
+    //   return {
+    //     type: 'date',
+    //   };
+    // }
+
+  }
+
+  return type === 'object' && value instanceof Date ? 'date' : type;
+}
+
+var ConstantTypes = {
+  string: {
+    label: "{{t(\"String\")}}",
+    value: 'string',
+    component: function component(_ref) {
+      var _onChange = _ref.onChange,
+          value = _ref.value;
+      return /*#__PURE__*/React.createElement(AntInput, {
+        value: value,
+        onChange: function onChange(ev) {
+          return _onChange(ev.target.value);
+        }
+      });
+    },
+    default: ''
+  },
+  number: {
+    label: '{{t("Number")}}',
+    value: 'number',
+    component: function component(_ref2) {
+      var onChange = _ref2.onChange,
+          value = _ref2.value;
+      return /*#__PURE__*/React.createElement(InputNumber, {
+        value: value,
+        onChange: onChange
+      });
+    },
+    default: 0
+  },
+  boolean: {
+    label: "{{t(\"Boolean\")}}",
+    value: 'boolean',
+    component: function component(_ref3) {
+      var onChange = _ref3.onChange,
+          value = _ref3.value;
+
+      var _useTranslation = useTranslation(),
+          t = _useTranslation.t;
+
+      return /*#__PURE__*/React.createElement(Select, {
+        value: value,
+        onChange: onChange,
+        placeholder: t('Select'),
+        options: [{
+          value: true,
+          label: t('True')
+        }, {
+          value: false,
+          label: t('False')
+        }]
+      });
+    },
+    default: false
+  },
+  date: {
+    label: '{{t("Date")}}',
+    value: 'date',
+    component: function component(_ref4) {
+      var _onChange2 = _ref4.onChange,
+          value = _ref4.value;
+      return /*#__PURE__*/React.createElement(DatePicker, {
+        value: moment(value),
+        onChange: function onChange(d) {
+          return d ? _onChange2(d.toDate()) : null;
+        },
+        allowClear: false,
+        showTime: true
+      });
+    },
+    default: function () {
+      var now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+    }()
+  },
+  null: {
+    label: "{{t(\"Null\")}}",
+    value: 'null',
+    component: function component() {
+      var _useTranslation2 = useTranslation(),
+          t = _useTranslation2.t;
+
+      return /*#__PURE__*/React.createElement(AntInput, {
+        readOnly: true,
+        placeholder: t('Null'),
+        className: "null-value"
+      });
+    },
+    default: null
+  }
+};
+export function Input(props) {
+  var _ConstantTypes$type;
+
+  var _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value,
+      scope = props.scope,
+      onChange = props.onChange,
+      children = props.children,
+      button = props.button;
+  var parsed = parseValue(value);
+  var isConstant = typeof parsed === 'string';
+  var type = isConstant ? parsed : '';
+  var variable = isConstant ? null : parsed;
+  var ConstantComponent = (_ConstantTypes$type = ConstantTypes[type]) === null || _ConstantTypes$type === void 0 ? void 0 : _ConstantTypes$type.component;
+  var constantOptions = Object.values(ConstantTypes);
+  var compile = useCompile();
+
+  var _useTranslation3 = useTranslation(),
+      t = _useTranslation3.t;
+
+  var options = compile([{
+    value: '',
+    label: t('Constant'),
+    children: children ? null : constantOptions
+  }].concat(_toConsumableArray(typeof scope === 'function' ? scope() : scope !== null && scope !== void 0 ? scope : [])));
+  var form = useForm();
+
+  function onSwitch(next) {
+    if (next[0] === '') {
+      if (next[1]) {
+        if (next[1] !== type) {
+          var _ConstantTypes$next$, _ConstantTypes$next$2;
+
+          onChange((_ConstantTypes$next$ = (_ConstantTypes$next$2 = ConstantTypes[next[1]]) === null || _ConstantTypes$next$2 === void 0 ? void 0 : _ConstantTypes$next$2.default) !== null && _ConstantTypes$next$ !== void 0 ? _ConstantTypes$next$ : null);
+        }
+      } else {
+        if (variable) {
+          onChange(null);
+        }
+      }
+
+      return;
+    }
+
+    onChange("{{".concat(next.join('.'), "}}"));
+  }
+
+  var variableText = variable === null || variable === void 0 ? void 0 : variable.reduce(function (opts, key, i) {
+    var _ref5;
+
+    var option = (_ref5 = i ? opts[i - 1].children : options) === null || _ref5 === void 0 ? void 0 : _ref5.find(function (item) {
+      return item.value === key;
+    });
+    return option ? opts.concat(option) : opts;
+  }, []).map(function (item) {
+    return item.label;
+  }).join(' / ');
+  var disabled = props.disabled || form.disabled;
+  return /*#__PURE__*/React.createElement(AntInput.Group, {
+    compact: true,
+    className: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        width: auto;\n        display: flex !important;\n        .ant-input-disabled {\n          .ant-tag {\n            color: #bfbfbf;\n            border-color: #d9d9d9;\n          }\n        }\n        .ant-input.null-value {\n          width: 4em;\n          min-width: 4em;\n        }\n      "])))
+  }, variable ? /*#__PURE__*/React.createElement("div", {
+    className: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            position: relative;\n            line-height: 0;\n\n            &:hover {\n              .ant-select-clear {\n                opacity: 0.8;\n              }\n            }\n\n            .ant-input {\n              overflow: auto;\n              white-space: nowrap;\n              ", "\n\n              .ant-tag {\n                display: inline;\n                line-height: 19px;\n                margin: 0;\n                padding: 2px 7px;\n                border-radius: 10px;\n              }\n            }\n          "])), disabled ? '' : 'padding-right: 28px;')
+  }, /*#__PURE__*/React.createElement("div", {
+    onInput: function onInput(e) {
+      return e.preventDefault();
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key !== 'Backspace') {
+        e.preventDefault();
+        return;
+      }
+
+      onChange(null);
+    },
+    className: cx('ant-input', {
+      'ant-input-disabled': disabled
+    }),
+    contentEditable: !disabled,
+    suppressContentEditableWarning: true
+  }, /*#__PURE__*/React.createElement(Tag, {
+    contentEditable: false,
+    color: "blue"
+  }, variableText)), !disabled ? /*#__PURE__*/React.createElement("span", {
+    className: cx('ant-select-clear', css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  user-select: 'none';\n                "])))),
+    unselectable: "on",
+    "aria-hidden": true,
+    onClick: function onClick() {
+      return onChange(null);
+    }
+  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : null) : children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(ConstantComponent, {
+    value: value,
+    onChange: onChange
+  }), options.length > 1 ? /*#__PURE__*/React.createElement(Cascader, {
+    value: variable !== null && variable !== void 0 ? variable : [''].concat(_toConsumableArray(children ? [] : [type])),
+    options: options,
+    onChange: onSwitch
+  }, button !== null && button !== void 0 ? button : /*#__PURE__*/React.createElement(Button, {
+    type: variable ? 'primary' : 'default',
+    className: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                font-style: italic;\n                font-family: 'New York', 'Times New Roman', Times, serif;\n              "])))
+  }, "x")) : null);
+}

package/es/schema-component/antd/variable/JSONInput.d.ts

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

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

@@ -0,0 +1,82 @@
+var _templateObject, _templateObject2, _templateObject3;
+
+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) } })); }
+
+import React, { useRef } from 'react';
+import { Button, Cascader } from 'antd';
+import { css } from "@emotion/css";
+import { Input } from "../input";
+import { useTranslation } from 'react-i18next'; // 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
+  }));
+}
+
+export function JSONInput(props) {
+  var inputRef = useRef(null);
+  var value = props.value,
+      _props$space = props.space,
+      space = _props$space === void 0 ? 2 : _props$space,
+      scope = props.scope;
+
+  var _useTranslation = 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.createElement("div", {
+    className: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n      .ant-input{\n        width: 100%;\n      }\n    "])))
+  }, /*#__PURE__*/React.createElement(Input.JSON, _objectSpread(_objectSpread({}, props), {}, {
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement(Button.Group, {
+    className: 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.createElement(Button, {
+    onClick: onFormat
+  }, t('Prettify')), /*#__PURE__*/React.createElement(Cascader, {
+    value: [],
+    options: options,
+    onChange: onInsert
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              font-style: italic;\n              font-family: \"New York\", \"Times New Roman\", Times, serif;\n            "])))
+  }, "x"))));
+}

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

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