feat: New tabs (#265)

* init

* accessibility link

* add line

* support extra

* move tabpanel into components

* add overflow example

* add measure

* auto ellipsis

* add more

* fix ts error

* scroll tabs

* update more

* accessibility improvement

* move into TabPane

* add className

* animation

* visited render

* add bottom style

* support left right

* left right scroll bar

* use scroll instead of hidden

* fix holder added

* update scroll logic

* connect renderTabBar

* support sticky

* support react dnd

* fix ts define

* touch to show

* init to scroll

* click to scroll

* trigger now

* trigger now

* init test

* test case

* add more test case

* fix gutter logic

* use offsetLeft to help on calculation

* fix gutter logic

* gutter test case

* add cleanup

* mobile test

* coverage

* more test case

* not crash onScrol

* update dem

* fix resize logic

* update layout

* add rtl className

* tabPane rtl

* gutter rtl

* fix adjust logic

* fix rtl

* rtl it

* update mix demo

* update mix demo to reproduce

* fix logic

* unique collction

* fix style

* fix style

* use hover display

* not allow in dropdown

* update snapshot

* fix snapshot

* support aria label of dropdown

* rm useless test case

* fix relative position

* fix rtl switch

* full coverage

* fix lint

* use scroll

* fix offset of scroller

* clean up content

* fix scroll

* update snapshot

* resize of measure

* add editable

* remove event

* auto reactive when removed active key

* update pin operation logic

* remove operation in mobile

* move add button out

* remove animate when no need

* add button logic update

* fix re-children logic

* update remove style

* update style

* update style

* support gutter

* add scroll logic

* clean up

* update destroy intactive

* fix typo

* fix mobile

* fix test case

* raise coverage

* update coverage

* adjust logic

* touch to scroll

* fix mac scroll

* not accessible in screen reader

* show add when editable

* wheel opt

* auto realign

* scroll correct

* lock touch moving

* adjust scroll smooth

* fix scroll dropdown

* fix rtl

* update animated

* update hidden style

* remove to keep the blink

* support key tab

* fix test case

* fix mobile

* fix logic

* fix scroll prevent logic

* opt code

* fix scroll on keyboard

* fix test case

* rm useless code

* fix coverage

* vertiacal test

* line 100% coverage

* fix warning

* fix additional moving

* update test case

* clean up

.eslintrc.js

@@ -4,20 +4,23 @@ module.exports = {
   ...base,
   rules: {
     ...base.rules,
+    'default-case': 0,
     'react/sort-comp': 0,
     'react/no-array-index-key': 0,
     'react/no-access-state-in-setstate': 0,
     'no-plusplus': 0,
     'no-param-reassign': 0,
     'react/require-default-props': 0,
-    'react/require-default-props': 0,
     'no-underscore-dangle': 0,
     'react/no-find-dom-node': 0,
     'no-mixed-operators': 0,
     'prefer-destructuring': 0,
     'react/no-unused-prop-types': 0,
     'max-len': 0,
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": true, "optionalDependencies": false, "peerDependencies": false}],
-    'brace-style': 0
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: true, optionalDependencies: false, peerDependencies: false },
+    ],
+    'brace-style': 0,
   },
 };

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

assets/dropdown.less

@@ -0,0 +1,32 @@
+@tabs-prefix-cls: rc-tabs;
+
+.@{tabs-prefix-cls}-dropdown {
+  position: absolute;
+  background: #fefefe;
+  border: 1px solid black;
+  max-height: 200px;
+  overflow: auto;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-menu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &-item {
+      padding: 4px 8px;
+
+      &-selected {
+        background: red;
+      }
+
+      &-disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

assets/index.less

@@ -1,11 +1,104 @@
+@import './dropdown.less';
+@import './panels.less';
+@import './position.less';
+@import './rtl.less';
+
 @tabs-prefix-cls: rc-tabs;
 
 @easing-in-out: cubic-bezier(0.35, 0, 0.25, 1);
 
-@effect-duration: .3s;
+@effect-duration: 0.3s;
+
+.@{tabs-prefix-cls} {
+  border: 1px solid gray;
+  font-size: 14px;
+  overflow: hidden;
+
+  // ========================== Navigation ==========================
+  &-nav {
+    display: flex;
+    flex: none;
+    position: relative;
+
+    &-measure,
+    &-wrap {
+      transform: translate(0);
+      position: relative;
+      display: inline-block;
+      flex: auto;
+      white-space: nowrap;
+      overflow: hidden;
+      display: flex;
+    }
+
+    &-list {
+      display: flex;
+      position: relative;
+      transition: transform 0.3s;
+    }
+
+    // >>>>>>>> Operations
+    &-operations {
+      display: flex;
+
+      &-hidden {
+        position: absolute;
+        visibility: hidden;
+        pointer-events: none;
+      }
+    }
+
+    &-more {
+      border: 1px solid blue;
+      background: rgba(255, 0, 0, 0.1);
+    }
+    &-add {
+      border: 1px solid green;
+      background: rgba(0, 255, 0, 0.1);
+    }
+  }
+
+  &-tab {
+    border: 0;
+    font-size: 20px;
+    background: rgba(255, 255, 255, 0.5);
+    margin: 0;
+    padding: 8px 16px;
+    outline: none;
+    cursor: pointer;
+    position: relative;
+
+    &-with-remove {
+      padding-right: 32px;
+    }
+
+    &-remove {
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      &:hover {
+        color: red;
+      }
+    }
+
+    &:focus {
+      background: rgba(0, 0, 255, 0.1);
+    }
+  }
+
+  &-ink-bar {
+    position: absolute;
+    background: red;
+    pointer-events: none;
+
+    &-animated {
+      transition: all 0.3s;
+    }
+  }
 
-@import "index/common";
-@import "index/left";
-@import "index/right";
-@import "index/bottom";
-@import "index/top";
+  &-extra-content {
+    flex: none;
+  }
+}