mimir-ui-kit 0.0.24 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +36 -11
- package/package.json +111 -91
- package/dist/assets/Button.css +0 -1
- package/dist/assets/Input.css +0 -1
- package/dist/assets/InputPassword.css +0 -1
- package/dist/assets/OtpInput.css +0 -1
- package/dist/assets/fonts/11d5bc9f0cad36d1.woff2 +0 -0
- package/dist/assets/fonts/1a738bfdbc1e4d9d.woff +0 -0
- package/dist/assets/fonts/242d04bef81519ae.woff2 +0 -0
- package/dist/assets/fonts/3b9f59412b17ff93.woff +0 -0
- package/dist/assets/fonts/3cdd7fabbe89d2b9.woff +0 -0
- package/dist/assets/fonts/43b748f250df0f08.woff +0 -0
- package/dist/assets/fonts/585d10920d676fcd.woff2 +0 -0
- package/dist/assets/fonts/63611593e008a77c.woff2 +0 -0
- package/dist/assets/fonts/badaa6d1837432de.woff +0 -0
- package/dist/assets/fonts/cac2ba46e8c8adc9.woff2 +0 -0
- package/dist/assets/fonts/d080ae18fd04e52c.woff2 +0 -0
- package/dist/assets/fonts/e51d2feb30084bc2.woff2 +0 -0
- package/dist/assets/fonts/ee3db32f0aadef5d.woff2 +0 -0
- package/dist/assets/fonts/f4d681a788c6d497.woff2 +0 -0
- package/dist/assets/index.css +0 -1
- package/dist/components/Button/Button.d.ts +0 -84
- package/dist/components/Button/Button.js +0 -86
- package/dist/components/Button/constants.d.ts +0 -25
- package/dist/components/Button/constants.js +0 -35
- package/dist/components/Button/index.d.ts +0 -2
- package/dist/components/Button/index.js +0 -9
- package/dist/components/Button/types.d.ts +0 -14
- package/dist/components/Button/types.js +0 -1
- package/dist/components/Input/Input.d.ts +0 -63
- package/dist/components/Input/Input.js +0 -109
- package/dist/components/Input/constants.d.ts +0 -12
- package/dist/components/Input/constants.js +0 -18
- package/dist/components/Input/index.d.ts +0 -3
- package/dist/components/Input/index.js +0 -7
- package/dist/components/Input/types.d.ts +0 -11
- package/dist/components/Input/types.js +0 -1
- package/dist/components/InputPassword/InputPassword.d.ts +0 -12
- package/dist/components/InputPassword/InputPassword.js +0 -40
- package/dist/components/InputPassword/index.d.ts +0 -2
- package/dist/components/InputPassword/index.js +0 -4
- package/dist/components/InputPhoneNumber/InputPhoneNumber.d.ts +0 -12
- package/dist/components/InputPhoneNumber/InputPhoneNumber.js +0 -38
- package/dist/components/InputPhoneNumber/index.d.ts +0 -2
- package/dist/components/InputPhoneNumber/index.js +0 -7
- package/dist/components/InputPhoneNumber/utils.d.ts +0 -2
- package/dist/components/InputPhoneNumber/utils.js +0 -26
- package/dist/components/OtpInput/OtpInput.d.ts +0 -23
- package/dist/components/OtpInput/OtpInput.js +0 -142
- package/dist/components/OtpInput/constants.d.ts +0 -3
- package/dist/components/OtpInput/constants.js +0 -8
- package/dist/components/OtpInput/index.d.ts +0 -1
- package/dist/components/OtpInput/index.js +0 -4
- package/dist/components/icons/Eye.d.ts +0 -1
- package/dist/components/icons/Eye.js +0 -35
- package/dist/components/icons/index.d.ts +0 -1
- package/dist/components/icons/index.js +0 -4
- package/dist/components/index.d.ts +0 -7
- package/dist/components/index.js +0 -23
- package/dist/hooks/index.d.ts +0 -1
- package/dist/hooks/index.js +0 -6
- package/dist/hooks/useMediaQuery/constants.d.ts +0 -7
- package/dist/hooks/useMediaQuery/constants.js +0 -11
- package/dist/hooks/useMediaQuery/index.d.ts +0 -2
- package/dist/hooks/useMediaQuery/index.js +0 -6
- package/dist/hooks/useMediaQuery/useMediaQuery.d.ts +0 -14
- package/dist/hooks/useMediaQuery/useMediaQuery.js +0 -19
- package/dist/index-CweZ_OcN.js +0 -65
- package/dist/index.d.ts +0 -3
- package/dist/index.js +0 -27
@@ -1,63 +0,0 @@
|
|
1
|
-
import { ReactNode } from 'react';
|
2
|
-
import { TInputProps, TSize, TVariant } from './types';
|
3
|
-
|
4
|
-
export type TProps = TInputProps & {
|
5
|
-
/**
|
6
|
-
* Размер ввода.
|
7
|
-
*/
|
8
|
-
size?: TSize;
|
9
|
-
/**
|
10
|
-
* `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
|
11
|
-
*/
|
12
|
-
variant?: TVariant;
|
13
|
-
/**
|
14
|
-
* Дополнительный класс.
|
15
|
-
*/
|
16
|
-
className?: string;
|
17
|
-
/**
|
18
|
-
* Дополнительный класс для обертки поля ввода.
|
19
|
-
*/
|
20
|
-
wrapperClassName?: string;
|
21
|
-
/**
|
22
|
-
* Текстовое описание поля ввода.
|
23
|
-
*/
|
24
|
-
label?: ReactNode;
|
25
|
-
/**
|
26
|
-
* Автоматически фокусировать ввод при монтировании.
|
27
|
-
*/
|
28
|
-
autofocus?: boolean;
|
29
|
-
/**
|
30
|
-
* Сделать ввод только для чтения.
|
31
|
-
*/
|
32
|
-
readonly?: boolean;
|
33
|
-
};
|
34
|
-
export declare const Input: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TInputProps & {
|
35
|
-
/**
|
36
|
-
* Размер ввода.
|
37
|
-
*/
|
38
|
-
size?: TSize;
|
39
|
-
/**
|
40
|
-
* `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
|
41
|
-
*/
|
42
|
-
variant?: TVariant;
|
43
|
-
/**
|
44
|
-
* Дополнительный класс.
|
45
|
-
*/
|
46
|
-
className?: string;
|
47
|
-
/**
|
48
|
-
* Дополнительный класс для обертки поля ввода.
|
49
|
-
*/
|
50
|
-
wrapperClassName?: string;
|
51
|
-
/**
|
52
|
-
* Текстовое описание поля ввода.
|
53
|
-
*/
|
54
|
-
label?: ReactNode;
|
55
|
-
/**
|
56
|
-
* Автоматически фокусировать ввод при монтировании.
|
57
|
-
*/
|
58
|
-
autofocus?: boolean;
|
59
|
-
/**
|
60
|
-
* Сделать ввод только для чтения.
|
61
|
-
*/
|
62
|
-
readonly?: boolean;
|
63
|
-
} & import('react').RefAttributes<HTMLInputElement>>>;
|
@@ -1,109 +0,0 @@
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
-
import { memo, forwardRef, useState, useEffect } from "react";
|
3
|
-
import { c as classNames } from "../../index-CweZ_OcN.js";
|
4
|
-
import { EInputVariant } from "./constants.js";
|
5
|
-
import '../../assets/Input.css';const input = "_input_1k42j_1";
|
6
|
-
const s = "_s_1k42j_27";
|
7
|
-
const m = "_m_1k42j_38";
|
8
|
-
const l = "_l_1k42j_49";
|
9
|
-
const success = "_success_1k42j_90";
|
10
|
-
const alarm = "_alarm_1k42j_108";
|
11
|
-
const error = "_error_1k42j_126";
|
12
|
-
const disabled = "_disabled_1k42j_155";
|
13
|
-
const label = "_label_1k42j_181";
|
14
|
-
const cls = {
|
15
|
-
input,
|
16
|
-
s,
|
17
|
-
m,
|
18
|
-
l,
|
19
|
-
"default-gray": "_default-gray_1k42j_60",
|
20
|
-
"default-white": "_default-white_1k42j_72",
|
21
|
-
success,
|
22
|
-
alarm,
|
23
|
-
error,
|
24
|
-
disabled,
|
25
|
-
"input-wrapper": "_input-wrapper_1k42j_173",
|
26
|
-
"has-label": "_has-label_1k42j_177",
|
27
|
-
label,
|
28
|
-
"active-label": "_active-label_1k42j_196"
|
29
|
-
};
|
30
|
-
const Input = memo(
|
31
|
-
forwardRef(
|
32
|
-
(props, ref) => {
|
33
|
-
const {
|
34
|
-
value,
|
35
|
-
className,
|
36
|
-
wrapperClassName,
|
37
|
-
variant = EInputVariant.DefaultGray,
|
38
|
-
type = "text",
|
39
|
-
autofocus,
|
40
|
-
readonly,
|
41
|
-
onFocus,
|
42
|
-
onBlur,
|
43
|
-
label: label2,
|
44
|
-
disabled: disabled2,
|
45
|
-
size = "m",
|
46
|
-
...otherProps
|
47
|
-
} = props;
|
48
|
-
const [isFocused, setIsFocused] = useState(autofocus);
|
49
|
-
useEffect(() => {
|
50
|
-
if (autofocus) {
|
51
|
-
setIsFocused(true);
|
52
|
-
}
|
53
|
-
}, [autofocus]);
|
54
|
-
const handleBlur = (event) => {
|
55
|
-
const currentValue = event.currentTarget.value;
|
56
|
-
onBlur == null ? void 0 : onBlur(event);
|
57
|
-
if (currentValue) {
|
58
|
-
return;
|
59
|
-
}
|
60
|
-
setIsFocused(false);
|
61
|
-
};
|
62
|
-
const handleFocus = (event) => {
|
63
|
-
if (readonly) {
|
64
|
-
return;
|
65
|
-
}
|
66
|
-
setIsFocused(true);
|
67
|
-
onFocus == null ? void 0 : onFocus(event);
|
68
|
-
};
|
69
|
-
const mods = {
|
70
|
-
[cls.readonly]: disabled2 || readonly,
|
71
|
-
[cls.focused]: isFocused,
|
72
|
-
[cls.disabled]: disabled2 || readonly,
|
73
|
-
[cls["has-label"]]: !!label2
|
74
|
-
};
|
75
|
-
const labelClassNames = classNames(
|
76
|
-
cls.label,
|
77
|
-
{
|
78
|
-
[cls["active-label"]]: isFocused || value
|
79
|
-
},
|
80
|
-
className,
|
81
|
-
cls[size]
|
82
|
-
);
|
83
|
-
const inputClassNames = classNames(cls.input, mods, className, [
|
84
|
-
cls[variant],
|
85
|
-
cls[size]
|
86
|
-
]);
|
87
|
-
return /* @__PURE__ */ jsxs("div", { className: classNames(cls["input-wrapper"], wrapperClassName), children: [
|
88
|
-
label2 && /* @__PURE__ */ jsx("label", { className: labelClassNames, children: label2 }),
|
89
|
-
/* @__PURE__ */ jsx(
|
90
|
-
"input",
|
91
|
-
{
|
92
|
-
ref,
|
93
|
-
type,
|
94
|
-
className: inputClassNames,
|
95
|
-
onFocus: handleFocus,
|
96
|
-
onBlur: handleBlur,
|
97
|
-
readOnly: readonly,
|
98
|
-
value,
|
99
|
-
...otherProps
|
100
|
-
}
|
101
|
-
)
|
102
|
-
] });
|
103
|
-
}
|
104
|
-
)
|
105
|
-
);
|
106
|
-
Input.displayName = "Input";
|
107
|
-
export {
|
108
|
-
Input
|
109
|
-
};
|
@@ -1,18 +0,0 @@
|
|
1
|
-
var EInputVariant = /* @__PURE__ */ ((EInputVariant2) => {
|
2
|
-
EInputVariant2["Alarm"] = "alarm";
|
3
|
-
EInputVariant2["Success"] = "success";
|
4
|
-
EInputVariant2["Error"] = "error";
|
5
|
-
EInputVariant2["DefaultGray"] = "default-gray";
|
6
|
-
EInputVariant2["DefaultWhite"] = "default-white";
|
7
|
-
return EInputVariant2;
|
8
|
-
})(EInputVariant || {});
|
9
|
-
var EInputSize = /* @__PURE__ */ ((EInputSize2) => {
|
10
|
-
EInputSize2["S"] = "s";
|
11
|
-
EInputSize2["M"] = "m";
|
12
|
-
EInputSize2["L"] = "l";
|
13
|
-
return EInputSize2;
|
14
|
-
})(EInputSize || {});
|
15
|
-
export {
|
16
|
-
EInputSize,
|
17
|
-
EInputVariant
|
18
|
-
};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import { InputHTMLAttributes } from 'react';
|
2
|
-
import { EInputSize, EInputVariant } from './constants';
|
3
|
-
|
4
|
-
export type TSize = `${EInputSize}` | EInputSize;
|
5
|
-
export type TVariant = `${EInputVariant}` | EInputVariant;
|
6
|
-
export type TCommonCompoundInputProps = {
|
7
|
-
size?: TSize;
|
8
|
-
variant?: TVariant;
|
9
|
-
className?: string;
|
10
|
-
};
|
11
|
-
export type TInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'size' | 'placeholder'>;
|
@@ -1 +0,0 @@
|
|
1
|
-
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { TInputProps } from '../Input';
|
2
|
-
|
3
|
-
export type TProps = TInputProps;
|
4
|
-
export declare const InputPassword: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps & {
|
5
|
-
size?: import('../Input').TSize;
|
6
|
-
variant?: import('../Input').TVariant;
|
7
|
-
className?: string;
|
8
|
-
wrapperClassName?: string;
|
9
|
-
label?: import('react').ReactNode;
|
10
|
-
autofocus?: boolean;
|
11
|
-
readonly?: boolean;
|
12
|
-
} & import('react').RefAttributes<HTMLInputElement>>>;
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
-
import { memo, forwardRef, useState } from "react";
|
3
|
-
import { Input } from "../Input/Input.js";
|
4
|
-
import { Eye } from "../icons/Eye.js";
|
5
|
-
import '../../assets/InputPassword.css';const input = "_input_1vatm_1";
|
6
|
-
const wrapper = "_wrapper_1vatm_5";
|
7
|
-
const button = "_button_1vatm_20";
|
8
|
-
const cls = {
|
9
|
-
input,
|
10
|
-
wrapper,
|
11
|
-
"input-wrapper": "_input-wrapper_1vatm_16",
|
12
|
-
"button-wrapper": "_button-wrapper_1vatm_20",
|
13
|
-
button
|
14
|
-
};
|
15
|
-
const InputPassword = memo(
|
16
|
-
forwardRef(
|
17
|
-
({ size, ...props }, ref) => {
|
18
|
-
const [showPassword, setShowPassword] = useState(false);
|
19
|
-
const handleClick = () => setShowPassword(!showPassword);
|
20
|
-
return /* @__PURE__ */ jsxs("div", { className: cls.wrapper, children: [
|
21
|
-
/* @__PURE__ */ jsx(
|
22
|
-
Input,
|
23
|
-
{
|
24
|
-
ref,
|
25
|
-
className: cls.input,
|
26
|
-
wrapperClassName: cls["input-wrapper"],
|
27
|
-
size,
|
28
|
-
type: showPassword ? "text" : "password",
|
29
|
-
...props
|
30
|
-
}
|
31
|
-
),
|
32
|
-
/* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx("button", { type: "button", className: cls.button, onClick: handleClick, children: /* @__PURE__ */ jsx(Eye, {}) }) })
|
33
|
-
] });
|
34
|
-
}
|
35
|
-
)
|
36
|
-
);
|
37
|
-
InputPassword.displayName = "InputPassword";
|
38
|
-
export {
|
39
|
-
InputPassword
|
40
|
-
};
|
@@ -1,12 +0,0 @@
|
|
1
|
-
export type ImperativeHandle = Partial<HTMLInputElement> & {
|
2
|
-
getPhoneNumber: () => string;
|
3
|
-
};
|
4
|
-
export declare const InputPhoneNumber: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps & {
|
5
|
-
size?: import('../Input').TSize;
|
6
|
-
variant?: import('../Input').TVariant;
|
7
|
-
className?: string;
|
8
|
-
wrapperClassName?: string;
|
9
|
-
label?: import('react').ReactNode;
|
10
|
-
autofocus?: boolean;
|
11
|
-
readonly?: boolean;
|
12
|
-
} & import('react').RefAttributes<HTMLInputElement>>>;
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
2
|
-
import { memo, forwardRef, useState, useCallback, useImperativeHandle } from "react";
|
3
|
-
import { Input } from "../Input/Input.js";
|
4
|
-
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
|
5
|
-
const InputPhoneNumber = memo(
|
6
|
-
forwardRef(
|
7
|
-
({ value = "", onChange, ...props }, ref) => {
|
8
|
-
const [phone, setPhone] = useState(
|
9
|
-
() => getMaskedInputPhoneValue(value)
|
10
|
-
);
|
11
|
-
const handleChange = useCallback(
|
12
|
-
(event) => {
|
13
|
-
const maskedValue = getMaskedInputPhoneValue(event.target.value);
|
14
|
-
setPhone(maskedValue);
|
15
|
-
onChange == null ? void 0 : onChange({
|
16
|
-
...event,
|
17
|
-
target: {
|
18
|
-
...event.target,
|
19
|
-
value: getUnmaskedInputValue(maskedValue)
|
20
|
-
}
|
21
|
-
});
|
22
|
-
},
|
23
|
-
[onChange]
|
24
|
-
);
|
25
|
-
useImperativeHandle(
|
26
|
-
ref,
|
27
|
-
() => ({
|
28
|
-
getPhoneNumber: () => getUnmaskedInputValue(phone)
|
29
|
-
})
|
30
|
-
);
|
31
|
-
return /* @__PURE__ */ jsx(Input, { ref, value: phone, onChange: handleChange, ...props });
|
32
|
-
}
|
33
|
-
)
|
34
|
-
);
|
35
|
-
InputPhoneNumber.displayName = "InputPhoneNumber";
|
36
|
-
export {
|
37
|
-
InputPhoneNumber
|
38
|
-
};
|
@@ -1,26 +0,0 @@
|
|
1
|
-
const getMaskedInputPhoneValue = (value) => {
|
2
|
-
const rawValue = value.replace(/\D/g, "");
|
3
|
-
let formattedValue = "+7 ";
|
4
|
-
if (rawValue.startsWith("7")) {
|
5
|
-
formattedValue += "(" + rawValue.substring(1, 4);
|
6
|
-
} else {
|
7
|
-
formattedValue += rawValue.substring(0, 3);
|
8
|
-
}
|
9
|
-
if (rawValue.length > 4) {
|
10
|
-
formattedValue += ") " + rawValue.substring(4, 7);
|
11
|
-
}
|
12
|
-
if (rawValue.length > 7) {
|
13
|
-
formattedValue += "-" + rawValue.substring(7, 9);
|
14
|
-
}
|
15
|
-
if (rawValue.length > 9) {
|
16
|
-
formattedValue += "-" + rawValue.substring(9, 11);
|
17
|
-
}
|
18
|
-
return formattedValue;
|
19
|
-
};
|
20
|
-
const getUnmaskedInputValue = (value) => {
|
21
|
-
return value.replace(/\D/g, "");
|
22
|
-
};
|
23
|
-
export {
|
24
|
-
getMaskedInputPhoneValue,
|
25
|
-
getUnmaskedInputValue
|
26
|
-
};
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { TInputProps } from '../Input';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Компонент ввода одноразового пароля (OTP).
|
5
|
-
*
|
6
|
-
* Компонент представляет собой набор вводов, каждый из которых может содержать только цифры.
|
7
|
-
* Пользователь может вводить цифры в каждый ввод, и при вводе каждой цифры происходит автоматическое переключение на следующий ввод.
|
8
|
-
*/
|
9
|
-
export declare const OtpInput: import('react').ForwardRefExoticComponent<Omit<TInputProps, "label" | "onChange"> & {
|
10
|
-
value?: string;
|
11
|
-
/**
|
12
|
-
* Количество полей ввода.
|
13
|
-
*/
|
14
|
-
valueLength?: number;
|
15
|
-
/**
|
16
|
-
* Функция, для изменения значения поля ввода.
|
17
|
-
*/
|
18
|
-
onChange?: (value: string) => void;
|
19
|
-
/**
|
20
|
-
* Флаг, показывающий нужно ли отображать разделитель между вводами.
|
21
|
-
*/
|
22
|
-
needSeparator?: boolean;
|
23
|
-
} & import('react').RefAttributes<unknown>>;
|
@@ -1,142 +0,0 @@
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
2
|
-
import { forwardRef, useRef, useImperativeHandle, useMemo, Fragment } from "react";
|
3
|
-
import { c as classNames } from "../../index-CweZ_OcN.js";
|
4
|
-
import { Input } from "../Input/Input.js";
|
5
|
-
import { RE_DIGIT, ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
|
6
|
-
import '../../assets/OtpInput.css';const otp = "_otp_jnjdw_2";
|
7
|
-
const input = "_input_jnjdw_14";
|
8
|
-
const separator = "_separator_jnjdw_28";
|
9
|
-
const cls = {
|
10
|
-
otp,
|
11
|
-
"input-wrapper": "_input-wrapper_jnjdw_14",
|
12
|
-
input,
|
13
|
-
separator
|
14
|
-
};
|
15
|
-
const OtpInput = forwardRef(
|
16
|
-
({
|
17
|
-
value = "",
|
18
|
-
valueLength = DEFAULT_VALUE_LENGTH,
|
19
|
-
needSeparator = true,
|
20
|
-
onChange,
|
21
|
-
className,
|
22
|
-
...props
|
23
|
-
}, ref) => {
|
24
|
-
const inputRefs = useRef([]);
|
25
|
-
useImperativeHandle(ref, () => ({
|
26
|
-
focus: () => {
|
27
|
-
var _a;
|
28
|
-
(_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
|
29
|
-
}
|
30
|
-
}));
|
31
|
-
const valueItems = useMemo(() => {
|
32
|
-
const valueArray = value.split("");
|
33
|
-
const items = [];
|
34
|
-
for (let i = 0; i < valueLength; i++) {
|
35
|
-
const char = valueArray[i];
|
36
|
-
if (RE_DIGIT.test(char)) {
|
37
|
-
items.push(char);
|
38
|
-
} else {
|
39
|
-
items.push("");
|
40
|
-
}
|
41
|
-
}
|
42
|
-
return items;
|
43
|
-
}, [value, valueLength]);
|
44
|
-
const handleFocusToNextInput = (index) => {
|
45
|
-
var _a;
|
46
|
-
if (index < valueLength - 1) {
|
47
|
-
(_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
|
48
|
-
}
|
49
|
-
};
|
50
|
-
const handleFocusToPrevInput = (index) => {
|
51
|
-
var _a;
|
52
|
-
if (index > 0) {
|
53
|
-
(_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
|
54
|
-
}
|
55
|
-
};
|
56
|
-
const handleChange = (e, index) => {
|
57
|
-
const target = e.target;
|
58
|
-
let targetValue = target.value.trim();
|
59
|
-
const isTargetValueDigit = RE_DIGIT.test(targetValue);
|
60
|
-
if (!isTargetValueDigit && targetValue !== "") {
|
61
|
-
return;
|
62
|
-
}
|
63
|
-
const nextInputEl = inputRefs.current[index + 1];
|
64
|
-
if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
|
65
|
-
return;
|
66
|
-
}
|
67
|
-
targetValue = isTargetValueDigit ? targetValue.trim() : " ";
|
68
|
-
const targetValueLength = targetValue.length;
|
69
|
-
if (targetValueLength === 1) {
|
70
|
-
const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
|
71
|
-
onChange == null ? void 0 : onChange(newValue.trim());
|
72
|
-
if (isTargetValueDigit) {
|
73
|
-
handleFocusToNextInput(index);
|
74
|
-
}
|
75
|
-
} else if (targetValueLength === valueLength) {
|
76
|
-
onChange == null ? void 0 : onChange(targetValue.trim());
|
77
|
-
target.blur();
|
78
|
-
}
|
79
|
-
};
|
80
|
-
const handleKeyDown = (e, index) => {
|
81
|
-
const { key } = e;
|
82
|
-
const target = e.target;
|
83
|
-
switch (key) {
|
84
|
-
case "ArrowRight":
|
85
|
-
case "ArrowDown": {
|
86
|
-
e.preventDefault();
|
87
|
-
return handleFocusToNextInput(index);
|
88
|
-
}
|
89
|
-
case "ArrowLeft":
|
90
|
-
case "ArrowUp": {
|
91
|
-
e.preventDefault();
|
92
|
-
return handleFocusToPrevInput(index);
|
93
|
-
}
|
94
|
-
}
|
95
|
-
const targetValue = target.value.trim();
|
96
|
-
target.setSelectionRange(0, targetValue.length);
|
97
|
-
if (e.key !== "Backspace" || targetValue !== "") {
|
98
|
-
return;
|
99
|
-
}
|
100
|
-
const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
|
101
|
-
onChange == null ? void 0 : onChange(newValue.trim());
|
102
|
-
handleFocusToPrevInput(index);
|
103
|
-
};
|
104
|
-
const handleFocus = (e, index) => {
|
105
|
-
const target = e.target;
|
106
|
-
const prevInputEl = inputRefs.current[index - 1];
|
107
|
-
if (prevInputEl && prevInputEl.value === "") {
|
108
|
-
prevInputEl.focus();
|
109
|
-
}
|
110
|
-
target.setSelectionRange(0, target.value.length);
|
111
|
-
};
|
112
|
-
return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp, className), children: valueItems.map((digit, idx) => {
|
113
|
-
const nextIndex = idx + 1;
|
114
|
-
const showSeparator = needSeparator && nextIndex % ITEMS_PER_SEPARATOR === 0 && nextIndex !== valueItems.length;
|
115
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
116
|
-
/* @__PURE__ */ jsx(
|
117
|
-
Input,
|
118
|
-
{
|
119
|
-
ref: (el) => inputRefs.current[idx] = el,
|
120
|
-
type: "text",
|
121
|
-
inputMode: "numeric",
|
122
|
-
autoComplete: "one-time-code",
|
123
|
-
pattern: "\\d{1}",
|
124
|
-
maxLength: 1,
|
125
|
-
value: digit,
|
126
|
-
className: cls.input,
|
127
|
-
wrapperClassName: cls["input-wrapper"],
|
128
|
-
onChange: (e) => handleChange(e, idx),
|
129
|
-
onKeyDown: (e) => handleKeyDown(e, idx),
|
130
|
-
onFocus: (e) => handleFocus(e, idx),
|
131
|
-
...props
|
132
|
-
}
|
133
|
-
),
|
134
|
-
showSeparator && /* @__PURE__ */ jsx("span", { className: classNames(cls.separator) })
|
135
|
-
] }, idx);
|
136
|
-
}) });
|
137
|
-
}
|
138
|
-
);
|
139
|
-
OtpInput.displayName = "OtpInput";
|
140
|
-
export {
|
141
|
-
OtpInput
|
142
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
export { OtpInput } from './OtpInput';
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const Eye: () => import("react/jsx-runtime").JSX.Element;
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
-
const Eye = () => {
|
3
|
-
return /* @__PURE__ */ jsxs(
|
4
|
-
"svg",
|
5
|
-
{
|
6
|
-
width: "25",
|
7
|
-
height: "24",
|
8
|
-
viewBox: "0 0 25 24",
|
9
|
-
xmlns: "http://www.w3.org/2000/svg",
|
10
|
-
children: [
|
11
|
-
/* @__PURE__ */ jsx(
|
12
|
-
"path",
|
13
|
-
{
|
14
|
-
fillRule: "evenodd",
|
15
|
-
clipRule: "evenodd",
|
16
|
-
d: "M12.5 14.5C13.8807 14.5 15 13.3807 15 12C15 10.6193 13.8807 9.5 12.5 9.5C11.1193 9.5 10 10.6193 10 12C10 13.3807 11.1193 14.5 12.5 14.5ZM12.5 16C14.7091 16 16.5 14.2091 16.5 12C16.5 9.79086 14.7091 8 12.5 8C10.2909 8 8.5 9.79086 8.5 12C8.5 14.2091 10.2909 16 12.5 16Z",
|
17
|
-
fill: "#666666"
|
18
|
-
}
|
19
|
-
),
|
20
|
-
/* @__PURE__ */ jsx(
|
21
|
-
"path",
|
22
|
-
{
|
23
|
-
fillRule: "evenodd",
|
24
|
-
clipRule: "evenodd",
|
25
|
-
d: "M2.5 12C2.5 12 6.97715 19 12.5 19C18.0228 19 22.5 12 22.5 12C22.5 12 18.0228 5 12.5 5C6.97715 5 2.5 12 2.5 12ZM4.33813 12C4.38111 12.057 4.42632 12.1163 4.47372 12.1778C4.94838 12.7934 5.63246 13.6102 6.47167 14.4217C8.20962 16.1024 10.3437 17.5 12.5 17.5C14.6563 17.5 16.7904 16.1024 18.5283 14.4217C19.3675 13.6102 20.0516 12.7934 20.5263 12.1778C20.5737 12.1163 20.6189 12.057 20.6619 12C20.6189 11.943 20.5737 11.8837 20.5263 11.8222C20.0516 11.2066 19.3675 10.3898 18.5283 9.57828C16.7904 7.89761 14.6563 6.5 12.5 6.5C10.3437 6.5 8.20962 7.89761 6.47167 9.57828C5.63246 10.3898 4.94838 11.2066 4.47372 11.8222C4.42632 11.8837 4.38111 11.943 4.33813 12Z",
|
26
|
-
fill: "#666666"
|
27
|
-
}
|
28
|
-
)
|
29
|
-
]
|
30
|
-
}
|
31
|
-
);
|
32
|
-
};
|
33
|
-
export {
|
34
|
-
Eye
|
35
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
export { Eye } from './Eye';
|
@@ -1,7 +0,0 @@
|
|
1
|
-
export { Button, EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, type TButtonProps } from './Button';
|
2
|
-
export { Input, EInputSize, EInputVariant } from './Input';
|
3
|
-
export type { TInputProps, TSize, TVariant } from './Input';
|
4
|
-
export { InputPassword } from './InputPassword';
|
5
|
-
export type { TInputPasswordProps } from './InputPassword';
|
6
|
-
export { InputPhoneNumber, getMaskedInputPhoneValue, getUnmaskedInputValue } from './InputPhoneNumber';
|
7
|
-
export { OtpInput } from './OtpInput';
|
package/dist/components/index.js
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
import { Button } from "./Button/Button.js";
|
2
|
-
import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from "./Button/constants.js";
|
3
|
-
import { Input } from "./Input/Input.js";
|
4
|
-
import { EInputSize, EInputVariant } from "./Input/constants.js";
|
5
|
-
import { InputPassword } from "./InputPassword/InputPassword.js";
|
6
|
-
import { InputPhoneNumber } from "./InputPhoneNumber/InputPhoneNumber.js";
|
7
|
-
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./InputPhoneNumber/utils.js";
|
8
|
-
import { OtpInput } from "./OtpInput/OtpInput.js";
|
9
|
-
export {
|
10
|
-
Button,
|
11
|
-
EButtonForm,
|
12
|
-
EButtonSize,
|
13
|
-
EButtonVariantDefault,
|
14
|
-
EButtonVariantRound,
|
15
|
-
EInputSize,
|
16
|
-
EInputVariant,
|
17
|
-
Input,
|
18
|
-
InputPassword,
|
19
|
-
InputPhoneNumber,
|
20
|
-
OtpInput,
|
21
|
-
getMaskedInputPhoneValue,
|
22
|
-
getUnmaskedInputValue
|
23
|
-
};
|