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

package/hoc/dataProvider.tsx

@@ -0,0 +1,521 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import {change} from 'redux-form';
+import _remove from 'lodash-es/remove';
+import _isString from 'lodash-es/isString';
+import _isEqual from 'lodash-es/isEqual';
+import _isArray from 'lodash-es/isArray';
+import _isFunction from 'lodash-es/isFunction';
+import _includes from 'lodash-es/includes';
+import _uniqBy from 'lodash-es/uniqBy';
+import _isBoolean from 'lodash-es/isBoolean';
+
+import {getEnumLabels} from '../reducers/fields';
+import {IFieldHocOutput} from './field';
+import components, {IComponentsHocOutput} from './components';
+import {IFieldHocInput} from "./field";
+import Enum from "../base/Enum";
+import {IConnectHocOutput} from './connect';
+import normalize, {INormalizeHocConfig} from './normalize';
+import {smartSearch} from '../utils/text';
+import {normalizeItems} from '../utils/data';
+
+/**
+ * Data Provider HOC
+ * Подготавливает коллекции данных для полей форм. Используется в выпадающих списках, чекбоксах, автокомплитах и т.п.
+ * Позволяет передать данные несколькими видами (enum, list, object, data provider), а на выход предоставит единый вид
+ * данных. Поддерживает подгрузку данных из вне (при autocomplete), поиск по данным, множественный выбор.
+ */
+export interface IDataProviderHocInput {
+    input?: FormInputType,
+    multiple?: boolean;
+    items?: string
+        | ({ new(): Enum })
+        | (string | number | { id: string | number | boolean, label: string | any })[],
+    dataProvider?: {
+        action?: string,
+        params?: object,
+        onSearch?: (...args: any) => any,
+    };
+    autoComplete?: boolean | {
+        enable?: boolean,
+        minLength?: number,
+        delay?: number,
+    };
+    autoFetch?: any;
+    selectFirst?: any;
+    onSelect?: any;
+    valueItemKey?: string,
+}
+
+export interface IDataProviderHocOutput {
+    items?: {
+        id: number | string | boolean,
+        label?: string,
+    }[] | any; // TODO any
+    selectedItems?: any,
+    hoveredItem?: any,
+    isOpened?: boolean,
+    isLoading?: boolean,
+    onOpen?: any,
+    onClose?: any,
+    onSearch?: any,
+    onItemClick?: any,
+    onItemRemove?: any,
+    onItemMouseOver?: any,
+}
+
+interface IDataProviderHocPrivateProps extends IConnectHocOutput, IFieldHocOutput, IFieldHocInput, IComponentsHocOutput {
+    formId: string,
+    _autoComplete: {
+        enable?: boolean,
+        minLength?: number,
+        delay?: number,
+    }
+}
+
+interface IDataProviderHocState {
+    query: string,
+    isOpened: boolean,
+    isFocused: boolean,
+    isLoading: boolean,
+    hoveredItem: any,
+    selectedItems: any,
+    sourceItems: any,
+    items: any,
+}
+
+
+const defaultProps = {
+    autoComplete: {
+        enable: false,
+        minLength: 2,
+        delay: 100,
+    },
+    valueItemKey: 'id',
+};
+
+const normalizeMap = [
+    {
+        fromKey: 'autoComplete',
+        toKey: '_autoComplete',
+        normalizer: autoComplete => ({
+            ...defaultProps.autoComplete,
+            ...(_isBoolean(autoComplete) ? {enable: autoComplete} : autoComplete),
+        }),
+    },
+] as INormalizeHocConfig[];
+
+const stateMap = (state, props) => ({
+    items: _isString(props.items)
+        ? getEnumLabels(state, props.items)
+        : props.items
+});
+export default (): any => WrappedComponent =>
+    connect(stateMap)(
+        normalize(normalizeMap)(
+            components('http')(
+                class DataProviderHoc extends React.PureComponent<IDataProviderHocInput & IDataProviderHocPrivateProps, IDataProviderHocState> {
+
+                    _delayTimer: any;
+
+                    static WrappedComponent = WrappedComponent;
+                    /**
+                     * Proxy real name, prop types and default props for storybook
+                     */
+                    static displayName = WrappedComponent.displayName || WrappedComponent.name;
+
+                    static defaultProps = defaultProps;
+
+                    constructor(props) {
+                        super(props);
+
+                        this._onOpen = this._onOpen.bind(this);
+                        this._onClose = this._onClose.bind(this);
+                        this._onSearch = this._onSearch.bind(this);
+                        this._onItemClick = this._onItemClick.bind(this);
+                        this._onItemRemove = this._onItemRemove.bind(this);
+                        this._onItemMouseOver = this._onItemMouseOver.bind(this);
+                        this._onKeyDown = this._onKeyDown.bind(this);
+                        this._delayTimer = null;
+                        const sourceItems = normalizeItems(this.props.items);
+                        this.state = {
+                            query: '',
+                            isOpened: false,
+                            isFocused: false,
+                            isLoading: false,
+                            hoveredItem: null,
+                            selectedItems: this._findSelectedItems(
+                                sourceItems,
+                                this.props.input.value
+                            ),
+                            sourceItems,
+                            items: sourceItems
+                        };
+                    }
+
+                    UNSAFE_componentWillMount() {
+                        // Select first value on mount
+                        if (this.props.selectFirst && this.state.items.length > 0) {
+                            this._onItemClick(this.state.items[0]);
+                        }
+
+                        // Check to auto fetch items first page
+                        // or load async selected labels from backend if value provided without label
+                        if (
+                            this.props.dataProvider && (
+                                this.props.autoFetch
+                                || this.state.items.length === 0 && this.props.input.value
+                            )
+                        ) {
+                            this._searchDataProvider('', this.props.input.value || null, true);
+                        }
+                    }
+
+                    UNSAFE_componentWillReceiveProps(nextProps) {
+                        const sourceItems = normalizeItems(nextProps.items);
+
+                        // Refresh normalized source items on change items from props
+                        if (this.props.items !== nextProps.items) {
+                            this.setState({
+                                sourceItems,
+                                items: sourceItems
+                            });
+                            // Select first value on fetch data
+                            if (
+                                (this.props.items || []).length === 0 &&
+                                (nextProps.items || []).length > 0 &&
+                                this.props.selectFirst
+                            ) {
+                                this._onItemClick(sourceItems[0]);
+                            }
+                        }
+
+                        // update selected value when props changed
+                        this.setState({
+                            selectedItems: this._findSelectedItems(
+                                _uniqBy(
+                                    [].concat(
+                                        sourceItems,
+                                        this.state.items,
+                                        this.state.sourceItems,
+                                        this.state.selectedItems
+                                    ),
+                                    'id'
+                                ),
+                                nextProps.input.value
+                            )
+                        });
+
+                        // Store selected items in state on change value
+                        if (this.props.input.value !== nextProps.input.value) {
+                            this.setState({
+                                selectedItems: this._findSelectedItems(
+                                    _uniqBy(
+                                        [].concat(
+                                            sourceItems,
+                                            this.state.items,
+                                            this.state.sourceItems,
+                                            this.state.selectedItems
+                                        ),
+                                        'id'
+                                    ),
+                                    nextProps.input.value
+                                )
+                            });
+                        }
+
+                        let params = this.props?.dataProvider?.params || {};
+                        let nextParams = nextProps?.dataProvider?.params || {};
+
+                        // Check changes of dataProvider params
+                        // which contains update data getting from form values or props
+                        // also auto fetch on change autoFetch flag
+                        if (nextProps.autoFetch && nextProps.dataProvider
+                            && (!this.props.autoFetch || !_isEqual(params, nextParams))
+                        ) {
+                            this._searchDataProvider('', null, this.props.autoFetch, nextParams);
+                        }
+                    }
+
+                    componentDidMount() {
+                        if (process.env.IS_WEB) {
+                            window.addEventListener('keydown', this._onKeyDown);
+                        }
+                    }
+
+                    componentWillUnmount() {
+                        if (process.env.IS_WEB) {
+                            window.removeEventListener('keydown', this._onKeyDown);
+                        }
+                    }
+
+                    render() {
+                        return (
+                            <WrappedComponent
+                                {...this.props}
+                                autoComplete={this.props._autoComplete}
+                                selectedItems={this.state.selectedItems}
+                                hoveredItem={this.state.hoveredItem}
+                                isOpened={this.state.isOpened}
+                                isLoading={this.state.isLoading}
+                                items={this.state.items}
+                                onOpen={this._onOpen}
+                                onClose={this._onClose}
+                                onSearch={this._onSearch}
+                                onItemClick={this._onItemClick}
+                                onItemRemove={this._onItemRemove}
+                                onItemMouseOver={this._onItemMouseOver}
+                            />
+                        );
+                    }
+
+                    /**
+                     * Get items by values
+                     * @param {array} items
+                     * @param {array|string} value
+                     * @returns {array}
+                     * @private
+                     */
+                    _findSelectedItems(items, value) {
+                        const selectedValues =
+                            value === false || value === 0 ? [value] : [].concat(value || []);
+                        return items.filter(item => _includes(selectedValues, item[this.props.valueItemKey]));
+                    }
+
+                    /**
+                     * Handler for user open items dropdown menu
+                     * @private
+                     */
+                    _onOpen() {
+                        this.setState({
+                            isOpened: !this.state.isOpened,
+                            items: this.state.sourceItems,
+                            hoveredItem: null,
+                        });
+                    }
+
+                    /**
+                     * Handler for user close items dropdown menu
+                     * @private
+                     */
+                    _onClose() {
+                        this.setState({
+                            isOpened: false,
+                        });
+                    }
+
+                    /**
+                     * Handler for user auto complete search by key down events
+                     * @param {string} query
+                     * @private
+                     */
+                    _onSearch(query) {
+                        query = query || '';
+                        this.setState({query});
+                        if (this.props.dataProvider) {
+                            if (this._delayTimer) {
+                                clearTimeout(this._delayTimer);
+                            }
+
+                            // Min length query logic
+                            if (query.length >= this.props._autoComplete.minLength) {
+                                // Search with delay
+                                this._delayTimer = setTimeout(() => this._searchDataProvider(query), this.props._autoComplete.delay);
+                            }
+                        } else {
+                            // Client-side search on static items
+                            this._searchClientSide(query);
+                        }
+                    }
+
+                    /**
+                     * Client-side search on static items
+                     * @param {string} query
+                     * @private
+                     */
+                    _searchClientSide(query) {
+                        this.setState({
+                            items: smartSearch(query, this.state.sourceItems),
+                        });
+                    }
+
+                    /**
+                     * Search by data provider (for example: http requests)
+                     * @param {string} query
+                     * @param {string|number} value
+                     * @param {boolean} isAutoFetch
+                     * @param {object} dataProviderParams
+                     * @private
+                     */
+                    _searchDataProvider(query = '', value = null, isAutoFetch = false, dataProviderParams = null) {
+                        if (!value && !isAutoFetch && query.length < this.props._autoComplete.minLength) {
+                            return;
+                        }
+                        const searchHandler =
+                            this.props.dataProvider.onSearch ||
+                            this.props.http.post.bind(this.props.http);
+                        const searchParams = dataProviderParams || this.props.dataProvider.params;
+
+                        const result = searchHandler(this.props.dataProvider.action, {
+                            query,
+                            value,
+                            model: this.props.model,
+                            attribute: this.props.attribute,
+                            ...searchParams
+                        });
+                        // Check is promise
+                        if (result && _isFunction(result.then)) {
+                            this.setState({isLoading: true});
+                            result.then(items => {
+                                items = normalizeItems(items);
+                                this.setState({
+                                    isLoading: false,
+                                    items,
+                                    sourceItems: isAutoFetch ? items : this.state.sourceItems,
+                                    selectedItems: value ? this._findSelectedItems(items, value) : this.state.selectedItems
+                                });
+                            });
+                        }
+                        // Check is items list
+                        if (_isArray(result)) {
+                            const items = normalizeItems(result);
+                            this.setState({
+                                items,
+                                sourceItems: isAutoFetch ? items : this.state.sourceItems,
+                                selectedItems: value ? this._findSelectedItems(items, value) : this.state.selectedItems
+                            });
+                        }
+                    }
+
+                    /**
+                     * Handler for user click on item
+                     * @param {object} item
+                     * @param {boolean} skipToggle
+                     * @private
+                     */
+                    _onItemClick(item, skipToggle = false) {
+                        const value = item[this.props.valueItemKey];
+                        if (this.props.multiple) {
+                            const values = [].concat(this.props.input.value || []);
+                            if (values.indexOf(value) !== -1) {
+                                if (!skipToggle) {
+                                    _remove(values, itemValue => itemValue === value);
+                                }
+                            } else {
+                                values.push(value);
+                            }
+                            this.props.input.onChange(values);
+                            // Fix bug. Without this calls component Form is not get differect values
+                            // in componentWillReceiveProps and onChange handlers is not called.
+                            if (this.props.formId) {
+                                this.props.dispatch(
+                                    change(this.props.formId, this.props.input.name, values)
+                                );
+                            }
+                        } else {
+                            if (this.props.input.value !== value) {
+                                this.props.input.onChange(value);
+                            }
+                            this._onClose();
+                        }
+                        if (this.props.onSelect) {
+                            this.props.onSelect(item, {
+                                prefix: this.props.prefix,
+                                name: this.props.input.name
+                            });
+                        }
+                    }
+
+                    /**
+                     * Handler for user remove item and close items dropdown menu
+                     * @param {object} item
+                     * @private
+                     */
+                    _onItemRemove(item) {
+                        this._onClose();
+                        this._onItemClick(item);
+                    }
+
+                    /**
+                     * Handler for user mouse over on item
+                     * @param {object} item
+                     * @private
+                     */
+                    _onItemMouseOver(item) {
+                        this.setState({
+                            hoveredItem: item
+                        });
+                    }
+
+                    /**
+                     * Global key down handler for navigate on items
+                     * Support keys:
+                     *  - tab
+                     *  - esc
+                     *  - enter
+                     *  - up/down arrows
+                     * @param {object} e
+                     * @private
+                     */
+                    _onKeyDown(e) {
+                        if (!this.state.isFocused && !this.state.isOpened) {
+                            return;
+                        }
+                        switch (e.which) {
+                            case 9: // tab
+                            case 27: // esc
+                                e.preventDefault();
+                                this._onClose();
+                                break;
+                            case 13: // enter
+                                if (this.state.isOpened) {
+                                    e.preventDefault();
+                                    if (this.state.hoveredItem) {
+                                        // Select hovered
+                                        this._onItemClick(this.state.hoveredItem, true);
+                                    } else if (this.state.selectedItems.length > 0) {
+                                        // Select first selected
+                                        this._onItemClick(this.state.selectedItems[0], true);
+                                    } else if (this.state.items.length > 0) {
+                                        // Select first result
+                                        this._onItemClick(this.state.items[0], true);
+                                    }
+                                }
+                                break;
+                            case 38: // arrow up
+                            case 40: // arrow down
+                                e.preventDefault();
+                                const isDown = e.which === 40;
+                                if (!this.state.isOpened) {
+                                    // Open on down key
+                                    if (isDown) {
+                                        this._onOpen();
+                                    }
+                                    break;
+                                }
+                                // Navigate on items by keys
+                                const direction = isDown ? 1 : -1;
+                                const keys = this.state.items.map(item => item.id);
+                                let index = this.state.hoveredItem
+                                    ? keys.indexOf(this.state.hoveredItem.id)
+                                    : -1;
+                                if (index === -1 && this.state.selectedItems.length === 1) {
+                                    index = keys.indexOf(this.state.selectedItems[0].id);
+                                }
+                                const newIndex =
+                                    index !== -1
+                                        ? Math.min(keys.length - 1, Math.max(0, index + direction))
+                                        : 0;
+                                this.setState({
+                                    hoveredItem: this.state.items.find(
+                                        item => item.id === keys[newIndex]
+                                    )
+                                });
+                                break;
+                        }
+                    }
+                }
+            )
+        )
+    )

package/hoc/fetch.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import {
+    navigationAddConfigs,
+    navigationRemoveConfigs,
+    getConfigId,
+    navigationRefresh,
+    IFetchConfig
+} from '../actions/router';
+import {getRouteParams} from '../reducers/router';
+import {IConnectHocOutput} from './connect';
+
+export type IFetchHocConfig = (props: any) => IFetchConfig | IFetchConfig[];
+
+/**
+ * Fetch HOC
+ * Используется для подгрузки данных с бекенда перед рендером компонента, на котором он применяется. На вход ему передается
+ * один или несколько объектов конфигураций (id, key, url, method, params, ...), которые описывают откуда нужно подтянуть данные.
+ *
+ * В процесс загрузки HOC будет отображать "Загрузка...", а после уже отрендерит компонент, передав данные в указанный
+ * ключ `key`. Все данные сохраняются в Redux Store, что позволяет избежать дополнительных запросов при использовании SSR.
+ */
+export interface IFetchHocInput {
+    navigationData?: object,
+    routeParams?: object,
+}
+
+export interface IFetchHocOutput {
+    fetchRefresh?: (ids?: string | string[]) => void,
+    fetchUpdate?: (props: any) => void,
+}
+
+interface IFetchHocPrivateProps extends IConnectHocOutput {
+
+}
+
+interface IFetchHocState {
+    overwriteProps?: any,
+}
+
+interface IFetchHocOptions {
+    waitLoading?: any,
+}
+
+const stateMap = state => ({
+    navigationData: (state.router && state.router.data) || null,
+    routeParams: getRouteParams(state)
+});
+export default (configsFunc: IFetchHocConfig, options = {} as IFetchHocOptions): any => WrappedComponent =>
+    connect(stateMap)(
+        class FetchHoc extends React.PureComponent<IFetchHocInput & IFetchHocPrivateProps, IFetchHocState> {
+
+            static WrappedComponent = WrappedComponent;
+
+            constructor(props) {
+                super(props);
+                this.state = {
+                    overwriteProps: null
+                };
+                this._onRefresh = this._onRefresh.bind(this);
+                this._onUpdate = this._onUpdate.bind(this);
+            }
+
+            UNSAFE_componentWillMount() {
+                this.props.dispatch(
+                    navigationAddConfigs(
+                        configsFunc({
+                            ...this.props,
+                            ...this.state.overwriteProps,
+                            params: this.props.routeParams
+                        }) || []
+                    )
+                );
+            }
+
+            componentWillUnmount() {
+                this.props.dispatch(
+                    navigationRemoveConfigs(
+                        configsFunc({
+                            ...this.props,
+                            ...this.state.overwriteProps,
+                            params: this.props.routeParams
+                        }) || []
+                    )
+                );
+            }
+
+            componentDidUpdate(prevProps, prevState) {
+                const prevConfigs = [].concat(
+                    configsFunc({
+                        ...prevProps,
+                        ...prevState.overwriteProps,
+                        params: prevProps.routeParams
+                    }) || []
+                );
+                const nextConfigs = [].concat(
+                    configsFunc({
+                        ...this.props,
+                        ...this.state.overwriteProps,
+                        params: this.props.routeParams
+                    }) || []
+                );
+                for (
+                    let i = 0;
+                    i < Math.max(prevConfigs.length, nextConfigs.length);
+                    i++
+                ) {
+                    if (getConfigId(prevConfigs[i]) !== getConfigId(nextConfigs[i])) {
+                        this.props.dispatch([
+                            navigationRemoveConfigs(prevConfigs[i]),
+                            navigationAddConfigs(nextConfigs[i])
+                        ]);
+                    }
+                }
+            }
+
+            render() {
+                const configs = [].concat(
+                    configsFunc({
+                        ...this.props,
+                        ...this.state.overwriteProps,
+                        params: this.props.routeParams
+                    }) || []
+                );
+                let dataProps = {};
+                let isLoading = !this.props.navigationData && configs.length > 0;
+                if (this.props.navigationData) {
+                    configs.forEach(config => {
+                        const dataItem = this.props.navigationData[getConfigId(config)];
+                        if (dataItem) {
+                            if (config.key) {
+                                dataProps[config.key] = dataItem;
+                            } else {
+                                dataProps = {...dataProps, ...dataItem};
+                            }
+                        } else {
+                            isLoading = true;
+                        }
+                    });
+                }
+                if (isLoading && options.waitLoading !== false) {
+                    // TODO Loader
+                    return null;
+                }
+
+                const outputProps = {
+                    ...this.props,
+                    ...this.state.overwriteProps,
+                    ...dataProps,
+                    fetchRefresh: this._onRefresh,
+                    fetchUpdate: this._onUpdate,
+                } as IFetchHocOutput;
+
+                return (
+                    <WrappedComponent {...outputProps}/>
+                );
+            }
+
+            _onRefresh(ids = null) {
+                if (ids === null) {
+                    const configs = [].concat(configsFunc({
+                        ...this.props,
+                        ...this.state.overwriteProps,
+                        params: this.props.routeParams
+                    }) || []);
+                    ids = configs.map(config => config.id);
+                }
+                this.props.dispatch(navigationRefresh(ids));
+            }
+
+            _onUpdate(overwriteProps) {
+                this.setState({overwriteProps});
+            }
+        }
+    )