@sheinx/hooks 3.5.2-beta.9 → 3.5.2-fix.1
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.
- package/cjs/common/use-input-able/use-Input-able.d.ts.map +1 -1
- package/cjs/common/use-input-able/use-Input-able.js +6 -7
- package/cjs/utils/dom/element.d.ts +1 -0
- package/cjs/utils/dom/element.d.ts.map +1 -1
- package/cjs/utils/dom/element.js +20 -0
- package/cjs/utils/lazyload.d.ts.map +1 -1
- package/cjs/utils/lazyload.js +4 -1
- package/esm/common/use-input-able/use-Input-able.d.ts.map +1 -1
- package/esm/common/use-input-able/use-Input-able.js +7 -8
- package/esm/utils/dom/element.d.ts +1 -0
- package/esm/utils/dom/element.d.ts.map +1 -1
- package/esm/utils/dom/element.js +19 -0
- package/esm/utils/lazyload.d.ts.map +1 -1
- package/esm/utils/lazyload.js +4 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-Input-able.d.ts","sourceRoot":"","sources":["use-Input-able.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"use-Input-able.d.ts","sourceRoot":"","sources":["use-Input-able.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;;;EA0E3F"}
|
|
@@ -46,19 +46,18 @@ function useInputAble(props) {
|
|
|
46
46
|
var render = (0, _useRender.useRender)(syncValue);
|
|
47
47
|
var shouldUseState = delay || !control;
|
|
48
48
|
var value = shouldUseState ? stateValue : valuePo;
|
|
49
|
-
(0, _react.
|
|
50
|
-
if (context.timer) {
|
|
51
|
-
clearTimeout(context.timer);
|
|
52
|
-
context.timer = null;
|
|
53
|
-
}
|
|
49
|
+
(0, _react.useLayoutEffect)(function () {
|
|
54
50
|
if (delay && control && props.value !== stateValue) {
|
|
55
51
|
changeStateValue(props.value);
|
|
52
|
+
} else if (context.timer) {
|
|
53
|
+
clearTimeout(context.timer);
|
|
54
|
+
context.timer = null;
|
|
56
55
|
}
|
|
57
56
|
}, [props.value, delay, control]);
|
|
58
57
|
var forceDelayChange = (0, _usePersistFn.default)(function () {
|
|
59
|
-
if (context.
|
|
58
|
+
if (context.delayChange) context.delayChange();
|
|
59
|
+
if (context.timer) {
|
|
60
60
|
clearTimeout(context.timer);
|
|
61
|
-
context.delayChange();
|
|
62
61
|
context.timer = null;
|
|
63
62
|
context.delayChange = null;
|
|
64
63
|
}
|
|
@@ -13,6 +13,7 @@ export declare const addResizeObserver: (el: HTMLElement, handler: any, options?
|
|
|
13
13
|
}) => () => void;
|
|
14
14
|
export declare function getParent(el: HTMLElement | null | Element, target?: string | HTMLElement): Element | null;
|
|
15
15
|
export declare function getClosestScrollContainer(element: HTMLElement | null): HTMLElement | null;
|
|
16
|
+
export declare function getClosestFixedContainer(element: Element | HTMLElement | null): HTMLElement | null;
|
|
16
17
|
export declare function cssSupport(attr: keyof CSSStyleDeclaration, value: string): boolean;
|
|
17
18
|
export declare const parsePxToNumber: (str: string) => number;
|
|
18
19
|
//# sourceMappingURL=element.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,UAAQ,EACnB,SAAS,CAAC,EAAE,MAAM,GACjB,KAAK,CAAC,SAAS,CASjB;AAGD,eAAO,MAAM,iBAAiB,OACxB,WAAW,WACN,GAAG;;;gBA4Cb,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,kBAmBxF;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,UAAQ,EACnB,SAAS,CAAC,EAAE,MAAM,GACjB,KAAK,CAAC,SAAS,CASjB;AAGD,eAAO,MAAM,iBAAiB,OACxB,WAAW,WACN,GAAG;;;gBA4Cb,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,kBAmBxF;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAmCzF;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,sBAqB7E;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,mBAAmB,EAAE,KAAK,EAAE,MAAM,WAYxE;AAED,eAAO,MAAM,eAAe,QAAS,MAAM,WAAwC,CAAC"}
|
package/cjs/utils/dom/element.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.addResizeObserver = void 0;
|
|
7
7
|
exports.cssSupport = cssSupport;
|
|
8
|
+
exports.getClosestFixedContainer = getClosestFixedContainer;
|
|
8
9
|
exports.getClosestScrollContainer = getClosestScrollContainer;
|
|
9
10
|
exports.getParent = getParent;
|
|
10
11
|
exports.parsePxToNumber = void 0;
|
|
@@ -156,6 +157,25 @@ function getClosestScrollContainer(element) {
|
|
|
156
157
|
// 如果没有找到可滚动的祖先,返回 body 或 documentElement
|
|
157
158
|
return document.scrollingElement || document.documentElement;
|
|
158
159
|
}
|
|
160
|
+
function getClosestFixedContainer(element) {
|
|
161
|
+
if (!element) {
|
|
162
|
+
return null;
|
|
163
|
+
}
|
|
164
|
+
var isFixable = function isFixable(el) {
|
|
165
|
+
var style = window.getComputedStyle(el);
|
|
166
|
+
return style.position === 'fixed';
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
// 遍历父元素
|
|
170
|
+
var parent = element.parentElement;
|
|
171
|
+
while (parent) {
|
|
172
|
+
if (isFixable(parent)) {
|
|
173
|
+
return parent;
|
|
174
|
+
}
|
|
175
|
+
parent = parent.parentElement;
|
|
176
|
+
}
|
|
177
|
+
return null;
|
|
178
|
+
}
|
|
159
179
|
function cssSupport(attr, value) {
|
|
160
180
|
if ((0, _is.isBrowser)()) {
|
|
161
181
|
var element = document.createElement('div');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lazyload.d.ts","sourceRoot":"","sources":["lazyload.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"lazyload.d.ts","sourceRoot":"","sources":["lazyload.ts"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC,CAAC;AAoBF,wBAAgB,QAAQ,SAgBvB;AAWD,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,EAAE,OAAO,QAUvE;AAyBD,wBAAgB,QAAQ,CAAC,GAAG,EAAE,UAAU,iBA4BvC"}
|
package/cjs/utils/lazyload.js
CHANGED
|
@@ -7,6 +7,7 @@ exports.addStack = addStack;
|
|
|
7
7
|
exports.dispatch = dispatch;
|
|
8
8
|
exports.removeStack = removeStack;
|
|
9
9
|
var _utils = require("../utils");
|
|
10
|
+
var _element = require("./dom/element");
|
|
10
11
|
var throttle = 80;
|
|
11
12
|
var components = {};
|
|
12
13
|
var timeout = null;
|
|
@@ -66,10 +67,12 @@ function removeStack(id, removeListener) {
|
|
|
66
67
|
function getObserver(obj, id) {
|
|
67
68
|
var _obj$container = obj.container,
|
|
68
69
|
container = _obj$container === void 0 ? null : _obj$container,
|
|
70
|
+
element = obj.element,
|
|
69
71
|
offset = obj.offset,
|
|
70
72
|
render = obj.render,
|
|
71
73
|
offscreen = obj.offscreen,
|
|
72
74
|
noRemove = obj.noRemove;
|
|
75
|
+
var fixedContainer = (0, _element.getClosestFixedContainer)(element);
|
|
73
76
|
var observer = new IntersectionObserver(function (entries) {
|
|
74
77
|
entries.forEach(function (en) {
|
|
75
78
|
if (en.isIntersecting || en.intersectionRatio > 0) {
|
|
@@ -80,7 +83,7 @@ function getObserver(obj, id) {
|
|
|
80
83
|
}
|
|
81
84
|
});
|
|
82
85
|
}, {
|
|
83
|
-
root: container,
|
|
86
|
+
root: fixedContainer || container,
|
|
84
87
|
rootMargin: "".concat(offset, "px")
|
|
85
88
|
});
|
|
86
89
|
obj.observer = observer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-Input-able.d.ts","sourceRoot":"","sources":["use-Input-able.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"use-Input-able.d.ts","sourceRoot":"","sources":["use-Input-able.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;;;;EA0E3F"}
|
|
@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
4
4
|
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; }
|
|
5
5
|
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; } }
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import {
|
|
7
|
+
import { useLayoutEffect, useRef, useState } from 'react';
|
|
8
8
|
import { isFunc } from "../../utils/is";
|
|
9
9
|
import { shallowEqual } from "../../utils/shallow-equal";
|
|
10
10
|
import usePersistFn from "../use-persist-fn";
|
|
@@ -39,19 +39,18 @@ export default function useInputAble(props) {
|
|
|
39
39
|
var render = useRender(syncValue);
|
|
40
40
|
var shouldUseState = delay || !control;
|
|
41
41
|
var value = shouldUseState ? stateValue : valuePo;
|
|
42
|
-
|
|
43
|
-
if (context.timer) {
|
|
44
|
-
clearTimeout(context.timer);
|
|
45
|
-
context.timer = null;
|
|
46
|
-
}
|
|
42
|
+
useLayoutEffect(function () {
|
|
47
43
|
if (delay && control && props.value !== stateValue) {
|
|
48
44
|
changeStateValue(props.value);
|
|
45
|
+
} else if (context.timer) {
|
|
46
|
+
clearTimeout(context.timer);
|
|
47
|
+
context.timer = null;
|
|
49
48
|
}
|
|
50
49
|
}, [props.value, delay, control]);
|
|
51
50
|
var forceDelayChange = usePersistFn(function () {
|
|
52
|
-
if (context.
|
|
51
|
+
if (context.delayChange) context.delayChange();
|
|
52
|
+
if (context.timer) {
|
|
53
53
|
clearTimeout(context.timer);
|
|
54
|
-
context.delayChange();
|
|
55
54
|
context.timer = null;
|
|
56
55
|
context.delayChange = null;
|
|
57
56
|
}
|
|
@@ -13,6 +13,7 @@ export declare const addResizeObserver: (el: HTMLElement, handler: any, options?
|
|
|
13
13
|
}) => () => void;
|
|
14
14
|
export declare function getParent(el: HTMLElement | null | Element, target?: string | HTMLElement): Element | null;
|
|
15
15
|
export declare function getClosestScrollContainer(element: HTMLElement | null): HTMLElement | null;
|
|
16
|
+
export declare function getClosestFixedContainer(element: Element | HTMLElement | null): HTMLElement | null;
|
|
16
17
|
export declare function cssSupport(attr: keyof CSSStyleDeclaration, value: string): boolean;
|
|
17
18
|
export declare const parsePxToNumber: (str: string) => number;
|
|
18
19
|
//# sourceMappingURL=element.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,UAAQ,EACnB,SAAS,CAAC,EAAE,MAAM,GACjB,KAAK,CAAC,SAAS,CASjB;AAGD,eAAO,MAAM,iBAAiB,OACxB,WAAW,WACN,GAAG;;;gBA4Cb,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,kBAmBxF;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,UAAQ,EACnB,SAAS,CAAC,EAAE,MAAM,GACjB,KAAK,CAAC,SAAS,CASjB;AAGD,eAAO,MAAM,iBAAiB,OACxB,WAAW,WACN,GAAG;;;gBA4Cb,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,kBAmBxF;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAmCzF;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,sBAqB7E;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,mBAAmB,EAAE,KAAK,EAAE,MAAM,WAYxE;AAED,eAAO,MAAM,eAAe,QAAS,MAAM,WAAwC,CAAC"}
|
package/esm/utils/dom/element.js
CHANGED
|
@@ -145,6 +145,25 @@ export function getClosestScrollContainer(element) {
|
|
|
145
145
|
// 如果没有找到可滚动的祖先,返回 body 或 documentElement
|
|
146
146
|
return document.scrollingElement || document.documentElement;
|
|
147
147
|
}
|
|
148
|
+
export function getClosestFixedContainer(element) {
|
|
149
|
+
if (!element) {
|
|
150
|
+
return null;
|
|
151
|
+
}
|
|
152
|
+
var isFixable = function isFixable(el) {
|
|
153
|
+
var style = window.getComputedStyle(el);
|
|
154
|
+
return style.position === 'fixed';
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
// 遍历父元素
|
|
158
|
+
var parent = element.parentElement;
|
|
159
|
+
while (parent) {
|
|
160
|
+
if (isFixable(parent)) {
|
|
161
|
+
return parent;
|
|
162
|
+
}
|
|
163
|
+
parent = parent.parentElement;
|
|
164
|
+
}
|
|
165
|
+
return null;
|
|
166
|
+
}
|
|
148
167
|
export function cssSupport(attr, value) {
|
|
149
168
|
if (isBrowser()) {
|
|
150
169
|
var element = document.createElement('div');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lazyload.d.ts","sourceRoot":"","sources":["lazyload.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"lazyload.d.ts","sourceRoot":"","sources":["lazyload.ts"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC,CAAC;AAoBF,wBAAgB,QAAQ,SAgBvB;AAWD,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,EAAE,OAAO,QAUvE;AAyBD,wBAAgB,QAAQ,CAAC,GAAG,EAAE,UAAU,iBA4BvC"}
|
package/esm/utils/lazyload.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { generateUUID, docSize } from "../utils";
|
|
2
|
+
import { getClosestFixedContainer } from "./dom/element";
|
|
2
3
|
var throttle = 80;
|
|
3
4
|
var components = {};
|
|
4
5
|
var timeout = null;
|
|
@@ -58,10 +59,12 @@ export function removeStack(id, removeListener) {
|
|
|
58
59
|
function getObserver(obj, id) {
|
|
59
60
|
var _obj$container = obj.container,
|
|
60
61
|
container = _obj$container === void 0 ? null : _obj$container,
|
|
62
|
+
element = obj.element,
|
|
61
63
|
offset = obj.offset,
|
|
62
64
|
render = obj.render,
|
|
63
65
|
offscreen = obj.offscreen,
|
|
64
66
|
noRemove = obj.noRemove;
|
|
67
|
+
var fixedContainer = getClosestFixedContainer(element);
|
|
65
68
|
var observer = new IntersectionObserver(function (entries) {
|
|
66
69
|
entries.forEach(function (en) {
|
|
67
70
|
if (en.isIntersecting || en.intersectionRatio > 0) {
|
|
@@ -72,7 +75,7 @@ function getObserver(obj, id) {
|
|
|
72
75
|
}
|
|
73
76
|
});
|
|
74
77
|
}, {
|
|
75
|
-
root: container,
|
|
78
|
+
root: fixedContainer || container,
|
|
76
79
|
rootMargin: "".concat(offset, "px")
|
|
77
80
|
});
|
|
78
81
|
obj.observer = observer;
|