@hi-ui/tabs 4.1.1 → 4.1.3

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 (20) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/lib/cjs/TabInk.js +7 -19
  3. package/lib/cjs/TabItem.js +33 -56
  4. package/lib/cjs/TabList.js +64 -107
  5. package/lib/cjs/TabPane.js +10 -27
  6. package/lib/cjs/Tabs.js +39 -59
  7. package/lib/cjs/hooks/index.js +5 -14
  8. package/lib/cjs/index.js +0 -5
  9. package/lib/cjs/styles/index.scss.js +0 -3
  10. package/lib/cjs/utils/index.js +0 -5
  11. package/lib/esm/TabInk.js +5 -11
  12. package/lib/esm/TabItem.js +31 -46
  13. package/lib/esm/TabList.js +62 -88
  14. package/lib/esm/TabPane.js +8 -17
  15. package/lib/esm/Tabs.js +37 -46
  16. package/lib/esm/hooks/index.js +5 -10
  17. package/lib/esm/index.js +1 -3
  18. package/lib/esm/styles/index.scss.js +0 -2
  19. package/lib/esm/utils/index.js +0 -4
  20. package/package.json +13 -13
package/lib/cjs/Tabs.js CHANGED
@@ -10,79 +10,64 @@
10
10
  'use strict';
11
11
 
12
12
  var _typeof = require("@babel/runtime/helpers/typeof");
13
-
14
13
  Object.defineProperty(exports, '__esModule', {
15
14
  value: true
16
15
  });
17
-
18
16
  var tslib = require('tslib');
19
-
20
17
  var React = require('react');
21
-
22
18
  var classname = require('@hi-ui/classname');
23
-
24
19
  var env = require('@hi-ui/env');
25
-
26
20
  var TabList = require('./TabList.js');
27
-
28
21
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
29
-
30
22
  var typeAssertion = require('@hi-ui/type-assertion');
31
-
32
- function _interopDefaultLegacy(e) {
23
+ function _interopDefaultCompat(e) {
33
24
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
34
25
  'default': e
35
26
  };
36
27
  }
37
-
38
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
39
-
28
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
40
29
  var _role = 'tabs';
41
-
42
30
  var _prefix = classname.getPrefixCls(_role);
43
31
  /**
44
32
  * Tabs 标签页
45
33
  */
46
-
47
-
48
34
  var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
49
35
  var _a$prefixCls = _a.prefixCls,
50
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
51
- _a$role = _a.role,
52
- role = _a$role === void 0 ? _role : _a$role,
53
- className = _a.className,
54
- children = _a.children,
55
- defaultActiveId = _a.defaultActiveId,
56
- activeId = _a.activeId,
57
- onChange = _a.onChange,
58
- onTabClick = _a.onTabClick,
59
- editable = _a.editable,
60
- _a$placement = _a.placement,
61
- placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
62
- onAdd = _a.onAdd,
63
- onDelete = _a.onDelete,
64
- _a$draggable = _a.draggable,
65
- draggable = _a$draggable === void 0 ? false : _a$draggable,
66
- onDragStart = _a.onDragStart,
67
- onDragOver = _a.onDragOver,
68
- onDragEnd = _a.onDragEnd,
69
- onDrop = _a.onDrop,
70
- style = _a.style,
71
- _a$type = _a.type,
72
- type = _a$type === void 0 ? 'line' : _a$type,
73
- extra = _a.extra,
74
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
75
-
36
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
37
+ _a$role = _a.role,
38
+ role = _a$role === void 0 ? _role : _a$role,
39
+ className = _a.className,
40
+ children = _a.children,
41
+ defaultActiveId = _a.defaultActiveId,
42
+ activeId = _a.activeId,
43
+ onChange = _a.onChange,
44
+ onTabClick = _a.onTabClick,
45
+ editable = _a.editable,
46
+ _a$placement = _a.placement,
47
+ placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
48
+ onAdd = _a.onAdd,
49
+ onDelete = _a.onDelete,
50
+ _a$draggable = _a.draggable,
51
+ draggable = _a$draggable === void 0 ? false : _a$draggable,
52
+ onDragStart = _a.onDragStart,
53
+ onDragOver = _a.onDragOver,
54
+ onDragEnd = _a.onDragEnd,
55
+ onDrop = _a.onDrop,
56
+ style = _a.style,
57
+ _a$type = _a.type,
58
+ type = _a$type === void 0 ? 'line' : _a$type,
59
+ extra = _a.extra,
60
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
76
61
  var tabList = React.useMemo(function () {
77
62
  var list = [];
78
63
  React__default["default"].Children.map(children, function (child) {
79
64
  if (child) {
80
65
  var _child$props = child.props,
81
- tabTitle = _child$props.tabTitle,
82
- tabId = _child$props.tabId,
83
- tabDesc = _child$props.tabDesc,
84
- closeable = _child$props.closeable,
85
- disabled = _child$props.disabled;
66
+ tabTitle = _child$props.tabTitle,
67
+ tabId = _child$props.tabId,
68
+ tabDesc = _child$props.tabDesc,
69
+ closeable = _child$props.closeable,
70
+ disabled = _child$props.disabled;
86
71
  var item = {
87
72
  tabTitle: tabTitle,
88
73
  tabId: tabId,
@@ -95,17 +80,14 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
95
80
  });
96
81
  return list;
97
82
  }, [children]);
98
-
99
83
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
100
- if (typeAssertion.isUndef(defaultActiveId)) {
101
- return tabList[0] ? tabList[0].tabId : '';
102
- }
103
-
104
- return defaultActiveId;
105
- }, activeId, onChange),
106
- activeTabId = _useUncontrolledState[0],
107
- setActiveTabId = _useUncontrolledState[1];
108
-
84
+ if (typeAssertion.isUndef(defaultActiveId)) {
85
+ return tabList[0] ? tabList[0].tabId : '';
86
+ }
87
+ return defaultActiveId;
88
+ }, activeId, onChange),
89
+ activeTabId = _useUncontrolledState[0],
90
+ setActiveTabId = _useUncontrolledState[1];
109
91
  var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
110
92
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
111
93
  ref: ref,
@@ -139,9 +121,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
139
121
  }) : null;
140
122
  })));
141
123
  });
142
-
143
124
  if (env.__DEV__) {
144
125
  Tabs.displayName = 'Tabs';
145
126
  }
146
-
147
127
  exports.Tabs = Tabs;
package/lib/cjs/hooks/index.js CHANGED
@@ -12,23 +12,19 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  var React = require('react');
17
-
18
16
  var useLatest = require('@hi-ui/use-latest');
19
-
20
17
  var useUnmountEffect = require('@hi-ui/use-unmount-effect');
18
+
21
19
  /**
22
20
  * 响应式监听元素的 size 变化
23
21
  */
24
-
25
-
26
22
  var useResizeObserver = function useResizeObserver(_ref) {
27
23
  var element = _ref.element,
28
- onResize = _ref.onResize,
29
- _ref$initialSize = _ref.initialSize,
30
- initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
31
- getSize = _ref.getSize;
24
+ onResize = _ref.onResize,
25
+ _ref$initialSize = _ref.initialSize,
26
+ initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
27
+ getSize = _ref.getSize;
32
28
  var getSizeLatestRef = useLatest.useLatestRef(getSize);
33
29
  var onResizeLatest = useLatest.useLatestCallback(onResize);
34
30
  var prevSizeRef = React.useRef(initialSize);
@@ -38,11 +34,9 @@ var useResizeObserver = function useResizeObserver(_ref) {
38
34
  var _resizeObserver = new ResizeObserver(function () {
39
35
  if (unmountRef.current) return;
40
36
  var getSize = getSizeLatestRef.current;
41
-
42
37
  if (element) {
43
38
  if (getSize) {
44
39
  var nextSize = getSize(element);
45
-
46
40
  if (prevSizeRef.current !== nextSize) {
47
41
  prevSizeRef.current = nextSize;
48
42
  onResizeLatest(element, nextSize);
@@ -52,12 +46,9 @@ var useResizeObserver = function useResizeObserver(_ref) {
52
46
  }
53
47
  }
54
48
  });
55
-
56
49
  _resizeObserver.observe(element);
57
50
  }
58
-
59
51
  return function () {};
60
52
  }, [element, getSizeLatestRef, onResizeLatest, unmountRef]);
61
53
  };
62
-
63
54
  exports.useResizeObserver = useResizeObserver;
package/lib/cjs/index.js CHANGED
@@ -12,15 +12,10 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  require('./styles/index.scss.js');
17
-
18
16
  var Tabs$1 = require('./Tabs.js');
19
-
20
17
  var TabPane = require('./TabPane.js');
21
-
22
18
  var TabList = require('./TabList.js');
23
-
24
19
  var Tabs = Object.assign(Tabs$1.Tabs, {
25
20
  Pane: TabPane.TabPane
26
21
  });
package/lib/cjs/styles/index.scss.js CHANGED
@@ -13,9 +13,6 @@ Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
15
  var css_248z = ".hi-v4-tabs__add-btn.hi-v4-icon-button {font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {margin: var(--hi-v4-spacing-1, 2px);}.hi-v4-tabs__close-btn {cursor: pointer;color: var(--hi-v4-color-gray-500, #929aa6);margin-left: var(--hi-v4-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v4-tabs__close-btn:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--type-card .hi-v4-tabs__content {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tabs__list {position: relative;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-tabs__list--card .hi-v4-tabs__item {background-color: var(--hi-v4-color-gray-200, #ebedf0);margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs__list--button .hi-v4-tabs__item {position: relative;margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v4-height-4, 16px);background-color: var(--hi-v4-color-gray-300, #dfe2e8);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):first-child::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--button .hi-v4-tabs__item--active + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs__item {background: var(--hi-v4-color-gray-50, #f5f7fa);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v4-spacing-6, 12px) 0 0;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden;}.hi-v4-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v4-motion-duration-slow, 300ms);transition-duration: var(--hi-v4-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v4-tabs__list--placement-vertical > .hi-v4-tabs__list--inner > .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v4-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-6, 12px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item {margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-2, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-right: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-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);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);}.hi-v4-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-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);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);}.hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item:focus {outline: 0;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--prev {border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--next {border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--disabled, .hi-v4-tabs__item--disabled .hi-v4-tabs__close-btn {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v4-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v4-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tabs-tab-pane--hide {display: none;}";
16
-
17
16
  var __styleInject__ = require('style-inject')["default"];
18
-
19
17
  __styleInject__(css_248z);
20
-
21
18
  exports["default"] = css_248z;
package/lib/cjs/utils/index.js CHANGED
@@ -12,21 +12,16 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
-
16
15
  var typeAssertion = require('@hi-ui/type-assertion');
17
-
18
16
  var getNextTabId = function getNextTabId(data, tabId) {
19
17
  if (typeAssertion.isArrayNonEmpty(data)) {
20
18
  var itemIndex = data.findIndex(function (item) {
21
19
  return item.tabId === tabId;
22
20
  });
23
-
24
21
  if (itemIndex !== -1 && data[itemIndex + 1]) {
25
22
  return data[itemIndex + 1].tabId;
26
23
  }
27
24
  }
28
-
29
25
  return null;
30
26
  };
31
-
32
27
  exports.getNextTabId = getNextTabId;
package/lib/esm/TabInk.js CHANGED
@@ -10,16 +10,14 @@
10
10
  import React, { useRef, useCallback, useEffect } from 'react';
11
11
  import { cx } from '@hi-ui/classname';
12
12
  import { useResizeObserver } from './hooks/index.js';
13
-
14
13
  var TabInk = function TabInk(_ref) {
15
14
  var _cx;
16
-
17
15
  var disabled = _ref.disabled,
18
- prefixCls = _ref.prefixCls,
19
- activeItemElement = _ref.activeItemElement,
20
- activeTabId = _ref.activeTabId,
21
- getTabOffset = _ref.getTabOffset,
22
- showHorizontal = _ref.showHorizontal;
16
+ prefixCls = _ref.prefixCls,
17
+ activeItemElement = _ref.activeItemElement,
18
+ activeTabId = _ref.activeTabId,
19
+ getTabOffset = _ref.getTabOffset,
20
+ showHorizontal = _ref.showHorizontal;
23
21
  var inkRef = useRef(null);
24
22
  var setTabLnkPositionStyle = useCallback(function () {
25
23
  if (!inkRef.current) return;
@@ -27,9 +25,7 @@ var TabInk = function TabInk(_ref) {
27
25
  var computedStyle = getComputedStyle(activeItemElement);
28
26
  var itemRect = activeItemElement.getBoundingClientRect();
29
27
  var offset = getTabOffset(activeTabId);
30
-
31
28
  var _style;
32
-
33
29
  if (!showHorizontal) {
34
30
  var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
35
31
  var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
@@ -50,7 +46,6 @@ var TabInk = function TabInk(_ref) {
50
46
  height: ''
51
47
  };
52
48
  }
53
-
54
49
  Object.assign(inkRef.current.style, _style);
55
50
  }, [activeItemElement, activeTabId, getTabOffset, showHorizontal]);
56
51
  useEffect(function () {
@@ -69,5 +64,4 @@ var TabInk = function TabInk(_ref) {
69
64
  ref: inkRef
70
65
  });
71
66
  };
72
-
73
67
  export { TabInk };
package/lib/esm/TabItem.js CHANGED
@@ -13,46 +13,41 @@ import { __DEV__ } from '@hi-ui/env';
13
13
  import { CloseOutlined } from '@hi-ui/icons';
14
14
  var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
15
15
  var _cx;
16
-
17
16
  var className = _ref.className,
18
- style = _ref.style,
19
- disabled = _ref.disabled,
20
- tabTitle = _ref.tabTitle,
21
- tabDesc = _ref.tabDesc,
22
- prefixCls = _ref.prefixCls,
23
- tabId = _ref.tabId,
24
- onTabClick = _ref.onTabClick,
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 ? 'line' : _ref$type,
37
- _ref$closeable = _ref.closeable,
38
- closeable = _ref$closeable === void 0 ? true : _ref$closeable,
39
- _ref$direction = _ref.direction,
40
- layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
41
-
17
+ style = _ref.style,
18
+ disabled = _ref.disabled,
19
+ tabTitle = _ref.tabTitle,
20
+ tabDesc = _ref.tabDesc,
21
+ prefixCls = _ref.prefixCls,
22
+ tabId = _ref.tabId,
23
+ onTabClick = _ref.onTabClick,
24
+ active = _ref.active,
25
+ editable = _ref.editable,
26
+ onDelete = _ref.onDelete,
27
+ index = _ref.index,
28
+ _onDragStart = _ref.onDragStart,
29
+ _onDragOver = _ref.onDragOver,
30
+ _onDrop = _ref.onDrop,
31
+ _onDragEnd = _ref.onDragEnd,
32
+ itemRef = _ref.itemRef,
33
+ draggable = _ref.draggable,
34
+ _ref$type = _ref.type,
35
+ type = _ref$type === void 0 ? 'line' : _ref$type,
36
+ _ref$closeable = _ref.closeable,
37
+ closeable = _ref$closeable === void 0 ? true : _ref$closeable,
38
+ _ref$direction = _ref.direction,
39
+ layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
42
40
  var _useState = useState(null),
43
- dragId = _useState[0],
44
- setDragId = _useState[1];
45
-
41
+ dragId = _useState[0],
42
+ setDragId = _useState[1];
46
43
  var _useState2 = useState(null),
47
- direction = _useState2[0],
48
- setDirection = _useState2[1];
49
-
44
+ direction = _useState2[0],
45
+ setDirection = _useState2[1];
50
46
  var _onClick = useCallback(function (e) {
51
47
  if (onTabClick) {
52
48
  onTabClick(tabId, e);
53
49
  }
54
50
  }, [onTabClick, tabId]);
55
-
56
51
  return /*#__PURE__*/React.createElement("div", {
57
52
  style: style,
58
53
  className: cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx[prefixCls + "__item--disabled"] = disabled, _cx[prefixCls + "__item--" + direction] = direction, _cx)),
@@ -67,7 +62,6 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
67
62
  tabTitle: tabTitle
68
63
  }));
69
64
  setDragId(tabId);
70
-
71
65
  if (_onDragStart) {
72
66
  _onDragStart(e, {
73
67
  dragNode: {
@@ -82,7 +76,6 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
82
76
  e.stopPropagation();
83
77
  e.dataTransfer.clearData();
84
78
  setDragId(null);
85
-
86
79
  if (_onDragEnd) {
87
80
  _onDragEnd(e, {
88
81
  dragNode: {
@@ -100,15 +93,13 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
100
93
  onDragOver: function onDragOver(e) {
101
94
  e.preventDefault();
102
95
  e.stopPropagation();
103
-
104
96
  if (dragId !== tabId && itemRef) {
105
97
  var targetBoundingRect = itemRef.getBoundingClientRect();
106
98
  var hoverTargetSortY = (targetBoundingRect.bottom - targetBoundingRect.top) / 2;
107
- var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2; // 鼠标垂直移动距离
108
-
99
+ var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2;
100
+ // 鼠标垂直移动距离
109
101
  var hoverClientY = e.clientY - targetBoundingRect.top;
110
102
  var hoverClientX = e.clientX - targetBoundingRect.left;
111
-
112
103
  if (layout === 'vertical') {
113
104
  if (hoverClientY < hoverTargetSortY) {
114
105
  setDirection('prev');
@@ -123,7 +114,6 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
123
114
  }
124
115
  }
125
116
  }
126
-
127
117
  if (_onDragOver) {
128
118
  _onDragOver(e, {
129
119
  targetNode: {
@@ -137,10 +127,8 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
137
127
  e.preventDefault();
138
128
  e.stopPropagation();
139
129
  setDirection(null);
140
-
141
130
  if (_onDrop && dragId !== tabId) {
142
131
  var passedData = JSON.parse(e.dataTransfer.getData('tab'));
143
-
144
132
  _onDrop(e, {
145
133
  dragNode: {
146
134
  tabId: tabId,
@@ -158,11 +146,10 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
158
146
  className: prefixCls + "-item__title"
159
147
  }, tabTitle), type === 'desc' && /*#__PURE__*/React.createElement("span", {
160
148
  className: prefixCls + "-item__desc"
161
- }, tabDesc), editable && closeable && /*#__PURE__*/React.createElement("span", {
149
+ }, tabDesc), editable && closeable && ( /*#__PURE__*/React.createElement("span", {
162
150
  className: prefixCls + "__close-btn",
163
151
  onClick: function onClick(e) {
164
152
  e.stopPropagation();
165
-
166
153
  if (onDelete) {
167
154
  onDelete({
168
155
  tabId: tabId,
@@ -170,11 +157,9 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
170
157
  }, index);
171
158
  }
172
159
  }
173
- }, /*#__PURE__*/React.createElement(CloseOutlined, null)));
160
+ }, /*#__PURE__*/React.createElement(CloseOutlined, null))));
174
161
  });
175
-
176
162
  if (__DEV__) {
177
163
  TabItem.displayName = 'TabItem';
178
164
  }
179
-
180
165
  export { TabItem };