@steroidsjs/core 2.2.87 → 2.3.0-beta.1

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

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

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

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

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

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

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

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

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

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

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

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

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