mimir-ui-kit 1.8.0 → 1.9.0
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/{DatePickerModal-ByEDSY5o.js → DatePickerModal-DUUCHAWF.js} +17 -17
- package/dist/assets/DatePickerModal.css +1 -1
- package/dist/assets/SelectSearch.css +1 -1
- package/dist/assets/Timer.css +1 -0
- package/dist/components/DatePicker/DatePicker.d.ts +5 -5
- package/dist/components/DatePicker/DatePicker.js +1 -1
- package/dist/components/DatePicker/DatePickerModal.js +1 -1
- package/dist/components/DatePicker/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +2 -2
- package/dist/components/RadioGroup/RadioGroup.d.ts +18 -2
- package/dist/components/RadioGroup/RadioGroup.js +50 -44
- package/dist/components/RadioGroup/index.d.ts +1 -1
- package/dist/components/SelectSearch/SelectSearch.d.ts +10 -16
- package/dist/components/SelectSearch/SelectSearch.js +100 -104
- package/dist/components/SelectSearch/index.d.ts +1 -2
- package/dist/components/Switch/Switch.d.ts +293 -3
- package/dist/components/Switch/Switch.js +27 -22
- package/dist/components/Switch/index.d.ts +1 -1
- package/dist/components/Timer/Timer.d.ts +24 -0
- package/dist/components/Timer/Timer.js +29 -0
- package/dist/components/Timer/index.d.ts +1 -0
- package/dist/components/Timer/index.js +4 -0
- package/dist/components/index.d.ts +4 -3
- package/dist/components/index.js +2 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.js +5 -1
- package/dist/hooks/useInterval/index.d.ts +1 -0
- package/dist/hooks/useInterval/index.js +4 -0
- package/dist/hooks/useInterval/useInterval.d.ts +1 -0
- package/dist/hooks/useInterval/useInterval.js +17 -0
- package/dist/hooks/useTimer/index.d.ts +18 -0
- package/dist/hooks/useTimer/index.js +83 -0
- package/dist/hooks/useTimer/useTimer.d.ts +18 -0
- package/dist/hooks/useTimer/useTimer.js +83 -0
- package/dist/hooks/useTimer/utils.d.ts +20 -0
- package/dist/hooks/useTimer/utils.js +78 -0
- package/dist/index.js +7 -1
- package/package.json +1 -1
- package/dist/components/SelectSearch/types.d.ts +0 -17
- package/dist/components/SelectSearch/types.js +0 -1
- package/dist/components/Switch/types.d.ts +0 -4
- package/dist/components/Switch/types.js +0 -1
@@ -0,0 +1,83 @@
|
|
1
|
+
import { useState, useCallback } from "react";
|
2
|
+
import { Time, Validate } from "./utils.js";
|
3
|
+
import { useInterval } from "../useInterval/useInterval.js";
|
4
|
+
const DEFAULT_DELAY = 1e3;
|
5
|
+
function getDelayFromExpiryTimestamp(expiryTimestamp) {
|
6
|
+
if (!Validate.expiryTimestamp(expiryTimestamp)) {
|
7
|
+
return null;
|
8
|
+
}
|
9
|
+
const seconds = Time.getSecondsFromExpiry(expiryTimestamp);
|
10
|
+
const extraMilliSeconds = Math.floor((seconds - Math.floor(seconds)) * 1e3);
|
11
|
+
return extraMilliSeconds > 0 ? extraMilliSeconds : DEFAULT_DELAY;
|
12
|
+
}
|
13
|
+
function useTimer({
|
14
|
+
expiryTimestamp: expiry,
|
15
|
+
onExpire,
|
16
|
+
autoStart = true
|
17
|
+
}) {
|
18
|
+
const [expiryTimestamp, setExpiryTimestamp] = useState(expiry);
|
19
|
+
const [seconds, setSeconds] = useState(
|
20
|
+
Time.getSecondsFromExpiry(expiry ?? 0)
|
21
|
+
);
|
22
|
+
const [isRunning, setIsRunning] = useState(autoStart);
|
23
|
+
const [didStart, setDidStart] = useState(autoStart);
|
24
|
+
const [delay, setDelay] = useState(getDelayFromExpiryTimestamp(expiry ?? 0));
|
25
|
+
const handleExpire = useCallback(() => {
|
26
|
+
Validate.onExpire(onExpire) && (onExpire == null ? void 0 : onExpire());
|
27
|
+
setIsRunning(false);
|
28
|
+
setDelay(null);
|
29
|
+
}, [onExpire]);
|
30
|
+
const pause = useCallback(() => {
|
31
|
+
setIsRunning(false);
|
32
|
+
}, []);
|
33
|
+
const restart = useCallback(
|
34
|
+
(newExpiryTimestamp, newAutoStart = true) => {
|
35
|
+
setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp));
|
36
|
+
setDidStart(newAutoStart);
|
37
|
+
setIsRunning(newAutoStart);
|
38
|
+
setExpiryTimestamp(newExpiryTimestamp);
|
39
|
+
setSeconds(Time.getSecondsFromExpiry(newExpiryTimestamp));
|
40
|
+
},
|
41
|
+
[]
|
42
|
+
);
|
43
|
+
const resume = useCallback(() => {
|
44
|
+
const time = /* @__PURE__ */ new Date();
|
45
|
+
time.setMilliseconds(time.getMilliseconds() + seconds * 1e3);
|
46
|
+
restart(time.getTime(), true);
|
47
|
+
}, [seconds, restart]);
|
48
|
+
const start = useCallback(() => {
|
49
|
+
if (didStart) {
|
50
|
+
setSeconds(Time.getSecondsFromExpiry(expiryTimestamp ?? 0, false));
|
51
|
+
setIsRunning(true);
|
52
|
+
} else {
|
53
|
+
resume();
|
54
|
+
}
|
55
|
+
}, [expiryTimestamp, didStart, resume]);
|
56
|
+
useInterval(
|
57
|
+
() => {
|
58
|
+
if (delay !== DEFAULT_DELAY) {
|
59
|
+
setDelay(DEFAULT_DELAY);
|
60
|
+
}
|
61
|
+
const secondsValue = Time.getSecondsFromExpiry(
|
62
|
+
expiryTimestamp ?? 0,
|
63
|
+
false
|
64
|
+
);
|
65
|
+
setSeconds(secondsValue);
|
66
|
+
if (secondsValue <= 0) {
|
67
|
+
handleExpire();
|
68
|
+
}
|
69
|
+
},
|
70
|
+
isRunning ? delay : null
|
71
|
+
);
|
72
|
+
return {
|
73
|
+
...Time.getTimeFromSeconds(seconds),
|
74
|
+
start,
|
75
|
+
pause,
|
76
|
+
resume,
|
77
|
+
restart,
|
78
|
+
isRunning
|
79
|
+
};
|
80
|
+
}
|
81
|
+
export {
|
82
|
+
useTimer
|
83
|
+
};
|
@@ -0,0 +1,20 @@
|
|
1
|
+
type TTimeObject = {
|
2
|
+
totalSeconds: number;
|
3
|
+
days: number;
|
4
|
+
hours: number;
|
5
|
+
minutes: number;
|
6
|
+
seconds: number;
|
7
|
+
};
|
8
|
+
type TFormattedTime = Omit<TTimeObject, 'totalSeconds' | 'days'>;
|
9
|
+
export declare class Time {
|
10
|
+
static getTimeFromSeconds(secs: number): TTimeObject;
|
11
|
+
static getSecondsFromExpiry(expiry: number, shouldRound?: boolean): number;
|
12
|
+
static getSecondsFromPrevTime(prevTime: number, shouldRound: boolean): number;
|
13
|
+
static getSecondsFromTimeNow(): number;
|
14
|
+
static getFormattedTimeFromSeconds(totalSeconds: number): TFormattedTime;
|
15
|
+
}
|
16
|
+
export declare class Validate {
|
17
|
+
static expiryTimestamp(expiryTimestamp: number): boolean;
|
18
|
+
static onExpire(onExpire?: VoidFunction | null): boolean | null | undefined;
|
19
|
+
}
|
20
|
+
export {};
|
@@ -0,0 +1,78 @@
|
|
1
|
+
class Time {
|
2
|
+
static getTimeFromSeconds(secs) {
|
3
|
+
const totalSeconds = Math.ceil(secs);
|
4
|
+
const days = Math.floor(totalSeconds / (60 * 60 * 24));
|
5
|
+
const hours = Math.floor(totalSeconds % (60 * 60 * 24) / (60 * 60));
|
6
|
+
const minutes = Math.floor(totalSeconds % (60 * 60) / 60);
|
7
|
+
const seconds = Math.floor(totalSeconds % 60);
|
8
|
+
return {
|
9
|
+
totalSeconds,
|
10
|
+
seconds,
|
11
|
+
minutes,
|
12
|
+
hours,
|
13
|
+
days
|
14
|
+
};
|
15
|
+
}
|
16
|
+
static getSecondsFromExpiry(expiry, shouldRound) {
|
17
|
+
const now = (/* @__PURE__ */ new Date()).getTime();
|
18
|
+
const milliSecondsDistance = expiry - now;
|
19
|
+
if (milliSecondsDistance > 0) {
|
20
|
+
const val = milliSecondsDistance / 1e3;
|
21
|
+
return shouldRound ? Math.round(val) : val;
|
22
|
+
}
|
23
|
+
return 0;
|
24
|
+
}
|
25
|
+
static getSecondsFromPrevTime(prevTime, shouldRound) {
|
26
|
+
const now = (/* @__PURE__ */ new Date()).getTime();
|
27
|
+
const milliSecondsDistance = now - prevTime;
|
28
|
+
if (milliSecondsDistance > 0) {
|
29
|
+
const val = milliSecondsDistance / 1e3;
|
30
|
+
return shouldRound ? Math.round(val) : val;
|
31
|
+
}
|
32
|
+
return 0;
|
33
|
+
}
|
34
|
+
static getSecondsFromTimeNow() {
|
35
|
+
const now = /* @__PURE__ */ new Date();
|
36
|
+
const currentTimestamp = now.getTime();
|
37
|
+
const offset = now.getTimezoneOffset() * 60;
|
38
|
+
return currentTimestamp / 1e3 - offset;
|
39
|
+
}
|
40
|
+
static getFormattedTimeFromSeconds(totalSeconds) {
|
41
|
+
const {
|
42
|
+
seconds: secondsValue,
|
43
|
+
minutes,
|
44
|
+
hours
|
45
|
+
} = Time.getTimeFromSeconds(totalSeconds);
|
46
|
+
return {
|
47
|
+
seconds: secondsValue,
|
48
|
+
minutes,
|
49
|
+
hours
|
50
|
+
};
|
51
|
+
}
|
52
|
+
}
|
53
|
+
class Validate {
|
54
|
+
static expiryTimestamp(expiryTimestamp) {
|
55
|
+
const isValid = new Date(expiryTimestamp).getTime() > 0;
|
56
|
+
if (!isValid) {
|
57
|
+
console.warn(
|
58
|
+
"{ useTimer } Invalid expiryTimestamp settings",
|
59
|
+
expiryTimestamp
|
60
|
+
);
|
61
|
+
}
|
62
|
+
return isValid;
|
63
|
+
}
|
64
|
+
static onExpire(onExpire) {
|
65
|
+
const isValid = onExpire && typeof onExpire === "function";
|
66
|
+
if (onExpire && !isValid) {
|
67
|
+
console.warn(
|
68
|
+
" { useTimer } Invalid onExpire settings function",
|
69
|
+
onExpire
|
70
|
+
);
|
71
|
+
}
|
72
|
+
return isValid;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
export {
|
76
|
+
Time,
|
77
|
+
Validate
|
78
|
+
};
|
package/dist/index.js
CHANGED
@@ -22,9 +22,12 @@ import { EVoteSize } from "./components/Vote/constants.js";
|
|
22
22
|
import { SelectSearch } from "./components/SelectSearch/SelectSearch.js";
|
23
23
|
import { ESelectSearchSize } from "./components/SelectSearch/constants.js";
|
24
24
|
import { Switch } from "./components/Switch/Switch.js";
|
25
|
+
import { Timer } from "./components/Timer/Timer.js";
|
25
26
|
import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
|
26
27
|
import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
|
27
28
|
import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
|
29
|
+
import { useInterval } from "./hooks/useInterval/useInterval.js";
|
30
|
+
import { useTimer } from "./hooks/useTimer/index.js";
|
28
31
|
import { Icon } from "./icons/Icon.js";
|
29
32
|
import { formating } from "./utils/index.js";
|
30
33
|
import './assets/index.css';export {
|
@@ -58,10 +61,13 @@ import './assets/index.css';export {
|
|
58
61
|
Slider,
|
59
62
|
Steps,
|
60
63
|
Switch,
|
64
|
+
Timer,
|
61
65
|
Vote,
|
62
66
|
formating,
|
63
67
|
getMaskedInputPhoneValue,
|
64
68
|
getUnmaskedInputValue,
|
69
|
+
useInterval,
|
65
70
|
useLockBodyScroll,
|
66
|
-
useMediaQuery
|
71
|
+
useMediaQuery,
|
72
|
+
useTimer
|
67
73
|
};
|
package/package.json
CHANGED
@@ -1,17 +0,0 @@
|
|
1
|
-
import { ESelectSearchSize } from './constants';
|
2
|
-
|
3
|
-
export type TSelectSearchItem = {
|
4
|
-
id: number;
|
5
|
-
name: string;
|
6
|
-
};
|
7
|
-
export type TSelectSearchProps = {
|
8
|
-
items: TSelectSearchItem[];
|
9
|
-
value?: TSelectSearchItem | null;
|
10
|
-
onChange?: (value: TSelectSearchItem | null) => void;
|
11
|
-
placeholder?: string;
|
12
|
-
size?: TSelectSearchSize;
|
13
|
-
full?: boolean;
|
14
|
-
};
|
15
|
-
export type TSelectSearchSize = {
|
16
|
-
size?: ESelectSearchSize;
|
17
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
|
@@ -1 +0,0 @@
|
|
1
|
-
|