clxx 2.1.6 → 2.1.7
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/AGENTS.md +2 -0
- package/README.md +63 -0
- package/build/Ago/index.js +14 -8
- package/build/Alert/Wrapper.js +13 -10
- package/build/Alert/index.js +17 -11
- package/build/Alert/style.js +4 -1
- package/build/AutoGrid/index.js +50 -14
- package/build/AutoGrid/style.js +9 -6
- package/build/CarouselNotice/index.js +22 -19
- package/build/CarouselNotice/style.js +6 -3
- package/build/CitySelect/data.d.ts +3 -0
- package/build/CitySelect/data.js +2355 -0
- package/build/CitySelect/index.d.ts +17 -0
- package/build/CitySelect/index.js +300 -0
- package/build/CitySelect/search.d.ts +2 -0
- package/build/CitySelect/search.js +70 -0
- package/build/CitySelect/style.d.ts +4 -0
- package/build/CitySelect/style.js +237 -0
- package/build/CitySelect/type.d.ts +17 -0
- package/build/CitySelect/type.js +2 -0
- package/build/Clickable/index.js +56 -20
- package/build/Container/index.js +52 -16
- package/build/Countdowner/index.js +50 -14
- package/build/Dialog/Wrapper.js +13 -10
- package/build/Dialog/index.js +18 -12
- package/build/Dialog/style.js +29 -25
- package/build/Effect/useInterval.js +7 -4
- package/build/Effect/useTick.js +9 -6
- package/build/Effect/useUpdate.js +6 -3
- package/build/Effect/useViewport.js +15 -8
- package/build/Effect/useWindowResize.js +7 -4
- package/build/Fixed/index.js +6 -3
- package/build/Flex/Col.js +23 -15
- package/build/Flex/Row.js +23 -15
- package/build/Flex/index.js +9 -5
- package/build/Indicator/index.js +20 -14
- package/build/Indicator/style.js +6 -3
- package/build/Loading/Wrapper.js +14 -11
- package/build/Loading/index.js +17 -10
- package/build/Loading/style.js +9 -6
- package/build/Overlay/index.js +12 -9
- package/build/SafeArea/index.js +8 -5
- package/build/ScrollView/index.js +24 -21
- package/build/ScrollView/style.js +4 -1
- package/build/Toast/Toast.js +53 -17
- package/build/Toast/index.js +21 -14
- package/build/Toast/style.js +22 -18
- package/build/index.d.ts +1 -1
- package/build/index.js +102 -36
- package/build/utils/Countdown.js +7 -3
- package/build/utils/ago.js +10 -4
- package/build/utils/calendarTable.js +9 -3
- package/build/utils/createApp.js +35 -27
- package/build/utils/cssUtil.js +10 -5
- package/build/utils/defaultScroll.js +4 -1
- package/build/utils/dom.js +6 -3
- package/build/utils/is.js +6 -2
- package/build/utils/jsonp.js +4 -1
- package/build/utils/request.js +40 -27
- package/build/utils/tick.js +4 -1
- package/build/utils/uniqKey.js +4 -1
- package/build/utils/wait.js +8 -4
- package/package.json +1 -1
- package/test/src/city-select/index.jsx +21 -0
- package/test/src/index/index.jsx +1 -0
- package/test/vite.config.js +6 -2
- package/build/context.d.ts +0 -14
- package/build/context.js +0 -21
package/build/Clickable/index.js
CHANGED
|
@@ -1,3 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
1
35
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
36
|
var t = {};
|
|
3
37
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -9,41 +43,43 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
43
|
}
|
|
10
44
|
return t;
|
|
11
45
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
46
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
+
exports.Clickable = Clickable;
|
|
48
|
+
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
49
|
+
const react_1 = __importStar(require("react"));
|
|
50
|
+
const is_1 = require("../utils/is");
|
|
51
|
+
function Clickable(props) {
|
|
16
52
|
let { children, bubble = true, className, activeClassName, style, activeStyle, disable = false, moveThreshold = 10 } = props, attrs = __rest(props, ["children", "bubble", "className", "activeClassName", "style", "activeStyle", "disable", "moveThreshold"]);
|
|
17
53
|
// 如果激活样式和激活类都不存在,则设置激活默认样式
|
|
18
|
-
const finalActiveStyle =
|
|
54
|
+
const finalActiveStyle = react_1.default.useMemo(() => {
|
|
19
55
|
if (!activeClassName && !activeStyle) {
|
|
20
56
|
return { opacity: 0.6 };
|
|
21
57
|
}
|
|
22
58
|
return activeStyle;
|
|
23
59
|
}, [activeClassName, activeStyle]);
|
|
24
|
-
const touchable = is('touchable');
|
|
25
|
-
const [isActive, setIsActive] = useState(false);
|
|
60
|
+
const touchable = (0, is_1.is)('touchable');
|
|
61
|
+
const [isActive, setIsActive] = (0, react_1.useState)(false);
|
|
26
62
|
// 标记是否正处于触摸/按下状态
|
|
27
|
-
const touchRef = useRef(false);
|
|
63
|
+
const touchRef = (0, react_1.useRef)(false);
|
|
28
64
|
// 是否已挂载(防止卸载后更新 state)
|
|
29
|
-
const mountedRef = useRef(true);
|
|
65
|
+
const mountedRef = (0, react_1.useRef)(true);
|
|
30
66
|
// 记录触摸起始坐标,用于 touchmove 取消
|
|
31
|
-
const startPos = useRef({ x: 0, y: 0 });
|
|
32
|
-
useEffect(() => {
|
|
67
|
+
const startPos = (0, react_1.useRef)({ x: 0, y: 0 });
|
|
68
|
+
(0, react_1.useEffect)(() => {
|
|
33
69
|
mountedRef.current = true;
|
|
34
70
|
return () => {
|
|
35
71
|
mountedRef.current = false;
|
|
36
72
|
};
|
|
37
73
|
}, []);
|
|
38
|
-
const activate = useCallback(() => {
|
|
74
|
+
const activate = (0, react_1.useCallback)(() => {
|
|
39
75
|
if (mountedRef.current)
|
|
40
76
|
setIsActive(true);
|
|
41
77
|
}, []);
|
|
42
|
-
const deactivate = useCallback(() => {
|
|
78
|
+
const deactivate = (0, react_1.useCallback)(() => {
|
|
43
79
|
if (mountedRef.current)
|
|
44
80
|
setIsActive(false);
|
|
45
81
|
}, []);
|
|
46
|
-
const onTouchStart = useCallback((event) => {
|
|
82
|
+
const onTouchStart = (0, react_1.useCallback)((event) => {
|
|
47
83
|
if (!touchRef.current) {
|
|
48
84
|
touchRef.current = true;
|
|
49
85
|
if (!bubble)
|
|
@@ -53,7 +89,7 @@ export function Clickable(props) {
|
|
|
53
89
|
activate();
|
|
54
90
|
}
|
|
55
91
|
}, [bubble, activate]);
|
|
56
|
-
const onTouchMove = useCallback((event) => {
|
|
92
|
+
const onTouchMove = (0, react_1.useCallback)((event) => {
|
|
57
93
|
if (touchRef.current) {
|
|
58
94
|
const touch = event.touches[0];
|
|
59
95
|
const dx = touch.clientX - startPos.current.x;
|
|
@@ -64,7 +100,7 @@ export function Clickable(props) {
|
|
|
64
100
|
}
|
|
65
101
|
}
|
|
66
102
|
}, [moveThreshold, deactivate]);
|
|
67
|
-
const onTouchEnd = useCallback((event) => {
|
|
103
|
+
const onTouchEnd = (0, react_1.useCallback)((event) => {
|
|
68
104
|
if (touchRef.current) {
|
|
69
105
|
touchRef.current = false;
|
|
70
106
|
if (!bubble)
|
|
@@ -72,7 +108,7 @@ export function Clickable(props) {
|
|
|
72
108
|
deactivate();
|
|
73
109
|
}
|
|
74
110
|
}, [bubble, deactivate]);
|
|
75
|
-
const onMouseDown = useCallback((event) => {
|
|
111
|
+
const onMouseDown = (0, react_1.useCallback)((event) => {
|
|
76
112
|
// 只响应鼠标左键
|
|
77
113
|
if (event.button !== 0)
|
|
78
114
|
return;
|
|
@@ -83,14 +119,14 @@ export function Clickable(props) {
|
|
|
83
119
|
activate();
|
|
84
120
|
}
|
|
85
121
|
}, [bubble, activate]);
|
|
86
|
-
const onMouseUp = useCallback(() => {
|
|
122
|
+
const onMouseUp = (0, react_1.useCallback)(() => {
|
|
87
123
|
if (touchRef.current) {
|
|
88
124
|
touchRef.current = false;
|
|
89
125
|
deactivate();
|
|
90
126
|
}
|
|
91
127
|
}, [deactivate]);
|
|
92
128
|
// PC 环境:在 document 上监听 mouseup,处理鼠标移出元素后释放的场景
|
|
93
|
-
useEffect(() => {
|
|
129
|
+
(0, react_1.useEffect)(() => {
|
|
94
130
|
if (!disable && !touchable) {
|
|
95
131
|
const doc = document.documentElement;
|
|
96
132
|
doc.addEventListener('mouseup', onMouseUp);
|
|
@@ -119,5 +155,5 @@ export function Clickable(props) {
|
|
|
119
155
|
fullAttrs.onMouseDown = onMouseDown;
|
|
120
156
|
}
|
|
121
157
|
}
|
|
122
|
-
return
|
|
158
|
+
return (0, jsx_runtime_1.jsx)("div", Object.assign({}, fullAttrs, { children: children }));
|
|
123
159
|
}
|
package/build/Container/index.js
CHANGED
|
@@ -1,34 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.Container = Container;
|
|
37
|
+
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
38
|
+
const react_1 = require("@emotion/react");
|
|
39
|
+
const react_2 = __importStar(require("react"));
|
|
40
|
+
const useWindowResize_1 = require("../Effect/useWindowResize");
|
|
41
|
+
const useViewport_1 = require("../Effect/useViewport");
|
|
6
42
|
/**
|
|
7
43
|
* 自适应容器
|
|
8
44
|
* @param props
|
|
9
45
|
*/
|
|
10
|
-
|
|
46
|
+
function Container(props) {
|
|
11
47
|
const { designWidth = 750, globalStyle, children } = props;
|
|
12
48
|
// 计算理论根字体大小(未经浏览器缩放修正)
|
|
13
|
-
const calculateFontSize = useCallback((width) => {
|
|
49
|
+
const calculateFontSize = (0, react_2.useCallback)((width) => {
|
|
14
50
|
return (width * 100) / designWidth;
|
|
15
51
|
}, [designWidth]);
|
|
16
52
|
// 理论基准字体大小(跟随窗口尺寸变化)
|
|
17
|
-
const [rawFontSize, setRawFontSize] = useState(() => calculateFontSize(window.innerWidth));
|
|
53
|
+
const [rawFontSize, setRawFontSize] = (0, react_2.useState)(() => calculateFontSize(window.innerWidth));
|
|
18
54
|
// 浏览器字体缩放因子(>1 表示用户放大了系统字体,<1 表示缩小)
|
|
19
55
|
// 独立存储,使得 resize 后缩放修正依然生效
|
|
20
|
-
const [scaleFactor, setScaleFactor] = useState(1);
|
|
56
|
+
const [scaleFactor, setScaleFactor] = (0, react_2.useState)(1);
|
|
21
57
|
// 是否已完成字体缩放检测
|
|
22
|
-
const [isInitialized, setIsInitialized] = useState(false);
|
|
58
|
+
const [isInitialized, setIsInitialized] = (0, react_2.useState)(false);
|
|
23
59
|
// 修正后的字体大小:统一对所有字体计算应用缩放修正
|
|
24
|
-
const correctedFontSize = useMemo(() => scaleFactor === 1
|
|
60
|
+
const correctedFontSize = (0, react_2.useMemo)(() => scaleFactor === 1
|
|
25
61
|
? rawFontSize
|
|
26
62
|
: Math.round((rawFontSize / scaleFactor) * 10) / 10, [rawFontSize, scaleFactor]);
|
|
27
63
|
// 字体缩放检测
|
|
28
64
|
// Emotion 的 <Global> 通过 useInsertionEffect 注入样式,早于 useLayoutEffect
|
|
29
65
|
// 因此 useLayoutEffect 内 getComputedStyle 可正确读取已注入的字体大小
|
|
30
66
|
// 检测和修正均在浏览器绘制前同步完成,避免闪烁
|
|
31
|
-
useLayoutEffect(() => {
|
|
67
|
+
(0, react_2.useLayoutEffect)(() => {
|
|
32
68
|
// 缩放因子在页面生命周期内不变,只需检测一次
|
|
33
69
|
if (isInitialized)
|
|
34
70
|
return;
|
|
@@ -43,20 +79,20 @@ export function Container(props) {
|
|
|
43
79
|
}, [rawFontSize, isInitialized]);
|
|
44
80
|
// 窗口大小变化时更新理论字体大小
|
|
45
81
|
// correctedFontSize 通过 useMemo 自动应用 scaleFactor 修正
|
|
46
|
-
useWindowResize(() => {
|
|
82
|
+
(0, useWindowResize_1.useWindowResize)(() => {
|
|
47
83
|
setRawFontSize(calculateFontSize(window.innerWidth));
|
|
48
84
|
});
|
|
49
85
|
// 设置 viewport meta
|
|
50
|
-
useViewport();
|
|
86
|
+
(0, useViewport_1.useViewport)();
|
|
51
87
|
// 激活 iOS 上的 :active 伪类
|
|
52
|
-
useEffect(() => {
|
|
88
|
+
(0, react_2.useEffect)(() => {
|
|
53
89
|
const noop = () => { };
|
|
54
90
|
document.body.addEventListener("touchstart", noop, { passive: true });
|
|
55
91
|
return () => {
|
|
56
92
|
document.body.removeEventListener("touchstart", noop);
|
|
57
93
|
};
|
|
58
94
|
}, []);
|
|
59
|
-
return (
|
|
95
|
+
return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: [
|
|
60
96
|
{
|
|
61
97
|
"*": {
|
|
62
98
|
boxSizing: "border-box",
|
|
@@ -1,3 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
1
35
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
36
|
var t = {};
|
|
3
37
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -9,15 +43,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
43
|
}
|
|
10
44
|
return t;
|
|
11
45
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
46
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
+
exports.Countdowner = Countdowner;
|
|
48
|
+
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
49
|
+
const react_1 = __importStar(require("react"));
|
|
50
|
+
const Countdown_1 = require("../utils/Countdown");
|
|
51
|
+
const Row_1 = require("../Flex/Row");
|
|
52
|
+
function Countdowner(props) {
|
|
17
53
|
let { remain = 0, separator = ':', format = 'his', onUpdate, onEnd, separatorStyle, containerStyle, numberStyle, renderNumber, renderSeparator } = props, extra = __rest(props, ["remain", "separator", "format", "onUpdate", "onEnd", "separatorStyle", "containerStyle", "numberStyle", "renderNumber", "renderSeparator"]);
|
|
18
|
-
const [value, setValue] = useState(null);
|
|
54
|
+
const [value, setValue] = (0, react_1.useState)(null);
|
|
19
55
|
// 使用 ref 保存最新的回调,避免频繁重建倒计时实例
|
|
20
|
-
const callbacksRef =
|
|
56
|
+
const callbacksRef = react_1.default.useRef({ onUpdate, onEnd });
|
|
21
57
|
callbacksRef.current = { onUpdate, onEnd };
|
|
22
58
|
let content = [];
|
|
23
59
|
if (value && typeof value === 'object') {
|
|
@@ -31,9 +67,9 @@ export function Countdowner(props) {
|
|
|
31
67
|
}
|
|
32
68
|
else {
|
|
33
69
|
// 默认以span包围,且数字不足10的时候有前置0
|
|
34
|
-
numberComponent = (
|
|
70
|
+
numberComponent = ((0, jsx_runtime_1.jsx)("span", { css: numberStyle, children: num < 10 ? `0${num}` : num }));
|
|
35
71
|
}
|
|
36
|
-
content.push(
|
|
72
|
+
content.push((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: numberComponent }, i));
|
|
37
73
|
// 添加分隔符,最后一个数字不需要分隔符
|
|
38
74
|
if (i !== format.length - 1) {
|
|
39
75
|
let separatorComponent;
|
|
@@ -41,14 +77,14 @@ export function Countdowner(props) {
|
|
|
41
77
|
separatorComponent = renderSeparator(num, key);
|
|
42
78
|
}
|
|
43
79
|
else {
|
|
44
|
-
separatorComponent = separator ? (
|
|
80
|
+
separatorComponent = separator ? ((0, jsx_runtime_1.jsx)("span", { css: separatorStyle, children: separator })) : null;
|
|
45
81
|
}
|
|
46
|
-
content.push(
|
|
82
|
+
content.push((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: separatorComponent }, `s${i}`));
|
|
47
83
|
}
|
|
48
84
|
}
|
|
49
85
|
}
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
let instance = new Countdown({
|
|
86
|
+
(0, react_1.useEffect)(() => {
|
|
87
|
+
let instance = new Countdown_1.Countdown({
|
|
52
88
|
format,
|
|
53
89
|
remain,
|
|
54
90
|
onUpdate(current) {
|
|
@@ -70,5 +106,5 @@ export function Countdowner(props) {
|
|
|
70
106
|
instance = null;
|
|
71
107
|
};
|
|
72
108
|
}, [format, remain]); // ← 移除 onUpdate 和 onEnd 依赖
|
|
73
|
-
return (
|
|
109
|
+
return ((0, jsx_runtime_1.jsx)(Row_1.RowStart, Object.assign({}, extra, { css: containerStyle, children: content })));
|
|
74
110
|
}
|
package/build/Dialog/Wrapper.js
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Wrapper = Wrapper;
|
|
4
|
+
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
5
|
+
const Overlay_1 = require("../Overlay");
|
|
6
|
+
const style_1 = require("./style");
|
|
7
|
+
function Wrapper(props) {
|
|
5
8
|
const { type = "center", status = "show", children, onHide, showMask = true, maskColor, maskStyle, boxStyle, onBlankClick, } = props;
|
|
6
|
-
const { animation, keyframes } = getAnimation(type, status);
|
|
9
|
+
const { animation, keyframes } = (0, style_1.getAnimation)(type, status);
|
|
7
10
|
// 选取特定的类型对应的样式
|
|
8
11
|
let boxCss = [
|
|
9
|
-
style.boxCss,
|
|
10
|
-
["pullUp", "pullDown", "pullLeft", "pullRight"].includes(type) ? style[type] : {}
|
|
12
|
+
style_1.style.boxCss,
|
|
13
|
+
["pullUp", "pullDown", "pullLeft", "pullRight"].includes(type) ? style_1.style[type] : {}
|
|
11
14
|
];
|
|
12
15
|
// 遮罩的样式
|
|
13
16
|
let maskCss = [
|
|
14
|
-
style.mask,
|
|
15
|
-
status === "show" ? style.maskShow : style.maskHide,
|
|
17
|
+
style_1.style.mask,
|
|
18
|
+
status === "show" ? style_1.style.maskShow : style_1.style.maskHide,
|
|
16
19
|
maskStyle,
|
|
17
20
|
maskColor ? { backgroundColor: maskColor } : {}
|
|
18
21
|
];
|
|
@@ -23,7 +26,7 @@ export function Wrapper(props) {
|
|
|
23
26
|
onBlankClick === null || onBlankClick === void 0 ? void 0 : onBlankClick(event);
|
|
24
27
|
}
|
|
25
28
|
};
|
|
26
|
-
return (
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)(Overlay_1.Overlay, { css: { overflow: "hidden" }, centerContent: type === "center", maskColor: "transparent", fullScreen: true, onClick: showMask ? undefined : blankClick, children: [showMask && (0, jsx_runtime_1.jsx)("div", { css: maskCss, onClick: blankClick }), (0, jsx_runtime_1.jsx)("div", { css: [boxCss, boxStyle, animation], onAnimationEnd: (event) => {
|
|
27
30
|
if (status === "hide" && event.animationName === keyframes.name) {
|
|
28
31
|
onHide === null || onHide === void 0 ? void 0 : onHide();
|
|
29
32
|
}
|
package/build/Dialog/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
3
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
4
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -7,22 +8,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
8
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
9
|
});
|
|
9
10
|
};
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
12
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
exports.showDialog = showDialog;
|
|
16
|
+
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const dom_1 = require("../utils/dom");
|
|
19
|
+
const Wrapper_1 = require("./Wrapper");
|
|
20
|
+
const isPlainObject_1 = __importDefault(require("lodash/isPlainObject"));
|
|
21
|
+
const omit_1 = __importDefault(require("lodash/omit"));
|
|
16
22
|
/**
|
|
17
23
|
* 显示一个对话框,出现和隐藏都带有动画效果
|
|
18
24
|
* @param option
|
|
19
25
|
* @returns
|
|
20
26
|
*/
|
|
21
|
-
|
|
22
|
-
const { mount, unmount } = createPortalDOM();
|
|
27
|
+
function showDialog(option) {
|
|
28
|
+
const { mount, unmount } = (0, dom_1.createPortalDOM)();
|
|
23
29
|
// 生成全部配置
|
|
24
30
|
let config = { status: 'show', blankClosable: false };
|
|
25
|
-
if (
|
|
31
|
+
if (react_1.default.isValidElement(option) || !(0, isPlainObject_1.default)(option)) {
|
|
26
32
|
config.content = option;
|
|
27
33
|
}
|
|
28
34
|
else {
|
|
@@ -33,7 +39,7 @@ export function showDialog(option) {
|
|
|
33
39
|
const children = config.content;
|
|
34
40
|
const onBlankClick = config.onBlankClick;
|
|
35
41
|
const onHide = config.onHide;
|
|
36
|
-
const props =
|
|
42
|
+
const props = (0, omit_1.default)(config, [
|
|
37
43
|
'blankClosable',
|
|
38
44
|
'content',
|
|
39
45
|
'onHide',
|
|
@@ -45,7 +51,7 @@ export function showDialog(option) {
|
|
|
45
51
|
unmount();
|
|
46
52
|
onHide === null || onHide === void 0 ? void 0 : onHide();
|
|
47
53
|
};
|
|
48
|
-
yield mount(
|
|
54
|
+
yield mount((0, jsx_runtime_1.jsx)(Wrapper_1.Wrapper, Object.assign({}, props, { children: children })));
|
|
49
55
|
});
|
|
50
56
|
// 空白处可点击关闭
|
|
51
57
|
if (blankClosable) {
|
|
@@ -55,7 +61,7 @@ export function showDialog(option) {
|
|
|
55
61
|
});
|
|
56
62
|
}
|
|
57
63
|
// 挂载容器对象
|
|
58
|
-
const amountShow = mount(
|
|
64
|
+
const amountShow = mount((0, jsx_runtime_1.jsx)(Wrapper_1.Wrapper, Object.assign({}, props, { children: children })));
|
|
59
65
|
return () => __awaiter(this, void 0, void 0, function* () {
|
|
60
66
|
// 关闭前确保容器已经被挂载
|
|
61
67
|
yield amountShow;
|
package/build/Dialog/style.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.style = exports.maskHide = void 0;
|
|
4
|
+
exports.getAnimation = getAnimation;
|
|
5
|
+
const react_1 = require("@emotion/react");
|
|
6
|
+
const maskShow = (0, react_1.keyframes) `
|
|
3
7
|
from {
|
|
4
8
|
opacity: 0;
|
|
5
9
|
}
|
|
@@ -7,7 +11,7 @@ const maskShow = keyframes `
|
|
|
7
11
|
opacity: 1;
|
|
8
12
|
}
|
|
9
13
|
`;
|
|
10
|
-
|
|
14
|
+
exports.maskHide = (0, react_1.keyframes) `
|
|
11
15
|
from {
|
|
12
16
|
opacity: 1;
|
|
13
17
|
}
|
|
@@ -15,7 +19,7 @@ export const maskHide = keyframes `
|
|
|
15
19
|
opacity: 0;
|
|
16
20
|
}
|
|
17
21
|
`;
|
|
18
|
-
const pullUpShow = keyframes `
|
|
22
|
+
const pullUpShow = (0, react_1.keyframes) `
|
|
19
23
|
from {
|
|
20
24
|
transform: translateY(100%);
|
|
21
25
|
}
|
|
@@ -23,7 +27,7 @@ const pullUpShow = keyframes `
|
|
|
23
27
|
transform: translateY(0);
|
|
24
28
|
}
|
|
25
29
|
`;
|
|
26
|
-
const pullUpHide = keyframes `
|
|
30
|
+
const pullUpHide = (0, react_1.keyframes) `
|
|
27
31
|
from {
|
|
28
32
|
transform: translateY(0);
|
|
29
33
|
}
|
|
@@ -31,7 +35,7 @@ const pullUpHide = keyframes `
|
|
|
31
35
|
transform: translateY(100%);
|
|
32
36
|
}
|
|
33
37
|
`;
|
|
34
|
-
const pullDownShow = keyframes `
|
|
38
|
+
const pullDownShow = (0, react_1.keyframes) `
|
|
35
39
|
from {
|
|
36
40
|
transform: translateY(-100%);
|
|
37
41
|
}
|
|
@@ -39,7 +43,7 @@ const pullDownShow = keyframes `
|
|
|
39
43
|
transform: translateY(0);
|
|
40
44
|
}
|
|
41
45
|
`;
|
|
42
|
-
const pullDownHide = keyframes `
|
|
46
|
+
const pullDownHide = (0, react_1.keyframes) `
|
|
43
47
|
from {
|
|
44
48
|
transform: translateY(0);
|
|
45
49
|
}
|
|
@@ -47,7 +51,7 @@ const pullDownHide = keyframes `
|
|
|
47
51
|
transform: translateY(-100%);
|
|
48
52
|
}
|
|
49
53
|
`;
|
|
50
|
-
const pullLeftShow = keyframes `
|
|
54
|
+
const pullLeftShow = (0, react_1.keyframes) `
|
|
51
55
|
from {
|
|
52
56
|
transform: translateX(100%);
|
|
53
57
|
}
|
|
@@ -55,7 +59,7 @@ const pullLeftShow = keyframes `
|
|
|
55
59
|
transform: translateX(0);
|
|
56
60
|
}
|
|
57
61
|
`;
|
|
58
|
-
const pullLeftHide = keyframes `
|
|
62
|
+
const pullLeftHide = (0, react_1.keyframes) `
|
|
59
63
|
from {
|
|
60
64
|
transform: translateX(0);
|
|
61
65
|
}
|
|
@@ -63,7 +67,7 @@ const pullLeftHide = keyframes `
|
|
|
63
67
|
transform: translateX(100%);
|
|
64
68
|
}
|
|
65
69
|
`;
|
|
66
|
-
const pullRightShow = keyframes `
|
|
70
|
+
const pullRightShow = (0, react_1.keyframes) `
|
|
67
71
|
from {
|
|
68
72
|
transform: translateX(-100%);
|
|
69
73
|
}
|
|
@@ -71,7 +75,7 @@ const pullRightShow = keyframes `
|
|
|
71
75
|
transform: translateX(0);
|
|
72
76
|
}
|
|
73
77
|
`;
|
|
74
|
-
const pullRightHide = keyframes `
|
|
78
|
+
const pullRightHide = (0, react_1.keyframes) `
|
|
75
79
|
from {
|
|
76
80
|
transform: translateX(0);
|
|
77
81
|
}
|
|
@@ -79,7 +83,7 @@ const pullRightHide = keyframes `
|
|
|
79
83
|
transform: translateX(-100%);
|
|
80
84
|
}
|
|
81
85
|
`;
|
|
82
|
-
const centerShow = keyframes `
|
|
86
|
+
const centerShow = (0, react_1.keyframes) `
|
|
83
87
|
from {
|
|
84
88
|
transform: scale(0.8);
|
|
85
89
|
opacity: 0;
|
|
@@ -89,7 +93,7 @@ const centerShow = keyframes `
|
|
|
89
93
|
opacity: 1;
|
|
90
94
|
}
|
|
91
95
|
`;
|
|
92
|
-
const centerHide = keyframes `
|
|
96
|
+
const centerHide = (0, react_1.keyframes) `
|
|
93
97
|
from {
|
|
94
98
|
transform: scale(1);
|
|
95
99
|
opacity: 1;
|
|
@@ -99,7 +103,7 @@ const centerHide = keyframes `
|
|
|
99
103
|
opacity: 0;
|
|
100
104
|
}
|
|
101
105
|
`;
|
|
102
|
-
|
|
106
|
+
function getAnimation(type, status) {
|
|
103
107
|
const animation = {
|
|
104
108
|
center: [centerShow, centerHide],
|
|
105
109
|
pullUp: [pullUpShow, pullUpHide],
|
|
@@ -116,19 +120,19 @@ export function getAnimation(type, status) {
|
|
|
116
120
|
}
|
|
117
121
|
return {
|
|
118
122
|
keyframes,
|
|
119
|
-
animation: css({
|
|
123
|
+
animation: (0, react_1.css)({
|
|
120
124
|
animation: `${keyframes} 300ms ease forwards`,
|
|
121
125
|
}),
|
|
122
126
|
};
|
|
123
127
|
}
|
|
124
|
-
|
|
125
|
-
maskShow: css({
|
|
128
|
+
exports.style = {
|
|
129
|
+
maskShow: (0, react_1.css)({
|
|
126
130
|
animation: `${maskShow} 300ms ease`,
|
|
127
131
|
}),
|
|
128
|
-
maskHide: css({
|
|
129
|
-
animation: `${maskHide} 300ms ease forwards`,
|
|
132
|
+
maskHide: (0, react_1.css)({
|
|
133
|
+
animation: `${exports.maskHide} 300ms ease forwards`,
|
|
130
134
|
}),
|
|
131
|
-
mask: css({
|
|
135
|
+
mask: (0, react_1.css)({
|
|
132
136
|
zIndex: 1,
|
|
133
137
|
position: "absolute",
|
|
134
138
|
left: 0,
|
|
@@ -137,28 +141,28 @@ export const style = {
|
|
|
137
141
|
height: "100%",
|
|
138
142
|
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
|
139
143
|
}),
|
|
140
|
-
boxCss: css({
|
|
144
|
+
boxCss: (0, react_1.css)({
|
|
141
145
|
zIndex: 2,
|
|
142
146
|
}),
|
|
143
|
-
pullUp: css({
|
|
147
|
+
pullUp: (0, react_1.css)({
|
|
144
148
|
position: "absolute",
|
|
145
149
|
left: 0,
|
|
146
150
|
bottom: 0,
|
|
147
151
|
width: "100%",
|
|
148
152
|
}),
|
|
149
|
-
pullDown: css({
|
|
153
|
+
pullDown: (0, react_1.css)({
|
|
150
154
|
position: "absolute",
|
|
151
155
|
left: 0,
|
|
152
156
|
top: 0,
|
|
153
157
|
width: "100%",
|
|
154
158
|
}),
|
|
155
|
-
pullLeft: css({
|
|
159
|
+
pullLeft: (0, react_1.css)({
|
|
156
160
|
position: "absolute",
|
|
157
161
|
right: 0,
|
|
158
162
|
top: 0,
|
|
159
163
|
height: "100%",
|
|
160
164
|
}),
|
|
161
|
-
pullRight: css({
|
|
165
|
+
pullRight: (0, react_1.css)({
|
|
162
166
|
position: "absolute",
|
|
163
167
|
left: 0,
|
|
164
168
|
top: 0,
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useInterval = useInterval;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
function useInterval(callback, delay) {
|
|
6
|
+
const savedCallback = (0, react_1.useRef)(callback);
|
|
4
7
|
savedCallback.current = callback;
|
|
5
|
-
useEffect(() => {
|
|
8
|
+
(0, react_1.useEffect)(() => {
|
|
6
9
|
if (delay !== null) {
|
|
7
10
|
const interval = setInterval(() => savedCallback.current(), delay || 0);
|
|
8
11
|
return () => clearInterval(interval);
|