@ray-js/framework-shared 1.4.0-alpha.0 → 1.4.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/emitter/index.d.ts +1 -1
- package/lib/emitter/index.js +29 -52
- package/lib/filterProps/index.js +5 -17
- package/lib/inlineStyle/CSSProperty.js +5 -12
- package/lib/inlineStyle/index.js +10 -20
- package/lib/normalizeTabBar.js +21 -60
- package/lib/plainStyle/index.js +12 -30
- package/lib/useInterval/index.js +9 -8
- package/lib/useStylesheet/index.js +8 -13
- package/lib/useThrottle/index.js +10 -17
- package/lib/useTouch/index.js +28 -54
- package/lib/useTransition/index.d.ts +2 -2
- package/lib/useTransition/index.js +15 -30
- package/package.json +18 -18
- package/LICENSE.md +0 -9
package/lib/emitter/index.d.ts
CHANGED
package/lib/emitter/index.js
CHANGED
@@ -1,57 +1,34 @@
|
|
1
|
-
import
|
2
|
-
|
3
|
-
|
4
|
-
import "core-js/modules/es.array.index-of.js";
|
5
|
-
import "core-js/modules/es.object.to-string.js";
|
6
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
7
|
-
export var Emitter = /*#__PURE__*/function () {
|
8
|
-
function Emitter() {
|
9
|
-
_classCallCheck(this, Emitter);
|
10
|
-
|
1
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
2
|
+
export class Emitter {
|
3
|
+
constructor() {
|
11
4
|
this.listeners = {};
|
12
5
|
}
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
value: function on(name, fn) {
|
17
|
-
var _this = this;
|
18
|
-
|
19
|
-
if (!this.listeners[name]) {
|
20
|
-
this.listeners[name] = [];
|
21
|
-
}
|
22
|
-
|
23
|
-
this.listeners[name].push(fn);
|
24
|
-
return function () {
|
25
|
-
_this.off(name, fn);
|
26
|
-
};
|
6
|
+
on(name, fn) {
|
7
|
+
if (!this.listeners[name]) {
|
8
|
+
this.listeners[name] = [];
|
27
9
|
}
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
10
|
+
this.listeners[name].push(fn);
|
11
|
+
return () => {
|
12
|
+
this.off(name, fn);
|
13
|
+
};
|
14
|
+
}
|
15
|
+
off(name, fn) {
|
16
|
+
const fns = this.listeners[name];
|
17
|
+
if (fns) {
|
18
|
+
fns.splice(fns.indexOf(fn), 1);
|
19
|
+
}
|
20
|
+
}
|
21
|
+
emit(name) {
|
22
|
+
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
23
|
+
args[_key - 1] = arguments[_key];
|
36
24
|
}
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
}
|
43
|
-
|
44
|
-
var fns = this.listeners[name];
|
45
|
-
|
46
|
-
if (fns) {
|
47
|
-
var result;
|
48
|
-
fns.forEach(function (fn) {
|
49
|
-
result = fn.apply(void 0, args);
|
50
|
-
});
|
51
|
-
return result;
|
52
|
-
}
|
25
|
+
const fns = this.listeners[name];
|
26
|
+
if (fns) {
|
27
|
+
let result;
|
28
|
+
fns.forEach(fn => {
|
29
|
+
result = fn(...args);
|
30
|
+
});
|
31
|
+
return result;
|
53
32
|
}
|
54
|
-
}
|
55
|
-
|
56
|
-
return Emitter;
|
57
|
-
}();
|
33
|
+
}
|
34
|
+
}
|
package/lib/filterProps/index.js
CHANGED
@@ -1,29 +1,17 @@
|
|
1
|
-
import "core-js/modules/es.regexp.exec.js";
|
2
|
-
import "core-js/modules/es.string.match.js";
|
3
1
|
import "core-js/modules/es.string.replace.js";
|
4
|
-
|
5
|
-
|
6
|
-
import "core-js/modules/es.object.keys.js";
|
7
|
-
export var isPlatformSpecifyProp = function (prop) {
|
8
|
-
return prop.match(/^(ali|wechat|toutiao)-/);
|
9
|
-
};
|
10
|
-
|
11
|
-
var normalizeWebSpecifyProp = function (prop) {
|
12
|
-
return prop.replace(/^web-/, '');
|
13
|
-
};
|
14
|
-
|
2
|
+
export const isPlatformSpecifyProp = prop => prop.match(/^(ali|wechat|toutiao)-/);
|
3
|
+
const normalizeWebSpecifyProp = prop => prop.replace(/^web-/, '');
|
15
4
|
export function filterProps(props) {
|
16
|
-
return Object.keys(props).reduce(
|
17
|
-
|
5
|
+
return Object.keys(props).reduce((acc, cur) => {
|
6
|
+
let prop = cur;
|
18
7
|
|
8
|
+
// web 平台没有 cli 帮助处理属性名称,直接去掉平台前缀
|
19
9
|
if (process.env.PLATFORM === 'web') {
|
20
10
|
prop = normalizeWebSpecifyProp(cur);
|
21
11
|
}
|
22
|
-
|
23
12
|
if (isPlatformSpecifyProp(prop)) {
|
24
13
|
return acc;
|
25
14
|
}
|
26
|
-
|
27
15
|
acc[prop] = props[cur];
|
28
16
|
return acc;
|
29
17
|
}, {});
|
@@ -1,10 +1,9 @@
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
2
1
|
// https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/CSSProperty.js
|
3
2
|
|
4
3
|
/**
|
5
4
|
* CSS properties which accept numbers but are not in units of "px".
|
6
5
|
*/
|
7
|
-
export
|
6
|
+
export const isUnitlessNumber = {
|
8
7
|
animationIterationCount: true,
|
9
8
|
borderImageOutset: true,
|
10
9
|
borderImageSlice: true,
|
@@ -49,30 +48,24 @@ export var isUnitlessNumber = {
|
|
49
48
|
strokeOpacity: true,
|
50
49
|
strokeWidth: true
|
51
50
|
};
|
51
|
+
|
52
52
|
/**
|
53
53
|
* @param {string} prefix vendor-specific prefix, eg: Webkit
|
54
54
|
* @param {string} key style name, eg: transitionDuration
|
55
55
|
* @return {string} style name prefixed with `prefix`, properly camelCased, eg:
|
56
56
|
* WebkitTransitionDuration
|
57
57
|
*/
|
58
|
-
|
59
58
|
function prefixKey(prefix, key) {
|
60
59
|
return prefix + key.charAt(0).toUpperCase() + key.substring(1);
|
61
60
|
}
|
61
|
+
|
62
62
|
/**
|
63
63
|
* Support style names that may come passed in prefixed by adding permutations
|
64
64
|
* of vendor prefixes.
|
65
65
|
*/
|
66
|
-
|
67
|
-
|
68
|
-
var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
|
69
|
-
|
70
|
-
var _loop = function (prop) {
|
66
|
+
const prefixes = ['Webkit', 'ms', 'Moz', 'O'];
|
67
|
+
for (const prop in isUnitlessNumber) {
|
71
68
|
prefixes.forEach(function (prefix) {
|
72
69
|
isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
|
73
70
|
});
|
74
|
-
};
|
75
|
-
|
76
|
-
for (var prop in isUnitlessNumber) {
|
77
|
-
_loop(prop);
|
78
71
|
}
|
package/lib/inlineStyle/index.js
CHANGED
@@ -1,36 +1,26 @@
|
|
1
|
-
import
|
2
|
-
import "core-js/modules/es.array.filter.js";
|
3
|
-
import "core-js/modules/es.object.to-string.js";
|
4
|
-
import "core-js/modules/es.object.assign.js";
|
5
|
-
import "core-js/modules/es.array.concat.js";
|
6
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
7
|
-
import "core-js/modules/es.object.keys.js";
|
8
|
-
import "core-js/modules/es.number.constructor.js";
|
9
|
-
import "core-js/modules/es.regexp.exec.js";
|
10
|
-
import "core-js/modules/es.regexp.test.js";
|
1
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
11
2
|
import "core-js/modules/es.string.replace.js";
|
12
3
|
import { isWeb } from '@ray-js/env';
|
13
4
|
import { isUnitlessNumber } from './CSSProperty';
|
5
|
+
|
14
6
|
/**
|
15
7
|
* 根据平台转换内敛样式单位, 自适应单位
|
16
8
|
* 需要关闭 ray 的内敛样式转换规则
|
17
9
|
* @param int 内敛样式
|
18
10
|
*/
|
19
|
-
|
20
11
|
export function inlineStyle() {
|
21
12
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
22
13
|
args[_key] = arguments[_key];
|
23
14
|
}
|
24
|
-
|
25
|
-
var allStyle = args.filter(Boolean);
|
15
|
+
const allStyle = args.filter(Boolean);
|
26
16
|
if (allStyle.length == 0) return undefined;
|
27
|
-
|
28
|
-
Object.keys(style).forEach(
|
29
|
-
|
30
|
-
|
17
|
+
const style = Object.assign({}, ...allStyle);
|
18
|
+
Object.keys(style).forEach(key => {
|
19
|
+
const value = style[key];
|
31
20
|
if (typeof value === 'undefined') {
|
32
21
|
delete style[key];
|
33
|
-
}
|
22
|
+
}
|
23
|
+
// 整数类型替换为
|
34
24
|
else if (!(key in isUnitlessNumber)) {
|
35
25
|
if (!Number.isNaN(Number(value))) {
|
36
26
|
if (isWeb) {
|
@@ -40,8 +30,8 @@ export function inlineStyle() {
|
|
40
30
|
}
|
41
31
|
} else if (/\b([.\d]+)rpx\b/.test(value) && isWeb) {
|
42
32
|
// TODO: 支持 native 的样式抹平
|
43
|
-
style[key] = value.replace(/\b([.\d]+)rpx\b/g,
|
44
|
-
|
33
|
+
style[key] = value.replace(/\b([.\d]+)rpx\b/g, (match, x) => {
|
34
|
+
const size = Number(x);
|
45
35
|
return "".concat(size / 100, "rem");
|
46
36
|
});
|
47
37
|
}
|
package/lib/normalizeTabBar.js
CHANGED
@@ -1,99 +1,60 @@
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
2
|
-
import
|
3
|
-
import "core-js/modules/es.array.map.js";
|
4
|
-
import "core-js/modules/es.array.filter.js";
|
5
|
-
import "core-js/modules/es.object.to-string.js";
|
6
|
-
import "core-js/modules/es.array.find.js";
|
7
|
-
import "core-js/modules/es.array.concat.js";
|
8
|
-
import "core-js/modules/es.json.stringify.js";
|
2
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
9
3
|
import { match, parse } from 'path-to-regexp';
|
10
4
|
export function normalizeTabBar(tabBar, routes) {
|
11
|
-
|
12
|
-
|
5
|
+
let list = tabBar.list;
|
13
6
|
if (Array.isArray(list)) {
|
14
|
-
list = list.map(
|
7
|
+
list = list.map(tab => {
|
15
8
|
if (tab.id === undefined) {
|
16
9
|
return tab;
|
17
10
|
}
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
var r = _step.value;
|
25
|
-
|
26
|
-
// 兼容老项目,将老数据格式到新数据
|
27
|
-
if (tab.id === r.id) {
|
28
|
-
return _objectSpread(_objectSpread({}, tab), {}, {
|
29
|
-
pagePath: r.path
|
30
|
-
});
|
31
|
-
}
|
11
|
+
for (const r of routes) {
|
12
|
+
// 兼容老项目,将老数据格式到新数据
|
13
|
+
if (tab.id === r.id) {
|
14
|
+
return _objectSpread(_objectSpread({}, tab), {}, {
|
15
|
+
pagePath: r.path
|
16
|
+
});
|
32
17
|
}
|
33
|
-
} catch (err) {
|
34
|
-
_iterator.e(err);
|
35
|
-
} finally {
|
36
|
-
_iterator.f();
|
37
18
|
}
|
38
|
-
|
39
19
|
return tab;
|
40
|
-
});
|
20
|
+
});
|
21
|
+
// tabBar.list[number].pagePath 必须在 routes[number].page 中,即tab.pagePath === routes[number].page
|
41
22
|
// tabBar.list[number].route 可不配置
|
42
23
|
// tabBar.list[number].route 若未配置,则设置 tabBar.list[number].route = routes[number].page(非模式匹配)或tabBar.list[number].pagePath
|
43
24
|
// tabBar.list[number].route 不能用模式,如不能用/xxx/:id等,必须是明确的 如/xxx/123
|
44
25
|
// tabBar.list[number].route 必须要能命中对应routes[number].route 路由规则,规则详见 path-to-regexp 模块
|
45
|
-
|
46
|
-
tabBar.list = list.map(function (tab, index) {
|
26
|
+
tabBar.list = list.map((tab, index) => {
|
47
27
|
var _m$route;
|
48
|
-
|
49
28
|
tab = _objectSpread({}, tab);
|
50
|
-
|
51
|
-
return tab.pagePath === i.path;
|
52
|
-
});
|
53
|
-
|
29
|
+
const m = routes.find(i => tab.pagePath === i.path);
|
54
30
|
if (!m) {
|
55
31
|
throw new Error("tabBar.list[".concat(index, "].pagePath: ").concat(tab.pagePath, " \u9700\u8981\u5728\u8DEF\u7531\u914D\u7F6E\u4E2D: ").concat(JSON.stringify(routes, null, 2)));
|
56
32
|
}
|
57
|
-
|
58
33
|
if (!tab.route) {
|
59
34
|
// 判断 routes[number].route 是否为模式匹配规则
|
60
35
|
tab.route = m.route && parse(m.route).length === 1 ? m.route : m.path;
|
61
|
-
}
|
62
|
-
|
63
|
-
|
64
|
-
var matched = match((_m$route = m.route) !== null && _m$route !== void 0 ? _m$route : m.path)(tab.route);
|
65
|
-
|
36
|
+
}
|
37
|
+
// 判断是否能被路由命中
|
38
|
+
const matched = match((_m$route = m.route) !== null && _m$route !== void 0 ? _m$route : m.path)(tab.route);
|
66
39
|
if (!matched) {
|
67
40
|
console.warn("tabBar.list[".concat(index, "]\n.route: ").concat(tab.route, "\n.pagePath: ").concat(tab.pagePath, "\n\u5E94\u88AB\u8DEF\u7531\u547D\u4E2D: \n").concat(JSON.stringify(m, null, 2)));
|
68
41
|
return;
|
69
|
-
}
|
70
|
-
|
71
|
-
|
72
|
-
var otherMatched = routes.filter(function (r) {
|
73
|
-
return tab.pagePath !== r.path;
|
74
|
-
}).filter(function (r) {
|
42
|
+
}
|
43
|
+
// 判断是否还被其他路由命中
|
44
|
+
const otherMatched = routes.filter(r => tab.pagePath !== r.path).filter(r => {
|
75
45
|
var _r$route;
|
76
|
-
|
77
46
|
return match((_r$route = r.route) !== null && _r$route !== void 0 ? _r$route : r.path)(tab.route);
|
78
47
|
});
|
79
|
-
|
80
|
-
return r.path !== tab.pagePath;
|
81
|
-
});
|
82
|
-
|
48
|
+
const unusable = otherMatched.filter(r => r.path !== tab.pagePath);
|
83
49
|
if (unusable.length) {
|
84
50
|
console.warn("tabBar.list[".concat(index, "]\n.route: ").concat(tab.route, "\n%c.pagePath: ").concat(tab.pagePath, "\n%c\u88AB\u5176\u5B83\u8DEF\u7531\u547D\u4E2D\uFF1A\n").concat(JSON.stringify(unusable, null, 2)), 'background:#290000;color:green', 'background:#290000;color:green', 'color:red');
|
85
51
|
return;
|
86
52
|
}
|
87
|
-
|
88
53
|
return tab;
|
89
|
-
}).filter(
|
90
|
-
return !!tab;
|
91
|
-
});
|
92
|
-
|
54
|
+
}).filter(tab => !!tab);
|
93
55
|
if (!tabBar.list.length) {
|
94
56
|
return {};
|
95
57
|
}
|
96
58
|
}
|
97
|
-
|
98
59
|
return tabBar;
|
99
60
|
}
|
package/lib/plainStyle/index.js
CHANGED
@@ -1,50 +1,32 @@
|
|
1
|
-
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
2
|
-
import "core-js/modules/es.string.starts-with.js";
|
3
|
-
import "core-js/modules/es.regexp.exec.js";
|
4
1
|
import "core-js/modules/es.string.replace.js";
|
5
|
-
import "core-js/modules/
|
6
|
-
|
7
|
-
|
8
|
-
import "core-js/modules/es.array.reduce.js";
|
9
|
-
import "core-js/modules/es.object.keys.js";
|
10
|
-
import "core-js/modules/es.array.concat.js";
|
11
|
-
var vendorPrefixes = ['webkit', 'moz', 'ms', 'o'];
|
12
|
-
|
13
|
-
var transformReactStyleKey = function (key) {
|
2
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
3
|
+
const vendorPrefixes = ['webkit', 'moz', 'ms', 'o'];
|
4
|
+
const transformReactStyleKey = key => {
|
14
5
|
var _styleValue;
|
15
|
-
|
16
6
|
// css3 var
|
17
7
|
if (key !== null && key !== void 0 && key.startsWith('--')) {
|
18
8
|
return key;
|
19
9
|
}
|
20
|
-
|
21
|
-
var styleValue = key.replace(/\.?([A-Z]+)/g, function (_x, y) {
|
10
|
+
let styleValue = key.replace(/\.?([A-Z]+)/g, function (_x, y) {
|
22
11
|
return "-".concat(y.toLowerCase());
|
23
|
-
});
|
12
|
+
});
|
24
13
|
|
14
|
+
// vendor prefix
|
25
15
|
if ((_styleValue = styleValue) !== null && _styleValue !== void 0 && _styleValue.startsWith('-')) {
|
26
|
-
|
27
|
-
return s;
|
28
|
-
})[0];
|
16
|
+
const firstWord = styleValue.split('-').filter(s => s)[0];
|
29
17
|
styleValue = styleValue.replace(/^-/, '');
|
30
|
-
|
31
|
-
if (vendorPrefixes.find(function (prefix) {
|
32
|
-
return prefix === firstWord;
|
33
|
-
})) {
|
18
|
+
if (vendorPrefixes.find(prefix => prefix === firstWord)) {
|
34
19
|
styleValue = "-".concat(styleValue);
|
35
20
|
}
|
36
21
|
}
|
37
|
-
|
38
22
|
return styleValue;
|
39
23
|
};
|
40
|
-
|
41
|
-
export var plainStyle = function (style) {
|
24
|
+
export const plainStyle = style => {
|
42
25
|
if (!style) {
|
43
26
|
return '';
|
44
27
|
}
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
return [].concat(_toConsumableArray(acc), ["".concat(transformReactStyleKey(key), ":").concat(value, ";")]);
|
28
|
+
return Object.keys(style).reduce((acc, key) => {
|
29
|
+
const value = style[key];
|
30
|
+
return [...acc, "".concat(transformReactStyleKey(key), ":").concat(value, ";")];
|
49
31
|
}, []).join('\n');
|
50
32
|
};
|
package/lib/useInterval/index.js
CHANGED
@@ -1,21 +1,22 @@
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
2
|
+
|
2
3
|
/**
|
3
4
|
* Hooks版本setInterval
|
4
5
|
*/
|
5
|
-
|
6
6
|
export function useInterval(callback) {
|
7
|
-
|
8
|
-
|
9
|
-
useEffect(
|
7
|
+
let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
|
8
|
+
const intervalFn = useRef({});
|
9
|
+
useEffect(() => {
|
10
10
|
intervalFn.current.callback = callback;
|
11
|
-
}, [callback]);
|
11
|
+
}, [callback]);
|
12
12
|
|
13
|
-
|
13
|
+
// set the interval
|
14
|
+
useEffect(() => {
|
14
15
|
if (delay !== null) {
|
15
|
-
intervalFn.current.timer = setInterval(
|
16
|
+
intervalFn.current.timer = setInterval(() => {
|
16
17
|
intervalFn.current.callback();
|
17
18
|
}, delay);
|
18
|
-
return
|
19
|
+
return () => {
|
19
20
|
clearInterval(intervalFn.current.timer);
|
20
21
|
};
|
21
22
|
}
|
@@ -1,22 +1,17 @@
|
|
1
|
-
import "core-js/modules/es.array.concat.js";
|
2
1
|
import React from 'react';
|
3
2
|
import { plainStyle } from '../plainStyle';
|
4
|
-
|
5
|
-
|
6
|
-
var generateClassName = function () {
|
7
|
-
return "placeholder-style-".concat(clsxId++);
|
8
|
-
};
|
9
|
-
|
3
|
+
let clsxId = 0;
|
4
|
+
const generateClassName = () => "placeholder-style-".concat(clsxId++);
|
10
5
|
export function useStylesheet(css) {
|
11
|
-
|
12
|
-
React.useEffect(
|
13
|
-
|
14
|
-
|
6
|
+
const className = React.useRef(generateClassName());
|
7
|
+
React.useEffect(() => {
|
8
|
+
const styleContent = ".".concat(className.current, "::placeholder {\n").concat(plainStyle(css), "}");
|
9
|
+
const style = window.document.createElement('style');
|
15
10
|
style.type = 'text/css';
|
16
11
|
style.appendChild(document.createTextNode(styleContent));
|
17
|
-
|
12
|
+
const head = window.document.head || window.document.getElementsByTagName('head')[0];
|
18
13
|
head.appendChild(style);
|
19
|
-
return
|
14
|
+
return () => {
|
20
15
|
head.removeChild(style);
|
21
16
|
};
|
22
17
|
}, [css]);
|
package/lib/useThrottle/index.js
CHANGED
@@ -1,29 +1,22 @@
|
|
1
|
-
import
|
1
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
2
2
|
import { useRef, useState } from 'react';
|
3
|
+
|
3
4
|
/**
|
4
5
|
* 节流的 useState
|
5
6
|
*/
|
6
|
-
|
7
7
|
export function useThrottle(value) {
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
var now = useRef(0);
|
16
|
-
var last = useRef(0);
|
17
|
-
var timer = useRef();
|
18
|
-
return [state, function setValue(value) {
|
8
|
+
let ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
|
9
|
+
const [state, setState] = useState(value);
|
10
|
+
const now = useRef(0);
|
11
|
+
const last = useRef(0);
|
12
|
+
const timer = useRef();
|
13
|
+
return [state, value => {
|
19
14
|
now.current = Date.now();
|
20
|
-
|
21
15
|
if (last && now.current < last.current + ms) {
|
22
16
|
if (timer.current) {
|
23
17
|
clearTimeout(timer.current);
|
24
|
-
}
|
25
|
-
|
26
|
-
|
18
|
+
}
|
19
|
+
// 保证在当前时间区间结束后,再执行一次 fn
|
27
20
|
timer.current = setTimeout(function () {
|
28
21
|
last.current = now.current;
|
29
22
|
setState(value);
|
package/lib/useTouch/index.js
CHANGED
@@ -1,42 +1,34 @@
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
3
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
4
|
-
|
5
|
-
import "core-js/modules/
|
6
|
-
import "core-js/modules/es.object.to-string.js";
|
7
|
-
import "core-js/modules/es.array.map.js";
|
8
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
9
|
-
import "core-js/modules/es.array.reduce.js";
|
10
|
-
import "core-js/modules/es.object.keys.js";
|
3
|
+
const _excluded = ["hoverDuration", "hoverDelay"];
|
4
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
11
5
|
import * as React from 'react';
|
12
6
|
import { isWeb } from '@ray-js/env';
|
13
|
-
|
14
|
-
export function useTouch(_ref) {
|
15
|
-
var hoverDuration = _ref.hoverDuration,
|
16
|
-
hoverDelay = _ref.hoverDelay,
|
17
|
-
handles = _objectWithoutProperties(_ref, _excluded);
|
18
|
-
|
19
|
-
var _React$useState = React.useState(false),
|
20
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
21
|
-
touching = _React$useState2[0],
|
22
|
-
setTouching = _React$useState2[1];
|
7
|
+
const LONG_TAP_DURATION = 350;
|
23
8
|
|
24
|
-
|
25
|
-
|
9
|
+
/**
|
10
|
+
* 多端通用事件
|
11
|
+
*/
|
26
12
|
|
13
|
+
export function useTouch(_ref) {
|
14
|
+
let {
|
15
|
+
hoverDuration,
|
16
|
+
hoverDelay
|
17
|
+
} = _ref,
|
18
|
+
handles = _objectWithoutProperties(_ref, _excluded);
|
19
|
+
const [touching, setTouching] = React.useState(false);
|
20
|
+
const hoveringRef = React.useRef(false);
|
21
|
+
const timers = React.useRef([]);
|
27
22
|
function executeTimeout(callback, time) {
|
28
|
-
|
23
|
+
const timer = setTimeout(() => {
|
29
24
|
callback();
|
30
|
-
timers.current.filter(
|
31
|
-
return t !== timer;
|
32
|
-
});
|
25
|
+
timers.current.filter(t => t !== timer);
|
33
26
|
}, time);
|
34
27
|
timers.current.push(timer);
|
35
28
|
}
|
36
|
-
|
37
29
|
function formatTouches(touchs) {
|
38
30
|
if (Array.isArray(touchs)) {
|
39
|
-
return touchs && touchs.map(
|
31
|
+
return touchs && touchs.map(item => {
|
40
32
|
return {
|
41
33
|
identifier: item.identifier,
|
42
34
|
pageX: item.pageX,
|
@@ -47,7 +39,6 @@ export function useTouch(_ref) {
|
|
47
39
|
return [_objectSpread({}, touchs)];
|
48
40
|
}
|
49
41
|
}
|
50
|
-
|
51
42
|
function formatRayEvent(e, touchType) {
|
52
43
|
return {
|
53
44
|
type: (e === null || e === void 0 ? void 0 : e.type) || touchType || '',
|
@@ -57,7 +48,6 @@ export function useTouch(_ref) {
|
|
57
48
|
origin: e
|
58
49
|
};
|
59
50
|
}
|
60
|
-
|
61
51
|
function formatRayClickEvent(e, clickType) {
|
62
52
|
return {
|
63
53
|
type: (e === null || e === void 0 ? void 0 : e.type) || clickType || '',
|
@@ -67,49 +57,37 @@ export function useTouch(_ref) {
|
|
67
57
|
origin: e
|
68
58
|
};
|
69
59
|
}
|
70
|
-
|
71
|
-
|
72
|
-
return function () {
|
73
|
-
timers.current.forEach(function (t) {
|
74
|
-
return clearTimeout(t);
|
75
|
-
});
|
76
|
-
};
|
60
|
+
React.useEffect(() => () => {
|
61
|
+
timers.current.forEach(t => clearTimeout(t));
|
77
62
|
}, []);
|
78
|
-
|
79
63
|
function onLongClick(e) {
|
80
64
|
var _handles$onLongClick;
|
81
|
-
|
82
65
|
return (_handles$onLongClick = handles.onLongClick) === null || _handles$onLongClick === void 0 ? void 0 : _handles$onLongClick.call(handles, formatRayClickEvent(e, 'longclick'));
|
83
66
|
}
|
84
|
-
|
85
|
-
var processedHandles = {
|
67
|
+
const processedHandles = {
|
86
68
|
onTouchStart: function (e) {
|
87
69
|
var _handles$onTouchStart;
|
88
|
-
|
89
70
|
hoveringRef.current = true;
|
90
|
-
executeTimeout(
|
71
|
+
executeTimeout(() => {
|
91
72
|
if (hoveringRef.current) {
|
92
73
|
setTouching(true);
|
93
74
|
}
|
94
75
|
}, hoverDelay);
|
95
|
-
|
96
76
|
if (isWeb) {
|
97
77
|
if (typeof handles.onLongClick === 'function') {
|
98
|
-
executeTimeout(
|
78
|
+
executeTimeout(() => {
|
99
79
|
if (hoveringRef.current) {
|
100
80
|
onLongClick(e);
|
101
81
|
}
|
102
82
|
}, LONG_TAP_DURATION);
|
103
83
|
}
|
104
84
|
}
|
105
|
-
|
106
85
|
return (_handles$onTouchStart = handles.onTouchStart) === null || _handles$onTouchStart === void 0 ? void 0 : _handles$onTouchStart.call(handles, formatRayEvent(e, 'touchstart'));
|
107
86
|
},
|
108
87
|
onTouchMove: function (e) {
|
109
88
|
var _handles$onTouchMove;
|
110
|
-
|
111
89
|
hoveringRef.current = false;
|
112
|
-
executeTimeout(
|
90
|
+
executeTimeout(() => {
|
113
91
|
if (touching) {
|
114
92
|
setTouching(false);
|
115
93
|
}
|
@@ -118,9 +96,8 @@ export function useTouch(_ref) {
|
|
118
96
|
},
|
119
97
|
onTouchEnd: function (e) {
|
120
98
|
var _handles$onTouchEnd;
|
121
|
-
|
122
99
|
hoveringRef.current = false;
|
123
|
-
executeTimeout(
|
100
|
+
executeTimeout(() => {
|
124
101
|
if (touching) {
|
125
102
|
setTouching(false);
|
126
103
|
}
|
@@ -129,9 +106,8 @@ export function useTouch(_ref) {
|
|
129
106
|
},
|
130
107
|
onTouchCancel: function (e) {
|
131
108
|
var _handles$onTouchCance;
|
132
|
-
|
133
109
|
hoveringRef.current = false;
|
134
|
-
executeTimeout(
|
110
|
+
executeTimeout(() => {
|
135
111
|
if (touching) {
|
136
112
|
setTouching(false);
|
137
113
|
}
|
@@ -140,16 +116,14 @@ export function useTouch(_ref) {
|
|
140
116
|
},
|
141
117
|
onClick: function (e) {
|
142
118
|
var _handles$onClick;
|
143
|
-
|
144
119
|
return (_handles$onClick = handles.onClick) === null || _handles$onClick === void 0 ? void 0 : _handles$onClick.call(handles, formatRayClickEvent(e, 'click'));
|
145
120
|
},
|
146
|
-
onLongClick
|
121
|
+
onLongClick
|
147
122
|
};
|
148
|
-
|
123
|
+
const finalRes = Object.keys(processedHandles).reduce((o, k) => {
|
149
124
|
if (handles[k]) {
|
150
125
|
o[k] = processedHandles[k];
|
151
126
|
}
|
152
|
-
|
153
127
|
return o;
|
154
128
|
}, {});
|
155
129
|
return [touching, finalRes];
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
|
2
|
+
type TransitionClassName = string | string[] | {
|
3
3
|
[key: string]: string | string[];
|
4
4
|
};
|
5
|
-
|
5
|
+
type TransitionStatus = 'showStart' | 'showComplete' | 'hideStart' | 'hideComplete';
|
6
6
|
interface TransitionOptions<P> {
|
7
7
|
duration?: number;
|
8
8
|
onStart?: (show: boolean) => void;
|
@@ -1,50 +1,35 @@
|
|
1
|
-
import
|
2
|
-
import "core-js/modules/es.object.to-string.js";
|
3
|
-
import "core-js/modules/es.promise.js";
|
1
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
4
2
|
import { useEffect, useRef, useState } from 'react';
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
return new Promise(function (resolve) {
|
9
|
-
return setTimeout(resolve, duration);
|
10
|
-
});
|
3
|
+
const nextFrame = function () {
|
4
|
+
let duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000 / 30;
|
5
|
+
return new Promise(resolve => setTimeout(resolve, duration));
|
11
6
|
};
|
7
|
+
|
12
8
|
/**
|
13
9
|
* 用于执行动画的时序管理
|
14
10
|
* @param options transition 选项
|
15
11
|
* @param visible 是否可见
|
16
12
|
*/
|
17
|
-
|
18
|
-
|
19
13
|
export function useTransition(options, deps) {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
var showRef = useRef(visible);
|
30
|
-
|
31
|
-
var _useState = useState(visible ? 'showComplete' : 'hideComplete'),
|
32
|
-
_useState2 = _slicedToArray(_useState, 2),
|
33
|
-
status = _useState2[0],
|
34
|
-
setStatus = _useState2[1];
|
35
|
-
|
14
|
+
const {
|
15
|
+
duration = 200,
|
16
|
+
onFinish,
|
17
|
+
onStart
|
18
|
+
} = options;
|
19
|
+
const [visible = false] = deps;
|
20
|
+
const showRef = useRef(visible);
|
21
|
+
const [status, setStatus] = useState(visible ? 'showComplete' : 'hideComplete');
|
36
22
|
function updateShow(show) {
|
37
23
|
if (showRef.current === show) return false;
|
38
24
|
showRef.current = show;
|
39
25
|
onStart === null || onStart === void 0 ? void 0 : onStart(showRef.current);
|
40
26
|
setStatus(showRef.current ? 'showStart' : 'hideStart');
|
41
|
-
nextFrame(duration).then(
|
27
|
+
nextFrame(duration).then(() => {
|
42
28
|
setStatus(showRef.current ? 'showComplete' : 'hideComplete');
|
43
29
|
onFinish === null || onFinish === void 0 ? void 0 : onFinish(showRef.current);
|
44
30
|
});
|
45
31
|
}
|
46
|
-
|
47
|
-
useEffect(function () {
|
32
|
+
useEffect(() => {
|
48
33
|
updateShow(visible);
|
49
34
|
}, [visible]);
|
50
35
|
return [status, {
|
package/package.json
CHANGED
@@ -1,39 +1,39 @@
|
|
1
1
|
{
|
2
2
|
"name": "@ray-js/framework-shared",
|
3
|
-
"version": "1.4.0-alpha.
|
3
|
+
"version": "1.4.0-alpha.10",
|
4
4
|
"description": "Ray shared for framework",
|
5
5
|
"keywords": [
|
6
6
|
"ray"
|
7
7
|
],
|
8
|
+
"repository": {},
|
8
9
|
"license": "MIT",
|
10
|
+
"maintainers": [
|
11
|
+
{
|
12
|
+
"name": "tuyafe",
|
13
|
+
"email": "tuyafe@tuya.com"
|
14
|
+
}
|
15
|
+
],
|
9
16
|
"main": "lib/index.js",
|
10
17
|
"files": [
|
11
18
|
"lib"
|
12
19
|
],
|
13
|
-
"publishConfig": {
|
14
|
-
"access": "public",
|
15
|
-
"registry": "https://registry.npmjs.org"
|
16
|
-
},
|
17
20
|
"scripts": {
|
18
|
-
"clean": "rm -rf lib",
|
19
21
|
"build": "ray build --type=component",
|
22
|
+
"clean": "rm -rf lib",
|
20
23
|
"watch": "ray start --type=component --emit-declaration-dev"
|
21
24
|
},
|
22
25
|
"dependencies": {
|
23
|
-
"@ray-core/wechat": "^0.3.
|
24
|
-
"@ray-js/env": "^1.4.0-alpha.
|
25
|
-
"@ray-js/types": "^1.4.0-alpha.
|
26
|
+
"@ray-core/wechat": "^0.3.6",
|
27
|
+
"@ray-js/env": "^1.4.0-alpha.10",
|
28
|
+
"@ray-js/types": "^1.4.0-alpha.10",
|
26
29
|
"path-to-regexp": "^6.2.1"
|
27
30
|
},
|
28
31
|
"devDependencies": {
|
29
|
-
"@ray-js/cli": "^1.4.0-alpha.
|
32
|
+
"@ray-js/cli": "^1.4.0-alpha.10"
|
30
33
|
},
|
31
|
-
"
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
],
|
37
|
-
"gitHead": "92a9834964bb74c3a3b0553438b0f0c7a77ad8d0",
|
38
|
-
"repository": {}
|
34
|
+
"publishConfig": {
|
35
|
+
"access": "public",
|
36
|
+
"registry": "https://registry.npmjs.org"
|
37
|
+
},
|
38
|
+
"gitHead": "14cb935df10f020e714b44bb41d4899646db751c"
|
39
39
|
}
|
package/LICENSE.md
DELETED
@@ -1,9 +0,0 @@
|
|
1
|
-
Copyright © 2014-2022 Tuya.inc
|
2
|
-
|
3
|
-
MIT License
|
4
|
-
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
6
|
-
|
7
|
-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
8
|
-
|
9
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|