krl-alfred 1.69.2 → 1.70.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.
|
@@ -29,10 +29,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
30
|
exports.IconStyled = exports.ButtonStyled = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
32
|
+
var devices_1 = require("../../constants/devices");
|
|
33
|
+
var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path, rect{\n stroke : white;\n }\n circle{\n fill : white; \n ~ path{\n stroke : var(--primary);\n }\n } \n }\n\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n \n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n } \n }\n }\n"], ["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path, rect{\n stroke : white;\n }\n circle{\n fill : white; \n ~ path{\n stroke : var(--primary);\n }\n } \n }\n\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n \n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n } \n }\n }\n"])), devices_1.devices.mdUp);
|
|
34
|
+
var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
35
|
+
var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
|
+
var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n }\n\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n }\n\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
37
|
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
|
|
37
38
|
switch (props.variant) {
|
|
38
39
|
case 'primary':
|
|
@@ -1,25 +1,139 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
16
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
var react_1 = require("react");
|
|
18
8
|
var OtpInput_styled_1 = require("./OtpInput.styled");
|
|
19
|
-
var react_otp_input_1 = __importDefault(require("react-otp-input"));
|
|
20
9
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
10
|
+
var keyEnums_1 = require("../../enums/keyEnums");
|
|
11
|
+
var keyDownEventName = 'keydown';
|
|
21
12
|
var Otp = function (props) {
|
|
22
|
-
|
|
13
|
+
var value = props.value, onInputChange = props.onInputChange, inputSize = props.inputSize, hasError = props.hasError, errorMessage = props.errorMessage, autoFocus = props.autoFocus;
|
|
14
|
+
var _a = (0, react_1.useState)(value), otpValue = _a[0], setOtpValue = _a[1];
|
|
15
|
+
var inputRef = (0, react_1.useRef)(null);
|
|
16
|
+
(0, react_1.useEffect)(function () {
|
|
17
|
+
setUserFocus();
|
|
18
|
+
}, [hasError]);
|
|
19
|
+
(0, react_1.useEffect)(function () {
|
|
20
|
+
if (value === undefined || value === null || value === '') {
|
|
21
|
+
setOtpValue('');
|
|
22
|
+
}
|
|
23
|
+
else if (!isNaN(Number(value))) {
|
|
24
|
+
setOtpValue(value.toString());
|
|
25
|
+
}
|
|
26
|
+
}, [value]);
|
|
27
|
+
var addKeydownEventListener = function () {
|
|
28
|
+
window.addEventListener(keyDownEventName, handleOnKeyDown);
|
|
29
|
+
};
|
|
30
|
+
var removeKeyDownEventListener = function () {
|
|
31
|
+
window.removeEventListener(keyDownEventName, handleOnKeyDown);
|
|
32
|
+
};
|
|
33
|
+
var isShortcutKey = function (keyCode) {
|
|
34
|
+
return keyCode === keyEnums_1.KeyConditions.CTRL_V;
|
|
35
|
+
};
|
|
36
|
+
var isKeyboardNumber = function (keyCode) {
|
|
37
|
+
return (keyCode > keyEnums_1.KeyConditions.KEYBOARD_MIN &&
|
|
38
|
+
keyCode < keyEnums_1.KeyConditions.KEYBOARD_MAX);
|
|
39
|
+
};
|
|
40
|
+
var isNumberPad = function (keyCode) {
|
|
41
|
+
return (keyCode > keyEnums_1.KeyConditions.NUMBERPAD_MIN &&
|
|
42
|
+
keyCode < keyEnums_1.KeyConditions.NUMBERPAD_MAX);
|
|
43
|
+
};
|
|
44
|
+
var handleOnKeyDown = (0, react_1.useCallback)(function (event) {
|
|
45
|
+
var key = event.key, keyCode = event.keyCode;
|
|
46
|
+
if (keyCode === keyEnums_1.KeyCodesEnums.BACKSPACE ||
|
|
47
|
+
key === keyEnums_1.KeyEnums.BACKSPACE ||
|
|
48
|
+
keyCode === keyEnums_1.KeyCodesEnums.DELETE ||
|
|
49
|
+
key === keyEnums_1.KeyEnums.DELETE) {
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
removeLastCharacter();
|
|
52
|
+
}
|
|
53
|
+
else if (isShortcutKey(event.keyCode)) {
|
|
54
|
+
event.preventDefault();
|
|
55
|
+
onShortcutPaste();
|
|
56
|
+
}
|
|
57
|
+
else if ((isKeyboardNumber(event.keyCode) || isNumberPad(event.keyCode)) &&
|
|
58
|
+
!isNaN(Number(event.key))) {
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
addNewCharacter(event.key);
|
|
61
|
+
}
|
|
62
|
+
}, []);
|
|
63
|
+
(0, react_1.useEffect)(function () {
|
|
64
|
+
addKeydownEventListener();
|
|
65
|
+
setUserFocus();
|
|
66
|
+
return function () {
|
|
67
|
+
removeKeyDownEventListener();
|
|
68
|
+
};
|
|
69
|
+
}, [handleOnKeyDown]);
|
|
70
|
+
var removeLastCharacter = function () {
|
|
71
|
+
var newValue = '';
|
|
72
|
+
setOtpValue(function (prevValue) {
|
|
73
|
+
newValue = prevValue ? prevValue.slice(0, -1) : '';
|
|
74
|
+
return newValue;
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
var addNewCharacter = function (character) {
|
|
78
|
+
var newValue = '';
|
|
79
|
+
setOtpValue(function (prevValue) {
|
|
80
|
+
newValue = prevValue || '';
|
|
81
|
+
if (!prevValue || (prevValue && prevValue.length < inputSize)) {
|
|
82
|
+
newValue += character;
|
|
83
|
+
}
|
|
84
|
+
return newValue;
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
(0, react_1.useEffect)(function () {
|
|
88
|
+
if (otpValue)
|
|
89
|
+
onInputChange(otpValue);
|
|
90
|
+
}, [otpValue]);
|
|
91
|
+
var onShortcutPaste = function () {
|
|
92
|
+
var _a;
|
|
93
|
+
var result = false;
|
|
94
|
+
if ((_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) {
|
|
95
|
+
try {
|
|
96
|
+
window.navigator.clipboard.readText().then(function (text) {
|
|
97
|
+
insertFromClipboard(text);
|
|
98
|
+
});
|
|
99
|
+
result = true;
|
|
100
|
+
}
|
|
101
|
+
catch (_) {
|
|
102
|
+
result = false;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
var insertFromClipboard = function (stringData) {
|
|
107
|
+
var intData = Number(stringData);
|
|
108
|
+
if (!isNaN(intData)) {
|
|
109
|
+
var formattedData = intData.toString();
|
|
110
|
+
setOtpValue(formattedData);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
var setUserFocus = function () {
|
|
114
|
+
if (inputRef.current) {
|
|
115
|
+
inputRef.current.focus();
|
|
116
|
+
inputRef.current.select();
|
|
117
|
+
inputRef.current.click();
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
var isMobileDevice = function () { return /Mobi/.test(window.navigator.userAgent); };
|
|
121
|
+
var onInputBlur = function () {
|
|
122
|
+
if (!isMobileDevice()) {
|
|
123
|
+
setUserFocus();
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
var onChange = function (event) {
|
|
127
|
+
var _a;
|
|
128
|
+
event.preventDefault();
|
|
129
|
+
if (!isNaN(Number((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value))) {
|
|
130
|
+
setOtpValue(event.target.value);
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputWrapper, { children: [(0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpanWrapper, { onClick: setUserFocus, children: Array.from({ length: inputSize }, function (_, index) { return index; }).map(function (index) { return ((0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpan, { active: (otpValue ? index === otpValue.length : index === 0) ||
|
|
134
|
+
(otpValue &&
|
|
135
|
+
otpValue.length === inputSize &&
|
|
136
|
+
index === inputSize - 1), hasError: hasError, children: otpValue && otpValue[index] }, index)); }) }), hasError && (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: errorMessage })] }), (0, jsx_runtime_1.jsx)("input", { type: 'tel', autoComplete: 'one-time-code', autoFocus: autoFocus, value: otpValue, maxLength: inputSize, ref: inputRef, onBlur: onInputBlur, onChange: onChange })] });
|
|
23
137
|
};
|
|
24
138
|
Otp.defaultProps = {
|
|
25
139
|
inputSize: 4,
|
|
@@ -7,7 +7,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.
|
|
10
|
+
exports.OtpError = exports.OtpSpan = exports.OtpSpanWrapper = exports.OtpInputWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.
|
|
13
|
-
|
|
12
|
+
exports.OtpInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n \n input {\n background-color: transparent;\n border: none;\n caret-color: transparent;\n cursor: default;\n height: 0;\n opacity: 0;\n outline: none;\n width: 0;\n z-index: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n \n input {\n background-color: transparent;\n border: none;\n caret-color: transparent;\n cursor: default;\n height: 0;\n opacity: 0;\n outline: none;\n width: 0;\n z-index: 0;\n }\n"])));
|
|
13
|
+
exports.OtpSpanWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-flex;\n gap: 18.33px;\n \n"], ["\n display: inline-flex;\n gap: 18.33px;\n \n"])));
|
|
14
|
+
exports.OtpSpan = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-family: var(--font-family-sans-serif);\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font-weight: 600;\n font-size: 40px;\n line-height: 19px;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n\n @keyframes blink-caret {\n from,\n to {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n ", "\n"], ["\n font-family: var(--font-family-sans-serif);\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font-weight: 600;\n font-size: 40px;\n line-height: 19px;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n\n @keyframes blink-caret {\n from,\n to {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n ", "\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (_a) {
|
|
15
|
+
var active = _a.active, hasError = _a.hasError;
|
|
16
|
+
return active &&
|
|
17
|
+
"\n border-color: ".concat(hasError ? 'var(--red)' : 'var(--dark)', ";\n\n &:empty:before {\n animation: blink-caret 0.9s step-end infinite;\n content: \"|\";\n color:var(--dark);\n display: inline-flex;\n font-weight: 100;\n font-size: 32px;\n margin-top: -4px;\n\n }\n ");
|
|
18
|
+
});
|
|
19
|
+
exports.OtpError = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n \n"], ["\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n \n"])));
|
|
20
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -4,10 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.Default = void 0;
|
|
7
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
var react_1 = require("react");
|
|
7
9
|
var Otp_1 = __importDefault(require("../Otp"));
|
|
10
|
+
var OtpStory = function (props) {
|
|
11
|
+
var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
|
|
12
|
+
var onChange = function (val) {
|
|
13
|
+
setValue(val);
|
|
14
|
+
};
|
|
15
|
+
return (0, jsx_runtime_1.jsx)(Otp_1.default, { value: value, onInputChange: onChange, autoFocus: props.autoFocus, errorMessage: props.errorMessage, hasError: props.hasError, inputSize: props.inputSize });
|
|
16
|
+
};
|
|
8
17
|
exports.default = {
|
|
9
18
|
title: 'Components/OtpInput',
|
|
10
|
-
component:
|
|
19
|
+
component: OtpStory,
|
|
11
20
|
tags: ['autodocs'],
|
|
12
21
|
argTypes: {
|
|
13
22
|
onInputChange: { action: 'changed' },
|
|
@@ -15,7 +24,9 @@ exports.default = {
|
|
|
15
24
|
};
|
|
16
25
|
exports.Default = {
|
|
17
26
|
args: {
|
|
18
|
-
|
|
19
|
-
|
|
27
|
+
autoFocus: true,
|
|
28
|
+
errorMessage: "Hata Mesajı",
|
|
29
|
+
hasError: false,
|
|
30
|
+
inputSize: 4
|
|
20
31
|
},
|
|
21
32
|
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.KeyConditions = exports.KeyEnums = exports.KeyCodesEnums = void 0;
|
|
4
|
+
exports.KeyCodesEnums = {
|
|
5
|
+
BACKSPACE: '8',
|
|
6
|
+
LEFT_ARROW: '37',
|
|
7
|
+
RIGHT_ARROW: '37',
|
|
8
|
+
DELETE: '46',
|
|
9
|
+
SPACE: '32'
|
|
10
|
+
};
|
|
11
|
+
exports.KeyEnums = {
|
|
12
|
+
BACKSPACE: 'Backspace',
|
|
13
|
+
LEFT_ARROW: 'Delete',
|
|
14
|
+
RIGHT_ARROW: 'ArrowLeft',
|
|
15
|
+
DELETE: 'ArrowRight',
|
|
16
|
+
SPACE: 'Spacebar'
|
|
17
|
+
};
|
|
18
|
+
exports.KeyConditions = {
|
|
19
|
+
KEYBOARD_MIN: 47,
|
|
20
|
+
KEYBOARD_MAX: 58,
|
|
21
|
+
NUMBERPAD_MIN: 95,
|
|
22
|
+
NUMBERPAD_MAX: 106,
|
|
23
|
+
CTRL_V: 86,
|
|
24
|
+
};
|