@steroidsjs/core 2.0.0-rc.6 → 2.0.1-beta.112

package/src/ui/form/FieldLayout/FieldLayout.tsx

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import _get from 'lodash-es/get';
-import {useMemo} from 'react';
-import {useComponents, useForm} from '../../../hooks';
-import {mergeLayoutProp} from '../../../utils/form';
-
-/**
- * FieldLayout
- * Специальный шаблон для поля, который настраивает его расположение внутри формы, рендерит лейбл, подсказки и ошибки
- */
-export interface IFieldLayoutProps {
-
-    /**
-     * Название поля либо отмена отображение поля (false)
-     * @example 'Visible'
-     */
-    label?: string | boolean | any;
-
-    /**
-     * Подсказка, которая отображается, когда в поле нет ошибок и layout !== 'inline'
-     * @example 'Save'
-     */
-    hint?: string | boolean;
-
-    /**
-     * Обязательное ли поле? Если true,
-     * то к названию будет добавлен модификатор 'required' - красная звездочка (по умолчанию)
-     * @example true
-     */
-    required?: boolean;
-
-    /**
-     * Выбор шаблона для расположения поля. Если false, то поле будет отрендерено без шаблона
-     * @example 'inline'
-     */
-    layout?: FormLayout;
-
-    /**
-     * Ошибки в поле
-     * @example 'Field is required'
-     */
-    error?: string | string[];
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    layoutView?: CustomView;
-
-    [key: string]: any;
-}
-
-export interface IFieldLayoutViewProps {
-    label: string | boolean | any,
-    required: boolean,
-    hint: string | boolean,
-    errors: string | string[],
-    layout?: {
-        layout: FormLayoutName | boolean,
-        className: string,
-        label: boolean,
-        cols: number[],
-        [key: string]: any,
-    },
-    children?: React.ReactNode
-}
-
-const defaultProps = {
-    layout: {
-        layout: 'default',
-        cols: [3, 6],
-    },
-};
-
-function FieldLayout(props: IFieldLayoutProps) {
-    const components = useComponents();
-
-    const layout = useMemo(() => mergeLayoutProp(defaultProps.layout, props.layout), [props.layout]);
-    if (layout === false) {
-        return props.children;
-    }
-
-    // Error from state
-    const error = useForm().formSelector(state => _get(state, 'errors.' + props.attribute));
-
-    return components.ui.renderView(props.layoutView || 'form.FieldLayoutView', {
-        ...props,
-        errors: props.error || error,
-        layout,
-    });
-}
-
-export default React.memo(FieldLayout);

package/src/ui/form/FieldLayout/demo/default.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import InputField from '../../InputField';
-
-export default () => (
-    <>
-        <InputField
-            label='Default'
-            layout='default'
-        />
-    </>
-);

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import InputField from '../../InputField';
-
-export default () => (
-    <>
-        <InputField errors={['The field is filled incorrectly']} />
-    </>
-);

package/src/ui/form/FieldLayout/demo/hint.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import InputField from '../../InputField';
-
-export default () => (
-    <>
-        <InputField
-            hint='Some useful text'
-            label='Hint'
-        />
-    </>
-);

package/src/ui/form/FieldLayout/demo/horizontal.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import InputField from '../../InputField';
-
-export default () => (
-    <>
-        <InputField label='Horizontal' layout='horizontal' />
-    </>
-);

package/src/ui/form/FieldLayout/demo/inline.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import InputField from '../../InputField';
-
-export default () => (
-    <>
-        <div className='mb-2'>Inline (label is hide)</div>
-        <InputField label='Inline' layout='inline' />
-    </>
-);

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

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import InputField from '../../InputField';
-
-export default () => (
-    <>
-        <InputField
-            required
-            label='Required'
-        />
-    </>
-);

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

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

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

@@ -1,9 +0,0 @@
-import basic from './demo/basic';
-
-export default {
-    title: 'form.FieldList',
-};
-
-export {
-    basic,
-};

package/src/ui/form/FieldList/FieldList.tsx

@@ -1,251 +0,0 @@
-import * as React from 'react';
-import _isBoolean from 'lodash-es/isBoolean';
-import _range from 'lodash-es/range';
-import {useEvent, useMount} from 'react-use';
-import {useCallback, useContext, useMemo, useRef} from 'react';
-import {useComponents} from '../../../hooks';
-import {FormContext} from '../../form/Form/Form';
-import {formArrayAdd, formArrayRemove} from '../../../actions/form';
-import tableNavigationHandler, {isDescendant} from './tableNavigationHandler';
-import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../../form/Field/fieldWrapper';
-
-/**
- * FieldList
- * Создает список из сгруппированных полей формы
- */
-interface IFieldListItem extends IFieldWrapperInputProps {
-
-    /**
-     * Будет ли отображён item ?
-     * @example true
-     */
-    visible?: boolean,
-
-    /**
-     * Какой компонент для item использовать?
-     * @example NumberField
-     */
-    component?: any,
-
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: string,
-
-    /**
-     * Дополнительный CSS-класс для item
-     */
-    className?: CssClassName,
-
-    /**
-     * Дополнительный CSS-класс для заголовка
-     */
-    headerClassName?: CssClassName,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения item
-     * @example MyCustomView
-     */
-    view?: CustomView,
-
-    [key: string]: any,
-}
-
-export interface IFieldListProps extends IFieldWrapperInputProps {
-    /**
-     * Начальные значения в полях
-     * @example {name: 'Ivan', amount: 5}
-     */
-    initialValues?: { [key: string]: any }
-
-    /**
-     * Список с полями формы
-     */
-    items?: IFieldListItem[];
-    fields?: any;
-
-    /**
-     * Изначальное количество групп с полями
-     * @example 2
-     */
-    initialRowsCount?: number;
-
-    /**
-     * Отображение кнопки для добавления ещё одной группы с полями
-     * @example true
-     */
-    showAdd?: boolean;
-
-    /**
-     * Возможность удаления группы с полями (добавляет крестик справа от группы)
-     * @example true
-     */
-    showRemove?: boolean;
-
-    /**
-     * Дополнительный CSS-класс для списка с группами полей
-     */
-    className?: CssClassName;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения списка с группами полей
-     * @example MyCustomView
-     */
-    view?: any;
-
-    /**
-     * Пропсы для компонента отображения списка с группами полей - FieldListView
-     */
-    viewProps?: any;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения группы полей
-     * @example MyCustomView
-     */
-    itemView?: any;
-
-    /**
-     * Пропсы для компонента отображения группы полей - FieldListItemView
-     */
-    itemViewProps?: any;
-
-    /**
-     * При фокусировке на одном из элементов формы и нажатию на клавиши стрелок вверх/вниз + Shift
-     * происходит добавление группы полей сверху или снизу соответственно
-     * @example true
-     */
-    enableKeyboardNavigation?: boolean;
-
-    [key: string]: any;
-}
-
-export interface IFieldListViewProps {
-    items?: (IFieldListItem & {
-        disabled?: boolean,
-        size?: boolean,
-    })[];
-    onAdd?: () => void,
-    showRemove?: boolean,
-    showAdd?: boolean,
-    children?: React.ReactNode,
-    className?: string,
-    forwardedRef?: any,
-    disabled?: boolean,
-    size?: Size,
-}
-
-export interface IFieldListItemViewProps extends IFieldWrapperOutputProps {
-    items?: (IFieldListItem & {
-        disabled?: boolean,
-        size?: boolean,
-    })[];
-    onRemove?: (rowIndex: number) => void,
-    prefix: string,
-    required?: boolean,
-    rowIndex: number,
-    showRemove: boolean,
-}
-
-function FieldList(props: IFieldListProps & IFieldWrapperOutputProps) {
-    const components = useComponents();
-    const context = useContext(FormContext);
-
-    // Resolve model
-    const modelFields = components.ui.getModel(props.model)?.fields;
-
-    const dispatch = context.provider.useDispatch();
-
-    // Add and Remove handlers
-    const onAdd = useCallback((rowsCount = 1) => {
-        dispatch(formArrayAdd(context.formId, props.input.name, rowsCount, props.initialValues));
-    }, [context.formId, dispatch, props.initialValues, props.input.name]);
-    const onRemove = useCallback((rowIndex) => {
-        dispatch(formArrayRemove(context.formId, props.input.name, rowIndex));
-    }, [context.formId, dispatch, props.input.name]);
-
-    // Add initial rows
-    useMount(() => {
-        if (!props.input.value?.length) {
-            onAdd(props.initialRowsCount);
-        }
-    });
-
-    // Keyboard navigation
-    const nodeRef = useRef();
-    const onKeyDown = useCallback((event) => {
-        if (props.enableKeyboardNavigation && isDescendant(nodeRef.current, event.target)) {
-            tableNavigationHandler(event, () => onAdd());
-        }
-    }, [onAdd, props.enableKeyboardNavigation]);
-    useEvent('keydown', onKeyDown);
-
-    // Rows items
-    const items = useMemo(
-        () => (props.items || [])
-            .filter(field => field.visible !== false)
-            .map(field => ({
-                ...modelFields?.[field.attribute],
-                ...field,
-                disabled: _isBoolean(field.disabled) ? field.disabled : props.disabled,
-                size: field.size || props.size,
-            })),
-        [modelFields, props.disabled, props.items, props.size],
-    );
-
-    const contextValue = useMemo(() => ({
-        formId: props.formId,
-        model: props.model,
-        prefix: props.prefix,
-        layout: props.layout,
-        provider: context.provider,
-        reducer: context.reducer,
-    }), [context.provider, context.reducer, props.formId, props.layout, props.model, props.prefix]);
-
-    const commonProps = {
-        showAdd: props.showAdd,
-        showRemove: props.showRemove,
-        size: props.size,
-        disabled: props.disabled,
-        required: props.required,
-        items,
-    };
-
-    const FieldListView = props.view || components.ui.getView('form.FieldListView');
-    const FieldListItemView = props.itemView || components.ui.getView('form.FieldListItemView');
-    return (
-        <FormContext.Provider value={contextValue}>
-            <FieldListView
-                {...props.viewProps}
-                {...commonProps}
-                forwardedRef={nodeRef}
-                onAdd={onAdd}
-            >
-                {_range(props.input.value || 0)
-                    .map(index => (
-                        <FieldListItemView
-                            {...props.itemViewProps}
-                            {...commonProps}
-                            key={index}
-                            onRemove={onRemove}
-                            prefix={props.input.name + '.' + index}
-                            rowIndex={index}
-                        />
-                    ))}
-            </FieldListView>
-        </FormContext.Provider>
-    );
-}
-
-FieldList.defaultProps = {
-    initialValues: null,
-    disabled: false,
-    required: false,
-    showAdd: true,
-    showRemove: true,
-    className: '',
-    initialRowsCount: 1,
-    enableKeyboardNavigation: true,
-};
-
-export default fieldWrapper('FieldList', FieldList, {list: true});

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

@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-import FieldList from '../FieldList';
-import Form from '../../Form';
-import InputField from '../../InputField';
-import NumberField from '../../NumberField';
-
-export default () => (
-    <>
-        <Form formId='FieldListForm'>
-            <FieldList
-                attribute='items'
-                label='Items'
-                initialRowsCount={2}
-                items={[
-                    {
-                        attribute: 'id',
-                        type: 'hidden',
-                        component: InputField,
-                    },
-                    {
-                        label: 'Name',
-                        attribute: 'name',
-                        component: InputField,
-                    },
-                    {
-                        label: 'Description',
-                        attribute: 'description',
-                        component: InputField,
-                    },
-                    {
-                        label: 'Amount',
-                        attribute: 'amount',
-                        component: NumberField,
-                    },
-                ]}
-            />
-        </Form>
-    </>
-);

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

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

package/src/ui/form/FieldList/tableNavigationHandler.ts

@@ -1,49 +0,0 @@
-export default (e, addHandler) => {
-    if (!e.shiftKey || [38, 40].indexOf(e.keyCode) === -1) {
-        return;
-    }
-
-    e.preventDefault();
-    const names = e.target.name.split('.');
-    const inputName = names[names.length - 1];
-    let table = e.target;
-    // eslint-disable-next-line no-cond-assign
-    while (table = table.parentElement && table.tagName.toLowerCase() !== 'table') {} // eslint-disable-line no-empty
-    const getInputs = (tableItem) => Array.prototype.slice
-        .call(tableItem.querySelectorAll('input:not([type="hidden"]), select'))
-        .filter(inputElement => {
-            const searchInputNames = inputElement.name.split('.');
-            const searchInputName = searchInputNames[searchInputNames.length - 1];
-            return (
-                names.length === searchInputNames.length
-                    && inputName === searchInputName
-            );
-        });
-    const inputs = getInputs(table);
-    const currentIndex = inputs.findIndex(
-        inputElement => inputElement.name === e.target.name,
-    );
-    const nextIndex = e.keyCode === 38 ? currentIndex - 1 : currentIndex + 1;
-    if (nextIndex >= 0 && nextIndex < inputs.length) {
-        inputs[nextIndex].focus();
-    } else if (nextIndex === inputs.length) {
-        addHandler();
-        setTimeout(() => {
-            const inputs2 = getInputs(table);
-            if (inputs2[nextIndex]) {
-                inputs2[nextIndex].focus();
-            }
-        });
-    }
-};
-
-export const isDescendant = (parent, child) => {
-    let node = child.parentNode;
-    while (node !== null) {
-        if (node === parent) {
-            return true;
-        }
-        node = node.parentNode;
-    }
-    return false;
-};

package/src/ui/form/FieldSet/FieldSet.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import _isString from 'lodash-es/isString';
-import {components} from '../../../hoc';
-import {IComponentsHocOutput} from '../../../hoc/components';
-import Field from '../Field';
-import {IFieldProps} from '../Field/Field';
-import {FormContext, IFormContext} from '../Form/Form';
-import {mergeLayoutProp} from '../../../utils/form';
-
-/**
- * FieldSet
- * Компонент для группировки полей формы с помощью тега <fieldset>...</fieldset> и заголовка <legend>...</legend>
- */
-export interface IFieldSetProps extends IFormContext, IComponentsHocOutput {
-    /**
-     * Конфигурационный массив с полями формы
-     */
-    fields?: IFieldProps[],
-
-    /**
-     * Заголовок для группы полей в форме
-     * @example Save
-     */
-    label?: any,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView,
-
-    /**
-     * Дополнительный CSS-класс для <fieldset>...</fieldset>
-     */
-    className?: CssClassName,
-
-    [key: string]: any,
-}
-
-export interface IFieldSetViewProps {
-    className?: string,
-    children?: React.ReactNode,
-    label?: string | any,
-}
-
-@components('ui')
-export default class FieldSet extends React.PureComponent<IFieldSetProps> {
-    render() {
-        const FieldSetView = this.props.view || this.props.ui.getView('form.FieldSetView');
-        return (
-            <FormContext.Consumer>
-                {context => (
-                    <FormContext.Provider
-                        value={{
-                            formId: this.props.formId || context.formId,
-                            model: this.props.model || context.model,
-                            prefix: [context.prefix, this.props.prefix]
-                                .filter(Boolean)
-                                .join('.'),
-                            layout: mergeLayoutProp(context.layout, this.props.layout),
-                        }}
-                    >
-                        <FieldSetView
-                            className={this.props.className}
-                            label={this.props.label}
-                            {...this.props}
-                        >
-                            {this.props.children}
-                            {(this.props.fields || []).map((field: any, index) => (
-                                <Field
-                                    key={index}
-                                    {...(_isString(field) ? {attribute: field} : field)}
-                                    prefix={null}
-                                />
-                            ))}
-                        </FieldSetView>
-                    </FormContext.Provider>
-                )}
-            </FormContext.Consumer>
-        );
-    }
-}

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

@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-import Form from '../../Form';
-import InputField from '../../InputField';
-import FieldSet from '../FieldSet';
-import DropDownField from '../../DropDownField';
-
-export default () => (
-    <>
-        <Form formId='FieldSetForm' useRedux>
-            <FieldSet
-                fields={[
-                    {
-                        attribute: 'name',
-                        component: InputField,
-                        label: 'Name',
-                    },
-                    {
-                        attribute: 'country',
-                        component: DropDownField,
-                        label: 'Country',
-                        items: ['Novosibirsk', 'Krasnoyarsk', 'Tomsk'],
-                    },
-                ]}
-                label='Label'
-            />
-        </Form>
-    </>
-);

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

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