mimir-ui-kit 0.0.18 → 0.0.19

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/dist/components/Input/Input.js +3 -2
  2. package/dist/components/OtpInput/OtpInput.d.ts +13 -8
  3. package/dist/components/OtpInput/OtpInput.js +111 -113
  4. package/package.json +1 -1
package/dist/components/Input/Input.js CHANGED
@@ -89,13 +89,14 @@ const Input = memo(
89
89
  /* @__PURE__ */ jsx(
90
90
  "input",
91
91
  {
92
- ...otherProps,
93
92
  ref,
94
93
  type,
95
94
  className: inputClassNames,
96
95
  onFocus: handleFocus,
97
96
  onBlur: handleBlur,
98
- readOnly: readonly
97
+ readOnly: readonly,
98
+ value,
99
+ ...otherProps
99
100
  }
100
101
  )
101
102
  ] });
package/dist/components/OtpInput/OtpInput.d.ts CHANGED
@@ -1,12 +1,6 @@
1
1
  import { TInputProps } from '../Input';
2
2
 
3
- /**
4
- * Компонент ввода одноразового пароля (OTP).
5
- *
6
- * Компонент представляет собой набор вводов, каждый из которых может содержать только цифры.
7
- * Пользователь может вводить цифры в каждый ввод, и при вводе каждой цифры происходит автоматическое переключение на следующий ввод.
8
- */
9
- export declare const OtpInput: import('react').ForwardRefExoticComponent<Omit<TInputProps, "label" | "onChange"> & {
3
+ type TProps = Omit<TInputProps, 'onChange' | 'label'> & {
10
4
  value?: string;
11
5
  /**
12
6
  * Количество полей ввода.
@@ -20,4 +14,15 @@ export declare const OtpInput: import('react').ForwardRefExoticComponent<Omit<TI
20
14
  * Флаг, показывающий нужно ли отображать разделитель между вводами.
21
15
  */
22
16
  needSeparator?: boolean;
23
- } & import('react').RefAttributes<unknown>>;
17
+ };
18
+ /**
19
+ * Компонент ввода одноразового пароля (OTP).
20
+ *
21
+ * Компонент представляет собой набор вводов, каждый из которых может содержать только цифры.
22
+ * Пользователь может вводить цифры в каждый ввод, и при вводе каждой цифры происходит автоматическое переключение на следующий ввод.
23
+ */
24
+ export declare const OtpInput: {
25
+ ({ value, valueLength, needSeparator, onChange, ...props }: TProps): import("react/jsx-runtime").JSX.Element;
26
+ displayName: string;
27
+ };
28
+ export {};
package/dist/components/OtpInput/OtpInput.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { forwardRef, useRef, useMemo, Fragment } from "react";
2
+ import { useRef, useMemo, Fragment } from "react";
3
3
  import { c as classNames } from "../../index-CweZ_OcN.js";
4
4
  import { Input } from "../Input/Input.js";
5
5
  import { RE_DIGIT, ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
@@ -12,123 +12,121 @@ const cls = {
12
12
  input,
13
13
  separator
14
14
  };
15
- const OtpInput = forwardRef(
16
- ({
17
- value = "",
18
- valueLength = DEFAULT_VALUE_LENGTH,
19
- needSeparator = true,
20
- onChange,
21
- ...props
22
- }) => {
23
- const inputRefs = useRef([]);
24
- const valueItems = useMemo(() => {
25
- const valueArray = value.split("");
26
- const items = [];
27
- for (let i = 0; i < valueLength; i++) {
28
- const char = valueArray[i];
29
- if (RE_DIGIT.test(char)) {
30
- items.push(char);
31
- } else {
32
- items.push("");
33
- }
34
- }
35
- return items;
36
- }, [value, valueLength]);
37
- const handleFocusToNextInput = (index) => {
38
- var _a;
39
- if (index < valueLength - 1) {
40
- (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
41
- }
42
- };
43
- const handleFocusToPrevInput = (index) => {
44
- var _a;
45
- if (index > 0) {
46
- (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
15
+ const OtpInput = ({
16
+ value = "",
17
+ valueLength = DEFAULT_VALUE_LENGTH,
18
+ needSeparator = true,
19
+ onChange,
20
+ ...props
21
+ }) => {
22
+ const inputRefs = useRef([]);
23
+ const valueItems = useMemo(() => {
24
+ const valueArray = value.split("");
25
+ const items = [];
26
+ for (let i = 0; i < valueLength; i++) {
27
+ const char = valueArray[i];
28
+ if (RE_DIGIT.test(char)) {
29
+ items.push(char);
30
+ } else {
31
+ items.push("");
47
32
  }
48
- };
49
- const handleChange = (e, index) => {
50
- const target = e.target;
51
- let targetValue = target.value.trim();
52
- const isTargetValueDigit = RE_DIGIT.test(targetValue);
53
- if (!isTargetValueDigit && targetValue !== "") {
54
- return;
33
+ }
34
+ return items;
35
+ }, [value, valueLength]);
36
+ const handleFocusToNextInput = (index) => {
37
+ var _a;
38
+ if (index < valueLength - 1) {
39
+ (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
40
+ }
41
+ };
42
+ const handleFocusToPrevInput = (index) => {
43
+ var _a;
44
+ if (index > 0) {
45
+ (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
46
+ }
47
+ };
48
+ const handleChange = (e, index) => {
49
+ const target = e.target;
50
+ let targetValue = target.value.trim();
51
+ const isTargetValueDigit = RE_DIGIT.test(targetValue);
52
+ if (!isTargetValueDigit && targetValue !== "") {
53
+ return;
54
+ }
55
+ const nextInputEl = inputRefs.current[index + 1];
56
+ if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
57
+ return;
58
+ }
59
+ targetValue = isTargetValueDigit ? targetValue : " ";
60
+ const targetValueLength = targetValue.length;
61
+ if (targetValueLength === 1) {
62
+ const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
63
+ onChange == null ? void 0 : onChange(newValue);
64
+ if (isTargetValueDigit) {
65
+ handleFocusToNextInput(index);
55
66
  }
56
- const nextInputEl = inputRefs.current[index + 1];
57
- if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
58
- return;
67
+ } else if (targetValueLength === valueLength) {
68
+ onChange == null ? void 0 : onChange(targetValue);
69
+ target.blur();
70
+ }
71
+ };
72
+ const handleKeyDown = (e, index) => {
73
+ const { key } = e;
74
+ const target = e.target;
75
+ switch (key) {
76
+ case "ArrowRight":
77
+ case "ArrowDown": {
78
+ e.preventDefault();
79
+ return handleFocusToNextInput(index);
59
80
  }
60
- targetValue = isTargetValueDigit ? targetValue : " ";
61
- const targetValueLength = targetValue.length;
62
- if (targetValueLength === 1) {
63
- const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
64
- onChange == null ? void 0 : onChange(newValue);
65
- if (isTargetValueDigit) {
66
- handleFocusToNextInput(index);
67
- }
68
- } else if (targetValueLength === valueLength) {
69
- onChange == null ? void 0 : onChange(targetValue);
70
- target.blur();
81
+ case "ArrowLeft":
82
+ case "ArrowUp": {
83
+ e.preventDefault();
84
+ return handleFocusToPrevInput(index);
71
85
  }
72
- };
73
- const handleKeyDown = (e, index) => {
74
- const { key } = e;
75
- const target = e.target;
76
- switch (key) {
77
- case "ArrowRight":
78
- case "ArrowDown": {
79
- e.preventDefault();
80
- return handleFocusToNextInput(index);
81
- }
82
- case "ArrowLeft":
83
- case "ArrowUp": {
84
- e.preventDefault();
85
- return handleFocusToPrevInput(index);
86
+ }
87
+ const targetValue = target.value;
88
+ target.setSelectionRange(0, targetValue.length);
89
+ if (e.key !== "Backspace" || targetValue !== "") {
90
+ return;
91
+ }
92
+ const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
93
+ onChange == null ? void 0 : onChange(newValue);
94
+ handleFocusToPrevInput(index);
95
+ };
96
+ const handleFocus = (e, index) => {
97
+ const target = e.target;
98
+ const prevInputEl = inputRefs.current[index - 1];
99
+ if (prevInputEl && prevInputEl.value === "") {
100
+ prevInputEl.focus();
101
+ }
102
+ target.setSelectionRange(0, target.value.length);
103
+ };
104
+ return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp), children: valueItems.map((digit, idx) => {
105
+ const nextIndex = idx + 1;
106
+ const showSeparator = needSeparator && nextIndex % ITEMS_PER_SEPARATOR === 0 && nextIndex !== valueItems.length;
107
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
108
+ /* @__PURE__ */ jsx(
109
+ Input,
110
+ {
111
+ ref: (el) => inputRefs.current[idx] = el,
112
+ type: "text",
113
+ inputMode: "numeric",
114
+ autoComplete: "one-time-code",
115
+ pattern: "\\d{1}",
116
+ maxLength: 1,
117
+ value: digit,
118
+ className: cls.input,
119
+ wrapperClassName: cls["input-wrapper"],
120
+ onChange: (e) => handleChange(e, idx),
121
+ onKeyDown: (e) => handleKeyDown(e, idx),
122
+ onFocus: (e) => handleFocus(e, idx),
123
+ ...props
86
124
  }
87
- }
88
- const targetValue = target.value;
89
- target.setSelectionRange(0, targetValue.length);
90
- if (e.key !== "Backspace" || targetValue !== "") {
91
- return;
92
- }
93
- const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
94
- onChange == null ? void 0 : onChange(newValue);
95
- handleFocusToPrevInput(index);
96
- };
97
- const handleFocus = (e, index) => {
98
- const target = e.target;
99
- const prevInputEl = inputRefs.current[index - 1];
100
- if (prevInputEl && prevInputEl.value === "") {
101
- prevInputEl.focus();
102
- }
103
- target.setSelectionRange(0, target.value.length);
104
- };
105
- return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp), children: valueItems.map((digit, idx) => {
106
- const nextIndex = idx + 1;
107
- const showSeparator = needSeparator && nextIndex % ITEMS_PER_SEPARATOR === 0 && nextIndex !== valueItems.length;
108
- return /* @__PURE__ */ jsxs(Fragment, { children: [
109
- /* @__PURE__ */ jsx(
110
- Input,
111
- {
112
- ref: (el) => inputRefs.current[idx] = el,
113
- type: "text",
114
- inputMode: "numeric",
115
- autoComplete: "one-time-code",
116
- pattern: "\\d{1}",
117
- maxLength: 1,
118
- value: digit,
119
- className: cls.input,
120
- wrapperClassName: cls["input-wrapper"],
121
- onChange: (e) => handleChange(e, idx),
122
- onKeyDown: (e) => handleKeyDown(e, idx),
123
- onFocus: (e) => handleFocus(e, idx),
124
- ...props
125
- }
126
- ),
127
- showSeparator && /* @__PURE__ */ jsx("span", { className: classNames(cls.separator) })
128
- ] }, idx);
129
- }) });
130
- }
131
- );
125
+ ),
126
+ showSeparator && /* @__PURE__ */ jsx("span", { className: classNames(cls.separator) })
127
+ ] }, idx);
128
+ }) });
129
+ };
132
130
  OtpInput.displayName = "OtpInput";
133
131
  export {
134
132
  OtpInput
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mimir-ui-kit",
3
3
  "private": false,
4
- "version": "0.0.18",
4
+ "version": "0.0.19",
5
5
  "type": "module",
6
6
  "exports": "./dist/index.js",
7
7
  "module": "./dist/index.js",