chore(ui:tabs): remove dDraggable prop

DevCloudFE · Jan 19, 2022 · 91090a4 · 91090a4
1 parent 6f024fd
commit 91090a4
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 111 deletions.
diff --git a/packages/ui/src/components/tabs/README.md b/packages/ui/src/components/tabs/README.md
@@ -23,13 +23,11 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 | dCenter | Tab centered | boolean | false |
 | dType | Tab style | 'wrap' \| 'slider' | - |
 | dSize | Tab size | 'smaller' \| 'larger' | - |
-| dDraggable | Whether it can be dragged | boolean | false |
 | dDropdownProps | Custom drop-down menu | [DDropdownProps](/components/Dropdown#DDropdownProps) | - |
 | dTabAriaLabel | Provide the `aria-label` attribute of tablist | string | - |
 | onActiveChange | Callback when the active tab item is changed | `(id: string) => void` | - |
 | onAddClick | Add tab callback, provide this value to enable the function of adding tabs | `() => void` | - |
 | onClose | Callback when the tab is closed | `(id: string) => void` | - |
-| onOrderChange | Callback when the order of tabs changes when dragging is enabled | `(order: string[]) => void` | - |
 <!-- prettier-ignore-end -->
 
 ### DTabProps

diff --git a/packages/ui/src/components/tabs/README.zh-Hant.md b/packages/ui/src/components/tabs/README.zh-Hant.md
@@ -22,13 +22,11 @@ title: 页签面板
 | dCenter | 页签居中 | boolean | false |
 | dType | 页签样式 | 'wrap' \| 'slider' | - |
 | dSize | 页签尺寸 | 'smaller' \| 'larger' | - |
-| dDraggable | 是否可拖拽 | boolean | false |
 | dDropdownProps | 自定义下拉菜单 | [DDropdownProps](/components/Dropdown#DDropdownProps) | - |
 | dTabAriaLabel | 提供 tablist 的 `aria-label` 属性 | string | - |
 | onActiveChange | 活动页签项改变的回调 | `(id: string) => void` | - |
 | onAddClick | 添加页签的回调，提供该值启用添加页签的功能 | `() => void` | - |
 | onClose | 页签关闭的回调 | `(id: string) => void` | - |
-| onOrderChange | 启用拖拽时，页签顺序改变的回调 | `(order: string[]) => void` | - |
 <!-- prettier-ignore-end -->
 
 ### DTabProps

diff --git a/packages/ui/src/components/tabs/Tabs.tsx b/packages/ui/src/components/tabs/Tabs.tsx
@@ -7,7 +7,6 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 
 import { usePrefixConfig, useComponentConfig, useImmer, useTwoWayBinding, useRefCallback, useAsync, useTranslation } from '../../hooks';
 import { generateComponentMate, getClassName, toId } from '../../utils';
-import { DDragPlaceholder, DDrop } from '../drag-drop';
 import { DDropdown, DDropdownItem } from '../dropdown';
 import { DIcon } from '../icon';
 
@@ -27,13 +26,11 @@ export interface DTabsProps extends React.HTMLAttributes<HTMLDivElement> {
   dCenter?: boolean;
   dType?: 'wrap' | 'slider';
   dSize?: 'smaller' | 'larger';
-  dDraggable?: boolean;
   dDropdownProps?: DDropdownProps;
   dTabAriaLabel?: string;
   onActiveChange?: (id: string | null) => void;
   onAddClick?: () => void;
   onClose?: (id: string) => void;
-  onOrderChange?: (order: string[]) => void;
 }
 
 const { COMPONENT_NAME } = generateComponentMate('DTabs');
@@ -44,13 +41,11 @@ export function DTabs(props: DTabsProps) {
     dCenter = false,
     dType,
     dSize,
-    dDraggable = false,
     dDropdownProps,
     dTabAriaLabel,
     onActiveChange,
     onAddClick,
     onClose,
-    onOrderChange,
     className,
     children,
     ...restProps
@@ -159,19 +154,6 @@ export function DTabs(props: DTabsProps) {
     }, 20);
   }, [asyncCapture, dPrefix, isHorizontal, setDotStyle, tablistEl]);
 
-  const handleListChange = useCallback(
-    (list: Array<{ id: string }>) => {
-      onOrderChange?.(list.map((item) => item.id));
-    },
-    [onOrderChange]
-  );
-  const handleDragStart = useCallback(() => {
-    setDotStyle({});
-  }, [setDotStyle]);
-  const handleDragEnd = useCallback(() => {
-    getDotStyle();
-  }, [getDotStyle]);
-
   const handleAddClick = useCallback(() => {
     onAddClick?.();
   }, [onAddClick]);
@@ -229,11 +211,11 @@ export function DTabs(props: DTabsProps) {
         tabIndex,
       });
 
-      return dDraggable ? { id: child.props.dId, node } : node;
+      return node;
     });
 
     return [childs, tabpanels] as const;
-  }, [children, dDraggable, dPrefix]);
+  }, [children, dPrefix]);
 
   const stateBackflow = useMemo<Pick<DTabsContextData, 'updateTabEls' | 'removeTabEls'>>(
     () => ({
@@ -288,26 +270,7 @@ export function DTabs(props: DTabsProps) {
             aria-label={dTabAriaLabel}
             aria-orientation={isHorizontal ? 'horizontal' : 'vertical'}
           >
-            {dDraggable ? (
-              <DDrop
-                dContainer={tablistWrapperEl}
-                dDirection={isHorizontal ? 'horizontal' : 'vertical'}
-                dPlaceholder={<DDragPlaceholder />}
-                dList={[
-                  childs as Array<{
-                    id: string;
-                    node: React.ReactElement;
-                  }>,
-                ]}
-                dItemRender={(item) => item.node}
-                dGetId={(item) => item.id}
-                onListChange={handleListChange}
-                onDragStart={handleDragStart}
-                onDragEnd={handleDragEnd}
-              ></DDrop>
-            ) : (
-              childs
-            )}
+            {childs}
             {(listOverflow || onAddClick) && (
               <div className={`${dPrefix}tabs__button-container`}>
                 {listOverflow && (

diff --git a/packages/ui/src/components/tabs/demos/8.Drag.md b/packages/ui/src/components/tabs/demos/8.Drag.md