@nocobase/client 0.7.6-alpha.2 → 0.8.0-alpha.4

package/es/schema-component/antd/action/Action.Modal.js

@@ -1,6 +1,6 @@
 var _templateObject, _templateObject2;
 
-var _excluded = ["footerNodeName"];
+var _excluded = ["footerNodeName", "width"];
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
@@ -24,6 +24,8 @@ import { useActionContext } from '.';
 export var ActionModal = observer(function (props) {
   var _props$footerNodeName = props.footerNodeName,
       footerNodeName = _props$footerNodeName === void 0 ? 'Action.Modal.Footer' : _props$footerNodeName,
+      _props$width = props.width,
+      width = _props$width === void 0 ? '80%' : _props$width,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useActionContext = useActionContext(),
@@ -44,7 +46,7 @@ export var ActionModal = observer(function (props) {
       e.stopPropagation();
     }
   }, /*#__PURE__*/React.createElement(Modal, _objectSpread(_objectSpread({
-    width: '80%',
+    width: width,
     title: field.title
   }, others), {}, {
     destroyOnClose: true,

package/es/schema-component/antd/action/Action.js

@@ -1,4 +1,4 @@
-var _excluded = ["popover", "confirm", "containerRefKey", "component", "useAction", "className", "disabled", "icon", "title"];
+var _excluded = ["popover", "confirm", "containerRefKey", "component", "useAction", "className", "icon", "title"];
 
 var _templateObject, _templateObject2;
 
@@ -55,7 +55,6 @@ export var Action = observer(function (props) {
       _props$useAction = props.useAction,
       useAction = _props$useAction === void 0 ? useA : _props$useAction,
       className = props.className,
-      disabled = props.disabled,
       icon = props.icon,
       title = props.title,
       others = _objectWithoutProperties(props, _excluded);
@@ -125,7 +124,8 @@ export var Action = observer(function (props) {
       formValueChanged: formValueChanged,
       setFormValueChanged: setFormValueChanged,
       openMode: openMode,
-      containerRefKey: containerRefKey
+      containerRefKey: containerRefKey,
+      fieldSchema: fieldSchema
     }
   }, popover && /*#__PURE__*/React.createElement(RecursionField, {
     basePath: field.address,

package/es/schema-component/antd/action/context.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Schema } from '@formily/react';
 export declare const ActionContext: import("react").Context<ActionContextProps>;
 export interface ActionContextProps {
     button?: any;
@@ -8,4 +9,5 @@ export interface ActionContextProps {
     containerRefKey?: string;
     formValueChanged?: boolean;
     setFormValueChanged?: (v: boolean) => void;
+    fieldSchema?: Schema;
 }

package/es/schema-component/antd/action/hooks.d.ts

@@ -9,6 +9,7 @@ export declare const useActionContext: () => {
     containerRefKey?: string;
     formValueChanged?: boolean;
     setFormValueChanged?: (v: boolean) => void;
+    fieldSchema?: import("@formily/react").Schema<any, any, any, any, any, any, any, any, any>;
 };
 export declare const useCloseAction: () => {
     run(): Promise<void>;

package/es/schema-component/antd/calendar/Calendar.Designer.js

@@ -86,12 +86,25 @@ export var CalendarDesigner = function CalendarDesigner() {
       });
       dn.refresh();
     }
+  }), /*#__PURE__*/React.createElement(SchemaSettings.SwitchItem, {
+    title: t('Show lunar'),
+    checked: field.decoratorProps.showLunar,
+    onChange: function onChange(v) {
+      var _schema2;
+
+      field.decoratorProps.showLunar = v;
+      fieldSchema['x-decorator-props']['showLunar'] = v;
+      dn.emit('patch', {
+        schema: (_schema2 = {}, _defineProperty(_schema2, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema2, 'x-decorator-props', field.decoratorProps), _schema2)
+      });
+      dn.refresh();
+    }
   }), /*#__PURE__*/React.createElement(SchemaSettings.SelectItem, {
     title: t('Start date field'),
     value: fieldNames.start,
     options: useOptions('date'),
     onChange: function onChange(start) {
-      var _schema2;
+      var _schema3;
 
       var fieldNames = field.decoratorProps.fieldNames || {};
       fieldNames['start'] = start;
@@ -99,7 +112,7 @@ export var CalendarDesigner = function CalendarDesigner() {
       fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
       service.refresh();
       dn.emit('patch', {
-        schema: (_schema2 = {}, _defineProperty(_schema2, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema2, 'x-decorator-props', field.decoratorProps), _schema2)
+        schema: (_schema3 = {}, _defineProperty(_schema3, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema3, 'x-decorator-props', field.decoratorProps), _schema3)
       });
       dn.refresh();
     }
@@ -108,7 +121,7 @@ export var CalendarDesigner = function CalendarDesigner() {
     value: fieldNames.end,
     options: useOptions('date'),
     onChange: function onChange(end) {
-      var _schema3;
+      var _schema4;
 
       var fieldNames = field.decoratorProps.fieldNames || {};
       fieldNames['end'] = end;
@@ -116,7 +129,7 @@ export var CalendarDesigner = function CalendarDesigner() {
       fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
       service.refresh();
       dn.emit('patch', {
-        schema: (_schema3 = {}, _defineProperty(_schema3, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema3, 'x-decorator-props', field.decoratorProps), _schema3)
+        schema: (_schema4 = {}, _defineProperty(_schema4, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema4, 'x-decorator-props', field.decoratorProps), _schema4)
       });
       dn.refresh();
     }
@@ -138,7 +151,7 @@ export var CalendarDesigner = function CalendarDesigner() {
       // icon: field.componentProps.icon,
     },
     onSubmit: function onSubmit(_ref) {
-      var _service$params, _schema4;
+      var _service$params, _schema5;
 
       var filter = _ref.filter;
       var params = field.decoratorProps.params || {};
@@ -149,7 +162,7 @@ export var CalendarDesigner = function CalendarDesigner() {
         filter: filter
       }));
       dn.emit('patch', {
-        schema: (_schema4 = {}, _defineProperty(_schema4, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema4, 'x-decorator-props', field.decoratorProps), _schema4)
+        schema: (_schema5 = {}, _defineProperty(_schema5, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema5, 'x-decorator-props', field.decoratorProps), _schema5)
       });
     }
   }), /*#__PURE__*/React.createElement(SchemaSettings.Divider, null), /*#__PURE__*/React.createElement(SchemaSettings.Template, {

package/es/schema-component/antd/calendar/Calendar.js

@@ -29,6 +29,7 @@ import { RecordProvider } from '../../../';
 import { i18n } from '../../../i18n';
 import { useProps } from '../../hooks/useProps';
 import { ActionContext } from '../action';
+import Header from './components/Header';
 import { CalendarToolbarContext } from './context';
 import './style.less';
 var localizer = momentLocalizer(moment);
@@ -122,7 +123,8 @@ var CalendarRecordViewer = function CalendarRecordViewer(props) {
 export var Calendar = observer(function (props) {
   var _useProps = useProps(props),
       dataSource = _useProps.dataSource,
-      fieldNames = _useProps.fieldNames;
+      fieldNames = _useProps.fieldNames,
+      showLunar = _useProps.showLunar;
 
   var events = useEvents(dataSource, fieldNames);
 
@@ -187,7 +189,26 @@ export var Calendar = observer(function (props) {
     },
     defaultDate: new Date(),
     components: {
-      toolbar: Toolbar
+      toolbar: function toolbar(props) {
+        return /*#__PURE__*/React.createElement(Toolbar, _objectSpread(_objectSpread({}, props), {}, {
+          showLunar: showLunar
+        }));
+      },
+      week: {
+        header: function header(props) {
+          return /*#__PURE__*/React.createElement(Header, _objectSpread(_objectSpread({}, props), {}, {
+            type: "week",
+            showLunar: showLunar
+          }));
+        }
+      },
+      month: {
+        dateHeader: function dateHeader(props) {
+          return /*#__PURE__*/React.createElement(Header, _objectSpread(_objectSpread({}, props), {}, {
+            showLunar: showLunar
+          }));
+        }
+      }
     },
     localizer: localizer
   }));

package/es/schema-component/antd/calendar/Title.js

@@ -1,19 +1,34 @@
 import { observer } from '@formily/react';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
+import { getLunarDay } from './utils';
 export var Title = observer(function () {
   var _useDesignable = useDesignable(),
       DesignableBar = _useDesignable.DesignableBar;
 
   var _useContext = useContext(CalendarToolbarContext),
-      label = _useContext.label;
+      date = _useContext.date,
+      view = _useContext.view,
+      label = _useContext.label,
+      showLunar = _useContext.showLunar;
 
+  var lunarElement = useMemo(function () {
+    if (!showLunar || view !== 'day') {
+      return;
+    }
+
+    return /*#__PURE__*/React.createElement("span", null, getLunarDay(date));
+  }, [view, date, showLunar]);
   return /*#__PURE__*/React.createElement("div", {
     className: "ant-btn-group",
     style: {
       fontSize: '1.75em',
       fontWeight: 300
     }
-  }, label, /*#__PURE__*/React.createElement(DesignableBar, null));
+  }, /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: '4px'
+    }
+  }, lunarElement), /*#__PURE__*/React.createElement(DesignableBar, null));
 });

package/es/schema-component/antd/calendar/components/Header.d.ts

@@ -0,0 +1,10 @@
+declare const Header: ({ date, label, drilldownView, onDrillDown, showLunar, type, localizer }: {
+    date: any;
+    label: any;
+    drilldownView: any;
+    onDrillDown: any;
+    showLunar?: boolean;
+    type: any;
+    localizer: any;
+}) => JSX.Element;
+export default Header;

package/es/schema-component/antd/calendar/components/Header.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useMemo } from 'react';
+import { getLunarDay } from '../utils';
+
+var Header = function Header(_ref) {
+  var date = _ref.date,
+      label = _ref.label,
+      drilldownView = _ref.drilldownView,
+      onDrillDown = _ref.onDrillDown,
+      _ref$showLunar = _ref.showLunar,
+      showLunar = _ref$showLunar === void 0 ? false : _ref$showLunar,
+      type = _ref.type,
+      localizer = _ref.localizer;
+  var lunarElement = useMemo(function () {
+    if (!showLunar) {
+      return;
+    }
+
+    return /*#__PURE__*/React.createElement("span", {
+      className: "rbc-date-lunar"
+    }, getLunarDay(date));
+  }, [date, showLunar]);
+  var child = useMemo(function () {
+    if (type === 'week') {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, localizer.format(date, 'ddd')), /*#__PURE__*/React.createElement("div", {
+        className: "rbc-date-wrap"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "rbc-date-solar"
+      }, localizer.format(date, 'DD')), lunarElement));
+    } else {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "rbc-date-solar"
+      }, label), lunarElement);
+    }
+  }, [type]);
+  var Wrapper = drilldownView ? 'a' : React.Fragment;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    onClick: onDrillDown,
+    role: "cell"
+  }, child);
+};
+
+export default Header;

package/es/schema-component/antd/calendar/style.less

@@ -74,7 +74,6 @@ button.rbc-input::-moz-focus-inner {
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 4px 12px;
-  text-align: right;
   vertical-align: middle;
   // font-weight: 500;
   min-height: 32px;
@@ -338,24 +337,39 @@ button.rbc-input::-moz-focus-inner {
   // cursor: pointer;
   flex: 1 1 0;
   min-width: 0;
-  padding-right: 12px;
+  padding-left: 12px;
   padding-top: 4px;
-  text-align: right;
 }
-.rbc-date-cell.rbc-now a {
+.rbc-date-cell.rbc-now span {
   // font-weight: bold;
   color: #1890ff;
 }
-.rbc-date-cell > a,
-.rbc-date-cell > a:active,
-.rbc-date-cell > a:visited {
+.rbc-date-cell a,
+.rbc-date-cell a:active,
+.rbc-date-cell a:visited {
   color: inherit;
   text-decoration: none;
 }
-.rbc-date-cell > a:hover {
+.rbc-date-cell a:hover {
   color: #1890ff;
 }
 
+.rbc-date-cell .rbc-date-solar {
+  font-weight: 500;
+}
+
+.rbc-date-cell .rbc-date-lunar {
+  padding-left: 12px;
+}
+
+.rbc-date-cell:not(.rbc-off-range) .rbc-date-lunar {
+  color: #aaa
+}
+
+.rbc-date-cell .rbc-date-lunar:hover {
+  color: inherit
+}
+
 .rbc-row-bg {
   display: flex;
   flex-direction: row;
@@ -553,6 +567,36 @@ button.rbc-input::-moz-focus-inner {
 .rbc-time-header-cell {
   min-height: 32px !important;
 }
+.rbc-time-header-cell .rbc-header {
+  display: flex;
+}
+.rbc-time-header-cell .rbc-header.rbc-today {
+  border-color: #1890ff;
+  background-color: #e6f7ff;
+  color: #1890ff
+}
+
+.rbc-time-header-cell .rbc-header a {
+  display: flex;
+  flex-direction: column;
+}
+
+.rbc-time-header-cell .rbc-date-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.rbc-time-header-cell .rbc-date-solar {
+  font-size: 18px;
+}
+.rbc-time-header-cell .rbc-date-lunar {
+  margin-left: 4px;
+}
+
+.rbc-time-header-cell .rbc-header:not(.rbc-today) .rbc-date-lunar {
+  color: #aaa;
+}
+
 .rbc-calendar.view-week {
   .rbc-time-header-cell {
     margin-top: -32px;
@@ -695,7 +739,7 @@ button.rbc-input::-moz-focus-inner {
 
 .rbc-time-header-content {
   flex: 1;
-  display: flex;
+  // display: flex;
   min-width: 0;
   flex-direction: column;
   // border-left: 1px solid #f0f0f0;

package/es/schema-component/antd/calendar/types.d.ts

@@ -5,4 +5,10 @@ export interface ToolbarProps {
   views?: any;
   onNavigate?: (action: string) => void;
   onView?: (view: string) => void;
+
+  date: string;
+  /**
+   * 是否展示农历
+   */
+  showLunar: boolean;
 }

package/es/schema-component/antd/calendar/utils.d.ts

@@ -1,6 +1,8 @@
+import moment from 'moment';
 export declare const toEvents: (data: any[], fieldNames: any) => {
     id: any;
     title: any;
     start: Date;
     end: Date;
 }[];
+export declare const getLunarDay: (date: moment.MomentInput) => string | number;

package/es/schema-component/antd/calendar/utils.js

@@ -1,4 +1,6 @@
 import { get } from 'lodash';
+import moment from 'moment';
+import solarLunar from 'solarlunar-es';
 import { i18n } from '../../../i18n';
 export var toEvents = function toEvents(data, fieldNames) {
   return data === null || data === void 0 ? void 0 : data.map(function (item) {
@@ -9,4 +11,9 @@ export var toEvents = function toEvents(data, fieldNames) {
       end: new Date(get(item, fieldNames.end || fieldNames.start))
     };
   });
+};
+export var getLunarDay = function getLunarDay(date) {
+  var md = moment(date);
+  var result = solarLunar.solar2lunar(md.year(), md.month() + 1, md.date());
+  return typeof result !== 'number' ? result.lunarFestival || result.term || result.dayCn : result;
 };

package/es/schema-component/antd/checkbox/Checkbox.js

@@ -10,7 +10,15 @@ import { isValid } from '@formily/shared';
 import { Checkbox as AntdCheckbox, Tag } from 'antd';
 import uniq from 'lodash/uniq';
 import React from 'react';
-export var Checkbox = connect(AntdCheckbox, mapProps({
+export var Checkbox = connect(function (props) {
+  var changeHandler = function changeHandler(val) {
+    props === null || props === void 0 ? void 0 : props.onChange(val);
+  };
+
+  return /*#__PURE__*/React.createElement(AntdCheckbox, _objectSpread(_objectSpread({}, props), {}, {
+    onChange: changeHandler
+  }));
+}, mapProps({
   value: 'checked',
   onInput: 'onChange'
 }, function (props, field) {
@@ -18,7 +26,7 @@ export var Checkbox = connect(AntdCheckbox, mapProps({
   return _objectSpread({}, props);
 }), mapReadPretty(function (props) {
   if (!isValid(props.value)) {
-    return /*#__PURE__*/React.createElement("div", null);
+    return null;
   }
 
   return props.value ? /*#__PURE__*/React.createElement(CheckOutlined, {
@@ -32,7 +40,7 @@ Checkbox.Group = connect(AntdCheckbox.Group, mapProps({
   dataSource: 'options'
 }), mapReadPretty(function (props) {
   if (!isValid(props.value)) {
-    return /*#__PURE__*/React.createElement("div", null);
+    return null;
   }
 
   var _props$options = props.options,
@@ -45,7 +53,8 @@ Checkbox.Group = connect(AntdCheckbox.Group, mapProps({
   }).map(function (option, key) {
     return /*#__PURE__*/React.createElement(Tag, {
       key: key,
-      color: option.color
+      color: option.color,
+      icon: option.icon
     }, option.label);
   }));
 }));

package/es/schema-component/antd/formula-input/FormulaInput.js

@@ -42,13 +42,8 @@ var AntdFormulaInput = function AntdFormulaInput(props) {
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      formula = _useState4[0],
-      setFormula = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      html = _useState6[0],
-      setHtml = _useState6[1];
+      html = _useState4[0],
+      setHtml = _useState4[1];
 
   var numColumns = new Map();
   var scope = {};
@@ -59,42 +54,37 @@ var AntdFormulaInput = function AntdFormulaInput(props) {
     scope[field.name] = 1;
   });
   var keys = Array.from(numColumns.keys());
-  var initHtml;
-
-  if (value) {
-    initHtml = value;
-    numColumns.forEach(function (value, key) {
-      initHtml = initHtml.replaceAll(key, "<span contentEditable=\"false\" style=\"border: 1px solid #aaa; padding: 2px 5px;\">".concat(value, "</span>"));
-    });
-  }
-
   useEffect(function () {
-    if (onChange && formula) {
-      var v = formula || '';
+    if (value) {
+      var newHtml = value;
       numColumns.forEach(function (value, key) {
-        v = v.replaceAll(value, key);
+        newHtml = newHtml.replaceAll(key, "<span contentEditable=\"false\" ><input disabled=\"disabled\" style=\"width:".concat(18 * value.length, "px;max-width: 120px\" value=\"").concat(value, "\"/><span hidden>").concat(key, "</span></span>"));
       });
+      newHtml = "".concat(newHtml, "<span style=\"padding-left: 5px\"></span>"); // set extra span for cursor focus on last position
 
-      if (v != value) {
-        onChange(v);
-      }
+      setHtml(newHtml);
+    } else {
+      setHtml('');
     }
-  }, [formula]);
+  }, [value]);
   var menu = /*#__PURE__*/React.createElement(Menu, {
     onClick: function () {
       var _onClick = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(args) {
-        var replaceFormula, replaceHtml;
+        var replaceFormula;
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                replaceFormula = formula.replace('@', numColumns.get(args.key));
-                replaceHtml = html.replace('@', "<span contentEditable=\"false\" style=\"border: 1px solid #aaa; padding: 2px 5px;\">".concat(numColumns.get(args.key), "</span>"));
-                setFormula(replaceFormula);
-                setHtml(replaceHtml);
+                replaceFormula = field.value.replace('@', args.key);
+
+                if (onChange && replaceFormula != field.value) {
+                  onChange(replaceFormula);
+                }
+
                 setDropdownVisible(false);
+                inputRef.current.focus();
 
-              case 5:
+              case 4:
               case "end":
                 return _context.stop();
             }
@@ -115,12 +105,12 @@ var AntdFormulaInput = function AntdFormulaInput(props) {
   }));
 
   var handleChange = function handleChange(e) {
-    var current = inputRef.current;
-    setFormula(e.currentTarget.textContent);
-    setHtml(current.innerHTML);
-
-    if (e.currentTarget.textContent == '' && onChange) {
-      onChange(null);
+    if (onChange) {
+      if (e.currentTarget.textContent == '') {
+        onChange(null);
+      } else {
+        onChange(e.currentTarget.textContent);
+      }
     }
   };
 
@@ -148,7 +138,8 @@ var AntdFormulaInput = function AntdFormulaInput(props) {
       try {
         math.evaluate(field.value, scope);
         field.feedbacks = [];
-      } catch (_unused) {
+      } catch (e) {
+        console.error(field.value, scope, e.message);
         field.setFeedback({
           type: 'error',
           code: 'FormulaError',
@@ -165,7 +156,7 @@ var AntdFormulaInput = function AntdFormulaInput(props) {
     className: "ant-input",
     onChange: handleChange,
     onKeyDown: handleKeyDown,
-    html: html || initHtml || ''
+    html: html || ''
   }));
 };
 

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

@@ -3,6 +3,7 @@ import React from 'react';
 declare type ComposedInput = React.FC<InputProps> & {
     TextArea?: React.FC<TextAreaProps>;
     URL?: React.FC<InputProps>;
+    JSON?: React.FC<TextAreaProps>;
 };
 export declare const Input: ComposedInput;
 export default Input;

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

@@ -9,6 +9,7 @@ import { connect, mapProps, mapReadPretty } from '@formily/react';
 import { Input as AntdInput } from 'antd';
 import React from 'react';
 import { ReadPretty } from './ReadPretty';
+import { Json } from './Json';
 export var Input = connect(AntdInput, mapProps(function (props, field) {
   return _objectSpread(_objectSpread({}, props), {}, {
     suffix: /*#__PURE__*/React.createElement("span", null, (field === null || field === void 0 ? void 0 : field['loading']) || (field === null || field === void 0 ? void 0 : field['validating']) ? /*#__PURE__*/React.createElement(LoadingOutlined, null) : props.suffix)
@@ -23,4 +24,5 @@ Input.TextArea = connect(AntdInput.TextArea, mapProps(function (props, field) {
   }, props);
 }), mapReadPretty(ReadPretty.TextArea));
 Input.URL = connect(AntdInput, mapReadPretty(ReadPretty.URL));
+Input.JSON = connect(Json, mapReadPretty(ReadPretty.JSON));
 export default Input;

package/es/schema-component/antd/input/Json.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TextAreaProps } from 'antd/lib/input';
+export declare function Json({ value, onChange, space, ...props }: TextAreaProps & {
+    value: any;
+    space: number;
+}): JSX.Element;

package/es/schema-component/antd/input/Json.js

@@ -0,0 +1,41 @@
+var _excluded = ["value", "onChange", "space"];
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { useField } from '@formily/react';
+import { Input } from 'antd';
+export function Json(_ref) {
+  var value = _ref.value,
+      _onChange = _ref.onChange,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 2 : _ref$space,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var field = useField();
+  return /*#__PURE__*/React.createElement(Input.TextArea, _objectSpread(_objectSpread({}, props), {}, {
+    defaultValue: value != null ? JSON.stringify(value, null, space) : '',
+    onChange: function onChange(ev) {
+      try {
+        var v = ev.target.value.trim() !== '' ? JSON.parse(ev.target.value) : null;
+        field.setFeedback({});
+
+        _onChange(v);
+      } catch (err) {
+        field.setFeedback({
+          type: 'error',
+          code: 'JSONSyntaxError',
+          messages: [err.message]
+        });
+      }
+    }
+  }));
+}

package/es/schema-component/antd/input/ReadPretty.d.ts

@@ -14,6 +14,9 @@ declare type Composed = {
         autop?: boolean;
     }>;
     Html?: any;
+    JSON?: React.FC<TextAreaProps & {
+        space: number;
+    }>;
 };
 export declare const ReadPretty: Composed;
 export {};