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

package/hoc/file.tsx

@@ -0,0 +1,322 @@
+import * as React from 'react';
+import _get from 'lodash-es/get';
+import _pick from 'lodash-es/pick';
+import _isEqual from 'lodash-es/isEqual';
+import _merge from 'lodash-es/merge';
+import _difference from 'lodash-es/difference';
+import FileUp from 'fileup-core';
+import File from 'fileup-core/lib/models/File';
+import QueueCollection from 'fileup-core/lib/models/QueueCollection';
+import buildURL from 'axios/lib/helpers/buildURL';
+import {connect} from './index';
+import {formValueSelector} from 'redux-form';
+
+/**
+ * File HOC
+ * Компонент для асинхронной загрузки файлов на сервер, используется в `FileField`
+ */
+export interface IFileHocInput {
+    /*
+      multiple: PropTypes.bool,
+      uploader: PropTypes.object,
+      backendUrl: PropTypes.string,
+      mimeTypes: PropTypes.arrayOf(PropTypes.string),
+      imagesOnly: PropTypes.bool,
+      imagesProcessor: PropTypes.string,
+      imagesExactSize: PropTypes.arrayOf(PropTypes.number),
+      initialFiles: PropTypes.arrayOf(
+        PropTypes.shape({
+          uid: PropTypes.string,
+          path: PropTypes.string,
+          type: PropTypes.string,
+          bytesTotal: PropTypes.number,
+          bytesUploaded: PropTypes.number,
+          bytesUploadEnd: PropTypes.number,
+          resultHttpMessage: PropTypes.object
+        })
+      )
+     */
+    input?: FormInputType,
+    multiple?: boolean;
+    uploader?: any;
+    backendUrl?: any;
+    mimeTypes?: any;
+    imagesOnly?: any;
+    imagesProcessor?: any;
+    imagesExactSize?: any;
+    initialFiles?: any;
+}
+
+export interface IFileHocOutput {
+    /*
+
+        uploader={this._uploader}
+        files={[].concat(this._uploader.queue.getFiles())}
+        onBrowse={this._onBrowse}
+        onRemove={this._onRemove}
+     */
+    uploader?: any;
+    files?: any[];
+    onBrowse?: any;
+    onRemove?: any;
+}
+
+const imagesMimeTypes = [
+    'image/gif',
+    'image/jpeg',
+    'image/pjpeg',
+    'image/png'
+];
+
+export const generateBackendUrl = props => {
+    return buildURL(props.backendUrl, {
+        mimeTypes: props.imagesOnly ? imagesMimeTypes : props.mimeTypes,
+        imagesProcessor: props.imagesProcessor,
+        imagesExactSize: props.imagesExactSize
+    });
+};
+
+const stateMap = (state, props) => {
+    let initialFiles = props.initialFiles;
+    if (!initialFiles) {
+        // Find in form values
+        initialFiles = formValueSelector(props.formId)(state, props.input.name.replace(/Ids?$/, ''));
+    }
+
+    return {
+        initialFiles,
+    };
+};
+
+export default (): any => WrappedComponent =>
+    connect(stateMap)(
+        class FileHoc extends React.PureComponent<IFileHocInput> {
+            _uploader: any;
+            forceUpdate: any;
+            static WrappedComponent = WrappedComponent;
+            /**
+             * Proxy real name, prop types and default props for storybook
+             */
+            static displayName = WrappedComponent.displayName || WrappedComponent.name;
+            static propTypes = {
+                ...WrappedComponent.propTypes,
+            };
+            static defaultProps = {
+                ...WrappedComponent.defaultProps,
+                multiple: false
+            };
+
+            constructor(props) {
+                super(props);
+                this._onQueueUpdate = this._onQueueUpdate.bind(this);
+                this._onQueueItemEnd = this._onQueueItemEnd.bind(this);
+                this._onQueueRemove = this._onQueueRemove.bind(this);
+                this._onBrowse = this._onBrowse.bind(this);
+                this._onRemove = this._onRemove.bind(this);
+                this._uploader = new FileUp({
+                    dropArea: {},
+                    backendUrl: generateBackendUrl(this.props),
+                    ...this.props.uploader,
+                    form: {
+                        ...(this.props.uploader && this.props.uploader.form),
+                        multiple: this.props.multiple
+                    }
+                });
+                // Add uploaded files
+                if (this.props.initialFiles) {
+                    this.initFiles(this.props.initialFiles);
+                }
+            }
+
+            initFiles(items) {
+                this._uploader.queue.add(
+                    [].concat(items || [])
+                        .filter(item => !!item.uid)
+                        .map(
+                            item => new File({
+                                path: item.title || item.label || item.uid || item.id,
+                                status: File.STATUS_END,
+                                result: File.RESULT_SUCCESS,
+                                resultHttpStatus: 200,
+                                resultHttpMessage: {
+                                    id: item.id || item.uid,
+                                    images: item.thumbnailUrl
+                                        ? [{url: item.thumbnailUrl}]
+                                        : null,
+                                },
+                                uid: item.uid,
+                            })
+                        )
+                );
+            }
+
+            componentDidMount() {
+                this._uploader.queue.on(
+                    QueueCollection.EVENT_ITEM_STATUS,
+                    this._onQueueUpdate
+                );
+                this._uploader.queue.on(
+                    QueueCollection.EVENT_ITEM_PROGRESS,
+                    this._onQueueUpdate
+                );
+                this._uploader.queue.on(
+                    QueueCollection.EVENT_ITEM_END,
+                    this._onQueueItemEnd
+                );
+                this._uploader.queue.on(
+                    QueueCollection.EVENT_REMOVE,
+                    this._onQueueRemove
+                );
+            }
+
+            componentWillUnmount() {
+                this._uploader.queue.off(
+                    QueueCollection.EVENT_ITEM_STATUS,
+                    this._onQueueUpdate
+                );
+                this._uploader.queue.off(
+                    QueueCollection.EVENT_ITEM_PROGRESS,
+                    this._onQueueUpdate
+                );
+                this._uploader.queue.off(
+                    QueueCollection.EVENT_ITEM_END,
+                    this._onQueueItemEnd
+                );
+                this._uploader.queue.off(
+                    QueueCollection.EVENT_REMOVE,
+                    this._onQueueRemove
+                );
+            }
+
+            UNSAFE_componentWillReceiveProps(nextProps) {
+                // Check backend url changes
+                const urlPropKeys = [
+                    'backendUrl',
+                    'mimeTypes',
+                    'imagesOnly',
+                    'imagesProcessor',
+                    'imagesExactSize'
+                ];
+                if (
+                    !_isEqual(_pick(this.props, urlPropKeys), _pick(nextProps, urlPropKeys))
+                ) {
+                    this._uploader.backendUrl = generateBackendUrl(nextProps);
+                }
+                // Check multiple flag update
+                if (this.props.multiple !== nextProps.multiple) {
+                    this._uploader.form.multiple = nextProps.multiple;
+                }
+                // Check uploader config update
+                if (!_isEqual(this.props.uploader, nextProps.uploader)) {
+                    _merge(this._uploader, nextProps.uploader);
+                }
+                // Check remove keys from value
+                if (!_isEqual(this.props.input.value, nextProps.input.value)) {
+                    const toRemove = _difference(
+                        [].concat(this.props.input.value || []),
+                        [].concat(nextProps.input.value || [])
+                    );
+                    if (toRemove.length > 0) {
+                        this._uploader.queue.remove(
+                            this._uploader.queue.getFiles().filter(file => {
+                                return (
+                                    toRemove.indexOf(_get(file.getResultHttpMessage(), 'id')) !== -1
+                                );
+                            })
+                        );
+                    }
+                }
+                // Check set initial files
+                if (!this.props.initialFiles && nextProps.initialFiles) {
+                    this.initFiles(nextProps.initialFiles);
+                }
+            }
+
+            render() {
+                return (
+                    <WrappedComponent
+                        {...this.props}
+                        uploader={this._uploader}
+                        files={[].concat(this._uploader.queue.getFiles())}
+                        onBrowse={this._onBrowse}
+                        onRemove={this._onRemove}
+                    />
+                );
+            }
+
+            /**
+             * Triggered by queue when file status or progress updated
+             * @private
+             */
+            _onQueueUpdate() {
+                this.forceUpdate();
+            }
+
+            /**
+             * Trigger by queue when file is uploaded or error
+             * @param {File} file
+             * @private
+             */
+            _onQueueItemEnd(file) {
+                // Check successfully
+                if (file.getResult() !== File.RESULT_SUCCESS) {
+                    return;
+                }
+                // Check file id exists
+                const id = _get(file.getResultHttpMessage(), 'id');
+                if (!id) {
+                    return;
+                }
+                // Update value
+                if (this.props.multiple) {
+                    this.props.input.onChange(
+                        [].concat(this.props.input.value || []).concat([id])
+                    );
+                } else {
+                    this.props.input.onChange(id);
+                }
+            }
+
+            /**
+             * Triggered by queue when file is removed from it
+             * @param {File[]} files
+             * @private
+             */
+            _onQueueRemove(files) {
+                const toRemove = files
+                    .map(file => _get(file.getResultHttpMessage(), 'id'))
+                    .filter(Boolean);
+                if (toRemove.length === 0) {
+                    return;
+                }
+                // Update value
+                if (this.props.multiple) {
+                    this.props.input.onChange(
+                        []
+                            .concat(this.props.input.value || [])
+                            .filter(id => toRemove.indexOf(parseInt(id)) === -1)
+                    );
+                } else if (toRemove.indexOf(this.props.input.value) !== -1) {
+                    this.props.input.onChange(null);
+                }
+                this.forceUpdate();
+            }
+
+            /**
+             * Show browse dialog in user browser
+             * @param {object} event
+             * @private
+             */
+            _onBrowse(event) {
+                if (event) {
+                    event.preventDefault();
+                }
+                this._uploader.browse();
+            }
+
+            _onRemove(file) {
+                this._uploader.queue.remove([file]);
+                this.forceUpdate();
+            }
+        }
+    )

package/hoc/form.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+/**
+ * Form HOC
+ * Получает из контекста данные формы (formId, model, prefix, layout, ..) и прокидывает их в качестве `props` в компонент.
+ * Используется во всех полях формы (`*Field.tsx`) для получения данных из контекста.
+ */
+export interface IFormHocInput {
+    prefix?: string | boolean;
+    label?: string | boolean | any;
+    attribute?: string;
+    model?: string | ((...args: any[]) => any) | any;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    layout?: FormLayout;
+    component?: string | React.ComponentType | JSX.Element;
+    onChange?: (...args: any[]) => any;
+    className?: CssClassName;
+    //layoutClassName?: string;
+    //view?: any;
+}
+
+export interface IFormHocOutput extends IFormHocInput, IFormContext {
+}
+
+interface IFormHocConfig {
+    appendPrefix?: boolean;
+}
+
+interface IFormHocPrivateProps {
+}
+
+export interface IFormContext {
+    /*
+        formId: PropTypes.string,
+        prefix: PropTypes.string,
+        model: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.func,
+            PropTypes.object
+        ]),
+        layout: PropTypes.oneOfType([
+            PropTypes.oneOf(['default', 'inline', 'horizontal']),
+            PropTypes.string,
+            PropTypes.bool
+        ]),
+     */
+    formId?: string;
+    model?: any;
+    prefix?: string | boolean;
+    layout?: FormLayout;
+}
+
+export const mergeLayoutProp = (layout1, layout2) => {
+    return typeof layout1 === 'object' || typeof layout2 === 'object'
+        ? {
+            ...(typeof layout1 === 'object' ? layout1 : {layout: layout1}),
+            ...(typeof layout2 === 'object' ? layout2 : {layout: layout2}),
+        }
+        : (layout2 || layout2 === false ? layout2 : layout1)
+};
+
+export const FormContext = React.createContext<IFormContext>({});
+
+export default (config = {} as IFormHocConfig): any => WrappedComponent =>
+    class FormHoc extends React.PureComponent<IFormHocPrivateProps & IFormHocInput> {
+        static WrappedComponent = WrappedComponent;
+
+        render() {
+            return (
+                <FormContext.Consumer>
+                    {context => {
+                        const outputProps = {
+                            ...context,
+                            ...this.props,
+                            layout: mergeLayoutProp(context.layout, this.props.layout),
+                            prefix: this.props.prefix || context.prefix,
+
+                        } as IFormHocOutput;
+                        return (
+                            <WrappedComponent {...outputProps}/>
+                        );
+                    }}
+                </FormContext.Consumer>
+            );
+        }
+    }

package/hoc/formSubmit.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import {SubmissionError} from 'redux-form';
+import _isUndefined from 'lodash-es/isUndefined';
+import _set from 'lodash-es/set';
+import _get from 'lodash-es/get';
+import _isPlainObject from 'lodash-es/isPlainObject';
+import _isArray from 'lodash-es/isArray';
+import components from './components';
+import {IComponentsHocOutput} from './components';
+import validate from "../ui/form/validate";
+
+/**
+ * Form Submit HOC
+ * Используется в `Form` для добавления обработчика `onSubmit`
+ */
+export interface IFormSubmitHocInput {
+    action?: any,
+    actionMethod?: string,
+    autoSave?: any,
+    validators?: any,
+    onBeforeSubmit?: any,
+    onSubmit?: any,
+    onAfterSubmit?: any,
+    onComplete?: any,
+    onTwoFactor?: (providerName: string, info?: any) => Promise<any>
+    autoStartTwoFactor?: boolean,
+}
+
+export interface IFormSubmitHocOutput {
+
+}
+
+interface IFormSubmitHocPrivateProps extends IComponentsHocOutput {
+    formRegisteredFields?: any,
+    formId?: string,
+}
+
+export default (): any => WrappedComponent =>
+    components('http', 'clientStorage')(
+        class FormSubmitHoc extends React.PureComponent<IFormSubmitHocInput & IFormSubmitHocPrivateProps> {
+            static WrappedComponent = WrappedComponent;
+            /**
+             * Proxy real name, prop types and default props for storybook
+             */
+            static displayName = WrappedComponent.displayName || WrappedComponent.name;
+            static propTypes = WrappedComponent.propTypes;
+            static defaultProps = {
+                ...WrappedComponent.defaultProps,
+                actionMethod: 'POST',
+                autoStartTwoFactor: true,
+            };
+
+            constructor(props) {
+                super(props);
+                this._onSubmit = this._onSubmit.bind(this);
+            }
+
+            render() {
+                return <WrappedComponent {...this.props} onSubmit={this._onSubmit}/>;
+            }
+
+            cleanEmptyObject(object) {
+                // if all properties are null substitute the object with null
+                if (!Object.values(object).some(x => x)) {
+                    return null;
+                }
+
+                Object.keys(object).forEach(key => {
+                    if (_isPlainObject(object[key])) {
+                        object[key] = this.cleanEmptyObject(object[key]);
+                    }
+
+                    if (_isArray(object[key])) {
+                        let array = object[key];
+
+                        array.forEach((value, index) => {
+                            if (_isPlainObject(value)) {
+                                array[index] = this.cleanEmptyObject(value);
+                            }
+                        });
+
+                        if (!object[key].some(x => Boolean(x))) {
+                            object[key] = [];
+                        }
+                    }
+                });
+
+                return object;
+            }
+
+            _onSubmit(values) {
+                // Append non touched fields to values object
+                Object.keys(this.props.formRegisteredFields || {}).forEach(key => {
+                    const name = this.props.formRegisteredFields[key].name;
+                    if (_isUndefined(_get(values, name))) {
+                        _set(values, name, null);
+                    }
+                });
+                values = this.cleanEmptyObject(values);
+
+                // Event onBeforeSubmit
+                if (
+                    this.props.onBeforeSubmit &&
+                    this.props.onBeforeSubmit(values) === false
+                ) {
+                    return;
+                }
+                if (this.props.validators) {
+                    validate(values, this.props.validators);
+                }
+                if (this.props.onSubmit) {
+                    return this.props.onSubmit(values);
+                }
+                return this.props.http
+                    .send(
+                        this.props.actionMethod,
+                        this.props.action || location.pathname,
+                        values,
+                        {
+                            onTwoFactor: this.props.onTwoFactor
+                                ? async (providerName) => {
+                                    const info = this.props.autoStartTwoFactor
+                                        ? await this.props.http.post(`/api/v1/auth/2fa/${providerName}/send`)
+                                        : null;
+                                    this.props.onTwoFactor(providerName, info);
+                                }
+                                : undefined
+                        }
+                    )
+                    .then(response => {
+                        // Skip on 2fa
+                        if (response.twoFactor) {
+                            return;
+                        }
+
+                        const data = response.data || {};
+                        // Event onAfterSubmit
+                        if (
+                            this.props.onAfterSubmit &&
+                            this.props.onAfterSubmit(values, data, response) === false
+                        ) {
+                            return;
+                        }
+                        if (data.errors) {
+                            throw new SubmissionError(data.errors);
+                        }
+                        if (this.props.onComplete) {
+                            this.props.onComplete(values, data, response);
+                        }
+                        if (this.props.autoSave) {
+
+                            const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
+                            AutoSaveHelper.remove(this.props.clientStorage, this.props.formId);
+                        }
+                    });
+            }
+        }
+    )

package/hoc/http.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import axios from 'axios';
+import _isFunction from 'lodash-es/isFunction';
+import _isObject from 'lodash-es/isObject';
+import components, {IComponentsHocInput} from './components';
+
+/**
+ * Http HOC
+ * Обертка для асинхронного получения данных с бекенда. В отличии от `Fetch HOC`, он не хранит данные в Redux Store
+ * и не добавляет "Загрузка..." при запросе.
+ */
+export interface IHttpHocInput {
+}
+
+export interface IHttpHocOutput {
+    fetch: (params: object) => Promise<any> | any,
+}
+
+interface IHttpHocPrivateProps extends IComponentsHocInput {
+}
+
+interface IHttpHocState {
+    data?: any,
+    isLoading: boolean,
+}
+
+export default (requestFunc): any => WrappedComponent =>
+    components()(
+        class HttpHoc extends React.PureComponent<IHttpHocInput & IHttpHocPrivateProps, IHttpHocState> {
+            static WrappedComponent = WrappedComponent;
+
+            _isRendered = false;
+            _cancels = [];
+
+            constructor(props) {
+                super(props);
+
+                this._fetch = this._fetch.bind(this);
+                this._createCancelToken = this._createCancelToken.bind(this);
+
+                this.state = {
+                    data: null,
+                    isLoading: true,
+                };
+            }
+
+            UNSAFE_componentWillMount() {
+                this._fetch();
+            }
+
+            componentDidMount() {
+                this._isRendered = true;
+            }
+
+            componentWillUnmount() {
+                this._isRendered = false;
+                this._cancels.forEach(cancel =>
+                    cancel('Canceled on unmount component')
+                );
+            }
+
+            render() {
+                const outputProps = {
+                    fetch: this._fetch,
+                } as IHttpHocOutput;
+                return (
+                    <WrappedComponent
+                        {...this.props}
+                        {...this.state.data}
+                        {...outputProps}
+                        isLoading={this.state.isLoading}
+                    />
+                );
+            }
+
+            _createCancelToken() {
+                return new axios.CancelToken(cancel => {
+                    this._cancels.push(cancel);
+                });
+            }
+
+            _fetch(params = {}) {
+                this.setState({isLoading: true}, () => {
+                    const result = requestFunc({
+                        ...this.props,
+                        ...params,
+                        createCancelToken: this._createCancelToken
+                    });
+                    if (_isObject(result)) {
+                        if (_isFunction(result.then)) {
+                            return result.then(data => {
+                                if (this._isRendered) {
+                                    this.setState({
+                                        data,
+                                        isLoading: false,
+                                    });
+                                }
+                                return data;
+                            });
+                        } else {
+                            this.setState({
+                                data: result,
+                                isLoading: false,
+                            });
+                        }
+                    }
+                    return result;
+                })
+            }
+        }
+    )
+