@trilogy-ds/react 4.0.7-SC-beta-2 → 4.0.7-SC-beta-3
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/components/accordion/item/body/hooks/useAccordionBoy.d.ts +2 -2
- package/lib/components/accordion/item/body/hooks/useAccordionBoy.js +10 -7
- package/lib/components/alert/hooks/useAlert.d.ts +4 -4
- package/lib/components/alert/hooks/useAlert.js +32 -27
- package/lib/components/autocomplete/hooks/useAutocomplete.d.ts +11 -11
- package/lib/components/autocomplete/hooks/useAutocomplete.js +130 -127
- package/lib/components/autocomplete/item/hooks/useAutocompleteItem.d.ts +4 -4
- package/lib/components/autocomplete/item/hooks/useAutocompleteItem.js +12 -11
- package/lib/components/button/hooks/useButton.d.ts +2 -2
- package/lib/components/button/hooks/useButton.js +12 -8
- package/lib/components/countdown/hooks/useCountdown.js +58 -57
- package/lib/components/input/gauge/hook/useGauge.js +63 -62
- package/lib/components/input/hook/useInput.d.ts +15 -15
- package/lib/components/input/hook/useInput.js +127 -126
- package/lib/components/modal/hooks/useModal.d.ts +9 -9
- package/lib/components/modal/hooks/useModal.js +78 -76
- package/lib/components/otp/hooks/useOtp.d.ts +5 -5
- package/lib/components/otp/hooks/useOtp.js +34 -33
- package/lib/components/pagination/hooks/usePagination.d.ts +6 -6
- package/lib/components/pagination/hooks/usePagination.js +34 -33
- package/lib/components/product-tour/hooks/useProductTour.d.ts +2 -2
- package/lib/components/product-tour/hooks/useProductTour.js +13 -12
- package/lib/components/progress/radial/hooks/useProgressRadial.d.ts +3 -3
- package/lib/components/progress/radial/hooks/useProgressRadial.js +32 -31
- package/lib/components/range/hooks/useRange.d.ts +8 -8
- package/lib/components/range/hooks/useRange.js +52 -51
- package/lib/components/segment-control/hooks/useSegmentControl.d.ts +3 -3
- package/lib/components/segment-control/hooks/useSegmentControl.js +22 -21
- package/lib/components/segment-control/item/hooks/useSegmentControlItem.d.ts +3 -3
- package/lib/components/segment-control/item/hooks/useSegmentControlItem.js +17 -16
- package/lib/components/select/web/hooks/useSelectDynamic.d.ts +8 -8
- package/lib/components/select/web/hooks/useSelectDynamic.js +116 -115
- package/lib/components/select/web/hooks/useSelectNative.d.ts +6 -6
- package/lib/components/select/web/hooks/useSelectNative.js +31 -30
- package/lib/components/stepper/hooks/useStepper.js +15 -14
- package/lib/components/switch/hooks/useSwitch.d.ts +4 -4
- package/lib/components/switch/hooks/useSwitch.js +37 -36
- package/lib/components/tabs/hooks/useTabs.js +19 -18
- package/lib/components/tabs/tab-list/tab/hooks/useTab.d.ts +2 -2
- package/lib/components/tabs/tab-list/tab/hooks/useTab.js +19 -18
- package/lib/components/tabs/tab-panels/tab-panel/hooks/useTabPanel.js +6 -5
- package/lib/components/textarea/hooks/useTextarea.d.ts +3 -3
- package/lib/components/textarea/hooks/useTextarea.js +21 -20
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +11 -1
- package/lib/helpers/isServer.d.ts +0 -1
- package/lib/helpers/isServer.js +0 -2
|
@@ -4,11 +4,135 @@ import React from 'react';
|
|
|
4
4
|
import { Icon, IconName, IconSize } from '../../../components/icon';
|
|
5
5
|
import { InputStatus, InputType } from '../../../components/input/InputEnum';
|
|
6
6
|
import { hashClass } from '../../../helpers/hashClassesHelpers';
|
|
7
|
-
import { isServer } from '../../../helpers/isServer';
|
|
8
7
|
import { is } from '../../../services/classify';
|
|
9
8
|
export var useInput = function (_a) {
|
|
10
9
|
var defaultValue = _a.defaultValue, focused = _a.focused, status = _a.status, type = _a.type, value = _a.value, validator = _a.validator, onStatusChange = _a.onStatusChange, onKeyUp = _a.onKeyUp, onKeyPress = _a.onKeyPress, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClick = _a.onClick, forceControl = _a.forceControl, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onIconClick = _a.onIconClick;
|
|
11
|
-
|
|
10
|
+
try {
|
|
11
|
+
var _b = __read(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''), 2), _value_1 = _b[0], setValue_1 = _b[1];
|
|
12
|
+
var _c = __read(React.useState(focused !== null && focused !== void 0 ? focused : false), 2), isFocused_1 = _c[0], setIsFocused_1 = _c[1];
|
|
13
|
+
var _d = __read(React.useState(false), 2), isDirty_1 = _d[0], setIsDirty_1 = _d[1];
|
|
14
|
+
var _e = __read(React.useState(false), 2), isTouched_1 = _e[0], setIsTouched_1 = _e[1];
|
|
15
|
+
var _f = __read(React.useState(status || InputStatus.DEFAULT), 2), localStatus_1 = _f[0], setLocalStatus_1 = _f[1];
|
|
16
|
+
var _g = __read(React.useState(type), 2), inputType_1 = _g[0], setInputType_1 = _g[1];
|
|
17
|
+
var _h = __read(React.useState(false), 2), isShowPwd = _h[0], setIsShowPwd_1 = _h[1];
|
|
18
|
+
var onPressKey_1 = React.useCallback(function (e) {
|
|
19
|
+
var target = e.target;
|
|
20
|
+
return {
|
|
21
|
+
inputName: target.name,
|
|
22
|
+
inputValue: target.value,
|
|
23
|
+
inputKeyCode: e.keyCode,
|
|
24
|
+
target: target,
|
|
25
|
+
preventDefault: function () { return e.preventDefault(); },
|
|
26
|
+
};
|
|
27
|
+
}, []);
|
|
28
|
+
var IconWrapper = React.useCallback(function (_a) {
|
|
29
|
+
var className = _a.className, name = _a.name, color = _a.color, closeIconSearch = _a.closeIconSearch, onPress = _a.onPress;
|
|
30
|
+
return (React.createElement(CreateIconWrapper, { className: className, name: name, color: color, closeIconSearch: closeIconSearch, onClick: function (e) {
|
|
31
|
+
onPress && onPress();
|
|
32
|
+
if (onIconClick) {
|
|
33
|
+
onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value_1, target: e.target });
|
|
34
|
+
}
|
|
35
|
+
}, type: type, _value: _value_1, onClickCloseIconSearch: function () { return setValue_1(''); } }));
|
|
36
|
+
}, [_value_1, onIconClick, type]);
|
|
37
|
+
var handleKeyUp = React.useCallback(function (e) { return onKeyUp && onKeyUp(onPressKey_1(e)); }, [onKeyUp]);
|
|
38
|
+
var handleMouseEnter = React.useCallback(function (e) { return onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e); }, [onMouseEnter]);
|
|
39
|
+
var handleMouseLeave = React.useCallback(function (e) { return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e); }, [onMouseLeave]);
|
|
40
|
+
var handleKeyPress = React.useCallback(function (e) { return onKeyPress && onKeyPress(onPressKey_1(e)); }, [onKeyPress]);
|
|
41
|
+
var handleClick = React.useCallback(function (e) {
|
|
42
|
+
var target = e.target;
|
|
43
|
+
if (onClick) {
|
|
44
|
+
onClick({
|
|
45
|
+
inputName: target.name,
|
|
46
|
+
inputValue: target.value,
|
|
47
|
+
target: target,
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
}, [onClick]);
|
|
51
|
+
var handleChange = React.useCallback(function (e) {
|
|
52
|
+
// --- solution to prevent cursor jump ---
|
|
53
|
+
if (inputType_1 !== InputType.DATE &&
|
|
54
|
+
inputType_1 !== InputType.DATETIME_LOCAL &&
|
|
55
|
+
inputType_1 !== InputType.NUMBER &&
|
|
56
|
+
inputType_1 !== InputType.EMAIL) {
|
|
57
|
+
var caret_1 = e.target.selectionStart;
|
|
58
|
+
var element_1 = e.target;
|
|
59
|
+
window.requestAnimationFrame(function () {
|
|
60
|
+
element_1.selectionStart = caret_1;
|
|
61
|
+
element_1.selectionEnd = caret_1;
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
if (!forceControl)
|
|
65
|
+
setValue_1(e.target.value);
|
|
66
|
+
if (onChange) {
|
|
67
|
+
onChange({
|
|
68
|
+
inputName: e.target.name,
|
|
69
|
+
inputValue: e.target.value,
|
|
70
|
+
inputSelectionStart: e.target.selectionStart,
|
|
71
|
+
target: e.target,
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
}, [forceControl, onChange, inputType_1]);
|
|
75
|
+
var handleFocus = React.useCallback(function (e) {
|
|
76
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
77
|
+
setIsFocused_1(true);
|
|
78
|
+
}, [onFocus]);
|
|
79
|
+
var handleBlur = React.useCallback(function (e) {
|
|
80
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
81
|
+
setIsFocused_1(false);
|
|
82
|
+
}, [onBlur]);
|
|
83
|
+
var handlePressIconPwd = React.useCallback(function () {
|
|
84
|
+
if (inputType_1 === 'password') {
|
|
85
|
+
setInputType_1('text');
|
|
86
|
+
setIsShowPwd_1(true);
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
setInputType_1('password');
|
|
90
|
+
setIsShowPwd_1(false);
|
|
91
|
+
}
|
|
92
|
+
}, [inputType_1]);
|
|
93
|
+
React.useEffect(function () {
|
|
94
|
+
var _a;
|
|
95
|
+
setValue_1((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : '');
|
|
96
|
+
}, [value, defaultValue]);
|
|
97
|
+
React.useEffect(function () {
|
|
98
|
+
setIsFocused_1(focused !== null && focused !== void 0 ? focused : false);
|
|
99
|
+
}, [focused]);
|
|
100
|
+
React.useEffect(function () {
|
|
101
|
+
if (isFocused_1)
|
|
102
|
+
setIsDirty_1(true);
|
|
103
|
+
else if (isDirty_1)
|
|
104
|
+
setIsTouched_1(true);
|
|
105
|
+
}, [isFocused_1, isDirty_1]);
|
|
106
|
+
React.useEffect(function () {
|
|
107
|
+
if (!validator || !isTouched_1)
|
|
108
|
+
return;
|
|
109
|
+
setLocalStatus_1(validator(_value_1));
|
|
110
|
+
}, [isFocused_1, isTouched_1, validator]);
|
|
111
|
+
React.useEffect(function () {
|
|
112
|
+
setLocalStatus_1(status || InputStatus.DEFAULT);
|
|
113
|
+
}, [status]);
|
|
114
|
+
React.useEffect(function () {
|
|
115
|
+
if (onStatusChange)
|
|
116
|
+
onStatusChange(localStatus_1);
|
|
117
|
+
}, [localStatus_1, onStatusChange]);
|
|
118
|
+
return {
|
|
119
|
+
localStatus: localStatus_1,
|
|
120
|
+
inputType: inputType_1,
|
|
121
|
+
_value: _value_1,
|
|
122
|
+
isShowPwd: isShowPwd,
|
|
123
|
+
handleBlur: handleBlur,
|
|
124
|
+
handleChange: handleChange,
|
|
125
|
+
handleClick: handleClick,
|
|
126
|
+
handleFocus: handleFocus,
|
|
127
|
+
handleKeyPress: handleKeyPress,
|
|
128
|
+
handleKeyUp: handleKeyUp,
|
|
129
|
+
handleMouseEnter: handleMouseEnter,
|
|
130
|
+
handleMouseLeave: handleMouseLeave,
|
|
131
|
+
IconWrapper: IconWrapper,
|
|
132
|
+
handlePressIconPwd: handlePressIconPwd,
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
catch (_j) {
|
|
12
136
|
return {
|
|
13
137
|
localStatus: status || InputStatus.DEFAULT,
|
|
14
138
|
inputType: type,
|
|
@@ -17,129 +141,6 @@ export var useInput = function (_a) {
|
|
|
17
141
|
IconWrapper: CreateIconWrapper,
|
|
18
142
|
};
|
|
19
143
|
}
|
|
20
|
-
var _b = __read(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''), 2), _value = _b[0], setValue = _b[1];
|
|
21
|
-
var _c = __read(React.useState(focused !== null && focused !== void 0 ? focused : false), 2), isFocused = _c[0], setIsFocused = _c[1];
|
|
22
|
-
var _d = __read(React.useState(false), 2), isDirty = _d[0], setIsDirty = _d[1];
|
|
23
|
-
var _e = __read(React.useState(false), 2), isTouched = _e[0], setIsTouched = _e[1];
|
|
24
|
-
var _f = __read(React.useState(status || InputStatus.DEFAULT), 2), localStatus = _f[0], setLocalStatus = _f[1];
|
|
25
|
-
var _g = __read(React.useState(type), 2), inputType = _g[0], setInputType = _g[1];
|
|
26
|
-
var _h = __read(React.useState(false), 2), isShowPwd = _h[0], setIsShowPwd = _h[1];
|
|
27
|
-
var onPressKey = React.useCallback(function (e) {
|
|
28
|
-
var target = e.target;
|
|
29
|
-
return {
|
|
30
|
-
inputName: target.name,
|
|
31
|
-
inputValue: target.value,
|
|
32
|
-
inputKeyCode: e.keyCode,
|
|
33
|
-
target: target,
|
|
34
|
-
preventDefault: function () { return e.preventDefault(); },
|
|
35
|
-
};
|
|
36
|
-
}, []);
|
|
37
|
-
var IconWrapper = React.useCallback(function (_a) {
|
|
38
|
-
var className = _a.className, name = _a.name, color = _a.color, closeIconSearch = _a.closeIconSearch, onPress = _a.onPress;
|
|
39
|
-
return (React.createElement(CreateIconWrapper, { className: className, name: name, color: color, closeIconSearch: closeIconSearch, onClick: function (e) {
|
|
40
|
-
onPress && onPress();
|
|
41
|
-
if (onIconClick) {
|
|
42
|
-
onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value, target: e.target });
|
|
43
|
-
}
|
|
44
|
-
}, type: type, _value: _value, onClickCloseIconSearch: function () { return setValue(''); } }));
|
|
45
|
-
}, [_value, onIconClick, type]);
|
|
46
|
-
var handleKeyUp = React.useCallback(function (e) { return onKeyUp && onKeyUp(onPressKey(e)); }, [onKeyUp]);
|
|
47
|
-
var handleMouseEnter = React.useCallback(function (e) { return onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e); }, [onMouseEnter]);
|
|
48
|
-
var handleMouseLeave = React.useCallback(function (e) { return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e); }, [onMouseLeave]);
|
|
49
|
-
var handleKeyPress = React.useCallback(function (e) { return onKeyPress && onKeyPress(onPressKey(e)); }, [onKeyPress]);
|
|
50
|
-
var handleClick = React.useCallback(function (e) {
|
|
51
|
-
var target = e.target;
|
|
52
|
-
if (onClick) {
|
|
53
|
-
onClick({
|
|
54
|
-
inputName: target.name,
|
|
55
|
-
inputValue: target.value,
|
|
56
|
-
target: target,
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
}, [onClick]);
|
|
60
|
-
var handleChange = React.useCallback(function (e) {
|
|
61
|
-
// --- solution to prevent cursor jump ---
|
|
62
|
-
if (inputType !== InputType.DATE &&
|
|
63
|
-
inputType !== InputType.DATETIME_LOCAL &&
|
|
64
|
-
inputType !== InputType.NUMBER &&
|
|
65
|
-
inputType !== InputType.EMAIL) {
|
|
66
|
-
var caret_1 = e.target.selectionStart;
|
|
67
|
-
var element_1 = e.target;
|
|
68
|
-
window.requestAnimationFrame(function () {
|
|
69
|
-
element_1.selectionStart = caret_1;
|
|
70
|
-
element_1.selectionEnd = caret_1;
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
if (!forceControl)
|
|
74
|
-
setValue(e.target.value);
|
|
75
|
-
if (onChange) {
|
|
76
|
-
onChange({
|
|
77
|
-
inputName: e.target.name,
|
|
78
|
-
inputValue: e.target.value,
|
|
79
|
-
inputSelectionStart: e.target.selectionStart,
|
|
80
|
-
target: e.target,
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
}, [forceControl, onChange, inputType]);
|
|
84
|
-
var handleFocus = React.useCallback(function (e) {
|
|
85
|
-
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
86
|
-
setIsFocused(true);
|
|
87
|
-
}, [onFocus]);
|
|
88
|
-
var handleBlur = React.useCallback(function (e) {
|
|
89
|
-
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
90
|
-
setIsFocused(false);
|
|
91
|
-
}, [onBlur]);
|
|
92
|
-
var handlePressIconPwd = React.useCallback(function () {
|
|
93
|
-
if (inputType === 'password') {
|
|
94
|
-
setInputType('text');
|
|
95
|
-
setIsShowPwd(true);
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
setInputType('password');
|
|
99
|
-
setIsShowPwd(false);
|
|
100
|
-
}
|
|
101
|
-
}, [inputType]);
|
|
102
|
-
React.useEffect(function () {
|
|
103
|
-
var _a;
|
|
104
|
-
setValue((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : '');
|
|
105
|
-
}, [value, defaultValue]);
|
|
106
|
-
React.useEffect(function () {
|
|
107
|
-
setIsFocused(focused !== null && focused !== void 0 ? focused : false);
|
|
108
|
-
}, [focused]);
|
|
109
|
-
React.useEffect(function () {
|
|
110
|
-
if (isFocused)
|
|
111
|
-
setIsDirty(true);
|
|
112
|
-
else if (isDirty)
|
|
113
|
-
setIsTouched(true);
|
|
114
|
-
}, [isFocused, isDirty]);
|
|
115
|
-
React.useEffect(function () {
|
|
116
|
-
if (!validator || !isTouched)
|
|
117
|
-
return;
|
|
118
|
-
setLocalStatus(validator(_value));
|
|
119
|
-
}, [isFocused, isTouched, validator]);
|
|
120
|
-
React.useEffect(function () {
|
|
121
|
-
setLocalStatus(status || InputStatus.DEFAULT);
|
|
122
|
-
}, [status]);
|
|
123
|
-
React.useEffect(function () {
|
|
124
|
-
if (onStatusChange)
|
|
125
|
-
onStatusChange(localStatus);
|
|
126
|
-
}, [localStatus, onStatusChange]);
|
|
127
|
-
return {
|
|
128
|
-
localStatus: localStatus,
|
|
129
|
-
inputType: inputType,
|
|
130
|
-
_value: _value,
|
|
131
|
-
isShowPwd: isShowPwd,
|
|
132
|
-
handleBlur: handleBlur,
|
|
133
|
-
handleChange: handleChange,
|
|
134
|
-
handleClick: handleClick,
|
|
135
|
-
handleFocus: handleFocus,
|
|
136
|
-
handleKeyPress: handleKeyPress,
|
|
137
|
-
handleKeyUp: handleKeyUp,
|
|
138
|
-
handleMouseEnter: handleMouseEnter,
|
|
139
|
-
handleMouseLeave: handleMouseLeave,
|
|
140
|
-
IconWrapper: IconWrapper,
|
|
141
|
-
handlePressIconPwd: handlePressIconPwd,
|
|
142
|
-
};
|
|
143
144
|
};
|
|
144
145
|
var CreateIconWrapper = function (_a) {
|
|
145
146
|
var className = _a.className, name = _a.name, color = _a.color, closeIconSearch = _a.closeIconSearch, onClick = _a.onClick, type = _a.type, _value = _a._value, onClickCloseIconSearch = _a.onClickCloseIconSearch;
|
|
@@ -147,4 +148,4 @@ var CreateIconWrapper = function (_a) {
|
|
|
147
148
|
React.createElement(Icon, { className: className, name: name, size: IconSize.SMALL, color: color }),
|
|
148
149
|
_value && _value.length > 0 && closeIconSearch && (React.createElement(Icon, { onClick: onClickCloseIconSearch, className: hashClass(clsx(is('justified-self'))), name: IconName.TIMES_CIRCLE, size: IconSize.SMALL }))));
|
|
149
150
|
};
|
|
150
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
151
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlSW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2lucHV0L2hvb2svdXNlSW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRzVELE9BQU8sRUFBRSxXQUFXLEVBQXFCLFNBQVMsRUFBbUIsTUFBTSw4QkFBOEIsQ0FBQTtBQU16RyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBa0N4QyxNQUFNLENBQUMsSUFBTSxRQUFRLEdBQUcsVUFBQyxFQWtCZjtRQWpCUixZQUFZLGtCQUFBLEVBQ1osT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0wsU0FBUyxlQUFBLEVBQ1QsY0FBYyxvQkFBQSxFQUNkLE9BQU8sYUFBQSxFQUNQLFVBQVUsZ0JBQUEsRUFDVixZQUFZLGtCQUFBLEVBQ1osWUFBWSxrQkFBQSxFQUNaLE9BQU8sYUFBQSxFQUNQLFlBQVksa0JBQUEsRUFDWixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxNQUFNLFlBQUEsRUFDTixXQUFXLGlCQUFBO0lBRVgsSUFBSTtRQUNJLElBQUEsS0FBQSxPQUFxQixLQUFLLENBQUMsUUFBUSxDQUFTLFlBQVksYUFBWixZQUFZLGNBQVosWUFBWSxHQUFJLEVBQUUsQ0FBQyxJQUFBLEVBQTlELFFBQU0sUUFBQSxFQUFFLFVBQVEsUUFBOEMsQ0FBQTtRQUMvRCxJQUFBLEtBQUEsT0FBNEIsS0FBSyxDQUFDLFFBQVEsQ0FBVSxPQUFPLGFBQVAsT0FBTyxjQUFQ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
|
|
@@ -5,15 +5,6 @@ interface IProps {
|
|
|
5
5
|
onClose?: ClickEvent;
|
|
6
6
|
}
|
|
7
7
|
export declare const useModal: ({ active, onClose }: IProps) => {
|
|
8
|
-
display: boolean;
|
|
9
|
-
modal?: undefined;
|
|
10
|
-
onKeyDown?: undefined;
|
|
11
|
-
handleClickModal?: undefined;
|
|
12
|
-
refModal?: undefined;
|
|
13
|
-
refBtnModal?: undefined;
|
|
14
|
-
handleCloseModal?: undefined;
|
|
15
|
-
buttonRef?: undefined;
|
|
16
|
-
} | {
|
|
17
8
|
modal: React.RefObject<HTMLDivElement>;
|
|
18
9
|
display: boolean;
|
|
19
10
|
onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
@@ -22,5 +13,14 @@ export declare const useModal: ({ active, onClose }: IProps) => {
|
|
|
22
13
|
refBtnModal: React.MutableRefObject<any>;
|
|
23
14
|
handleCloseModal: (e: React.MouseEvent) => void;
|
|
24
15
|
buttonRef: (el: HTMLButtonElement | null) => HTMLButtonElement | null;
|
|
16
|
+
} | {
|
|
17
|
+
display: boolean;
|
|
18
|
+
modal?: undefined;
|
|
19
|
+
onKeyDown?: undefined;
|
|
20
|
+
handleClickModal?: undefined;
|
|
21
|
+
refModal?: undefined;
|
|
22
|
+
refBtnModal?: undefined;
|
|
23
|
+
handleCloseModal?: undefined;
|
|
24
|
+
buttonRef?: undefined;
|
|
25
25
|
};
|
|
26
26
|
export {};
|
|
@@ -1,84 +1,86 @@
|
|
|
1
1
|
import { __read } from "tslib";
|
|
2
|
-
import { isServer } from '../../../helpers/isServer';
|
|
3
2
|
import React from 'react';
|
|
4
3
|
export var useModal = function (_a) {
|
|
5
4
|
var active = _a.active, onClose = _a.onClose;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
5
|
+
try {
|
|
6
|
+
var modal_1 = React.useRef(null);
|
|
7
|
+
var _b = __read(React.useState(active || false), 2), display_1 = _b[0], setDisplay_1 = _b[1];
|
|
8
|
+
var refsActions_1 = React.useRef([]);
|
|
9
|
+
var refBtnModal_1 = React.useRef(null);
|
|
10
|
+
var refModal_1 = React.useRef(null);
|
|
11
|
+
var _c = __read(React.useState(0), 2), setIndexFocusable_1 = _c[1];
|
|
12
|
+
var handleClose_1 = React.useCallback(function (onCloseFunc, e) {
|
|
13
|
+
setDisplay_1(false);
|
|
14
|
+
refBtnModal_1.current && refBtnModal_1.current.focus();
|
|
15
|
+
setIndexFocusable_1(0);
|
|
16
|
+
if (onCloseFunc)
|
|
17
|
+
onCloseFunc(e);
|
|
18
|
+
}, [refBtnModal_1.current]);
|
|
19
|
+
var onKeyDown = React.useCallback(function (event) {
|
|
20
|
+
if (display_1 && refsActions_1.current) {
|
|
21
|
+
var refs_1 = refsActions_1.current.filter(function (ref) { return ref; });
|
|
22
|
+
var key = event.key;
|
|
23
|
+
if (key === 'Tab') {
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
setIndexFocusable_1(function (prev) {
|
|
26
|
+
var _a;
|
|
27
|
+
var nextIndex = (prev + 1) % refs_1.length;
|
|
28
|
+
refs_1[nextIndex] && ((_a = refs_1[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus());
|
|
29
|
+
return nextIndex;
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
if (key === 'Escape') {
|
|
33
|
+
event.preventDefault();
|
|
34
|
+
setDisplay_1(false);
|
|
35
|
+
refBtnModal_1.current && refBtnModal_1.current.focus();
|
|
36
|
+
setIndexFocusable_1(0);
|
|
37
|
+
onClose && onClose();
|
|
38
|
+
}
|
|
33
39
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
onClose && onClose();
|
|
40
|
+
}, [refsActions_1.current.length, display_1]);
|
|
41
|
+
var handleClickModal = React.useCallback(function (e) {
|
|
42
|
+
var _a;
|
|
43
|
+
if (!((_a = modal_1 === null || modal_1 === void 0 ? void 0 : modal_1.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
44
|
+
handleClose_1(onClose, e);
|
|
40
45
|
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
46
|
+
}, [modal_1, handleClose_1]);
|
|
47
|
+
var handleCloseModal = React.useCallback(function (e) {
|
|
48
|
+
handleClose_1(onClose, e);
|
|
49
|
+
}, [handleClose_1, onClose]);
|
|
50
|
+
var buttonRef = React.useCallback(function (el) { return el && refsActions_1 && (refsActions_1.current[0] = el); }, []);
|
|
51
|
+
React.useEffect(function () {
|
|
52
|
+
display_1 && refsActions_1.current[0] && refsActions_1.current[0].focus();
|
|
53
|
+
}, [display_1, refsActions_1 === null || refsActions_1 === void 0 ? void 0 : refsActions_1.current.length]);
|
|
54
|
+
React.useEffect(function () {
|
|
55
|
+
setDisplay_1(function (prev) {
|
|
56
|
+
if (prev) {
|
|
57
|
+
refBtnModal_1.current && refBtnModal_1.current.focus();
|
|
58
|
+
setIndexFocusable_1(0);
|
|
59
|
+
}
|
|
60
|
+
return active || false;
|
|
61
|
+
});
|
|
62
|
+
}, [active]);
|
|
63
|
+
React.useEffect(function () {
|
|
64
|
+
if (refModal_1.current) {
|
|
65
|
+
var footer = refModal_1.current.querySelector('[data-modal-footer]');
|
|
66
|
+
var getCTA = footer === null || footer === void 0 ? void 0 : footer.querySelectorAll('button');
|
|
67
|
+
if (getCTA)
|
|
68
|
+
getCTA.forEach(function (el, i) { return (refsActions_1.current[i + 1] = el); });
|
|
61
69
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
display:
|
|
76
|
-
|
|
77
|
-
handleClickModal: handleClickModal,
|
|
78
|
-
refModal: refModal,
|
|
79
|
-
refBtnModal: refBtnModal,
|
|
80
|
-
handleCloseModal: handleCloseModal,
|
|
81
|
-
buttonRef: buttonRef,
|
|
82
|
-
};
|
|
70
|
+
}, [refModal_1.current]);
|
|
71
|
+
return {
|
|
72
|
+
modal: modal_1,
|
|
73
|
+
display: display_1,
|
|
74
|
+
onKeyDown: onKeyDown,
|
|
75
|
+
handleClickModal: handleClickModal,
|
|
76
|
+
refModal: refModal_1,
|
|
77
|
+
refBtnModal: refBtnModal_1,
|
|
78
|
+
handleCloseModal: handleCloseModal,
|
|
79
|
+
buttonRef: buttonRef,
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
catch (_d) {
|
|
83
|
+
return { display: active || false };
|
|
84
|
+
}
|
|
83
85
|
};
|
|
84
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
86
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2hvb2tzL3VzZU1vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBT3pCLE1BQU0sQ0FBQyxJQUFNLFFBQVEsR0FBRyxVQUFDLEVBQTJCO1FBQXpCLE1BQU0sWUFBQSxFQUFFLE9BQU8sYUFBQTtJQUN4QyxJQUFJO1FBQ0YsSUFBTSxPQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUE7UUFDMUMsSUFBQSxLQUFBLE9BQXdCLEtBQUssQ0FBQyxRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFNBQU8sUUFBQSxFQUFFLFlBQVUsUUFBNEMsQ0FBQTtRQUV0RSxJQUFNLGFBQVcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFrQyxFQUFFLENBQUMsQ0FBQTtRQUNyRSxJQUFNLGFBQVcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFNLElBQUksQ0FBQyxDQUFBO1FBQzNDLElBQU0sVUFBUSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFBO1FBQzdDLElBQUEsS0FBQSxPQUF3QixLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQXRDLG1CQUFpQixRQUFxQixDQUFBO1FBRS9DLElBQU0sYUFBVyxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ25DLFVBQUMsV0FBbUMsRUFBRSxDQUFlO1lBQ25ELFlBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQTtZQUNqQixhQUFXLENBQUMsT0FBTyxJQUFJLGFBQVcsQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLENBQUE7WUFDbEQsbUJBQWlCLENBQUMsQ0FBQyxDQUFDLENBQUE7WUFDcEIsSUFBSSxXQUFXO2dCQUFFLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQTtRQUNq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
|
|
@@ -7,14 +7,14 @@ interface IProps {
|
|
|
7
7
|
length: number;
|
|
8
8
|
}
|
|
9
9
|
export declare const useOtp: ({ value, disabled, length, onChange, onCompleted }: IProps) => {
|
|
10
|
-
codeInput: (number | null)[];
|
|
11
|
-
inputOnKeyUp?: undefined;
|
|
12
|
-
inputOnFocus?: undefined;
|
|
13
|
-
inputOnChange?: undefined;
|
|
14
|
-
} | {
|
|
15
10
|
codeInput: (number | null)[];
|
|
16
11
|
inputOnKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => false | void;
|
|
17
12
|
inputOnFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
18
13
|
inputOnChange: (e: React.ChangeEvent<HTMLInputElement>, idx: number) => void;
|
|
14
|
+
} | {
|
|
15
|
+
codeInput: (number | null)[];
|
|
16
|
+
inputOnKeyUp?: undefined;
|
|
17
|
+
inputOnFocus?: undefined;
|
|
18
|
+
inputOnChange?: undefined;
|
|
19
19
|
};
|
|
20
20
|
export {};
|