@alfalab/core-components-time-input 2.1.19 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-time-input",
-    "version": "2.1.19",
+    "version": "2.2.1",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,7 +15,7 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^11.1.18",
+        "@alfalab/core-components-input": "^12.0.1",
         "tslib": "^2.4.0"
     }
 }

package/src/Component.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable no-useless-escape */
+
+import React, { ChangeEvent, useState } from 'react';
+
+import { Input, InputProps } from '@alfalab/core-components-input';
+
+import { format, isCompleteTimeInput, isValidInputValue } from './utils';
+
+export type TimeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (
+        event: ChangeEvent<HTMLInputElement>,
+        payload: { hours: number; mins: number; value: string },
+    ) => void;
+
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (
+        event: ChangeEvent<HTMLInputElement>,
+        payload: { hours: number; mins: number; value: string },
+    ) => void;
+};
+
+export const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
+    (
+        { defaultValue = '', value: propValue, onChange, onComplete, className, ...restProps },
+        ref,
+    ) => {
+        const [value, setValue] = useState(propValue || defaultValue);
+
+        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+            const { value: newValue } = event.target;
+
+            if (newValue.length > 5) return;
+
+            // Позволяем вводить только цифры и двоеточия
+            if (/[^\d:]/.test(newValue)) {
+                return;
+            }
+
+            const colon = newValue.match(/\:/g);
+
+            // Не даем вводить больше, чем одно двоеточие
+            if (colon && colon.length > 1) {
+                return;
+            }
+
+            const formattedValue = format(newValue);
+
+            const formattedValueArr = formattedValue.split(':');
+            const hours = Number(formattedValueArr[0]);
+            const mins = Number(formattedValueArr[1]);
+
+            setValue(formattedValue);
+
+            if (onChange) onChange(event, { hours, mins, value: formattedValue });
+
+            if (isCompleteTimeInput(formattedValue)) {
+                const valid = formattedValue.length > 0 && isValidInputValue(formattedValue);
+
+                if (!valid) return;
+
+                if (onComplete) {
+                    onComplete(event, { hours, mins, value: formattedValue });
+                }
+            }
+        };
+
+        const handleClearClick = () => {
+            setValue('');
+        };
+
+        return (
+            <Input
+                {...restProps}
+                ref={ref}
+                value={value}
+                className={className}
+                onChange={handleChange}
+                onClear={handleClearClick}
+            />
+        );
+    },
+);

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Component';
+export { isValidInputValue } from './utils';

package/src/utils/format.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-useless-escape */
+
+export const DATE_MASK = [/\d/, /\d/, ':', /\d/, /\d/];
+
+export const isCompleteTimeInput = (input: string) => input.length === DATE_MASK.length;
+
+export const isValidTimeFormat = (value: string): boolean => {
+    const timeArr = value.split(':');
+    const hours = timeArr[0];
+    const mins = timeArr[1];
+
+    if (hours.length !== 2 || Number(hours) > 23) {
+        return false;
+    }
+
+    if (mins.length !== 2 || Number(mins) > 59) {
+        return false;
+    }
+
+    return true;
+};
+
+export const isValidInputValue = (inputValue?: string) =>
+    !inputValue || (isCompleteTimeInput(inputValue) && isValidTimeFormat(inputValue));
+
+export const format = (value: string): string =>
+    value
+        .replace(/^(\d\d)(\d)$/, '$1:$2') // 123 => 12:3
+        .replace(/^(\d\d)(\d\d)/, '$1:$2') // 12345 => 12:45 (если вместо двоеточия введена цифра, она обратно заменяется на двоеточие)
+        .replace(/^(\d):(\d\d)(\d)/, '$1:$2') // 1:234 => 1:23
+        .replace(/\:$/, ''); // 12: => 12 || : => void

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './format';