@hi-ui/tabs 4.0.0-beta.16 → 4.0.0-beta.19

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 (14) hide show
  1. package/lib/cjs/TabList.js +64 -32
  2. package/lib/cjs/TabPane.js +11 -7
  3. package/lib/cjs/hooks/index.js +55 -0
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/esm/TabList.js +62 -32
  6. package/lib/esm/TabPane.js +10 -7
  7. package/lib/esm/hooks/index.js +48 -0
  8. package/lib/esm/styles/index.scss.js +1 -1
  9. package/lib/types/TabItem.d.ts +1 -1
  10. package/lib/types/TabList.d.ts +35 -4
  11. package/lib/types/TabPane.d.ts +20 -3
  12. package/lib/types/Tabs.d.ts +14 -17
  13. package/lib/types/hooks/index.d.ts +8 -0
  14. package/package.json +10 -8
package/lib/cjs/TabList.js CHANGED
@@ -15,6 +15,8 @@ Object.defineProperty(exports, '__esModule', {
15
15
  value: true
16
16
  });
17
17
 
18
+ var tslib = require('tslib');
19
+
18
20
  var React = require('react');
19
21
 
20
22
  var env = require('@hi-ui/env');
@@ -33,6 +35,8 @@ var typeAssertion = require('@hi-ui/type-assertion');
33
35
 
34
36
  var iconButton = require('@hi-ui/icon-button');
35
37
 
38
+ var index = require('./hooks/index.js');
39
+
36
40
  function _interopDefaultLegacy(e) {
37
41
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
38
42
  'default': e
@@ -45,33 +49,34 @@ var _role = 'tabs';
45
49
 
46
50
  var _prefix = classname.getPrefixCls(_role);
47
51
 
48
- var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
52
+ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
49
53
  var _cx;
50
54
 
51
- var data = _ref.data,
52
- className = _ref.className,
53
- style = _ref.style,
54
- activeId = _ref.activeId,
55
- defaultActiveId = _ref.defaultActiveId,
56
- onChange = _ref.onChange,
57
- onTabClick = _ref.onTabClick,
58
- _ref$prefixCls = _ref.prefixCls,
59
- prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
60
- _ref$direction = _ref.direction,
61
- direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
62
- editable = _ref.editable,
63
- onAdd = _ref.onAdd,
64
- onDelete = _ref.onDelete,
65
- draggable = _ref.draggable,
66
- onDragStart = _ref.onDragStart,
67
- onDragOver = _ref.onDragOver,
68
- onDrop = _ref.onDrop,
69
- onDragEnd = _ref.onDragEnd,
70
- _ref$type = _ref.type,
71
- type = _ref$type === void 0 ? 'line' : _ref$type,
72
- extra = _ref.extra;
73
-
74
- var _a;
55
+ var _b;
56
+
57
+ var data = _a.data,
58
+ className = _a.className,
59
+ style = _a.style,
60
+ activeId = _a.activeId,
61
+ defaultActiveId = _a.defaultActiveId,
62
+ onChange = _a.onChange,
63
+ onTabClick = _a.onTabClick,
64
+ _a$prefixCls = _a.prefixCls,
65
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
66
+ _a$direction = _a.direction,
67
+ direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
68
+ editable = _a.editable,
69
+ onAdd = _a.onAdd,
70
+ onDelete = _a.onDelete,
71
+ draggable = _a.draggable,
72
+ onDragStart = _a.onDragStart,
73
+ onDragOver = _a.onDragOver,
74
+ onDrop = _a.onDrop,
75
+ onDragEnd = _a.onDragEnd,
76
+ _a$type = _a.type,
77
+ type = _a$type === void 0 ? 'line' : _a$type,
78
+ extra = _a.extra,
79
+ rest = tslib.__rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
75
80
 
76
81
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
77
82
  if (typeAssertion.isUndef(defaultActiveId)) {
@@ -100,12 +105,39 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
100
105
  setTranslateY = _useState4[1];
101
106
 
102
107
  var itemsRef = React.useRef({});
103
- var showScrollBtn = false;
104
108
 
105
- if (scrollRef && innerRef) {
106
- showScrollBtn = direction === 'horizontal' ? scrollRef.clientWidth > innerRef.clientWidth : scrollRef.clientHeight > innerRef.clientHeight;
107
- }
109
+ var _useState5 = React.useState(false),
110
+ showScrollBtn = _useState5[0],
111
+ setShowScrollBtn = _useState5[1];
112
+
113
+ var showHorizontal = direction === 'horizontal'; // 响应式滚动按钮展示
114
+
115
+ index.useResizeObserver({
116
+ element: innerRef,
117
+ getSize: function getSize(element) {
118
+ return showHorizontal ? element.clientWidth : element.clientHeight;
119
+ },
120
+ onResize: function onResize(_, size) {
121
+ if (scrollRef) {
122
+ var _showScrollBtn = showHorizontal ? scrollRef.clientWidth > size : scrollRef.clientHeight > size;
108
123
 
124
+ setShowScrollBtn(_showScrollBtn);
125
+ }
126
+ }
127
+ });
128
+ index.useResizeObserver({
129
+ element: scrollRef,
130
+ getSize: function getSize(element) {
131
+ return showHorizontal ? element.clientWidth : element.clientHeight;
132
+ },
133
+ onResize: function onResize(_, size) {
134
+ if (innerRef) {
135
+ var _showScrollBtn2 = showHorizontal ? size > innerRef.clientWidth : size > innerRef.clientHeight;
136
+
137
+ setShowScrollBtn(_showScrollBtn2);
138
+ }
139
+ }
140
+ });
109
141
  var onClickTab = React.useCallback(function (key, event) {
110
142
  if (onTabClick) {
111
143
  onTabClick(key, event);
@@ -115,11 +147,11 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
115
147
  setActiveTabId(key);
116
148
  }
117
149
  }, [activeTabId, onTabClick, setActiveTabId]);
118
- return /*#__PURE__*/React__default["default"].createElement("div", {
150
+ return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
119
151
  style: style,
120
152
  className: classname.cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
121
153
  ref: ref
122
- }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
154
+ }, rest), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
123
155
  className: prefixCls + "__left-btn",
124
156
  effect: true,
125
157
  icon: /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null),
@@ -191,7 +223,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
191
223
  prefixCls: prefixCls,
192
224
  direction: direction,
193
225
  tabListRef: innerRef,
194
- itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
226
+ itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTabId]
195
227
  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
196
228
  effect: true,
197
229
  className: prefixCls + "__right-btn",
package/lib/cjs/TabPane.js CHANGED
@@ -15,6 +15,8 @@ Object.defineProperty(exports, '__esModule', {
15
15
  value: true
16
16
  });
17
17
 
18
+ var tslib = require('tslib');
19
+
18
20
  var React = require('react');
19
21
 
20
22
  function _interopDefaultLegacy(e) {
@@ -25,15 +27,17 @@ function _interopDefaultLegacy(e) {
25
27
 
26
28
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
27
29
 
28
- var TabPane = function TabPane(_ref) {
29
- var children = _ref.children,
30
- className = _ref.className,
31
- style = _ref.style,
32
- active = _ref.active;
33
- return /*#__PURE__*/React__default["default"].createElement("div", {
30
+ var TabPane = function TabPane(_a) {
31
+ var children = _a.children,
32
+ className = _a.className,
33
+ style = _a.style,
34
+ active = _a.active,
35
+ rest = tslib.__rest(_a, ["children", "className", "style", "active"]);
36
+
37
+ return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
34
38
  style: style,
35
39
  className: className
36
- }, active ? children : null);
40
+ }, rest), active ? children : null);
37
41
  };
38
42
 
39
43
  exports.TabPane = TabPane;
package/lib/cjs/hooks/index.js ADDED
@@ -0,0 +1,55 @@
1
+ /** @LICENSE
2
+ * @hi-ui/tabs
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ 'use strict';
11
+
12
+ Object.defineProperty(exports, '__esModule', {
13
+ value: true
14
+ });
15
+
16
+ var React = require('react');
17
+
18
+ var useLatest = require('@hi-ui/use-latest');
19
+
20
+ var useResizeObserver = function useResizeObserver(_ref) {
21
+ var element = _ref.element,
22
+ onResize = _ref.onResize,
23
+ _ref$initialSize = _ref.initialSize,
24
+ initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
25
+ getSize = _ref.getSize;
26
+ var getSizeLatestRef = useLatest.useLatestRef(getSize);
27
+ var onResizeLatest = useLatest.useLatestCallback(onResize);
28
+ var prevSizeRef = React.useRef(initialSize);
29
+ React.useEffect(function () {
30
+ if (element) {
31
+ var _resizeObserver = new ResizeObserver(function () {
32
+ var getSize = getSizeLatestRef.current;
33
+
34
+ if (element) {
35
+ if (getSize) {
36
+ var nextSize = getSize(element);
37
+
38
+ if (prevSizeRef.current !== nextSize) {
39
+ prevSizeRef.current = nextSize;
40
+ onResizeLatest(element, nextSize);
41
+ }
42
+ } else {
43
+ onResizeLatest(element);
44
+ }
45
+ }
46
+ });
47
+
48
+ _resizeObserver.observe(element);
49
+ }
50
+
51
+ return function () {};
52
+ }, [element, getSizeLatestRef, onResizeLatest]);
53
+ };
54
+
55
+ exports.useResizeObserver = useResizeObserver;
package/lib/cjs/styles/index.scss.js CHANGED
@@ -14,7 +14,7 @@ Object.defineProperty(exports, '__esModule', {
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--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-4, 8px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px) var(--hi-v4-border-radius-md, 4px) 0 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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); }.hi-v4-tabs__list--button .hi-v4-tabs__item {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-10, 20px);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(.hi-v4-tabs__item--active):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--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 {padding: 0 var(--hi-v4-spacing-10, 20px); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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--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--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--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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 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--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); }.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-10, 20px);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(.hi-v4-tabs__item--active):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--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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;margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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__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 {color: var(--hi-v4-color-gray-500, #929aa6) !important;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; }";
16
16
 
17
- var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
17
+ var __styleInject__ = require('inject-head-style')["default"];
18
18
 
19
19
  __styleInject__(css_248z);
20
20
 
package/lib/esm/TabList.js CHANGED
@@ -7,6 +7,7 @@
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 { __rest } from 'tslib';
10
11
  import React, { forwardRef, useState, useRef, useCallback } from 'react';
11
12
  import { __DEV__ } from '@hi-ui/env';
12
13
  import { TabItem } from './TabItem.js';
@@ -16,37 +17,39 @@ import { TabInk } from './TabInk.js';
16
17
  import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } from '@hi-ui/icons';
17
18
  import { isUndef } from '@hi-ui/type-assertion';
18
19
  import { IconButton } from '@hi-ui/icon-button';
20
+ import { useResizeObserver } from './hooks/index.js';
19
21
  var _role = 'tabs';
20
22
 
21
23
  var _prefix = getPrefixCls(_role);
22
24
 
23
- var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
25
+ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
24
26
  var _cx;
25
27
 
26
- var data = _ref.data,
27
- className = _ref.className,
28
- style = _ref.style,
29
- activeId = _ref.activeId,
30
- defaultActiveId = _ref.defaultActiveId,
31
- onChange = _ref.onChange,
32
- onTabClick = _ref.onTabClick,
33
- _ref$prefixCls = _ref.prefixCls,
34
- prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
35
- _ref$direction = _ref.direction,
36
- direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
37
- editable = _ref.editable,
38
- onAdd = _ref.onAdd,
39
- onDelete = _ref.onDelete,
40
- draggable = _ref.draggable,
41
- onDragStart = _ref.onDragStart,
42
- onDragOver = _ref.onDragOver,
43
- onDrop = _ref.onDrop,
44
- onDragEnd = _ref.onDragEnd,
45
- _ref$type = _ref.type,
46
- type = _ref$type === void 0 ? 'line' : _ref$type,
47
- extra = _ref.extra;
48
-
49
- var _a;
28
+ var _b;
29
+
30
+ var data = _a.data,
31
+ className = _a.className,
32
+ style = _a.style,
33
+ activeId = _a.activeId,
34
+ defaultActiveId = _a.defaultActiveId,
35
+ onChange = _a.onChange,
36
+ onTabClick = _a.onTabClick,
37
+ _a$prefixCls = _a.prefixCls,
38
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
39
+ _a$direction = _a.direction,
40
+ direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
41
+ editable = _a.editable,
42
+ onAdd = _a.onAdd,
43
+ onDelete = _a.onDelete,
44
+ draggable = _a.draggable,
45
+ onDragStart = _a.onDragStart,
46
+ onDragOver = _a.onDragOver,
47
+ onDrop = _a.onDrop,
48
+ onDragEnd = _a.onDragEnd,
49
+ _a$type = _a.type,
50
+ type = _a$type === void 0 ? 'line' : _a$type,
51
+ extra = _a.extra,
52
+ rest = __rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
50
53
 
51
54
  var _useUncontrolledState = useUncontrolledState(function () {
52
55
  if (isUndef(defaultActiveId)) {
@@ -75,12 +78,39 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
75
78
  setTranslateY = _useState4[1];
76
79
 
77
80
  var itemsRef = useRef({});
78
- var showScrollBtn = false;
79
81
 
80
- if (scrollRef && innerRef) {
81
- showScrollBtn = direction === 'horizontal' ? scrollRef.clientWidth > innerRef.clientWidth : scrollRef.clientHeight > innerRef.clientHeight;
82
- }
82
+ var _useState5 = useState(false),
83
+ showScrollBtn = _useState5[0],
84
+ setShowScrollBtn = _useState5[1];
83
85
 
86
+ var showHorizontal = direction === 'horizontal'; // 响应式滚动按钮展示
87
+
88
+ useResizeObserver({
89
+ element: innerRef,
90
+ getSize: function getSize(element) {
91
+ return showHorizontal ? element.clientWidth : element.clientHeight;
92
+ },
93
+ onResize: function onResize(_, size) {
94
+ if (scrollRef) {
95
+ var _showScrollBtn = showHorizontal ? scrollRef.clientWidth > size : scrollRef.clientHeight > size;
96
+
97
+ setShowScrollBtn(_showScrollBtn);
98
+ }
99
+ }
100
+ });
101
+ useResizeObserver({
102
+ element: scrollRef,
103
+ getSize: function getSize(element) {
104
+ return showHorizontal ? element.clientWidth : element.clientHeight;
105
+ },
106
+ onResize: function onResize(_, size) {
107
+ if (innerRef) {
108
+ var _showScrollBtn2 = showHorizontal ? size > innerRef.clientWidth : size > innerRef.clientHeight;
109
+
110
+ setShowScrollBtn(_showScrollBtn2);
111
+ }
112
+ }
113
+ });
84
114
  var onClickTab = useCallback(function (key, event) {
85
115
  if (onTabClick) {
86
116
  onTabClick(key, event);
@@ -90,11 +120,11 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
90
120
  setActiveTabId(key);
91
121
  }
92
122
  }, [activeTabId, onTabClick, setActiveTabId]);
93
- return /*#__PURE__*/React.createElement("div", {
123
+ return /*#__PURE__*/React.createElement("div", Object.assign({
94
124
  style: style,
95
125
  className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
96
126
  ref: ref
97
- }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
127
+ }, rest), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
98
128
  className: prefixCls + "__left-btn",
99
129
  effect: true,
100
130
  icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
@@ -166,7 +196,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
166
196
  prefixCls: prefixCls,
167
197
  direction: direction,
168
198
  tabListRef: innerRef,
169
- itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
199
+ itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTabId]
170
200
  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
171
201
  effect: true,
172
202
  className: prefixCls + "__right-btn",
package/lib/esm/TabPane.js CHANGED
@@ -7,17 +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 { __rest } from 'tslib';
10
11
  import React from 'react';
11
12
 
12
- var TabPane = function TabPane(_ref) {
13
- var children = _ref.children,
14
- className = _ref.className,
15
- style = _ref.style,
16
- active = _ref.active;
17
- return /*#__PURE__*/React.createElement("div", {
13
+ var TabPane = function TabPane(_a) {
14
+ var children = _a.children,
15
+ className = _a.className,
16
+ style = _a.style,
17
+ active = _a.active,
18
+ rest = __rest(_a, ["children", "className", "style", "active"]);
19
+
20
+ return /*#__PURE__*/React.createElement("div", Object.assign({
18
21
  style: style,
19
22
  className: className
20
- }, active ? children : null);
23
+ }, rest), active ? children : null);
21
24
  };
22
25
 
23
26
  export { TabPane };
package/lib/esm/hooks/index.js ADDED
@@ -0,0 +1,48 @@
1
+ /** @LICENSE
2
+ * @hi-ui/tabs
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { useRef, useEffect } from 'react';
11
+ import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
12
+
13
+ var useResizeObserver = function useResizeObserver(_ref) {
14
+ var element = _ref.element,
15
+ onResize = _ref.onResize,
16
+ _ref$initialSize = _ref.initialSize,
17
+ initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
18
+ getSize = _ref.getSize;
19
+ var getSizeLatestRef = useLatestRef(getSize);
20
+ var onResizeLatest = useLatestCallback(onResize);
21
+ var prevSizeRef = useRef(initialSize);
22
+ useEffect(function () {
23
+ if (element) {
24
+ var _resizeObserver = new ResizeObserver(function () {
25
+ var getSize = getSizeLatestRef.current;
26
+
27
+ if (element) {
28
+ if (getSize) {
29
+ var nextSize = getSize(element);
30
+
31
+ if (prevSizeRef.current !== nextSize) {
32
+ prevSizeRef.current = nextSize;
33
+ onResizeLatest(element, nextSize);
34
+ }
35
+ } else {
36
+ onResizeLatest(element);
37
+ }
38
+ }
39
+ });
40
+
41
+ _resizeObserver.observe(element);
42
+ }
43
+
44
+ return function () {};
45
+ }, [element, getSizeLatestRef, onResizeLatest]);
46
+ };
47
+
48
+ export { useResizeObserver };
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,7 +7,7 @@
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 __styleInject__ from 'style-inject/dist/style-inject.es.js';
10
+ import __styleInject__ from 'inject-head-style';
11
11
  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--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-4, 8px) var(--hi-v4-spacing-10, 20px);border-radius: var(--hi-v4-border-radius-md, 4px) var(--hi-v4-border-radius-md, 4px) 0 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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); }.hi-v4-tabs__list--button .hi-v4-tabs__item {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-10, 20px);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(.hi-v4-tabs__item--active):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--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 {padding: 0 var(--hi-v4-spacing-10, 20px); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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--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--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--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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 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--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); }.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-10, 20px);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(.hi-v4-tabs__item--active):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--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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;margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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__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 {color: var(--hi-v4-color-gray-500, #929aa6) !important;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; }";
12
12
 
13
13
  __styleInject__(css_248z);
package/lib/types/TabItem.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { TabPaneProps } from './TabPane';
3
3
  export declare const TabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement | null>>;
4
- interface TabItemProps extends TabPaneProps {
4
+ interface TabItemProps extends Omit<TabPaneProps, 'itemRef' | 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop'> {
5
5
  active: boolean;
6
6
  draggable?: boolean;
7
7
  onTabClick: (key: React.ReactText, event: React.MouseEvent) => void;
package/lib/types/TabList.d.ts CHANGED
@@ -1,13 +1,23 @@
1
1
  import React from 'react';
2
2
  import { TabPaneProps } from './TabPane';
3
+ import { HiBaseHTMLProps } from '@hi-ui/core';
3
4
  export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement | null>>;
4
- export interface TabListProps {
5
- style?: React.CSSProperties;
6
- className?: string;
7
- prefixCls?: string;
5
+ export interface TabListProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop'> {
6
+ /**
7
+ * tabs 面板数据
8
+ */
8
9
  data: TabPaneProps[];
10
+ /**
11
+ * 是否可编辑
12
+ */
9
13
  direction?: 'horizontal' | 'vertical';
14
+ /**
15
+ * `activeId` 改变的回调
16
+ */
10
17
  onChange?: (tabId: React.ReactText) => void;
18
+ /**
19
+ * 标签点击触发回调
20
+ */
11
21
  onTabClick?: (tabId: React.ReactText, event: React.MouseEvent) => void;
12
22
  /**
13
23
  * 默认高亮id
@@ -17,8 +27,17 @@ export interface TabListProps {
17
27
  * 高亮id
18
28
  */
19
29
  activeId?: React.ReactText;
30
+ /**
31
+ * 是否可编辑
32
+ */
20
33
  editable?: boolean;
34
+ /**
35
+ * 是否可拖拽
36
+ */
21
37
  draggable?: boolean;
38
+ /**
39
+ * 布局类型
40
+ */
22
41
  type?: 'desc' | 'card' | 'button' | 'line';
23
42
  /**
24
43
  * 右侧的拓展区域
@@ -32,17 +51,29 @@ export interface TabListProps {
32
51
  * 节点删除时时触发
33
52
  */
34
53
  onDelete?: (deletedNode: TabPaneProps, index: number) => void;
54
+ /**
55
+ * 节点开始拖拽时触发
56
+ */
35
57
  onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
36
58
  dragNode: TabPaneProps;
37
59
  }) => void;
60
+ /**
61
+ * 节点拖拽移动时触发
62
+ */
38
63
  onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
39
64
  targetNode: TabPaneProps;
40
65
  }) => void;
66
+ /**
67
+ * 节点拖拽放下时触发
68
+ */
41
69
  onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
42
70
  dragNode: TabPaneProps;
43
71
  targetNode: TabPaneProps;
44
72
  direction: 'prev' | 'next' | null;
45
73
  }) => void;
74
+ /**
75
+ * 节点拖拽成功时触发
76
+ */
46
77
  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
47
78
  dragNode: TabPaneProps;
48
79
  }) => void;
package/lib/types/TabPane.d.ts CHANGED
@@ -1,12 +1,29 @@
1
1
  import React from 'react';
2
+ import { HiBaseHTMLProps } from '@hi-ui/core';
2
3
  export declare const TabPane: React.FC<TabPaneProps>;
3
- export interface TabPaneProps {
4
- style?: React.CSSProperties;
5
- className?: string;
4
+ export interface TabPaneProps extends HiBaseHTMLProps<'div'> {
5
+ /**
6
+ * 标签是否禁用
7
+ */
6
8
  disabled?: boolean;
9
+ /**
10
+ * 每个标签的唯一标识
11
+ */
7
12
  tabId: React.ReactText;
13
+ /**
14
+ * 选项卡头显示文字
15
+ */
8
16
  tabTitle: React.ReactNode;
17
+ /**
18
+ * 选项卡头描述文字，仅对 type='desc'时生效
19
+ */
9
20
  tabDesc?: React.ReactNode;
21
+ /**
22
+ * 标签是否可以关闭，仅对 type='editable'时生效
23
+ */
10
24
  closeable?: boolean;
25
+ /**
26
+ * 标签是否激活
27
+ */
11
28
  active?: boolean;
12
29
  }
package/lib/types/Tabs.d.ts CHANGED
@@ -1,26 +1,11 @@
1
1
  import React from 'react';
2
2
  import { TabPaneProps } from './TabPane';
3
+ import { HiBaseHTMLProps } from '@hi-ui/core';
3
4
  /**
4
5
  * TODO: What is Tabs
5
6
  */
6
7
  export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement | null>>;
7
- export interface TabsProps {
8
- /**
9
- * 组件默认的选择器类
10
- */
11
- prefixCls?: string;
12
- /**
13
- * 组件的语义化 Role 属性
14
- */
15
- role?: string;
16
- /**
17
- * 组件的注入选择器类
18
- */
19
- className?: string;
20
- /**
21
- * 组件的注入样式
22
- */
23
- style?: React.CSSProperties;
8
+ export interface TabsProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop'> {
24
9
  /**
25
10
  * 是否可拖拽
26
11
  */
@@ -69,17 +54,29 @@ export interface TabsProps {
69
54
  * 节点删除时时触发
70
55
  */
71
56
  onDelete?: (deletedNode: TabPaneProps, index: number) => void;
57
+ /**
58
+ * 节点开始拖拽时触发
59
+ */
72
60
  onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
73
61
  dragNode: TabPaneProps;
74
62
  }) => void;
63
+ /**
64
+ * 节点拖拽移动时触发
65
+ */
75
66
  onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
76
67
  targetNode: TabPaneProps;
77
68
  }) => void;
69
+ /**
70
+ * 节点拖拽放下时触发
71
+ */
78
72
  onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
79
73
  dragNode: TabPaneProps;
80
74
  targetNode: TabPaneProps;
81
75
  direction: 'prev' | 'next' | null;
82
76
  }) => void;
77
+ /**
78
+ * 节点拖拽成功时触发
79
+ */
83
80
  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
84
81
  dragNode: TabPaneProps;
85
82
  }) => void;
package/lib/types/hooks/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ interface UseResizeObserverProps {
2
+ element: HTMLElement | null;
3
+ onResize: (element: HTMLElement, size?: any) => void;
4
+ initialSize?: any;
5
+ getSize?: (element: HTMLElement) => any;
6
+ }
7
+ export declare const useResizeObserver: ({ element, onResize, initialSize, getSize, }: UseResizeObserverProps) => void;
8
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "4.0.0-beta.16",
3
+ "version": "4.0.0-beta.19",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,21 +44,23 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@hi-ui/classname": "^4.0.0-beta.0",
47
+ "@hi-ui/core": "^4.0.0-beta.9",
47
48
  "@hi-ui/core-css": "^4.0.0-beta.5",
48
- "@hi-ui/env": "^4.0.0-beta.0",
49
- "@hi-ui/icon-button": "^4.0.0-beta.9",
50
- "@hi-ui/icons": "^4.0.0-beta.10",
51
- "@hi-ui/type-assertion": "^4.0.0-beta.4",
52
- "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.4"
49
+ "@hi-ui/env": "^4.0.0-beta.1",
50
+ "@hi-ui/icon-button": "^4.0.0-beta.10",
51
+ "@hi-ui/icons": "^4.0.0-beta.11",
52
+ "@hi-ui/type-assertion": "^4.0.0-beta.5",
53
+ "@hi-ui/use-latest": "^4.0.0-beta.5",
54
+ "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5"
53
55
  },
54
56
  "peerDependencies": {
55
57
  "react": ">=16.8.6",
56
58
  "react-dom": ">=16.8.6"
57
59
  },
58
60
  "devDependencies": {
59
- "@hi-ui/hi-build": "^4.0.0-beta.4",
61
+ "@hi-ui/hi-build": "^4.0.0-beta.5",
60
62
  "react": "^17.0.1",
61
63
  "react-dom": "^17.0.1"
62
64
  },
63
- "gitHead": "7f47840510e6dfce429eeed1591c154e321cd14f"
65
+ "gitHead": "9956956831546dfe051b56cf8330912a772fa86f"
64
66
  }