@grupalia/rn-ui-kit 0.9.0 → 0.9.1
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/lib/commonjs/components/BaseButton.js +34 -3
- package/lib/commonjs/components/BaseButton.js.map +1 -1
- package/lib/module/components/BaseButton.js +34 -3
- package/lib/module/components/BaseButton.js.map +1 -1
- package/lib/typescript/commonjs/components/BaseButton.d.ts +1 -0
- package/lib/typescript/commonjs/components/BaseButton.d.ts.map +1 -1
- package/lib/typescript/module/components/BaseButton.d.ts +1 -0
- package/lib/typescript/module/components/BaseButton.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/BaseButton.tsx +40 -2
|
@@ -23,13 +23,17 @@ function BaseButton({
|
|
|
23
23
|
rightIcon = null,
|
|
24
24
|
hitSlop = 6,
|
|
25
25
|
countdownSecs = 0,
|
|
26
|
+
debounceSecs = 0,
|
|
27
|
+
onPress,
|
|
26
28
|
...props
|
|
27
29
|
}) {
|
|
28
30
|
const [timer, setTimer] = _react.default.useState(countdownSecs);
|
|
31
|
+
const [timerUsed, setTimerUsed] = _react.default.useState(false);
|
|
32
|
+
const [debounce, setDebounce] = _react.default.useState(0);
|
|
29
33
|
const [isDisabled, setIsDisabled] = _react.default.useState(disabled || countdownSecs > 0);
|
|
30
34
|
_react.default.useEffect(() => {
|
|
31
35
|
let intervalId;
|
|
32
|
-
if (countdownSecs > 0) {
|
|
36
|
+
if (countdownSecs > 0 && !timerUsed) {
|
|
33
37
|
setIsDisabled(true);
|
|
34
38
|
setTimer(countdownSecs);
|
|
35
39
|
intervalId = setInterval(() => {
|
|
@@ -37,6 +41,7 @@ function BaseButton({
|
|
|
37
41
|
if (prevTimer <= 1) {
|
|
38
42
|
clearInterval(intervalId);
|
|
39
43
|
setIsDisabled(Boolean(disabled));
|
|
44
|
+
setTimerUsed(true);
|
|
40
45
|
return 0;
|
|
41
46
|
}
|
|
42
47
|
return prevTimer - 1;
|
|
@@ -48,7 +53,32 @@ function BaseButton({
|
|
|
48
53
|
return () => {
|
|
49
54
|
if (intervalId) clearInterval(intervalId);
|
|
50
55
|
};
|
|
51
|
-
}, [countdownSecs, disabled]);
|
|
56
|
+
}, [countdownSecs, disabled, timerUsed]);
|
|
57
|
+
_react.default.useEffect(() => {
|
|
58
|
+
let timeout;
|
|
59
|
+
if (debounce > 0) {
|
|
60
|
+
setIsDisabled(true);
|
|
61
|
+
timeout = setTimeout(() => {
|
|
62
|
+
setDebounce(prev => {
|
|
63
|
+
if (prev <= 1) {
|
|
64
|
+
setIsDisabled(false);
|
|
65
|
+
return 0;
|
|
66
|
+
}
|
|
67
|
+
return prev - 1;
|
|
68
|
+
});
|
|
69
|
+
}, 1000);
|
|
70
|
+
}
|
|
71
|
+
return () => {
|
|
72
|
+
if (timeout) clearTimeout(timeout);
|
|
73
|
+
};
|
|
74
|
+
}, [debounce, disabled]);
|
|
75
|
+
function handleOnPress(e) {
|
|
76
|
+
onPress?.(e);
|
|
77
|
+
if (debounceSecs) {
|
|
78
|
+
setDebounce(debounceSecs);
|
|
79
|
+
setIsDisabled(true);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
52
82
|
const sizeClasses = {
|
|
53
83
|
xs: 'rounded-md h-7 px-4',
|
|
54
84
|
sm: 'rounded-md h-8 px-4',
|
|
@@ -211,6 +241,7 @@ function BaseButton({
|
|
|
211
241
|
disabled: isDisabled || loading,
|
|
212
242
|
className: buttonStyles,
|
|
213
243
|
hitSlop: hitSlop,
|
|
244
|
+
onPress: e => handleOnPress(e),
|
|
214
245
|
...props,
|
|
215
246
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_hocComponents.View, {
|
|
216
247
|
className: (0, _clsx.default)('flex flex-row items-center justify-center', loading && 'opacity-0'),
|
|
@@ -221,7 +252,7 @@ function BaseButton({
|
|
|
221
252
|
className: isIconOnly ? '' : 'mr-1.5'
|
|
222
253
|
}), text && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hocComponents.Text, {
|
|
223
254
|
className: textStyles,
|
|
224
|
-
children: [text, timer > 0 ? ` (${timer})` : '']
|
|
255
|
+
children: [text, timer > 0 ? ` (${timer})` : '', debounce > 0 ? ` (${debounce})` : '']
|
|
225
256
|
}), rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseIcon.default, {
|
|
226
257
|
icon: rightIcon,
|
|
227
258
|
size: iconSizes[size],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_clsx","_interopRequireDefault","require","_nativewind","_react","_hocComponents","_BaseIcon","_PressableOpacity","_jsxRuntime","e","__esModule","default","BaseButton","variant","size","text","loading","disabled","destructive","leftIcon","rightIcon","hitSlop","countdownSecs","props","timer","setTimer","React","useState","isDisabled","setIsDisabled","useEffect","intervalId","setInterval","prevTimer","clearInterval","Boolean","sizeClasses","xs","sm","md","lg","xl","iconOnlyClasses","containerClasses","primary","secondary","tertiary","textColorClasses","textSizeClasses","iconSizes","buttonState","isIconOnly","buttonStyles","clsx","textStyles","iconColors","spinnerColorMap","spinnerColor","jsxs","className","children","View","jsx","icon","color","Text","ActivityIndicator","style","position","top","left","right","bottom","justifyContent","alignItems","_default","exports","styled"],"sourceRoot":"../../../src","sources":["components/BaseButton.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;
|
|
1
|
+
{"version":3,"names":["_clsx","_interopRequireDefault","require","_nativewind","_react","_hocComponents","_BaseIcon","_PressableOpacity","_jsxRuntime","e","__esModule","default","BaseButton","variant","size","text","loading","disabled","destructive","leftIcon","rightIcon","hitSlop","countdownSecs","debounceSecs","onPress","props","timer","setTimer","React","useState","timerUsed","setTimerUsed","debounce","setDebounce","isDisabled","setIsDisabled","useEffect","intervalId","setInterval","prevTimer","clearInterval","Boolean","timeout","setTimeout","prev","clearTimeout","handleOnPress","sizeClasses","xs","sm","md","lg","xl","iconOnlyClasses","containerClasses","primary","secondary","tertiary","textColorClasses","textSizeClasses","iconSizes","buttonState","isIconOnly","buttonStyles","clsx","textStyles","iconColors","spinnerColorMap","spinnerColor","jsxs","className","children","View","jsx","icon","color","Text","ActivityIndicator","style","position","top","left","right","bottom","justifyContent","alignItems","_default","exports","styled"],"sourceRoot":"../../../src","sources":["components/BaseButton.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -18,13 +18,17 @@ function BaseButton({
|
|
|
18
18
|
rightIcon = null,
|
|
19
19
|
hitSlop = 6,
|
|
20
20
|
countdownSecs = 0,
|
|
21
|
+
debounceSecs = 0,
|
|
22
|
+
onPress,
|
|
21
23
|
...props
|
|
22
24
|
}) {
|
|
23
25
|
const [timer, setTimer] = React.useState(countdownSecs);
|
|
26
|
+
const [timerUsed, setTimerUsed] = React.useState(false);
|
|
27
|
+
const [debounce, setDebounce] = React.useState(0);
|
|
24
28
|
const [isDisabled, setIsDisabled] = React.useState(disabled || countdownSecs > 0);
|
|
25
29
|
React.useEffect(() => {
|
|
26
30
|
let intervalId;
|
|
27
|
-
if (countdownSecs > 0) {
|
|
31
|
+
if (countdownSecs > 0 && !timerUsed) {
|
|
28
32
|
setIsDisabled(true);
|
|
29
33
|
setTimer(countdownSecs);
|
|
30
34
|
intervalId = setInterval(() => {
|
|
@@ -32,6 +36,7 @@ function BaseButton({
|
|
|
32
36
|
if (prevTimer <= 1) {
|
|
33
37
|
clearInterval(intervalId);
|
|
34
38
|
setIsDisabled(Boolean(disabled));
|
|
39
|
+
setTimerUsed(true);
|
|
35
40
|
return 0;
|
|
36
41
|
}
|
|
37
42
|
return prevTimer - 1;
|
|
@@ -43,7 +48,32 @@ function BaseButton({
|
|
|
43
48
|
return () => {
|
|
44
49
|
if (intervalId) clearInterval(intervalId);
|
|
45
50
|
};
|
|
46
|
-
}, [countdownSecs, disabled]);
|
|
51
|
+
}, [countdownSecs, disabled, timerUsed]);
|
|
52
|
+
React.useEffect(() => {
|
|
53
|
+
let timeout;
|
|
54
|
+
if (debounce > 0) {
|
|
55
|
+
setIsDisabled(true);
|
|
56
|
+
timeout = setTimeout(() => {
|
|
57
|
+
setDebounce(prev => {
|
|
58
|
+
if (prev <= 1) {
|
|
59
|
+
setIsDisabled(false);
|
|
60
|
+
return 0;
|
|
61
|
+
}
|
|
62
|
+
return prev - 1;
|
|
63
|
+
});
|
|
64
|
+
}, 1000);
|
|
65
|
+
}
|
|
66
|
+
return () => {
|
|
67
|
+
if (timeout) clearTimeout(timeout);
|
|
68
|
+
};
|
|
69
|
+
}, [debounce, disabled]);
|
|
70
|
+
function handleOnPress(e) {
|
|
71
|
+
onPress?.(e);
|
|
72
|
+
if (debounceSecs) {
|
|
73
|
+
setDebounce(debounceSecs);
|
|
74
|
+
setIsDisabled(true);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
47
77
|
const sizeClasses = {
|
|
48
78
|
xs: 'rounded-md h-7 px-4',
|
|
49
79
|
sm: 'rounded-md h-8 px-4',
|
|
@@ -206,6 +236,7 @@ function BaseButton({
|
|
|
206
236
|
disabled: isDisabled || loading,
|
|
207
237
|
className: buttonStyles,
|
|
208
238
|
hitSlop: hitSlop,
|
|
239
|
+
onPress: e => handleOnPress(e),
|
|
209
240
|
...props,
|
|
210
241
|
children: [/*#__PURE__*/_jsxs(View, {
|
|
211
242
|
className: clsx('flex flex-row items-center justify-center', loading && 'opacity-0'),
|
|
@@ -216,7 +247,7 @@ function BaseButton({
|
|
|
216
247
|
className: isIconOnly ? '' : 'mr-1.5'
|
|
217
248
|
}), text && /*#__PURE__*/_jsxs(Text, {
|
|
218
249
|
className: textStyles,
|
|
219
|
-
children: [text, timer > 0 ? ` (${timer})` : '']
|
|
250
|
+
children: [text, timer > 0 ? ` (${timer})` : '', debounce > 0 ? ` (${debounce})` : '']
|
|
220
251
|
}), rightIcon && /*#__PURE__*/_jsx(BaseIcon, {
|
|
221
252
|
icon: rightIcon,
|
|
222
253
|
size: iconSizes[size],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["clsx","styled","React","Text","View","ActivityIndicator","BaseIcon","PressableOpacity","jsx","_jsx","jsxs","_jsxs","BaseButton","variant","size","text","loading","disabled","destructive","leftIcon","rightIcon","hitSlop","countdownSecs","props","timer","setTimer","useState","isDisabled","setIsDisabled","useEffect","intervalId","setInterval","prevTimer","clearInterval","Boolean","sizeClasses","xs","sm","md","lg","xl","iconOnlyClasses","containerClasses","primary","default","secondary","tertiary","textColorClasses","textSizeClasses","iconSizes","buttonState","isIconOnly","buttonStyles","textStyles","iconColors","spinnerColorMap","spinnerColor","className","children","icon","color","style","position","top","left","right","bottom","justifyContent","alignItems"],"sourceRoot":"../../../src","sources":["components/BaseButton.tsx"],"mappings":";;AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,SAASC,MAAM,QAAQ,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;
|
|
1
|
+
{"version":3,"names":["clsx","styled","React","Text","View","ActivityIndicator","BaseIcon","PressableOpacity","jsx","_jsx","jsxs","_jsxs","BaseButton","variant","size","text","loading","disabled","destructive","leftIcon","rightIcon","hitSlop","countdownSecs","debounceSecs","onPress","props","timer","setTimer","useState","timerUsed","setTimerUsed","debounce","setDebounce","isDisabled","setIsDisabled","useEffect","intervalId","setInterval","prevTimer","clearInterval","Boolean","timeout","setTimeout","prev","clearTimeout","handleOnPress","e","sizeClasses","xs","sm","md","lg","xl","iconOnlyClasses","containerClasses","primary","default","secondary","tertiary","textColorClasses","textSizeClasses","iconSizes","buttonState","isIconOnly","buttonStyles","textStyles","iconColors","spinnerColorMap","spinnerColor","className","children","icon","color","style","position","top","left","right","bottom","justifyContent","alignItems"],"sourceRoot":"../../../src","sources":["components/BaseButton.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ interface ButtonProps extends React.ComponentProps<typeof PressableOpacity> {
|
|
|
11
11
|
leftIcon?: HeroIcon | null;
|
|
12
12
|
rightIcon?: HeroIcon | null;
|
|
13
13
|
countdownSecs?: number;
|
|
14
|
+
debounceSecs?: number;
|
|
14
15
|
}
|
|
15
16
|
declare const _default: React.ForwardRefExoticComponent<Omit<import("nativewind").StyledProps<ButtonProps>, "ref"> & React.RefAttributes<import("react-native").View>>;
|
|
16
17
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC;IACzE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;IAC5E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AA6SD,wBAAkC"}
|
|
@@ -11,6 +11,7 @@ interface ButtonProps extends React.ComponentProps<typeof PressableOpacity> {
|
|
|
11
11
|
leftIcon?: HeroIcon | null;
|
|
12
12
|
rightIcon?: HeroIcon | null;
|
|
13
13
|
countdownSecs?: number;
|
|
14
|
+
debounceSecs?: number;
|
|
14
15
|
}
|
|
15
16
|
declare const _default: React.ForwardRefExoticComponent<Omit<import("nativewind").StyledProps<ButtonProps>, "ref"> & React.RefAttributes<import("react-native").View>>;
|
|
16
17
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC;IACzE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;IAC5E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AA6SD,wBAAkC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
2
|
import { styled } from 'nativewind';
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import { GestureResponderEvent } from 'react-native';
|
|
4
5
|
|
|
5
6
|
import {
|
|
6
7
|
Text, View, ActivityIndicator,
|
|
@@ -20,6 +21,7 @@ interface ButtonProps extends React.ComponentProps<typeof PressableOpacity> {
|
|
|
20
21
|
leftIcon?: HeroIcon | null;
|
|
21
22
|
rightIcon?: HeroIcon | null;
|
|
22
23
|
countdownSecs?: number;
|
|
24
|
+
debounceSecs?: number;
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
function BaseButton({
|
|
@@ -33,14 +35,18 @@ function BaseButton({
|
|
|
33
35
|
rightIcon = null,
|
|
34
36
|
hitSlop = 6,
|
|
35
37
|
countdownSecs = 0,
|
|
38
|
+
debounceSecs = 0,
|
|
39
|
+
onPress,
|
|
36
40
|
...props
|
|
37
41
|
}: ButtonProps) {
|
|
38
42
|
const [timer, setTimer] = React.useState(countdownSecs);
|
|
43
|
+
const [timerUsed, setTimerUsed] = React.useState(false);
|
|
44
|
+
const [debounce, setDebounce] = React.useState<number>(0);
|
|
39
45
|
const [isDisabled, setIsDisabled] = React.useState(disabled || countdownSecs > 0);
|
|
40
46
|
|
|
41
47
|
React.useEffect(() => {
|
|
42
48
|
let intervalId: NodeJS.Timeout;
|
|
43
|
-
if (countdownSecs > 0) {
|
|
49
|
+
if (countdownSecs > 0 && !timerUsed) {
|
|
44
50
|
setIsDisabled(true);
|
|
45
51
|
setTimer(countdownSecs);
|
|
46
52
|
intervalId = setInterval(() => {
|
|
@@ -48,6 +54,7 @@ function BaseButton({
|
|
|
48
54
|
if (prevTimer <= 1) {
|
|
49
55
|
clearInterval(intervalId);
|
|
50
56
|
setIsDisabled(Boolean(disabled));
|
|
57
|
+
setTimerUsed(true);
|
|
51
58
|
return 0;
|
|
52
59
|
}
|
|
53
60
|
return prevTimer - 1;
|
|
@@ -59,7 +66,36 @@ function BaseButton({
|
|
|
59
66
|
return () => {
|
|
60
67
|
if (intervalId) clearInterval(intervalId);
|
|
61
68
|
};
|
|
62
|
-
}, [countdownSecs, disabled]);
|
|
69
|
+
}, [countdownSecs, disabled, timerUsed]);
|
|
70
|
+
|
|
71
|
+
React.useEffect(() => {
|
|
72
|
+
let timeout: NodeJS.Timeout | undefined;
|
|
73
|
+
|
|
74
|
+
if (debounce > 0) {
|
|
75
|
+
setIsDisabled(true);
|
|
76
|
+
timeout = setTimeout(() => {
|
|
77
|
+
setDebounce((prev: number) => {
|
|
78
|
+
if (prev <= 1) {
|
|
79
|
+
setIsDisabled(false);
|
|
80
|
+
return 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return prev - 1;
|
|
84
|
+
});
|
|
85
|
+
}, 1000);
|
|
86
|
+
}
|
|
87
|
+
return () => {
|
|
88
|
+
if (timeout) clearTimeout(timeout);
|
|
89
|
+
};
|
|
90
|
+
}, [debounce, disabled]);
|
|
91
|
+
|
|
92
|
+
function handleOnPress(e: GestureResponderEvent) {
|
|
93
|
+
onPress?.(e);
|
|
94
|
+
if (debounceSecs) {
|
|
95
|
+
setDebounce(debounceSecs);
|
|
96
|
+
setIsDisabled(true);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
63
99
|
|
|
64
100
|
const sizeClasses = {
|
|
65
101
|
xs: 'rounded-md h-7 px-4',
|
|
@@ -240,6 +276,7 @@ function BaseButton({
|
|
|
240
276
|
disabled={isDisabled || loading}
|
|
241
277
|
className={buttonStyles}
|
|
242
278
|
hitSlop={hitSlop}
|
|
279
|
+
onPress={(e) => handleOnPress(e)}
|
|
243
280
|
{...props}
|
|
244
281
|
>
|
|
245
282
|
<View className={clsx('flex flex-row items-center justify-center', loading && 'opacity-0')}>
|
|
@@ -255,6 +292,7 @@ function BaseButton({
|
|
|
255
292
|
<Text className={textStyles}>
|
|
256
293
|
{text}
|
|
257
294
|
{timer > 0 ? ` (${timer})` : ''}
|
|
295
|
+
{debounce > 0 ? ` (${debounce})` : ''}
|
|
258
296
|
</Text>
|
|
259
297
|
)}
|
|
260
298
|
{rightIcon && (
|