From c48c712371bca05206bd19dc712b8ac5807141d9 Mon Sep 17 00:00:00 2001 From: linxianxi <47104575+linxianxi@users.noreply.github.com> Date: Mon, 13 Feb 2023 10:29:12 +0800 Subject: [PATCH] demo: remove react-dnd, use dnd-kit (#40674) * demo: remove react-dnd, use dnd-kit * change type --- .jest.js | 12 +- .../__snapshots__/demo-extend.test.ts.snap | 72 ++++--- .../__tests__/__snapshots__/demo.test.ts.snap | 72 ++++--- components/tabs/demo/custom-tab-bar-node.md | 10 +- components/tabs/demo/custom-tab-bar-node.tsx | 201 ++++++++---------- .../__snapshots__/demo-extend.test.ts.snap | 37 +++- .../__tests__/__snapshots__/demo.test.ts.snap | 35 ++- components/upload/demo/drag-sorting.md | 17 +- components/upload/demo/drag-sorting.tsx | 132 +++++------- package.json | 3 - 10 files changed, 295 insertions(+), 296 deletions(-) diff --git a/.jest.js b/.jest.js index 032db07f8e..44cc2e7595 100644 --- a/.jest.js +++ b/.jest.js @@ -1,14 +1,4 @@ -const compileModules = [ - 'array-move', - 'react-dnd', - 'react-dnd-html5-backend', - '@react-dnd', - 'dnd-core', - 'react-sticky-box', - 'tween-one', - '@babel', - '@ant-design', -]; +const compileModules = ['dnd-core', 'react-sticky-box', 'tween-one', '@babel', '@ant-design']; const ignoreList = []; diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index bb371a0449..b9ea150241 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1089,54 +1089,60 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context c style="transform:translate(0px, 0px)" >
{ - index: React.Key; - moveNode: (dragIndex: React.Key, hoverIndex: React.Key) => void; + 'data-node-key': string; + onActiveBarTransform: (className: string) => void; } -const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps) => { - const ref = useRef(null); - - const [{ isOver }, drop] = useDrop({ - accept: type, - collect: (monitor) => { - const { index: dragIndex } = monitor.getItem() || {}; - if (dragIndex === index) { - return {}; - } - return { - isOver: monitor.isOver(), - }; - }, - drop: (item: { index: React.Key }) => { - moveNode(item.index, index); - }, +const DraggableTabNode = ({ className, onActiveBarTransform, ...props }: DraggableTabPaneProps) => { + const { attributes, listeners, setNodeRef, transform, transition, isSorting } = useSortable({ + id: props['data-node-key'], }); - const [, drag] = useDrag({ - type, - item: { index }, - collect: (monitor) => ({ - isDragging: monitor.isDragging(), - }), - }); - drop(drag(ref)); - // Style - const style: React.CSSProperties = { marginRight: 24 }; - if (isOver) { - style.transition = 'all 0.3s'; - } - - return ( -
- {children} -
- ); -}; - -const DraggableTabs: React.FC = (props) => { - const { items = [] } = props; - const [order, setOrder] = useState([]); - - const moveTabNode = (dragKey: React.Key, hoverKey: React.Key) => { - const newOrder = order.slice(); - - items.forEach((item) => { - if (item.key && newOrder.indexOf(item.key) === -1) { - newOrder.push(item.key); - } - }); - - const dragIndex = newOrder.indexOf(dragKey); - const hoverIndex = newOrder.indexOf(hoverKey); - - newOrder.splice(dragIndex, 1); - newOrder.splice(hoverIndex, 0, dragKey); - - setOrder(newOrder); + const style: React.CSSProperties = { + ...props.style, + transform: CSS.Transform.toString(transform), + transition, + cursor: 'move', }; - const renderTabBar: TabsProps['renderTabBar'] = (tabBarProps, DefaultTabBar) => ( - - {(node) => ( - - {node} - - )} - - ); - - const orderItems = [...items].sort((a, b) => { - const orderA = order.indexOf(a.key!); - const orderB = order.indexOf(b.key!); - - if (orderA !== -1 && orderB !== -1) { - return orderA - orderB; - } - if (orderA !== -1) { - return -1; - } - if (orderB !== -1) { - return 1; + useEffect(() => { + if (!isSorting) { + onActiveBarTransform(''); + } else if (className?.includes('ant-tabs-tab-active')) { + onActiveBarTransform( + css` + .ant-tabs-ink-bar { + transform: ${CSS.Transform.toString(transform)}; + transition: ${transition} !important; + } + `, + ); } + }, [className, isSorting, transform]); - const ia = items.indexOf(a); - const ib = items.indexOf(b); - - return ia - ib; + return React.cloneElement(props.children as React.ReactElement, { + ref: setNodeRef, + style, + ...attributes, + ...listeners, }); +}; + +const App: React.FC = () => { + const [items, setItems] = useState([ + { + key: '1', + label: `Tab 1`, + children: 'Content of Tab Pane 1', + }, + { + key: '2', + label: `Tab 2`, + children: 'Content of Tab Pane 2', + }, + { + key: '3', + label: `Tab 3`, + children: 'Content of Tab Pane 3', + }, + ]); + + const [className, setClassName] = useState(''); + + const sensor = useSensor(PointerSensor, { activationConstraint: { distance: 10 } }); + + const onDragEnd = ({ active, over }: DragEndEvent) => { + if (active.id !== over?.id) { + setItems((prev) => { + const activeIndex = prev.findIndex((i) => i.key === active.id); + const overIndex = prev.findIndex((i) => i.key === over?.id); + return arrayMove(prev, activeIndex, overIndex); + }); + } + }; return ( - - - + ( + + i.key)} strategy={horizontalListSortingStrategy}> + + {(node) => ( + + {node} + + )} + + + + )} + /> ); }; -const App: React.FC = () => ( - { - const id = String(i + 1); - return { - label: `tab ${id}`, - key: id, - children: `Content of Tab Pane ${id}`, - }; - })} - /> -); - export default App; diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap index 308d0e811d..9d4c94182d 100644 --- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -668,8 +668,13 @@ exports[`renders ./components/upload/demo/drag-sorting.tsx extend context correc class="ant-upload-list-item-container" >
diff --git a/components/upload/__tests__/__snapshots__/demo.test.ts.snap b/components/upload/__tests__/__snapshots__/demo.test.ts.snap index 422acfb246..4955e89bd0 100644 --- a/components/upload/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/upload/__tests__/__snapshots__/demo.test.ts.snap @@ -644,8 +644,13 @@ exports[`renders ./components/upload/demo/drag-sorting.tsx correctly 1`] = ` class="ant-upload-list-item-container" >
>; - file: UploadFile; - fileList: UploadFile[]; - moveRow: (dragIndex: any, hoverIndex: any) => void; + file: UploadFile; } -const DragableUploadListItem = ({ - originNode, - moveRow, - file, - fileList, -}: DragableUploadListItemProps) => { - const ref = useRef(null); - const index = fileList.indexOf(file); - const [{ isOver, dropClassName }, drop] = useDrop({ - accept: type, - collect: (monitor) => { - const { index: dragIndex } = monitor.getItem() || {}; - if (dragIndex === index) { - return {}; - } - return { - isOver: monitor.isOver(), - dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward', - }; - }, - drop: (item: any) => { - moveRow(item.index, index); - }, +const DragableUploadListItem = ({ originNode, file }: DragableUploadListItemProps) => { + const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ + id: file.uid, }); - const [, drag] = useDrag({ - type, - item: { index }, - collect: (monitor) => ({ - isDragging: monitor.isDragging(), - }), - }); - drop(drag(ref)); - const errorNode = {originNode.props.children}; + + const style: React.CSSProperties = { + transform: CSS.Transform.toString(transform), + transition, + cursor: 'move', + }; + + // prevent preview event when drag end + const className = isDragging + ? css` + a { + pointer-events: none; + } + ` + : ''; + return ( -
- {file.status === 'error' ? errorNode : originNode} +
+ {/* hide error tooltip when dragging */} + {file.status === 'error' && isDragging ? originNode.props.children : originNode}
); }; @@ -91,41 +79,35 @@ const App: React.FC = () => { }, ]); - const moveRow = useCallback( - (dragIndex: number, hoverIndex: number) => { - const dragRow = fileList[dragIndex]; - setFileList((currentFileList) => { - const newFileList = [...currentFileList]; - newFileList.splice(dragIndex, 1); - newFileList.splice(hoverIndex, 0, dragRow); - return newFileList; + const onDragEnd = ({ active, over }: DragEndEvent) => { + if (active.id !== over?.id) { + setFileList((prev) => { + const activeIndex = prev.findIndex((i) => i.uid === active.id); + const overIndex = prev.findIndex((i) => i.uid === over?.id); + return arrayMove(prev, activeIndex, overIndex); }); - }, - [fileList], - ); + } + }; const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => { setFileList(newFileList); }; return ( - - ( - - )} - > - - - + + i.uid)} strategy={verticalListSortingStrategy}> + ( + + )} + > + + + + ); }; diff --git a/package.json b/package.json index 4d1ac28b58..a91dd7048e 100644 --- a/package.json +++ b/package.json @@ -196,7 +196,6 @@ "@typescript-eslint/parser": "^5.40.0", "antd-img-crop": "^4.2.8", "antd-token-previewer": "^1.1.0-21", - "array-move": "^4.0.0", "chalk": "^4.0.0", "cheerio": "1.0.0-rc.12", "cross-env": "^7.0.0", @@ -256,8 +255,6 @@ "react-color": "^2.17.3", "react-copy-to-clipboard": "^5.0.1", "react-countup": "^6.4.0", - "react-dnd": "^16.0.0", - "react-dnd-html5-backend": "^16.0.0", "react-dom": "^18.0.0", "react-draggable": "^4.4.3", "react-fast-marquee": "^1.2.1",