@sheinx/base 3.4.2-beta.6 → 3.4.2-beta.7

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 (5) hide show
  1. package/cjs/tabs/tabs-header.d.ts.map +1 -1
  2. package/cjs/tabs/tabs-header.js +22 -4
  3. package/esm/tabs/tabs-header.d.ts.map +1 -1
  4. package/esm/tabs/tabs-header.js +22 -4
  5. package/package.json +2 -2
package/cjs/tabs/tabs-header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAwBrD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAsQzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAwBrD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAiRzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/cjs/tabs/tabs-header.js CHANGED
@@ -130,24 +130,42 @@ var TabsHeader = function TabsHeader(props) {
130
130
  var single = isRtl && !isVertical ? -1 : 1;
131
131
  setTransform(delta + headerRef.current.clientWidth * single);
132
132
  };
133
- var renderHeaderScrollBar = function renderHeaderScrollBar() {
133
+ var _useState3 = (0, _react.useState)({
134
+ offsetTop: 0,
135
+ offsetLeft: 0
136
+ }),
137
+ _useState4 = _slicedToArray(_useState3, 2),
138
+ currentTabOffset = _useState4[0],
139
+ setCurrentTabOffset = _useState4[1];
140
+ var _useState5 = (0, _react.useState)(null),
141
+ _useState6 = _slicedToArray(_useState5, 2),
142
+ currentTabRect = _useState6[0],
143
+ setCurrentTabRect = _useState6[1];
144
+ (0, _react.useEffect)(function () {
134
145
  var _currentTab$getBoundi;
135
146
  if (shape !== 'line' && shape !== 'dash') return;
136
147
  var currentTab = tabRef.current[active];
137
- if (!currentTab) return;
148
+ setCurrentTabOffset({
149
+ offsetTop: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetTop) || 0,
150
+ offsetLeft: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetLeft) || 0
151
+ });
138
152
  var currentTabRect = currentTab === null || currentTab === void 0 || (_currentTab$getBoundi = currentTab.getBoundingClientRect) === null || _currentTab$getBoundi === void 0 ? void 0 : _currentTab$getBoundi.call(currentTab);
153
+ setCurrentTabRect(currentTabRect);
154
+ }, [active]);
155
+ var renderHeaderScrollBar = function renderHeaderScrollBar() {
156
+ if (shape !== 'line' && shape !== 'dash') return;
139
157
  if (!currentTabRect) return;
140
158
  var scrollBarStyle = isVertical ? {
141
159
  right: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('left') ? 0 : 'auto',
142
160
  left: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('right') ? 0 : 'auto',
143
- top: currentTab.offsetTop + currentTabRect.height / 2,
161
+ top: currentTabOffset.offsetTop + currentTabRect.height / 2,
144
162
  height: shape === 'line' ? currentTabRect.height : 24,
145
163
  width: 2,
146
164
  transform: 'translateY(-50%)'
147
165
  } : {
148
166
  bottom: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('top') ? 0 : 'auto',
149
167
  top: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('bottom') ? 0 : 'auto',
150
- left: currentTab.offsetLeft + currentTabRect.width / 2,
168
+ left: currentTabOffset.offsetLeft + currentTabRect.width / 2,
151
169
  width: shape === 'line' ? currentTabRect.width : 24,
152
170
  height: 2,
153
171
  transform: 'translateX(-50%)'
package/esm/tabs/tabs-header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAwBrD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAsQzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAwBrD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAiRzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/esm/tabs/tabs-header.js CHANGED
@@ -124,24 +124,42 @@ var TabsHeader = function TabsHeader(props) {
124
124
  var single = isRtl && !isVertical ? -1 : 1;
125
125
  setTransform(delta + headerRef.current.clientWidth * single);
126
126
  };
127
- var renderHeaderScrollBar = function renderHeaderScrollBar() {
127
+ var _useState3 = useState({
128
+ offsetTop: 0,
129
+ offsetLeft: 0
130
+ }),
131
+ _useState4 = _slicedToArray(_useState3, 2),
132
+ currentTabOffset = _useState4[0],
133
+ setCurrentTabOffset = _useState4[1];
134
+ var _useState5 = useState(null),
135
+ _useState6 = _slicedToArray(_useState5, 2),
136
+ currentTabRect = _useState6[0],
137
+ setCurrentTabRect = _useState6[1];
138
+ useEffect(function () {
128
139
  var _currentTab$getBoundi;
129
140
  if (shape !== 'line' && shape !== 'dash') return;
130
141
  var currentTab = tabRef.current[active];
131
- if (!currentTab) return;
142
+ setCurrentTabOffset({
143
+ offsetTop: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetTop) || 0,
144
+ offsetLeft: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetLeft) || 0
145
+ });
132
146
  var currentTabRect = currentTab === null || currentTab === void 0 || (_currentTab$getBoundi = currentTab.getBoundingClientRect) === null || _currentTab$getBoundi === void 0 ? void 0 : _currentTab$getBoundi.call(currentTab);
147
+ setCurrentTabRect(currentTabRect);
148
+ }, [active]);
149
+ var renderHeaderScrollBar = function renderHeaderScrollBar() {
150
+ if (shape !== 'line' && shape !== 'dash') return;
133
151
  if (!currentTabRect) return;
134
152
  var scrollBarStyle = isVertical ? {
135
153
  right: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('left') ? 0 : 'auto',
136
154
  left: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('right') ? 0 : 'auto',
137
- top: currentTab.offsetTop + currentTabRect.height / 2,
155
+ top: currentTabOffset.offsetTop + currentTabRect.height / 2,
138
156
  height: shape === 'line' ? currentTabRect.height : 24,
139
157
  width: 2,
140
158
  transform: 'translateY(-50%)'
141
159
  } : {
142
160
  bottom: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('top') ? 0 : 'auto',
143
161
  top: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('bottom') ? 0 : 'auto',
144
- left: currentTab.offsetLeft + currentTabRect.width / 2,
162
+ left: currentTabOffset.offsetLeft + currentTabRect.width / 2,
145
163
  width: shape === 'line' ? currentTabRect.width : 24,
146
164
  height: 2,
147
165
  transform: 'translateX(-50%)'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/base",
3
- "version": "3.4.2-beta.6",
3
+ "version": "3.4.2-beta.7",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,7 +10,7 @@
10
10
  "module": "./esm/index.js",
11
11
  "typings": "./cjs/index.d.ts",
12
12
  "dependencies": {
13
- "@sheinx/hooks": "3.4.2-beta.6",
13
+ "@sheinx/hooks": "3.4.2-beta.7",
14
14
  "immer": "^10.0.0",
15
15
  "classnames": "^2.0.0",
16
16
  "@shined/reactive": "^0.1.3-alpha.0"