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

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

@@ -1,4 +1,12 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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(); }
 
@@ -12,24 +20,16 @@ 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) } })); }
-
-import { useDndContext, useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { useDndContext, useDndMonitor, useDraggable, useDroppable } from '@dnd-kit/core';
 import { css } from '@emotion/css';
 import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
 import { uid } from '@formily/shared';
 import cls from 'classnames';
 import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
-import { useFormBlockContext, useSchemaInitializer } from '../../../';
+import { useDesignable, useFormBlockContext, useSchemaInitializer } from '../../../';
 import { DndContext } from '../../common/dnd-context';
-var GridRowContext = /*#__PURE__*/createContext(null);
-var GridColContext = /*#__PURE__*/createContext(null);
+var GridRowContext = /*#__PURE__*/createContext({});
+var GridColContext = /*#__PURE__*/createContext({});
 var GridContext = /*#__PURE__*/createContext({});
 
 var breakRemoveOnGrid = function breakRemoveOnGrid(s) {
@@ -50,6 +50,11 @@ var ColDivider = function ColDivider(props) {
       isOver = _useDroppable.isOver,
       setNodeRef = _useDroppable.setNodeRef;
 
+  var _useDesignable = useDesignable(),
+      dn = _useDesignable.dn,
+      designable = _useDesignable.designable;
+
+  var dividerRef = useRef();
   var droppableStyle = {
     backgroundColor: isOver ? 'rgba(241, 139, 98, .1)' : undefined
   };
@@ -68,11 +73,89 @@ var ColDivider = function ColDivider(props) {
     }
   }
 
+  var prevSchema = props.cols[props.index];
+  var nextSchema = props.cols[props.index + 1];
+
+  var _useDraggable = 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 = useState([0, 0]),
+      _useState2 = _slicedToArray(_useState, 2),
+      clientWidths = _useState2[0],
+      setClientWidths = _useState2[1];
+
+  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__*/React.createElement("div", {
-    ref: visible ? setNodeRef : null,
+    ref: function ref(el) {
+      if (visible) {
+        setNodeRef(el);
+        dividerRef.current = el;
+      }
+    },
     className: cls('nb-col-divider', css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          width: 24px;\n        "])))),
     style: _objectSpread({}, droppableStyle)
-  });
+  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread(_objectSpread({
+    ref: setDraggableNodeRef
+  }, listeners), attributes), {}, {
+    className: props.first || props.last || !designable ? null : 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) {
@@ -91,10 +174,10 @@ var RowDivider = function RowDivider(props) {
     droppableStyle['backgroundColor'] = 'rgba(241, 139, 98, .1)';
   }
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      active = _useState2[0],
-      setActive = _useState2[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      active = _useState4[0],
+      setActive = _useState4[1];
 
   var dndContext = useDndContext();
   var currentSchema = props.rows[props.index];
@@ -128,7 +211,7 @@ var RowDivider = function RowDivider(props) {
   });
   return /*#__PURE__*/React.createElement("span", {
     ref: visible ? setNodeRef : null,
-    className: cls('nb-row-divider', css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: 24px;\n          width: 100%;\n          position: absolute;\n          margin-top: -24px;\n        "])))),
+    className: cls('nb-row-divider', 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)
@@ -275,10 +358,11 @@ Grid.Row = observer(function (props) {
   var cols = useColProperties();
   return /*#__PURE__*/React.createElement(GridRowContext.Provider, {
     value: {
+      schema: fieldSchema,
       cols: cols
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: cls('nb-grid-row', css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            margin: 0 -24px;\n            display: flex;\n            position: relative;\n            /* z-index: 0; */\n          "]))))
+    className: cls('nb-grid-row', css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            margin: 0 -24px;\n            display: flex;\n            position: relative;\n            /* z-index: 0; */\n          "]))))
   }, /*#__PURE__*/React.createElement(ColDivider, {
     cols: cols,
     first: true,
@@ -298,6 +382,7 @@ Grid.Row = observer(function (props) {
     }), /*#__PURE__*/React.createElement(ColDivider, {
       cols: cols,
       index: index,
+      last: index === cols.length - 1,
       id: "".concat(addr, "_").concat(index + 1),
       data: {
         breakRemoveOn: breakRemoveOnRow,
@@ -309,15 +394,39 @@ Grid.Row = observer(function (props) {
   })));
 });
 Grid.Col = observer(function (props) {
+  var _schema$xComponentP;
+
   var _useContext = useContext(GridRowContext),
       cols = _useContext.cols;
 
-  var w = props.width || 100 / cols.length;
+  var schema = useFieldSchema();
+  var field = 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__*/React.createElement("div", {
+
+  var _useDroppable3 = useDroppable({
+    id: field.address.toString(),
+    data: {
+      insertAdjacent: 'beforeEnd',
+      schema: schema,
+      wrapSchema: function wrapSchema(s) {
+        return s;
+      }
+    }
+  }),
+      isOver = _useDroppable3.isOver,
+      setNodeRef = _useDroppable3.setNodeRef;
+
+  return /*#__PURE__*/React.createElement(GridColContext.Provider, {
+    value: {
+      cols: cols,
+      schema: schema
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: setNodeRef,
     style: {
       width: width
     },
-    className: cls('nb-grid-col', css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n          /* z-index: 0; */\n        "]))))
-  }, props.children);
+    className: cls('nb-grid-col', css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            position: relative;\n            /* z-index: 0; */\n          "]))))
+  }, props.children));
 });

package/es/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/es/schema-component/antd/index.js

@@ -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/es/schema-component/antd/record-picker/InputRecordPicker.js

@@ -33,6 +33,7 @@ import { FormProvider, SchemaComponentOptions } from '../../core';
 import { useCompile } from '../../hooks';
 import { ActionContext, useActionContext } from '../action';
 import { useFieldNames } from './useFieldNames';
+import { getLabelFormatValue, useLabelUiSchema } from './util';
 var RecordPickerContext = /*#__PURE__*/createContext(null);
 
 var useTableSelectorProps = function useTableSelectorProps() {
@@ -130,6 +131,7 @@ export var InputRecordPicker = function InputRecordPicker(props) {
   var fieldSchema = useFieldSchema();
   var collectionField = useAssociation(props);
   var compile = useCompile();
+  var labelUiSchema = useLabelUiSchema(collectionField, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label');
 
   var _useState3 = useState([]),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -145,12 +147,12 @@ export 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, 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/es/schema-component/antd/record-picker/ReadPrettyRecordPicker.js

@@ -21,6 +21,7 @@ import { useCompile } from '../../hooks';
 import { ActionContext } from '../action';
 import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
 import { useFieldNames } from './useFieldNames';
+import { getLabelFormatValue, useLabelUiSchema } from './util';
 export var ReadPrettyRecordPicker = observer(function (props) {
   var ellipsis = props.ellipsis;
   var fieldSchema = useFieldSchema();
@@ -53,10 +54,12 @@ export var ReadPrettyRecordPicker = observer(function (props) {
       setRecord = _useState6[1];
 
   var compile = useCompile();
+  var labelUiSchema = useLabelUiSchema(collectionField, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label');
   var ellipsisWithTooltipRef = useRef();
 
   var renderRecords = function renderRecords() {
     return 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__*/React.createElement(Fragment, {
         key: "".concat(record.id, "_").concat(index)
       }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("a", {
@@ -69,12 +72,12 @@ export var ReadPrettyRecordPicker = 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__*/React.createElement("span", {
+      }, getLabelFormatValue(labelUiSchema, val))), index < arr.length - 1 ? /*#__PURE__*/React.createElement("span", {
         style: {
           marginRight: 4,
           color: '#aaa'
         }
-      }, ", ") : null);
+      }, ",") : null);
     });
   };
 

package/es/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/es/schema-component/antd/record-picker/util.js

@@ -0,0 +1,37 @@
+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; }
+
+import { isArr } from '@formily/shared';
+import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
+import { useCollectionManager } from '../../../collection-manager';
+export var useLabelUiSchema = function useLabelUiSchema(collectionField, label) {
+  var _useCollectionManager = 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;
+};
+export var getDatePickerLabels = function getDatePickerLabels(props) {
+  var format = getDefaultFormat(props);
+  var m = str2moment(props.value, props);
+  var labels = m && m.isValid() ? m.format(format) : props.value;
+  return isArr(labels) ? labels.join('~') : labels;
+};
+export 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;
+  }
+};

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

@@ -24,7 +24,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 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 { useField } from '@formily/react';
+import { useField, useForm } from '@formily/react';
 import { reaction } from '@formily/reactive';
 import { isArr, isValid, toArr as toArray } from '@formily/shared';
 import { useEffect } from 'react';
@@ -197,6 +197,7 @@ export function useUploadProps(_ref) {
     (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, normalizeFileList(_toConsumableArray(param.fileList)));
   };
 
+  var form = useForm();
   var api = useAPIClient();
   return _objectSpread(_objectSpread({}, props), {}, {
     customRequest: function customRequest(_ref2) {
@@ -218,6 +219,7 @@ export function useUploadProps(_ref) {
       }
 
       formData.append(filename, file);
+      form.disabled = true;
       api.axios.post(action, formData, {
         withCredentials: withCredentials,
         headers: headers,
@@ -231,7 +233,9 @@ export 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/es/schema-component/common/dnd-context/index.js

@@ -4,9 +4,21 @@ 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; }
+
 import { DndContext as DndKitContext, DragOverlay, rectIntersection } from '@dnd-kit/core';
 import { observer } from '@formily/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAPIClient } from '../../../';
 import { createDesignable, useDesignable } from '../../hooks';
@@ -21,7 +33,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;
@@ -30,6 +42,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;
@@ -67,7 +80,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;
@@ -79,16 +93,28 @@ export var DndContext = observer(function (props) {
   var _useTranslation2 = useTranslation(),
       t = _useTranslation2.t;
 
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
   return /*#__PURE__*/React.createElement(DndKitContext, _objectSpread(_objectSpread({
     collisionDetection: 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__*/React.createElement(DragOverlay, {
     dropAnimation: {
       duration: 10,
       easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)'
     }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, visible && /*#__PURE__*/React.createElement("span", {
     style: {
       whiteSpace: 'nowrap'
     }

package/es/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;