@douyinfe/semi-ui 2.40.0-beta.0 → 2.41.0-beta.0

package/lib/es/transfer/index.js

@@ -13,7 +13,6 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import React from 'react';
 import cls from 'classnames';
-import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import PropTypes from 'prop-types';
 import TransferFoundation from '@douyinfe/semi-foundation/lib/es/transfer/foundation';
 import { _generateDataByType, _generateSelectedItems } from '@douyinfe/semi-foundation/lib/es/transfer/transferUtils';
@@ -27,34 +26,69 @@ import Spin from '../spin';
 import Button from '../button';
 import Tree from '../tree';
 import { IconClose, IconSearch, IconHandle } from '@douyinfe/semi-icons';
+import { Sortable } from '../_sortable';
+import { verticalListSortingStrategy } from '@dnd-kit/sortable';
 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: `${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.key,
-    index: index,
-    item: item
-  })))
-  // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
-  ;
-}, {
-  distance: 10
-});
 class Transfer extends BaseComponent {
   constructor(props) {
     super(props);
     this._treeRef = null;
+    this.renderRightItem = (item, sortableHandle) => {
+      const {
+        renderSelectedItem,
+        draggable,
+        type,
+        showPath
+      } = this.props;
+      const onRemove = () => this.foundation.handleSelectOrRemove(item);
+      const rightItemCls = cls({
+        [`${prefixCls}-item`]: true,
+        [`${prefixCls}-right-item`]: true,
+        [`${prefixCls}-right-item-draggable`]: draggable
+      });
+      const shouldShowPath = type === strings.TYPE_TREE_TO_LIST && showPath === true;
+      const label = shouldShowPath ? this.foundation._generatePath(item) : item.label;
+      if (renderSelectedItem) {
+        return renderSelectedItem(Object.assign(Object.assign({}, item), {
+          onRemove,
+          sortableHandle
+        }));
+      }
+      const DragHandle = sortableHandle && sortableHandle(() => /*#__PURE__*/React.createElement(IconHandle, {
+        role: "button",
+        "aria-label": "Drag and sort",
+        className: `${prefixCls}-right-item-drag-handler`
+      }));
+      return (
+        /*#__PURE__*/
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+        React.createElement("div", {
+          role: "listitem",
+          className: rightItemCls,
+          key: item.key
+        }, draggable && sortableHandle ? /*#__PURE__*/React.createElement(DragHandle, null) : null, /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-right-item-text`
+        }, label), /*#__PURE__*/React.createElement(IconClose, {
+          onClick: onRemove,
+          "aria-disabled": item.disabled,
+          className: cls(`${prefixCls}-item-close-icon`, {
+            [`${prefixCls}-item-close-icon-disabled`]: item.disabled
+          })
+        }))
+      );
+    };
+    this.renderSortItem = props => {
+      const {
+        id,
+        sortableHandle
+      } = props;
+      const {
+        selectedItems
+      } = this.state;
+      const selectedData = [...selectedItems.values()];
+      const item = selectedData.find(item => item.key === id);
+      return this.renderRightItem(item, sortableHandle);
+    };
     const {
       defaultValue = [],
       dataSource,
@@ -421,50 +455,6 @@ class Transfer extends BaseComponent {
       "aria-label": "Option list"
     }, content);
   }
-  renderRightItem(item) {
-    const {
-      renderSelectedItem,
-      draggable,
-      type,
-      showPath
-    } = this.props;
-    const onRemove = () => this.foundation.handleSelectOrRemove(item);
-    const rightItemCls = cls({
-      [`${prefixCls}-item`]: true,
-      [`${prefixCls}-right-item`]: true,
-      [`${prefixCls}-right-item-draggable`]: draggable
-    });
-    const shouldShowPath = type === strings.TYPE_TREE_TO_LIST && showPath === true;
-    const label = shouldShowPath ? this.foundation._generatePath(item) : item.label;
-    if (renderSelectedItem) {
-      return renderSelectedItem(Object.assign(Object.assign({}, item), {
-        onRemove,
-        sortableHandle: SortableHandle
-      }));
-    }
-    const DragHandle = SortableHandle(() => /*#__PURE__*/React.createElement(IconHandle, {
-      role: "button",
-      "aria-label": "Drag and sort",
-      className: `${prefixCls}-right-item-drag-handler`
-    }));
-    return (
-      /*#__PURE__*/
-      // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-      React.createElement("div", {
-        role: "listitem",
-        className: rightItemCls,
-        key: item.key
-      }, draggable ? /*#__PURE__*/React.createElement(DragHandle, null) : null, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-right-item-text`
-      }, label), /*#__PURE__*/React.createElement(IconClose, {
-        onClick: onRemove,
-        "aria-disabled": item.disabled,
-        className: cls(`${prefixCls}-item-close-icon`, {
-          [`${prefixCls}-item-close-icon-disabled`]: item.disabled
-        })
-      }))
-    );
-  }
   renderEmpty(type, emptyText) {
     const emptyCls = cls({
       [`${prefixCls}-empty`]: true,
@@ -477,16 +467,14 @@ class Transfer extends BaseComponent {
     }, emptyText);
   }
   renderRightSortableList(selectedData) {
-    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: `${prefixCls}-right-item-drag-item-move`,
+    const sortItems = selectedData.map(item => item.key);
+    const sortList = /*#__PURE__*/React.createElement(Sortable, {
+      strategy: verticalListSortingStrategy,
       onSortEnd: this.onSortEnd,
-      items: sortableListItems
+      items: sortItems,
+      renderItem: this.renderSortItem,
+      prefix: `${prefixCls}-right-item`,
+      dragOverlayCls: `${prefixCls}-right-item-drag-item-move`
     });
     return sortList;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.40.0-beta.0",
+    "version": "2.41.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,6 +17,9 @@
         "lib/*"
     ],
     "dependencies": {
+        "@dnd-kit/core": "^6.0.8",
+        "@dnd-kit/sortable": "^7.0.2",
+        "@dnd-kit/utilities": "^3.2.1",
         "@douyinfe/semi-animation": "2.40.0-beta.0",
         "@douyinfe/semi-animation-react": "2.40.0-beta.0",
         "@douyinfe/semi-foundation": "2.40.0-beta.0",
@@ -31,7 +34,6 @@
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-resizable": "^1.8.0",
-        "react-sortable-hoc": "^2.0.0",
         "react-window": "^1.8.2",
         "resize-observer-polyfill": "^1.5.1",
         "scroll-into-view-if-needed": "^2.2.24",
@@ -69,7 +71,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "f42587885c81ecb266aa0d32d2feaa7633e01e67",
+    "gitHead": "f83f6076d1c6f3b64c1d9359a335a7182d991fb6",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",