feat: tabs activeKey support number

tangjinzhou · tangjinzhou · commit 06fe9ec93596 · 2019-01-07T20:51:57.000+08:00
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -309,6 +309,118 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
+<div>
+  <div class="ant-select ant-select-enabled" style="width: 200px;">
+    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
+      <div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+    </div>
+  </div>
+  <div class="ant-select ant-select-enabled" style="width: 200px;">
+    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
+      <div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+    </div>
+  </div>
+  <div class="ant-select ant-select-enabled" style="width: 200px;">
+    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
+      <div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+    </div>
+  </div>
+  <div class="ant-select ant-select-enabled" style="width: 200px;">
+    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
+      <div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+    </div>
+  </div>
+  <div class="ant-tabs ant-tabs-top ant-tabs-line no-flex">
+    <div role="tablist" tabindex="0" class="ant-tabs-bar ant-tabs-top-bar">
+      <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><i class="ant-tabs-tab-prev-icon-target anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><i class="ant-tabs-tab-next-icon-target anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></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 role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">Tab 1</div>
+                <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 2</div>
+              </div>
+              <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="display: block; transform: translate3d(0px,0,0); -webkit-transform: translate3d(0px,0,0); width: 0px;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+    <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: 0%;">
+      <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+        <div class="ant-tabs ant-tabs-top ant-tabs-line no-flex" style="height: 300px;">
+          <div role="tablist" tabindex="0" class="ant-tabs-bar ant-tabs-top-bar">
+            <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><i class="ant-tabs-tab-prev-icon-target anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></svg></i></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><i class="ant-tabs-tab-next-icon-target anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><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"></path></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 role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 0</div>
+                      <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">Tab 1</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 2</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 3</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 4</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 5</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 6</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 7</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 8</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 9</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 10</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 11</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 12</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 13</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 14</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 15</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 16</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 17</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 18</div>
+                      <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">Tab 19</div>
+                    </div>
+                    <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="display: block; transform: translate3d(0px,0,0); -webkit-transform: translate3d(0px,0,0); width: 0px;"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+          <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: -100%;">
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+              <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>TTTT 1<div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+            </div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+            <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+          </div>
+          <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+        </div>
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+      </div>
+      <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+    </div>
+    <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
 <div style="width: 500px;">
   <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>right</span></label></div>
diff --git a/components/tabs/demo/nest.md b/components/tabs/demo/nest.md
@@ -0,0 +1,59 @@
+### for debug
+<cn>
+#### 基本
+默认选中第一项。
+</cn>
+
+<us>
+#### Nest
+Default activate first tab.
+</us>
+
+```html
+<template>
+<div>
+  <a-select style="width: 200px" v-model="parentPos">
+      <a-select-option v-for="pos in positionList" :key="pos" :value="pos">Parent - {{pos}}</a-select-option>
+  </a-select>
+
+  <a-select style="width: 200px" v-model="childPos">
+    <a-select-option v-for="pos in positionList" :key="pos" :value="pos">Child - {{pos}}</a-select-option>
+  </a-select>
+
+  <a-select style="width: 200px" v-model="parentType">
+    <a-select-option value="line">Parent - line</a-select-option>
+    <a-select-option value="card">Parent - card</a-select-option>
+  </a-select>
+
+  <a-select style="width: 200px" v-model="childType">
+    <a-select-option value="line">Child - line</a-select-option>
+    <a-select-option value="card">Child - card</a-select-option>
+  </a-select>
+
+  <a-tabs defaultActiveKey="1" :tabPosition="parentPos" :type="parentType">
+    <a-tab-pane tab="Tab 1" key="1">
+      <a-tabs :defaultActiveKey="1" :tabPosition="childPos" :type="childType" style="height: 300px">
+        <a-tab-pane v-for="key in list" :tab="`Tab ${key}`" :key="key">TTTT {{key}}</a-tab-pane>
+      </a-tabs>
+    </a-tab-pane>
+    <a-tab-pane tab="Tab 2" key="2">Content of Tab Pane 2</a-tab-pane>
+  </a-tabs>
+</div>
+</template>
+<script>
+const positionList = ['left', 'right', 'top', 'bottom'];
+const list = new Array(20).fill().map((_, index) => index);
+export default {
+  data () {
+    return {
+      positionList,
+      list,
+      parentPos: undefined,
+      childPos: undefined,
+      parentType: undefined,
+      childType: undefined,
+    }
+  },
+}
+</script>
+```
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
@@ -12,8 +12,14 @@ export default {
   name: 'ATabs',
   props: {
     prefixCls: PropTypes.string.def('ant-tabs'),
-    activeKey: PropTypes.string,
-    defaultActiveKey: PropTypes.string,
+    activeKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    defaultActiveKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     hideAdd: PropTypes.bool.def(false),
     tabBarStyle: PropTypes.object,
     tabBarExtraContent: PropTypes.oneOfType([
diff --git a/components/vc-tabs/src/InkTabBarNode.jsx b/components/vc-tabs/src/InkTabBarNode.jsx
@@ -84,7 +84,10 @@ export default {
     saveRef: PropTypes.func.def(() => {}),
     getRef: PropTypes.func.def(() => {}),
     panels: PropTypes.array,
-    activeKey: PropTypes.string,
+    activeKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
   },
   updated () {
     this.$nextTick(function () {
diff --git a/components/vc-tabs/src/TabBarTabsNode.jsx b/components/vc-tabs/src/TabBarTabsNode.jsx
@@ -10,7 +10,10 @@ export default {
   name: 'TabBarTabsNode',
   mixins: [BaseMixin],
   props: {
-    activeKey: PropTypes.string,
+    activeKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     panels: PropTypes.any.def([]),
     prefixCls: PropTypes.string.def(''),
     tabBarGutter: PropTypes.any.def(null),
diff --git a/components/vc-tabs/src/TabContent.jsx b/components/vc-tabs/src/TabContent.jsx
@@ -1,3 +1,4 @@
+import PropTypes from '../../_util/vue-types'
 import { cloneElement } from '../../_util/vnode'
 import {
   getTransformByIndex,
@@ -14,7 +15,10 @@ export default {
       default: 'ant-tabs',
       type: String,
     },
-    activeKey: String,
+    activeKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     tabBarPosition: String,
   },
   computed: {
diff --git a/components/vc-tabs/src/Tabs.jsx b/components/vc-tabs/src/Tabs.jsx
@@ -39,8 +39,14 @@ export default {
     children: PropTypes.any.def([]),
     prefixCls: PropTypes.string.def('ant-tabs'),
     tabBarPosition: PropTypes.string.def('top'),
-    activeKey: PropTypes.string,
-    defaultActiveKey: PropTypes.string,
+    activeKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    defaultActiveKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     __propsSymbol__: PropTypes.any,
   },
   data () {
