@steroidsjs/core 2.2.75 → 2.2.78

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

@@ -1,266 +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[];
-
-    /**
-     * Изначальное количество групп с полями
-     * @example 2
-     */
-    initialRowsCount?: number;
-
-    /**
-     * Отображение кнопки для добавления ещё одной группы с полями
-     * @example true
-     */
-    showAdd?: boolean;
-
-    /**
-     * Возможность удаления группы с полями (добавляет крестик справа от группы)
-     * @example true
-     */
-    showRemove?: boolean;
-
-    /**
-     * Дополнительный CSS-класс для списка с группами полей
-     */
-    className?: CssClassName;
-
-    /**
-     * Дополнительный CSS-класс для таблицы
-     */
-    tableClassName?: 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,
-    tableClassName?: string,
-    style?: any,
-    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): JSX.Element {
-    const components = useComponents();
-    const context = useContext(FormContext);
-
-    // Resolve model
-    const modelAttributes = components.meta.getModel(props.model)?.attributes;
-
-    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) {
-            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 => {
-                if (typeof field === 'string') {
-                    field = {attribute: field};
-                }
-
-                return {
-                    ...(modelAttributes || []).find(attributeItem => attributeItem.attribute === field.attribute),
-                    ...field,
-                    disabled: _isBoolean(field.disabled) ? field.disabled : props.disabled,
-                    size: field.size || props.size,
-                };
-            }),
-        [modelAttributes, props.disabled, props.items, props.size],
-    );
-
-    const contextValue = useMemo(() => ({
-        formId: props.formId,
-        model: props.model,
-        prefix: props.prefix,
-        size: props.size,
-        layout: props.layout,
-        provider: context.provider,
-        reducer: context.reducer,
-    }), [context.provider, context.reducer, props.formId, props.layout, props.model, props.prefix, props.size]);
-
-    const commonProps = {
-        showAdd: props.showAdd,
-        showRemove: props.showRemove,
-        size: props.size,
-        disabled: props.disabled,
-        required: props.required,
-        className: props.className,
-        tableClassName: props.tableClassName,
-        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<IFieldListProps>('FieldList', FieldList, {list: true});

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

@@ -1,46 +0,0 @@
-import * as React from 'react';
-
-import FieldList from '../FieldList';
-import Form from '../../Form';
-import InputField from '../../InputField';
-import NumberField from '../../NumberField';
-
-/**
- * Обычный пример использования FieldList.
- * @order 1
- * @col 12
- */
-
-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/demo/disabled.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-
-import FieldList from '../FieldList';
-import Form from '../../Form';
-import InputField from '../../InputField';
-import NumberField from '../../NumberField';
-
-/**
- * Выключенный или недоступный для использования.
- * @order 2
- * @col 12
- */
-
-export default () => (
-    <>
-        <Form formId='FieldListForm'>
-            <FieldList
-                disabled
-                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,84 +0,0 @@
-import React, {useContext, useMemo} from 'react';
-import _isString from 'lodash-es/isString';
-import Field from '../Field';
-import {IFieldProps} from '../Field/Field';
-import {FormContext, IFormContext} from '../Form/Form';
-import {useComponents} from '../../../hooks';
-import {mergeLayoutProp} from '../../../utils/form';
-
-/**
- * FieldSet
- * Компонент для группировки полей формы
- */
-export interface IFieldSetProps extends IFormContext {
-    /**
-     * Конфигурационный массив с полями формы
-     */
-    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,
-}
-
-function FieldSet(props: IFieldSetProps): JSX.Element {
-    const components = useComponents();
-    const context = useContext(FormContext);
-
-    const contextValue = useMemo(() => ({
-        formId: props.formId || context.formId,
-        model: props.model || context.model,
-        prefix: [context.prefix, props.prefix]
-            .filter(Boolean)
-            .join('.'),
-        size: props.size || context.size,
-        layout: mergeLayoutProp(context.layout, props.layout),
-        provider: context.provider,
-        reducer: context.reducer,
-    }), [context.formId, context.layout, context.model, context.prefix, context.provider, context.reducer,
-        context.size, props.formId, props.layout, props.model, props.prefix, props.size]);
-
-    const FieldSetView = props.view || components.ui.getView('form.FieldSetView');
-
-    return (
-        <FormContext.Provider value={contextValue}>
-            <FieldSetView
-                className={props.className}
-                label={props.label}
-                {...props}
-            >
-                {props.children}
-                {(props.fields || []).map((field: any, index) => (
-                    <Field
-                        key={index}
-                        {...(_isString(field) ? {attribute: field} : field)}
-                        prefix={contextValue.prefix}
-                    />
-                ))}
-            </FieldSetView>
-        </FormContext.Provider>
-    );
-}
-
-export default FieldSet;

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-import Form from '../../Form';
-import InputField from '../../InputField';
-import FieldSet from '../FieldSet';
-import DropDownField from '../../DropDownField';
-
-/**
- * Обычный пример использования FieldSet.
- * @order 1
- * @col 12
- */
-
-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>
-    </>
-);