@hi-ui/tabs 4.0.0-alpha.1 → 4.0.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +54 -0
  2. package/lib/cjs/TabInk.js +6 -5
  3. package/lib/cjs/TabInk.js.map +1 -1
  4. package/lib/cjs/TabItem.js +134 -5
  5. package/lib/cjs/TabItem.js.map +1 -1
  6. package/lib/cjs/TabList.js +132 -9
  7. package/lib/cjs/TabList.js.map +1 -1
  8. package/lib/cjs/Tabs.js +32 -6
  9. package/lib/cjs/Tabs.js.map +1 -1
  10. package/lib/cjs/index.js +3 -0
  11. package/lib/cjs/index.js.map +1 -1
  12. package/lib/cjs/styles/index.scss.js +1 -1
  13. package/lib/esm/TabInk.js +6 -5
  14. package/lib/esm/TabInk.js.map +1 -1
  15. package/lib/esm/TabItem.js +134 -6
  16. package/lib/esm/TabItem.js.map +1 -1
  17. package/lib/esm/TabList.js +133 -11
  18. package/lib/esm/TabList.js.map +1 -1
  19. package/lib/esm/Tabs.js +31 -5
  20. package/lib/esm/Tabs.js.map +1 -1
  21. package/lib/esm/index.js +1 -0
  22. package/lib/esm/index.js.map +1 -1
  23. package/lib/esm/styles/index.scss.js +1 -1
  24. package/lib/types/TabInk.d.ts +1 -0
  25. package/lib/types/TabItem.d.ts +16 -1
  26. package/lib/types/TabList.d.ts +24 -4
  27. package/lib/types/TabPane.d.ts +2 -1
  28. package/lib/types/Tabs.d.ts +29 -4
  29. package/lib/types/index.d.ts +1 -0
  30. package/package.json +8 -7
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs .hi-v4-tabs__list {\n position: relative;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #000;\n color: var(--hi-v4-color-static-black, #000);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: hidden; }\n.hi-v4-tabs .hi-v4-tabs__list::before {\n content: '';\n clear: both;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 1px;\n background-color: #e5e7eb;\n background-color: var(--hi-v4-color-gray-200, #e5e7eb);\n display: block; }\n.hi-v4-tabs .hi-v4-tabs__list--inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-tabs__ink {\n position: absolute;\n bottom: 0;\n right: auto;\n top: auto;\n height: 2px;\n background-color: #4387f4;\n background-color: var(--hi-v4-color-brandblue-500, #4387f4);\n -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n line-height: 22px;\n padding: 8px 0;\n margin: 0 16px;\n cursor: pointer; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n color: #4387f4;\n color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tabs__item--active {\n color: #4387f4;\n color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tabs__item--disabled {\n color: #6b7280 !important;\n color: var(--hi-v4-color-gray-500, #6b7280) !important;\n cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n width: 100%;\n overflow: hidden;\n padding-top: 16px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n";
15
+ var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs__add-btn {\n cursor: pointer; }\n.hi-v4-tabs__close-btn {\n cursor: pointer;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n margin-left: 4px;\n margin-left: var(--hi-v4-spacing-2, 4px);\n -webkit-transition: color 0.3s;\n transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list {\n position: relative;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: hidden;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n margin: 0;\n padding: 8px 20px;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px 4px 0 0;\n border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 4px 4px 4px 0;\n margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n padding: 4px 20px;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc {\n padding: 0 20px;\n padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n background: #f5f7fa;\n background: var(--hi-v4-color-gray-50, #f5f7fa);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 20px 12px 20px 0;\n margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n padding: 16px 20px;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item {\n margin: 0;\n padding: 8px 20px;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n border-radius: 4px 0 0 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 0 0 4px 0;\n margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n padding: 4px 20px;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 0 0 12px 0;\n margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n padding: 16px 20px;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background: #f5f7fa;\n background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--inner {\n width: auto;\n display: block;\n position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--scroll {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item {\n line-height: 1.5rem;\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: 8px 20px;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--prev {\n border-top: 1px dashed #237ffa;\n border-top: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n border-left: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--next {\n border-bottom: 1px dashed #237ffa;\n border-bottom: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n border-right: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__content {\n padding-left: 16px;\n padding-top: 0; }\n.hi-v4-tabs--vertical .hi-v4-tabs__ink {\n position: absolute;\n left: 0;\n bottom: auto;\n width: 2px;\n background-color: #237ffa;\n background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__ink {\n position: absolute;\n bottom: 0;\n right: auto;\n top: auto;\n height: 2px;\n background-color: #237ffa;\n background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n line-height: 1.5rem;\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: 8px 20px;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n cursor: pointer;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--prev {\n border-left: 1px dashed #237ffa;\n border-left: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--next {\n border-right: 1px dashed #237ffa;\n border-right: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--disabled {\n color: #929aa6 !important;\n color: var(--hi-v4-color-gray-500, #929aa6) !important;\n cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n width: 100%;\n overflow: hidden;\n padding-top: 16px;\n padding-top: var(--hi-v4-spacing-8, 16px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18
 
package/lib/esm/TabInk.js CHANGED
@@ -17,7 +17,8 @@ var TabInk = function TabInk(_ref) {
17
17
  prefixCls = _ref.prefixCls,
18
18
  itemRef = _ref.itemRef,
19
19
  tabListRef = _ref.tabListRef,
20
- direction = _ref.direction;
20
+ direction = _ref.direction,
21
+ translate = _ref.translate;
21
22
  var inkRef = useRef(null);
22
23
  useEffect(function () {
23
24
  if (inkRef.current && itemRef && tabListRef) {
@@ -27,15 +28,15 @@ var TabInk = function TabInk(_ref) {
27
28
 
28
29
  if (direction === 'vertical') {
29
30
  _style = {
30
- top: itemRect.top - listRect.top + "px",
31
- height: itemRect.height + "px",
31
+ top: itemRect.top - listRect.top - translate + 2 + 8 + "px",
32
+ height: itemRect.height - 4 - 16 + "px",
32
33
  left: '',
33
34
  width: ''
34
35
  };
35
36
  } else {
36
37
  _style = {
37
- left: itemRect.left - listRect.left + "px",
38
- width: itemRect.width + "px",
38
+ left: itemRect.left - listRect.left - translate + 20 + "px",
39
+ width: itemRect.width - 40 + "px",
39
40
  top: '',
40
41
  height: ''
41
42
  };
package/lib/esm/TabInk.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabInk.js","sources":["../../src/TabInk.tsx"],"sourcesContent":[null],"names":["TabInk","disabled","prefixCls","itemRef","tabListRef","direction","inkRef","useRef","useEffect","current","itemRect","getBoundingClientRect","listRect","_style","top","height","left","width","Object","assign","style","React","className","cx","ref"],"mappings":";;;;;;;;;;;;IAWaA,MAAM,GAA0B,SAAhCA,MAAgC,KAAA;;;MAC3CC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,kBAAAA;MACAC,iBAAAA;MAEMC,MAAM,GAAGC,MAAM,CAAiB,IAAjB;AAErBC,EAAAA,SAAS,CAAC;QACJF,MAAM,CAACG,OAAPH,IAAkBH,OAAlBG,IAA6BF,YAAY;UACrCM,QAAQ,GAAGP,OAAO,CAACQ,qBAARR;UACXS,QAAQ,GAAGR,UAAU,CAACO,qBAAXP;UACbS,MAAM,GAAwB;;UAC9BR,SAAS,KAAK,YAAY;AAC5BQ,QAAAA,MAAM,GAAG;AACPC,UAAAA,GAAG,EAAKJ,QAAQ,CAACI,GAATJ,GAAeE,QAAQ,CAACE,GAAxBJ,OADD;AAEPK,UAAAA,MAAM,EAAKL,QAAQ,CAACK,MAATL,OAFJ;AAGPM,UAAAA,IAAI,EAAE,EAHC;AAIPC,UAAAA,KAAK,EAAE;AAJA,SAATJ;AADF,aAOO;AACLA,QAAAA,MAAM,GAAG;AACPG,UAAAA,IAAI,EAAKN,QAAQ,CAACM,IAATN,GAAgBE,QAAQ,CAACI,IAAzBN,OADF;AAEPO,UAAAA,KAAK,EAAKP,QAAQ,CAACO,KAATP,OAFH;AAGPI,UAAAA,GAAG,EAAE,EAHE;AAIPC,UAAAA,MAAM,EAAE;AAJD,SAATF;;;AAOFK,MAAAA,MAAM,CAACC,MAAPD,CAAcZ,MAAM,CAACG,OAAPH,CAAec,KAA7BF,EAAoCL,MAApCK;;AApBK,GAAA,EAsBN,CAACf,OAAD,EAAUC,UAAV,EAAsBC,SAAtB,CAtBM,CAATG;sBAyBEa,mBAAAA,MAAAA;AACEC,IAAAA,SAAS,EAAEC,EAAE,CAAIrB,SAAJ,UAAA,iBACPA,SADO,wBACsBD,aADtB;AAGbuB,IAAAA,GAAG,EAAElB;GAJPe;;;;"}
1
+ {"version":3,"file":"TabInk.js","sources":["../../src/TabInk.tsx"],"sourcesContent":[null],"names":["TabInk","disabled","prefixCls","itemRef","tabListRef","direction","translate","inkRef","useRef","useEffect","current","itemRect","getBoundingClientRect","listRect","_style","top","height","left","width","Object","assign","style","React","className","cx","ref"],"mappings":";;;;;;;;;;;;IAYaA,MAAM,GAA0B,SAAhCA,MAAgC,KAAA;;;MAC3CC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,kBAAAA;MACAC,iBAAAA;MACAC,iBAAAA;MAEMC,MAAM,GAAGC,MAAM,CAAiB,IAAjB;AAErBC,EAAAA,SAAS,CAAC;QACJF,MAAM,CAACG,OAAPH,IAAkBJ,OAAlBI,IAA6BH,YAAY;UACrCO,QAAQ,GAAGR,OAAO,CAACS,qBAART;UACXU,QAAQ,GAAGT,UAAU,CAACQ,qBAAXR;UACbU,MAAM,GAAwB;;UAC9BT,SAAS,KAAK,YAAY;AAC5BS,QAAAA,MAAM,GAAG;AACPC,UAAAA,GAAG,EAAKJ,QAAQ,CAACI,GAATJ,GAAeE,QAAQ,CAACE,GAAxBJ,GAA8BL,SAA9BK,GAA0C,CAA1CA,GAA8C,CAA9CA,OADD;AAEPK,UAAAA,MAAM,EAAKL,QAAQ,CAACK,MAATL,GAAkB,CAAlBA,GAAsB,EAAtBA,OAFJ;AAGPM,UAAAA,IAAI,EAAE,EAHC;AAIPC,UAAAA,KAAK,EAAE;AAJA,SAATJ;AADF,aAOO;AACLA,QAAAA,MAAM,GAAG;AACPG,UAAAA,IAAI,EAAKN,QAAQ,CAACM,IAATN,GAAgBE,QAAQ,CAACI,IAAzBN,GAAgCL,SAAhCK,GAA4C,EAA5CA,OADF;AAEPO,UAAAA,KAAK,EAAKP,QAAQ,CAACO,KAATP,GAAiB,EAAjBA,OAFH;AAGPI,UAAAA,GAAG,EAAE,EAHE;AAIPC,UAAAA,MAAM,EAAE;AAJD,SAATF;;;AAOFK,MAAAA,MAAM,CAACC,MAAPD,CAAcZ,MAAM,CAACG,OAAPH,CAAec,KAA7BF,EAAoCL,MAApCK;;AApBK,GAAA,EAsBN,CAAChB,OAAD,EAAUC,UAAV,EAAsBC,SAAtB,CAtBM,CAATI;sBAyBEa,mBAAAA,MAAAA;AACEC,IAAAA,SAAS,EAAEC,EAAE,CAAItB,SAAJ,UAAA,iBACPA,SADO,wBACsBD,aADtB;AAGbwB,IAAAA,GAAG,EAAElB;GAJPe;;;;"}
package/lib/esm/TabItem.js CHANGED
@@ -7,9 +7,10 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import React, { forwardRef, useCallback } from 'react';
10
+ import React, { forwardRef, useState, useCallback } from 'react';
11
11
  import { cx } from '@hi-ui/classname';
12
12
  import { __DEV__ } from '@hi-ui/env';
13
+ import { CloseOutlined } from '@hi-ui/icons';
13
14
  var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
14
15
  var _cx;
15
16
 
@@ -17,24 +18,151 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
17
18
  style = _ref.style,
18
19
  disabled = _ref.disabled,
19
20
  tabTitle = _ref.tabTitle,
21
+ tabDesc = _ref.tabDesc,
20
22
  prefixCls = _ref.prefixCls,
21
23
  tabId = _ref.tabId,
22
24
  onTabClick = _ref.onTabClick,
23
- active = _ref.active;
25
+ active = _ref.active,
26
+ editable = _ref.editable,
27
+ onDelete = _ref.onDelete,
28
+ index = _ref.index,
29
+ _onDragStart = _ref.onDragStart,
30
+ _onDragOver = _ref.onDragOver,
31
+ _onDrop = _ref.onDrop,
32
+ _onDragEnd = _ref.onDragEnd,
33
+ itemRef = _ref.itemRef,
34
+ draggable = _ref.draggable,
35
+ _ref$type = _ref.type,
36
+ type = _ref$type === void 0 ? 'default' : _ref$type,
37
+ _ref$direction = _ref.direction,
38
+ layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
39
+
40
+ var _useState = useState(null),
41
+ dragId = _useState[0],
42
+ setDragId = _useState[1];
43
+
44
+ var _useState2 = useState(null),
45
+ direction = _useState2[0],
46
+ setDirection = _useState2[1];
24
47
 
25
48
  var _onClick = useCallback(function (e) {
26
49
  if (onTabClick) {
27
- onTabClick(tabId);
50
+ onTabClick(tabId, e);
28
51
  }
29
52
  }, [onTabClick, tabId]);
30
53
 
31
54
  return /*#__PURE__*/React.createElement("div", {
32
55
  style: style,
33
- className: cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx)),
56
+ className: cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx[prefixCls + "__item--" + direction] = direction, _cx)),
34
57
  ref: ref,
58
+ draggable: draggable,
35
59
  tabIndex: disabled ? 0 : -1,
36
- onClick: _onClick
37
- }, /*#__PURE__*/React.createElement("span", null, tabTitle));
60
+ onClick: _onClick,
61
+ onDragStart: function onDragStart(e) {
62
+ e.stopPropagation();
63
+ e.dataTransfer.setData('tab', JSON.stringify({
64
+ tabId: tabId,
65
+ tabTitle: tabTitle
66
+ }));
67
+ setDragId(tabId);
68
+
69
+ if (_onDragStart) {
70
+ _onDragStart(e, {
71
+ tabId: tabId,
72
+ tabTitle: tabTitle
73
+ });
74
+ }
75
+ },
76
+ onDragEnd: function onDragEnd(e) {
77
+ e.preventDefault();
78
+ e.stopPropagation();
79
+ e.dataTransfer.clearData();
80
+ setDragId(null);
81
+
82
+ if (_onDragEnd) {
83
+ _onDragEnd(e, {
84
+ tabId: tabId,
85
+ tabTitle: tabTitle
86
+ });
87
+ }
88
+ },
89
+ onDragLeave: function onDragLeave(e) {
90
+ e.preventDefault();
91
+ e.stopPropagation();
92
+ setDirection(null);
93
+ },
94
+ onDragOver: function onDragOver(e) {
95
+ e.preventDefault();
96
+ e.stopPropagation();
97
+
98
+ if (dragId !== tabId && itemRef) {
99
+ var targetBoundingRect = itemRef.getBoundingClientRect();
100
+ var hoverTargetSortY = (targetBoundingRect.bottom - targetBoundingRect.top) / 2;
101
+ var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2; // 鼠标垂直移动距离
102
+
103
+ var hoverClientY = e.clientY - targetBoundingRect.top;
104
+ var hoverClientX = e.clientX - targetBoundingRect.left;
105
+
106
+ if (layout === 'vertical') {
107
+ if (hoverClientY < hoverTargetSortY) {
108
+ setDirection('prev');
109
+ } else {
110
+ setDirection('next');
111
+ }
112
+ } else {
113
+ if (hoverClientX < hoverTargetSortX) {
114
+ setDirection('prev');
115
+ } else {
116
+ setDirection('next');
117
+ }
118
+ }
119
+ }
120
+
121
+ if (_onDragOver) {
122
+ _onDragOver(e, {
123
+ tabId: tabId,
124
+ tabTitle: tabTitle
125
+ });
126
+ }
127
+ },
128
+ onDrop: function onDrop(e) {
129
+ e.preventDefault();
130
+ e.stopPropagation();
131
+ setDirection(null);
132
+
133
+ if (_onDrop && dragId !== tabId) {
134
+ var passedData = JSON.parse(e.dataTransfer.getData('tab'));
135
+
136
+ _onDrop(e, {
137
+ dragNode: {
138
+ tabId: tabId,
139
+ tabTitle: tabTitle
140
+ },
141
+ dropNode: {
142
+ tabId: passedData.tabId,
143
+ tabTitle: passedData.tabTitle
144
+ },
145
+ direction: direction
146
+ });
147
+ }
148
+ }
149
+ }, /*#__PURE__*/React.createElement("span", {
150
+ className: prefixCls + "-item__title"
151
+ }, tabTitle), type === 'desc' && /*#__PURE__*/React.createElement("span", {
152
+ className: prefixCls + "-item__desc"
153
+ }, tabDesc), editable && /*#__PURE__*/React.createElement("span", {
154
+ className: prefixCls + "__close-btn",
155
+ onClick: function onClick(e) {
156
+ e.stopPropagation();
157
+
158
+ if (onDelete) {
159
+ onDelete({
160
+ tabId: tabId,
161
+ tabTitle: tabTitle
162
+ }, index);
163
+ }
164
+ }
165
+ }, /*#__PURE__*/React.createElement(CloseOutlined, null)));
38
166
  });
39
167
 
40
168
  if (__DEV__) {
package/lib/esm/TabItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabItem.js","sources":["../../src/TabItem.tsx"],"sourcesContent":[null],"names":["TabItem","forwardRef","ref","className","style","disabled","tabTitle","prefixCls","tabId","onTabClick","active","_onClick","useCallback","e","React","cx","tabIndex","onClick","__DEV__","displayName"],"mappings":";;;;;;;;;;;;IAWaA,OAAO,gBAAGC,UAAU,CAC/B,cAAA,EAAiFC,GAAjF;;;MAAGC,iBAAAA;MAAWC,aAAAA;MAAOC,gBAAAA;MAAUC,gBAAAA;MAAUC,iBAAAA;MAAWC,aAAAA;MAAOC,kBAAAA;MAAYC,cAAAA;;MAC/DC,QAAQ,GAAGC,WAAW,CAC1B,UAACC,CAAD;QACMJ,YAAY;AACdA,MAAAA,UAAU,CAACD,KAAD,CAAVC;;AAHsB,GAAA,EAM1B,CAACA,UAAD,EAAaD,KAAb,CAN0B;;sBAS1BM,mBAAAA,MAAAA;AACEV,IAAAA,KAAK,EAAEA;AACPD,IAAAA,SAAS,EAAEY,EAAE,CAAIR,SAAJ,WAAA,EAAuBJ,SAAvB,iBAAwCI,SAAxC,uBAAoEG,WAApE;AACbR,IAAAA,GAAG,EAAEA;AACLc,IAAAA,QAAQ,EAAEX,QAAQ,GAAG,CAAH,GAAO,CAAC;AAC1BY,IAAAA,OAAO,EAAEN;GALXG,eAOEA,mBAAAA,OAAAA,MAAAA,EAAOR,QAAPQ,CAPFA;AAX2B,CAAA;;AAuBjC,IAAII,OAAJ,EAAa;AACXlB,EAAAA,OAAO,CAACmB,WAARnB,GAAsB,SAAtBA;;;"}
1
+ {"version":3,"file":"TabItem.js","sources":["../../src/TabItem.tsx"],"sourcesContent":[null],"names":["TabItem","forwardRef","ref","className","style","disabled","tabTitle","tabDesc","prefixCls","tabId","onTabClick","active","editable","onDelete","index","onDragStart","onDragOver","onDrop","onDragEnd","itemRef","draggable","type","direction","layout","useState","dragId","setDragId","setDirection","_onClick","useCallback","e","React","cx","tabIndex","onClick","stopPropagation","dataTransfer","setData","JSON","stringify","preventDefault","clearData","onDragLeave","targetBoundingRect","getBoundingClientRect","hoverTargetSortY","bottom","top","hoverTargetSortX","right","left","hoverClientY","clientY","hoverClientX","clientX","passedData","parse","getData","dragNode","dropNode","CloseOutlined","__DEV__","displayName"],"mappings":"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"}
package/lib/esm/TabList.js CHANGED
@@ -7,13 +7,20 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import React, { forwardRef, useState, useRef, useCallback } from 'react';
10
+ import React, { forwardRef, useState, useRef, useMemo, useCallback } from 'react';
11
11
  import { __DEV__ } from '@hi-ui/env';
12
12
  import { TabItem } from './TabItem.js';
13
13
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
14
- import { cx } from '@hi-ui/classname';
14
+ import { getPrefixCls, cx } from '@hi-ui/classname';
15
15
  import { TabInk } from './TabInk.js';
16
+ import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } from '@hi-ui/icons';
17
+ var _role = 'tabs';
18
+
19
+ var _prefix = getPrefixCls(_role);
20
+
16
21
  var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
22
+ var _cx;
23
+
17
24
  var data = _ref.data,
18
25
  className = _ref.className,
19
26
  style = _ref.style,
@@ -21,7 +28,20 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
21
28
  defaultActiveId = _ref.defaultActiveId,
22
29
  onChange = _ref.onChange,
23
30
  onTabClick = _ref.onTabClick,
24
- prefixCls = _ref.prefixCls;
31
+ _ref$prefixCls = _ref.prefixCls,
32
+ prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
33
+ _ref$direction = _ref.direction,
34
+ direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
35
+ editable = _ref.editable,
36
+ onAdd = _ref.onAdd,
37
+ onDelete = _ref.onDelete,
38
+ draggable = _ref.draggable,
39
+ onDragStart = _ref.onDragStart,
40
+ onDragOver = _ref.onDragOver,
41
+ onDrop = _ref.onDrop,
42
+ onDragEnd = _ref.onDragEnd,
43
+ _ref$type = _ref.type,
44
+ type = _ref$type === void 0 ? 'default' : _ref$type;
25
45
 
26
46
  var _a, _b;
27
47
 
@@ -33,10 +53,27 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
33
53
  innerRef = _useState[0],
34
54
  setInnerRef = _useState[1];
35
55
 
56
+ var _useState2 = useState(null),
57
+ scrollRef = _useState2[0],
58
+ setScrollRef = _useState2[1];
59
+
60
+ var _useState3 = useState(0),
61
+ translateX = _useState3[0],
62
+ setTranslateX = _useState3[1];
63
+
64
+ var _useState4 = useState(0),
65
+ translateY = _useState4[0],
66
+ setTranslateY = _useState4[1];
67
+
36
68
  var itemsRef = useRef({});
37
- var onClickTab = useCallback(function (key) {
69
+ var showScrollBtn = useMemo(function () {
70
+ if (scrollRef && innerRef) {
71
+ return direction === 'horizontal' ? (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientWidth) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientWidth) : (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientHeight) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientHeight);
72
+ }
73
+ }, [scrollRef, innerRef, direction]);
74
+ var onClickTab = useCallback(function (key, event) {
38
75
  if (onTabClick) {
39
- onTabClick(key);
76
+ onTabClick(key, event);
40
77
  }
41
78
 
42
79
  if (key !== activeTab && setActiveTab) {
@@ -45,11 +82,49 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
45
82
  }, [activeTab, onTabClick, setActiveTab]);
46
83
  return /*#__PURE__*/React.createElement("div", {
47
84
  style: style,
48
- className: cx(prefixCls + "__list", className),
85
+ className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
49
86
  ref: ref
50
- }, /*#__PURE__*/React.createElement("div", {
87
+ }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement("div", {
88
+ className: prefixCls + "__add-btn",
89
+ onClick: function onClick() {
90
+ if (scrollRef && innerRef) {
91
+ var canScroll = -translateX - innerRef.clientWidth;
92
+ var moveWidth = 0;
93
+
94
+ if (canScroll >= 0) {
95
+ moveWidth = innerRef.clientWidth;
96
+ } else {
97
+ moveWidth = -translateX;
98
+ }
99
+
100
+ setTranslateX(translateX + moveWidth);
101
+ }
102
+ }
103
+ }, /*#__PURE__*/React.createElement(LeftOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement("div", {
104
+ className: prefixCls + "__add-btn",
105
+ onClick: function onClick() {
106
+ if (scrollRef && innerRef) {
107
+ var canScroll = -translateY - innerRef.clientHeight;
108
+ var moveWidth = 0;
109
+
110
+ if (canScroll >= 0) {
111
+ moveWidth = innerRef.clientHeight;
112
+ } else {
113
+ moveWidth = -translateY;
114
+ }
115
+
116
+ setTranslateY(translateY + moveWidth);
117
+ }
118
+ }
119
+ }, /*#__PURE__*/React.createElement(UpOutlined, null)), /*#__PURE__*/React.createElement("div", {
51
120
  className: cx(prefixCls + "__list--inner"),
52
121
  ref: setInnerRef
122
+ }, /*#__PURE__*/React.createElement("div", {
123
+ className: cx(prefixCls + "__list--scroll"),
124
+ ref: setScrollRef,
125
+ style: showScrollBtn ? {
126
+ transform: direction === 'horizontal' ? "translateX(" + translateX + "px)" : "translateY(" + translateY + "px)"
127
+ } : {}
53
128
  }, data.map(function (d, index) {
54
129
  return /*#__PURE__*/React.createElement(TabItem, Object.assign({
55
130
  key: index
@@ -57,16 +132,63 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
57
132
  ref: function ref(node) {
58
133
  itemsRef.current["" + d.tabId] = node;
59
134
  },
135
+ type: type,
136
+ itemRef: itemsRef.current["" + d.tabId],
137
+ index: index,
60
138
  active: activeTab === d.tabId,
61
139
  prefixCls: prefixCls,
62
- onTabClick: onClickTab
140
+ draggable: draggable,
141
+ onTabClick: onClickTab,
142
+ editable: editable,
143
+ onDelete: onDelete,
144
+ onDragStart: onDragStart,
145
+ onDragOver: onDragOver,
146
+ onDrop: onDrop,
147
+ onDragEnd: onDragEnd,
148
+ direction: direction
63
149
  }));
64
- }), /*#__PURE__*/React.createElement(TabInk, {
150
+ }), type === 'default' && /*#__PURE__*/React.createElement(TabInk, {
151
+ translate: direction === 'horizontal' ? translateX : translateY,
65
152
  prefixCls: prefixCls,
66
- direction: "horizontal",
153
+ direction: direction,
67
154
  tabListRef: innerRef,
68
155
  itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTab]
69
- })));
156
+ }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement("div", {
157
+ className: prefixCls + "__add-btn",
158
+ onClick: function onClick() {
159
+ if (scrollRef && innerRef) {
160
+ var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
161
+ var moveWidth = 0;
162
+
163
+ if (canScroll >= innerRef.clientWidth) {
164
+ moveWidth = innerRef.clientWidth;
165
+ } else {
166
+ moveWidth = canScroll;
167
+ }
168
+
169
+ setTranslateX(translateX - moveWidth);
170
+ }
171
+ }
172
+ }, /*#__PURE__*/React.createElement(RightOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement("div", {
173
+ className: prefixCls + "__add-btn",
174
+ onClick: function onClick() {
175
+ if (scrollRef && innerRef) {
176
+ var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
177
+ var moveWidth = 0;
178
+
179
+ if (canScroll >= innerRef.clientHeight) {
180
+ moveWidth = innerRef.clientHeight;
181
+ } else {
182
+ moveWidth = canScroll;
183
+ }
184
+
185
+ setTranslateY(translateY - moveWidth);
186
+ }
187
+ }
188
+ }, /*#__PURE__*/React.createElement(DownOutlined, null)), editable && /*#__PURE__*/React.createElement("div", {
189
+ className: prefixCls + "__add-btn",
190
+ onClick: onAdd
191
+ }, /*#__PURE__*/React.createElement(PlusOutlined, null)));
70
192
  });
71
193
 
72
194
  if (__DEV__) {
package/lib/esm/TabList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabList.js","sources":["../../src/TabList.tsx"],"sourcesContent":[null],"names":["TabList","forwardRef","ref","data","className","style","activeId","defaultActiveId","onChange","onTabClick","prefixCls","useUncontrolledState","tabId","activeTab","setActiveTab","useState","innerRef","setInnerRef","itemsRef","useRef","onClickTab","useCallback","key","React","cx","map","d","index","TabItem","node","current","active","TabInk","direction","tabListRef","itemRef","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;IAQaA,OAAO,gBAAGC,UAAU,CAC/B,cAAA,EAAyFC,GAAzF;MAAGC,YAAAA;MAAMC,iBAAAA;MAAWC,aAAAA;MAAOC,gBAAAA;MAAUC,uBAAAA;MAAiBC,gBAAAA;MAAUC,kBAAAA;MAAYC,iBAAAA;;;;8BACxCC,oBAAoB,CACpDJ,eAAe,KAAI,MAAAJ,IAAI,CAAC,CAAD,CAAJ,UAAA,iBAAA,SAAA,MAASS,KAAb,CADqC,EAEpDN,QAFoD,EAGpDE,QAHoD;MAA/CK,SAAP;MAAkBC,YAAlB;;kBAMgCC,QAAQ,CAAwB,IAAxB;MAAjCC,QAAP;MAAiBC,WAAjB;;MACMC,QAAQ,GAAGC,MAAM,CAAqC,EAArC;MAEjBC,UAAU,GAAGC,WAAW,CAC5B,UAACC,GAAD;QACMb,YAAY;AACdA,MAAAA,UAAU,CAACa,GAAD,CAAVb;;;QAEEa,GAAG,KAAKT,SAARS,IAAqBR,cAAc;AACrCA,MAAAA,YAAY,CAACQ,GAAD,CAAZR;;AANwB,GAAA,EAS5B,CAACD,SAAD,EAAYJ,UAAZ,EAAwBK,YAAxB,CAT4B;sBAY5BS,mBAAAA,MAAAA;AAAKlB,IAAAA,KAAK,EAAEA;AAAOD,IAAAA,SAAS,EAAEoB,EAAE,CAAId,SAAJ,WAAA,EAAuBN,SAAvB;AAAmCF,IAAAA,GAAG,EAAEA;GAAxEqB,eACEA,mBAAAA,MAAAA;AAAKnB,IAAAA,SAAS,EAAEoB,EAAE,CAAId,SAAJ,kBAAA;AAA+BR,IAAAA,GAAG,EAAEe;GAAtDM,EACGpB,IAAI,CAACsB,GAALtB,CAAS,UAACuB,CAAD,EAAIC,KAAJ;wBACRJ,mBAAAA,CAACK,OAADL;AACED,MAAAA,GAAG,EAAEK;OACDD;AACJxB,MAAAA,GAAG,EAAE,YAAA,CAAC2B,IAAD;AACHX,QAAAA,QAAQ,CAACY,OAATZ,MAAoBQ,CAAC,CAACd,KAAtBM,IAAiCW,IAAjCX;;AAEFa,MAAAA,MAAM,EAAElB,SAAS,KAAKa,CAAC,CAACd;AACxBF,MAAAA,SAAS,EAAEA;AACXD,MAAAA,UAAU,EAAEW;MARdG;AADD,GAAApB,CADHoB,eAaEA,mBAAAA,CAACS,MAADT;AACEb,IAAAA,SAAS,EAAEA;AACXuB,IAAAA,SAAS,EAAC;AACVC,IAAAA,UAAU,EAAElB;AACZmB,IAAAA,OAAO,EAAE,MAAAjB,QAAQ,CAACY,OAAT,UAAA,iBAAA,SAAA,MAAmBjB;GAJ9BU,CAbFA,CADFA;AAvB2B,CAAA;;AAkEjC,IAAIa,OAAJ,EAAa;AACXpC,EAAAA,OAAO,CAACqC,WAARrC,GAAsB,SAAtBA;;;"}
1
+ {"version":3,"file":"TabList.js","sources":["../../src/TabList.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","TabList","forwardRef","ref","data","className","style","activeId","defaultActiveId","onChange","onTabClick","prefixCls","direction","editable","onAdd","onDelete","draggable","onDragStart","onDragOver","onDrop","onDragEnd","type","useUncontrolledState","tabId","activeTab","setActiveTab","useState","innerRef","setInnerRef","scrollRef","setScrollRef","translateX","setTranslateX","translateY","setTranslateY","itemsRef","useRef","showScrollBtn","useMemo","clientWidth","clientHeight","onClickTab","useCallback","key","event","React","cx","onClick","canScroll","moveWidth","LeftOutlined","UpOutlined","transform","map","d","index","TabItem","node","current","itemRef","active","TabInk","translate","tabListRef","RightOutlined","DownOutlined","PlusOutlined","__DEV__","displayName"],"mappings":"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"}
package/lib/esm/Tabs.js CHANGED
@@ -21,6 +21,8 @@ var _prefix = getPrefixCls(_role);
21
21
 
22
22
 
23
23
  var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
24
+ var _cx;
25
+
24
26
  var _b;
25
27
 
26
28
  var _a$prefixCls = _a.prefixCls,
@@ -33,9 +35,23 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
33
35
  activeId = _a.activeId,
34
36
  onChange = _a.onChange,
35
37
  onTabClick = _a.onTabClick,
36
- rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick"]);
38
+ editable = _a.editable,
39
+ _a$placement = _a.placement,
40
+ placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
41
+ onAdd = _a.onAdd,
42
+ onDelete = _a.onDelete,
43
+ _a$draggable = _a.draggable,
44
+ draggable = _a$draggable === void 0 ? false : _a$draggable,
45
+ onDragStart = _a.onDragStart,
46
+ onDragOver = _a.onDragOver,
47
+ onDragEnd = _a.onDragEnd,
48
+ onDrop = _a.onDrop,
49
+ style = _a.style,
50
+ _a$type = _a.type,
51
+ type = _a$type === void 0 ? 'default' : _a$type,
52
+ rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type"]);
37
53
 
38
- var cls = cx(prefixCls, className);
54
+ var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--vertical"] = placement === 'vertical', _cx[prefixCls + "--" + type] = type, _cx));
39
55
  var tabList = useMemo(function () {
40
56
  var list = [];
41
57
  React.Children.map(children, function (child) {
@@ -74,17 +90,27 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
74
90
  return /*#__PURE__*/React.createElement("div", Object.assign({
75
91
  ref: ref,
76
92
  role: role,
77
- className: cls
93
+ className: cls,
94
+ style: style
78
95
  }, rest), /*#__PURE__*/React.createElement(TabList, {
79
96
  prefixCls: prefixCls,
80
97
  data: tabList,
81
98
  activeId: activeId,
82
99
  onChange: _onChange,
83
- onTabClick: onTabClick
100
+ onTabClick: onTabClick,
101
+ direction: placement,
102
+ editable: editable,
103
+ onAdd: onAdd,
104
+ onDelete: onDelete,
105
+ draggable: draggable,
106
+ onDragEnd: onDragEnd,
107
+ onDragOver: onDragOver,
108
+ onDrop: onDrop,
109
+ type: type,
110
+ onDragStart: onDragStart
84
111
  }), /*#__PURE__*/React.createElement("div", {
85
112
  className: _prefix + "__content"
86
113
  }, React.Children.map(children, function (child) {
87
- console.log(child, child === null || child === void 0 ? void 0 : child.props.tabId, activeId);
88
114
  return child && /*#__PURE__*/React.cloneElement(child, {
89
115
  active: activePane === child.props.tabId
90
116
  });
package/lib/esm/Tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Tabs","forwardRef","_a","ref","prefixCls","role","className","children","defaultActiveId","activeId","onChange","onTabClick","rest","cls","cx","tabList","useMemo","list","React","Children","map","child","props","tabTitle","tabId","tabDesc","closeable","disabled","item","push","useState","activePane","setActivePane","_onChange","useCallback","TabList","data","console","log","cloneElement","active","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;AAMA,IAAMA,KAAK,GAAG,MAAd;;AACA,IAAMC,OAAO,GAAGC,YAAY,CAACF,KAAD,CAA5B;AAEA;;;;;IAGaG,IAAI,gBAAGC,UAAU,CAC5B,UACEC,EADF,EAYEC,GAZF;;;wBAEIC;MAAAA,sCAAYN;mBACZO;MAAAA,4BAAOR;MACPS,eAAAA;MACAC,cAAAA;MACAC,qBAAAA;MACAC,cAAAA;MACAC,cAAAA;MACAC,gBAAAA;MACGC,kBATL,YAAA,QAAA,aAAA,YAAA,mBAAA,YAAA,YAAA,cAAA;;MAaMC,GAAG,GAAGC,EAAE,CAACV,SAAD,EAAYE,SAAZ;MAERS,OAAO,GAAGC,OAAO,CAAC;QAChBC,IAAI,GAAmB;AAC7BC,IAAAA,KAAK,CAACC,QAAND,CAAeE,GAAfF,CAAmBX,QAAnBW,EAA6B,UAACG,KAAD;UACvBA,OAAO;2BACiDA,KAAK,CAACC;YAAxDC,QAAR,gBAAQA;YAAUC,KAAlB,gBAAkBA;YAAOC,OAAzB,gBAAyBA;YAASC,SAAlC,gBAAkCA;YAAWC,QAA7C,gBAA6CA;YACvCC,IAAI,GAAG;AAAEL,UAAAA,QAAQ,EAARA,QAAF;AAAYC,UAAAA,KAAK,EAALA,KAAZ;AAAmBC,UAAAA,OAAO,EAAPA,OAAnB;AAA4BC,UAAAA,SAAS,EAATA,SAA5B;AAAuCC,UAAAA,QAAQ,EAARA;AAAvC;AAEbV,QAAAA,IAAI,CAACY,IAALZ,CAAUW,IAAVX;;AALJ,KAAAC;WAQOD;AAVc,GAAA,EAWpB,CAACV,QAAD,CAXoB;;kBAaauB,QAAQ,CAACrB,QAAQ,IAAID,eAAZC,KAA+B,MAAAM,OAAO,CAAC,CAAD,CAAP,UAAA,iBAAA,SAAA,MAAYS,KAA3Cf,CAAD;MAArCsB,UAAP;MAAmBC,aAAnB;;MAEMC,SAAS,GAAGC,WAAW,CAC3B,UAACV,KAAD;QACMd,UAAU;AACZA,MAAAA,QAAQ,CAACc,KAAD,CAARd;;;AAEFsB,IAAAA,aAAa,CAACR,KAAD,CAAbQ;AALyB,GAAA,EAO3B,CAACtB,QAAD,CAP2B;;sBAW3BQ,mBAAAA,MAAAA;AAAKf,IAAAA,GAAG,EAAEA;AAAKE,IAAAA,IAAI,EAAEA;AAAMC,IAAAA,SAAS,EAAEO;KAASD,KAA/CM,eACEA,mBAAAA,CAACiB,OAADjB;AACEd,IAAAA,SAAS,EAAEA;AACXgC,IAAAA,IAAI,EAAErB;AACNN,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,QAAQ,EAAEuB;AACVtB,IAAAA,UAAU,EAAEA;GALdO,CADFA,eAQEA,mBAAAA,MAAAA;AAAKZ,IAAAA,SAAS,EAAKR,OAAL;GAAdoB,EACGA,KAAK,CAACC,QAAND,CAAeE,GAAfF,CAAmBX,QAAnBW,EAA6B,UAACG,KAAD;AAC5BgB,IAAAA,OAAO,CAACC,GAARD,CAAYhB,KAAZgB,EAAmBhB,KAAK,SAALA,IAAAA,KAAK,WAALA,SAAAA,GAAAA,KAAK,CAAEC,KAAPD,CAAaG,KAAhCa,EAAuC5B,QAAvC4B;WAEEhB,KAAK,iBACLH,KAAK,CAACqB,YAANrB,CAAmBG,KAAnBH,EAA0B;AACxBsB,MAAAA,MAAM,EAAET,UAAU,KAAKV,KAAK,CAACC,KAAND,CAAYG;AADX,KAA1BN;AAJH,GAAAA,CADHA,CARFA;AA3CwB,CAAA;;AAkH9B,IAAIuB,OAAJ,EAAa;AACXzC,EAAAA,IAAI,CAAC0C,WAAL1C,GAAmB,MAAnBA;;;"}
1
+ {"version":3,"file":"Tabs.js","sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Tabs","forwardRef","_a","ref","prefixCls","role","className","children","defaultActiveId","activeId","onChange","onTabClick","editable","placement","onAdd","onDelete","draggable","onDragStart","onDragOver","onDragEnd","onDrop","style","type","rest","cls","cx","tabList","useMemo","list","React","Children","map","child","props","tabTitle","tabId","tabDesc","closeable","disabled","item","push","useState","activePane","setActivePane","_onChange","useCallback","TabList","data","direction","cloneElement","active","__DEV__","displayName"],"mappings":"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"}
package/lib/esm/index.js CHANGED
@@ -10,4 +10,5 @@
10
10
  import './styles/index.scss.js';
11
11
  export { Tabs, Tabs as default } from './Tabs.js';
12
12
  export { TabPane } from './TabPane.js';
13
+ export { TabList } from './TabList.js';
13
14
  //# sourceMappingURL=index.js.map
package/lib/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}