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

package/src/ui/form/Field/fieldWrapper.tsx

@@ -1,251 +0,0 @@
-import _has from 'lodash-es/has';
-import _upperFirst from 'lodash-es/upperFirst';
-import {useContext, useMemo} from 'react';
-import * as React from 'react';
-import {mergeLayoutProp, providers} from '../../../utils/form';
-import {FormContext} from '../Form/Form';
-import FieldLayout from '../FieldLayout/FieldLayout';
-import {useComponents} from '../../../hooks';
-
-export interface IFieldWrapperInputProps {
-    /**
-     * Префикс, который добавится к аттрибуту (названию) поля в форме
-     */
-    prefix?: string | boolean;
-
-    /**
-     * Название поля либо отмена отображение поля (false)
-     * @example 'Visible'
-     */
-    label?: string | boolean | any;
-
-    /**
-     * Аттрибут (название) поля в форме
-     * @example 'isVisible'
-     */
-    attribute?: string;
-
-    /**
-     * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
-     */
-    model?: string | ((...args: any[]) => any) | any;
-
-    /**
-     * Подсказка, которая отобразится рядом с полем
-     * @example 'Only english letters'
-     */
-    hint?: string;
-
-    /**
-     * Обязательное ли поле? Если true, то к названию будет добавлен
-     * модификатор 'required' - красная звездочка (по умолчанию)
-     * @example true
-     */
-    required?: boolean;
-
-    /**
-     * Переводит элемент в состояние "не активен"
-     * @example true
-     */
-    disabled?: boolean;
-
-    /**
-     * Подсказка для поля
-     * @example Your text...
-     */
-    placeholder?: string;
-
-    /**
-     * Шаблон для поля, который настраивает его расположение внутри формы.
-     * Если false, то поле будет отрендерено без шаблона.
-     * @example 'horizontal'
-     */
-    layout?: FormLayout;
-
-    value?: any,
-
-    onChange?: (...args: any[]) => any;
-
-    /**
-     * Ошибки в поле
-     * @example ['Error text']
-     */
-    errors?: string[];
-
-    date?: any;
-
-    /**
-     * Темная тема
-     */
-    dark?: boolean,
-
-    /**
-     * Размер поля
-     */
-    size?: Size,
-
-    [key: string]: any,
-}
-
-export interface IFieldWrapperOutputProps {
-    formId?: string,
-    componentId?: string,
-    errors?: string[],
-    input?: {
-        name?: string,
-        value?: any,
-        onChange: (value: any) => void,
-    },
-}
-
-interface IFieldWrapperOptions {
-    label?: boolean,
-    list?: boolean,
-    attributeSuffixes?: string[],
-}
-
-export interface FieldWrapperComponent<T> {
-    (props: IFieldWrapperInputProps & T): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-}
-
-const getKey = (baseName, attribute) => baseName + _upperFirst(attribute || '');
-
-const createDynamicField = (componentId, Component, options: IFieldWrapperOptions) => {
-    const DynamicField = (props: IFieldWrapperInputProps) => {
-        const components = useComponents();
-
-        // Get context, formId
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const context = props.formId !== false ? useContext(FormContext) : null;
-        const formId = props.formId || props.formId === false ? props.formId : (context?.formId || null);
-        const model = props.model || context?.model || null;
-
-        // Result wrapper props
-        const wrapperProps: IFieldWrapperOutputProps = {
-            componentId,
-            formId,
-        };
-
-        options.attributeSuffixes.forEach(suffix => {
-            const attributeKey = getKey('attribute', suffix);
-            const inputKey = getKey('input', suffix);
-            const errorsKey = getKey('errors', suffix);
-
-            // Get full name (attribute with prefix)
-            const name = [props.prefix, props[attributeKey]].filter(Boolean).join('.');
-
-            // Register field
-            if (formId) {
-                components.ui.registerField(formId, name, componentId);
-            }
-
-            let errors;
-            let value;
-            let setValue;
-            if (context?.provider) {
-                // Resolve data provider
-                const providerResult = context?.provider.useField(formId, name, options.list);
-                errors = providerResult.errors;
-                value = providerResult.value;
-                setValue = providerResult.setValue;
-            } else if (_has(props, 'value') && _has(props, 'onChange')) {
-                // Controlled component via props
-                errors = null;
-                value = props.value;
-                setValue = props.onChange;
-            } else {
-                // Uncontrolled component
-                const stateResult = providers.state.useField(props.value);
-                errors = stateResult.errors;
-                value = stateResult.value;
-                setValue = stateResult.setValue;
-            }
-
-            // Set errors
-            wrapperProps[errorsKey] = errors;
-
-            // Input object
-            wrapperProps[inputKey] = useMemo(() => ({ // eslint-disable-line react-hooks/rules-of-hooks
-                name,
-                value,
-                onChange: setValue,
-            }), [name, setValue, value]);
-        });
-
-        return components.ui.renderView(Component, {
-            ...components.ui.getFieldProps(componentId, model, props.attribute),
-            ...props,
-            ...wrapperProps,
-        });
-    };
-    DynamicField.displayName = componentId;
-    DynamicField.defaultProps = Component.defaultProps;
-    return DynamicField;
-};
-
-// Field Wrapper
-export default function fieldWrapper<T = any>(
-    componentId,
-    Component: any,
-    optionsConfig: IFieldWrapperOptions = {
-        attributeSuffixes: [''],
-    },
-): FieldWrapperComponent<T> {
-    const options = {
-        ...optionsConfig,
-        attributeSuffixes: optionsConfig.attributeSuffixes || [''],
-    };
-
-    const NewComponent = (props: IFieldWrapperInputProps):JSX.Element => {
-        const components = useComponents();
-
-        // Get context, formId
-        const context = useContext(FormContext);
-        const model = props.model || context?.model || null;
-
-        const attributesProps = options.attributeSuffixes.reduce((obj, suffix) => {
-            const attributeKey = getKey('attribute', suffix);
-            obj[attributeKey] = props[attributeKey];
-            return obj;
-        }, {});
-        const attribute = Object.values(attributesProps)[0];
-
-        // Get UI props and create Field Class dynamically (for add field props - input, errors, model, ...)
-        const metaProps = useMemo(
-            () => components.ui.getFieldProps(componentId, model, attribute),
-            [components.ui, attribute, model],
-        );
-        if (!Component.DynamicField) {
-            Component.DynamicField = createDynamicField(componentId, Component, options);
-        }
-
-        // Resolve layout
-        const layout = useMemo(() => mergeLayoutProp(context.layout, props.layout), [context.layout, props.layout]);
-
-        if (layout !== null) {
-            return components.ui.renderView(FieldLayout, {
-                ...attributesProps,
-                layout,
-                size: props.size || context.size || null,
-                required: _has(props, 'required') ? props.required : metaProps.required,
-                label: options.label === false ? null : (_has(props, 'label') ? props.label : metaProps.label),
-                hint: _has(props, 'hint') ? props.hint : metaProps.hint,
-                errors: props.errors,
-                children: (
-                    <Component.DynamicField {...props} />
-                ),
-            });
-        }
-
-        return components.ui.renderView(Component.DynamicField, props);
-    };
-
-    NewComponent.WrappedComponent = Component;
-    NewComponent.displayName = componentId;
-    NewComponent.defaultProps = Component.defaultProps;
-    return NewComponent;
-}

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

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

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

@@ -1,13 +0,0 @@
-import layoutDefault from './demo/default';
-import layoutHorizontal from './demo/horizontal';
-import layoutInline from './demo/inline';
-
-export default {
-  title: 'form.FieldLayout',
-};
-
-export {
-    layoutDefault,
-    layoutHorizontal,
-    layoutInline,
-}

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

@@ -1,38 +0,0 @@
-import 'jest-enzyme';
-import mountWithApp from '../../../../tests/mountWithApp';
-import FieldLayout from './FieldLayout';
-
-describe('FieldLayout', () => {
-    it('should render something without props', () => {
-        const wrapper = mountWithApp(FieldLayout);
-        expect(wrapper.find(FieldLayout)).not.toBeEmptyRender();
-    });
-
-    describe('Static props', () => {
-        const props = {
-            label: 'FieldLayout',
-            errors: 'Field is required',
-            layout: 'horizontal',
-            hint: 'Save', // When there are no errors in field and layout !== 'inline'
-            required: true,
-        };
-
-        const wrapper = mountWithApp(FieldLayout, {...props});
-
-        it('should static props transmitted unchanged', () => {
-            expect(wrapper.find(FieldLayout)).toHaveProp(props);
-        });
-        it('should render label', () => {
-            expect(wrapper.find('.FieldLayoutView__label')).toHaveText('FieldLayout:');
-        });
-        it('should render errors', () => {
-            expect(wrapper.find('.FieldLayoutView__invalid-feedback')).toHaveText('Field is required');
-        });
-        it('should render hint', () => {
-            expect(wrapper.find('.FieldLayoutView__hint')).not.toExist();
-        });
-        it('should be required', () => {
-            expect(wrapper.find('.FieldLayoutView__label_required')).toExist();
-        });
-    });
-});

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

@@ -1,94 +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'
-     */
-    errors?: 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,
-        style?: any,
-        label: boolean,
-        cols: number[],
-        [key: string]: any,
-    },
-    children?: React.ReactNode
-}
-
-const defaultProps = {
-    layout: {
-        layout: 'default',
-        cols: [3, 6],
-    },
-};
-
-function FieldLayout(props: IFieldLayoutProps): JSX.Element {
-    const components = useComponents();
-
-    // Error from state
-    const errors = useForm().formSelector(state => _get(state, 'errors.' + props.attribute));
-
-    const layout = useMemo(() => mergeLayoutProp(defaultProps.layout, props.layout), [props.layout]);
-    if (layout === false) {
-        return props.children;
-    }
-
-    return components.ui.renderView(props.layoutView || 'form.FieldLayoutView', {
-        ...props,
-        errors: props.errors || errors,
-        layout,
-    });
-}
-
-export default React.memo(FieldLayout);

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

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import InputField from '../../InputField';
-import FieldLayout from '../FieldLayout';
-
-/**
- * Обработка ошибок.
- * @order 3
- * @col 6
- */
-
-export default () => (
-    <FieldLayout errors={['The field is filled incorrectly']}>
-        <InputField />
-    </FieldLayout>
-);

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

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import InputField from '../../InputField';
-import FieldLayout from '../FieldLayout';
-
-const layouts = {
-    inline: 'Inline',
-    default: 'Default',
-    horizontal: 'Horizontal',
-};
-
-/**
- * По-умлочанию FieldLayout имеет 3 заданных ориентации.
- * @order 5
- * @col 12
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '10px'}}>
-        {Object.keys(layouts).map(layout => (
-            <FieldLayout className='col-12 mb-4' key={layout} layout={layout}>
-                <InputField label={layouts[layout]} />
-            </FieldLayout>
-        ))}
-    </div>
-);

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

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

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,
-};