@douyinfe/semi-ui 2.23.0 → 2.23.1

package/lib/cjs/locale/source/vi_VN.js

@@ -105,7 +105,7 @@ const local = {
   },
   Table: {
     emptyText: 'Không kết quả',
-    pageText: 'Hiển thị $ {currentStart} đến $ {currentEnd} trong tổng số $ {total}}'
+    pageText: 'Hiển thị ${currentStart} đến ${currentEnd} trong tổng số ${total}}'
   },
   Select: {
     emptyText: 'Không kết quả',

package/lib/cjs/modal/Modal.js

@@ -74,8 +74,6 @@ class Modal extends _baseComponent.default {
         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 = () => {
@@ -157,8 +155,11 @@ class Modal extends _baseComponent.default {
       const classList = (0, _classnames.default)(className, {
         ["".concat(_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;
       }
 
@@ -189,7 +190,7 @@ class Modal extends _baseComponent.default {
             animationClassName: maskAnimationClassName,
             animationEventsNeedBind: maskAnimationEventsNeedBind
           } = _ref2;
-          return this.state.shouldRender ? /*#__PURE__*/_react.default.createElement(_ModalContent.default, Object.assign({}, restProps, {
+          return shouldRender ? /*#__PURE__*/_react.default.createElement(_ModalContent.default, Object.assign({}, restProps, {
             contentExtraProps: animationEventsNeedBind,
             maskExtraProps: maskAnimationEventsNeedBind,
             isFullScreen: this.state.isFullScreen,
@@ -209,8 +210,7 @@ class Modal extends _baseComponent.default {
 
     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.default(this.adapter);
     this.modalRef = /*#__PURE__*/_react.default.createRef();
@@ -265,13 +265,6 @@ class Modal extends _baseComponent.default {
             isFullScreen
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -317,12 +310,6 @@ class Modal extends _baseComponent.default {
       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();
     }

package/lib/cjs/sideSheet/index.js

@@ -61,14 +61,11 @@ class SideSheet extends _baseComponent.default {
     };
 
     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.default(this.adapter);
   }
@@ -115,13 +112,6 @@ class SideSheet extends _baseComponent.default {
             displayNone: displayNone
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -157,12 +147,6 @@ class SideSheet extends _baseComponent.default {
       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);
     }
@@ -214,7 +198,10 @@ class SideSheet extends _baseComponent.default {
       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__*/_react.default.createElement(_cssAnimation.default, {
       motion: this.props.motion,
@@ -239,7 +226,7 @@ class SideSheet extends _baseComponent.default {
           animationStyle,
           animationEventsNeedBind
         } = _ref2;
-        return this.state.shouldRender ? /*#__PURE__*/_react.default.createElement(_SideSheetContent.default, Object.assign({}, contentProps, {
+        return shouldRender ? /*#__PURE__*/_react.default.createElement(_SideSheetContent.default, Object.assign({}, contentProps, {
           maskExtraProps: maskAnimationEventsNeedBind,
           wrapperExtraProps: animationEventsNeedBind,
           dialogClassName: animationClassName,

package/lib/cjs/tagInput/index.js

@@ -450,9 +450,11 @@ class TagInput extends _baseComponent.default {
     }));
 
     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__*/_react.default.createElement(SortableList, {
         useDragHandle: true,
+        helperClass: "".concat(prefixCls, "-drag-item-move"),
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"

package/lib/cjs/transfer/index.js

@@ -49,7 +49,30 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const prefixcls = _constants.cssClasses.PREFIX;
+const prefixcls = _constants.cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
+
+const SortableItem = (0, _reactSortableHoc.SortableElement)(props => props.item.node);
+const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixcls, "-right-list"),
+    role: "list",
+    "aria-label": "Selected list"
+  }, items.map((item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore skip SortableItem type check
+  _react.default.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
+});
 
 class Transfer extends _baseComponent.default {
   constructor(props) {
@@ -493,34 +516,16 @@ class Transfer extends _baseComponent.default {
   }
 
   renderRightSortableList(selectedData) {
-    // when choose some items && draggable is true
-    const SortableItem = (0, _reactSortableHoc.SortableElement)(props => this.renderRightItem(props.item));
-    const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
-      let {
-        items
-      } = _ref;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixcls, "-right-list"),
-        role: "list",
-        "aria-label": "Selected list"
-      }, items.map((item, index) =>
-      /*#__PURE__*/
-      // @ts-ignore skip SortableItem type check
-      _react.default.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__*/_react.default.createElement(SortableList, {
       useDragHandle: true,
+      helperClass: "".concat(prefixcls, "-right-item-drag-item-move"),
       onSortEnd: this.onSortEnd,
-      items: selectedData
+      items: sortableListItems
     });
 
     return sortList;

package/lib/es/locale/source/vi_VN.js

@@ -97,7 +97,7 @@ const local = {
   },
   Table: {
     emptyText: 'Không kết quả',
-    pageText: 'Hiển thị $ {currentStart} đến $ {currentEnd} trong tổng số $ {total}}'
+    pageText: 'Hiển thị ${currentStart} đến ${currentEnd} trong tổng số ${total}}'
   },
   Select: {
     emptyText: 'Không kết quả',

package/lib/es/modal/Modal.js

@@ -46,8 +46,6 @@ class Modal extends 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 = () => {
@@ -129,8 +127,11 @@ class Modal extends BaseComponent {
       const classList = cls(className, {
         ["".concat(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;
       }
 
@@ -161,7 +162,7 @@ class Modal extends BaseComponent {
             animationClassName: maskAnimationClassName,
             animationEventsNeedBind: maskAnimationEventsNeedBind
           } = _ref2;
-          return this.state.shouldRender ? /*#__PURE__*/React.createElement(ModalContent, Object.assign({}, restProps, {
+          return shouldRender ? /*#__PURE__*/React.createElement(ModalContent, Object.assign({}, restProps, {
             contentExtraProps: animationEventsNeedBind,
             maskExtraProps: maskAnimationEventsNeedBind,
             isFullScreen: this.state.isFullScreen,
@@ -181,8 +182,7 @@ class Modal extends 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(this.adapter);
     this.modalRef = /*#__PURE__*/React.createRef();
@@ -237,13 +237,6 @@ class Modal extends BaseComponent {
             isFullScreen
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -289,12 +282,6 @@ class Modal extends 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();
     }

package/lib/es/sideSheet/index.js

@@ -40,14 +40,11 @@ export default class SideSheet extends 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(this.adapter);
   }
@@ -94,13 +91,6 @@ export default class SideSheet extends BaseComponent {
             displayNone: displayNone
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -136,12 +126,6 @@ export default class SideSheet extends 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);
     }
@@ -193,7 +177,10 @@ export default class SideSheet extends 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__*/React.createElement(CSSAnimation, {
       motion: this.props.motion,
@@ -218,7 +205,7 @@ export default class SideSheet extends BaseComponent {
           animationStyle,
           animationEventsNeedBind
         } = _ref2;
-        return this.state.shouldRender ? /*#__PURE__*/React.createElement(SideSheetContent, Object.assign({}, contentProps, {
+        return shouldRender ? /*#__PURE__*/React.createElement(SideSheetContent, Object.assign({}, contentProps, {
           maskExtraProps: maskAnimationEventsNeedBind,
           wrapperExtraProps: animationEventsNeedBind,
           dialogClassName: animationClassName,

package/lib/es/tagInput/index.js

@@ -420,9 +420,11 @@ class TagInput extends 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__*/React.createElement(SortableList, {
         useDragHandle: true,
+        helperClass: "".concat(prefixCls, "-drag-item-move"),
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"

package/lib/es/transfer/index.js

@@ -19,7 +19,30 @@ import Spin from '../spin';
 import Button from '../button';
 import Tree from '../tree';
 import { IconClose, IconSearch, IconHandle } from '@douyinfe/semi-icons';
-const prefixcls = cssClasses.PREFIX;
+const prefixcls = cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
+
+const SortableItem = SortableElement(props => props.item.node);
+const SortableList = SortableContainer(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixcls, "-right-list"),
+    role: "list",
+    "aria-label": "Selected list"
+  }, items.map((item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore skip SortableItem type check
+  React.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
+});
 
 class Transfer extends BaseComponent {
   constructor(props) {
@@ -462,34 +485,16 @@ class Transfer extends 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__*/React.createElement("div", {
-        className: "".concat(prefixcls, "-right-list"),
-        role: "list",
-        "aria-label": "Selected list"
-      }, items.map((item, index) =>
-      /*#__PURE__*/
-      // @ts-ignore skip SortableItem type check
-      React.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__*/React.createElement(SortableList, {
       useDragHandle: true,
+      helperClass: "".concat(prefixcls, "-right-item-drag-item-move"),
       onSortEnd: this.onSortEnd,
-      items: selectedData
+      items: sortableListItems
     });
     return sortList;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.23.0",
+    "version": "2.23.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -18,11 +18,11 @@
     ],
     "dependencies": {
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.23.0",
-        "@douyinfe/semi-foundation": "2.23.0",
-        "@douyinfe/semi-icons": "2.23.0",
+        "@douyinfe/semi-animation-react": "2.23.1",
+        "@douyinfe/semi-foundation": "2.23.1",
+        "@douyinfe/semi-icons": "2.23.1",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.23.0",
+        "@douyinfe/semi-theme-default": "2.23.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "a5195872c7df1a97551c6c23357bdb941b8fa807",
+    "gitHead": "3960e35ea5c7244e5adbc9cb938330e9a6ee43e2",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.23.0",
+        "@douyinfe/semi-scss-compile": "2.23.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",