@steroidsjs/core 2.2.74 → 2.2.75

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

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

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

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

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

@@ -0,0 +1,19 @@
+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/TextField/TextField.story.js

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+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/TimeField/TimeField.story.js

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

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

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

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

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

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