@bifrostui/utils 1.1.11-beta.0 → 1.1.11-beta.6
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +3 -0
- package/dist/debounce.js +4 -4
- package/dist/domTarget.js +0 -2
- package/dist/getBoundingClientRect/index.js +0 -2
- package/dist/getBoundingClientRect/index.miniapp.js +0 -2
- package/dist/hex2rgba.js +1 -3
- package/dist/hooks/index.js +0 -2
- package/dist/hooks/useDidMountEffect.js +5 -5
- package/dist/hooks/useDomCss/index.js +0 -2
- package/dist/hooks/useDomCss/index.miniapp.js +0 -2
- package/dist/hooks/useDomReady/index.js +0 -2
- package/dist/hooks/useDomReady/index.miniapp.js +0 -2
- package/dist/hooks/useEventCallback.js +0 -2
- package/dist/hooks/useForkRef.js +0 -2
- package/dist/hooks/useMemoizedFn.js +0 -2
- package/dist/hooks/useSize.js +0 -2
- package/dist/hooks/useTouch.js +4 -5
- package/dist/hooks/useTouchEmulator.js +3 -5
- package/dist/hooks/useValue.js +0 -2
- package/dist/index.js +0 -2
- package/dist/isDev.js +1 -3
- package/dist/isMini.js +4 -6
- package/dist/isType.js +1 -3
- package/dist/setRef.js +0 -2
- package/dist/throttle.js +2 -3
- package/dist/toArray.js +0 -2
- package/dist/touchBlocker.js +6 -5
- package/dist/transitions.js +29 -19
- package/es/debounce.js +12 -11
- package/es/domTarget.js +8 -5
- package/es/getBoundingClientRect/index.js +5 -2
- package/es/getBoundingClientRect/index.miniapp.js +9 -14
- package/es/hex2rgba.js +12 -19
- package/es/hooks/index.js +11 -1
- package/es/hooks/useDidMountEffect.js +12 -9
- package/es/hooks/useDomCss/index.js +11 -8
- package/es/hooks/useDomCss/index.miniapp.js +12 -9
- package/es/hooks/useDomReady/index.js +7 -4
- package/es/hooks/useDomReady/index.miniapp.js +8 -5
- package/es/hooks/useEventCallback.js +9 -16
- package/es/hooks/useForkRef.js +10 -18
- package/es/hooks/useMemoizedFn.js +13 -14
- package/es/hooks/useSize.js +10 -19
- package/es/hooks/useTouch.js +47 -47
- package/es/hooks/useTouchEmulator.js +34 -90
- package/es/hooks/useValue.js +24 -32
- package/es/index.js +54 -12
- package/es/isDev.js +5 -2
- package/es/isMini.js +11 -6
- package/es/isType.js +6 -4
- package/es/setRef.js +6 -3
- package/es/throttle.js +16 -34
- package/es/toArray.js +10 -8
- package/es/touchBlocker.js +59 -62
- package/es/transitions.js +57 -45
- package/package.json +13 -7
- package/src/index.ts +27 -0
package/es/hooks/index.js
CHANGED
@@ -7,4 +7,14 @@ import useDomReady from "./useDomReady";
|
|
7
7
|
import useSize from "./useSize";
|
8
8
|
import useDomCss from "./useDomCss";
|
9
9
|
import useTouch from "./useTouch";
|
10
|
-
export {
|
10
|
+
export {
|
11
|
+
useDidMountEffect,
|
12
|
+
useDomCss,
|
13
|
+
useDomReady,
|
14
|
+
useEventCallback,
|
15
|
+
useForkRef,
|
16
|
+
useSize,
|
17
|
+
useTouch,
|
18
|
+
useTouchEmulator,
|
19
|
+
useValue
|
20
|
+
};
|
@@ -1,11 +1,14 @@
|
|
1
|
-
import { useEffect, useRef } from
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
1
|
+
import { useEffect, useRef } from "react";
|
2
|
+
const useDidMountEffect = (func, deps) => {
|
3
|
+
const didMount = useRef(false);
|
4
|
+
useEffect(() => {
|
5
|
+
if (didMount.current)
|
6
|
+
func();
|
7
|
+
else
|
8
|
+
didMount.current = true;
|
9
9
|
}, deps);
|
10
10
|
};
|
11
|
-
|
11
|
+
var useDidMountEffect_default = useDidMountEffect;
|
12
|
+
export {
|
13
|
+
useDidMountEffect_default as default
|
14
|
+
};
|
@@ -1,14 +1,17 @@
|
|
1
1
|
import useDomReady from "../useDomReady";
|
2
2
|
import { getTargetElement } from "../../domTarget";
|
3
3
|
function useDomCss(target, computedStyle, cb) {
|
4
|
-
useDomReady(
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
computedStyle.forEach(
|
9
|
-
res[key] = style
|
4
|
+
useDomReady(() => {
|
5
|
+
const ele = getTargetElement(target);
|
6
|
+
const style = window.getComputedStyle(ele, null);
|
7
|
+
const res = {};
|
8
|
+
computedStyle.forEach((key) => {
|
9
|
+
res[key] = style == null ? void 0 : style[key];
|
10
10
|
});
|
11
|
-
cb
|
11
|
+
cb == null ? void 0 : cb(res);
|
12
12
|
});
|
13
13
|
}
|
14
|
-
|
14
|
+
var useDomCss_default = useDomCss;
|
15
|
+
export {
|
16
|
+
useDomCss_default as default
|
17
|
+
};
|
@@ -1,17 +1,20 @@
|
|
1
|
-
import Taro from
|
1
|
+
import Taro from "@tarojs/taro";
|
2
2
|
import useDomReady from "../useDomReady";
|
3
3
|
import { getTargetElement } from "../../domTarget";
|
4
4
|
function useDomCss(target, computedStyle, cb) {
|
5
|
-
useDomReady(
|
6
|
-
|
5
|
+
useDomReady(() => {
|
6
|
+
const ele = getTargetElement(target);
|
7
7
|
if (ele) {
|
8
|
-
|
9
|
-
query.select(
|
10
|
-
computedStyle
|
11
|
-
}).exec(
|
12
|
-
cb
|
8
|
+
const query = Taro.createSelectorQuery();
|
9
|
+
query.select(`#${ele == null ? void 0 : ele.uid}`).fields({
|
10
|
+
computedStyle
|
11
|
+
}).exec((res) => {
|
12
|
+
cb == null ? void 0 : cb(res == null ? void 0 : res[0]);
|
13
13
|
});
|
14
14
|
}
|
15
15
|
});
|
16
16
|
}
|
17
|
-
|
17
|
+
var index_miniapp_default = useDomCss;
|
18
|
+
export {
|
19
|
+
index_miniapp_default as default
|
20
|
+
};
|
@@ -1,7 +1,10 @@
|
|
1
|
-
import React from
|
1
|
+
import React from "react";
|
2
2
|
function useDomReady(cb) {
|
3
|
-
React.useEffect(
|
4
|
-
cb
|
3
|
+
React.useEffect(() => {
|
4
|
+
cb == null ? void 0 : cb();
|
5
5
|
}, []);
|
6
6
|
}
|
7
|
-
|
7
|
+
var useDomReady_default = useDomReady;
|
8
|
+
export {
|
9
|
+
useDomReady_default as default
|
10
|
+
};
|
@@ -1,9 +1,12 @@
|
|
1
|
-
import Taro from
|
1
|
+
import Taro from "@tarojs/taro";
|
2
2
|
function useDomReady(cb) {
|
3
|
-
Taro.useReady(
|
4
|
-
Taro.nextTick(
|
5
|
-
cb
|
3
|
+
Taro.useReady(() => {
|
4
|
+
Taro.nextTick(() => {
|
5
|
+
cb == null ? void 0 : cb();
|
6
6
|
});
|
7
7
|
});
|
8
8
|
}
|
9
|
-
|
9
|
+
var index_miniapp_default = useDomReady;
|
10
|
+
export {
|
11
|
+
index_miniapp_default as default
|
12
|
+
};
|
@@ -1,18 +1,11 @@
|
|
1
|
-
import React, { useLayoutEffect } from
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
*
|
6
|
-
* @param {function} fn
|
7
|
-
*/
|
8
|
-
export default function useEventCallback(fn) {
|
9
|
-
var ref = React.useRef(fn);
|
10
|
-
useLayoutEffect(function () {
|
1
|
+
import React, { useLayoutEffect } from "react";
|
2
|
+
function useEventCallback(fn) {
|
3
|
+
const ref = React.useRef(fn);
|
4
|
+
useLayoutEffect(() => {
|
11
5
|
ref.current = fn;
|
12
6
|
});
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
}
|
7
|
+
return React.useCallback((...args) => (0, ref.current)(...args), []);
|
8
|
+
}
|
9
|
+
export {
|
10
|
+
useEventCallback as default
|
11
|
+
};
|
package/es/hooks/useForkRef.js
CHANGED
@@ -1,25 +1,17 @@
|
|
1
|
-
import * as React from
|
1
|
+
import * as React from "react";
|
2
2
|
import setRef from "../setRef";
|
3
|
-
|
4
|
-
|
5
|
-
refs
|
6
|
-
}
|
7
|
-
/**
|
8
|
-
* This will create a new function if the refs passed to this hook change and are all defined.
|
9
|
-
* This means react will call the old forkRef with `null` and the new forkRef
|
10
|
-
* with the ref. Cleanup naturally emerges from this behavior.
|
11
|
-
*/
|
12
|
-
return React.useMemo(function () {
|
13
|
-
if (refs.every(function (ref) {
|
14
|
-
return ref == null;
|
15
|
-
})) {
|
3
|
+
function useForkRef(...refs) {
|
4
|
+
return React.useMemo(() => {
|
5
|
+
if (refs.every((ref) => ref == null)) {
|
16
6
|
return null;
|
17
7
|
}
|
18
|
-
return
|
19
|
-
refs.forEach(
|
8
|
+
return (instance) => {
|
9
|
+
refs.forEach((ref) => {
|
20
10
|
setRef(ref, instance);
|
21
11
|
});
|
22
12
|
};
|
23
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
24
13
|
}, refs);
|
25
|
-
}
|
14
|
+
}
|
15
|
+
export {
|
16
|
+
useForkRef as default
|
17
|
+
};
|
@@ -1,25 +1,24 @@
|
|
1
|
-
|
2
|
-
import { useMemo, useRef } from 'react';
|
1
|
+
import { useMemo, useRef } from "react";
|
3
2
|
import isDev from "../isDev";
|
4
3
|
import { isFunction } from "../isType";
|
5
|
-
|
4
|
+
function useMemoizedFn(fn) {
|
6
5
|
if (isDev) {
|
7
6
|
if (!isFunction(fn)) {
|
8
|
-
console.error(
|
7
|
+
console.error(
|
8
|
+
`useMemoizedFn expected parameter is a function, got ${typeof fn}`
|
9
|
+
);
|
9
10
|
}
|
10
11
|
}
|
11
|
-
|
12
|
-
fnRef.current = useMemo(
|
13
|
-
|
14
|
-
}, [fn]);
|
15
|
-
var memoizedFn = useRef();
|
12
|
+
const fnRef = useRef(fn);
|
13
|
+
fnRef.current = useMemo(() => fn, [fn]);
|
14
|
+
const memoizedFn = useRef();
|
16
15
|
if (!memoizedFn.current) {
|
17
|
-
memoizedFn.current = function
|
18
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
19
|
-
args[_key] = arguments[_key];
|
20
|
-
}
|
16
|
+
memoizedFn.current = function(...args) {
|
21
17
|
return fnRef.current.apply(this, args);
|
22
18
|
};
|
23
19
|
}
|
24
20
|
return memoizedFn.current;
|
25
|
-
}
|
21
|
+
}
|
22
|
+
export {
|
23
|
+
useMemoizedFn as default
|
24
|
+
};
|
package/es/hooks/useSize.js
CHANGED
@@ -1,29 +1,20 @@
|
|
1
|
-
|
2
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
3
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
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
|
-
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
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
7
|
-
import React from 'react';
|
1
|
+
import React from "react";
|
8
2
|
import useDomReady from "./useDomReady";
|
9
3
|
import getBoundingClientRect from "../getBoundingClientRect";
|
10
4
|
import { getTargetElement } from "../domTarget";
|
11
5
|
function useSize(target) {
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
setState = _React$useState2[1];
|
16
|
-
useDomReady(function () {
|
17
|
-
var el = getTargetElement(target);
|
6
|
+
const [state, setState] = React.useState({});
|
7
|
+
useDomReady(() => {
|
8
|
+
const el = getTargetElement(target);
|
18
9
|
if (el) {
|
19
|
-
getBoundingClientRect(el).then(
|
20
|
-
setState({
|
21
|
-
width: res.width,
|
22
|
-
height: res.height
|
23
|
-
});
|
10
|
+
getBoundingClientRect(el).then((res) => {
|
11
|
+
setState({ width: res.width, height: res.height });
|
24
12
|
});
|
25
13
|
}
|
26
14
|
});
|
27
15
|
return state;
|
28
16
|
}
|
29
|
-
|
17
|
+
var useSize_default = useSize;
|
18
|
+
export {
|
19
|
+
useSize_default as default
|
20
|
+
};
|
package/es/hooks/useTouch.js
CHANGED
@@ -1,50 +1,47 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
var __pow = Math.pow;
|
2
|
+
import { useRef } from "react";
|
3
|
+
const MIN_DISTANCE = 10;
|
3
4
|
function getDirection(x, y) {
|
4
5
|
if (x > y && x > MIN_DISTANCE) {
|
5
|
-
return
|
6
|
+
return "horizontal";
|
6
7
|
}
|
7
8
|
if (y > x && y > MIN_DISTANCE) {
|
8
|
-
return
|
9
|
+
return "vertical";
|
9
10
|
}
|
10
|
-
return
|
11
|
+
return "";
|
11
12
|
}
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
var isHorizontal = function isHorizontal() {
|
28
|
-
return direction.current === 'horizontal';
|
29
|
-
};
|
30
|
-
var reset = function reset() {
|
13
|
+
const useTouch = () => {
|
14
|
+
const startX = useRef(0);
|
15
|
+
const startY = useRef(0);
|
16
|
+
const deltaX = useRef(0);
|
17
|
+
const deltaY = useRef(0);
|
18
|
+
const delta = useRef(0);
|
19
|
+
const offsetX = useRef(0);
|
20
|
+
const offsetY = useRef(0);
|
21
|
+
const direction = useRef("");
|
22
|
+
const last = useRef(false);
|
23
|
+
const velocity = useRef(0);
|
24
|
+
const touchTime = useRef(Date.now());
|
25
|
+
const isVertical = () => direction.current === "vertical";
|
26
|
+
const isHorizontal = () => direction.current === "horizontal";
|
27
|
+
const reset = () => {
|
31
28
|
touchTime.current = Date.now();
|
32
29
|
deltaX.current = 0;
|
33
30
|
deltaY.current = 0;
|
34
31
|
offsetX.current = 0;
|
35
32
|
offsetY.current = 0;
|
36
33
|
delta.current = 0;
|
37
|
-
direction.current =
|
34
|
+
direction.current = "";
|
38
35
|
last.current = false;
|
39
36
|
};
|
40
|
-
|
37
|
+
const start = (event) => {
|
41
38
|
reset();
|
42
39
|
touchTime.current = Date.now();
|
43
40
|
startX.current = event.touches[0].clientX;
|
44
41
|
startY.current = event.touches[0].clientY;
|
45
42
|
};
|
46
|
-
|
47
|
-
|
43
|
+
const move = (event) => {
|
44
|
+
const touch = event.touches[0];
|
48
45
|
deltaX.current = touch.clientX < 0 ? 0 : touch.clientX - startX.current;
|
49
46
|
deltaY.current = touch.clientY - startY.current;
|
50
47
|
offsetX.current = Math.abs(deltaX.current);
|
@@ -54,27 +51,30 @@ var useTouch = function useTouch() {
|
|
54
51
|
direction.current = getDirection(offsetX.current, offsetY.current);
|
55
52
|
}
|
56
53
|
};
|
57
|
-
|
54
|
+
const end = () => {
|
58
55
|
last.current = true;
|
59
|
-
velocity.current = Math.sqrt(
|
56
|
+
velocity.current = Math.sqrt(__pow(deltaX.current, 2) + __pow(deltaY.current, 2)) / (Date.now() - touchTime.current);
|
60
57
|
};
|
61
58
|
return {
|
62
|
-
end
|
63
|
-
move
|
64
|
-
start
|
65
|
-
reset
|
66
|
-
touchTime
|
67
|
-
startX
|
68
|
-
startY
|
69
|
-
deltaX
|
70
|
-
deltaY
|
71
|
-
delta
|
72
|
-
offsetX
|
73
|
-
offsetY
|
74
|
-
direction
|
75
|
-
isVertical
|
76
|
-
isHorizontal
|
77
|
-
last
|
59
|
+
end,
|
60
|
+
move,
|
61
|
+
start,
|
62
|
+
reset,
|
63
|
+
touchTime,
|
64
|
+
startX,
|
65
|
+
startY,
|
66
|
+
deltaX,
|
67
|
+
deltaY,
|
68
|
+
delta,
|
69
|
+
offsetX,
|
70
|
+
offsetY,
|
71
|
+
direction,
|
72
|
+
isVertical,
|
73
|
+
isHorizontal,
|
74
|
+
last
|
78
75
|
};
|
79
76
|
};
|
80
|
-
|
77
|
+
var useTouch_default = useTouch;
|
78
|
+
export {
|
79
|
+
useTouch_default as default
|
80
|
+
};
|
@@ -1,21 +1,6 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
*/
|
5
|
-
import { useEffect } from 'react';
|
6
|
-
var eventTarget;
|
7
|
-
|
8
|
-
/**
|
9
|
-
* create an touch point
|
10
|
-
* @constructor
|
11
|
-
* @param target
|
12
|
-
* @param identifier
|
13
|
-
* @param pos
|
14
|
-
* @param deltaX
|
15
|
-
* @param deltaY
|
16
|
-
* @returns {Object} touchPoint
|
17
|
-
*/
|
18
|
-
var Touch = function Touch(target, identifier, pos, deltaX, deltaY) {
|
1
|
+
import { useEffect } from "react";
|
2
|
+
let eventTarget;
|
3
|
+
const Touch = function Touch2(target, identifier, pos, deltaX, deltaY) {
|
19
4
|
deltaX = deltaX || 0;
|
20
5
|
deltaY = deltaY || 0;
|
21
6
|
this.identifier = identifier;
|
@@ -27,69 +12,39 @@ var Touch = function Touch(target, identifier, pos, deltaX, deltaY) {
|
|
27
12
|
this.pageX = pos.pageX + deltaX;
|
28
13
|
this.pageY = pos.pageY + deltaY;
|
29
14
|
};
|
30
|
-
|
31
|
-
/**
|
32
|
-
* create empty touchlist with the methods
|
33
|
-
* @constructor
|
34
|
-
* @returns touchList
|
35
|
-
*/
|
36
15
|
function TouchList() {
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
return _this[index] || null;
|
16
|
+
const touchList = [];
|
17
|
+
touchList.item = (index) => {
|
18
|
+
return this[index] || null;
|
41
19
|
};
|
42
|
-
|
43
|
-
|
44
|
-
touchList.identifiedTouch = function (id) {
|
45
|
-
return _this[id + 1] || null;
|
20
|
+
touchList.identifiedTouch = (id) => {
|
21
|
+
return this[id + 1] || null;
|
46
22
|
};
|
47
23
|
return touchList;
|
48
24
|
}
|
49
|
-
|
50
|
-
/**
|
51
|
-
* only trigger touches when the left mousebutton has been pressed
|
52
|
-
* @param touchType
|
53
|
-
* @returns {Function}
|
54
|
-
*/
|
55
|
-
|
56
|
-
var initiated = false;
|
25
|
+
let initiated = false;
|
57
26
|
function onMouse(touchType) {
|
58
|
-
return function
|
59
|
-
|
60
|
-
|
61
|
-
if (ev.type === 'mousedown') {
|
27
|
+
return function(ev) {
|
28
|
+
if (ev.type === "mousedown") {
|
62
29
|
initiated = true;
|
63
30
|
}
|
64
|
-
if (ev.type ===
|
31
|
+
if (ev.type === "mouseup") {
|
65
32
|
initiated = false;
|
66
33
|
}
|
67
|
-
if (ev.type ===
|
34
|
+
if (ev.type === "mousemove" && !initiated) {
|
68
35
|
return;
|
69
36
|
}
|
70
|
-
|
71
|
-
// The EventTarget on which the touch point started when it was first placed on the surface,
|
72
|
-
// even if the touch point has since moved outside the interactive area of that element.
|
73
|
-
// also, when the target doesnt exist anymore, we update it
|
74
|
-
if (ev.type === 'mousedown' || !eventTarget || eventTarget && !eventTarget.dispatchEvent) {
|
37
|
+
if (ev.type === "mousedown" || !eventTarget || eventTarget && !eventTarget.dispatchEvent) {
|
75
38
|
eventTarget = ev.target;
|
76
39
|
}
|
77
40
|
triggerTouch(touchType, ev);
|
78
|
-
|
79
|
-
// reset
|
80
|
-
if (ev.type === 'mouseup') {
|
41
|
+
if (ev.type === "mouseup") {
|
81
42
|
eventTarget = null;
|
82
43
|
}
|
83
44
|
};
|
84
45
|
}
|
85
|
-
|
86
|
-
/**
|
87
|
-
* trigger a touch event
|
88
|
-
* @param eventName
|
89
|
-
* @param mouseEv
|
90
|
-
*/
|
91
46
|
function triggerTouch(eventName, mouseEv) {
|
92
|
-
|
47
|
+
const touchEvent = document.createEvent("Event");
|
93
48
|
touchEvent.initEvent(eventName, true, false);
|
94
49
|
touchEvent.altKey = mouseEv.altKey;
|
95
50
|
touchEvent.ctrlKey = mouseEv.ctrlKey;
|
@@ -100,47 +55,36 @@ function triggerTouch(eventName, mouseEv) {
|
|
100
55
|
touchEvent.changedTouches = createTouchList(mouseEv);
|
101
56
|
eventTarget.dispatchEvent(touchEvent);
|
102
57
|
}
|
103
|
-
|
104
|
-
/**
|
105
|
-
* create a touchList based on the mouse event
|
106
|
-
* @param mouseEv
|
107
|
-
* @returns {TouchList}
|
108
|
-
*/
|
109
58
|
function createTouchList(mouseEv) {
|
110
|
-
|
59
|
+
const touchList = TouchList();
|
111
60
|
touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
|
112
61
|
return touchList;
|
113
62
|
}
|
114
|
-
|
115
|
-
/**
|
116
|
-
* receive all active touches
|
117
|
-
* @param mouseEv
|
118
|
-
* @returns {TouchList}
|
119
|
-
*/
|
120
63
|
function getActiveTouches(mouseEv) {
|
121
|
-
|
122
|
-
if (mouseEv.type === 'mouseup') {
|
64
|
+
if (mouseEv.type === "mouseup") {
|
123
65
|
return TouchList();
|
124
66
|
}
|
125
67
|
return createTouchList(mouseEv);
|
126
68
|
}
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
useEffect(function () {
|
69
|
+
function useTouchEmulator(dom = window) {
|
70
|
+
const touchStart = onMouse("touchstart");
|
71
|
+
const touchMove = onMouse("touchmove");
|
72
|
+
const touchEnd = onMouse("touchend");
|
73
|
+
useEffect(() => {
|
133
74
|
if (dom) {
|
134
|
-
dom.addEventListener(
|
135
|
-
dom.addEventListener(
|
136
|
-
dom.addEventListener(
|
75
|
+
dom.addEventListener("mousedown", touchStart, true);
|
76
|
+
dom.addEventListener("mousemove", touchMove, true);
|
77
|
+
dom.addEventListener("mouseup", touchEnd, true);
|
137
78
|
}
|
138
|
-
return
|
79
|
+
return () => {
|
139
80
|
if (dom) {
|
140
|
-
dom.removeEventListener(
|
141
|
-
dom.removeEventListener(
|
142
|
-
dom.removeEventListener(
|
81
|
+
dom.removeEventListener("mousedown", touchStart, true);
|
82
|
+
dom.removeEventListener("mousemove", touchMove, true);
|
83
|
+
dom.removeEventListener("mouseup", touchEnd, true);
|
143
84
|
}
|
144
85
|
};
|
145
86
|
}, [dom]);
|
146
|
-
}
|
87
|
+
}
|
88
|
+
export {
|
89
|
+
useTouchEmulator as default
|
90
|
+
};
|
package/es/hooks/useValue.js
CHANGED
@@ -1,36 +1,28 @@
|
|
1
|
-
|
2
|
-
function
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
var value = options.value,
|
10
|
-
defaultValue = options.defaultValue,
|
11
|
-
onChange = options.onChange,
|
12
|
-
_options$config = options.config,
|
13
|
-
config = _options$config === void 0 ? {} : _options$config;
|
14
|
-
var state = config.state,
|
15
|
-
name = config.name;
|
16
|
-
var _useState = useState(defaultValue),
|
17
|
-
_useState2 = _slicedToArray(_useState, 2),
|
18
|
-
internalValue = _useState2[0],
|
19
|
-
setInternalValue = _useState2[1];
|
20
|
-
var initialDefaultValue = useRef(defaultValue);
|
21
|
-
var isControlled = value !== undefined;
|
22
|
-
|
23
|
-
// 异常情况
|
24
|
-
useEffect(function () {
|
1
|
+
import { useCallback, useRef, useState, useEffect } from "react";
|
2
|
+
function useValue(options) {
|
3
|
+
const { value, defaultValue, onChange, config = {} } = options;
|
4
|
+
const { state, name } = config;
|
5
|
+
const [internalValue, setInternalValue] = useState(defaultValue);
|
6
|
+
const initialDefaultValue = useRef(defaultValue);
|
7
|
+
const isControlled = value !== void 0;
|
8
|
+
useEffect(() => {
|
25
9
|
if (!isControlled && JSON.stringify(defaultValue) !== JSON.stringify(initialDefaultValue.current) && state && name) {
|
26
|
-
console.error(
|
10
|
+
console.error(
|
11
|
+
[
|
12
|
+
`BUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`
|
13
|
+
].join("\n")
|
14
|
+
);
|
27
15
|
}
|
28
16
|
}, [defaultValue]);
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
value: val
|
33
|
-
}
|
34
|
-
|
17
|
+
const triggerChange = useCallback(
|
18
|
+
(e, val) => {
|
19
|
+
setInternalValue(val);
|
20
|
+
onChange == null ? void 0 : onChange(e, { value: val });
|
21
|
+
},
|
22
|
+
[onChange]
|
23
|
+
);
|
35
24
|
return [isControlled ? value : internalValue, triggerChange];
|
36
|
-
}
|
25
|
+
}
|
26
|
+
export {
|
27
|
+
useValue as default
|
28
|
+
};
|