@trilogy-ds/react 4.0.7-SC-beta-1 → 4.0.7-SC-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/lib/components/accordion/item/body/hooks/useAccordionBoy.d.ts +2 -2
- package/lib/components/accordion/item/body/hooks/useAccordionBoy.js +7 -10
- package/lib/components/alert/hooks/useAlert.d.ts +4 -4
- package/lib/components/alert/hooks/useAlert.js +27 -32
- package/lib/components/autocomplete/hooks/useAutocomplete.d.ts +11 -11
- package/lib/components/autocomplete/hooks/useAutocomplete.js +127 -130
- package/lib/components/autocomplete/item/hooks/useAutocompleteItem.d.ts +4 -4
- package/lib/components/autocomplete/item/hooks/useAutocompleteItem.js +11 -12
- package/lib/components/button/hooks/useButton.d.ts +2 -2
- package/lib/components/button/hooks/useButton.js +8 -12
- package/lib/components/countdown/hooks/useCountdown.js +57 -58
- package/lib/components/input/gauge/hook/useGauge.js +62 -63
- package/lib/components/input/hook/useInput.d.ts +15 -15
- package/lib/components/input/hook/useInput.js +126 -127
- package/lib/components/modal/hooks/useModal.d.ts +9 -9
- package/lib/components/modal/hooks/useModal.js +76 -78
- package/lib/components/otp/hooks/useOtp.d.ts +5 -5
- package/lib/components/otp/hooks/useOtp.js +33 -34
- package/lib/components/pagination/hooks/usePagination.d.ts +6 -6
- package/lib/components/pagination/hooks/usePagination.js +33 -34
- package/lib/components/product-tour/hooks/useProductTour.d.ts +2 -2
- package/lib/components/product-tour/hooks/useProductTour.js +12 -13
- package/lib/components/progress/radial/hooks/useProgressRadial.d.ts +3 -3
- package/lib/components/progress/radial/hooks/useProgressRadial.js +31 -32
- package/lib/components/range/hooks/useRange.d.ts +8 -8
- package/lib/components/range/hooks/useRange.js +51 -52
- package/lib/components/segment-control/hooks/useSegmentControl.d.ts +3 -3
- package/lib/components/segment-control/hooks/useSegmentControl.js +21 -22
- package/lib/components/segment-control/item/hooks/useSegmentControlItem.d.ts +3 -3
- package/lib/components/segment-control/item/hooks/useSegmentControlItem.js +16 -17
- package/lib/components/select/web/hooks/useSelectDynamic.d.ts +8 -8
- package/lib/components/select/web/hooks/useSelectDynamic.js +115 -116
- package/lib/components/select/web/hooks/useSelectNative.d.ts +6 -6
- package/lib/components/select/web/hooks/useSelectNative.js +30 -31
- package/lib/components/stepper/hooks/useStepper.js +14 -15
- package/lib/components/switch/hooks/useSwitch.d.ts +4 -4
- package/lib/components/switch/hooks/useSwitch.js +36 -37
- package/lib/components/tabs/hooks/useTabs.js +18 -19
- package/lib/components/tabs/tab-list/tab/hooks/useTab.d.ts +2 -2
- package/lib/components/tabs/tab-list/tab/hooks/useTab.js +18 -19
- package/lib/components/tabs/tab-panels/tab-panel/hooks/useTabPanel.js +5 -6
- package/lib/components/textarea/hooks/useTextarea.d.ts +3 -3
- package/lib/components/textarea/hooks/useTextarea.js +20 -21
- package/lib/helpers/isServer.d.ts +1 -0
- package/lib/helpers/isServer.js +2 -0
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
|
@@ -4,135 +4,11 @@ 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';
|
|
7
8
|
import { is } from '../../../services/classify';
|
|
8
9
|
export var useInput = function (_a) {
|
|
9
10
|
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;
|
|
10
|
-
|
|
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) {
|
|
11
|
+
if (isServer) {
|
|
136
12
|
return {
|
|
137
13
|
localStatus: status || InputStatus.DEFAULT,
|
|
138
14
|
inputType: type,
|
|
@@ -141,6 +17,129 @@ export var useInput = function (_a) {
|
|
|
141
17
|
IconWrapper: CreateIconWrapper,
|
|
142
18
|
};
|
|
143
19
|
}
|
|
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
|
+
};
|
|
144
143
|
};
|
|
145
144
|
var CreateIconWrapper = function (_a) {
|
|
146
145
|
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;
|
|
@@ -148,4 +147,4 @@ var CreateIconWrapper = function (_a) {
|
|
|
148
147
|
React.createElement(Icon, { className: className, name: name, size: IconSize.SMALL, color: color }),
|
|
149
148
|
_value && _value.length > 0 && closeIconSearch && (React.createElement(Icon, { onClick: onClickCloseIconSearch, className: hashClass(clsx(is('justified-self'))), name: IconName.TIMES_CIRCLE, size: IconSize.SMALL }))));
|
|
150
149
|
};
|
|
151
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
150
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlSW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2lucHV0L2hvb2svdXNlSW5wdXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRzVELE9BQU8sRUFBRSxXQUFXLEVBQXFCLFNBQVMsRUFBbUIsTUFBTSw4QkFBOEIsQ0FBQTtBQU16RyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQzdDLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQWtDeEMsTUFBTSxDQUFDLElBQU0sUUFBUSxHQUFHLFVBQUMsRUFrQmY7UUFqQlIsWUFBWSxrQkFBQSxFQUNaLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLElBQUksVUFBQSxFQUNKLEtBQUssV0FBQSxFQUNMLFNBQVMsZUFBQSxFQUNULGNBQWMsb0JBQUEsRUFDZCxPQUFPLGFBQUEsRUFDUCxVQUFVLGdCQUFBLEVBQ1YsWUFBWSxrQkFBQSxFQUNaLFlBQVksa0JBQUEsRUFDWixPQUFPLGFBQUEsRUFDUCxZQUFZLGtCQUFBLEVBQ1osUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sV0FBVyxpQkFBQTtJQUVYLElBQUksUUFBUSxFQUFFO1FBQ1osT0FBTztZQUNMLFdBQVcsRUFBRSxNQUFNLElBQUksV0FBVyxDQUFDLE9BQU87WUFDMUMsU0FBUyxFQUFFLElBQUk7WUFDZixNQUFNLEVBQUUsWUFBWSxhQUFaLFlBQVksY0FBWixZQUFZLEdBQUksU0FBUztZQUNqQyxTQUFT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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
|
-
modal: React.RefObject<HTMLDivElement>;
|
|
9
|
-
display: boolean;
|
|
10
|
-
onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
11
|
-
handleClickModal: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
12
|
-
refModal: React.RefObject<HTMLDivElement>;
|
|
13
|
-
refBtnModal: React.MutableRefObject<any>;
|
|
14
|
-
handleCloseModal: (e: React.MouseEvent) => void;
|
|
15
|
-
buttonRef: (el: HTMLButtonElement | null) => HTMLButtonElement | null;
|
|
16
|
-
} | {
|
|
17
8
|
display: boolean;
|
|
18
9
|
modal?: undefined;
|
|
19
10
|
onKeyDown?: undefined;
|
|
@@ -22,5 +13,14 @@ export declare const useModal: ({ active, onClose }: IProps) => {
|
|
|
22
13
|
refBtnModal?: undefined;
|
|
23
14
|
handleCloseModal?: undefined;
|
|
24
15
|
buttonRef?: undefined;
|
|
16
|
+
} | {
|
|
17
|
+
modal: React.RefObject<HTMLDivElement>;
|
|
18
|
+
display: boolean;
|
|
19
|
+
onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
20
|
+
handleClickModal: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
21
|
+
refModal: React.RefObject<HTMLDivElement>;
|
|
22
|
+
refBtnModal: React.MutableRefObject<any>;
|
|
23
|
+
handleCloseModal: (e: React.MouseEvent) => void;
|
|
24
|
+
buttonRef: (el: HTMLButtonElement | null) => HTMLButtonElement | null;
|
|
25
25
|
};
|
|
26
26
|
export {};
|
|
@@ -1,86 +1,84 @@
|
|
|
1
1
|
import { __read } from "tslib";
|
|
2
|
+
import { isServer } from '../../../helpers/isServer';
|
|
2
3
|
import React from 'react';
|
|
3
4
|
export var useModal = function (_a) {
|
|
4
5
|
var active = _a.active, onClose = _a.onClose;
|
|
5
|
-
|
|
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
|
-
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
|
-
}
|
|
6
|
+
if (isServer)
|
|
7
|
+
return { display: active || false };
|
|
8
|
+
var modal = React.useRef(null);
|
|
9
|
+
var _b = __read(React.useState(active || false), 2), display = _b[0], setDisplay = _b[1];
|
|
10
|
+
var refsActions = React.useRef([]);
|
|
11
|
+
var refBtnModal = React.useRef(null);
|
|
12
|
+
var refModal = React.useRef(null);
|
|
13
|
+
var _c = __read(React.useState(0), 2), setIndexFocusable = _c[1];
|
|
14
|
+
var handleClose = React.useCallback(function (onCloseFunc, e) {
|
|
15
|
+
setDisplay(false);
|
|
16
|
+
refBtnModal.current && refBtnModal.current.focus();
|
|
17
|
+
setIndexFocusable(0);
|
|
18
|
+
if (onCloseFunc)
|
|
19
|
+
onCloseFunc(e);
|
|
20
|
+
}, [refBtnModal.current]);
|
|
21
|
+
var onKeyDown = React.useCallback(function (event) {
|
|
22
|
+
if (display && refsActions.current) {
|
|
23
|
+
var refs_1 = refsActions.current.filter(function (ref) { return ref; });
|
|
24
|
+
var key = event.key;
|
|
25
|
+
if (key === 'Tab') {
|
|
26
|
+
event.preventDefault();
|
|
27
|
+
setIndexFocusable(function (prev) {
|
|
28
|
+
var _a;
|
|
29
|
+
var nextIndex = (prev + 1) % refs_1.length;
|
|
30
|
+
refs_1[nextIndex] && ((_a = refs_1[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31
|
+
return nextIndex;
|
|
32
|
+
});
|
|
39
33
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
34
|
+
if (key === 'Escape') {
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
setDisplay(false);
|
|
37
|
+
refBtnModal.current && refBtnModal.current.focus();
|
|
38
|
+
setIndexFocusable(0);
|
|
39
|
+
onClose && onClose();
|
|
45
40
|
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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); });
|
|
41
|
+
}
|
|
42
|
+
}, [refsActions.current.length, display]);
|
|
43
|
+
var handleClickModal = React.useCallback(function (e) {
|
|
44
|
+
var _a;
|
|
45
|
+
if (!((_a = modal === null || modal === void 0 ? void 0 : modal.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
46
|
+
handleClose(onClose, e);
|
|
47
|
+
}
|
|
48
|
+
}, [modal, handleClose]);
|
|
49
|
+
var handleCloseModal = React.useCallback(function (e) {
|
|
50
|
+
handleClose(onClose, e);
|
|
51
|
+
}, [handleClose, onClose]);
|
|
52
|
+
var buttonRef = React.useCallback(function (el) { return el && refsActions && (refsActions.current[0] = el); }, []);
|
|
53
|
+
React.useEffect(function () {
|
|
54
|
+
display && refsActions.current[0] && refsActions.current[0].focus();
|
|
55
|
+
}, [display, refsActions === null || refsActions === void 0 ? void 0 : refsActions.current.length]);
|
|
56
|
+
React.useEffect(function () {
|
|
57
|
+
setDisplay(function (prev) {
|
|
58
|
+
if (prev) {
|
|
59
|
+
refBtnModal.current && refBtnModal.current.focus();
|
|
60
|
+
setIndexFocusable(0);
|
|
69
61
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
62
|
+
return active || false;
|
|
63
|
+
});
|
|
64
|
+
}, [active]);
|
|
65
|
+
React.useEffect(function () {
|
|
66
|
+
if (refModal.current) {
|
|
67
|
+
var footer = refModal.current.querySelector('[data-modal-footer]');
|
|
68
|
+
var getCTA = footer === null || footer === void 0 ? void 0 : footer.querySelectorAll('button');
|
|
69
|
+
if (getCTA)
|
|
70
|
+
getCTA.forEach(function (el, i) { return (refsActions.current[i + 1] = el); });
|
|
71
|
+
}
|
|
72
|
+
}, [refModal.current]);
|
|
73
|
+
return {
|
|
74
|
+
modal: modal,
|
|
75
|
+
display: display,
|
|
76
|
+
onKeyDown: onKeyDown,
|
|
77
|
+
handleClickModal: handleClickModal,
|
|
78
|
+
refModal: refModal,
|
|
79
|
+
refBtnModal: refBtnModal,
|
|
80
|
+
handleCloseModal: handleCloseModal,
|
|
81
|
+
buttonRef: buttonRef,
|
|
82
|
+
};
|
|
85
83
|
};
|
|
86
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
84
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2hvb2tzL3VzZU1vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQzdDLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQU96QixNQUFNLENBQUMsSUFBTSxRQUFRLEdBQUcsVUFBQyxFQUEyQjtRQUF6QixNQUFNLFlBQUEsRUFBRSxPQUFPLGFBQUE7SUFDeEMsSUFBSSxRQUFRO1FBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLElBQUksS0FBSyxFQUFFLENBQUE7SUFFakQsSUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUE7SUFDMUMsSUFBQSxLQUFBLE9BQXdCLEtBQUssQ0FBQyxRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELE9BQU8sUUFBQSxFQUFFLFVBQVUsUUFBNEMsQ0FBQTtJQUV0RSxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFrQyxFQUFFLENBQUMsQ0FBQTtJQUNyRSxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFNLElBQUksQ0FBQyxDQUFBO0lBQzNDLElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFBO0lBQzdDLElBQUEsS0FBQSxPQUF3QixLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQXRDLGlCQUFpQixRQUFxQixDQUFBO0lBRS9DLElBQU0sV0FBVyxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ25DLFVBQUMsV0FBbUMsRUFBRSxDQUFlO1FBQ25ELFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQTtRQUNqQixXQUFXLENBQUMsT0FBTyxJQUFJLFdBQVcsQ0FBQyxPQUFPLENBQUMs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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: (e: React.KeyboardEvent<HTMLInputElement>) => false | void;
|
|
12
|
-
inputOnFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
13
|
-
inputOnChange: (e: React.ChangeEvent<HTMLInputElement>, idx: number) => void;
|
|
14
|
-
} | {
|
|
15
10
|
codeInput: (number | null)[];
|
|
16
11
|
inputOnKeyUp?: undefined;
|
|
17
12
|
inputOnFocus?: undefined;
|
|
18
13
|
inputOnChange?: undefined;
|
|
14
|
+
} | {
|
|
15
|
+
codeInput: (number | null)[];
|
|
16
|
+
inputOnKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => false | void;
|
|
17
|
+
inputOnFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
18
|
+
inputOnChange: (e: React.ChangeEvent<HTMLInputElement>, idx: number) => void;
|
|
19
19
|
};
|
|
20
20
|
export {};
|