@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.7

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

@@ -1,199 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,234 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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