@nutui/nutui-react 1.1.3-beta.1 → 1.1.3-beta.2
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/dist/esm/CountDown/style/index.js +2 -0
- package/dist/esm/CountDown.js +217 -0
- package/dist/esm/Dialog.js +18 -10
- package/dist/esm/nutui-react.es.js +1 -0
- package/dist/nutui.react.es.js +363 -150
- package/dist/nutui.react.umd.js +17 -17
- package/dist/packages/countdown/countdown.scss +3 -0
- package/dist/style.css +1 -1
- package/dist/style.es.js +1 -1
- package/dist/styles/themes/default.scss +1 -0
- package/dist/types/button/__test__/button.spec.d.ts +1 -0
- package/dist/types/countdown/countdown.d.ts +15 -0
- package/dist/types/countdown/index.d.ts +2 -0
- package/dist/types/dialog/DialogWrap.d.ts +2 -2
- package/dist/types/dialog/DialogWrapper.d.ts +3 -0
- package/dist/types/dialog/config.d.ts +1 -1
- package/dist/types/nutui.react.d.ts +2 -1
- package/package.json +11 -2
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["showPlainText", "showDays", "paused", "startTime", "endTime", "className", "style", "onEnd", "onPaused", "onRestart", "onUpdate", "children"];
|
|
5
|
+
|
|
6
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
|
+
|
|
8
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
9
|
+
|
|
10
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
11
|
+
import { c as cn } from './bem-893ad28d.js';
|
|
12
|
+
import '@bem-react/classname';
|
|
13
|
+
var defaultProps = {
|
|
14
|
+
showPlainText: false,
|
|
15
|
+
showDays: false,
|
|
16
|
+
paused: false,
|
|
17
|
+
startTime: Date.now(),
|
|
18
|
+
endTime: Date.now()
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
var CountDown = function CountDown(props) {
|
|
22
|
+
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
|
|
23
|
+
showPlainText = _defaultProps$props.showPlainText,
|
|
24
|
+
showDays = _defaultProps$props.showDays,
|
|
25
|
+
paused = _defaultProps$props.paused,
|
|
26
|
+
startTime = _defaultProps$props.startTime,
|
|
27
|
+
endTime = _defaultProps$props.endTime,
|
|
28
|
+
className = _defaultProps$props.className,
|
|
29
|
+
style = _defaultProps$props.style,
|
|
30
|
+
onEnd = _defaultProps$props.onEnd,
|
|
31
|
+
onPaused = _defaultProps$props.onPaused,
|
|
32
|
+
onRestart = _defaultProps$props.onRestart,
|
|
33
|
+
onUpdate = _defaultProps$props.onUpdate,
|
|
34
|
+
children = _defaultProps$props.children,
|
|
35
|
+
rest = _objectWithoutProperties(_defaultProps$props, _excluded);
|
|
36
|
+
|
|
37
|
+
var b = cn('countdown');
|
|
38
|
+
|
|
39
|
+
var _useState = useState(0),
|
|
40
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
41
|
+
restTimeStamp = _useState2[0],
|
|
42
|
+
setRestTime = _useState2[1];
|
|
43
|
+
|
|
44
|
+
var stateRef = useRef({
|
|
45
|
+
pauseTime: 0,
|
|
46
|
+
curr: 0,
|
|
47
|
+
timer: 0,
|
|
48
|
+
isPaused: paused,
|
|
49
|
+
isIninted: false
|
|
50
|
+
}); // 补0操作
|
|
51
|
+
|
|
52
|
+
var fill2 = function fill2(v) {
|
|
53
|
+
v += '';
|
|
54
|
+
|
|
55
|
+
while (v.length < 2) {
|
|
56
|
+
v = '0' + v;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
return v;
|
|
60
|
+
}; // 倒计时数据
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
var restTime = function restTime(t) {
|
|
64
|
+
var ts = t;
|
|
65
|
+
var rest = {
|
|
66
|
+
d: '-',
|
|
67
|
+
h: '--',
|
|
68
|
+
m: '--',
|
|
69
|
+
s: '--'
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
if (ts === 0) {
|
|
73
|
+
rest = {
|
|
74
|
+
d: '0',
|
|
75
|
+
h: '00',
|
|
76
|
+
m: '00',
|
|
77
|
+
s: '00'
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if (ts) {
|
|
82
|
+
var ds = 24 * 60 * 60 * 1000;
|
|
83
|
+
var hs = 60 * 60 * 1000;
|
|
84
|
+
var ms = 60 * 1000;
|
|
85
|
+
var d = ts >= ds ? parseInt(String(ts / ds)) : 0;
|
|
86
|
+
var h = ts - d * ds >= hs ? parseInt(String((ts - d * ds) / hs)) : 0;
|
|
87
|
+
var m = ts - d * ds - h * hs >= ms ? parseInt(String((ts - d * ds - h * hs) / ms)) : 0;
|
|
88
|
+
var s = Math.round((ts - d * ds - h * hs - m * ms) / 1000);
|
|
89
|
+
if (d >= 0) rest.d = d + '';
|
|
90
|
+
if (h >= 0) rest.h = fill2(h);
|
|
91
|
+
if (m >= 0) rest.m = fill2(m);
|
|
92
|
+
if (s >= 0) rest.s = fill2(s);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
return rest;
|
|
96
|
+
}; // 倒计最终时格式数据
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
var resttime = function () {
|
|
100
|
+
var rest = restTime(restTimeStamp);
|
|
101
|
+
var d = rest.d;
|
|
102
|
+
|
|
103
|
+
if (!showDays && Number(d) > 0) {
|
|
104
|
+
rest.h = fill2(Number(rest.h) + Number(d) * 24);
|
|
105
|
+
rest.d = '0';
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
return rest;
|
|
109
|
+
}(); // 获取时间戳
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
var getTimeStamp = function getTimeStamp(timeStr) {
|
|
113
|
+
if (!timeStr) return Date.now();
|
|
114
|
+
var t = timeStr;
|
|
115
|
+
t = t > 0 ? +t : t.toString().replace(/\-/g, '/');
|
|
116
|
+
return new Date(t).getTime();
|
|
117
|
+
}; // 展示文案
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
var plainText = function () {
|
|
121
|
+
var d = resttime.d,
|
|
122
|
+
h = resttime.h,
|
|
123
|
+
m = resttime.m,
|
|
124
|
+
s = resttime.s;
|
|
125
|
+
var showDayshours = Number(d) > 0 && showDays ? "".concat(d, "\u5929").concat(h) : h;
|
|
126
|
+
return "".concat(showDayshours, "\u5C0F\u65F6").concat(m, "\u5206").concat(s, "\u79D2");
|
|
127
|
+
}(); // 初始化
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
var initTimer = function initTimer() {
|
|
131
|
+
if (!stateRef.current.isIninted) {
|
|
132
|
+
stateRef.current.isIninted = true;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
var delay = 1000;
|
|
136
|
+
var curr = Date.now();
|
|
137
|
+
var start = getTimeStamp(startTime || curr);
|
|
138
|
+
var end = getTimeStamp(endTime || curr);
|
|
139
|
+
var diffTime = curr - start;
|
|
140
|
+
setRestTime(end - (start + diffTime));
|
|
141
|
+
stateRef.current.timer = setInterval(function () {
|
|
142
|
+
if (!stateRef.current.isPaused) {
|
|
143
|
+
var _restTime = end - (Date.now() - stateRef.current.pauseTime + diffTime);
|
|
144
|
+
|
|
145
|
+
setRestTime(_restTime);
|
|
146
|
+
|
|
147
|
+
if (_restTime < 0) {
|
|
148
|
+
setRestTime(0);
|
|
149
|
+
onEnd && onEnd();
|
|
150
|
+
clearInterval(stateRef.current.timer);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}, delay);
|
|
154
|
+
}; // 监听值变更
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
useEffect(function () {
|
|
158
|
+
if (onUpdate) {
|
|
159
|
+
var tranTime = restTime(restTimeStamp);
|
|
160
|
+
onUpdate(tranTime);
|
|
161
|
+
}
|
|
162
|
+
}, [restTimeStamp]); // 监听暂停
|
|
163
|
+
|
|
164
|
+
useEffect(function () {
|
|
165
|
+
if (stateRef.current.isIninted) {
|
|
166
|
+
stateRef.current.isPaused = paused;
|
|
167
|
+
|
|
168
|
+
if (paused) {
|
|
169
|
+
stateRef.current.curr = getTimeStamp();
|
|
170
|
+
onPaused && onPaused(restTimeStamp);
|
|
171
|
+
} else {
|
|
172
|
+
stateRef.current.pauseTime += getTimeStamp() - stateRef.current.curr;
|
|
173
|
+
onRestart && onRestart(restTimeStamp);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}, [paused]); // 监听开始结束时间变更
|
|
177
|
+
|
|
178
|
+
useEffect(function () {
|
|
179
|
+
if (stateRef.current.isIninted) {
|
|
180
|
+
initTimer();
|
|
181
|
+
}
|
|
182
|
+
}, [endTime, startTime]); // 初始化
|
|
183
|
+
|
|
184
|
+
useEffect(function () {
|
|
185
|
+
initTimer();
|
|
186
|
+
return componentWillUnmount;
|
|
187
|
+
}, []);
|
|
188
|
+
|
|
189
|
+
var componentWillUnmount = function componentWillUnmount() {
|
|
190
|
+
clearInterval(stateRef.current.timer);
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
return React__default.createElement("div", _objectSpread({
|
|
194
|
+
className: "".concat(b(), " ").concat(className || ''),
|
|
195
|
+
style: _objectSpread({}, style)
|
|
196
|
+
}, rest), children || React__default.createElement(React__default.Fragment, null, showPlainText ? React__default.createElement("div", {
|
|
197
|
+
className: b('block')
|
|
198
|
+
}, " ", plainText, " ") : React__default.createElement(React__default.Fragment, null, Number(resttime.d) >= 0 && showDays ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
|
199
|
+
className: b('block')
|
|
200
|
+
}, resttime.d), React__default.createElement("div", {
|
|
201
|
+
className: b('dot')
|
|
202
|
+
}, "\u5929")) : null, React__default.createElement("div", {
|
|
203
|
+
className: b('block')
|
|
204
|
+
}, resttime.h), React__default.createElement("div", {
|
|
205
|
+
className: b('dot')
|
|
206
|
+
}, ":"), React__default.createElement("div", {
|
|
207
|
+
className: b('block')
|
|
208
|
+
}, resttime.m), React__default.createElement("div", {
|
|
209
|
+
className: b('dot')
|
|
210
|
+
}, ":"), React__default.createElement("div", {
|
|
211
|
+
className: b('block')
|
|
212
|
+
}, resttime.s))));
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
CountDown.defaultProps = defaultProps;
|
|
216
|
+
CountDown.displayName = 'NutCountDown';
|
|
217
|
+
export { CountDown as default };
|
package/dist/esm/Dialog.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
var _excluded = ["visible", "footer", "noOkBtn", "noCancelBtn", "okBtnDisabled", "cancelAutoClose"];
|
|
3
|
+
var _excluded = ["visible", "footer", "noOkBtn", "noCancelBtn", "lockScroll", "okBtnDisabled", "cancelAutoClose", "okText", "cancelText", "onClosed", "onCancel", "onOk"];
|
|
4
4
|
|
|
5
5
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
6
|
|
|
@@ -103,7 +103,13 @@ var DialogWrap = function DialogWrap(props) {
|
|
|
103
103
|
DialogWrap.displayName = 'NutDialogWrap';
|
|
104
104
|
|
|
105
105
|
var DialogWrapper = function DialogWrapper(props) {
|
|
106
|
-
var visible = props.visible
|
|
106
|
+
var visible = props.visible,
|
|
107
|
+
lockScroll = props.lockScroll;
|
|
108
|
+
|
|
109
|
+
if (lockScroll && !visible && document.body.classList.value.includes('nut-overflow-hidden')) {
|
|
110
|
+
document.body.classList.remove('nut-overflow-hidden');
|
|
111
|
+
}
|
|
112
|
+
|
|
107
113
|
return React__default.createElement("div", {
|
|
108
114
|
style: {
|
|
109
115
|
display: visible ? 'block' : 'none'
|
|
@@ -247,18 +253,17 @@ var BaseDialog = function BaseDialog(props, ref) {
|
|
|
247
253
|
footer = props.footer,
|
|
248
254
|
noOkBtn = props.noOkBtn,
|
|
249
255
|
noCancelBtn = props.noCancelBtn,
|
|
256
|
+
lockScroll = props.lockScroll,
|
|
250
257
|
okBtnDisabled = props.okBtnDisabled,
|
|
251
258
|
cancelAutoClose = props.cancelAutoClose,
|
|
259
|
+
okText = props.okText,
|
|
260
|
+
cancelText = props.cancelText,
|
|
261
|
+
onClosed = props.onClosed,
|
|
262
|
+
onCancel = props.onCancel,
|
|
263
|
+
onOk = props.onOk,
|
|
252
264
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
253
265
|
|
|
254
266
|
var renderFooter = function renderFooter() {
|
|
255
|
-
var okText = props.okText,
|
|
256
|
-
cancelText = props.cancelText,
|
|
257
|
-
footer = props.footer,
|
|
258
|
-
lockScroll = props.lockScroll,
|
|
259
|
-
onClosed = props.onClosed,
|
|
260
|
-
onCancel = props.onCancel,
|
|
261
|
-
onOk = props.onOk;
|
|
262
267
|
if (footer === null) return;
|
|
263
268
|
|
|
264
269
|
var handleCancel = function handleCancel(e) {
|
|
@@ -304,7 +309,10 @@ var BaseDialog = function BaseDialog(props, ref) {
|
|
|
304
309
|
|
|
305
310
|
return React__default.createElement(DialogWrapper, _objectSpread(_objectSpread({}, restProps), {}, {
|
|
306
311
|
visible: visible,
|
|
307
|
-
|
|
312
|
+
lockScroll: lockScroll,
|
|
313
|
+
footer: renderFooter(),
|
|
314
|
+
onClosed: onClosed,
|
|
315
|
+
onCancel: onCancel
|
|
308
316
|
}));
|
|
309
317
|
};
|
|
310
318
|
|
|
@@ -51,6 +51,7 @@ export { default as Badge } from './Badge.js';
|
|
|
51
51
|
export { default as Tag } from './Tag.js';
|
|
52
52
|
export { default as Popover } from './Popover.js';
|
|
53
53
|
export { default as Skeleton } from './Skeleton.js';
|
|
54
|
+
export { default as CountDown } from './CountDown.js';
|
|
54
55
|
export { default as Collapse } from './Collapse.js';
|
|
55
56
|
export { default as CollapseItem } from './CollapseItem.js';
|
|
56
57
|
export { default as AnimatingNumbers } from './AnimatingNumbers.js';
|