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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,23 +0,0 @@
-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,
-};