@sheinx/hooks 3.0.0-alpha.19 → 3.0.0-alpha.20

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 (17) hide show
  1. package/cjs/common/use-position-style/get-position-style.d.ts +1 -0
  2. package/cjs/common/use-position-style/get-position-style.d.ts.map +1 -1
  3. package/cjs/common/use-position-style/get-position-style.js +6 -2
  4. package/cjs/common/use-position-style/index.d.ts +3 -3
  5. package/cjs/common/use-position-style/index.d.ts.map +1 -1
  6. package/cjs/common/use-position-style/index.js +29 -24
  7. package/cjs/components/use-tabs/use-tabs.type.d.ts +1 -0
  8. package/cjs/components/use-tabs/use-tabs.type.d.ts.map +1 -1
  9. package/esm/common/use-position-style/get-position-style.d.ts +1 -0
  10. package/esm/common/use-position-style/get-position-style.d.ts.map +1 -1
  11. package/esm/common/use-position-style/get-position-style.js +6 -2
  12. package/esm/common/use-position-style/index.d.ts +3 -3
  13. package/esm/common/use-position-style/index.d.ts.map +1 -1
  14. package/esm/common/use-position-style/index.js +29 -24
  15. package/esm/components/use-tabs/use-tabs.type.d.ts +1 -0
  16. package/esm/components/use-tabs/use-tabs.type.d.ts.map +1 -1
  17. package/package.json +1 -1
package/cjs/common/use-position-style/get-position-style.d.ts CHANGED
@@ -2,5 +2,6 @@ import React from 'react';
2
2
  export declare const getPositionStyle: (position: string, config?: {
3
3
  popupGap?: number | undefined;
4
4
  zIndex?: number | undefined;
5
+ fixedWidth?: boolean | "min" | undefined;
5
6
  } | undefined) => React.CSSProperties;
6
7
  //# sourceMappingURL=get-position-style.d.ts.map
package/cjs/common/use-position-style/get-position-style.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"get-position-style.d.ts","sourceRoot":"","sources":["get-position-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,gBAAgB,aACjB,MAAM;;;qCAmCjB,CAAC"}
1
+ {"version":3,"file":"get-position-style.d.ts","sourceRoot":"","sources":["get-position-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,gBAAgB,aACjB,MAAM;;;;qCAwCjB,CAAC"}
package/cjs/common/use-position-style/get-position-style.js CHANGED
@@ -16,11 +16,15 @@ var getPositionStyle = function getPositionStyle(position, config) {
16
16
  var _ref = config || {},
17
17
  _ref$popupGap = _ref.popupGap,
18
18
  popupGap = _ref$popupGap === void 0 ? 0 : _ref$popupGap;
19
- var mainMargin = "calc(100% + ".concat(popupGap, "px");
20
- var halfMargin = "calc(50% + ".concat(popupGap, "px");
19
+ var mainMargin = "calc(100% + ".concat(popupGap, "px)");
20
+ var halfMargin = "calc(50% + ".concat(popupGap, "px)");
21
21
  var newStyle = {
22
22
  zIndex: config === null || config === void 0 ? void 0 : config.zIndex
23
23
  };
24
+ if (config !== null && config !== void 0 && config.fixedWidth) {
25
+ var key = config.fixedWidth === 'min' ? 'minWidth' : 'width';
26
+ newStyle[key] = '100%';
27
+ }
24
28
  if (position === 'drop-down') {
25
29
  newStyle.top = mainMargin;
26
30
  newStyle.left = 0;
package/cjs/common/use-position-style/index.d.ts CHANGED
@@ -6,9 +6,9 @@ export interface PositionStyleConfig {
6
6
  position: PositionType | undefined;
7
7
  absolute: boolean;
8
8
  show: boolean;
9
- parentEl: HTMLElement | null | undefined;
10
- popupEl?: HTMLElement | null | undefined;
11
- visibleEl?: HTMLElement | null;
9
+ parentElRef: React.RefObject<HTMLElement>;
10
+ popupElRef: React.RefObject<HTMLElement>;
11
+ scrollElRef?: React.RefObject<HTMLElement>;
12
12
  getContainer: () => HTMLElement | null | undefined;
13
13
  zIndex?: number;
14
14
  popupGap?: number;
package/cjs/common/use-position-style/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,oBAAY,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,oBAAY,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,aAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB,wBAyN3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,oBAAY,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,oBAAY,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,aAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB,wBAqN3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/cjs/common/use-position-style/index.js CHANGED
@@ -25,6 +25,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
25
25
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
26
26
  var horizontalPosition = ['left-bottom', 'left-top', 'right-bottom', 'right-top', 'left', 'right'];
27
27
  var verticalPosition = ['bottom-left', 'bottom-right', 'top-left', 'top-right', 'bottom', 'top'];
28
+ var hideStyle = {
29
+ pointerEvents: 'none',
30
+ position: 'absolute',
31
+ zIndex: -1000,
32
+ opacity: 0
33
+ };
28
34
  var usePositionStyle = function usePositionStyle(config) {
29
35
  var _ref = config || {},
30
36
  absolute = _ref.absolute,
@@ -36,17 +42,13 @@ var usePositionStyle = function usePositionStyle(config) {
36
42
  _ref$popupGap = _ref.popupGap,
37
43
  popupGap = _ref$popupGap === void 0 ? 2 : _ref$popupGap,
38
44
  getContainer = _ref.getContainer,
39
- parentEl = _ref.parentEl,
40
- popupEl = _ref.popupEl,
41
- visibleEl = _ref.visibleEl,
45
+ parentElRef = _ref.parentElRef,
46
+ popupElRef = _ref.popupElRef,
47
+ scrollElRef = _ref.scrollElRef,
42
48
  updateKey = _ref.updateKey,
43
49
  adjust = _ref.adjust;
44
50
  // 初次渲染无样式的时候， 隐藏展示
45
- var _useState = (0, _react.useState)({
46
- pointerEvents: 'none',
47
- position: 'absolute',
48
- zIndex: -1000
49
- }),
51
+ var _useState = (0, _react.useState)(hideStyle),
50
52
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
51
53
  style = _useState2[0],
52
54
  setStyle = _useState2[1];
@@ -86,12 +88,12 @@ var usePositionStyle = function usePositionStyle(config) {
86
88
  return newPosition;
87
89
  };
88
90
  var getPopUpInfo = function getPopUpInfo(parentRect) {
89
- var _popupEl$parentElemen;
90
- if (!popupEl) return {
91
+ var _popupElRef$current$p;
92
+ if (!popupElRef.current) return {
91
93
  width: 0,
92
94
  height: 0
93
95
  };
94
- var el = popupEl.cloneNode(true);
96
+ var el = popupElRef.current.cloneNode(true);
95
97
  el.style.visibility = 'true';
96
98
  el.style.opacity = '0';
97
99
  el.style.pointerEvents = 'none';
@@ -100,7 +102,7 @@ var usePositionStyle = function usePositionStyle(config) {
100
102
  var widthKey = fixedWidth === 'min' ? 'minWidth' : 'width';
101
103
  el.style[widthKey] = parentRect.width + 'px';
102
104
  }
103
- (_popupEl$parentElemen = popupEl.parentElement) === null || _popupEl$parentElemen === void 0 ? void 0 : _popupEl$parentElemen.appendChild(el);
105
+ (_popupElRef$current$p = popupElRef.current.parentElement) === null || _popupElRef$current$p === void 0 ? void 0 : _popupElRef$current$p.appendChild(el);
104
106
  var height = el.offsetHeight;
105
107
  var width = el.offsetWidth;
106
108
  el.remove();
@@ -121,6 +123,7 @@ var usePositionStyle = function usePositionStyle(config) {
121
123
  var targetPosition = position;
122
124
  var rootContainer = getContainer() || document.body;
123
125
  var containerRect = rootContainer.getBoundingClientRect();
126
+ var bodyRect = (document.documentElement || document.body).getBoundingClientRect();
124
127
  var containerScrollBarWidth = rootContainer.offsetWidth - rootContainer.clientWidth;
125
128
  var containerScroll = {
126
129
  left: rootContainer.scrollLeft,
@@ -139,20 +142,20 @@ var usePositionStyle = function usePositionStyle(config) {
139
142
  style.left = rect.left - containerRect.left + containerScroll.left;
140
143
  style.transform = '';
141
144
  if (adjust) {
142
- overRight = rect.left + context.popUpWidth - containerRect.right + containerScrollBarWidth;
145
+ overRight = rect.left + context.popUpWidth - bodyRect.right + containerScrollBarWidth;
143
146
  }
144
147
  } else if (h === 'right') {
145
148
  style.right = containerRect.right - rect.right + containerScrollBarWidth - containerScroll.left;
146
149
  style.left = 'auto';
147
150
  style.transform = '';
148
- if (adjust) overLeft = containerRect.left - (rect.right - context.popUpWidth);
151
+ if (adjust) overLeft = bodyRect.left - (rect.right - context.popUpWidth);
149
152
  } else {
150
153
  // 居中对齐
151
154
  style.left = rect.left + rect.width / 2 - containerRect.left + containerScroll.left;
152
155
  style.transform = 'translateX(-50%)';
153
156
  if (adjust) {
154
- overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - containerRect.width + containerScrollBarWidth;
155
- overLeft = containerRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
157
+ overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - bodyRect.width + containerScrollBarWidth;
158
+ overLeft = bodyRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
156
159
  }
157
160
  }
158
161
  if (adjust) {
@@ -199,12 +202,13 @@ var usePositionStyle = function usePositionStyle(config) {
199
202
  return style;
200
203
  };
201
204
  var getAbsoluteStyle = function getAbsoluteStyle(position) {
202
- if (!parentEl) return;
205
+ if (!parentElRef.current) return hideStyle;
203
206
  var rect = context.parentRect;
204
- if (visibleEl) {
205
- var visibleRect = (visibleEl === null || visibleEl === void 0 ? void 0 : visibleEl.getBoundingClientRect()) || {};
207
+ if (scrollElRef !== null && scrollElRef !== void 0 && scrollElRef.current) {
208
+ var _scrollElRef$current;
209
+ var visibleRect = ((_scrollElRef$current = scrollElRef.current) === null || _scrollElRef$current === void 0 ? void 0 : _scrollElRef$current.getBoundingClientRect()) || {};
206
210
  if (rect.bottom < visibleRect.top || rect.top > visibleRect.bottom || rect.right < visibleRect.left || rect.left > visibleRect.right) {
207
- return;
211
+ return hideStyle;
208
212
  }
209
213
  }
210
214
  var style = getAbsolutePositionStyle(rect, position);
@@ -215,8 +219,8 @@ var usePositionStyle = function usePositionStyle(config) {
215
219
  var _ref2 = config || {},
216
220
  position = _ref2.position,
217
221
  absolute = _ref2.absolute;
218
- if (!position || !show || !parentEl) return style;
219
- context.parentRect = parentEl.getBoundingClientRect();
222
+ if (!position || !show || !parentElRef.current) return style;
223
+ context.parentRect = parentElRef.current.getBoundingClientRect();
220
224
  if (adjust) {
221
225
  var popupInfo = getPopUpInfo(context.parentRect);
222
226
  context.popUpHeight = popupInfo.height;
@@ -226,7 +230,8 @@ var usePositionStyle = function usePositionStyle(config) {
226
230
  if (!absolute) {
227
231
  newStyle = (0, _getPositionStyle.getPositionStyle)(realPosition, {
228
232
  popupGap: popupGap,
229
- zIndex: zIndex
233
+ zIndex: zIndex,
234
+ fixedWidth: fixedWidth
230
235
  });
231
236
  } else {
232
237
  newStyle = getAbsoluteStyle(realPosition);
@@ -243,7 +248,7 @@ var usePositionStyle = function usePositionStyle(config) {
243
248
  setStyle(newStyle);
244
249
  }
245
250
  });
246
- (0, _react.useEffect)(updateStyle, [show, position, absolute, parentEl, visibleEl, updateKey]);
251
+ (0, _react.useEffect)(updateStyle, [show, position, absolute, updateKey]);
247
252
  return style;
248
253
  };
249
254
  exports.usePositionStyle = usePositionStyle;
package/cjs/components/use-tabs/use-tabs.type.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface BaseTabsProps {
8
8
  /**
9
9
  * @en Default active tab id or index
10
10
  * @cn 默认选中标签页（非受控）
11
+ * @default 0
11
12
  */
12
13
  defaultActive?: number | string;
13
14
  onChange?: (key: number | string) => void;
package/cjs/components/use-tabs/use-tabs.type.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-tabs.type.d.ts","sourceRoot":"","sources":["use-tabs.type.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtF,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC3C"}
1
+ {"version":3,"file":"use-tabs.type.d.ts","sourceRoot":"","sources":["use-tabs.type.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtF,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC3C"}
package/esm/common/use-position-style/get-position-style.d.ts CHANGED
@@ -2,5 +2,6 @@ import React from 'react';
2
2
  export declare const getPositionStyle: (position: string, config?: {
3
3
  popupGap?: number | undefined;
4
4
  zIndex?: number | undefined;
5
+ fixedWidth?: boolean | "min" | undefined;
5
6
  } | undefined) => React.CSSProperties;
6
7
  //# sourceMappingURL=get-position-style.d.ts.map
package/esm/common/use-position-style/get-position-style.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"get-position-style.d.ts","sourceRoot":"","sources":["get-position-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,gBAAgB,aACjB,MAAM;;;qCAmCjB,CAAC"}
1
+ {"version":3,"file":"get-position-style.d.ts","sourceRoot":"","sources":["get-position-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,gBAAgB,aACjB,MAAM;;;;qCAwCjB,CAAC"}
package/esm/common/use-position-style/get-position-style.js CHANGED
@@ -16,11 +16,15 @@ var getPositionStyle = function getPositionStyle(position, config) {
16
16
  var _ref = config || {},
17
17
  _ref$popupGap = _ref.popupGap,
18
18
  popupGap = _ref$popupGap === void 0 ? 0 : _ref$popupGap;
19
- var mainMargin = "calc(100% + ".concat(popupGap, "px");
20
- var halfMargin = "calc(50% + ".concat(popupGap, "px");
19
+ var mainMargin = "calc(100% + ".concat(popupGap, "px)");
20
+ var halfMargin = "calc(50% + ".concat(popupGap, "px)");
21
21
  var newStyle = {
22
22
  zIndex: config === null || config === void 0 ? void 0 : config.zIndex
23
23
  };
24
+ if (config !== null && config !== void 0 && config.fixedWidth) {
25
+ var key = config.fixedWidth === 'min' ? 'minWidth' : 'width';
26
+ newStyle[key] = '100%';
27
+ }
24
28
  if (position === 'drop-down') {
25
29
  newStyle.top = mainMargin;
26
30
  newStyle.left = 0;
package/esm/common/use-position-style/index.d.ts CHANGED
@@ -6,9 +6,9 @@ export interface PositionStyleConfig {
6
6
  position: PositionType | undefined;
7
7
  absolute: boolean;
8
8
  show: boolean;
9
- parentEl: HTMLElement | null | undefined;
10
- popupEl?: HTMLElement | null | undefined;
11
- visibleEl?: HTMLElement | null;
9
+ parentElRef: React.RefObject<HTMLElement>;
10
+ popupElRef: React.RefObject<HTMLElement>;
11
+ scrollElRef?: React.RefObject<HTMLElement>;
12
12
  getContainer: () => HTMLElement | null | undefined;
13
13
  zIndex?: number;
14
14
  popupGap?: number;
package/esm/common/use-position-style/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,oBAAY,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,oBAAY,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,aAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB,wBAyN3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,oBAAY,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,oBAAY,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,aAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB,wBAqN3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/esm/common/use-position-style/index.js CHANGED
@@ -25,6 +25,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
25
25
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
26
26
  var horizontalPosition = ['left-bottom', 'left-top', 'right-bottom', 'right-top', 'left', 'right'];
27
27
  var verticalPosition = ['bottom-left', 'bottom-right', 'top-left', 'top-right', 'bottom', 'top'];
28
+ var hideStyle = {
29
+ pointerEvents: 'none',
30
+ position: 'absolute',
31
+ zIndex: -1000,
32
+ opacity: 0
33
+ };
28
34
  var usePositionStyle = function usePositionStyle(config) {
29
35
  var _ref = config || {},
30
36
  absolute = _ref.absolute,
@@ -36,17 +42,13 @@ var usePositionStyle = function usePositionStyle(config) {
36
42
  _ref$popupGap = _ref.popupGap,
37
43
  popupGap = _ref$popupGap === void 0 ? 2 : _ref$popupGap,
38
44
  getContainer = _ref.getContainer,
39
- parentEl = _ref.parentEl,
40
- popupEl = _ref.popupEl,
41
- visibleEl = _ref.visibleEl,
45
+ parentElRef = _ref.parentElRef,
46
+ popupElRef = _ref.popupElRef,
47
+ scrollElRef = _ref.scrollElRef,
42
48
  updateKey = _ref.updateKey,
43
49
  adjust = _ref.adjust;
44
50
  // 初次渲染无样式的时候， 隐藏展示
45
- var _useState = (0, _react.useState)({
46
- pointerEvents: 'none',
47
- position: 'absolute',
48
- zIndex: -1000
49
- }),
51
+ var _useState = (0, _react.useState)(hideStyle),
50
52
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
51
53
  style = _useState2[0],
52
54
  setStyle = _useState2[1];
@@ -86,12 +88,12 @@ var usePositionStyle = function usePositionStyle(config) {
86
88
  return newPosition;
87
89
  };
88
90
  var getPopUpInfo = function getPopUpInfo(parentRect) {
89
- var _popupEl$parentElemen;
90
- if (!popupEl) return {
91
+ var _popupElRef$current$p;
92
+ if (!popupElRef.current) return {
91
93
  width: 0,
92
94
  height: 0
93
95
  };
94
- var el = popupEl.cloneNode(true);
96
+ var el = popupElRef.current.cloneNode(true);
95
97
  el.style.visibility = 'true';
96
98
  el.style.opacity = '0';
97
99
  el.style.pointerEvents = 'none';
@@ -100,7 +102,7 @@ var usePositionStyle = function usePositionStyle(config) {
100
102
  var widthKey = fixedWidth === 'min' ? 'minWidth' : 'width';
101
103
  el.style[widthKey] = parentRect.width + 'px';
102
104
  }
103
- (_popupEl$parentElemen = popupEl.parentElement) === null || _popupEl$parentElemen === void 0 ? void 0 : _popupEl$parentElemen.appendChild(el);
105
+ (_popupElRef$current$p = popupElRef.current.parentElement) === null || _popupElRef$current$p === void 0 ? void 0 : _popupElRef$current$p.appendChild(el);
104
106
  var height = el.offsetHeight;
105
107
  var width = el.offsetWidth;
106
108
  el.remove();
@@ -121,6 +123,7 @@ var usePositionStyle = function usePositionStyle(config) {
121
123
  var targetPosition = position;
122
124
  var rootContainer = getContainer() || document.body;
123
125
  var containerRect = rootContainer.getBoundingClientRect();
126
+ var bodyRect = (document.documentElement || document.body).getBoundingClientRect();
124
127
  var containerScrollBarWidth = rootContainer.offsetWidth - rootContainer.clientWidth;
125
128
  var containerScroll = {
126
129
  left: rootContainer.scrollLeft,
@@ -139,20 +142,20 @@ var usePositionStyle = function usePositionStyle(config) {
139
142
  style.left = rect.left - containerRect.left + containerScroll.left;
140
143
  style.transform = '';
141
144
  if (adjust) {
142
- overRight = rect.left + context.popUpWidth - containerRect.right + containerScrollBarWidth;
145
+ overRight = rect.left + context.popUpWidth - bodyRect.right + containerScrollBarWidth;
143
146
  }
144
147
  } else if (h === 'right') {
145
148
  style.right = containerRect.right - rect.right + containerScrollBarWidth - containerScroll.left;
146
149
  style.left = 'auto';
147
150
  style.transform = '';
148
- if (adjust) overLeft = containerRect.left - (rect.right - context.popUpWidth);
151
+ if (adjust) overLeft = bodyRect.left - (rect.right - context.popUpWidth);
149
152
  } else {
150
153
  // 居中对齐
151
154
  style.left = rect.left + rect.width / 2 - containerRect.left + containerScroll.left;
152
155
  style.transform = 'translateX(-50%)';
153
156
  if (adjust) {
154
- overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - containerRect.width + containerScrollBarWidth;
155
- overLeft = containerRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
157
+ overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - bodyRect.width + containerScrollBarWidth;
158
+ overLeft = bodyRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
156
159
  }
157
160
  }
158
161
  if (adjust) {
@@ -199,12 +202,13 @@ var usePositionStyle = function usePositionStyle(config) {
199
202
  return style;
200
203
  };
201
204
  var getAbsoluteStyle = function getAbsoluteStyle(position) {
202
- if (!parentEl) return;
205
+ if (!parentElRef.current) return hideStyle;
203
206
  var rect = context.parentRect;
204
- if (visibleEl) {
205
- var visibleRect = (visibleEl === null || visibleEl === void 0 ? void 0 : visibleEl.getBoundingClientRect()) || {};
207
+ if (scrollElRef !== null && scrollElRef !== void 0 && scrollElRef.current) {
208
+ var _scrollElRef$current;
209
+ var visibleRect = ((_scrollElRef$current = scrollElRef.current) === null || _scrollElRef$current === void 0 ? void 0 : _scrollElRef$current.getBoundingClientRect()) || {};
206
210
  if (rect.bottom < visibleRect.top || rect.top > visibleRect.bottom || rect.right < visibleRect.left || rect.left > visibleRect.right) {
207
- return;
211
+ return hideStyle;
208
212
  }
209
213
  }
210
214
  var style = getAbsolutePositionStyle(rect, position);
@@ -215,8 +219,8 @@ var usePositionStyle = function usePositionStyle(config) {
215
219
  var _ref2 = config || {},
216
220
  position = _ref2.position,
217
221
  absolute = _ref2.absolute;
218
- if (!position || !show || !parentEl) return style;
219
- context.parentRect = parentEl.getBoundingClientRect();
222
+ if (!position || !show || !parentElRef.current) return style;
223
+ context.parentRect = parentElRef.current.getBoundingClientRect();
220
224
  if (adjust) {
221
225
  var popupInfo = getPopUpInfo(context.parentRect);
222
226
  context.popUpHeight = popupInfo.height;
@@ -226,7 +230,8 @@ var usePositionStyle = function usePositionStyle(config) {
226
230
  if (!absolute) {
227
231
  newStyle = (0, _getPositionStyle.getPositionStyle)(realPosition, {
228
232
  popupGap: popupGap,
229
- zIndex: zIndex
233
+ zIndex: zIndex,
234
+ fixedWidth: fixedWidth
230
235
  });
231
236
  } else {
232
237
  newStyle = getAbsoluteStyle(realPosition);
@@ -243,7 +248,7 @@ var usePositionStyle = function usePositionStyle(config) {
243
248
  setStyle(newStyle);
244
249
  }
245
250
  });
246
- (0, _react.useEffect)(updateStyle, [show, position, absolute, parentEl, visibleEl, updateKey]);
251
+ (0, _react.useEffect)(updateStyle, [show, position, absolute, updateKey]);
247
252
  return style;
248
253
  };
249
254
  exports.usePositionStyle = usePositionStyle;
package/esm/components/use-tabs/use-tabs.type.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface BaseTabsProps {
8
8
  /**
9
9
  * @en Default active tab id or index
10
10
  * @cn 默认选中标签页（非受控）
11
+ * @default 0
11
12
  */
12
13
  defaultActive?: number | string;
13
14
  onChange?: (key: number | string) => void;
package/esm/components/use-tabs/use-tabs.type.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-tabs.type.d.ts","sourceRoot":"","sources":["use-tabs.type.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtF,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC3C"}
1
+ {"version":3,"file":"use-tabs.type.d.ts","sourceRoot":"","sources":["use-tabs.type.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtF,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC3C"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/hooks",
3
- "version": "3.0.0-alpha.19",
3
+ "version": "3.0.0-alpha.20",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "ISC",