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

package/ui/nav/Nav/demo/tabs.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import Nav from '../Nav';
+import {items} from './buttons';
+
+export default () => (
+    <>
+        <h6>
+            Tabs
+        </h6>
+        <Nav layout={'tabs'} items={items}/>
+    </>
+);

package/ui/nav/Router/Router.tsx

@@ -0,0 +1,235 @@
+import * as React from 'react';
+import {Route, Switch, Redirect, StaticRouter} from 'react-router';
+import {HashRouter} from 'react-router-dom';
+import {connect} from 'react-redux';
+import {ConnectedRouter} from 'connected-react-router';
+import _get from 'lodash-es/get';
+import _isBoolean from 'lodash-es/isBoolean';
+import _isArray from 'lodash-es/isArray';
+import _isObject from 'lodash-es/isObject';
+import {components, fetch} from '../../../hoc';
+import navigationHoc, {INavigationHocInputProps, treeToList} from './navigationHoc';
+import {getActiveRouteIds, getRouteId, getRoutesMap} from '../../../reducers/router';
+import {SsrProviderContext} from './SsrProvider';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IFetchHocConfig} from '../../../hoc/fetch';
+
+export interface IRouteItem {
+    id?: string,
+    label?: string,
+    title?: string,
+    path?: string,
+    exact?: boolean,
+    redirectTo?: boolean | string,
+    component?: any,
+    componentProps?: any,
+    layout?: string,
+    isVisible?: boolean,
+    isNavVisible?: boolean,
+    models?: string | string[],
+    enums?: string | string[],
+    roles?: string[],
+    fetch?: IFetchHocConfig,
+    items?: IRouteItem[] | {[key: string]: IRouteItem};
+    [key: string]: any,
+}
+
+export interface IRouterProps extends INavigationHocInputProps {
+    wrapperView?: any;
+    wrapperProps?: any;
+    routes?: IRouteItem[] | {[key: string]: IRouteItem};
+    pathname?: string;
+    routeId?: string;
+    activeRouteIds?: string[];
+    autoScrollTop?: boolean;
+    history?: any;
+    store?: any;
+    basename?: any;
+    activePath?: string;
+}
+
+interface IRouterPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+
+}
+
+type RouterState = {
+    routes?: any,
+    map?: any
+};
+@navigationHoc()
+@connect(state => ({
+    pathname: _get(state, 'router.location.pathname'),
+    routeId: getRouteId(state),
+    activePath: state.router?.location?.pathname,
+    activeRouteIds: getActiveRouteIds(state),
+}))
+@components('store')
+export default class Router extends React.Component<IRouterProps & IRouterPrivateProps, RouterState> {
+    static defaultProps = {
+        autoScrollTop: true
+    };
+
+    constructor(props) {
+        super(props);
+        this._renderItem = this._renderItem.bind(this);
+        this.state = {
+            routes: treeToList(this.props.routes),
+        };
+    }
+
+    shouldComponentUpdate(nextProps) {
+        // Do not re-render component, routes tree is static
+        return false;
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        if (this.props.routes !== nextProps.routes) {
+            this.setState({routes: nextProps.routes});
+        }
+        // Fix end slash on switch to base route
+        if (
+            window.history &&
+            nextProps.pathname === '/' &&
+            location.pathname.match(/\/$/)
+        ) {
+            window.history.replaceState({}, '', this.props.store.history.basename);
+        }
+        if (
+            this.props.autoScrollTop &&
+            this.props.routeId &&
+            nextProps.routeId &&
+            this.props.routeId !== nextProps.routeId
+        ) {
+            window.scrollTo(0, 0);
+        }
+    }
+
+    render() {
+        // TODO double render!!..
+        if (process.env.IS_SSR) {
+            return (
+                <SsrProviderContext.Consumer>
+                  {context => (
+                      <StaticRouter
+                          location={this.props.store.history.location}
+                          context={context.staticContext}
+                      >
+                        {this.renderContent()}
+                      </StaticRouter>
+                  )}
+                </SsrProviderContext.Consumer>
+            );
+        } else if (location.protocol === 'file:') {
+            return (
+                <HashRouter>
+                    {this.renderContent()}
+                </HashRouter>
+            );
+        } else {
+            return (
+                <ConnectedRouter history={this.props.store.history}>
+                    {this.renderContent()}
+                </ConnectedRouter>
+            );
+        }
+    }
+
+    renderContent() {
+        const WrapperComponent = this.props.wrapperView;
+        const routes = (
+            <Switch>
+                {this.state.routes.map((route, index) => (
+                    <Route
+                        key={index}
+                        render={props => this._renderItem(route, props)}
+                        {...route}
+                        component={null}
+                    />
+                ))}
+                {this.props.children}
+            </Switch>
+        );
+        if (WrapperComponent) {
+            return (
+                <WrapperComponent {...this.props.wrapperProps}>
+                    {routes}
+                </WrapperComponent>
+            );
+        }
+        return routes;
+    }
+
+    _renderItem(route: IRouteItem, props) {
+        let children = null;
+        this.props.activeRouteIds.find(activeRouteId => {
+            if (activeRouteId === route.id) {
+                // Stop
+                return true;
+            }
+
+            const activeRoute = this.state.routes.find(r => r.id === activeRouteId);
+            children = this._renderComponent(activeRoute, {...props, children}) || children;
+            return false;
+        });
+
+        const result = this._renderComponent(route, {...props, children});
+        if (!result) {
+            console.error('Not found component for route:', route)
+        }
+        return result;
+    }
+
+    _renderComponent(route: IRouteItem, props) {
+        if (route.redirectTo && route.path === this.props.activePath) {
+            const to = this._findRedirectPathRecursive(route);
+            if (to === null) {
+                console.error('Not found path for redirect in route:', route)
+                return null;
+            }
+
+            // Check already redirected
+            if (this.props.activePath !== to) {
+                return (
+                    <Redirect
+                        {...props}
+                        to={to}
+                        {...route.componentProps}
+                    />
+                );
+            }
+        }
+
+        if (!route.component) {
+            return null;
+        }
+
+        let Component = route.component;
+        if (route.fetch) {
+            Component = fetch(route.fetch)(Component);
+        }
+        return (
+            <Component
+                {...props}
+                {...route.componentProps}
+            />
+        );
+    }
+
+    _findRedirectPathRecursive(route: IRouteItem) {
+        if (!route) {
+            return null;
+        }
+
+        if (typeof route.redirectTo === 'boolean') {
+            const key = _isObject(route.items) && !_isArray(route.items) ? Object.keys(route.items)[0] : '0';
+            return this._findRedirectPathRecursive(_get(route, ['items', key]));
+        } else if (typeof route.redirectTo === 'string') {
+            return route.redirectTo;
+        }
+
+        return route.path || route.path === ''
+            ? route.path
+            : null;
+    }
+}

package/ui/nav/Router/SsrProvider.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {Provider} from 'react-redux';
+
+interface ISsrProviderContext {
+    history?: any;
+    staticContext?: any;
+}
+
+export const SsrProviderContext = React.createContext<ISsrProviderContext>(null);
+
+interface ISsrProviderProps {
+    history?: any;
+    store?: any;
+    staticContext?: any;
+}
+
+export default class SsrProvider extends React.PureComponent<ISsrProviderProps> {
+
+    render() {
+        return (
+            <SsrProviderContext.Provider
+                value={{
+                    history: this.props.history,
+                    staticContext: this.props.staticContext
+                }}>
+                <Provider store={this.props.store}>
+                    {this.props.children}
+                </Provider>
+            </SsrProviderContext.Provider>
+        );
+    }
+}

package/ui/nav/Router/navigationHoc.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import _isArray from 'lodash-es/isArray';
+import _isObject from 'lodash-es/isObject';
+import {getRoute} from '../../../reducers/router';
+import {isRouterInitialized} from '../../../reducers/router';
+import {initRoutes, initParams} from '../../../actions/router';
+import {IConnectHocOutput} from '../../../hoc/connect';
+
+export interface INavigationHocInputProps {
+    defaultRoles?: string[];
+}
+
+interface INavigationHocPrivateProps extends INavigationHocInputProps, IConnectHocOutput {
+    /*
+        isInitialized: PropTypes.bool
+     */
+    isRouterInitialized?: boolean,
+    routes?: boolean,
+    route?: boolean,
+}
+
+const stateMap = state => ({
+    isRouterInitialized: isRouterInitialized(state),
+    route: getRoute(state)
+});
+export const walkRoutesRecursive = (item, defaultItem: any = {}, parentItem: any = {}) => {
+    const normalizedItem = {
+        ...defaultItem,
+        ...item,
+        id: item.id,
+        exact: item.exact,
+        path: item.path && (item.path.indexOf('/') !== 0 && parentItem.path ? parentItem.path + '/': '') + item.path,
+        label: item.label,
+        title: item.title,
+        isVisible: typeof item.isVisible !== 'undefined'
+            ? item.isVisible
+            : (typeof parentItem.isVisible !== 'undefined'
+                    ? parentItem.isVisible
+                    : defaultItem.isVisible
+            ),
+        isNavVisible: typeof item.isNavVisible !== 'undefined'
+            ? item.isNavVisible
+            : (typeof parentItem.isNavVisible !== 'undefined'
+                    ? parentItem.isNavVisible
+                    : defaultItem.isNavVisible
+            ),
+        layout: item.layout || parentItem.layout || defaultItem.layout || null,
+        roles: item.roles || parentItem.roles || defaultItem.roles || null,
+        component: null,
+        componentProps: null,
+    };
+
+    let items = null;
+    if (_isArray(item.items)) {
+        items = item.items.map(i => walkRoutesRecursive(i, defaultItem, normalizedItem));
+    } else if (_isObject(item.items)) {
+        items = Object.keys(item.items).map(id =>
+            walkRoutesRecursive({...item.items[id], id}, defaultItem, normalizedItem)
+        );
+    }
+    return {
+        ...normalizedItem,
+        items,
+    };
+};
+export const treeToList = (item, isRoot = true) => {
+    if (_isArray(item)) {
+        return item;
+    }
+    if (isRoot && !item.id) {
+        item.id = 'root';
+    }
+    let items = item.path ? [item] : [];
+    if (_isArray(item.items)) {
+        item.items.forEach(sub => {
+            items = items.concat(treeToList(sub, false));
+        });
+    } else if (_isObject(item.items)) {
+        Object.keys(item.items).map(id => {
+            items = items.concat(
+                treeToList(
+                    {
+                        ...item.items[id],
+                        id
+                    },
+                    false
+                )
+            );
+        });
+    }
+
+    return items;
+};
+export default (routes = null): any => WrappedComponent =>
+    connect(stateMap)(
+        class NavigationHoc extends React.PureComponent<INavigationHocPrivateProps> {
+            static WrappedComponent = WrappedComponent;
+
+            UNSAFE_componentWillMount() {
+                const routesTree =
+                    routes || (!_isArray(this.props.routes) ? this.props.routes : null);
+                if (routesTree) {
+                    this.props.dispatch(
+                        initRoutes(
+                            walkRoutesRecursive(
+                                {id: 'root', ...routesTree},
+                                this.props.defaultRoles ? {roles: this.props.defaultRoles} : undefined
+                            )
+                        )
+                    );
+                }
+                this._initParams(this.props);
+            }
+
+            UNSAFE_componentWillReceiveProps(nextProps) {
+                if (!this.props.route && nextProps.route) {
+                    this._initParams(nextProps);
+                }
+            }
+
+            render() {
+                if (!_isArray(this.props.routes) && !this.props.isRouterInitialized) {
+                    return null;
+                }
+                return <WrappedComponent {...this.props} />;
+            }
+
+            _initParams(props) {
+                if (props.route) {
+                    this.props.dispatch(initParams(props.route.params));
+                }
+            }
+        }
+    )

package/ui/nav/Tree/Tree.tsx

@@ -0,0 +1,279 @@
+import * as React from 'react';
+import _isString from 'lodash-es/isString';
+import _omit from 'lodash-es/omit';
+import _isEqual from 'lodash-es/isEqual';
+import _keys from 'lodash-es/keys';
+import _intersection from 'lodash-es/intersection';
+import {components, connect, normalize} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {getActiveRouteIds, getNavItems, getRouteId, getRouterParams, IRoute} from '../../../reducers/router';
+import {IThemeHocOutput} from '../../../hoc/theme';
+import {IRouteItem} from '../Router/Router';
+import {IButtonProps} from '../../form/Button/Button';
+import {getUser} from '@steroidsjs/core/reducers/auth';
+
+export interface ITreeItem extends IButtonProps {
+    id?: string | number,
+    items?: any[],
+    visible?: boolean
+}
+
+export interface ITreeProps {
+    id?: string;
+    items?: ITreeItem[] | string;
+    level?: number;
+    itemsKey?: string;
+    selectedItemId?: string;
+    className?: CssClassName;
+    view?: any;
+    autoOpenLevels?: number;
+    onItemClick?: (...args: any[]) => any;
+    autoSave?: boolean;
+    [key: string]: any;
+}
+
+export interface ITreeViewProps extends ITreeProps {
+    items: (ITreeItem & {
+        uniqId: string,
+        className: CssClassName,
+        index: number,
+        level: number,
+        isOpened: boolean,
+        isSelected: boolean,
+        hasItems: boolean,
+        onClick: (e: Event | React.MouseEvent | any) => void,
+    })[],
+    levelPadding?: number
+}
+
+interface ITreePrivateProps extends IComponentsHocOutput, IThemeHocOutput {
+    activeRouteIds?: string[],
+    routerParams?: object,
+    routes?: IRouteItem[],
+    _items?: ITreeItem[] | string;
+}
+
+interface TreeState {
+    opened?: any,
+    selectedUniqId?: any,
+    activeTab?: any
+}
+
+@connect(
+    (state, props) => ({
+        routes: _isString(props.items) ? getNavItems(state, props.items) : null,
+        selectedItemId: _isString(props.items) ? getRouteId(state) : props.selectedItemId,
+        activeRouteIds: getActiveRouteIds(state),
+        routerParams: getRouterParams(state),
+        user: getUser(state),
+    })
+)
+@normalize(
+    {
+        fromKey: 'items',
+        toKey: '_items',
+        normalizer: (items, props) => {
+            if (props.routes) {
+                const routeToItem = (route: IRouteItem) => {
+                    const items = (
+                        Array.isArray(route.items)
+                            ? route.items.map(r => routeToItem(r))
+                            : Object.keys(route.items || {}).map(id => routeToItem(route.items[id]))
+                    ).filter(r => r.visible);
+
+                    const userRoles = [].concat(props.user?.roles || props.user?.role || []);
+                    const hasAccess = _intersection(route.roles, userRoles).length > 0;
+
+                    return {
+                        id: route.id,
+                        label: route.label || route.title,
+                        visible: hasAccess && route.isNavVisible !== false,
+                        toRoute: items.length === 0 ? route.id : null,
+                        toRouteParams: items.length === 0 ? props.routerParams : null,
+                        items,
+                    };
+                };
+                return props.routes.map(route => routeToItem(route)).filter(r => r.visible);
+            }
+            return items || [];
+        },
+    },
+)
+@components('ui', 'clientStorage')
+export default class Tree extends React.PureComponent<ITreeProps & ITreePrivateProps, TreeState> {
+    static STORAGE_KEY_PREFIX = 'tree_';
+    static defaultProps = {
+        itemsKey: 'items',
+        autoOpenLevels: 1,
+        autoSave: false,
+        level: 0,
+    };
+
+    constructor(props) {
+        super(props);
+        this._onItemClick = this._onItemClick.bind(this);
+        this.state = this._initState();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (
+            !_isEqual(prevProps._items, this.props._items) ||
+            prevProps.selectedItemId !== this.props.selectedItemId
+        ) {
+            this.setState(this._initState());
+        }
+    }
+
+    render() {
+        const TreeView = this.props.view || this.props.ui.getView('nav.TreeView');
+        return (
+            <TreeView
+                {...this.props}
+                items={this._getItems(this.props._items)}
+            />
+        );
+    }
+
+    _initState() {
+        // Initial opened items
+        const key = Tree.STORAGE_KEY_PREFIX + this.props.id;
+        const opened =
+            !this.state && this.props.clientStorage.get(key) && this.props.autoSave
+                ? JSON.parse(this.props.clientStorage.get(key))
+                : this._autoOpen(this.props._items);
+        const selectedItem = this._findChildById(
+            this.props._items,
+            this.props.selectedItemId
+        );
+        return {
+            opened,
+            selectedUniqId: selectedItem ? selectedItem.uniqId : null
+        };
+    }
+
+    _getItems(items, parentId = '', level = 0) {
+        let result = [];
+        if (this.props.level && level == this.props.level) {
+            return [];
+        }
+
+        (items || []).forEach((item, index) => {
+            const uniqId = this._resolveId(item, index, parentId);
+            const isOpened = !!this.state.opened[uniqId];
+            let hasItems = item[this.props.itemsKey] && item[this.props.itemsKey].length > 0;
+
+            if (this.props.level && (level == this.props.level - 1)) {
+                hasItems = false;
+            }
+
+            result.push({
+                ...item,
+                uniqId,
+                index,
+                level,
+                isOpened,
+                isSelected: this.state.selectedUniqId === uniqId
+                    || (
+                        this.props.activeRouteIds.includes(item.toRoute)
+                        && _isEqual(item.toRouteParams || {}, _omit(this.props.routerParams, _keys(item.toRouteParams)))
+                    ),
+                hasItems,
+                onClick: e => this._onItemClick(e, uniqId, item)
+            });
+            if (isOpened) {
+                result = result.concat(
+                    this._getItems(item[this.props.itemsKey], uniqId, level + 1)
+                ).filter(Boolean);
+            }
+        });
+        return result;
+    }
+
+    _autoOpen(items, parentId = '', level = 1) {
+        let opened = {};
+
+        (items || []).forEach((item, index) => {
+            const uniqId = this._resolveId(item, index, parentId);
+            if (this.props.autoOpenLevels >= level) {
+                opened[uniqId] = true;
+            }
+
+            if (this.props.selectedItemId === item.id) {
+                opened[uniqId] = true;
+            }
+
+            if (this.props.selectedItemId) {
+                const finedItem = this._findChildById(
+                    item[this.props.itemsKey],
+                    this.props.selectedItemId
+                );
+                if (finedItem) {
+                    opened[uniqId] = true;
+                }
+            }
+            opened = {
+                ...opened,
+                ...this._autoOpen(item[this.props.itemsKey], uniqId, level + 1)
+            };
+        });
+        return opened;
+    }
+
+    _findChildById(items, itemId, parentId = '', level = 1) {
+        let finedItem = null;
+        if (_isString(items)) {
+            return null;
+        }
+
+        (items || []).forEach((item, index) => {
+            const uniqId = this._resolveId(item, index, parentId);
+            if (!finedItem && (item.id === itemId || uniqId === itemId)) {
+                finedItem = {
+                    ...item,
+                    uniqId,
+                    level
+                };
+            }
+            if (!finedItem) {
+                finedItem = this._findChildById(
+                    item[this.props.itemsKey],
+                    itemId,
+                    uniqId,
+                    level + 1
+                );
+            }
+        });
+        return finedItem;
+    }
+
+    _resolveId(item, index, parentId) {
+        return (parentId ? parentId + '.' : '') + String(item.id || index);
+    }
+
+    _onItemClick(e, uniqId, item) {
+        e.preventDefault();
+        if (this.props.onItemClick) {
+            this.props.onItemClick(e, item);
+        }
+        const newState = {
+            selectedUniqId: this.state.selectedUniqId === uniqId ? null : uniqId
+        };
+        if (item.items) {
+            this.setState(
+                {
+                    ...newState,
+                    opened: {
+                        ...this.state.opened,
+                        [uniqId]: !this.state.opened[uniqId]
+                    }
+                },
+                () => {
+                    const key = Tree.STORAGE_KEY_PREFIX + this.props.id;
+                    this.props.clientStorage.set(key, JSON.stringify(this.state.opened));
+                }
+            );
+        } else {
+            this.setState(newState);
+        }
+    }
+}