@sheinx/hooks 3.7.1-beta.3 → 3.7.1-beta.5

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 (9) hide show
  1. package/cjs/common/use-position-style/check-element-size.d.ts.map +1 -1
  2. package/cjs/common/use-position-style/check-element-size.js +1 -1
  3. package/cjs/common/use-position-style/index.d.ts.map +1 -1
  4. package/cjs/common/use-position-style/index.js +23 -1
  5. package/esm/common/use-position-style/check-element-size.d.ts.map +1 -1
  6. package/esm/common/use-position-style/check-element-size.js +1 -1
  7. package/esm/common/use-position-style/index.d.ts.map +1 -1
  8. package/esm/common/use-position-style/index.js +24 -2
  9. package/package.json +1 -1
package/cjs/common/use-position-style/check-element-size.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"check-element-size.d.ts","sourceRoot":"","sources":["check-element-size.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,0BAA0B;IAElC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,qBACZ,MAAM,SAAS,CAAC,WAAW,CAAC,YACrC,0BAA0B,KAClC,IAAI,GAAG,IAmDT,CAAC"}
1
+ {"version":3,"file":"check-element-size.d.ts","sourceRoot":"","sources":["check-element-size.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,0BAA0B;IAElC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,qBACZ,MAAM,SAAS,CAAC,WAAW,CAAC,YACrC,0BAA0B,KAClC,IAAI,GAAG,IAoDT,CAAC"}
package/cjs/common/use-position-style/check-element-size.js CHANGED
@@ -32,7 +32,7 @@ var useCheckElementSize = exports.useCheckElementSize = function useCheckElement
32
32
  width: rect.width,
33
33
  height: rect.height
34
34
  };
35
- if (newSize.width !== lastSize.current.width || newSize.height !== lastSize.current.height) {
35
+ if (newSize.width !== lastSize.current.width || newSize.height !== lastSize.current.height && newSize.height !== 0) {
36
36
  setSize(newSize);
37
37
  lastSize.current = newSize;
38
38
  }
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;AAUnD,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,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;IACjB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3B;AAOD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CAwR3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAUpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,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;IACjB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3B;AAOD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CA4S3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/cjs/common/use-position-style/index.js CHANGED
@@ -80,6 +80,20 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
80
80
  var popupElSize = (0, _checkElementSize.useCheckElementSize)(popupElRef, {
81
81
  enable: show
82
82
  });
83
+ var _useState3 = (0, _react.useState)(0),
84
+ _useState4 = _slicedToArray(_useState3, 2),
85
+ popupElWidth = _useState4[0],
86
+ setPopupElWidth = _useState4[1];
87
+ (0, _react.useLayoutEffect)(function () {
88
+ if (!show || !popupElRef.current) return;
89
+ if (popupElRef.current) {
90
+ // 二次打开弹出层时，元素被之前的动画设置了display: none，重新获取元素尺寸时，需要立即设置display: block
91
+ if (popupElRef.current.style.display === 'none') {
92
+ popupElRef.current.style.display = 'block';
93
+ }
94
+ setPopupElWidth(popupElRef.current.getBoundingClientRect().width);
95
+ }
96
+ }, [show, popupElRef.current]);
83
97
  var adjustPosition = function adjustPosition(position) {
84
98
  var winHeight = _utils.docSize.height;
85
99
  if (!verticalPosition.includes(position)) return position;
@@ -106,6 +120,14 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
106
120
  newPosition = newPosition.replace('left', 'right');
107
121
  }
108
122
  }
123
+ } else {
124
+ // absolute 场景下，右侧溢出判断需要考虑弹出层元素的尺寸
125
+ var _position$split = position.split('-'),
126
+ _position$split2 = _slicedToArray(_position$split, 2),
127
+ _horizontalPosition = _position$split2[1];
128
+ if (_horizontalPosition === 'left' && context.parentRect.left + (popupElWidth || context.popUpWidth) > _utils.docSize.width) {
129
+ newPosition = newPosition.replace('left', 'right');
130
+ }
109
131
  }
110
132
  return newPosition;
111
133
  };
@@ -316,7 +338,7 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
316
338
  // 当父元素的滚动容器滚动时，判断是否需要更新弹出层位置，包括是否隐藏弹出层（通过hideStyle隐藏，不是show状态）
317
339
  context.prevParentPosition = parentElNewPosition;
318
340
  });
319
- (0, _react.useEffect)(updateStyle, [show, position, absolute, updateKey, fixedWidth, parentElNewPosition, popupElSize === null || popupElSize === void 0 ? void 0 : popupElSize.width]);
341
+ (0, _react.useEffect)(updateStyle, [show, position, absolute, updateKey, fixedWidth, parentElNewPosition, popupElSize]);
320
342
  return {
321
343
  style: style
322
344
  };
package/esm/common/use-position-style/check-element-size.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"check-element-size.d.ts","sourceRoot":"","sources":["check-element-size.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,0BAA0B;IAElC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,qBACZ,MAAM,SAAS,CAAC,WAAW,CAAC,YACrC,0BAA0B,KAClC,IAAI,GAAG,IAmDT,CAAC"}
1
+ {"version":3,"file":"check-element-size.d.ts","sourceRoot":"","sources":["check-element-size.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,0BAA0B;IAElC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,qBACZ,MAAM,SAAS,CAAC,WAAW,CAAC,YACrC,0BAA0B,KAClC,IAAI,GAAG,IAoDT,CAAC"}
package/esm/common/use-position-style/check-element-size.js CHANGED
@@ -26,7 +26,7 @@ export var useCheckElementSize = function useCheckElementSize(targetElementRef)
26
26
  width: rect.width,
27
27
  height: rect.height
28
28
  };
29
- if (newSize.width !== lastSize.current.width || newSize.height !== lastSize.current.height) {
29
+ if (newSize.width !== lastSize.current.width || newSize.height !== lastSize.current.height && newSize.height !== 0) {
30
30
  setSize(newSize);
31
31
  lastSize.current = newSize;
32
32
  }
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;AAUnD,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,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;IACjB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3B;AAOD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CAwR3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAUpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,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;IACjB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3B;AAOD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CA4S3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/esm/common/use-position-style/index.js CHANGED
@@ -5,7 +5,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
5
5
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
6
6
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
7
7
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
8
- import React, { useEffect, useState } from 'react';
8
+ import React, { useEffect, useLayoutEffect, useState } from 'react';
9
9
  import { getPositionStyle } from "./get-position-style";
10
10
  import { useCheckElementPosition } from "./check-position";
11
11
  import { useCheckElementBorderWidth } from "./check-border";
@@ -71,6 +71,20 @@ export var usePositionStyle = function usePositionStyle(config) {
71
71
  var popupElSize = useCheckElementSize(popupElRef, {
72
72
  enable: show
73
73
  });
74
+ var _useState3 = useState(0),
75
+ _useState4 = _slicedToArray(_useState3, 2),
76
+ popupElWidth = _useState4[0],
77
+ setPopupElWidth = _useState4[1];
78
+ useLayoutEffect(function () {
79
+ if (!show || !popupElRef.current) return;
80
+ if (popupElRef.current) {
81
+ // 二次打开弹出层时，元素被之前的动画设置了display: none，重新获取元素尺寸时，需要立即设置display: block
82
+ if (popupElRef.current.style.display === 'none') {
83
+ popupElRef.current.style.display = 'block';
84
+ }
85
+ setPopupElWidth(popupElRef.current.getBoundingClientRect().width);
86
+ }
87
+ }, [show, popupElRef.current]);
74
88
  var adjustPosition = function adjustPosition(position) {
75
89
  var winHeight = docSize.height;
76
90
  if (!verticalPosition.includes(position)) return position;
@@ -97,6 +111,14 @@ export var usePositionStyle = function usePositionStyle(config) {
97
111
  newPosition = newPosition.replace('left', 'right');
98
112
  }
99
113
  }
114
+ } else {
115
+ // absolute 场景下，右侧溢出判断需要考虑弹出层元素的尺寸
116
+ var _position$split = position.split('-'),
117
+ _position$split2 = _slicedToArray(_position$split, 2),
118
+ _horizontalPosition = _position$split2[1];
119
+ if (_horizontalPosition === 'left' && context.parentRect.left + (popupElWidth || context.popUpWidth) > docSize.width) {
120
+ newPosition = newPosition.replace('left', 'right');
121
+ }
100
122
  }
101
123
  return newPosition;
102
124
  };
@@ -307,7 +329,7 @@ export var usePositionStyle = function usePositionStyle(config) {
307
329
  // 当父元素的滚动容器滚动时，判断是否需要更新弹出层位置，包括是否隐藏弹出层（通过hideStyle隐藏，不是show状态）
308
330
  context.prevParentPosition = parentElNewPosition;
309
331
  });
310
- useEffect(updateStyle, [show, position, absolute, updateKey, fixedWidth, parentElNewPosition, popupElSize === null || popupElSize === void 0 ? void 0 : popupElSize.width]);
332
+ useEffect(updateStyle, [show, position, absolute, updateKey, fixedWidth, parentElNewPosition, popupElSize]);
311
333
  return {
312
334
  style: style
313
335
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/hooks",
3
- "version": "3.7.1-beta.3",
3
+ "version": "3.7.1-beta.5",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",