@steroidsjs/core 2.0.0-rc.7 → 2.0.1-beta.113

package/ui/form/Form/Form.tsx

@@ -0,0 +1,274 @@
+import * as React from 'react';
+import {findDOMNode} from 'react-dom';
+import {connect} from 'react-redux';
+import {reduxForm, getFormValues, isInvalid, initialize} from 'redux-form';
+import _isEqual from 'lodash-es/isEqual';
+import _isString from 'lodash-es/isString';
+import _isArray from 'lodash-es/isArray';
+import _get from 'lodash-es/get';
+import * as queryString from 'qs';
+import components, {IComponentsHocOutput} from '../../../hoc/components';
+import formSubmit, {IFormSubmitHocInput, IFormSubmitHocOutput} from '../../../hoc/formSubmit';
+import {FormContext} from '../../../hoc/form';
+import AutoSaveHelper from './AutoSaveHelper';
+import SyncAddressBarHelper from './SyncAddressBarHelper';
+import Field from '../Field';
+import Button from '../Button';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IFieldProps} from '../Field/Field';
+import {theme} from '../../../hoc';
+import {IThemeHocInput, IThemeHocOutput} from '../../../hoc/theme';
+
+export interface IFormProps extends IFormSubmitHocInput, IThemeHocInput {
+    formId?: string;
+    prefix?: string;
+    model?: string | ((...args: any[]) => any) | any;
+
+    /**
+     * Url на который будет отправлена форма
+     * @example api/v1/handle-form
+     */
+    action?: string;
+
+    /**
+     * Тип HTTP запроса (GET | POST | PUT | DELETE)
+     * @example POST
+     */
+    actionMethod?: string;
+    layout?: FormLayout;
+
+    /**
+     * Обработчик события отправки формы
+     * @param args
+     */
+    onSubmit?: (...args: any[]) => any;
+    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
+
+
+    autoSave?: boolean;
+
+    /**
+     * Начальные значения формы
+     */
+    initialValues?: any | any[];
+    className?: CssClassName;
+
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: any;
+    view?: CustomView;
+    fields?: (string | IFieldProps)[],
+    /*fields?: (
+        | string
+        | {
+        label?: string,
+        hint?: string,
+        required?: boolean,
+        component?: string | React.ReactNode
+    }
+        )[];*/
+    /**
+     * Надпись на конпке отправки формы
+     * @example Submit
+     */
+    submitLabel?: string;
+    syncWithAddressBar?: boolean;
+    restoreCustomizer?: (...args: any[]) => any; // TODO Refactor it!
+    useHash?: boolean; // TODO Refactor it!
+    autoFocus?: boolean;
+    [key: string]: any;
+}
+
+export interface IFormViewProps {
+    onSubmit: any,
+    className?: CssClassName,
+    layout?: {
+        layout: FormLayoutName | boolean,
+        className: CssClassName,
+        label: boolean,
+        cols: number[],
+        [key: string]: any,
+    },
+}
+
+interface IFormPrivateProps extends IFormSubmitHocOutput, IThemeHocOutput, IConnectHocOutput, IComponentsHocOutput {
+    formValues?: any | any[];
+    locationSearch?: string;
+    isInvalid?: boolean;
+    formRegisteredFields?: any;
+    handleSubmit?: any;
+}
+
+let valuesSelector = null;
+let invalidSelector = null;
+const filterValues = (values = {}) => {
+    let obj = {...values};
+    Object.keys(obj).forEach(key => {
+        if (!obj[key] || (_isArray(obj[key]) && !obj[key].length)) {
+            delete obj[key];
+        }
+    });
+    return obj;
+};
+
+@connect((state, props) => {
+    valuesSelector = getFormValues(props.formId);
+    invalidSelector = isInvalid(props.formId);
+    return {
+        form: props.formId,
+        formValues: valuesSelector(state),
+        isInvalid: invalidSelector(state),
+        formRegisteredFields: _get(state, `form.${props.formId}.registeredFields`),
+        locationSearch: _get(state, 'router.location.search', '')
+    };
+})
+@formSubmit()
+@reduxForm()
+@theme()
+@components('ui', 'store', 'clientStorage')
+export default class Form extends React.PureComponent<IFormProps & IFormPrivateProps> {
+
+    static defaultProps = {
+        autoStartTwoFactor: true,
+    };
+
+    componentDidMount() {
+        // Restore values from query, when autoSave flag is set
+        if (this.props.autoSave) {
+            const values = AutoSaveHelper.restore(
+                this.props.clientStorage,
+                this.props.formId,
+                this.props.initialValues
+            );
+            if (values) {
+                this.props.dispatch(initialize(this.props.formId, values));
+            }
+        }
+        // Restore values from address bar
+        if (this.props.syncWithAddressBar) {
+            const query = Object.assign(
+                this.props.initialValues || {},
+                filterValues(queryString.parse(this.props.locationSearch))
+            );
+            SyncAddressBarHelper.restore(
+                this.props.store,
+                this.props.formId,
+                query,
+                true,
+                this.props.restoreCustomizer
+            );
+        }
+        if (this.props.autoFocus && process.env.IS_WEB) {
+            const element: any = findDOMNode(this);
+            const inputEl = element.querySelector('input:not([type=hidden])');
+            setTimeout(() => {
+                if (inputEl && inputEl.focus) {
+                    inputEl.focus();
+                }
+            }, 10);
+        }
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        // Check update values for trigger event
+        if (
+            (this.props.onChange ||
+                this.props.autoSave ||
+                this.props.syncWithAddressBar) &&
+            !_isEqual(this.props.formValues, nextProps.formValues)
+        ) {
+            if (this.props.onChange) {
+                this.props.onChange(nextProps.formValues);
+            }
+            if (this.props.autoSave && nextProps.formValues) {
+                AutoSaveHelper.save(
+                    this.props.clientStorage,
+                    this.props.formId,
+                    nextProps.formValues
+                );
+            }
+            if (this.props.syncWithAddressBar) {
+                const page = Number(_get(nextProps.formValues, 'page', 1));
+                const values = {
+                    ...nextProps.formValues,
+                    page: page > 1 && page
+                };
+                SyncAddressBarHelper.save(
+                    this.props.store,
+                    filterValues(values),
+                    nextProps.useHash
+                );
+            }
+        }
+    }
+
+    render() {
+        const FormView = this.props.view || this.props.ui.getView('form.FormView');
+        return (
+            <FormContext.Provider
+                value={{
+                    formId: this.props.formId,
+                    model: this.props.model,
+                    prefix: this.props.prefix,
+                    layout: this.props.layout,
+                }}
+            >
+                <FormView
+                    {...this.props}
+                    layout={typeof this.props.layout === 'object' ? this.props.layout : {layout: this.props.layout}}
+                    onSubmit={this.props.handleSubmit(this.props.onSubmit)}
+                >
+                    {this.props.children}
+                    {(this.props.fields || []).map((field: any, index) => (
+                        <Field
+                            key={index}
+                            {...(_isString(field) ? {attribute: field} : field)}
+                        />
+                    ))}
+                    {this.props.submitLabel && (
+                        <Button
+                            onClick={this.props.handleSubmit(this.props.onSubmit)}
+                            label={this.props.submitLabel}
+                        />
+                    )}
+                </FormView>
+            </FormContext.Provider>
+        );
+    }
+}

package/ui/form/Form/SyncAddressBarHelper.ts

@@ -0,0 +1,82 @@
+import * as pathToRegexp from 'path-to-regexp';
+import * as queryString from 'qs';
+import _isArray from 'lodash-es/isArray';
+import _isObject from 'lodash-es/isObject';
+import _isBoolean from 'lodash-es/isBoolean';
+import _isEqual from 'lodash-es/isEqual';
+import _isEmpty from 'lodash-es/isEmpty';
+import _isFunction from 'lodash-es/isFunction';
+import {initialize} from 'redux-form';
+import {push} from 'connected-react-router';
+import {getRoute, getRouteParams} from '../../../reducers/router';
+
+export default class SyncAddressBarHelper {
+    static restore(
+        store,
+        formId,
+        initialValues,
+        forceRestore = false,
+        customizer = null
+    ) {
+        let newValues = {
+            ...initialValues,
+            ...queryString.parse(location.hash)
+        };
+        if (customizer && _isFunction(customizer)) {
+            newValues = customizer(initialValues, queryString.parse(location.hash));
+        }
+        if (forceRestore || !_isEqual(initialValues, newValues)) {
+            store.dispatch(initialize(formId, newValues));
+        }
+    }
+
+    /**
+     * WARNING
+     * Method incorrectly saves nested objects (e.g. {foo: [{bar: 1}]}
+     *
+     * @param {object} store
+     * @param {object} values
+     * @param {boolean} useHash
+     */
+    static save(store, values, useHash = true) {
+        values = {...values};
+        Object.keys(values).map(key => {
+            const value = values[key];
+            if (_isObject(value) && !_isArray(value)) {
+                delete values[key];
+            } else if (_isArray(value)) {
+                values[key] = value.join(',');
+            } else if (_isBoolean(value)) {
+                if (!value) {
+                    delete values[key];
+                } else {
+                    values[key] = 1;
+                }
+            } else if (value === null) {
+                delete values[key];
+            }
+        });
+        const querySeparator = useHash ? '#' : '?';
+        const currentRoute = getRoute(store.getState() || {});
+        const params = getRouteParams(store.getState() || {});
+        if (_isEmpty(values)) {
+            if (currentRoute) {
+                store.dispatch(
+                    push(pathToRegexp.compile(currentRoute.path)(params))
+                );
+            } else {
+                location.hash = null;
+            }
+        } else if (currentRoute) {
+            store.dispatch(
+                push(
+                    pathToRegexp.compile(currentRoute.path)(params) +
+                    querySeparator +
+                    queryString.stringify(values)
+                )
+            );
+        } else {
+            location.hash = querySeparator + queryString.stringify(values);
+        }
+    }
+}

package/ui/form/Form/demo/basic.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Form from '../Form';
+import FieldSet from '../../FieldSet';
+import TextField from '../../TextField';
+import InputField from '../../InputField';
+import DateField from '../../DateField';
+import DateTimeField from '../../DateTimeField';
+
+export default () => (
+    <>
+        <Form
+            formId='TestForm'
+        >
+            <FieldSet
+                prefix='user'
+                label={'label'}
+                fields={[
+                    {
+                        component: 'InputField',
+                        attribute: 'email',
+                        label: 'Email'
+                    },
+                    {
+                        component: 'TextField',
+                        attribute: 'message',
+                        label: 'Message'
+                    },
+                    {
+                        component: 'DateField',
+                        attribute: 'date',
+                        label: 'Date'
+                    },
+                    {
+                        component: 'DateTimeField',
+                        attribute: 'startTime',
+                        label: 'Start time'
+                    },
+                ]}
+            />
+        </Form>
+    </>
+);

package/ui/form/HtmlField/HtmlField.tsx

@@ -0,0 +1,291 @@
+import * as React from 'react';
+import _merge from 'lodash-es/merge';
+import File from 'fileup-core/lib/models/File';
+import XhrUploader from 'fileup-core/lib/uploaders/XhrUploader';
+import _get from 'lodash-es/get';
+import {components, field} from '../../../hoc';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {convertToRaw, ContentState, EditorState} from 'draft-js';
+import draftToHtml from 'draftjs-to-html';
+import htmlToDraft from 'html-to-draftjs';
+
+export interface IHtmlFieldProps extends IFieldHocInput {
+
+    /**
+     * Конфигурация wysiwyg реадактора
+     */
+    editorProps?: any,
+    className?: CssClassName,
+
+    /**
+     * Url на который будет отправлена форма загрузки файла
+     * @example /api/v1/upload-files
+     */
+    uploadUrl?: string,
+
+    /**
+     * После загрузки изображения на сервер,
+     * можно указать с каким процессором должно вернуться картинка
+     * @example origin
+     */
+    uploadImagesProcessor?: string,
+    view?: CustomView,
+
+    /**
+     * Обработчик события при фокусе на редактора
+     * @param event
+     */
+    onFocus?: (event: any) => any,
+
+    /**
+     * Обработчик события при снятии фокуса с редактора
+     * @param event
+     * @param editorState
+     */
+    onBlur?: (event, editorState) => any,
+
+    /**
+     * Пользовательские кнопки
+     * @example [<CustomButton/>]
+     */
+    customButtons?: Array<any>,
+
+    [key: string]: any,
+}
+
+export interface IHtmlFieldViewProps extends IHtmlFieldProps, IFieldHocOutput {
+    editorState?: any,
+    onEditorStateChange?: (state: any) => void,
+}
+
+interface IHtmlFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {
+
+}
+
+interface IHtmlStateProps {
+    editorState?: any,
+}
+
+@field({
+    componentId: 'form.HtmlField'
+})
+@components('ui')
+export default class HtmlField extends React.PureComponent<IHtmlFieldProps & IHtmlFieldPrivateProps, IHtmlStateProps> {
+
+    constructor(props) {
+        super(props);
+        const html = this.props.input.value || '';
+        const contentBlock = htmlToDraft(html);
+        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
+        const editorState = EditorState.createWithContent(contentState);
+        this.state = {
+            editorState: editorState,
+        };
+    }
+
+    onEditorStateChange: Function = (editorState) => {
+        this.setState({
+            editorState: editorState,
+        });
+    };
+
+    static defaultProps = {
+        disabled: false,
+        className: '',
+        customButtons: [],
+        onFocus: () => {},
+        onBlur: () => {},
+    };
+
+    static defaultEditorConfig = {
+        options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],
+        inline: {
+            inDropdown: false,
+            className: undefined,
+            component: undefined,
+            dropdownClassName: undefined,
+            options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace', 'superscript', 'subscript'],
+            bold: {className: undefined},
+            italic: {className: undefined},
+            underline: {className: undefined},
+            strikethrough: {className: undefined},
+            monospace: {className: undefined},
+            superscript: {className: undefined},
+            subscript: {className: undefined},
+        },
+        blockType: {
+            inDropdown: true,
+            options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code'],
+            className: undefined,
+            component: undefined,
+            dropdownClassName: undefined,
+        },
+        fontSize: {
+            options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
+            className: undefined,
+            component: undefined,
+            dropdownClassName: undefined,
+        },
+        fontFamily: {
+            options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
+            className: undefined,
+            component: undefined,
+            dropdownClassName: undefined,
+        },
+        list: {
+            inDropdown: false,
+            className: undefined,
+            component: undefined,
+            dropdownClassName: undefined,
+            options: ['unordered', 'ordered', 'indent', 'outdent'],
+            unordered: {className: undefined},
+            ordered: {className: undefined},
+            indent: {className: undefined},
+            outdent: {className: undefined},
+        },
+        textAlign: {
+            inDropdown: false,
+            className: undefined,
+            component: undefined,
+            dropdownClassName: undefined,
+            options: ['left', 'center', 'right', 'justify'],
+            left: {className: undefined},
+            center: {className: undefined},
+            right: {className: undefined},
+            justify: {className: undefined},
+        },
+        colorPicker: {
+            className: undefined,
+            component: undefined,
+            popupClassName: undefined,
+            colors: ['rgb(97,189,109)', 'rgb(26,188,156)', 'rgb(84,172,210)', 'rgb(44,130,201)',
+                'rgb(147,101,184)', 'rgb(71,85,119)', 'rgb(204,204,204)', 'rgb(65,168,95)', 'rgb(0,168,133)',
+                'rgb(61,142,185)', 'rgb(41,105,176)', 'rgb(85,57,130)', 'rgb(40,50,78)', 'rgb(0,0,0)',
+                'rgb(247,218,100)', 'rgb(251,160,38)', 'rgb(235,107,86)', 'rgb(226,80,65)', 'rgb(163,143,132)',
+                'rgb(239,239,239)', 'rgb(255,255,255)', 'rgb(250,197,28)', 'rgb(243,121,52)', 'rgb(209,72,65)',
+                'rgb(184,49,47)', 'rgb(124,112,107)', 'rgb(209,213,216)'],
+        },
+        link: {
+            inDropdown: false,
+            className: undefined,
+            component: undefined,
+            popupClassName: undefined,
+            dropdownClassName: undefined,
+            showOpenOptionOnHover: true,
+            defaultTargetOption: '_self',
+            options: ['link', 'unlink'],
+            link: {className: undefined},
+            unlink: {className: undefined},
+            linkCallback: undefined
+        },
+        embedded: {
+            className: undefined,
+            component: undefined,
+            popupClassName: undefined,
+            embedCallback: undefined,
+            defaultSize: {
+                height: 'auto',
+                width: 'auto',
+            },
+        },
+        image: {
+            className: undefined,
+            component: undefined,
+            popupClassName: undefined,
+            urlEnabled: true,
+            uploadEnabled: true,
+            alignmentEnabled: true,
+            uploadCallback: undefined,
+            previewImage: false,
+            inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+            alt: {present: false, mandatory: false},
+            defaultSize: {
+                height: 'auto',
+                width: 'auto',
+            },
+        },
+        remove: {className: undefined, component: undefined},
+        history: {
+            inDropdown: false,
+            className: undefined,
+            component: undefined,
+            dropdownClassName: undefined,
+            options: ['undo', 'redo'],
+            undo: {className: undefined},
+            redo: {className: undefined},
+        },
+    };
+
+    render() {
+        const {uploadUrl, uploadImagesProcessor} = this.props;
+        const HtmlFieldView = this.props.view || this.props.ui.getView('form.HtmlFieldView');
+        return (
+            <HtmlFieldView
+                toolbarCustomButtons={this.props.customButtons}
+                onFocus={(event) => this.props.onFocus(event)}
+                onBlur={(event, editorState) => this.props.onBlur(event, editorState)}
+                editorState={this.state.editorState}
+                onEditorStateChange={editorState => {
+                    const html = draftToHtml(convertToRaw(editorState.getCurrentContent()))
+                    this.onEditorStateChange(editorState)
+                    this.props.input.onChange(html)
+                }}
+                {...this.props}
+                editorProps={_merge(
+                    HtmlField.defaultEditorConfig,
+                    {
+                        image: {
+                            urlEnabled: true,
+                            uploadEnabled: true,
+                            alignmentEnabled: true,
+                            uploadCallback: nativeFile => {
+                                return new Promise(resolve => {
+                                    const file = new File({
+                                        index: 0,
+                                        native: nativeFile,
+                                        path: nativeFile.name,
+                                        type: nativeFile.type || '',
+                                        bytesTotal: nativeFile.fileSize || nativeFile.size || 0
+                                    });
+                                    const uploader = new XhrUploader({
+                                        url:
+                                            uploadUrl +
+                                            (uploadImagesProcessor
+                                                    ? '?imagesProcessor=' + uploadImagesProcessor
+                                                    : ''
+                                            ),
+                                        file
+                                    });
+                                    file.setUploader(uploader);
+                                    uploader.on(XhrUploader.EVENT_END, () => {
+                                        const processor = uploadImagesProcessor || 'default';
+                                        const url = _get(file.getResultHttpMessage(), [
+                                            'images',
+                                            processor,
+                                            'url'
+                                        ]);
+                                        resolve({
+                                            data: {
+                                                url: url
+                                            }
+                                        })
+                                    });
+                                    uploader.start();
+                                })
+                            },
+                            previewImage: true,
+                            inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+                            alt: {present: false, mandatory: false},
+                            defaultSize: {
+                                height: 'auto',
+                                width: 'auto',
+                            },
+                        },
+                    },
+                    this.props.editorProps,
+                )}
+            />
+        );
+    }
+}