@alfalab/core-components-date-input 4.2.9 → 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_1loh4"};
+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_1loh4"};
+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: 1c5qe */
+/* 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_1loh4 {
+} .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_1loh4::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_w5y8m::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_1loh4::-webkit-inner-spin-button {
+    } .date-input__nativeInput_w5y8m::-webkit-inner-spin-button {
         display: none;
     }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1c5qe */
+/* 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_1loh4 {
+} .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_1loh4::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_w5y8m::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_1loh4::-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_1loh4"};
+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: 1c5qe */
+/* 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_1loh4 {
+} .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_1loh4::-webkit-calendar-picker-indicator {
+} .date-input__nativeInput_w5y8m::-webkit-calendar-picker-indicator {
         display: none;
-    } .date-input__nativeInput_1loh4::-webkit-inner-spin-button {
+    } .date-input__nativeInput_w5y8m::-webkit-inner-spin-button {
         display: none;
     }

package/package.json

@@ -1,14 +1,11 @@
 {
     "name": "@alfalab/core-components-date-input",
-    "version": "4.2.9",
+    "version": "4.3.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "scripts": {
-        "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
-    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -17,7 +14,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^11.1.17",
+        "@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;
+}

package/send-stats.js

@@ -1,82 +0,0 @@
-const http = require('http');
-const fs = require('fs');
-const { promisify } = require('util');
-const path = require('path');
-
-const readFile = promisify(fs.readFile);
-
-async function main() {
-    const remoteHost = process.env.NIS_HOST || 'digital';
-    const remotePort = process.env.NIS_PORT || 80;
-    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
-
-    try {
-        const [_, node, os, arch] =
-            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
-        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
-        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
-
-        let ownPackageJson, packageJson;
-
-        try {
-            const result = await Promise.all([
-                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
-                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
-            ]);
-
-            ownPackageJson = JSON.parse(result[0]);
-            packageJson = JSON.parse(result[1]);
-        } catch (err) {
-            ownPackageJson = '';
-            packageJson = '';
-        }
-
-        const data = {
-            node,
-            npm,
-            yarn,
-            os,
-            arch,
-            ownPackageJson: JSON.stringify(ownPackageJson),
-            packageJson: JSON.stringify(packageJson),
-        };
-
-        const body = JSON.stringify(data);
-
-        const options = {
-            host: remoteHost,
-            port: remotePort,
-            path: remotePath,
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Content-Length': body.length,
-            },
-        };
-
-        return new Promise((resolve, reject) => {
-            const req = http.request(options, (res) => {
-                res.on('end', () => {
-                    resolve();
-                });
-            });
-
-            req.on('error', () => {
-                reject();
-            });
-
-            req.write(body);
-            req.end();
-        });
-    } catch (error) {
-        throw error;
-    }
-}
-
-main()
-    .then(() => {
-        process.exit(0);
-    })
-    .catch(() => {
-        process.exit(0);
-    });