@steroidsjs/core 2.3.0-beta.1 → 2.3.0-beta.2

package/src/ui/form/SwitcherField/SwitcherField.tsx

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import {useCallback, useEffect} from 'react';
-import {usePrevious} from 'react-use';
-import _isEqual from 'lodash-es/isEqual';
-import fieldWrapper, {
-    IFieldWrapperInputProps,
-    IFieldWrapperOutputProps,
-} from '../Field/fieldWrapper';
-import {IDataProviderConfig} from '../../../hooks/useDataProvider';
-import {useComponents, useDataProvider, useDataSelect} from '../../../hooks';
-import {IDataSelectConfig} from '../../../hooks/useDataSelect';
-
-/**
- * SwitcherField
- * Список с кнопками. Используется для выбора одного значения.
- */
-export interface ISwitcherFieldProps extends IFieldWrapperInputProps,
-    IDataProviderConfig, Omit<IDataSelectConfig, 'items'> {
-
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-
-    /**
-     * Свойства для компонента Button
-     */
-    buttonProps?: any;
-
-    [key: string]: any;
-}
-
-export interface ISwitcherFieldViewProps extends IFieldWrapperOutputProps, Omit<ISwitcherFieldProps, 'items'> {
-    items: Record<string, unknown>[],
-    hoveredId: PrimaryKey | any,
-    selectedIds: (PrimaryKey | any)[],
-    onItemSelect: (id: PrimaryKey | any) => void,
-    onItemHover: (id: PrimaryKey | any) => void,
-    buttonProps?: any,
-}
-
-function SwitcherField(props: ISwitcherFieldProps): JSX.Element {
-    const components = useComponents();
-
-    // Data Provider
-    const {items} = useDataProvider({
-        items: props.items,
-    });
-
-    // Data select
-    const {
-        hoveredId,
-        setHoveredId,
-        selectedIds,
-        setSelectedIds,
-    } = useDataSelect({
-        selectFirst: props.selectFirst,
-        selectedIds: props.selectedIds,
-        primaryKey: props.primaryKey,
-        items,
-        inputValue: props.input.value,
-    });
-
-    const onItemHover = useCallback((id) => {
-        setHoveredId(id);
-    }, [setHoveredId]);
-
-    const onItemSelect = useCallback((id) => {
-        setSelectedIds(id);
-    }, [setSelectedIds]);
-
-    // Sync with form
-    const prevSelectedIds = usePrevious(selectedIds);
-    useEffect(() => {
-        if (!_isEqual(prevSelectedIds, selectedIds)) {
-            props.input.onChange.call(null, selectedIds[0] ?? null);
-        }
-    }, [selectedIds, props.input.onChange, prevSelectedIds]);
-
-    return components.ui.renderView(props.view || 'form.SwitcherFieldView', {
-        ...props,
-        items,
-        hoveredId,
-        selectedIds,
-        onItemHover,
-        onItemSelect,
-    });
-}
-
-SwitcherField.defaultProps = {
-    primaryKey: 'id',
-    disabled: false,
-    required: false,
-    className: '',
-    errors: null,
-};
-
-export default fieldWrapper<ISwitcherFieldProps>('SwitcherField', SwitcherField);

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

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import SwitcherField from '../SwitcherField';
-
-/**
- * Обычный пример использования SwitcherField.
- * @order 1
- * @col 6
- */
-
-export const items = [
-    {
-        id: 1,
-        label: 'First',
-    },
-    {
-        id: 2,
-        label: 'Second',
-    },
-    {
-        id: 3,
-        label: 'Third',
-    },
-    {
-        id: 4,
-        label: 'Fourth',
-    },
-];
-
-export default () => (
-    <>
-        <SwitcherField
-            label='Basic'
-            items={items}
-        />
-    </>
-);

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

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

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

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

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

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

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

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

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

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

package/src/ui/form/TextField/TextField.test.tsx

@@ -1,53 +0,0 @@
-import 'jest-enzyme';
-import TextFieldView from '@steroidsjs/bootstrap/form/TextField/TextFieldView';
-import TextField from './TextField';
-import mountWithApp from '../../../../tests/mountWithApp';
-
-describe('TextField tests', () => {
-    it('should render something without props', () => {
-        const wrapper = mountWithApp(TextField, {view: TextFieldView});
-        expect(wrapper).not.toBeEmptyRender();
-    });
-
-    describe('Static props', () => {
-        const props = {
-            disabled: true,
-            required: true,
-            className: 'test',
-            placeholder: 'test',
-            errors: ['Error text'],
-        };
-
-        const wrapper = mountWithApp(TextField, {...props, view: TextFieldView});
-
-        it('should static props transmitted unchanged', () => {
-            expect(wrapper.find('TextField')).toHaveProp(props);
-        });
-
-        it('should have right placeholder', () => {
-            expect(wrapper.find('textarea')).toHaveProp('placeholder', props.placeholder);
-        });
-        it('should have right external className', () => {
-            expect(wrapper.find('textarea')).toHaveClassName(props.className);
-        });
-        it('should be required', () => {
-            expect(wrapper.find('TextField')).toHaveProp('required', props.required);
-        });
-        it('should be disabled', () => {
-            expect(wrapper.find('textarea')).toBeDisabled();
-        });
-    });
-
-    describe('Actions', () => {
-        it('should value change', () => {
-            const wrapper = mountWithApp(TextField, {view: TextFieldView});
-            wrapper.find('textarea').simulate('change', {target: {value: 'test'} });
-            expect(wrapper.find('textarea')).toHaveProp('value', 'test');
-        });
-        it('should submit on enter', () => {
-            const wrapper = mountWithApp(TextField, {view: TextFieldView});
-            wrapper.find('textarea').simulate('keypress', {key: 'Enter'});
-            // expect(wrapper.find('textarea')).toHaveProp(props.submitOnEnter);
-        });
-    });
-});

package/src/ui/form/TextField/TextField.tsx

@@ -1,102 +0,0 @@
-import * as React from 'react';
-import {KeyboardEventHandler, useCallback, useMemo} from 'react';
-import {useDispatch} from 'react-redux';
-import {useComponents} from '../../../hooks';
-import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
-
-/**
- * TextField
- * Поле для ввода нескольких строк теста
- */
-export interface ITextFieldProps extends IFieldWrapperInputProps {
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: string;
-
-    /**
-     * Отправлять форму при нажатии на кнопку `enter`
-     * @example true
-     */
-    submitOnEnter?: boolean;
-
-    /**
-     * Свойства для элемента \<input /\>
-     * @example {onKeyDown: ...}
-     */
-    inputProps?: any;
-
-    /**
-     * Дополнительный CSS-класс для тега \<textarea\>
-     */
-    className?: CssClassName;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-
-    [key: string]: any;
-}
-
-export interface ITextFieldViewProps extends ITextFieldProps, IFieldWrapperOutputProps {
-    inputProps: {
-        name: string,
-        onChange: (value: string | React.ChangeEvent) => void,
-        onKeyUp: KeyboardEventHandler<HTMLTextAreaElement>,
-        value: string | number,
-        placeholder: string,
-        disabled: boolean,
-    },
-}
-
-function TextField(props: ITextFieldProps & IFieldWrapperOutputProps): JSX.Element {
-    const dispatch = useDispatch();
-    const components = useComponents();
-
-    const onKeyUp = useCallback(e => {
-        if (
-            props.submitOnEnter
-            && props.formId
-            && e.keyCode === 13
-            && !e.shiftKey
-        ) {
-            e.preventDefault();
-            // TODO This is not worked in redux... =(
-            // dispatch(submit(props.formId));
-        }
-    }, [props.formId, props.submitOnEnter]);
-
-    const onChange = useCallback(
-        e => props.input.onChange.call(null, e.target ? e.target.value : e.nativeEvent.text),
-        [props.input.onChange],
-    );
-
-    const inputProps = useMemo(() => ({
-        name: props.input.name,
-        value: props.input.value || '',
-        onChange,
-        onKeyUp,
-        placeholder: props.placeholder,
-        disabled: props.disabled,
-        ...props.inputProps,
-    }), [onKeyUp, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
-
-    return components.ui.renderView(props.view || 'form.TextFieldView', {
-        ...props,
-        inputProps,
-    });
-}
-
-TextField.defaultProps = {
-    disabled: false,
-    required: false,
-    className: '',
-    placeholder: '',
-    submitOnEnter: false,
-    errors: null,
-};
-
-export default fieldWrapper<ITextFieldProps>('TextField', TextField);

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

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

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

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

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

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

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

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

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

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

package/src/ui/form/TextField/demo/sizes.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import TextField from '../TextField';
-
-/**
- * По-умлочанию TextField имеет 3 заданных размера.
- * @order 7
- * @col 12
- */
-
-const sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large',
-};
-
-export default () => (
-    <>
-        <div className='row'>
-            {Object.keys(sizes).map(size => (
-                <div className='col' key={size}>
-                    <TextField label={sizes[size]} size={size} />
-                </div>
-            ))}
-        </div>
-    </>
-);

package/src/ui/form/TextField/demo/submit.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import TextField from '../TextField';
-
-/**
- * Чтобы подтвердить используется нажатие клавиши Enter
- * @order 6
- * @col 3
- */
-
-export default () => (
-    <>
-        <TextField label='Submit On Enter' submitOnEnter />
-    </>
-);

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

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

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

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

package/src/ui/form/TimeField/TimeField.tsx

@@ -1,124 +0,0 @@
-import {useMemo} from 'react';
-import useDateInputState, {
-    IDateInputStateInput,
-    IDateInputStateOutput,
-} from '../../form/DateField/useDateInputState';
-import {useComponents} from '../../../hooks';
-import fieldWrapper, {IFieldWrapperOutputProps} from '../Field/fieldWrapper';
-
-export interface ITimePanelViewProps extends Pick<ITimeFieldViewProps,
-    'value' | 'onClose' | 'onNow' | 'onSelect' | 'className'>
-{
-    showHeader?: boolean,
-    showNow?: boolean,
-}
-
-/**
- * TimeField
- * Поле для выбора времени
- */
-export interface ITimeFieldProps extends IDateInputStateInput {
-    /**
-     * Отключить border вокруг элемента
-     * @example 'true'
-     */
-    noBorder?: boolean,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-
-    /**
-     * Свойства для view компонента
-     */
-    viewProps?: Record<string, unknown>,
-
-    /**
-     * Свойства для компонента панели времени
-     */
-    timePanelViewProps?: any,
-
-    [key: string]: any;
-}
-
-export interface ITimeFieldViewProps extends IDateInputStateOutput,
-    Pick<ITimeFieldProps, 'size' | 'errors' | 'showRemove' | 'noBorder' | 'className' | 'timePanelViewProps'>
-{
-    [key: string]: any;
-}
-
-function TimeField(props: ITimeFieldProps & IFieldWrapperOutputProps): JSX.Element {
-    const components = useComponents();
-
-    const {
-        onNow,
-        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 timePanelViewProps = useMemo(() => ({
-        onNow,
-        onClose,
-        value: inputProps.value,
-        onSelect: inputProps.onChange,
-        ...props.timePanelViewProps,
-    }), [inputProps.onChange, inputProps.value, onClose, onNow, props.timePanelViewProps]);
-
-    return components.ui.renderView(props.view || 'form.TimeFieldView', {
-        ...props.viewProps,
-        onNow,
-        onClear,
-        onClose,
-        isOpened,
-        inputProps,
-        timePanelViewProps,
-        size: props.size,
-        icon: props.icon,
-        errors: props.errors,
-        noBorder: props.noBorder,
-        disabled: props.disabled,
-        className: props.className,
-        showRemove: props.showRemove,
-    });
-}
-
-TimeField.defaultProps = {
-    disabled: false,
-    displayFormat: 'HH:mm',
-    required: false,
-    placeholder: 'Select time',
-    noBorder: false,
-    showRemove: true,
-    type: 'text',
-    valueFormat: 'HH:mm',
-    useUTC: true,
-    dateInUTC: false,
-};
-
-export default fieldWrapper<ITimeFieldProps>('TimeField', TimeField);

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

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

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

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