mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
chore(deps): update dependency react-dnd to v15 (#33940)
* chore(deps): update dependency react-dnd to v15 * fix: Tabs demo * fix: demo Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
renovate[bot]
GitHub
parent
19cc7d49e2
commit
9f30ca6b3f
@ -945,39 +945,54 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
|
||||
style="transform:translate(0px, 0px)"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-tab ant-tabs-tab-active"
|
||||
class=""
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
class="ant-tabs-tab ant-tabs-tab-active"
|
||||
>
|
||||
tab 1
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
tab 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-tab"
|
||||
class=""
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
class="ant-tabs-tab"
|
||||
>
|
||||
tab 2
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
tab 2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-tab"
|
||||
class=""
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
class="ant-tabs-tab"
|
||||
>
|
||||
tab 3
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
tab 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -831,39 +831,54 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
|
||||
style="transform:translate(0px, 0px)"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-tab ant-tabs-tab-active"
|
||||
class=""
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
class="ant-tabs-tab ant-tabs-tab-active"
|
||||
>
|
||||
tab 1
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
tab 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-tab"
|
||||
class=""
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
class="ant-tabs-tab"
|
||||
>
|
||||
tab 2
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
tab 2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-tab"
|
||||
class=""
|
||||
style="margin-right:24px"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
class="ant-tabs-tab"
|
||||
>
|
||||
tab 3
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-tabs-tab-btn"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
tab 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -7,60 +7,55 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `react-dnd` 实现标签可拖拽。
|
||||
使用 `react-dnd@15+` 实现标签可拖拽。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `react-dnd` to make tabs draggable.
|
||||
Use `react-dnd@15+` to make tabs draggable.
|
||||
|
||||
```jsx
|
||||
import React, { useRef, cloneElement } from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
|
||||
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
// Drag & Drop node
|
||||
class TabNode extends React.Component {
|
||||
render() {
|
||||
const { connectDragSource, connectDropTarget, children } = this.props;
|
||||
const type = 'DraggableTabNode';
|
||||
|
||||
return connectDragSource(connectDropTarget(children));
|
||||
}
|
||||
}
|
||||
|
||||
const cardTarget = {
|
||||
drop(props, monitor) {
|
||||
const dragKey = monitor.getItem().index;
|
||||
const hoverKey = props.index;
|
||||
|
||||
if (dragKey === hoverKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
props.moveTabNode(dragKey, hoverKey);
|
||||
monitor.getItem().index = hoverKey;
|
||||
},
|
||||
const DraggableTabNode = ({ index, children, moveNode }) => {
|
||||
const ref = useRef();
|
||||
const [{ isOver, dropClassName }, drop] = useDrop({
|
||||
accept: type,
|
||||
collect: monitor => {
|
||||
const { index: dragIndex } = monitor.getItem() || {};
|
||||
if (dragIndex === index) {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
isOver: monitor.isOver(),
|
||||
dropClassName: 'dropping',
|
||||
};
|
||||
},
|
||||
drop: item => {
|
||||
moveNode(item.index, index);
|
||||
},
|
||||
});
|
||||
const [, drag] = useDrag({
|
||||
type,
|
||||
item: { index },
|
||||
collect: monitor => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
drop(drag(ref));
|
||||
return (
|
||||
<div ref={ref} style={{ marginRight: 24 }} className={isOver ? dropClassName : ''}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const cardSource = {
|
||||
beginDrag(props) {
|
||||
return {
|
||||
id: props.id,
|
||||
index: props.index,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
}))(
|
||||
DragSource('DND_NODE', cardSource, (connect, monitor) => ({
|
||||
connectDragSource: connect.dragSource(),
|
||||
isDragging: monitor.isDragging(),
|
||||
}))(TabNode),
|
||||
);
|
||||
|
||||
class DraggableTabs extends React.Component {
|
||||
state = {
|
||||
order: [],
|
||||
@ -90,9 +85,9 @@ class DraggableTabs extends React.Component {
|
||||
renderTabBar = (props, DefaultTabBar) => (
|
||||
<DefaultTabBar {...props}>
|
||||
{node => (
|
||||
<WrapTabNode key={node.key} index={node.key} moveTabNode={this.moveTabNode}>
|
||||
<DraggableTabNode key={node.key} index={node.key} moveNode={this.moveTabNode}>
|
||||
{node}
|
||||
</WrapTabNode>
|
||||
</DraggableTabNode>
|
||||
)}
|
||||
</DefaultTabBar>
|
||||
);
|
||||
@ -151,3 +146,10 @@ ReactDOM.render(
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
.dropping {
|
||||
background: #fefefe;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
```
|
||||
|
||||
@ -247,7 +247,7 @@
|
||||
"react": "^17.0.1",
|
||||
"react-color": "^2.17.3",
|
||||
"react-copy-to-clipboard": "^5.0.1",
|
||||
"react-dnd": "^14.0.1",
|
||||
"react-dnd": "^15.0.0",
|
||||
"react-dnd-html5-backend": "^15.0.0",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-draggable": "^4.4.3",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user