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

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import Nav from '../Nav';
+
+export default () => (
+    <>
+        <div className='row mb-4'>
+            <div className='col'>
+                <nav className='navbar navbar-expand-lg navbar-light bg-light'>
+                    <div className='container'>
+                        <a className='navbar-brand' href='#'>Navbar</a>
+                        <Nav
+                            layout='navbar'
+                            items={[
+                                {
+                                    id: 1,
+                                    label: 'One'
+                                },
+                                {
+                                    id: 2,
+                                    label: 'Two'
+                                },
+                                {
+                                    id: 3,
+                                    label: 'Three'
+                                },
+                            ]}
+                        />
+                    </div>
+                </nav>
+            </div>
+        </div>
+    </>
+);

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/Nav/index.ts

@@ -0,0 +1,2 @@
+import Nav from './Nav';
+export default Nav;

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/index.ts

@@ -0,0 +1,2 @@
+import Router from './Router';
+export default Router;

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