@nocobase/client 0.7.4-alpha.7 → 0.7.5-alpha.1

package/lib/schema-component/antd/grid/Grid.js

@@ -23,7 +23,7 @@ var _ = require("../../../");
 
 var _dndContext = require("../../common/dnd-context");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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); }
 
@@ -31,6 +31,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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."); }
@@ -43,16 +51,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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) } })); }
-
-var GridRowContext = /*#__PURE__*/(0, _react2.createContext)(null);
-var GridColContext = /*#__PURE__*/(0, _react2.createContext)(null);
+var GridRowContext = /*#__PURE__*/(0, _react2.createContext)({});
+var GridColContext = /*#__PURE__*/(0, _react2.createContext)({});
 var GridContext = /*#__PURE__*/(0, _react2.createContext)({});
 
 var breakRemoveOnGrid = function breakRemoveOnGrid(s) {
@@ -73,6 +73,11 @@ var ColDivider = function ColDivider(props) {
       isOver = _useDroppable.isOver,
       setNodeRef = _useDroppable.setNodeRef;
 
+  var _useDesignable = (0, _.useDesignable)(),
+      dn = _useDesignable.dn,
+      designable = _useDesignable.designable;
+
+  var dividerRef = (0, _react2.useRef)();
   var droppableStyle = {
     backgroundColor: isOver ? 'rgba(241, 139, 98, .1)' : undefined
   };
@@ -91,11 +96,89 @@ var ColDivider = function ColDivider(props) {
     }
   }
 
+  var prevSchema = props.cols[props.index];
+  var nextSchema = props.cols[props.index + 1];
+
+  var _useDraggable = (0, _core.useDraggable)({
+    disabled: props.first || props.last || !designable,
+    id: props.id,
+    data: {
+      dividerRef: dividerRef,
+      prevSchema: prevSchema,
+      nextSchema: nextSchema
+    }
+  }),
+      attributes = _useDraggable.attributes,
+      listeners = _useDraggable.listeners,
+      setDraggableNodeRef = _useDraggable.setNodeRef,
+      isDragging = _useDraggable.isDragging;
+
+  var _useState = (0, _react2.useState)([0, 0]),
+      _useState2 = _slicedToArray(_useState, 2),
+      clientWidths = _useState2[0],
+      setClientWidths = _useState2[1];
+
+  (0, _core.useDndMonitor)({
+    onDragStart: function onDragStart(event) {
+      if (!isDragging) {
+        return;
+      }
+
+      var el = dividerRef.current;
+      var prev = el.previousElementSibling;
+      var next = el.nextElementSibling;
+      setClientWidths([prev.clientWidth, next.clientWidth]);
+    },
+    onDragMove: function onDragMove(event) {
+      if (!isDragging) {
+        return;
+      }
+
+      var el = dividerRef.current;
+      var prev = el.previousElementSibling;
+      var next = el.nextElementSibling;
+      prev.style.width = "calc(".concat(clientWidths[0], "px + ").concat(event.delta.x, "px)");
+      next.style.width = "calc(".concat(clientWidths[1], "px - ").concat(event.delta.x, "px)");
+    },
+    onDragEnd: function onDragEnd(event) {
+      var _ref, _ref2;
+
+      if (clientWidths[0] <= 0 || clientWidths[1] <= 0) {
+        return;
+      }
+
+      setClientWidths([0, 0]);
+
+      if (!prevSchema || !nextSchema) {
+        return;
+      }
+
+      var el = dividerRef.current;
+      var prev = el.previousElementSibling;
+      var next = el.nextElementSibling;
+      prevSchema['x-component-props'] = prevSchema['x-component-props'] || {};
+      nextSchema['x-component-props'] = nextSchema['x-component-props'] || {};
+      prevSchema['x-component-props']['width'] = 100 * ((prev === null || prev === void 0 ? void 0 : prev.clientWidth) + 24 + 24 / props.cols.length) / el.parentElement.clientWidth;
+      nextSchema['x-component-props']['width'] = 100 * ((next === null || next === void 0 ? void 0 : next.clientWidth) + 24 + 24 / props.cols.length) / el.parentElement.clientWidth;
+      dn.emit('batchPatch', {
+        schemas: [(_ref = {}, _defineProperty(_ref, 'x-uid', prevSchema['x-uid']), _defineProperty(_ref, 'x-component-props', _objectSpread({}, prevSchema['x-component-props'])), _ref), (_ref2 = {}, _defineProperty(_ref2, 'x-uid', nextSchema['x-uid']), _defineProperty(_ref2, 'x-component-props', _objectSpread({}, nextSchema['x-component-props'])), _ref2)]
+      });
+    }
+  });
   return /*#__PURE__*/_react2.default.createElement("div", {
-    ref: visible ? setNodeRef : null,
+    ref: function ref(el) {
+      if (visible) {
+        setNodeRef(el);
+        dividerRef.current = el;
+      }
+    },
     className: (0, _classnames.default)('nb-col-divider', (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          width: 24px;\n        "])))),
     style: _objectSpread({}, droppableStyle)
-  });
+  }, /*#__PURE__*/_react2.default.createElement("div", _objectSpread(_objectSpread(_objectSpread({
+    ref: setDraggableNodeRef
+  }, listeners), attributes), {}, {
+    className: props.first || props.last || !designable ? null : (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                &::before {\n                  content: ' ';\n                  width: 12px;\n                  height: 100%;\n                  left: 6px;\n                  position: absolute;\n                  cursor: col-resize;\n                }\n                &:hover {\n                  &::before {\n                    background: rgba(241, 139, 98, 0.06) !important;\n                  }\n                }\n                width: 24px;\n                height: 100%;\n                position: absolute;\n                cursor: col-resize;\n              "])))
+  })));
 };
 
 var RowDivider = function RowDivider(props) {
@@ -114,10 +197,10 @@ var RowDivider = function RowDivider(props) {
     droppableStyle['backgroundColor'] = 'rgba(241, 139, 98, .1)';
   }
 
-  var _useState = (0, _react2.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      active = _useState2[0],
-      setActive = _useState2[1];
+  var _useState3 = (0, _react2.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      active = _useState4[0],
+      setActive = _useState4[1];
 
   var dndContext = (0, _core.useDndContext)();
   var currentSchema = props.rows[props.index];
@@ -151,7 +234,7 @@ var RowDivider = function RowDivider(props) {
   });
   return /*#__PURE__*/_react2.default.createElement("span", {
     ref: visible ? setNodeRef : null,
-    className: (0, _classnames.default)('nb-row-divider', (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: 24px;\n          width: 100%;\n          position: absolute;\n          margin-top: -24px;\n        "])))),
+    className: (0, _classnames.default)('nb-row-divider', (0, _css.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          height: 24px;\n          width: 100%;\n          position: absolute;\n          margin-top: -24px;\n        "])))),
     style: _objectSpread({
       zIndex: active ? 1000 : -1
     }, droppableStyle)
@@ -304,10 +387,11 @@ Grid.Row = (0, _react.observer)(function (props) {
   var cols = useColProperties();
   return /*#__PURE__*/_react2.default.createElement(GridRowContext.Provider, {
     value: {
+      schema: fieldSchema,
       cols: cols
     }
   }, /*#__PURE__*/_react2.default.createElement("div", {
-    className: (0, _classnames.default)('nb-grid-row', (0, _css.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            margin: 0 -24px;\n            display: flex;\n            position: relative;\n            /* z-index: 0; */\n          "]))))
+    className: (0, _classnames.default)('nb-grid-row', (0, _css.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            margin: 0 -24px;\n            display: flex;\n            position: relative;\n            /* z-index: 0; */\n          "]))))
   }, /*#__PURE__*/_react2.default.createElement(ColDivider, {
     cols: cols,
     first: true,
@@ -327,6 +411,7 @@ Grid.Row = (0, _react.observer)(function (props) {
     }), /*#__PURE__*/_react2.default.createElement(ColDivider, {
       cols: cols,
       index: index,
+      last: index === cols.length - 1,
       id: "".concat(addr, "_").concat(index + 1),
       data: {
         breakRemoveOn: breakRemoveOnRow,
@@ -338,15 +423,39 @@ Grid.Row = (0, _react.observer)(function (props) {
   })));
 });
 Grid.Col = (0, _react.observer)(function (props) {
+  var _schema$xComponentP;
+
   var _useContext = (0, _react2.useContext)(GridRowContext),
       cols = _useContext.cols;
 
-  var w = props.width || 100 / cols.length;
+  var schema = (0, _react.useFieldSchema)();
+  var field = (0, _react.useField)();
+  var w = (schema === null || schema === void 0 ? void 0 : (_schema$xComponentP = schema['x-component-props']) === null || _schema$xComponentP === void 0 ? void 0 : _schema$xComponentP['width']) || 100 / cols.length;
   var width = "calc(".concat(w, "% - 24px - 24px / ").concat(cols.length, ")");
-  return /*#__PURE__*/_react2.default.createElement("div", {
+
+  var _useDroppable3 = (0, _core.useDroppable)({
+    id: field.address.toString(),
+    data: {
+      insertAdjacent: 'beforeEnd',
+      schema: schema,
+      wrapSchema: function wrapSchema(s) {
+        return s;
+      }
+    }
+  }),
+      isOver = _useDroppable3.isOver,
+      setNodeRef = _useDroppable3.setNodeRef;
+
+  return /*#__PURE__*/_react2.default.createElement(GridColContext.Provider, {
+    value: {
+      cols: cols,
+      schema: schema
+    }
+  }, /*#__PURE__*/_react2.default.createElement("div", {
+    ref: setNodeRef,
     style: {
       width: width
     },
-    className: (0, _classnames.default)('nb-grid-col', (0, _css.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n          /* z-index: 0; */\n        "]))))
-  }, props.children);
+    className: (0, _classnames.default)('nb-grid-col', (0, _css.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            position: relative;\n            /* z-index: 0; */\n          "]))))
+  }, props.children));
 });

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

@@ -4,6 +4,7 @@ export * from './calendar';
 export * from './card-item';
 export * from './cascader';
 export * from './checkbox';
+export * from './cron';
 export * from './color-select';
 export * from './date-picker';
 export * from './filter';

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

@@ -82,6 +82,19 @@ Object.keys(_checkbox).forEach(function (key) {
   });
 });
 
+var _cron = require("./cron");
+
+Object.keys(_cron).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cron[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _cron[key];
+    }
+  });
+});
+
 var _colorSelect = require("./color-select");
 
 Object.keys(_colorSelect).forEach(function (key) {

package/lib/schema-component/antd/record-picker/InputRecordPicker.js

@@ -27,6 +27,8 @@ var _action = require("../action");
 
 var _useFieldNames = require("./useFieldNames");
 
+var _util = require("./util");
+
 var _excluded = ["onRowSelectionChange", "rowKey"],
     _excluded2 = ["value", "multiple", "onChange"];
 
@@ -153,6 +155,7 @@ var InputRecordPicker = function InputRecordPicker(props) {
   var fieldSchema = (0, _react.useFieldSchema)();
   var collectionField = useAssociation(props);
   var compile = (0, _hooks.useCompile)();
+  var labelUiSchema = (0, _util.useLabelUiSchema)(collectionField, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label');
 
   var _useState3 = (0, _react2.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -168,12 +171,12 @@ var InputRecordPicker = function InputRecordPicker(props) {
     if (value) {
       var opts = (Array.isArray(value) ? value : value ? [value] : []).map(function (option) {
         var label = option[fieldNames.label];
-        return _objectSpread(_objectSpread({}, option), {}, _defineProperty({}, fieldNames.label, compile(label)));
+        return _objectSpread(_objectSpread({}, option), {}, _defineProperty({}, fieldNames.label, (0, _util.getLabelFormatValue)(labelUiSchema, compile(label))));
       });
       setOptions(opts);
       setSelectedRows(opts);
     }
-  }, [value]);
+  }, [value, fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label]);
 
   var getValue = function getValue() {
     if (multiple == null) return null; // console.log('getValue', multiple, value, Array.isArray(value));

package/lib/schema-component/antd/record-picker/ReadPrettyRecordPicker.js

@@ -29,6 +29,8 @@ var _EllipsisWithTooltip = require("../input/EllipsisWithTooltip");
 
 var _useFieldNames = require("./useFieldNames");
 
+var _util = require("./util");
+
 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; }
@@ -77,10 +79,12 @@ var ReadPrettyRecordPicker = (0, _react.observer)(function (props) {
       setRecord = _useState6[1];
 
   var compile = (0, _hooks.useCompile)();
+  var labelUiSchema = (0, _util.useLabelUiSchema)(collectionField, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label');
   var ellipsisWithTooltipRef = (0, _react2.useRef)();
 
   var renderRecords = function renderRecords() {
     return (0, _shared.toArr)(field.value).map(function (record, index, arr) {
+      var val = compile(record === null || record === void 0 ? void 0 : record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label']) || (record === null || record === void 0 ? void 0 : record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value']) || (record === null || record === void 0 ? void 0 : record.id);
       return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, {
         key: "".concat(record.id, "_").concat(index)
       }, /*#__PURE__*/_react2.default.createElement("span", null, /*#__PURE__*/_react2.default.createElement("a", {
@@ -93,12 +97,12 @@ var ReadPrettyRecordPicker = (0, _react.observer)(function (props) {
           setRecord(record);
           ellipsisWithTooltipRef === null || ellipsisWithTooltipRef === void 0 ? void 0 : (_ellipsisWithTooltipR = ellipsisWithTooltipRef.current) === null || _ellipsisWithTooltipR === void 0 ? void 0 : _ellipsisWithTooltipR.setPopoverVisible(false);
         }
-      }, compile(record === null || record === void 0 ? void 0 : record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label']) || (record === null || record === void 0 ? void 0 : record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value']) || (record === null || record === void 0 ? void 0 : record.id))), index < arr.length - 1 ? /*#__PURE__*/_react2.default.createElement("span", {
+      }, (0, _util.getLabelFormatValue)(labelUiSchema, val))), index < arr.length - 1 ? /*#__PURE__*/_react2.default.createElement("span", {
         style: {
           marginRight: 4,
           color: '#aaa'
         }
-      }, ", ") : null);
+      }, ",") : null);
     });
   };
 

package/lib/schema-component/antd/record-picker/util.d.ts

@@ -0,0 +1,5 @@
+import { ISchema } from '@formily/react';
+import { CollectionFieldOptions } from '../../../collection-manager';
+export declare const useLabelUiSchema: (collectionField: CollectionFieldOptions, label: string) => ISchema;
+export declare const getDatePickerLabels: (props: any) => string;
+export declare const getLabelFormatValue: (labelUiSchema: ISchema, value: any) => string;

package/lib/schema-component/antd/record-picker/util.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLabelUiSchema = exports.getLabelFormatValue = exports.getDatePickerLabels = void 0;
+
+var _shared = require("@formily/shared");
+
+var _client = require("@nocobase/utils/client");
+
+var _collectionManager = require("../../../collection-manager");
+
+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; }
+
+var useLabelUiSchema = function useLabelUiSchema(collectionField, label) {
+  var _useCollectionManager = (0, _collectionManager.useCollectionManager)(),
+      getCollectionJoinField = _useCollectionManager.getCollectionJoinField;
+
+  if (!collectionField) {
+    return;
+  }
+
+  var labelField = getCollectionJoinField("".concat(collectionField.target, ".").concat(label));
+  return labelField === null || labelField === void 0 ? void 0 : labelField.uiSchema;
+};
+
+exports.useLabelUiSchema = useLabelUiSchema;
+
+var getDatePickerLabels = function getDatePickerLabels(props) {
+  var format = (0, _client.getDefaultFormat)(props);
+  var m = (0, _client.str2moment)(props.value, props);
+  var labels = m && m.isValid() ? m.format(format) : props.value;
+  return (0, _shared.isArr)(labels) ? labels.join('~') : labels;
+};
+
+exports.getDatePickerLabels = getDatePickerLabels;
+
+var getLabelFormatValue = function getLabelFormatValue(labelUiSchema, value) {
+  switch (labelUiSchema === null || labelUiSchema === void 0 ? void 0 : labelUiSchema['x-component']) {
+    case 'DatePicker':
+      return getDatePickerLabels(_objectSpread(_objectSpread({}, labelUiSchema === null || labelUiSchema === void 0 ? void 0 : labelUiSchema['x-component-props']), {}, {
+        value: value
+      }));
+
+    default:
+      return value;
+  }
+};
+
+exports.getLabelFormatValue = getLabelFormatValue;

package/lib/schema-component/antd/upload/shared.js

@@ -251,6 +251,7 @@ function useUploadProps(_ref) {
     (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, normalizeFileList(_toConsumableArray(param.fileList)));
   };
 
+  var form = (0, _react.useForm)();
   var api = (0, _apiClient.useAPIClient)();
   return _objectSpread(_objectSpread({}, props), {}, {
     customRequest: function customRequest(_ref2) {
@@ -272,6 +273,7 @@ function useUploadProps(_ref) {
       }
 
       formData.append(filename, file);
+      form.disabled = true;
       api.axios.post(action, formData, {
         withCredentials: withCredentials,
         headers: headers,
@@ -285,7 +287,9 @@ function useUploadProps(_ref) {
       }).then(function (_ref4) {
         var data = _ref4.data;
         onSuccess(data, file);
-      }).catch(onError);
+      }).catch(onError).finally(function () {
+        form.disabled = false;
+      });
       return {
         abort: function abort() {
           console.log('upload progress is aborted.');

package/lib/schema-component/common/dnd-context/index.js

@@ -1,5 +1,7 @@
 "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
 });
@@ -9,7 +11,7 @@ var _core = require("@dnd-kit/core");
 
 var _react = require("@formily/react");
 
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactI18next = require("react-i18next");
 
@@ -17,7 +19,9 @@ var _ = require("../../../");
 
 var _hooks = require("../../hooks");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 
@@ -25,6 +29,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 _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 _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; }
+
+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; }
+
 var useDragEnd = function useDragEnd(props) {
   var _useDesignable = (0, _hooks.useDesignable)(),
       refresh = _useDesignable.refresh;
@@ -35,7 +51,7 @@ var useDragEnd = function useDragEnd(props) {
       t = _useTranslation.t;
 
   return function (event) {
-    var _active$data, _active$data$current, _over$data, _over$data$current, _over$data2, _over$data2$current, _over$data3, _over$data3$current, _over$data4, _over$data4$current;
+    var _active$data, _active$data$current, _over$data, _over$data$current, _over$data2, _over$data2$current, _over$data3, _over$data3$current, _over$data4, _over$data4$current, _over$data5, _over$data5$current;
 
     var active = event.active,
         over = event.over;
@@ -44,6 +60,7 @@ var useDragEnd = function useDragEnd(props) {
     var insertAdjacent = over === null || over === void 0 ? void 0 : (_over$data2 = over.data) === null || _over$data2 === void 0 ? void 0 : (_over$data2$current = _over$data2.current) === null || _over$data2$current === void 0 ? void 0 : _over$data2$current.insertAdjacent;
     var breakRemoveOn = over === null || over === void 0 ? void 0 : (_over$data3 = over.data) === null || _over$data3 === void 0 ? void 0 : (_over$data3$current = _over$data3.current) === null || _over$data3$current === void 0 ? void 0 : _over$data3$current.breakRemoveOn;
     var wrapSchema = over === null || over === void 0 ? void 0 : (_over$data4 = over.data) === null || _over$data4 === void 0 ? void 0 : (_over$data4$current = _over$data4.current) === null || _over$data4$current === void 0 ? void 0 : _over$data4$current.wrapSchema;
+    var onSuccess = over === null || over === void 0 ? void 0 : (_over$data5 = over.data) === null || _over$data5 === void 0 ? void 0 : (_over$data5$current = _over$data5.current) === null || _over$data5$current === void 0 ? void 0 : _over$data5$current.onSuccess;
 
     if (!activeSchema || !overSchema) {
       var _props$onDragEnd;
@@ -81,7 +98,8 @@ var useDragEnd = function useDragEnd(props) {
       dn.insertAdjacent(insertAdjacent, activeSchema, {
         wrap: wrapSchema,
         breakRemoveOn: breakRemoveOn,
-        removeParentsIfNoChildren: true
+        removeParentsIfNoChildren: true,
+        onSuccess: onSuccess
       });
       props === null || props === void 0 ? void 0 : (_props$onDragEnd4 = props.onDragEnd) === null || _props$onDragEnd4 === void 0 ? void 0 : _props$onDragEnd4.call(props, event);
       return;
@@ -93,16 +111,28 @@ var DndContext = (0, _react.observer)(function (props) {
   var _useTranslation2 = (0, _reactI18next.useTranslation)(),
       t = _useTranslation2.t;
 
+  var _useState = (0, _react2.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
   return /*#__PURE__*/_react2.default.createElement(_core.DndContext, _objectSpread(_objectSpread({
     collisionDetection: _core.rectIntersection
   }, props), {}, {
+    onDragStart: function onDragStart(event) {
+      var _active$data2, _active$data2$current;
+
+      var active = event.active;
+      var activeSchema = active === null || active === void 0 ? void 0 : (_active$data2 = active.data) === null || _active$data2 === void 0 ? void 0 : (_active$data2$current = _active$data2.current) === null || _active$data2$current === void 0 ? void 0 : _active$data2$current.schema;
+      setVisible(!!activeSchema);
+    },
     onDragEnd: useDragEnd(props)
   }), /*#__PURE__*/_react2.default.createElement(_core.DragOverlay, {
     dropAnimation: {
       duration: 10,
       easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)'
     }
-  }, /*#__PURE__*/_react2.default.createElement("span", {
+  }, visible && /*#__PURE__*/_react2.default.createElement("span", {
     style: {
       whiteSpace: 'nowrap'
     }

package/lib/schema-component/hooks/useDesignable.d.ts

@@ -35,8 +35,8 @@ export declare class Designable {
     constructor(options: CreateDesignableProps);
     loadAPIClientEvents(): void;
     prepareProperty(schema: ISchema): void;
-    on(name: 'insertAdjacent' | 'remove' | 'error' | 'patch', listener: any): void;
-    emit(name: 'insertAdjacent' | 'remove' | 'error' | 'patch', ...args: any[]): void;
+    on(name: 'insertAdjacent' | 'remove' | 'error' | 'patch' | 'batchPatch', listener: any): void;
+    emit(name: 'insertAdjacent' | 'remove' | 'error' | 'patch' | 'batchPatch', ...args: any[]): void;
     parentsIn(schema: Schema): boolean;
     refresh(): void;
     insertAdjacent(position: Position, schema: ISchema, options?: InsertAdjacentOptions): void;