@douyinfe/semi-ui 2.23.0 → 2.23.1

package/dist/umd/semi-ui.js

@@ -43518,8 +43518,8 @@ function sortableElement(WrappedComponent) {
 
 
 
-const tagInput_SortableItem = sortableElement(props => props.item);
-const tagInput_SortableList = sortableContainer(_ref => {
+const SortableItem = sortableElement(props => props.item);
+const SortableList = sortableContainer(_ref => {
   let {
     items
   } = _ref;
@@ -43531,7 +43531,7 @@ const tagInput_SortableList = sortableContainer(_ref => {
   }, items.map((item, index) =>
   /*#__PURE__*/
   // @ts-ignore skip SortableItem type check
-  external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tagInput_SortableItem, {
+  external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableItem, {
     key: item.key,
     index: index,
     item: item.item
@@ -43920,9 +43920,11 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
     }));
 
     if (active && draggable && sortableListItems.length > 0) {
+      // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
       // @ts-ignore skip SortableItem type check
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tagInput_SortableList, {
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableList, {
         useDragHandle: true,
+        helperClass: "".concat(tagInput_prefixCls, "-drag-item-move"),
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"
@@ -59060,10 +59062,6 @@ class modalFoundation_ModalFoundation extends foundation {
     this.toggleDisplayNone = (displayNone, callback) => {
       this._adapter.toggleDisplayNone(displayNone, callback);
     };
-
-    this.setShouldRender = shouldRender => {
-      this._adapter.setShouldRender(shouldRender);
-    };
   }
 
   destroy() {
@@ -60026,8 +60024,6 @@ class Modal_Modal extends baseComponent_BaseComponent {
         visible
       } = this.props;
       this.foundation.toggleDisplayNone(!visible);
-      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
-      this.foundation.setShouldRender(shouldRender);
     };
 
     this.renderFooter = () => {
@@ -60109,8 +60105,11 @@ class Modal_Modal extends baseComponent_BaseComponent {
       const classList = classnames_default()(className, {
         ["".concat(modal_constants_cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.displayNone
       });
+      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered) || this.props.motion && !this.state.displayNone
+      /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
+      ;
 
-      if (this.state.shouldRender) {
+      if (shouldRender) {
         this._haveRendered = true;
       }
 
@@ -60141,7 +60140,7 @@ class Modal_Modal extends baseComponent_BaseComponent {
             animationClassName: maskAnimationClassName,
             animationEventsNeedBind: maskAnimationEventsNeedBind
           } = _ref2;
-          return this.state.shouldRender ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(ModalContent_ModalContent, Object.assign({}, restProps, {
+          return shouldRender ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(ModalContent_ModalContent, Object.assign({}, restProps, {
             contentExtraProps: animationEventsNeedBind,
             maskExtraProps: maskAnimationEventsNeedBind,
             isFullScreen: this.state.isFullScreen,
@@ -60161,8 +60160,7 @@ class Modal_Modal extends baseComponent_BaseComponent {
 
     this.state = {
       displayNone: !props.visible,
-      isFullScreen: props.fullScreen,
-      shouldRender: this.props.visible || this.props.keepDOM && !this.props.lazyRender
+      isFullScreen: props.fullScreen
     };
     this.foundation = new modalFoundation_ModalFoundation(this.adapter);
     this.modalRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
@@ -60217,13 +60215,6 @@ class Modal_Modal extends baseComponent_BaseComponent {
             isFullScreen
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -60269,12 +60260,6 @@ class Modal_Modal extends baseComponent_BaseComponent {
       this.foundation.beforeShow();
     }
 
-    const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
-
-    if (shouldRender === true && this.state.shouldRender === false) {
-      this.foundation.setShouldRender(true);
-    }
-
     if (!prevState.displayNone && this.state.displayNone) {
       this.foundation.afterHide();
     }
@@ -76248,10 +76233,6 @@ class sideSheetFoundation_SideSheetFoundation extends foundation {
     }
   }
 
-  setShouldRender(shouldRender) {
-    this._adapter.setShouldRender(shouldRender);
-  }
-
   onVisibleChange(visible) {
     this._adapter.notifyVisibleChange(visible);
   }
@@ -76303,14 +76284,11 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
     };
 
     this.updateState = () => {
-      const shouldRender = this.props.visible || this.props.keepDOM;
-      this.foundation.setShouldRender(shouldRender);
       this.foundation.toggleDisplayNone(!this.props.visible);
     };
 
     this.state = {
-      displayNone: !this.props.visible,
-      shouldRender: this.props.visible
+      displayNone: !this.props.visible
     };
     this.foundation = new sideSheetFoundation_SideSheetFoundation(this.adapter);
   }
@@ -76357,13 +76335,6 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
             displayNone: displayNone
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -76399,12 +76370,6 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
       this.foundation.afterHide();
     }
 
-    const shouldRender = this.props.visible || this.props.keepDOM;
-
-    if (shouldRender === true && this.state.shouldRender === false) {
-      this.foundation.setShouldRender(true);
-    }
-
     if (prevState.displayNone !== this.state.displayNone) {
       this.foundation.onVisibleChange(!this.state.displayNone);
     }
@@ -76456,7 +76421,10 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
       width: sheetWidth,
       height: sheetHeight,
       onClose: this.handleCancel
-    }); // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
+    });
+    const shouldRender = this.props.visible || this.props.keepDOM || this.props.motion && !this.state.displayNone
+    /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
+    ; // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(_cssAnimation, {
       motion: this.props.motion,
@@ -76481,7 +76449,7 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
           animationStyle,
           animationEventsNeedBind
         } = _ref2;
-        return this.state.shouldRender ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SideSheetContent_SideSheetContent, Object.assign({}, contentProps, {
+        return shouldRender ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SideSheetContent_SideSheetContent, Object.assign({}, contentProps, {
           maskExtraProps: maskAnimationEventsNeedBind,
           wrapperExtraProps: animationEventsNeedBind,
           dialogClassName: animationClassName,
@@ -97243,7 +97211,30 @@ var transfer = __webpack_require__("mo0a");
 
 
 
-const transfer_prefixcls = transfer_constants_cssClasses.PREFIX;
+const transfer_prefixcls = transfer_constants_cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
+
+const transfer_SortableItem = sortableElement(props => props.item.node);
+const transfer_SortableList = sortableContainer(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+    className: "".concat(transfer_prefixcls, "-right-list"),
+    role: "list",
+    "aria-label": "Selected list"
+  }, items.map((item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore skip SortableItem type check
+  external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(transfer_SortableItem, {
+    key: item.label,
+    index: index,
+    item: item
+  }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
+  ;
+}, {
+  distance: 10
+});
 
 class transfer_Transfer extends baseComponent_BaseComponent {
   constructor(props) {
@@ -97686,34 +97677,16 @@ class transfer_Transfer extends baseComponent_BaseComponent {
   }
 
   renderRightSortableList(selectedData) {
-    // when choose some items && draggable is true
-    const SortableItem = sortableElement(props => this.renderRightItem(props.item));
-    const SortableList = sortableContainer(_ref => {
-      let {
-        items
-      } = _ref;
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        className: "".concat(transfer_prefixcls, "-right-list"),
-        role: "list",
-        "aria-label": "Selected list"
-      }, items.map((item, index) =>
-      /*#__PURE__*/
-      // @ts-ignore skip SortableItem type check
-      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableItem, {
-        key: item.label,
-        index: index,
-        item: item
-      }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
-      ;
-    }, {
-      distance: 10
-    }); // @ts-ignore skip SortableItem type check
+    const sortableListItems = selectedData.map(item => Object.assign(Object.assign({}, item), {
+      node: this.renderRightItem(item)
+    })); // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
+    // @ts-ignore skip SortableItem type check
 
-    const sortList = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(SortableList, {
+    const sortList = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(transfer_SortableList, {
       useDragHandle: true,
+      helperClass: "".concat(transfer_prefixcls, "-right-item-drag-item-move"),
       onSortEnd: this.onSortEnd,
-      items: selectedData
+      items: sortableListItems
     });
     return sortList;
   }