@hi-ui/tabs 5.0.0-experimental.1 → 5.0.0-rc.0

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 (10) hide show
  1. package/CHANGELOG.md +28 -53
  2. package/lib/cjs/TabInk.js +12 -6
  3. package/lib/cjs/TabList.js +3 -1
  4. package/lib/esm/TabInk.js +12 -6
  5. package/lib/esm/TabList.js +3 -1
  6. package/lib/types/TabItem.d.ts +1 -1
  7. package/lib/types/TabList.d.ts +4 -4
  8. package/lib/types/Tabs.d.ts +4 -4
  9. package/lib/types/index.d.ts +1 -0
  10. package/package.json +18 -18
package/CHANGELOG.md CHANGED
@@ -1,28 +1,6 @@
1
1
  # @hi-ui/tabs
2
2
 
3
- ## 5.0.0-experimental.1
4
-
5
- ### Minor Changes
6
-
7
- - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
8
-
9
- ### Patch Changes
10
-
11
- - eb17c4697: style: 修复 UI/样式问题 (5.0)
12
- - Updated dependencies [7f204c892]
13
- - Updated dependencies [eb17c4697]
14
- - Updated dependencies [eb17c4697]
15
- - Updated dependencies [c407744fe]
16
- - Updated dependencies [59cef699f]
17
- - @hi-ui/icons@5.0.0-experimental.1
18
- - @hi-ui/core@5.0.0-experimental.1
19
- - @hi-ui/button@5.0.0-experimental.1
20
- - @hi-ui/icon-button@5.0.0-experimental.1
21
- - @hi-ui/input@5.0.0-experimental.2
22
- - @hi-ui/tooltip@5.0.0-experimental.1
23
- - @hi-ui/use-merge-semantic@5.0.0-experimental.0
24
-
25
- ## 5.0.0-experimental.0
3
+ ## 5.0.0-rc.0
26
4
 
27
5
  ### Major Changes
28
6
 
@@ -37,70 +15,67 @@
37
15
  - 6bb4d999c: feat(tabs): 支持编辑功能和设置最大标题宽度 (5.0)
38
16
  - 120f6b15a: feat(tabs): add editRender api (5.0)
39
17
  - 9b34d99bc: feat(tabs): 增加 showDivider 参数 (5.0)
18
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
40
19
 
41
20
  ### Patch Changes
42
21
 
43
- - 1662753e0: style: fix ui bug (5.0)
44
22
  - 8c0ee78f0: perf: 优化全局 size 配置,对于组件中没有的 size 值,取最接近的尺寸展示 (5.0)
45
- - be5a59325: style: 修改样式问题 (5.0)
46
23
  - 2e56529f7: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
47
- - e2d184e74: style: 修改 UI 问题 (5.0)
24
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
48
25
  - 33da3144e: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
49
- - 7f3abee55: style: fix ui bug (5.0)
50
- - a0f0c9d6b: style: 修改 UI 问题 (5.0)
51
- - 86910f5e2: style: 修改 UI (5.0)
52
- - Updated dependencies [6fb223e3a]
53
26
  - Updated dependencies [da2e63a14]
54
27
  - Updated dependencies [1e226cd66]
55
28
  - Updated dependencies [eea29eade]
56
- - Updated dependencies [1662753e0]
29
+ - Updated dependencies [7f204c892]
57
30
  - Updated dependencies [122d1d859]
58
31
  - Updated dependencies [f1ab51725]
59
32
  - Updated dependencies [41552be0b]
33
+ - Updated dependencies [eb17c4697]
60
34
  - Updated dependencies [8c0ee78f0]
61
35
  - Updated dependencies [9b34d99bc]
62
36
  - Updated dependencies [8f3aa85e4]
63
- - Updated dependencies [f4fc0ef30]
64
- - Updated dependencies [c021539a3]
65
37
  - Updated dependencies [ec4c7faa2]
66
38
  - Updated dependencies [29cae09ea]
67
39
  - Updated dependencies [fd4c20bbd]
68
- - Updated dependencies [be5a59325]
69
- - Updated dependencies [71fc15e5c]
70
40
  - Updated dependencies [79ea480f3]
71
41
  - Updated dependencies [2e56529f7]
42
+ - Updated dependencies [3a7186e4b]
43
+ - Updated dependencies [8f23e9322]
72
44
  - Updated dependencies [8a92ec660]
73
45
  - Updated dependencies [1429eced2]
46
+ - Updated dependencies [eb17c4697]
74
47
  - Updated dependencies [9b34d99bc]
75
48
  - Updated dependencies [976ec929d]
76
49
  - Updated dependencies [d021b4fa6]
77
50
  - Updated dependencies [f1ab51725]
78
51
  - Updated dependencies [6dca7795c]
52
+ - Updated dependencies [900c6c2f0]
53
+ - Updated dependencies [c407744fe]
54
+ - Updated dependencies [d91a8bb0f]
79
55
  - Updated dependencies [77d969c2e]
80
56
  - Updated dependencies [4006b2c8c]
81
57
  - Updated dependencies [e42e2badf]
82
58
  - Updated dependencies [33da3144e]
83
- - Updated dependencies [0a8cc07a7]
84
- - Updated dependencies [7f3abee55]
85
59
  - Updated dependencies [6fcda9bf2]
86
60
  - Updated dependencies [58ad82e94]
87
- - Updated dependencies [a0f0c9d6b]
61
+ - Updated dependencies [95d930354]
62
+ - Updated dependencies [59cef699f]
88
63
  - Updated dependencies [99801c2d1]
89
- - Updated dependencies [86910f5e2]
90
- - @hi-ui/tooltip@5.0.0-experimental.0
91
- - @hi-ui/input@5.0.0-experimental.0
92
- - @hi-ui/button@5.0.0-experimental.0
93
- - @hi-ui/icons@5.0.0-experimental.0
94
- - @hi-ui/icon-button@5.0.0-experimental.0
95
- - @hi-ui/core@5.0.0-experimental.0
96
- - @hi-ui/use-id@5.0.0-experimental.0
97
- - @hi-ui/use-latest@5.0.0-experimental.0
98
- - @hi-ui/use-uncontrolled-state@5.0.0-experimental.0
99
- - @hi-ui/use-unmount-effect@5.0.0-experimental.0
100
- - @hi-ui/classname@5.0.0-experimental.0
101
- - @hi-ui/env@5.0.0-experimental.0
102
- - @hi-ui/react-utils@5.0.0-experimental.0
103
- - @hi-ui/type-assertion@5.0.0-experimental.0
64
+ - @hi-ui/input@5.0.0-rc.0
65
+ - @hi-ui/tooltip@5.0.0-rc.0
66
+ - @hi-ui/button@5.0.0-rc.0
67
+ - @hi-ui/icons@5.0.0-rc.0
68
+ - @hi-ui/core@5.0.0-rc.0
69
+ - @hi-ui/use-id@5.0.0-rc.0
70
+ - @hi-ui/use-latest@5.0.0-rc.0
71
+ - @hi-ui/use-uncontrolled-state@5.0.0-rc.0
72
+ - @hi-ui/use-unmount-effect@5.0.0-rc.0
73
+ - @hi-ui/icon-button@5.0.0-rc.0
74
+ - @hi-ui/classname@5.0.0-rc.0
75
+ - @hi-ui/env@5.0.0-rc.0
76
+ - @hi-ui/react-utils@5.0.0-rc.0
77
+ - @hi-ui/type-assertion@5.0.0-rc.0
78
+ - @hi-ui/use-merge-semantic@5.0.0-rc.0
104
79
 
105
80
  ## 4.2.0
106
81
 
package/lib/cjs/TabInk.js CHANGED
@@ -36,6 +36,7 @@ var TabInk = function TabInk(_ref) {
36
36
  if (!inkRef.current) return;
37
37
  if (!activeItemElement) return;
38
38
  var computedStyle = getComputedStyle(activeItemElement);
39
+ var rtl = containerElement ? getComputedStyle(containerElement).direction === 'rtl' : false;
39
40
  // issue: https://github.com/XiaoMi/hiui/issues/2937
40
41
  // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offset
41
42
  // const itemRect = activeItemElement.getBoundingClientRect()
@@ -49,22 +50,27 @@ var TabInk = function TabInk(_ref) {
49
50
  // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
50
51
  top: offset + paddingTop + 2 + 'px',
51
52
  height: height - paddingTop - paddingBottom - 4 + "px",
53
+ insetInlineStart: '',
52
54
  left: '',
55
+ right: '',
53
56
  width: ''
54
57
  };
55
58
  } else {
56
- var paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'));
57
- var paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'));
59
+ var paddingInlineStart = parseFloat(computedStyle.getPropertyValue('padding-inline-start'));
60
+ var paddingInlineEnd = parseFloat(computedStyle.getPropertyValue('padding-inline-end'));
58
61
  var width = activeItemElement.offsetWidth;
62
+ var inlineStart = (rtl ? -offset : offset) + paddingInlineStart;
59
63
  _style = {
60
- left: offset + paddingLeft + 'px',
61
- width: width - paddingRight - paddingLeft + "px",
64
+ insetInlineStart: inlineStart + 'px',
65
+ width: width - paddingInlineEnd - paddingInlineStart + "px",
62
66
  top: '',
63
- height: ''
67
+ height: '',
68
+ left: '',
69
+ right: ''
64
70
  };
65
71
  }
66
72
  Object.assign(inkRef.current.style, _style);
67
- }, [activeItemElement, getTabOffset, activeTabId, showHorizontal]);
73
+ }, [activeItemElement, containerElement, getTabOffset, activeTabId, showHorizontal]);
68
74
  React.useEffect(function () {
69
75
  setTabLnkPositionStyle();
70
76
  }, [setTabLnkPositionStyle]);
package/lib/cjs/TabList.js CHANGED
@@ -174,6 +174,8 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
174
174
  return target;
175
175
  }, [showHorizontal]);
176
176
  var getTabOffset = React.useCallback(function (tabId) {
177
+ var targetElement = itemsRef.current[tabId];
178
+ if (!targetElement) return 0;
177
179
  // 获取目标元素的位置
178
180
  var targetPos = getTabPos(tabId);
179
181
  // 获取基准元素的位置（第一个）
@@ -183,7 +185,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
183
185
  basePos = getTabPos(baseItem.tabId);
184
186
  }
185
187
  // 返回目标元素相对基准元素的偏移量
186
- return targetPos ? targetPos - basePos : 0;
188
+ return targetPos - basePos;
187
189
  }, [data, getTabPos]);
188
190
  var syncScrollPosition = React.useCallback(function (tabId) {
189
191
  if (!innerElement) return;
package/lib/esm/TabInk.js CHANGED
@@ -24,6 +24,7 @@ var TabInk = function TabInk(_ref) {
24
24
  if (!inkRef.current) return;
25
25
  if (!activeItemElement) return;
26
26
  var computedStyle = getComputedStyle(activeItemElement);
27
+ var rtl = containerElement ? getComputedStyle(containerElement).direction === 'rtl' : false;
27
28
  // issue: https://github.com/XiaoMi/hiui/issues/2937
28
29
  // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offset
29
30
  // const itemRect = activeItemElement.getBoundingClientRect()
@@ -37,22 +38,27 @@ var TabInk = function TabInk(_ref) {
37
38
  // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
38
39
  top: offset + paddingTop + 2 + 'px',
39
40
  height: height - paddingTop - paddingBottom - 4 + "px",
41
+ insetInlineStart: '',
40
42
  left: '',
43
+ right: '',
41
44
  width: ''
42
45
  };
43
46
  } else {
44
- var paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'));
45
- var paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'));
47
+ var paddingInlineStart = parseFloat(computedStyle.getPropertyValue('padding-inline-start'));
48
+ var paddingInlineEnd = parseFloat(computedStyle.getPropertyValue('padding-inline-end'));
46
49
  var width = activeItemElement.offsetWidth;
50
+ var inlineStart = (rtl ? -offset : offset) + paddingInlineStart;
47
51
  _style = {
48
- left: offset + paddingLeft + 'px',
49
- width: width - paddingRight - paddingLeft + "px",
52
+ insetInlineStart: inlineStart + 'px',
53
+ width: width - paddingInlineEnd - paddingInlineStart + "px",
50
54
  top: '',
51
- height: ''
55
+ height: '',
56
+ left: '',
57
+ right: ''
52
58
  };
53
59
  }
54
60
  Object.assign(inkRef.current.style, _style);
55
- }, [activeItemElement, getTabOffset, activeTabId, showHorizontal]);
61
+ }, [activeItemElement, containerElement, getTabOffset, activeTabId, showHorizontal]);
56
62
  useEffect(function () {
57
63
  setTabLnkPositionStyle();
58
64
  }, [setTabLnkPositionStyle]);
package/lib/esm/TabList.js CHANGED
@@ -161,6 +161,8 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
161
161
  return target;
162
162
  }, [showHorizontal]);
163
163
  var getTabOffset = useCallback(function (tabId) {
164
+ var targetElement = itemsRef.current[tabId];
165
+ if (!targetElement) return 0;
164
166
  // 获取目标元素的位置
165
167
  var targetPos = getTabPos(tabId);
166
168
  // 获取基准元素的位置（第一个）
@@ -170,7 +172,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
170
172
  basePos = getTabPos(baseItem.tabId);
171
173
  }
172
174
  // 返回目标元素相对基准元素的偏移量
173
- return targetPos ? targetPos - basePos : 0;
175
+ return targetPos - basePos;
174
176
  }, [data, getTabPos]);
175
177
  var syncScrollPosition = useCallback(function (tabId) {
176
178
  if (!innerElement) return;
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
- export type EditActions = {
4
+ export declare type EditActions = {
5
5
  copy: (targetIndex?: number) => void;
6
6
  edit: () => void;
7
7
  delete: () => void;
package/lib/types/TabList.d.ts CHANGED
@@ -4,10 +4,10 @@ import { EditActions } from './TabItem';
4
4
  import { HiBaseHTMLProps } from '@hi-ui/core';
5
5
  import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
6
6
  export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement | null>>;
7
- export type TabListSemanticName = 'root' | 'prevBtn' | 'inner' | 'scroll' | 'addInput' | 'nextBtn' | 'addBtnWrap' | 'addBtn';
8
- export type TabListSemanticClassNames = SemanticClassNamesType<TabListProps, TabListSemanticName>;
9
- export type TabListSemanticStyles = SemanticStylesType<TabListProps, TabListSemanticName>;
10
- export type TabListSemantic = ComponentSemantic<TabListSemanticClassNames, TabListSemanticStyles>;
7
+ export declare type TabListSemanticName = 'root' | 'prevBtn' | 'inner' | 'scroll' | 'addInput' | 'nextBtn' | 'addBtnWrap' | 'addBtn';
8
+ export declare type TabListSemanticClassNames = SemanticClassNamesType<TabListProps, TabListSemanticName>;
9
+ export declare type TabListSemanticStyles = SemanticStylesType<TabListProps, TabListSemanticName>;
10
+ export declare type TabListSemantic = ComponentSemantic<TabListSemanticClassNames, TabListSemanticStyles>;
11
11
  export interface TabListProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop' | 'onCopy'>, TabListSemantic {
12
12
  /**
13
13
  * tabs 面板数据
package/lib/types/Tabs.d.ts CHANGED
@@ -7,10 +7,10 @@ import { EditActions } from './TabItem';
7
7
  * Tabs 标签页
8
8
  */
9
9
  export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement | null>>;
10
- export type TabsSemanticName = 'root' | 'list' | 'content';
11
- export type TabsSemanticClassNames = SemanticClassNamesType<TabsProps, TabsSemanticName>;
12
- export type TabsSemanticStyles = SemanticStylesType<TabsProps, TabsSemanticName>;
13
- export type TabsSemantic = ComponentSemantic<TabsSemanticClassNames, TabsSemanticStyles>;
10
+ export declare type TabsSemanticName = 'root' | 'list' | 'content';
11
+ export declare type TabsSemanticClassNames = SemanticClassNamesType<TabsProps, TabsSemanticName>;
12
+ export declare type TabsSemanticStyles = SemanticStylesType<TabsProps, TabsSemanticName>;
13
+ export declare type TabsSemantic = ComponentSemantic<TabsSemanticClassNames, TabsSemanticStyles>;
14
14
  export interface TabsProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop' | 'onCopy'>, TabsSemantic {
15
15
  /**
16
16
  * 是否可拖拽
package/lib/types/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import './styles/index.scss';
2
3
  declare const Tabs: import("react").ForwardRefExoticComponent<import("./Tabs").TabsProps & import("react").RefAttributes<HTMLDivElement | null>> & {
3
4
  Pane: import("react").FC<import("./TabPane").TabPaneProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "5.0.0-experimental.1",
3
+ "version": "5.0.0-rc.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,29 +44,29 @@
44
44
  "url": "https://github.com/XiaoMi/hiui/issues"
45
45
  },
46
46
  "dependencies": {
47
- "@hi-ui/button": "^5.0.0-experimental.1",
48
- "@hi-ui/classname": "^5.0.0-experimental.0",
49
- "@hi-ui/env": "^5.0.0-experimental.0",
50
- "@hi-ui/icon-button": "^5.0.0-experimental.1",
51
- "@hi-ui/icons": "^5.0.0-experimental.1",
52
- "@hi-ui/input": "^5.0.0-experimental.2",
53
- "@hi-ui/react-utils": "^5.0.0-experimental.0",
54
- "@hi-ui/tooltip": "^5.0.0-experimental.1",
55
- "@hi-ui/type-assertion": "^5.0.0-experimental.0",
56
- "@hi-ui/use-latest": "^5.0.0-experimental.0",
57
- "@hi-ui/use-id": "^5.0.0-experimental.0",
58
- "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
59
- "@hi-ui/use-unmount-effect": "^5.0.0-experimental.0",
60
- "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
47
+ "@hi-ui/button": "^5.0.0-rc.0",
48
+ "@hi-ui/classname": "^5.0.0-rc.0",
49
+ "@hi-ui/env": "^5.0.0-rc.0",
50
+ "@hi-ui/icon-button": "^5.0.0-rc.0",
51
+ "@hi-ui/icons": "^5.0.0-rc.0",
52
+ "@hi-ui/input": "^5.0.0-rc.0",
53
+ "@hi-ui/react-utils": "^5.0.0-rc.0",
54
+ "@hi-ui/tooltip": "^5.0.0-rc.0",
55
+ "@hi-ui/type-assertion": "^5.0.0-rc.0",
56
+ "@hi-ui/use-latest": "^5.0.0-rc.0",
57
+ "@hi-ui/use-merge-semantic": "^5.0.0-rc.0",
58
+ "@hi-ui/use-id": "^5.0.0-rc.0",
59
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-rc.0",
60
+ "@hi-ui/use-unmount-effect": "^5.0.0-rc.0"
61
61
  },
62
62
  "peerDependencies": {
63
- "@hi-ui/core": ">=5.0.0-experimental.1",
63
+ "@hi-ui/core": ">=5.0.0-rc.0",
64
64
  "react": ">=16.8.6",
65
65
  "react-dom": ">=16.8.6"
66
66
  },
67
67
  "devDependencies": {
68
- "@hi-ui/core": "^5.0.0-experimental.1",
69
- "@hi-ui/core-css": "^5.0.0-experimental.2",
68
+ "@hi-ui/core": "^5.0.0-rc.0",
69
+ "@hi-ui/core-css": "^5.0.0-rc.0",
70
70
  "react": "^17.0.1",
71
71
  "react-dom": "^17.0.1"
72
72
  }