@steroidsjs/core 2.2.87 → 2.3.0-beta.1

package/src/actions/list.ts

@@ -0,0 +1,343 @@
+import _get from 'lodash-es/get';
+import _isArray from 'lodash-es/isArray';
+import _isEmpty from 'lodash-es/isEmpty';
+import _orderBy from 'lodash-es/orderBy';
+import _trimStart from 'lodash-es/trimStart';
+import _isFunction from 'lodash-es/isFunction';
+import _isEqual from 'lodash-es/isEqual';
+import _isNil from 'lodash-es/isNil';
+import {formSelector} from '../reducers/form';
+import {formChange, formSetErrors} from '../actions/form';
+import {filterItems} from '../utils/data';
+import {IApiMethod} from '../components/ApiComponent';
+
+export interface IList {
+    action?: string | IApiMethod,
+    actionMethod?: string,
+    onFetch?: (list: IList, query: Record<string, unknown>, components: any) => Promise<any>,
+    condition?: (query: Record<string, unknown>) => any,
+    scope?: string[],
+    total?: number,
+    items?: Array<any>,
+    sourceItems?: Array<any>,
+    isRemote?: boolean,
+    loadMore?: boolean,
+    primaryKey?: string,
+    listId?: string,
+    formId?: string,
+    pageAttribute?: string,
+    pageSizeAttribute?: string,
+    sortAttribute?: string,
+    layoutAttribute?: string,
+    meta?: any,
+    isFetched?: boolean,
+    isLoading?: boolean,
+    layoutName?: null,
+}
+
+export const LIST_INIT = '@list/init';
+export const LIST_SET_ITEMS = '@list/set_items';
+export const LIST_BEFORE_FETCH = '@list/before_fetch';
+export const LIST_AFTER_FETCH = '@list/after_fetch';
+export const LIST_ITEM_ADD = '@list/item_add';
+export const LIST_ITEM_UPDATE = '@list/item_update';
+export const LIST_DESTROY = '@list/destroy';
+export const LIST_TOGGLE_ITEM = '@list/toggle_item';
+export const LIST_TOGGLE_ALL = '@list/toggle_all';
+export const LIST_SET_LAYOUT = '@list/set_layout';
+
+//const STORAGE_LAYOUT_KEY_PREFIX = 'listLayout_';
+
+const lazyTimers = {};
+
+const createList = (listId: string, props: any) => ({
+    action: props.action || props.action === '' ? props.action : null,
+    actionMethod: props.actionMethod || 'get',
+    onFetch: props.onFetch,
+    condition: props.condition,
+    scope: props.scope,
+    total: props.total || null,
+    items: null,
+    sourceItems: props.items || null,
+    isRemote: !props.items,
+    loadMore: props._pagination.loadMore,
+    primaryKey: props.primaryKey,
+    listId,
+    formId: _get(props, 'searchForm.formId') || listId,
+    pageAttribute: _get(props, '_pagination.attribute') || null,
+    pageSizeAttribute: _get(props, '_paginationSize.attribute') || null,
+    sortAttribute: _get(props, '_sort.attribute') || null,
+    layoutAttribute: _get(props, '_layout.attribute') || null,
+});
+
+export const httpFetchHandler = (list: IList, query, {api, http}) => {
+    if (typeof list.action === 'function') {
+        const params = {...query};
+        if (list.scope) {
+            params.scope = list.scope.join(',');
+        }
+        return list.action(api, params).then(response => response.data);
+    }
+
+    let url = list.action;
+    if (list.scope) {
+        url
+            += (url.indexOf('?') !== -1 ? '&' : '?') + 'scope=' + list.scope.join(',');
+    }
+    return http
+        .send(list.actionMethod, url || window.location.pathname, query)
+        .then(response => response.data);
+};
+
+export const localFetchHandler = (list: IList, query: Record<string, unknown>) => {
+    query = {...query};
+
+    // Get page
+    const page = parseInt(query[list.pageAttribute] as string, 10) || null;
+    delete query[list.pageAttribute];
+
+    // Get page size
+    const pageSize = parseInt(query[list.pageSizeAttribute] as string, 10) || null;
+    delete query[list.pageSizeAttribute];
+
+    // Get sort
+    const sort = query[list.sortAttribute] ? [].concat(query[list.sortAttribute]) : null;
+    delete query[list.sortAttribute];
+
+    // Delete layout param
+    delete query[list.layoutAttribute];
+
+    let items = [].concat(list.sourceItems || []);
+
+    // Remove null or undefined values from query
+    Object.keys(query).forEach(key => {
+        if (_isNil(query[key])) {
+            delete query[key];
+        }
+    });
+
+    // Filter items
+    if (!_isEmpty(query)) {
+        items = filterItems(
+            items,
+            list.condition
+                ? (_isFunction(list.condition) ? list.condition(query) : list.condition)
+                : query,
+        );
+    }
+
+    const total = items.length;
+
+    // Pagination
+    if (page && pageSize) {
+        const startIndex = (page - 1) * pageSize;
+        items = items.slice(startIndex, startIndex + pageSize);
+    }
+
+    // Sort
+    if (sort) {
+        items = _orderBy(
+            items,
+            sort.map(key => _trimStart(key, '-')),
+            sort.map(key => key.indexOf('-') === 0 ? 'desc' : 'asc'),
+        );
+    }
+
+    if (_isEqual(list.items, items)) {
+        items = list.items;
+    }
+
+    return {
+        items,
+        total,
+    };
+};
+
+/**
+ * Init list
+ * @param listId
+ * @param payload
+ */
+export const listInit = (listId, payload) => ({
+    type: LIST_INIT,
+    payload,
+});
+
+export const listSetItems = (listId, items) => ({
+    type: LIST_SET_ITEMS,
+    listId,
+    items,
+});
+
+export const listSetLayout = (listId, layoutName) => ({
+    type: LIST_SET_LAYOUT,
+    listId,
+    layoutName,
+});
+
+/*export const initSSR = (listId, props) => (dispatch, getState, {http, clientStorage}) => {
+    const state = getState()
+    const stateList = _get(state, ['list', 'lists', listId]);
+    const list = {
+        ...createList(listId, props, clientStorage),
+        ...stateList
+    };
+    if ((!list.action && list.action !== '') || list.items) {
+        if (!stateList) {
+            return dispatch({
+                ...list,
+                type: LIST_INIT
+            });
+        }
+        return;
+    }
+    const onFetch = list.onFetch || httpFetchHandler;
+    return dispatch(
+        onFetch(list, VALUES, http).then(data => ({
+            ...list,
+            ...data,
+            type: LIST_INIT
+        }))
+    );
+};*/
+
+/**
+ * Update query values and send request
+ * @param listId
+ * @param query
+ */
+export const listFetch = (listId: string, query: any = {}) => (dispatch, getState, components) => {
+    const state = getState();
+
+    const list = _get(state, ['list', 'lists', listId]) as IList;
+
+    if (!list || (list.isRemote && !list.action && list.action !== '')) {
+        return [];
+    }
+
+    const toDispatch = [];
+    const formValues = formSelector(state, list.formId, ({values}) => values) || {};
+    const onFetch = list.onFetch || (list.isRemote ? httpFetchHandler : localFetchHandler);
+
+    // Change query
+    Object.keys(query || {}).forEach(key => {
+        formValues[key] = query[key];
+        toDispatch.push(formChange(list.formId, key, query[key]));
+    });
+
+    if (list.isRemote) {
+        // Set `Loading...`
+        toDispatch.push({
+            listId,
+            type: LIST_BEFORE_FETCH,
+        });
+    }
+
+    // Send request
+    toDispatch.push(
+        Promise.resolve(onFetch(list, formValues, components)).then(data => {
+            // Skip on empty
+            if (!data) {
+                return [];
+            }
+
+            // Check list is not destroy
+            if (!getState().list.lists[listId]) {
+                return [];
+            }
+
+            if (_isArray(data)) {
+                data = {
+                    items: data,
+                    total: data.length,
+                    meta: null,
+                };
+            }
+
+            return [
+                // Check has errors
+                formSetErrors(list.formId, data.errors || null),
+                {
+                    items: data.items || [],
+                    total: data.total || null,
+                    meta: data.meta || null,
+                    page: formValues[list.pageAttribute],
+                    pageSize: formValues[list.pageSizeAttribute],
+                    listId,
+                    type: LIST_AFTER_FETCH,
+                },
+            ];
+        }),
+    );
+
+    return dispatch(toDispatch);
+};
+
+/**
+ * Lazy update query values and send request
+ * @param listId
+ * @param query
+ */
+export const listLazyFetch = (listId: string, query: any = {}) => dispatch => {
+    if (lazyTimers[listId]) {
+        clearTimeout(lazyTimers[listId]);
+    }
+    lazyTimers[listId] = setTimeout(() => dispatch(listFetch(listId, query)), 200);
+};
+
+/**
+ * Send request with same query
+ * @param listId
+ */
+export const listRefresh = (listId: string) => listFetch(listId);
+
+/**
+ * Destroy list (remove from redux state)
+ * @param listId
+ */
+export const listDestroy = (listId: string) => {
+    if (lazyTimers[listId]) {
+        clearTimeout(lazyTimers[listId]);
+    }
+    return {
+        listId,
+        type: LIST_DESTROY,
+    };
+};
+
+export const add = (listId, item, prepend = false) => ({
+    item,
+    prepend,
+    listId,
+    type: LIST_ITEM_ADD,
+});
+export const update = (listId, item, condition) => ({
+    item,
+    condition,
+    listId,
+    type: LIST_ITEM_UPDATE,
+});
+export const toggleItem = (listId, itemId) => ({
+    listId,
+    itemId,
+    type: LIST_TOGGLE_ITEM,
+});
+export const toggleAll = listId => ({
+    listId,
+    type: LIST_TOGGLE_ALL,
+});
+
+// TODO local storage save?
+/*export const setLayoutName = (listId, layoutName) => (
+    dispatch,
+    getState,
+    {clientStorage}
+) => {
+    clientStorage.set(STORAGE_LAYOUT_KEY_PREFIX + listId, layoutName);
+    return dispatch({
+        listId,
+        layoutName,
+        type: LIST_SET_LAYOUT
+    });
+};
+*/

package/src/actions/modal.ts

@@ -0,0 +1,34 @@
+import _uniqueId from 'lodash-es/uniqueId';
+import {IModalProps} from '../ui/modal/Modal/Modal';
+
+export const MODAL_OPEN = '@modal/open';
+export const MODAL_MARK_CLOSING = '@modal/markClosing';
+export const MODAL_CLOSE = '@modal/close';
+
+export const openModal = (modal, props: IModalProps = {}) => {
+    let id = props ? props.modalId : null;
+    if (!id) {
+        modal._modalId = modal._modalId || _uniqueId('modal');
+        id = modal._modalId;
+    }
+
+    return {
+        type: MODAL_OPEN,
+        id,
+        modal,
+        group: props.modalGroup || null,
+        props,
+    };
+};
+
+export const modalMarkClosing = (id, group = null) => ({
+    type: MODAL_MARK_CLOSING,
+    id,
+    group,
+});
+
+export const closeModal = (id, group = null) => ({
+    type: MODAL_CLOSE,
+    id,
+    group,
+});

package/src/actions/notifications.ts

@@ -0,0 +1,39 @@
+import _uniqueId from 'lodash-es/uniqueId';
+
+export const NOTIFICATIONS_SHOW = 'NOTIFICATIONS_SHOW';
+export const NOTIFICATIONS_CLOSING = 'NOTIFICATIONS_CLOSING';
+export const NOTIFICATIONS_CLOSE = 'NOTIFICATIONS_CLOSE';
+
+export interface IShowNotificationParameters {
+    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' | string;
+    timeOut?: number;
+}
+
+const showNotificationDefaults: IShowNotificationParameters = {
+    position: 'top-right',
+    timeOut: 10000,
+};
+
+export const closeNotification = (id = null) => ({
+    type: NOTIFICATIONS_CLOSE,
+    id,
+});
+
+export const showNotification = (
+    message: string,
+    level: ColorName = null,
+    params: IShowNotificationParameters = showNotificationDefaults,
+) => dispatch => {
+    const {position, timeOut} = params as IShowNotificationParameters;
+    const id = _uniqueId();
+
+    dispatch({type: NOTIFICATIONS_SHOW, id, message, level: level || 'success', position});
+
+    if (timeOut > 0) {
+        setTimeout(() => dispatch(closeNotification(id)), timeOut);
+    }
+};
+
+export const setFlashes = flashes => Object.keys(flashes).map((level: string) => []
+    .concat(flashes[level] || [])
+    .map(message => showNotification(message, level)));

package/src/actions/router.ts

@@ -0,0 +1,42 @@
+import {push, replace} from 'connected-react-router';
+
+export const ROUTER_INIT_ROUTES = 'ROUTER_INIT_ROUTES';
+export const ROUTER_SET_PARAMS = 'ROUTER_SET_PARAMS';
+export const ROUTER_SET_DATA = 'ROUTER_SET_DATA';
+
+export const initRoutes = routes => ({
+    type: ROUTER_INIT_ROUTES,
+    routes,
+});
+
+export const initParams = params => ({
+    type: ROUTER_SET_PARAMS,
+    params,
+});
+
+export const goToRoute = (routeId, params = null, isReplace = false) => (dispatch, getState, {store}) => {
+    if (process.env.PLATFORM === 'mobile') {
+        store.navigationNative.navigate(routeId, params);
+        return [];
+    }
+
+    const getRouteProp = require('../reducers/router').getRouteProp;
+    const buildUrl = require('../reducers/router').buildUrl;
+    const path = getRouteProp(getState(), routeId, 'path');
+    const method = isReplace ? replace : push;
+    return dispatch(method(buildUrl(path, params)));
+};
+
+export const goToParent = (level = 1) => (dispatch, getState) => {
+    const getRouteParent = require('../reducers/router').getRouteParent;
+    const getRouteParams = require('../reducers/router').getRouteParams;
+    const state = getState();
+    const params = getRouteParams(state);
+    const parentRoute = getRouteParent(state, null, level);
+    const parentRouteId = parentRoute ? parentRoute.id : null;
+    const parentRouteParams = parentRoute ? params : null;
+    if (parentRouteId) {
+        return dispatch(goToRoute(parentRouteId, parentRouteParams));
+    }
+    return [];
+};

package/src/actions/screen.ts

@@ -0,0 +1,28 @@
+export const SCREEN_SET_WIDTH = 'SCREEN_SET_WIDTH';
+export const SCREEN_SET_MEDIA = 'SCREEN_SET_MEDIA';
+
+export const setMedia = media => ({
+    type: SCREEN_SET_MEDIA,
+    media,
+});
+
+let timer = null;
+export const setWidth = (width, skipTimeout = false) => dispatch => {
+    if (timer) {
+        clearTimeout(timer);
+    }
+    if (skipTimeout) {
+        return dispatch({
+            type: SCREEN_SET_WIDTH,
+            width,
+        });
+    }
+    timer = setTimeout(() => {
+        dispatch({
+            type: SCREEN_SET_WIDTH,
+            width,
+        });
+    }, 100);
+
+    return null;
+};

package/src/base/Enum.ts

@@ -0,0 +1,28 @@
+export default class Enum {
+    static getLabels() {
+        return {};
+    }
+
+    static getKeys() {
+        return Object.keys(this.getLabels());
+    }
+
+    static getLabel(id) {
+        return this.getLabels()[id] || '';
+    }
+
+    static getCssClasses() {
+        return {};
+    }
+
+    static getCssClass(id) {
+        return this.getCssClasses()[id] || '';
+    }
+
+    static getDropdownItems() {
+        return Object.entries(this.getLabels()).map(([id, label]) => ({
+            label,
+            id,
+        }));
+    }
+}

package/src/components/ApiComponent.tsx

@@ -0,0 +1,40 @@
+export interface IApiSendConfig {
+    method?: HttpMethod,
+    url?: string,
+    params?: Record<string, unknown>,
+}
+
+export type IApiMethod = (api, params?: Record<string, unknown>, options?: Record<string, unknown>) => Promise<any>
+
+export interface IApiRest {
+    index?: IApiMethod,
+    create?: IApiMethod,
+    update?: IApiMethod,
+    delete?: IApiMethod,
+    view?: IApiMethod,
+    [key: string]: IApiMethod,
+}
+
+/**
+ * Http Component
+ * Обертка над Axios для запросов на бекенд. Поддерживает токен авторизации, CSRF и обработку ошибок.
+ */
+export default class ApiComponent {
+    _components: any;
+
+    constructor(components) {
+        this._components = components;
+    }
+
+    async send(config: IApiSendConfig) {
+        const method = config.method || 'get';
+        const params = {...config.params};
+        const url = config.url.replace(/{([0-9a-z_]+)}/ig, (str, key: string) => {
+            const value: any = params[key];
+            delete params[key];
+            return value;
+        });
+
+        return this._components.http.send(method, url, params);
+    }
+}

package/src/components/ClientStorageComponent.ts

@@ -0,0 +1,136 @@
+import * as cookie from 'js-cookie';
+import moment from 'moment';
+
+/**
+ * Client Storage Component
+ * Слой хранения данных в браузере (cookie, local/session storage) или ReactNative
+ */
+export default class ClientStorageComponent {
+    STORAGE_COOKIE: string;
+
+    STORAGE_LOCAL: any;
+
+    STORAGE_SESSION: any;
+
+    localStorageAvailable: boolean;
+
+    sessionStorageAvailable: boolean;
+
+    domain?: string;
+
+    private _ssrCookie: Record<string, any>
+
+    constructor(components, config) {
+        this.localStorageAvailable = !process.env.IS_SSR;
+        this.sessionStorageAvailable = !process.env.IS_SSR;
+        this.STORAGE_SESSION = 'session';
+        this.STORAGE_LOCAL = 'local';
+        this.STORAGE_COOKIE = 'cookie';
+        if (this.localStorageAvailable) {
+            try {
+                window.localStorage.setItem('localStorageAvailable', '1');
+                this.localStorageAvailable = window.localStorage.getItem('localStorageAvailable') === '1';
+                window.localStorage.removeItem('localStorageAvailable');
+            } catch (e) {
+                this.localStorageAvailable = false;
+            }
+        }
+        if (this.sessionStorageAvailable) {
+            try {
+                window.sessionStorage.setItem('sessionStorageAvailable', '1');
+                this.sessionStorageAvailable = window.localStorage.getItem('sessionStorageAvailable') === '1';
+                window.sessionStorage.removeItem('sessionStorageAvailable');
+            } catch (e) {
+                this.sessionStorageAvailable = false;
+            }
+        }
+
+        this.domain = config?.domain || null;
+        this._ssrCookie = config?.ssrCookie;
+    }
+
+    /**
+     * @param {string} name
+     * @param {string} [storageName]
+     * @returns {*}
+     */
+    get(name, storageName) {
+        storageName = storageName || this.STORAGE_LOCAL;
+        if (this.localStorageAvailable && storageName === this.STORAGE_LOCAL) {
+            return window.localStorage.getItem(name);
+        } if (
+            this.sessionStorageAvailable
+            && storageName === this.STORAGE_SESSION
+        ) {
+            return window.sessionStorage.getItem(name);
+        }
+        return process.env.IS_SSR ? this._ssrCookie.get(name) : cookie.get(name);
+    }
+
+    /**
+     * @param {string} name
+     * @param {*} value
+     * @param {string} [storageName]
+     * @param {number|null} [expires]
+     */
+    set(name, value, storageName, expires = null) {
+        storageName = storageName || this.STORAGE_LOCAL;
+        if (this.localStorageAvailable && storageName === this.STORAGE_LOCAL) {
+            window.localStorage.setItem(name, value);
+        } else if (
+            this.sessionStorageAvailable
+            && storageName === this.STORAGE_SESSION
+        ) {
+            window.sessionStorage.setItem(name, value);
+        } else {
+            const options = {
+                expires,
+                domain: this._getDomain(),
+            };
+
+            if (expires && process.env.IS_SSR) {
+                options.expires = moment().add(options.expires).utc().toDate();
+            }
+
+            process.env.IS_SSR ? this._ssrCookie.set(name, value, options) : cookie.set(name, value, options);
+        }
+    }
+
+    /**
+     *
+     * @param {string} name
+     * @param {string} [storageName]
+     */
+    remove(name, storageName) {
+        storageName = storageName || this.STORAGE_LOCAL;
+        if (this.localStorageAvailable && storageName === this.STORAGE_LOCAL) {
+            window.localStorage.removeItem(name);
+        } else if (
+            this.sessionStorageAvailable
+            && storageName === this.STORAGE_SESSION
+        ) {
+            window.sessionStorage.removeItem(name);
+        } else {
+            const options = {
+                domain: this._getDomain(),
+            };
+            process.env.IS_SSR ? this._ssrCookie.remove(name, options) : cookie.remove(name, options);
+        }
+    }
+
+    _getDomain() {
+        if (this.domain) {
+            return this.domain;
+        }
+
+        const host = (typeof window.location !== 'undefined' && window.location.hostname) || '';
+        return (
+            (!/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/.test(host)
+                && host
+                    .split('.')
+                    .slice(-2)
+                    .join('.'))
+            || host
+        );
+    }
+}