update rc-tabs to support customize node (#14368)

close #9990
2025-01-19 06:43:16 +08:00 · 2019-01-16 20:00:23 +08:00 · 2019-01-16 20:00:23 +08:00 · 8c5683d316
commit 8c5683d316
parent 8896f7b4af
4 changed files with 298 additions and 1 deletions
--- a/components/tabs/TabBar.tsx
+++ b/components/tabs/TabBar.tsx
@ -50,6 +50,7 @@ export default class TabBar extends React.Component<TabsProps> {

    const renderProps = {
      ...this.props,
+      children: null,
      inkBarAnimated,
      extraContent: tabBarExtraContent,
      style: tabBarStyle,
--- a/components/tabs/tests/snapshots/demo.test.js.snap
+++ b/components/tabs/tests/snapshots/demo.test.js.snap
@ -829,6 +829,135 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
+<div
+  class="ant-tabs ant-tabs-top ant-tabs-line"
+>
+  <div
+    class="ant-tabs-bar ant-tabs-top-bar"
+    role="tablist"
+    tabindex="0"
+  >
+    <div
+      class="ant-tabs-nav-container"
+    >
+      <span
+        class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-prev-icon"
+        >
+          <i
+            aria-label="icon: left"
+            class="anticon anticon-left ant-tabs-tab-prev-icon-target"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="left"
+              fill="currentColor"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+              />
+            </svg>
+          </i>
+        </span>
+      </span>
+      <span
+        class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
+        unselectable="unselectable"
+      >
+        <span
+          class="ant-tabs-tab-next-icon"
+        >
+          <i
+            aria-label="icon: right"
+            class="anticon anticon-right ant-tabs-tab-next-icon-target"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="right"
+              fill="currentColor"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
+              />
+            </svg>
+          </i>
+        </span>
+      </span>
+      <div
+        class="ant-tabs-nav-wrap"
+      >
+        <div
+          class="ant-tabs-nav-scroll"
+        >
+          <div
+            class="ant-tabs-nav ant-tabs-nav-animated"
+          >
+            <div />
+            <div
+              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    role="presentation"
+    style="width:0;height:0;overflow:hidden;position:absolute"
+    tabindex="0"
+  />
+  <div
+    class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
+    style="margin-left:0%"
+  >
+    <div
+      aria-hidden="false"
+      class="ant-tabs-tabpane ant-tabs-tabpane-active"
+      role="tabpanel"
+    >
+      <div
+        role="presentation"
+        style="width:0;height:0;overflow:hidden;position:absolute"
+        tabindex="0"
+      />
+      Content of Tab Pane 1
+      <div
+        role="presentation"
+        style="width:0;height:0;overflow:hidden;position:absolute"
+        tabindex="0"
+      />
+    </div>
+    <div
+      aria-hidden="true"
+      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+      role="tabpanel"
+    />
+    <div
+      aria-hidden="true"
+      class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+      role="tabpanel"
+    />
+  </div>
+  <div
+    role="presentation"
+    style="width:0;height:0;overflow:hidden;position:absolute"
+    tabindex="0"
+  />
+</div>
+`;
+
 exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
 <div
  class="ant-tabs ant-tabs-top ant-tabs-line"
--- a/components/tabs/demo/custom-tab-bar-node.md
+++ b/components/tabs/demo/custom-tab-bar-node.md
@ -0,0 +1,167 @@
+---
+order: 13
+title:
+  zh-CN: 可拖拽标签
+  en-US: Draggable Tabs
+---
+
+## zh-CN
+
+使用 `react-dnd` 实现标签可拖拽。
+
+## en-US
+
+Use `react-dnd` to make tabs draggable.
+
+````jsx
+import { Tabs } from 'antd';
+import { DragDropContextProvider, DragSource, DropTarget } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+
+const TabPane = Tabs.TabPane;
+
+// Drag & Drop node
+class TabNode extends React.Component {
+  render() {
+		const {
+			connectDragSource,
+      connectDropTarget,
+      children,
+		} = this.props
+
+		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 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: [],
+  };
+
+  moveTabNode = (dragKey, hoverKey) => {
+    const newOrder = this.state.order.slice();
+    const { children } = this.props;
+
+    React.Children.forEach(children, (c) => {
+      if (newOrder.indexOf(c.key) === -1) {
+        newOrder.push(c.key);
+      }
+    });
+
+    const dragIndex = newOrder.indexOf(dragKey);
+    const hoverIndex = newOrder.indexOf(hoverKey);
+
+    newOrder.splice(dragIndex, 1);
+    newOrder.splice(hoverIndex, 0, dragKey);
+
+    this.setState({
+      order: newOrder,
+    });
+  };
+
+  renderTabBar = (props, DefaultTabBar) => (
+    <DefaultTabBar {...props}>
+      {node => (
+        <WrapTabNode key={node.key} index={node.key} moveTabNode={this.moveTabNode}>{node}</WrapTabNode>
+      )}
+    </DefaultTabBar>
+  );
+
+  render() {
+    const { order } = this.state;
+    const { children } = this.props;
+
+    const tabs = [];
+    React.Children.forEach(children, (c) => {
+      tabs.push(c);
+    });
+
+    const orderTabs = tabs.slice().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;
+      }
+
+      const ia = tabs.indexOf(a);
+      const ib = tabs.indexOf(b);
+
+      return ia - ib;
+    });
+
+    return (
+      <DragDropContextProvider backend={HTML5Backend}>
+        <Tabs
+          renderTabBar={this.renderTabBar}
+          {...this.props}
+        >
+          {orderTabs}
+        </Tabs>
+      </DragDropContextProvider>
+    );
+  }
+}
+
+ReactDOM.render(
+  <DraggableTabs>
+    <TabPane tab="tab 1" key="1">
+      Content of Tab Pane 1
+    </TabPane>
+    <TabPane tab="tab 2" key="2">
+      Content of Tab Pane 2
+    </TabPane>
+    <TabPane tab="tab 3" key="3">
+      Content of Tab Pane 3
+    </TabPane>
+  </DraggableTabs>
+, mountNode);
+````
--- a/package.json
+++ b/package.json
@ -75,7 +75,7 @@
    "rc-steps": "~3.3.0",
    "rc-switch": "~1.8.0",
    "rc-table": "~6.4.0",
-    "rc-tabs": "~9.5.2",
+    "rc-tabs": "~9.6.0",
    "rc-time-picker": "~3.5.0",
    "rc-tooltip": "~3.7.3",
    "rc-tree": "~1.14.6",