@steroidsjs/core 2.2.87 → 2.3.0-beta.1

package/src/ui/form/DateField/useDateInputState.tsx

@@ -0,0 +1,199 @@
+import {useCallback, useMemo, useState} from 'react';
+import {useUpdateEffect} from 'react-use';
+import moment from 'moment';
+import {convertDate} from '../../../utils/calendar';
+import {IFieldWrapperInputProps} from '../../form/Field/fieldWrapper';
+
+export interface IDateInputStateInput extends IFieldWrapperInputProps {
+
+    /**
+     * Формат даты показываемый пользователю
+     * @example DD.MM.YYYY
+     */
+    displayFormat?: string;
+
+    /**
+     * Иконка, отображаемая в правой части поля
+     * @example calendar-day
+     */
+    icon?: string | boolean;
+
+    /**
+     * Свойства поля props.input
+     */
+    input?: {
+        name?: string,
+        value?: any,
+        onChange: (value: any) => void,
+    },
+
+    /**
+     * Свойства, передаваемые для поля во view
+     */
+    inputProps?: Record<string, unknown>,
+
+    /**
+     * Дополнительная функция, срабатывающая при изменении props.input
+     */
+    onChange?: (...args: any[]) => any;
+
+    /**
+     * Показывать при наведении на поле иконку для сброса значения поля в начальное состояние
+     */
+    showRemove?: boolean,
+
+    /**
+     * Формат даты отправляемый на сервер
+     * @example YYYY-MM-DD
+     */
+    valueFormat?: string;
+
+    /**
+     * Приводить значение даты к часовому поясу UTC
+     * (пример: с бэкенда приходит дата в какой-либо временной зоне (не UTC), но нужно отбразить ее
+     * в часовом поясе UTC. В этом случае dateInUTC = false, а useUTC = true)
+     */
+    useUTC?: boolean;
+
+    /**
+     * Задано ли значение даты в часовом поясе UTC
+     * (пример: с бэкенда приходит дата в UTC, но нужно отбразить ее в локальном времени.
+     * В этом случае dateInUTC = true, а useUTC = false)
+     */
+    dateInUTC?: boolean;
+}
+
+export interface IDateInputStateOutput {
+
+    /**
+     * Показать или скрыть выпадающую панель
+     */
+    isOpened?: boolean,
+
+    /**
+     * Функция закрывает выпадающую панель
+     */
+    onClose?: () => void,
+
+    /**
+     * Функция очищает значение поля
+     */
+    onClear?: () => void,
+
+    /**
+     * Функция возвращает текущее значение времени (дата + время)
+     */
+    onNow?: () => void,
+
+    /**
+     * Свойства для поля во view
+     */
+    inputProps: {
+        name?: string,
+        value?: any,
+        onChange: (value: any) => void,
+        [key:string]: any,
+    },
+}
+
+export default function useDateInputState(props: IDateInputStateInput): IDateInputStateOutput {
+    // Get props value
+    const propsDisplayValue = useMemo(
+        () => convertDate(
+            props.input.value,
+            [
+                props.valueFormat,
+                props.displayFormat,
+            ],
+            props.displayFormat,
+            props.useUTC,
+            props.dateInUTC,
+        ) || '',
+        [props.displayFormat, props.input.value, props.valueFormat],
+    );
+
+    // Display value state
+    const [displayValue, setDisplayValue] = useState(propsDisplayValue);
+
+    // Update display value on update props input value
+    useUpdateEffect(() => {
+        if (displayValue !== propsDisplayValue) {
+            setDisplayValue(propsDisplayValue);
+            if (props.onChange) {
+                props.onChange.call(null, propsDisplayValue);
+            }
+        }
+        // Subscribe on props value changed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [propsDisplayValue]);
+
+    // Display input change handler
+    const onDisplayValueChange = useCallback(value => {
+        value = value.replace(/[^0-9:. ]/g, '');
+
+        setDisplayValue(value);
+        const parsedValue = convertDate(value, props.displayFormat, props.valueFormat, props.useUTC, props.dateInUTC);
+        const newValue = parsedValue || !value ? parsedValue || null : false;
+        if (newValue && newValue !== props.input.value) {
+            props.input.onChange.call(null, newValue);
+            if (props.onChange) {
+                props.onChange.call(null, value);
+            }
+        }
+    }, [props.displayFormat, props.input.onChange, props.input.value, props.onChange, props.valueFormat, props.useUTC, props.dateInUTC]);
+
+    // Dropdown opened state
+    const [isOpened, setIsOpened] = useState(false);
+
+    // Focus/blur handlers
+    const onFocus = useCallback(e => {
+        e.preventDefault();
+        setIsOpened(true);
+    }, [setIsOpened]);
+
+    const onBlur = useCallback(() => {
+        if (propsDisplayValue !== displayValue) {
+            setDisplayValue(propsDisplayValue);
+        }
+    }, [displayValue, propsDisplayValue]);
+
+    const onClose = useCallback(() => {
+        setIsOpened(false);
+
+        if (propsDisplayValue !== displayValue) {
+            setDisplayValue(propsDisplayValue);
+        }
+    }, [displayValue, propsDisplayValue]);
+
+    const onClear = useCallback(() => {
+        onDisplayValueChange('');
+    }, [onDisplayValueChange]);
+
+    const onNow = useCallback(() => {
+        onDisplayValueChange(moment().format(props.displayFormat));
+    }, [onDisplayValueChange, props.displayFormat]);
+
+    // Display input props
+    const inputProps = useMemo(() => ({
+        value: displayValue,
+        onChange: onDisplayValueChange,
+        onFocus,
+        onBlur,
+        disabled: props.disabled,
+        placeholder: props.placeholder || props.displayFormat,
+        required: props.required,
+        name: props.input.name,
+        autoComplete: 'off',
+        type: 'text',
+        ...props.inputProps,
+    }), [displayValue, onBlur, onDisplayValueChange, onFocus, props.disabled, props.displayFormat,
+        props.input.name, props.inputProps, props.placeholder, props.required]);
+
+    return {
+        isOpened,
+        inputProps,
+        onClear,
+        onClose,
+        onNow,
+    };
+}

package/src/ui/form/DateField/useDateRange.tsx

@@ -0,0 +1,87 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {usePrevious} from 'react-use';
+
+interface IUseDateRangeProps {
+    onCloseFrom: any,
+    onCloseTo: any,
+    onClearFrom: any,
+    onClearTo: any,
+    inputPropsFrom: any,
+    inputPropsTo: any,
+    inputTo: any,
+    inputFrom: any,
+    useSmartFocus: boolean,
+}
+
+export default function useDateRange(props:IUseDateRangeProps) {
+    // Tracking focus for input being edited
+    const [focus, setFocus] = useState<'from' | 'to'>('from');
+
+    // Local refs to handle auto-focus
+    const valueFromRef = useRef('');
+    const valueToRef = useRef('');
+
+    // Close handler
+    const onClose = useCallback(() => {
+        if (focus === 'from') {
+            props.onCloseFrom();
+        } else {
+            props.onCloseTo();
+        }
+        valueFromRef.current = '';
+        valueToRef.current = '';
+    }, [focus, props]);
+
+    // Clear handler
+    const onClear = useCallback(() => {
+        props.onClearFrom();
+        props.onClearTo();
+    }, [props]);
+
+    // Custom onFocus for inputFrom
+    const inputFromRef = useRef(null);
+    const onFocusFrom = useCallback(e => {
+        props.inputPropsFrom.onFocus.call(null, e);
+        setFocus('from');
+    }, [props.inputPropsFrom.onFocus]);
+    const extendedInputPropsFrom = useMemo(() => ({
+        ...props.inputPropsFrom,
+        onFocus: onFocusFrom,
+        ref: inputFromRef,
+    }), [onFocusFrom, props.inputPropsFrom]);
+
+    // Custom onFocus for inputTo
+    const inputToRef = useRef(null);
+    const onFocusTo = useCallback(e => {
+        props.inputPropsTo.onFocus.call(null, e);
+        setFocus('to');
+    }, [props.inputPropsTo.onFocus]);
+    const extendedInputPropsTo = useMemo(() => ({
+        ...props.inputPropsTo,
+        onFocus: onFocusTo,
+        ref: inputToRef,
+    }), [onFocusTo, props.inputPropsTo]);
+
+    const prevValueFrom = usePrevious(props.inputFrom.value);
+    const prevValueTo = usePrevious(props.inputTo.value);
+    useEffect(() => {
+        if (props.useSmartFocus) {
+            if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
+                valueFromRef.current = props.inputFrom.value;
+                inputToRef.current.focus();
+            }
+            if (focus === 'to' && !valueFromRef.current && prevValueTo !== props.inputTo.value) {
+                valueToRef.current = props.inputTo.value;
+                inputFromRef.current.focus();
+            }
+        }
+    }, [focus, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
+
+    return {
+        focus,
+        onClose,
+        onClear,
+        extendedInputPropsFrom,
+        extendedInputPropsTo,
+    };
+}

package/src/ui/form/DateField/useDateTime.tsx

@@ -0,0 +1,77 @@
+import {useCallback, useMemo} from 'react';
+import moment from 'moment';
+import {convertDate} from '../../../utils/calendar';
+import {IDateInputStateInput} from '../../form/DateField/useDateInputState';
+
+interface IUseDateTimeProps extends
+    Pick<IDateInputStateInput, 'displayFormat' | 'valueFormat' | 'input' | 'useUTC' | 'dateInUTC'>
+{
+    dateTimeSeparator: string,
+}
+
+/**
+ * useDateTime
+ * Хук работает с полем, где используется значение даты и времени.
+ * Возвращает значения и обработчики для передачи в Calendar и TimePanel
+ */
+export default function useDateTime(props:IUseDateTimeProps) {
+    const [dateValueFormat, timeValueFormat] = props.valueFormat.split(props.dateTimeSeparator);
+
+    const dateValue = useMemo(() => convertDate(
+        props.input.value,
+        [props.valueFormat, props.displayFormat],
+        dateValueFormat,
+        props.useUTC,
+        props.dateInUTC,
+    ), [dateValueFormat, props.displayFormat, props.input.value, props.valueFormat]);
+
+    const timeValue = useMemo(() => convertDate(
+        props.input.value,
+        [props.displayFormat, props.valueFormat],
+        timeValueFormat,
+        props.useUTC,
+        props.dateInUTC,
+    ), [props.displayFormat, props.input.value, props.valueFormat, timeValueFormat]);
+
+    // Handler for calendar and time picker changes
+    const onDateSelect = useCallback(date => {
+        const result = date + props.dateTimeSeparator + (timeValue || '00:00');
+        props.input.onChange.call(
+            null,
+            convertDate(
+                result,
+                [props.valueFormat, 'YYYY-MM-DD HH:mm'],
+                props.valueFormat,
+                // converting to UTC here depends on whether the date is stored in UTC
+                props.dateInUTC,
+                // whether the date provided from onSelect is in UTC or not depends on this flag
+                props.useUTC
+            ),
+        );
+    }, [props.dateTimeSeparator, props.input.onChange, props.valueFormat, timeValue]);
+    const onTimeSelect = useCallback(time => {
+        const result = (dateValue || moment().format(dateValueFormat)) + props.dateTimeSeparator + time;
+
+        props.input.onChange.call(
+            null,
+            convertDate(
+                result,
+                [props.valueFormat, 'YYYY-MM-DD HH:mm'],
+                props.valueFormat,
+                // converting to UTC here depends on whether the date is stored in UTC
+                props.dateInUTC,
+                // whether the date provided from onSelect is in UTC or not depends on this flag
+                props.useUTC
+            ),
+        );
+    }, [dateValue, dateValueFormat, props.dateTimeSeparator, props.input.onChange, props.valueFormat]);
+
+    return {
+        dateValue,
+        timeValue,
+        onDateSelect,
+        onTimeSelect,
+        dateValueFormat,
+        timeValueFormat,
+    };
+}

package/src/ui/form/DateRangeField/DateRangeField.tsx

@@ -0,0 +1,234 @@
+import { useCallback, useMemo } from 'react';
+import { ICalendarProps } from '../../content/Calendar/Calendar';
+import useDateRange from '../../form/DateField/useDateRange';
+import { useComponents } from '../../../hooks';
+import useDateInputState, {IDateInputStateInput, IDateInputStateOutput} from '../DateField/useDateInputState';
+import fieldWrapper, {
+    IFieldWrapperInputProps,
+    IFieldWrapperOutputProps,
+} from '../../form/Field/fieldWrapper';
+
+/**
+ * DateRangeField
+ * Поле ввода дипазона двух дат с выпадающим календарём
+ */
+export interface IDateRangeFieldProps extends IDateInputStateInput,
+    Omit<IFieldWrapperInputProps, 'attribute'>
+{
+    /**
+     * Аттрибут (название) поля в форме
+     * @example 'fromTime'
+     */
+    attributeFrom?: string;
+
+    /**
+     * Аттрибут (название) поля в форме
+     * @example 'toTime'
+     */
+    attributeTo?: string;
+
+    /**
+     * Свойства для компонента DayPickerInput
+     * @example {dayPickerProps: {showWeekNumbers: true}}
+     */
+    pickerProps?: any;
+
+    /**
+     * Формат даты показываемый пользователю
+     * @example DD.MM.YYYY
+     */
+    displayFormat?: string;
+
+    /**
+     * Формат даты отправляемый на сервер
+     * @example YYYY-MM-DD
+     */
+    valueFormat?: string;
+
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName;
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+
+    /**
+     * Placeholder подсказка
+     * @example Your text...
+     */
+    placeholder?: any;
+
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: any;
+
+    /**
+     * Иконка
+     * @example calendar-day
+     */
+    icon?: boolean | string;
+
+    /**
+     * Отображение кнопки для сброса значения поля
+     * @example true
+     */
+    showRemove?: boolean,
+
+    inputPropsFrom?: any,
+
+    inputPropsTo?: any,
+
+    /**
+     * Свойства для компонента Calendar
+     */
+    calendarProps?: ICalendarProps,
+
+    /**
+     * Отключить border вокруг элемента
+     * @example 'true'
+     */
+    noBorder?: boolean,
+
+    [key: string]: any;
+}
+
+export interface IDateRangeFieldViewProps extends IDateInputStateOutput,
+    Omit<IFieldWrapperOutputProps, 'input'>,
+    Pick<IDateRangeFieldProps,
+        'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled'
+        | 'noBorder' | 'style'>
+{
+    inputPropsFrom?: any,
+    inputPropsTo?: any,
+    errorsFrom?: string[],
+    errorsTo?: string[],
+}
+
+interface IDateRangeFieldPrivateProps extends IDateRangeFieldProps, Omit<IFieldWrapperOutputProps, 'input' | 'errors'> {
+    inputFrom?: {
+        name?: string,
+        value?: any,
+        onChange: (value: any) => void,
+    },
+    inputTo?: {
+        name?: string,
+        value?: any,
+        onChange: (value: any) => void,
+    },
+    errorsFrom?: string[],
+    errorsTo?: string[],
+}
+
+function DateRangeField(props: IDateRangeFieldPrivateProps): JSX.Element {
+    const components = useComponents();
+
+    // Global onChange (from props)
+    const onChange = useCallback(() => {
+        if (props.onChange) {
+            props.onChange.call(null, {
+                [props.attributeFrom]: props.inputFrom.value,
+                [props.attributeTo]: props.inputTo.value,
+            });
+        }
+    }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
+
+    // Input 'from'
+    const {
+        isOpened: isOpenedFrom,
+        onClose: onCloseFrom,
+        inputProps: inputPropsFrom,
+        onClear: onClearFrom,
+    } = useDateInputState({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        input: props.inputFrom,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        required: props.required,
+        inputProps: props.inputPropsFrom,
+        onChange,
+    });
+
+    // Input 'to'
+    const {
+        isOpened: isOpenedTo,
+        onClose: onCloseTo,
+        inputProps: inputPropsTo,
+        onClear: onClearTo,
+    } = useDateInputState({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        input: props.inputTo,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        required: props.required,
+        inputProps: props.inputPropsTo,
+        onChange,
+    });
+
+    const {
+        focus,
+        onClose,
+        onClear,
+        extendedInputPropsFrom,
+        extendedInputPropsTo,
+    } = useDateRange({
+        onClearFrom,
+        onCloseTo,
+        onCloseFrom,
+        onClearTo,
+        inputPropsFrom,
+        inputPropsTo,
+        inputFrom: props.inputFrom,
+        inputTo: props.inputTo,
+        useSmartFocus: true,
+    });
+
+    // Calendar props
+    const calendarProps: ICalendarProps = useMemo(() => ({
+        value: [props.inputFrom.value, props.inputTo.value],
+        onChange: focus === 'from' ? props.inputFrom.onChange : props.inputTo.onChange,
+        valueFormat: props.valueFormat,
+        numberOfMonths: 2,
+        showFooter: false,
+    }), [focus, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange,
+        props.inputTo.value, props.valueFormat]);
+
+    return components.ui.renderView(props.view || 'form.DateRangeFieldView', {
+        ...props.viewProps,
+        onClear,
+        onClose,
+        calendarProps,
+        icon: props.icon,
+        size: props.size,
+        errorsTo: props.errorsTo,
+        disabled: props.disabled,
+        noBorder: props.noBorder,
+        className: props.className,
+        showRemove: props.showRemove,
+        errorsFrom: props.errorsFrom,
+        inputPropsTo: extendedInputPropsTo,
+        inputPropsFrom: extendedInputPropsFrom,
+        isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo,
+    });
+}
+
+DateRangeField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    displayFormat: 'DD.MM.YYYY',
+    valueFormat: 'YYYY-MM-DD',
+    showRemove: true,
+    icon: true,
+    noBorder: false,
+};
+
+export default fieldWrapper<IDateRangeFieldProps>('DateRangeField', DateRangeField,
+    {attributeSuffixes: ['from', 'to']});

package/src/ui/form/DateRangeField/demo/basic.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import DateRangeField from '../DateRangeField';
+
+/**
+ * Обычный пример использования DateRangeField.
+ * @order 1
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DateRangeField
+            attributeFrom='fromTime'
+            attributeTo='toTime'
+        />
+    </>
+);

package/src/ui/form/DateRangeField/demo/disabled.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import DateRangeField from '../DateRangeField';
+
+/**
+ * Выключенный или недоступный для использования.
+ * @order 2
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DateRangeField label='Disabled' disabled />
+    </>
+);

package/src/ui/form/DateRangeField/demo/errors.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import DateRangeField from '../DateRangeField';
+
+/**
+ * Обработка ошибок.
+ * @order 4
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DateRangeField
+            label='Errors'
+            errors={['Error 1 text', 'Error 2 text']}
+            layout
+        />
+    </>
+);

package/src/ui/form/DateRangeField/demo/icon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import DateRangeField from '../DateRangeField';
+
+/**
+ * С использованием кастомной иконкой.
+ * @order 5
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DateRangeField label='Default' icon />
+        <DateRangeField label='With error' icon='plane' errors={['Error 1 text']} />
+        <DateRangeField label='Custom' icon='dizzy' />
+    </>
+);

package/src/ui/form/DateRangeField/demo/placeholder.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import DateRangeField from '../DateRangeField';
+
+/**
+ * С сообщением для пользователя по контексту использования.
+ * @order 6
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DateRangeField label='Placeholder' placeholder='Your date...' />
+    </>
+);

package/src/ui/form/DateRangeField/demo/required.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import DateRangeField from '../DateRangeField';
+
+/**
+ * Как обязательное поле для заполнения.
+ * @order 3
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DateRangeField label='Required' required />
+    </>
+);