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

package/hoc/field.tsx

@@ -0,0 +1,285 @@
+import * as React from 'react';
+import {Field, FieldArray, formValueSelector, getFormSubmitErrors, change} from 'redux-form';
+import _get from 'lodash-es/get';
+import _upperFirst from 'lodash-es/upperFirst';
+import _isFunction from 'lodash-es/isFunction';
+import _isObject from 'lodash-es/isObject';
+
+import {getFieldProps, getModel} from '../reducers/fields';
+import connect from './connect';
+import components, {IComponentsHocOutput} from './components';
+import form, {IFormHocOutput} from './form';
+import theme, {IThemeHocInput, IThemeHocOutput} from './theme';
+
+/**
+ * Field HOC
+ * Обертка над полями форм. Если создаете свой элемент формы - добавьте декоратор с этим HOC.
+ */
+export interface IFieldHocInput extends IThemeHocInput {
+
+    prefix?: string | boolean;
+
+    /**
+     * Название поля либо отмена отображение поля (false)
+     * @example Visible
+     */
+    label?: string | boolean | any;
+
+    /**
+     * Аттрибут (название) поля в форме
+     * @example isVisible
+     */
+    attribute?: string;
+    model?: string | ((...args: any[]) => any) | any;
+    hint?: string;
+
+    /**
+     * Обязательное ли поле? Если true, то к названию будет добавлен модификатор 'required' - красная звездочка (по умолчанию)
+     * @example true
+     */
+    required?: boolean;
+
+    /**
+     * Переводит элемент в состояние "не активен"
+     * @example true
+     */
+    disabled?: boolean;
+    layout?: FormLayout;
+    onChange?: (...args: any[]) => any;
+    errors?: any;
+    date?: any;
+}
+
+export interface IFieldHocOutput extends IFormHocOutput, IThemeHocOutput {
+    input?: FormInputType,
+    fieldId?: string,
+    isInvalid?: boolean,
+}
+
+export interface IFieldHocConfig {
+    appendPrefix: boolean,
+    componentId: string,
+    attributes: string[],
+    layout: FormLayout,
+    list: boolean,
+}
+
+interface IFieldHocPrivateProps extends IComponentsHocOutput {
+    formId?: any;
+    fieldPropsFromRedux?: any;
+    formErrors?: any;
+    dispatch?: any;
+}
+
+const defaultConfig = {
+    appendPrefix: true,
+    componentId: '',
+    attributes: [''],
+    layout: null,
+    list: false,
+    layoutProps: null,
+} as IFieldHocConfig;
+
+const valueSelectors = {};
+const errorSelectors = {};
+let ID_COUNTER = 1;
+const generateUniqueId = () => {
+    return 'field' + ID_COUNTER++;
+};
+const getAttribute = (props, attribute) => {
+    return attribute
+        ? props['attribute' + _upperFirst(attribute)]
+        : props.attribute;
+};
+const getName = (props, attribute) => {
+    return [props.prefix, getAttribute(props, attribute)]
+        .filter(Boolean)
+        .join('.');
+};
+const getFieldId = (props, config) => {
+    return props.formId + '_' + getName(props, config.attributes[0]);
+};
+export const getFieldPropsFromModel = (model, attribute) => {
+    if (!model || !attribute) {
+        return null;
+    }
+    if (_isFunction(model.fields)) {
+        return model.fields()[attribute] || null;
+    }
+    if (_isObject(model.fields)) {
+        return model.fields[attribute] || null;
+    }
+    return null;
+};
+
+export default (customConfig): any => WrappedComponent => {
+    const config = {
+        ...defaultConfig,
+        componentId: 'form.' + (WrappedComponent.displayName || WrappedComponent.name),
+        ...customConfig,
+    };
+
+    return form({
+        appendPrefix: config.appendPrefix,
+    })(
+        connect((state, props) => {
+            if (!props.formId) {
+                return {};
+            }
+
+            // Lazy create value selector
+            if (!valueSelectors[props.formId]) {
+                valueSelectors[props.formId] = formValueSelector(props.formId);
+            }
+            const valueSelector = valueSelectors[props.formId];
+            // Fetch values
+            const values = {};
+            config.attributes.map(attribute => {
+                values['value' + _upperFirst(attribute)] = valueSelector(
+                    state,
+                    getName(props, attribute)
+                );
+            });
+            // Lazy create error selector
+            if (!errorSelectors[props.formId]) {
+                errorSelectors[props.formId] = getFormSubmitErrors(props.formId);
+            }
+            const errorSelector = errorSelectors[props.formId];
+            return {
+                ...values,
+                model: getModel(state, props.model),
+                formErrors: errorSelector(state),
+                fieldPropsFromRedux: getFieldProps(state, getFieldId(props, config))
+            };
+        })(
+            theme()(
+                components('ui')(
+                    class FieldHoc extends React.PureComponent<IFieldHocInput & IFieldHocPrivateProps> {
+
+                        _fieldId: any;
+
+                        constructor(props) {
+                            super(props);
+                            // Check attributes is set
+                            if (this.props.formId) {
+                                config.attributes.forEach(attribute => {
+                                    if (!this.props['attribute' + _upperFirst(attribute)]) {
+                                        throw new Error(
+                                            `Please set attribute name '${attribute}' for component '${WrappedComponent.name}' in form '${this.props.formId}'`
+                                        );
+                                    }
+                                });
+                            }
+                            if (!this.props.formId) {
+                                const state = {};
+                                config.attributes.forEach(attribute => {
+                                    state['value' + attribute] = _get(
+                                        this.props,
+                                        ['input', 'value', attribute].filter(Boolean)
+                                    );
+                                });
+                                this.state = state;
+                                this._fieldId = generateUniqueId();
+                            } else {
+                                this._fieldId = getFieldId(this.props, config);
+                            }
+                        }
+
+                        render() {
+                            const FieldLayout = require('../ui/form/FieldLayout').default;
+                            const outputProps = {
+                                ...this.props.ui.getFieldProps(config.componentId),
+                                ...getFieldPropsFromModel(this.props.model, this.props.attribute),
+                                ...this.props.fieldPropsFromRedux,
+                            } as IFieldHocOutput;
+
+                            const inputProps = {};
+                            if (!config.list) {
+                                config.attributes.forEach(attribute => {
+                                    inputProps[`input${_upperFirst(attribute)}`] = {
+                                        name: getName(this.props, attribute),
+                                        value: this._getValue(attribute),
+                                        onChange: value => this._setValue(attribute, value)
+                                    };
+                                });
+                            }
+
+                            // Get errors
+                            let errors = this.props.errors;
+                            Object.keys(inputProps).map(key => {
+                                const name = inputProps[key].name;
+                                const error = _get(this.props.formErrors, name);
+                                if (error) {
+                                    errors = (errors || []).concat(error);
+                                }
+                            });
+                            const isInvalid = errors && errors.length > 0;
+
+                            // TODO implement values in state for list (instead of redux-form FieldArray)
+
+                            return (
+                                <FieldLayout
+                                    {...outputProps}
+                                    {...this.props}
+                                    {...(typeof config.layout === 'object' ? config.layout : {layout: config.layout})}
+                                    {...config.layoutProps}
+                                    errors={isInvalid ? errors : null}
+                                    isInvalid={isInvalid}
+                                >
+                                    {!config.list && this.props.formId && process.env.IS_WEB && config.attributes.map(attribute => (
+                                        <Field
+                                            key={this.props.formId + attribute}
+                                            name={getName(this.props, attribute)}
+                                            component='input'
+                                            type='hidden'
+                                        />
+                                    ))}
+                                    {(config.list && (
+                                        <FieldArray
+                                            {...outputProps}
+                                            {...this.props}
+                                            name={getName(this.props, '')}
+                                            component={WrappedComponent}
+                                            formId={this.props.formId}
+                                            fieldId={this._fieldId}
+                                        />
+                                    )) || (
+                                        <WrappedComponent
+                                            {...outputProps}
+                                            {...inputProps}
+                                            {...this.props}
+                                            isInvalid={isInvalid}
+                                            formId={this.props.formId}
+                                            fieldId={this._fieldId}
+                                        />
+                                    )}
+                                </FieldLayout>
+                            );
+                        }
+
+                        _getValue(attribute) {
+                            if (this.props.formId) {
+                                return _get(this.props, 'value' + _upperFirst(attribute));
+                            } else {
+                                return this.state['value' + attribute];
+                            }
+                        }
+
+                        _setValue(attribute, value) {
+                            if (this.props.formId) {
+                                this.props.dispatch(
+                                    change(this.props.formId, getName(this.props, attribute), value)
+                                );
+                            } else {
+                                this.setState({
+                                    ['value' + attribute]: value
+                                });
+                            }
+                        }
+
+                    }
+                )
+            )
+        )
+    )
+}

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>
+            );
+        }
+    }