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

package/src/ui/form/FileField/FileField.tsx

@@ -1,189 +0,0 @@
-import * as React from 'react';
-import File from 'fileup-core/lib/models/File';
-import _first from 'lodash-es/first';
-import _values from 'lodash-es/values';
-import {IFileHocInput, IFileHocOutput} from '../../../hoc/file';
-import useFile from '../../../hooks/useFile';
-import {useComponents} from '../../../hooks';
-import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
-
-export interface IFileFieldProps extends IFieldWrapperInputProps, IFileHocInput, IFileHocOutput {
-
-    /**
-     * Показать значок удаление файла
-     * @example true
-     */
-    showRemove?: boolean,
-    buttonComponent?: React.ReactNode; // TODO May be buttonView ?
-    buttonProps?: any;
-    className?: CssClassName;
-    view?: CustomView;
-    itemView?: CustomView;
-    itemProps?: any;
-    [key: string]: any;
-}
-
-export interface IFileFieldItemViewProps extends IFileHocInput, IFileHocOutput {
-    /**
-     * Уникальный текстовый идентификатор
-     * @example e65f5867-0083-48a7-af43-1121ed9e6280
-     */
-    uid?: string,
-
-    imagesOnly?: boolean,
-
-    /**
-     * ID файла
-     * @example 34
-     */
-    fileId?: number | string,
-
-    /**
-     * Исходное название файла
-     * @example original-name
-     */
-    title?: string,
-    disabled?: boolean,
-    showRemove?: boolean,
-
-    /**
-     * Обработчик события удаления файла
-     * @param e
-     */
-    onRemove?: () => void,
-    error?: string,
-    image?: {
-        /**
-         * Url файла
-         * @example assets/file.txt
-         */
-        url: string,
-
-        /**
-         * Ширина
-         * @example 1280
-         */
-        width: string,
-
-        /**
-         * Высота
-         * @example 720
-         */
-        height: string,
-    },
-    progress?: {
-        bytesUploaded: number,
-        percent: number,
-    },
-}
-
-export interface IFileFieldViewProps extends IFileFieldProps {
-    buttonComponent?: React.ReactNode | any;
-    imagesOnly?: boolean;
-    itemProps?: any;
-    buttonProps: {
-        /**
-         * Название поля
-         * @example Save
-         */
-        label?: string | any,
-        size?: boolean,
-
-        /**
-         * Переводит в неактивное состояние
-         * @example true
-         */
-        disabled?: boolean,
-
-        /**
-         * Обработчик события нажатия
-         * @param e
-         */
-        onClick?: (e: Event) => void,
-    },
-    itemView?: React.ReactNode | any;
-    items: IFileFieldItemViewProps[]
-}
-
-function FileField(props: IFileFieldProps & IFieldWrapperOutputProps) {
-    const components = useComponents();
-    const {files, onBrowse, onRemove} = useFile(props);
-
-    const FileFieldView = props.view || components.ui.getView('form.FileFieldView');
-    const FileFieldItemView = props.itemView || components.ui.getView('form.FileFieldItemView');
-    return (
-        <FileFieldView
-            {...props}
-            buttonComponent={props.buttonComponent}
-            buttonProps={{
-                label: props.imagesOnly
-                    ? props.multiple
-                        ? __('Прикрепить фотографии')
-                        : __('Прикрепить фото')
-                    : props.multiple
-                        ? __('Прикрепить файлы')
-                        : __('Прикрепить файл'),
-                size: props.size,
-                disabled: props.disabled,
-                onClick: onBrowse,
-                ...props.buttonProps,
-            }}
-            itemView={FileFieldItemView}
-            items={files.map(file => {
-                const data = file.getResultHttpMessage() || {};
-                const item = {
-                    uid: file.getUid(),
-                    fileId: data.id || null,
-                    title: file.getName(),
-                    size: props.size,
-                    disabled: props.disabled,
-                    showRemove: props.showRemove,
-                    onRemove: () => onRemove(file),
-                    error: null,
-                    image: null,
-                    progress: null,
-                };
-                // Add error
-                if (file.getResult() === File.RESULT_ERROR) {
-                    if (typeof file.getResultHttpMessage() === 'string'
-                            && file.getResultHttpMessage().substr(0, 1) === '{') {
-                        const errorResponse = JSON.parse(file.getResultHttpMessage());
-                        item.error = errorResponse.error || errorResponse.message || __('Ошибка');
-                    } else {
-                        item.error = file.getResultHttpMessage()
-                            ? JSON.stringify(file.getResultHttpMessage())
-                            : __('Ошибка');
-                    }
-                }
-                // Add thumbnail image
-                if (data.images) {
-                    // Image object has properties: url, width, height
-                    item.image = data.images[props.imagesProcessor]
-                        || _first(_values(data.images));
-                }
-                // Add progress
-                if (file.getStatus() === File.STATUS_PROCESS) {
-                    item.progress = {
-                        bytesUploaded: file.getBytesUploaded(),
-                        percent: file.progress.getPercent(),
-                    };
-                }
-                return item;
-            })}
-        />
-    );
-}
-
-FileField.defaultProps = {
-    disabled: false,
-    required: false,
-    className: '',
-    showRemove: true,
-    buttonProps: {
-        color: 'secondary',
-        outline: true,
-    },
-    multiple: false,
-};
-
-export default fieldWrapper('FileField', FileField);

package/src/ui/form/FileField/index.tsx

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

package/src/ui/form/Form/AutoSaveHelper.ts

@@ -1,27 +0,0 @@
-import _isString from 'lodash-es/isString';
-
-export default class AutoSaveHelper {
-    static STORAGE_KEY_PREFIX = 'Form';
-
-    static restore(clientStorage, formId, initialValues) {
-        const values = clientStorage.get(`${AutoSaveHelper.STORAGE_KEY_PREFIX}_${formId}`) || '';
-        if (_isString(values) && values.substr(0, 1) === '{') {
-            return {
-                ...JSON.parse(values),
-                ...initialValues,
-            };
-        }
-        return initialValues;
-    }
-
-    static save(clientStorage, formId, values) {
-        clientStorage.set(
-            `${AutoSaveHelper.STORAGE_KEY_PREFIX}_${formId}`,
-            JSON.stringify(values),
-        );
-    }
-
-    static remove(clientStorage, formId) {
-        clientStorage.remove(`${AutoSaveHelper.STORAGE_KEY_PREFIX}_${formId}`);
-    }
-}

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

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

package/src/ui/form/Form/Form.tsx

@@ -1,415 +0,0 @@
-import * as React from 'react';
-import {useSelector} from 'react-redux';
-import _get from 'lodash-es/get';
-import _isUndefined from 'lodash-es/isUndefined';
-import _set from 'lodash-es/set';
-import * as queryString from 'qs';
-import {useCallback, useMemo} from 'react';
-import {useFirstMountState, useMount, usePrevious, useUpdateEffect} from 'react-use';
-import AutoSaveHelper from './AutoSaveHelper';
-import SyncAddressBarHelper from './SyncAddressBarHelper';
-import {IFieldProps} from '../Field/Field';
-import {useComponents} from '../../../hooks';
-import {cleanEmptyObject, normalizeLayout, providers} from '../../../utils/form';
-import validate from '../validate';
-
-/**
- * Form
- * Компонент для создания формы
- */
-export interface IFormProps {
-    /**
-     * Идентификатор формы
-     * @example BookingForm
-     */
-    formId?: string;
-
-    prefix?: string;
-
-    /**
-     * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
-     */
-    model?: string | ((...args: any[]) => any) | any;
-
-    /**
-     * Url на который будет отправлена форма
-     * @example api/v1/handle-form
-     */
-    action?: string;
-
-    /**
-     * Тип HTTP запроса (GET | POST | PUT | DELETE)
-     * @example POST
-     */
-    actionMethod?: string;
-
-    /**
-     * Шаблон для полей в форме
-     * @example horizontal
-     */
-    layout?: FormLayout;
-
-    /**
-     * Обработчик события отправки формы
-     * @param args
-     */
-    onSubmit?: (...args: any[]) => any;
-
-    /**
-     * Набор с правилами для проверки соответствия значений полей формы определенному формату.
-     * Проверка запускается в момент отправки формы (в обработчике onSubmit).
-     * @example [['name', 'required'], ['age', 'integer']]
-     */
-    validators?: any[];
-
-    /**
-     * Обработчик события перед отправкой формы
-     * @param args
-     */
-    onBeforeSubmit?: (...args: any[]) => any;
-
-    /**
-     * Обработчик события после отправки формы
-     * @param args
-     */
-    onAfterSubmit?: (...args: any[]) => any;
-
-    /**
-     * Обработчик события при каком-либо изменении в форме
-     * @param args
-     */
-    onChange?: (...args: any[]) => any;
-
-    /**
-     * Обработчик успешного выполнения формы (без ошибок)
-     * @param args
-     */
-    onComplete?: (...args: any[]) => any;
-
-    /**
-     * Автоматически стартовать 2fa аутентификацию (отправлять код)
-     */
-    autoStartTwoFactor?: boolean,
-
-    /**
-     * Обработчик, который вызывается при запросе 2FA
-     */
-    onTwoFactor?: (providerName: string, info?: any) => Promise<any> | any | void,
-
-    /**
-     * Сохраняет значения полей формы в LocalStorage
-     * @example true
-     */
-    autoSave?: boolean,
-
-    /**
-     * Начальные значения формы
-     */
-    initialValues?: any | any[];
-
-    /**
-     * Дополнительный CSS-класс для <form>...</form>
-     */
-    className?: CssClassName;
-
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-
-    /**
-     * Поля, которые необходимо поместить в форму
-     * @example [{attribute: 'category', component: 'DropDownField'}]
-     */
-    fields?: (string | IFieldProps)[],
-
-    /**
-     * Использовать для данных глобальное хранилище (redux)
-     * @example true
-     */
-    useRedux?: boolean,
-
-    /**
-     * Надпись на кнопке отправки формы
-     * @example Submit
-     */
-    submitLabel?: string;
-
-    /**
-     * Значения полей формы будут подставляться в качестве query-параметров в адресную строку
-     * @example true
-     */
-    syncWithAddressBar?: boolean;
-
-    /**
-     * Обработчик, который используется для форматирования значений из адресной строки в валидные значения формы
-     */
-    restoreCustomizer?: (...args: any[]) => any; // TODO Refactor it!
-
-    /**
-     * Указывает, что в качестве сепаратора для параметров формы в адресной строке нужно использовать '#', а не '?'
-     */
-    useHash?: boolean; // TODO Refactor it!
-
-    /**
-     * Если в форме есть элементы <input>, то произойдет автоматическая фокусировка на первом из них
-     * @example true
-     */
-    autoFocus?: boolean;
-
-    [key: string]: any;
-}
-
-export interface IFormViewProps {
-    submitLabel?: string;
-    fields?: (string | IFieldProps)[],
-    onSubmit: any,
-    className?: CssClassName,
-    layout?: {
-        layout: FormLayoutName | boolean,
-        className: CssClassName,
-        label: boolean,
-        cols: number[],
-        [key: string]: any,
-    },
-    children?: React.ReactNode,
-}
-
-export interface IFormReducerState {
-    values: any,
-    initialValues: any,
-    errors: any,
-    isInvalid: boolean,
-    isSubmitting: boolean,
-}
-
-export interface IFormContext {
-    formId?: string;
-    model?: any;
-    prefix?: string | boolean;
-    layout?: FormLayout;
-    provider?: any,
-    reducer?: { dispatch: React.Dispatch<any>, select: any },
-    dispatch?: any,
-}
-
-export const FormContext = React.createContext<IFormContext>({});
-
-function Form(props: IFormProps) {
-    // Dev validation. You cannot change data provider (formId, useRedux)
-    if (process.env.NODE_ENV !== 'production') {
-        const prevFormId = usePrevious(props.formId); // eslint-disable-line react-hooks/rules-of-hooks
-        const prevUseRedux = usePrevious(props.useRedux); // eslint-disable-line react-hooks/rules-of-hooks
-        if ((prevFormId && props.formId !== prevFormId) || (prevUseRedux && props.useRedux !== prevUseRedux)) {
-            throw new Error('Props formId and useRedux cannot be changed dynamically! Its related to data provider');
-        }
-    }
-
-    // Get components and dispatch method
-    const components = useComponents();
-
-    // Normalize layout
-    const layout = useMemo(() => normalizeLayout(props.layout), [props.layout]);
-
-    // Resolve initial values
-    let initialValues = props.initialValues;
-
-    // Restore initial values from address bar and local storage
-    const isFirstMount = useFirstMountState();
-    const locationSearch = useSelector(state => _get(state, 'router.location.search', ''));
-    if (isFirstMount) {
-        // Query
-        if (props.syncWithAddressBar) {
-            initialValues = SyncAddressBarHelper.restore(
-                {
-                    ...props.initialValues,
-                    ...SyncAddressBarHelper.cleanValues(queryString.parse(locationSearch)),
-                },
-                props.restoreCustomizer,
-            );
-        }
-
-        // Local storage
-        if (props.autoSave) {
-            initialValues = AutoSaveHelper.restore(props.clientStorage, props.formId, initialValues);
-        }
-    }
-
-    // Init data provider
-    const provider = props.useRedux ? providers.redux : providers.reducer;
-    const {
-        values,
-        isInvalid,
-        isSubmitting,
-        setErrors,
-        reducer,
-        dispatch,
-    } = provider.useForm(props.formId, initialValues);
-
-    // Sync with address bar
-    useUpdateEffect(() => {
-        if (props.syncWithAddressBar) {
-            // TODO
-            /*const page = Number(_get(values, 'page', 1));
-            SyncAddressBarHelper.save(
-                components.store,
-                SyncAddressBarHelper.cleanValues({
-                    ...values,
-                    page: page > 1 && page,
-                }),
-                props.useHash,
-            );*/
-        }
-    }, [props.syncWithAddressBar, props.useHash, values]);
-
-    // Auto focus
-    useMount(() => {
-        if (props.autoFocus && process.env.IS_WEB) {
-            // TODO
-            /*const element: any = findDOMNode(this);
-            const inputEl = element.querySelector('input:not([type=hidden])');
-            setTimeout(() => {
-                if (inputEl && inputEl.focus) {
-                    inputEl.focus();
-                }
-            }, 10);*/
-        }
-    });
-
-    // Auto save
-    useUpdateEffect(() => {
-        if (props.autoSave && values) {
-            // TODO
-            //AutoSaveHelper.save(components.clientStorage, props.formId, values);
-        }
-    }, [props.autoSave, values]);
-
-    // OnChange handler
-    useUpdateEffect(() => {
-        if (props.onChange) {
-            props.onChange(values);
-        }
-    }, [props, values]);
-
-    // OnSubmit handler
-    const onSubmit = useCallback(async (e) => {
-        // TODO
-        e.preventDefault();
-
-        // Append non touched fields to values object
-        if (props.formId) {
-            Object.keys(components.ui.getRegisteredFields(props.formId)?.formRegisteredFields || {})
-                .forEach(key => {
-                    const registeredName = props.formRegisteredFields[key].name;
-                    if (_isUndefined(_get(values, registeredName))) {
-                        _set(values, registeredName, null);
-                    }
-                });
-        }
-
-        const cleanedValues = cleanEmptyObject(values);
-
-        // Event onBeforeSubmit
-        if (props.onBeforeSubmit && props.onBeforeSubmit.call(null, cleanedValues) === false) {
-            return null;
-        }
-        if (props.validators) {
-            validate(cleanedValues, props.validators);
-        }
-        if (props.onSubmit) {
-            return props.onSubmit.call(null, cleanedValues);
-        }
-
-        // Send request
-        const response = await components.http.send(
-            props.actionMethod,
-            props.action || window.location.pathname,
-            cleanedValues,
-            {
-                onTwoFactor: props.onTwoFactor
-                    ? async (providerName) => {
-                        const info = props.autoStartTwoFactor
-                            ? await components.http.post(`/api/v1/auth/2fa/${providerName}/send`)
-                            : null;
-                        props.onTwoFactor(providerName, info);
-                    }
-                    : undefined,
-            },
-        );
-
-        // Skip on 2fa
-        if (response.twoFactor) {
-            return null;
-        }
-
-        const data = response.data || {};
-
-        // Event onAfterSubmit
-        if (props.onAfterSubmit && props.onAfterSubmit.call(null, cleanedValues, data, response) === false) {
-            return null;
-        }
-
-        if (data.errors) {
-            setErrors(data.errors);
-            return null;
-        }
-        if (props.onComplete) {
-            props.onComplete.call(null, cleanedValues, data, response);
-        }
-        if (props.autoSave) {
-            // TODO
-            //const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
-            //AutoSaveHelper.remove(props.clientStorage, props.formId);
-        }
-
-        return null;
-    }, [components.http, components.ui, props, setErrors, values]);
-
-    const formContextValue = useMemo(() => ({
-        formId: props.formId,
-        model: props.model,
-        prefix: props.prefix,
-        layout: props.layout,
-        provider,
-        reducer,
-        dispatch,
-    }), [props.formId, props.model, props.prefix, props.layout, provider, reducer, dispatch]);
-
-    // Wait initialization (only for redux)
-    if (values === undefined) {
-        return null;
-    }
-
-    // Render context and form
-    return (
-        <FormContext.Provider value={formContextValue}>
-            {props.view !== false
-                ? components.ui.renderView(props.view || 'form.FormView', {
-                    isInvalid,
-                    isSubmitting,
-                    layout,
-                    onSubmit,
-                    children: props.children,
-                    submitLabel: props.submitLabel,
-                    fields: props.fields,
-                })
-                : props.children}
-        </FormContext.Provider>
-    );
-}
-
-Form.defaultProps = {
-    actionMethod: 'POST',
-    autoStartTwoFactor: true,
-    layout: 'default',
-};
-
-export default Form;