@alfalab/core-components-time-input 2.2.37 → 2.2.38

package/moderncssm/Component.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+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;
+};
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const TimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { TimeInputProps, TimeInput };

package/moderncssm/Component.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Input } from '@alfalab/core-components-input/moderncssm';
+import { format, isCompleteTimeInput, isValidInputValue } from './utils/format.js';
+
+/* eslint-disable no-useless-escape */
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const TimeInput = React.forwardRef(({ defaultValue = '', value: propValue, onChange, onComplete, className, ...restProps }, ref) => {
+    const [value, setValue] = useState(propValue || defaultValue);
+    const handleChange = (event) => {
+        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 (React.createElement(Input, { ...restProps, ref: ref, value: value, className: className, onChange: handleChange, onClear: handleClearClick }));
+});
+
+export { TimeInput };

package/moderncssm/index.d.ts

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

package/moderncssm/index.js

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

package/moderncssm/utils/format.d.ts

@@ -0,0 +1,6 @@
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteTimeInput: (input: string) => boolean;
+declare const isValidTimeFormat: (value: string) => boolean;
+declare const isValidInputValue: (inputValue?: string) => boolean;
+declare const format: (value: string) => string;
+export { DATE_MASK, isCompleteTimeInput, isValidTimeFormat, isValidInputValue, format };

package/moderncssm/utils/format.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-useless-escape */
+const DATE_MASK = [/\d/, /\d/, ':', /\d/, /\d/];
+const isCompleteTimeInput = (input) => input.length === DATE_MASK.length;
+const isValidTimeFormat = (value) => {
+    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;
+};
+const isValidInputValue = (inputValue) => !inputValue || (isCompleteTimeInput(inputValue) && isValidTimeFormat(inputValue));
+const format = (value) => 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
+
+export { DATE_MASK, format, isCompleteTimeInput, isValidInputValue, isValidTimeFormat };

package/moderncssm/utils/index.d.ts

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

package/moderncssm/utils/index.js

@@ -0,0 +1 @@
+export { DATE_MASK, format, isCompleteTimeInput, isValidInputValue, isValidTimeFormat } from './format.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-time-input",
-    "version": "2.2.37",
+    "version": "2.2.38",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,9 +15,9 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^15.0.5",
+        "@alfalab/core-components-input": "^15.1.0",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }