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

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

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

package/ui/form/FieldList/FieldList.tsx

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import {arrayPush} from 'redux-form';
+import {findDOMNode} from 'react-dom';
+import {components, field} from '../../../hoc';
+import {getFieldPropsFromModel, IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import Field from '../Field';
+import tableNavigationHandler from './tableNavigationHandler';
+import {getModel} from '../../../reducers/fields';
+import {FormContext} from '../../../hoc/form';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+interface IFieldListItem extends IFieldHocInput {
+
+    /**
+     * Будет ли отображён item ?
+     * @example true
+     */
+    visible?: boolean,
+    component?: any,
+
+    /**
+     * Placeholder подсказка
+     * @example Your text...
+     */
+    placeholder?: string,
+    className?: CssClassName,
+    headerClassName?: CssClassName,
+    view?: CustomView,
+    [key: string]: any,
+}
+
+export interface IFieldListProps extends IFieldHocInput {
+    /**
+     * Начальные значения в полях
+     * @example {name: 'Ivan', amount: 5}
+     */
+    initialValues?: {[key: string]: any}
+    items?: IFieldListItem[];
+    fields?: any;
+    initialRowsCount?: number;
+    showAdd?: boolean;
+    showRemove?: boolean;
+    className?: CssClassName;
+    view?: any;
+    viewProps?: any;
+    itemView?: any;
+    itemViewProps?: any;
+    enableKeyboardNavigation?: boolean;
+    [key: string]: any;
+}
+
+export interface IFieldListViewProps extends IFieldHocOutput {
+    items?: (IFieldListItem & {
+        disabled?: boolean,
+        size?: boolean,
+    })[];
+    renderField?: (field: object, prefix: string) => any,
+    onAdd?: (e: any) => void,
+    showRemove?: boolean,
+    showAdd?: boolean,
+}
+
+export interface IFieldListItemViewProps extends IFieldHocOutput {
+    items?: (IFieldListItem & {
+        disabled?: boolean,
+        size?: boolean,
+    })[];
+    renderField?: (field: object, prefix: string) => any,
+    onRemove?: (rowIndex: number) => void,
+    prefix: string,
+    rowIndex: number,
+    showRemove: boolean,
+}
+
+interface IFieldListPrivateProps extends IFieldHocOutput, IConnectHocOutput, IComponentsHocOutput {
+
+}
+
+const defaultProps = {
+    disabled: false,
+    required: false,
+    showAdd: true,
+    showRemove: true,
+    className: '',
+    initialRowsCount: 1,
+    enableKeyboardNavigation: true,
+};
+
+@field({
+    componentId: 'form.FieldList',
+    list: true,
+})
+@connect((state, props) => ({
+    model: getModel(state, props.model),
+}))
+@components('ui')
+export default class FieldList extends React.PureComponent<IFieldListProps & IFieldListPrivateProps> {
+
+    static defaultProps = defaultProps;
+
+    constructor(props) {
+        super(props);
+        this._onAdd = this._onAdd.bind(this);
+        this._onRemove = this._onRemove.bind(this);
+        this._renderField = this._renderField.bind(this);
+        this._onKeyDown = this._onKeyDown.bind(this);
+    }
+
+    componentDidMount() {
+        if (this.props.fields.length === 0) {
+            for (let i = 0; i < this.props.initialRowsCount; i++) {
+                this._onAdd();
+            }
+        }
+        if (this.props.enableKeyboardNavigation && process.env.IS_WEB) {
+            document.addEventListener('keydown', this._onKeyDown, false);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.enableKeyboardNavigation && process.env.IS_WEB) {
+            document.removeEventListener('keydown', this._onKeyDown, false);
+        }
+    }
+
+    _onKeyDown(e) {
+        const isDescendant = (parent, child) => {
+            let node = child.parentNode;
+            while (node !== null) {
+                if (node === parent) {
+                    return true;
+                }
+                node = node.parentNode;
+            }
+            return false;
+        };
+        if (!isDescendant(findDOMNode(this), e.target)) {
+            return;
+        }
+        tableNavigationHandler(e, () =>
+            this.props.dispatch(arrayPush(this.props.formId, this.props.attribute))
+        );
+    }
+
+    render() {
+        const FieldListView =
+            this.props.view || this.props.ui.getView('form.FieldListView');
+        const FieldListItemView =
+            this.props.itemView || this.props.ui.getView('form.FieldListItemView');
+        const items = (this.props.items || [])
+            .filter(field => field.visible !== false)
+            .map(field => ({
+                ...getFieldPropsFromModel(this.props.model, field.attribute),
+                ...field,
+                disabled: field.disabled || this.props.disabled,
+                size: field.size || this.props.size
+            }));
+        return (
+            <FormContext.Provider
+                value={{
+                    formId: this.props.formId,
+                    model: this.props.model,
+                    prefix: this.props.prefix,
+                    layout: this.props.layout,
+                }}
+            >
+                <FieldListView
+                    {...this.props}
+                    {...this.props.view}
+                    items={items}
+                    renderField={this._renderField}
+                    onAdd={this._onAdd}
+                >
+                    {this.props.fields.map((prefix, rowIndex) => (
+                        <FieldListItemView
+                            {...this.props}
+                            {...this.props.itemViewProps}
+                            items={items}
+                            renderField={this._renderField}
+                            onRemove={this._onRemove}
+                            key={rowIndex}
+                            prefix={prefix}
+                            rowIndex={rowIndex}
+                        />
+                    ))}
+                </FieldListView>
+            </FormContext.Provider>
+        );
+    }
+
+    _renderField(field, prefix) {
+        return <Field layout='inline' {...field} prefix={prefix}/>;
+    }
+
+    _onAdd() {
+        this.props.fields.push(this.props.initialValues);
+    }
+
+    _onRemove(rowIndex) {
+        this.props.fields.remove(rowIndex);
+    }
+}

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import FieldList from '../FieldList';
+import Form from '../../Form';
+import InputField from '../../InputField';
+import NumberField from '../../NumberField';
+
+export default () => (
+    <>
+        <Form formId='FieldListForm'>
+            <FieldList
+                attribute='items'
+                label='Items'
+                items={[
+                    {
+                        label: 'Name',
+                        attribute: 'name',
+                        component: InputField,
+                    },
+                    {
+                        label: 'Amount',
+                        attribute: 'amount',
+                        component: NumberField,
+                    },
+                ]}
+            />
+        </Form>
+    </>
+);

package/ui/form/FieldList/tableNavigationHandler.ts

@@ -0,0 +1,41 @@
+export default (e, addHandler) => {
+    if (!e.shiftKey || [38, 40].indexOf(e.keyCode) === -1) {
+        return;
+    }
+    e.preventDefault();
+    const names = e.target.name.split('.');
+    const inputName = names[names.length - 1];
+    let table = e.target;
+    while (
+        (table = table.parentElement) &&
+        table.tagName.toLowerCase() !== 'table'
+        ) {
+    } // eslint-disable-line no-empty
+    const getInputs = (table) =>
+        Array.prototype.slice
+            .call(table.querySelectorAll('input:not([type="hidden"]), select'))
+            .filter(inputElement => {
+                const searchInputNames = inputElement.name.split('.');
+                const searchInputName = searchInputNames[searchInputNames.length - 1];
+                return (
+                    names.length === searchInputNames.length &&
+                    inputName === searchInputName
+                );
+            });
+    const inputs = getInputs(table);
+    const currentIndex = inputs.findIndex(
+        inputElement => inputElement.name === e.target.name
+    );
+    const nextIndex = e.keyCode === 38 ? currentIndex - 1 : currentIndex + 1;
+    if (nextIndex >= 0 && nextIndex < inputs.length) {
+        inputs[nextIndex].focus();
+    } else if (nextIndex === inputs.length) {
+        addHandler();
+        setTimeout(() => {
+            const inputs = getInputs(table);
+            if (inputs[nextIndex]) {
+                inputs[nextIndex].focus();
+            }
+        });
+    }
+};

package/ui/form/FieldSet/FieldSet.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import {FormContext, IFormContext, mergeLayoutProp} from '../../../hoc/form';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import Field from '../Field';
+import _isString from 'lodash-es/isString';
+import {IFieldProps} from '../Field/Field';
+import {IFieldHocOutput} from '../../../hoc/field';
+
+export interface IFieldSetProps extends IFormContext, IComponentsHocOutput {
+
+    /**
+     * Конфигурационный массив с полями формы
+     */
+    fields?: IFieldProps[],
+
+    /**
+     * Название поля
+     * @example Save
+     */
+    label?: any,
+    view?: CustomView,
+    className?: CssClassName,
+    [key: string]: any,
+}
+
+export interface IFieldSetViewProps extends IFieldHocOutput {
+
+}
+
+@components('ui')
+export default class FieldSet extends React.PureComponent<IFieldSetProps> {
+    render() {
+        const FieldSetView = this.props.view || this.props.ui.getView('form.FieldSetView');
+        return (
+            <FormContext.Consumer>
+                {context => {
+                    return (
+                        <FormContext.Provider
+                            value={{
+                                formId: this.props.formId || context.formId,
+                                model: this.props.model || context.model,
+                                prefix: [context.prefix, this.props.prefix]
+                                    .filter(Boolean)
+                                    .join('.'),
+                                layout: mergeLayoutProp(context.layout, this.props.layout),
+                            }}
+                        >
+                            <FieldSetView
+                                className={this.props.className}
+                                label={this.props.label}
+                                {...this.props}
+                            >
+                                {this.props.children}
+                                {(this.props.fields || []).map((field: any, index) => (
+                                    <Field
+                                        key={index}
+                                        {...(_isString(field) ? {attribute: field} : field)}
+                                        prefix={null}
+                                    />
+                                ))}
+                            </FieldSetView>
+                        </FormContext.Provider>
+                    )
+                }}
+            </FormContext.Consumer>
+        );
+    }
+}

package/ui/form/FileField/FileField.story.js

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

package/ui/form/FileField/FileField.tsx

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import _first from 'lodash-es/first';
+import _values from 'lodash-es/values';
+import File from 'fileup-core/lib/models/File';
+import {components, field, file} from '../../../hoc';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IFileHocInput, IFileHocOutput} from '../../../hoc/file';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IFileFieldProps extends IFieldHocInput, IFileHocInput {
+
+    /**
+     * Показать значок удаление файла
+     * @example true
+     */
+    showRemove?: boolean,
+    buttonComponent?: React.ReactNode; // TODO May be buttonView ?
+    buttonProps?: any;
+    className?: CssClassName;
+    view?: CustomView;
+    itemView?: CustomView;
+    itemProps?: any;
+    [key: string]: any;
+}
+
+interface IFileFieldItemProps extends IFieldHocOutput, 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 IFileFieldItemViewProps extends IFileFieldItemProps {
+
+}
+
+export interface IFileFieldViewProps extends IFieldHocOutput, IFileHocOutput {
+    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: IFileFieldItemProps[]
+}
+
+interface IFileFieldPrivateProps extends IFieldHocOutput, IFileHocOutput, IComponentsHocOutput {
+
+}
+
+const defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    showRemove: true,
+    buttonProps: {
+        color: 'secondary',
+        outline: true
+    }
+};
+
+@field({
+    componentId: 'form.FileField'
+})
+@file()
+@components('ui')
+export default class FileField extends React.PureComponent<IFileFieldProps & IFileFieldPrivateProps> {
+
+    static defaultProps = defaultProps;
+
+    render() {
+        const FileFieldView =
+            this.props.view || this.props.ui.getView('form.FileFieldView');
+        const FileFieldItemView =
+            this.props.itemView || this.props.ui.getView('form.FileFieldItemView');
+        return (
+            <FileFieldView
+                {...this.props}
+                buttonComponent={this.props.buttonComponent}
+                buttonProps={{
+                    label: this.props.imagesOnly
+                        ? this.props.multiple
+                            ? __('Прикрепить фотографии')
+                            : __('Прикрепить фото')
+                        : this.props.multiple
+                            ? __('Прикрепить файлы')
+                            : __('Прикрепить файл'),
+                    size: this.props.size,
+                    disabled: this.props.disabled,
+                    onClick: this.props.onBrowse,
+                    ...defaultProps.buttonProps,
+                    ...this.props.buttonProps
+                }}
+                itemView={FileFieldItemView}
+                items={this.props.files.map(file => {
+                    const data = file.getResultHttpMessage() || {};
+                    const item = {
+                        uid: file.getUid(),
+                        fileId: data.id || null,
+                        title: file.getName(),
+                        size: this.props.size,
+                        disabled: this.props.disabled,
+                        showRemove: this.props.showRemove,
+                        onRemove: () => this.props.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[this.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;
+                })}
+            />
+        );
+    }
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import FileField from '../FileField';
+
+export default () => (
+    <>
+        <FileField
+            backendUrl={'/api/v1/file-test'}
+            label='File'
+        />
+    </>
+);

package/ui/form/Form/AutoSaveHelper.ts

@@ -0,0 +1,23 @@
+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
+      };
+    }
+  }
+  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/ui/form/Form/Form.story.js

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