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

package/src/ui/form/DateRangeField/index.ts

@@ -0,0 +1,3 @@
+import DateRangeField from './DateRangeField';
+
+export default DateRangeField;

package/src/ui/form/DateTimeField/DateTimeField.story.js

@@ -0,0 +1,15 @@
+import disabled from './demo/disabled';
+import errors from './demo/errors';
+import required from './demo/required';
+import sizes from './demo/sizes';
+
+export default {
+    title: 'form.DateTimeField',
+};
+
+export {
+    disabled,
+    errors,
+    required,
+    sizes,
+}

package/src/ui/form/DateTimeField/DateTimeField.tsx

@@ -0,0 +1,135 @@
+import {useMemo} from 'react';
+import useDateTime from '../DateField/useDateTime';
+import {ICalendarProps} from '../../content/Calendar/Calendar';
+import useDateInputState, {
+    IDateInputStateInput,
+    IDateInputStateOutput,
+} from '../../form/DateField/useDateInputState';
+import fieldWrapper, {IFieldWrapperOutputProps} from '../../form/Field/fieldWrapper';
+import {useComponents} from '../../../hooks';
+
+export interface IDateTimeFieldProps extends IDateInputStateInput {
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: any,
+
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName,
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView,
+
+    /**
+     * Свойства для компонента Calendar
+     */
+    calendarProps?: ICalendarProps,
+
+    /**
+     * Свойства для компонента панели времени
+     */
+    timePanelViewProps?: any,
+
+    [key: string]: any;
+}
+
+export interface IDateTimeFieldViewProps extends IDateInputStateOutput,
+    Pick<IDateTimeFieldProps, 'size' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'timePanelViewProps'>
+{
+    [key: string]: any;
+}
+
+const DATE_TIME_SEPARATOR = ' ';
+
+/**
+ * DateTimeField
+ * Поля ввода с выпадающими списками для выбора даты и времени
+ */
+function DateTimeField(props: IDateTimeFieldProps & IFieldWrapperOutputProps): JSX.Element {
+    const components = useComponents();
+
+    const {
+        onClear,
+        onClose,
+        isOpened,
+        inputProps,
+    } = useDateInputState({
+        input: props.input,
+        disabled: props.disabled,
+        onChange: props.onChange,
+        required: props.required,
+        inputProps: props.inputProps,
+        placeholder: props.placeholder,
+        valueFormat: props.valueFormat,
+        displayFormat: props.displayFormat,
+        useUTC: props.useUTC,
+        dateInUTC: props.dateInUTC,
+    });
+
+    const {
+        dateValueFormat,
+        dateValue,
+        timeValue,
+        onDateSelect,
+        onTimeSelect,
+    } = useDateTime({
+        displayFormat: props.displayFormat,
+        dateTimeSeparator: DATE_TIME_SEPARATOR,
+        input: props.input,
+        valueFormat: props.valueFormat,
+        useUTC: props.useUTC,
+        dateInUTC: props.dateInUTC,
+    });
+
+    // Calendar props
+    const calendarProps = useMemo(() => ({
+        value: dateValue,
+        onChange: onDateSelect,
+        valueFormat: dateValueFormat,
+    }), [dateValue, dateValueFormat, onDateSelect]);
+
+    // TimePanel props
+    const timePanelViewProps = useMemo(() => ({
+        onClose,
+        showHeader: true,
+        showNow: false,
+        value: timeValue,
+        onSelect: onTimeSelect,
+    }), [onClose, onTimeSelect, timeValue]);
+
+    return components.ui.renderView(props.view || 'form.DateTimeFieldView', {
+        ...props.viewProps,
+        isOpened,
+        onClear,
+        onClose,
+        inputProps,
+        calendarProps,
+        timePanelViewProps,
+        size: props.size,
+        icon: props.icon,
+        label: props.label,
+        errors: props.errors,
+        className: props.className,
+        showRemove: props.showRemove,
+        isInvalid: props.isInvalid,
+        disabled: props.disabled,
+    });
+}
+
+DateTimeField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    displayFormat: 'DD.MM.YYYY' + DATE_TIME_SEPARATOR + 'HH:mm',
+    valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
+    useUTC: true,
+    dateInUTC: false,
+};
+
+export default fieldWrapper<IDateTimeFieldProps>('DateTimeField', DateTimeField);

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import DateTimeField from '../DateTimeField';
+
+/**
+ * Справа в инпуте кастомная иконка
+ * @order 5
+ * @col 6
+ */
+export default () => (
+    <>
+        <DateTimeField
+            label='Custom icon'
+            icon='plane'
+            dateProps={{
+                icon: true,
+            }}
+        />
+    </>
+);

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import DateTimeField from '../DateTimeField';
+
+/**
+ * Сообщение внутри импута
+ * @order 6
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DateTimeField
+            label='Placeholder'
+            placeholder='Введите удобную вам дату встречи'
+        />
+    </>
+);

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

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

package/src/ui/form/DateTimeField/demo/showRemove.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import DateTimeField from '../DateTimeField';
+
+/**
+ * После введения датты при наведении показывается кнопка, удалить содержание внутри инпута
+ * @order 7
+ * @col 6
+ */
+
+export default () => (
+    <DateTimeField showRemove />
+);

package/src/ui/form/DateTimeField/index.ts

@@ -0,0 +1,2 @@
+import DateTimeField from './DateTimeField';
+export default DateTimeField;

package/src/ui/form/DateTimeRangeField/DateTimeRangeField.tsx

@@ -0,0 +1,268 @@
+import {useCallback, useMemo} from 'react';
+import {ICalendarProps} from '../../content/Calendar/Calendar';
+import useDateRange from '../../form/DateField/useDateRange';
+import useDateTime from '../../form/DateField/useDateTime';
+import {IDateRangeFieldProps} from '../../form/DateRangeField/DateRangeField';
+import useDateInputState, {
+    IDateInputStateInput,
+    IDateInputStateOutput,
+} from '../../form/DateField/useDateInputState';
+import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../../form/Field/fieldWrapper';
+import {useComponents} from '../../../hooks';
+
+/**
+ * DateTimeRangeField
+ * Поле ввода дипазона двух дат со временем, с выпадающим календарём
+ */
+export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'inputProps' | 'input'>,
+    Omit<IFieldWrapperInputProps, 'attribute'>
+{
+    /**
+    * Аттрибут (название) поля в форме
+    * @example 'fromTime'
+    */
+    attributeFrom?: string;
+
+    /**
+     * Аттрибут (название) поля в форме
+     * @example 'toTime'
+     */
+    attributeTo?: string;
+
+    /**
+     * Свойства для компонента DayPickerInput
+     * @example {dayPickerProps: {showWeekNumbers: true}}
+     */
+    pickerProps?: any;
+
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName;
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: any;
+
+    /**
+     * Свойства для поля 'from'
+     */
+    inputPropsFrom?: Record<string, unknown>,
+
+    /**
+     * Свойства для поля 'to'
+     */
+    inputPropsTo?: Record<string, unknown>,
+
+    /**
+     * Свойства для компонента панели времени
+     */
+    timePanelViewProps?: any,
+
+    /**
+     * Свойства для компонента Calendar
+     */
+    calendarProps?: ICalendarProps,
+
+    /**
+     * Отключить border вокруг элемента
+     * @example 'true'
+     */
+    noBorder?: boolean,
+
+    [key: string]: any;
+}
+
+export interface IDateTimeRangeFieldViewProps extends IDateInputStateOutput,
+    Omit<IFieldWrapperOutputProps, 'input'>,
+    Pick<IDateRangeFieldProps,
+        'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled'
+        | 'noBorder' | 'style'>
+{
+    timePanelViewProps?: any,
+    calendarProps?: ICalendarProps,
+    inputPropsFrom?: any,
+    inputPropsTo?: any,
+    errorsFrom?: any,
+    errorsTo?: any,
+}
+
+interface IDateTimeRangeFieldPrivateProps extends IDateTimeRangeFieldProps,
+    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[],
+    disabled?: boolean,
+
+}
+
+const DATE_TIME_SEPARATOR = ' ';
+
+function DateTimeRangeField(props: IDateTimeRangeFieldPrivateProps): 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,
+        onNow,
+    } = 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 {
+        dateValueFormat,
+        dateValue: dateValueFrom,
+        timeValue: timeValueFrom,
+        onDateSelect: onDateFromSelect,
+        onTimeSelect: onTimeFromSelect,
+    } = useDateTime({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        dateTimeSeparator: DATE_TIME_SEPARATOR,
+        input: props.inputFrom,
+    });
+
+    const {
+        dateValue: dateValueTo,
+        timeValue: timeValueTo,
+        onDateSelect: onDateToSelect,
+        onTimeSelect: onTimeToSelect,
+    } = useDateTime({
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat,
+        dateTimeSeparator: DATE_TIME_SEPARATOR,
+        input: props.inputTo,
+    });
+
+    const {
+        focus,
+        onClose,
+        onClear,
+        extendedInputPropsFrom,
+        extendedInputPropsTo,
+    } = useDateRange({
+        onClearFrom,
+        onCloseTo,
+        onCloseFrom,
+        onClearTo,
+        inputPropsFrom,
+        inputPropsTo,
+        inputFrom: props.inputFrom,
+        inputTo: props.inputTo,
+        useSmartFocus: false,
+    });
+
+    // Calendar props
+    const calendarProps: ICalendarProps = useMemo(() => ({
+        value: [dateValueFrom, dateValueTo],
+        onChange: focus === 'from' ? onDateFromSelect : onDateToSelect,
+        valueFormat: dateValueFormat,
+        ...props.calendarProps,
+    }), [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps]);
+
+    // TimePanel props
+    const timePanelViewProps = useMemo(() => ({
+        value: focus === 'from' ? timeValueFrom : timeValueTo,
+        onSelect: focus === 'from' ? onTimeFromSelect : onTimeToSelect,
+        onNow,
+        onClose,
+        showNow: false,
+        showHeader: true,
+        ...props.timePanelViewProps,
+    }), [
+        focus,
+        onClose,
+        onNow,
+        onTimeFromSelect,
+        onTimeToSelect,
+        props.timePanelViewProps,
+        timeValueFrom,
+        timeValueTo,
+    ]);
+
+    return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', {
+        ...props.viewProps,
+        onClear,
+        onClose,
+        calendarProps,
+        timePanelViewProps,
+        icon: props.icon,
+        size: props.size,
+        errorsTo: props.errorsTo,
+        className: props.className,
+        showRemove: props.showRemove,
+        errorsFrom: props.errorsFrom,
+        inputPropsTo: extendedInputPropsTo,
+        inputPropsFrom: extendedInputPropsFrom,
+        isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo,
+        disabled: props.disabled,
+        noBorder: props.noBorder,
+    });
+}
+
+DateTimeRangeField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    displayFormat: 'DD.MM.YYYY' + DATE_TIME_SEPARATOR + 'HH:mm',
+    valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
+    showRemove: true,
+    icon: true,
+};
+
+export default fieldWrapper<IDateTimeRangeFieldProps>('DateTimeRangeField', DateTimeRangeField,
+    {attributeSuffixes: ['from', 'to']});

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import DateTimeRangeField from '../DateTimeRangeField';
+
+/**
+ * Можно выбрать точную дату с какого по какое время происходит какое-то событие с точностью до минуты
+ * @order 1
+ * @col 6
+ */
+
+export default () => (
+    <DateTimeRangeField />
+);

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import DateTimeRangeField from '../DateTimeRangeField';
+
+/**
+ * Оключён и без рамок
+ * @order 2
+ * @col 6
+ */
+
+export default () => (
+    <DateTimeRangeField disabled noBorder />
+);

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

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

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import DateTimeRangeField from '../DateTimeRangeField';
+
+/**
+ * Кастомная иконка справа выбранная по контексту
+ * @order 3
+ * @col 6
+ */
+
+export default () => (
+    <DateTimeRangeField icon='plane' />
+);

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import DateTimeRangeField from '../DateTimeRangeField';
+
+/**
+ * Сообщение внутри импута
+ * @order 6
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DateTimeRangeField
+            label='Placeholder'
+            placeholder='Введите удобную вам дату встречи'
+        />
+    </>
+);

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

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

package/src/ui/form/DateTimeRangeField/demo/showRemove.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import DateTimeRangeField from '../DateTimeRangeField';
+
+/**
+ * После введения датты при наведении показывается кнопка, удалить содержание внутри инпута
+ * @order 7
+ * @col 6
+ */
+
+export default () => (
+    <DateTimeRangeField showRemove />
+);

package/src/ui/form/DateTimeRangeField/index.ts

@@ -0,0 +1,3 @@
+import DateTimeRangeField from './DateTimeRangeField';
+
+export default DateTimeRangeField;

package/src/ui/form/DropDownField/DropDownField.story.js

@@ -0,0 +1,23 @@
+import autoComplete from './demo/auto-complete';
+import disabled from './demo/disabled';
+import errors from './demo/errors';
+import multiple from './demo/multiple';
+import placeholder from './demo/placeholder';
+import required from './demo/required';
+import showReset from './demo/show-reset';
+import noBorder from './demo/no-border';
+
+export default {
+    title: 'form.DropDownField',
+};
+
+export {
+    autoComplete,
+    disabled,
+    errors,
+    multiple,
+    placeholder,
+    required,
+    showReset,
+    noBorder,
+};