@alfalab/core-components-date-input 4.2.10 → 4.3.0

package/Component.js

@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
-var styles = {"nativeInput":"date-input__nativeInput_lury9"};
+var styles = {"nativeInput":"date-input__nativeInput_w5y8m"};
 require('./index.css')
 
 var DateInput = React.forwardRef(function (_a, ref) {

package/cssm/index.module.css

@@ -20,8 +20,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    -webkit-appearance: none;
-            appearance: none;
+    appearance: none;
     z-index: 1
 } .nativeInput::-webkit-calendar-picker-indicator {
         display: none;

package/esm/Component.js

@@ -8,7 +8,7 @@ import 'date-fns/format';
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-var styles = {"nativeInput":"date-input__nativeInput_lury9"};
+var styles = {"nativeInput":"date-input__nativeInput_w5y8m"};
 require('./index.css')
 
 var DateInput = forwardRef(function (_a, ref) {

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1kf3w */
+/* hash: 13mc4 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,18 +14,17 @@
 } :root {
 } :root {
 } :root {
-} .date-input__nativeInput_lury9 {
+} .date-input__nativeInput_w5y8m {
     opacity: 0;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    -webkit-appearance: none;
-            appearance: none;
+    appearance: none;
     z-index: 1
-} .date-input__nativeInput_lury9::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_w5y8m::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_lury9::-webkit-inner-spin-button {
+    } .date-input__nativeInput_w5y8m::-webkit-inner-spin-button {
         display: none;
     }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1kf3w */
+/* hash: 13mc4 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,18 +14,17 @@
 } :root {
 } :root {
 } :root {
-} .date-input__nativeInput_lury9 {
+} .date-input__nativeInput_w5y8m {
     opacity: 0;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    -webkit-appearance: none;
-            appearance: none;
+    appearance: none;
     z-index: 1
-} .date-input__nativeInput_lury9::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_w5y8m::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_lury9::-webkit-inner-spin-button {
+    } .date-input__nativeInput_w5y8m::-webkit-inner-spin-button {
         display: none;
     }

package/modern/Component.js

@@ -7,7 +7,7 @@ import 'date-fns/format';
 import 'date-fns/isValid';
 import 'date-fns/parse';
 
-const styles = {"nativeInput":"date-input__nativeInput_lury9"};
+const styles = {"nativeInput":"date-input__nativeInput_w5y8m"};
 require('./index.css')
 
 const DateInput = forwardRef(({ mobileMode = 'input', defaultValue = '', rightAddons, error, value: propValue, onBlur, onChange, onComplete, ...restProps }, ref) => {

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1kf3w */
+/* hash: 13mc4 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,18 +14,17 @@
 } :root {
 } :root {
 } :root {
-} .date-input__nativeInput_lury9 {
+} .date-input__nativeInput_w5y8m {
     opacity: 0;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    -webkit-appearance: none;
-            appearance: none;
+    appearance: none;
     z-index: 1
-} .date-input__nativeInput_lury9::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_w5y8m::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_lury9::-webkit-inner-spin-button {
+    } .date-input__nativeInput_w5y8m::-webkit-inner-spin-button {
         display: none;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-date-input",
-    "version": "4.2.10",
+    "version": "4.3.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,7 +14,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^11.1.18",
+        "@alfalab/core-components-input": "^12.0.0",
         "date-fns": "^2.16.1",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"

package/src/Component.tsx

@@ -0,0 +1,167 @@
+import React, {
+    ChangeEvent,
+    FocusEvent,
+    forwardRef,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
+import mergeRefs from 'react-merge-refs';
+
+import { Input, InputProps } from '@alfalab/core-components-input';
+
+import {
+    format,
+    formatDate,
+    isCompleteDateInput,
+    isInputDateSupported,
+    isValid,
+    NATIVE_DATE_FORMAT,
+    parseDateString,
+} from './utils';
+
+import styles from './index.module.css';
+
+export type DateInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: 'input' | 'native';
+
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (
+        event: ChangeEvent<HTMLInputElement>,
+        payload: { date: Date; value: string },
+    ) => void;
+
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (
+        event: ChangeEvent<HTMLInputElement>,
+        payload: { date: Date; value: string },
+    ) => void;
+};
+
+export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
+    (
+        {
+            mobileMode = 'input',
+            defaultValue = '',
+            rightAddons,
+            error,
+            value: propValue,
+            onBlur,
+            onChange,
+            onComplete,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement>(null);
+
+        const [shouldRenderNative, setShouldRenderNative] = useState(false);
+
+        const [value, setValue] = useState(propValue || defaultValue);
+
+        const handleChange = useCallback(
+            (event: ChangeEvent<HTMLInputElement>) => {
+                const { value: newValue } = event.target;
+
+                // Позволяем вводить только цифры и точки
+                if (/[^\d.]/.test(newValue)) {
+                    return;
+                }
+
+                const dots = newValue.match(/\./g);
+
+                // Не даем вводить больше, чем 2 точки
+                if (dots && dots.length > 2) {
+                    return;
+                }
+
+                // Форматируем введенное значение (добавляем точки)
+                const formattedValue = format(newValue);
+                const date = parseDateString(formattedValue);
+
+                setValue(formattedValue);
+
+                if (onChange) onChange(event, { date, value: formattedValue });
+
+                if (isCompleteDateInput(formattedValue)) {
+                    const valid = formattedValue.length > 0 && isValid(formattedValue);
+
+                    if (!valid) return;
+
+                    if (onComplete) onComplete(event, { date, value: formattedValue });
+                }
+            },
+            [onChange, onComplete],
+        );
+
+        const handleNativeInputChange = useCallback(
+            (event: ChangeEvent<HTMLInputElement>) => {
+                const newDate = parseDateString(event.target.value, NATIVE_DATE_FORMAT);
+                const newValue = event.target.value === '' ? '' : formatDate(newDate);
+
+                setValue(newValue);
+
+                if (onComplete) onComplete(event, { date: newDate, value: newValue });
+                if (onChange) onChange(event, { date: newDate, value: newValue });
+            },
+            [onComplete, onChange],
+        );
+
+        const handleBlur = useCallback(
+            (event: FocusEvent<HTMLInputElement>) => {
+                if (onBlur) onBlur(event);
+            },
+            [onBlur],
+        );
+
+        useEffect(() => {
+            if (mobileMode === 'native' && isInputDateSupported()) {
+                setShouldRenderNative(true);
+            }
+        }, [mobileMode]);
+
+        useEffect(() => {
+            if (typeof propValue !== 'undefined') {
+                setValue(propValue);
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [propValue]);
+
+        return (
+            <Input
+                {...restProps}
+                ref={mergeRefs([ref, inputRef])}
+                value={value}
+                inputMode='decimal'
+                pattern='[0-9\.]*'
+                onChange={handleChange}
+                onBlur={handleBlur}
+                placeholder='ДД.ММ.ГГГГ'
+                error={error}
+                rightAddons={
+                    <React.Fragment>
+                        {rightAddons}
+
+                        {shouldRenderNative && (
+                            <input
+                                type='date'
+                                ref={ref}
+                                defaultValue={defaultValue}
+                                onChange={handleNativeInputChange}
+                                className={styles.nativeInput}
+                            />
+                        )}
+                    </React.Fragment>
+                }
+            />
+        );
+    },
+);

package/src/index.module.css

@@ -0,0 +1,19 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.nativeInput {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    z-index: 1;
+
+    &::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+    &::-webkit-inner-spin-button {
+        display: none;
+    }
+}

package/src/index.ts

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

package/src/utils/format.ts

@@ -0,0 +1,37 @@
+import dateFnsFormat from 'date-fns/format';
+import dateFnsIsValid from 'date-fns/isValid';
+import parse from 'date-fns/parse';
+
+export const DATE_FORMAT = 'dd.MM.yyyy';
+export const NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
+export const DATE_MASK = [/\d/, /\d/, '.', /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/];
+
+export const isCompleteDateInput = (input: string) => input.length === DATE_MASK.length;
+
+export const formatDate = (date: Date | number, dateFormat = DATE_FORMAT) =>
+    dateFnsFormat(date, dateFormat);
+
+export const parseDateString = (value: string, dateFormat = DATE_FORMAT) =>
+    parse(value, dateFormat, new Date());
+
+export const isValid = (inputValue?: string) =>
+    !inputValue || (isCompleteDateInput(inputValue) && dateFnsIsValid(parseDateString(inputValue)));
+
+export const format = (value: string): string =>
+    value
+        .replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
+        .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
+        .replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
+        .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
+        .replace(/^(\d\d\.\d\d\.\d\d\d\d).*/, '$1') // 12.12.20056 => 12.12.2005
+        .replace(/\.$/, '') // 12. => 12
+        .replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
+        .replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
+        .replace(/^(\d\.\d\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.12.2005123123 => 01.12.2005
+        .replace(/^(\d\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 01.2.20055125125 => 01.2.2005
+        .replace(/^(\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.2.20055125125 => 1.2.2005
+        .replace(/^(\d)\.(\d\d)([0-9]*)\.(\d\d\d\d)/, '$1.$2.$4') // 1.123123.2005 => 1.12.2005
+        .replace(/^(\d\d)\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // 01..2005123123 => 01..2005
+        .replace(/^(\d)\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // 1..2005123123 => 1..2005
+        .replace(/^()\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // ..2005123123 => ..2005
+        .replace(/^()\.(\d)\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3'); // .2.2005123123 => .2.2005

package/src/utils/index.ts

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

package/src/utils/native-supports.ts

@@ -0,0 +1,12 @@
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+export function isInputDateSupported() {
+    const input = document.createElement('input');
+    const value = 'a';
+
+    input.setAttribute('type', 'date');
+    input.setAttribute('value', value);
+
+    return input.value !== value;
+}