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

package/ui/list/index.ts

@@ -0,0 +1,7 @@
+import Empty from './Empty';
+import List from './List';
+import Grid from './Grid';
+import Pagination from './Pagination';
+import PaginationSize from './PaginationSize';
+import Accordion from './Accordion';
+export { Empty, List, Grid, Pagination, PaginationSize, Accordion };

package/ui/modal/Modal/Modal.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IControlItem} from '../../nav/Controls/Controls';
+
+export interface IModalProps {
+    index?: number,
+    onClose?: (...args: any[]) => any;
+    title?: string,
+    size?: Size,
+    view?: any;
+    className?: CssClassName;
+    isClosing?: boolean;
+    group?: string;
+    component?: any;
+    componentProps?: any;
+    controls?: IControlItem[],
+    [key: string]: any,
+}
+
+export interface IModalViewProps extends IModalProps {
+    isClosing?: boolean,
+}
+
+interface IModalPrivateProps extends IComponentsHocOutput {
+
+}
+
+@components('ui')
+export default class Modal extends React.PureComponent<IModalProps & IModalPrivateProps> {
+
+    static defaultProps = {
+        size: 'md',
+    };
+
+    render() {
+        const ModalView = this.props.view || this.props.ui.getView('modal.ModalView');
+        const ContentComponent = this.props.component;
+        const {componentProps, ...props} = this.props;
+
+        return (
+            <ModalView {...this.props}>
+                {ContentComponent && (
+                    <ContentComponent
+                        {...props}
+                        {...componentProps}
+                    />
+                ) || (
+                    this.props.children
+                )}
+            </ModalView>
+        );
+    }
+
+}

package/ui/modal/Modal/demo/basic.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import Button from '../../../form/Button';
+import ModalPortal from '../../ModalPortal';
+import {openModal} from '../../../../actions/modal';
+import {connect} from '../../../../hoc';
+import {IConnectHocOutput} from '../../../../hoc/connect';
+import Modal from '../Modal';
+
+interface IMyModalProps {
+    text: string;
+    isClosing: boolean;
+    onClose: (...args: any[]) => any;
+}
+
+class MyModal extends React.Component<IMyModalProps> {
+    render() {
+        return (
+            <Modal
+                title='My Modal'
+                isClosing={this.props.isClosing}
+                onClose={this.props.onClose}
+            >
+                {this.props.text}
+            </Modal>
+        );
+    }
+}
+
+@connect()
+export default class ModalDemo extends React.PureComponent<IConnectHocOutput> {
+
+    render() {
+        return (
+            <>
+                <ModalPortal/>
+                <Button
+                    label='Open modal'
+                    onClick={() => this.props.dispatch(
+                        openModal(
+                            MyModal,
+                            {text: 'demo text'} as IMyModalProps
+                        )
+                    )}
+                />
+            </>
+        );
+    }
+
+}

package/ui/modal/ModalPortal/ModalPortal.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import {closeModal, modalMarkClosing} from '../../../actions/modal';
+import {getOpened, MODAL_DEFAULT_GROUP} from '../../../reducers/modal';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IModalProps} from '../Modal/Modal';
+
+export interface IModalPortalProps {
+    animationDelayMc?: number,
+    group?: string,
+}
+
+interface IModalPortalPrivateProps extends IConnectHocOutput {
+    opened?: {
+        modal?: any,
+        props?: any,
+    }[];
+}
+
+const defaultProps = {
+    group: MODAL_DEFAULT_GROUP,
+    animationDelayMc: 300,
+};
+
+@connect(
+    (state, props) => ({
+        opened: getOpened(state, props.group || defaultProps.group),
+    })
+)
+export default class ModalPortal extends React.PureComponent<IModalPortalProps & IModalPortalPrivateProps> {
+
+    static defaultProps = defaultProps;
+
+    render() {
+        return (
+            <>
+                {(this.props.opened || []).map((item, index) => this.renderModal(item, index))}
+            </>
+        );
+    }
+
+    renderModal(item, index) {
+        const ModalComponent = item.modal;
+        const props = {
+            index,
+            group: item.group,
+            isClosing: item.isClosing,
+            onClose: () => this._onClose(item),
+        } as IModalProps;
+
+        return (
+            <ModalComponent
+                key={item.id}
+                {...item.props}
+                {...props}
+            />
+        );
+    }
+
+    _onClose(item) {
+        if (this.props.animationDelayMc || this.props.animationDelayMc === 0) {
+            this.props.dispatch(modalMarkClosing(item.id, this.props.group));
+            setTimeout(() => this._closeInternal(item), this.props.animationDelayMc);
+        } else {
+            this._closeInternal(item);
+        }
+    }
+
+    _closeInternal(item) {
+        if (item.props && item.props.onClose) {
+            item.props.onClose();
+        }
+        this.props.dispatch(closeModal(item.id, this.props.group));
+    }
+}

package/ui/modal/TwoFactorModal/TwoFactorModal.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {components, fetch} from '../../../hoc';
+import Modal from '../Modal';
+
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IFetchHocOutput} from '../../../hoc/fetch';
+
+interface ITwoFactorModalProps {
+    providerName: string,
+    view?: any;
+}
+
+interface ITwoFactorModalPrivateProps extends ITwoFactorModalProps, IFetchHocOutput, IComponentsHocOutput {
+    onClose?: any,
+    info?: {
+        providerName: string,
+        providerData: any,
+        createTime: string,
+        expireTime: string,
+        isConfirmed: string,
+    },
+}
+
+export interface ITwoFactorModalViewProps extends ITwoFactorModalPrivateProps {
+    description?: string,
+    formProps?: any,
+    [key: string]: any,
+}
+
+@fetch(({providerName}) => ({
+    method: 'post',
+    url: `/api/v1/auth/2fa/${providerName}/send`,
+    key: 'info',
+}))
+@components('ui')
+export default class TwoFactorModal extends React.PureComponent<ITwoFactorModalViewProps & ITwoFactorModalPrivateProps> {
+
+    render() {
+        const TwoFactorModalView = this.props.view || this.props.ui.getView('modal.TwoFactorModalView');
+        return (
+            <Modal
+                {...this.props}
+                onClose={this.props.onClose}
+            >
+                <TwoFactorModalView
+                    {...this.props}
+                    formProps={{
+                        formId: 'TwoFactorModal',
+                        action: `/api/v1/auth/2fa/${this.props.providerName}/confirm`,
+                        onComplete: () => this.props.onClose()
+                    }}
+                    description={this.getDescription()}
+                />
+            </Modal>
+        );
+    }
+
+    getDescription() {
+        switch (this.props.providerName) {
+            case 'notifier':
+                if (this.props.info.providerData?.type === 'phone') {
+                    return __('Вам отправлен СМС код на номер {phone}, введите его в поле ниже', {
+                        phone: this.props.info.providerData?.value,
+                    });
+                }
+                if (this.props.info.providerData?.type === 'email') {
+                    return __('Вам отправлен код на почту {email}, введите его в поле ниже', {
+                        email: this.props.info.providerData?.value,
+                    });
+                }
+                return __('Для подтверждения операции вам отправлен код');
+
+            case 'google':
+                return __('Введите код подтверждения из мобильного приложения Google Authenticator');
+
+        }
+
+        return __('Введите код для подтверждения операции');
+    }
+}

package/ui/modal/index.ts

@@ -0,0 +1,6 @@
+import ModalPortal from './ModalPortal';
+import TwoFactorModal from './TwoFactorModal';
+export {
+    ModalPortal,
+    TwoFactorModal,
+};

package/ui/nav/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import {components} from '../../../hoc';
+import {getRouteBreadcrumbs} from '../../../reducers/router';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IBreadcrumbsProps {
+    items?: any[];
+    params?: string;
+    pageId?: string;
+    pageTitle?: string;
+    view?: any;
+    [key: string]: any;
+}
+
+export interface IBreadcrumbsViewProps extends IBreadcrumbsProps{
+
+}
+
+interface IBreadcrumbsPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+}
+
+@connect((state, props) => ({
+    items: props.items || getRouteBreadcrumbs(state, props.pageId) // TODO router breadcrumbs
+}))
+@components('ui')
+export default class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps & IBreadcrumbsPrivateProps> {
+
+    static defaultProps = {
+        items: []
+    };
+
+    render() {
+        const BreadcrumbsView =
+            this.props.view || this.props.ui.getView('nav.BreadcrumbsView');
+        return <BreadcrumbsView {...this.props} />;
+    }
+
+}

package/ui/nav/Controls/Controls.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IButtonProps} from '../../form/Button/Button';
+import {INavProps} from '../Nav/Nav';
+
+export interface IControlItem extends IButtonProps {
+    id?: string,
+    visible?: boolean,
+    position?: 'left' | 'right',
+}
+
+export interface IControlsProps {
+    items?: IControlItem[],
+    navProps?: INavProps,
+    view?: any,
+    className?: string,
+    [key: string]: any,
+}
+
+export interface IControlsViewProps extends IControlsProps {
+    className?: string,
+    items: (IControlItem & {
+        icon?: string,
+        label?: string | any,
+        confirm?: string,
+        color?: ColorName,
+        outline?: boolean,
+        position?: 'right' | 'left'
+    })[],
+}
+
+interface IControlsPrivateProps extends IComponentsHocOutput {
+
+}
+
+@components('ui')
+export default class Controls extends React.PureComponent<IControlsProps & IControlsPrivateProps> {
+
+    render() {
+        const defaultItems = {
+            index: {
+                icon: 'back',
+                label: __('К списку'),
+                color: 'secondary',
+                outline: true
+            },
+            create: {
+                icon: 'create',
+                label: __('Добавить'),
+                color: 'success',
+                outline: true
+            },
+            view: {
+                icon: 'view',
+                label: __('Просмотр'),
+                color: 'secondary',
+                outline: true
+            },
+            update: {
+                icon: 'update',
+                label: __('Редактировать'),
+                color: 'secondary',
+                outline: true
+            },
+            delete: {
+                icon: 'delete',
+                label: __('Удалить'),
+                confirm: __('Удалить запись?'),
+                color: 'danger',
+                outline: true,
+                position: 'right'
+            }
+        };
+        const ControlsView = this.props.view || this.props.ui.getView('nav.ControlsView');
+        return (
+            <ControlsView
+                {...this.props}
+                items={this.props.items.map(item => ({
+                    ...defaultItems[item.id],
+                    ...item
+                }))}
+            />
+        );
+    }
+
+}

package/ui/nav/Link/Link.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Button from '../../form/Button';
+import {IButtonProps, IButtonViewProps} from '../../form/Button/Button';
+
+export interface ILinkProps extends IButtonProps {
+    to?: string,
+    [key: string]: any,
+}
+
+export interface ILinkViewProps extends IButtonViewProps {
+}
+
+export default class Link extends React.PureComponent<ILinkProps> {
+
+    render() {
+        return (
+            <Button
+                tag='a'
+                link
+                {...this.props}
+            />
+        );
+    }
+
+}

package/ui/nav/Nav/Nav.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import _get from 'lodash-es/get';
+import _has from 'lodash-es/has';
+import _isFunction from 'lodash-es/isFunction';
+import _isObject from 'lodash-es/isObject';
+import _isString from 'lodash-es/isString';
+import {components, connect, theme} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {
+    getActiveRouteIds, getNavItems,
+    getRouterParams,
+    IRoute
+} from '../../../reducers/router';
+import {IThemeHocInput, IThemeHocOutput} from '../../../hoc/theme';
+import {IButtonProps} from '../../form/Button/Button';
+
+export interface INavItem extends IButtonProps {
+    id?: number | string,
+    label?: string | any,
+    url?: string,
+    onClick?: (...args: any[]) => any,
+    className?: CssClassName,
+    view?: any,
+    visible?: boolean,
+    content?: any,
+    contentProps?: any
+}
+
+export interface INavProps extends IThemeHocInput {
+    layout?: 'button' | 'icon' | 'link' | 'tabs' | 'navbar' | 'list' | string;
+    items?: string | INavItem[];
+    routes?: IRoute[],
+    activeTab?: number | string;
+    className?: CssClassName;
+    view?: any;
+    onChange?: (...args: any[]) => any;
+    [key: string]: any;
+}
+
+export interface INavViewProps extends INavProps {
+    onClick: (item: object, index: number) => void,
+    items: (INavItem & {
+        isActive: boolean,
+    })[],
+    navClassName?: CssClassName,
+}
+
+interface INavPrivateProps extends IComponentsHocOutput, IThemeHocOutput {
+    activeRouteIds?: string[],
+    routerParams?: object,
+}
+
+interface NavState {
+    activeTab?: any,
+    filter?: any
+}
+
+@connect(
+    (state, props) => ({
+        routes: _isString(props.items) ? getNavItems(state, props.items) : null,
+        activeRouteIds: getActiveRouteIds(state),
+        routerParams: getRouterParams(state),
+    })
+)
+@theme()
+@components('ui')
+export default class Nav extends React.PureComponent<INavProps & INavPrivateProps, NavState> {
+    static defaultProps = {
+        layout: 'button'
+    };
+
+    constructor(props) {
+        super(props);
+        this._onClick = this._onClick.bind(this);
+        this.state = {
+            activeTab: this.props.activeTab || _get(this.props, 'items.0.id') || 0
+        };
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        if (this.props.activeTab !== nextProps.activeTab && nextProps.activeTab) {
+            this.setState({
+                activeTab: nextProps.activeTab
+            });
+        }
+    }
+
+    render() {
+        const defaultViewMap = {
+            button: 'nav.NavButtonView',
+            icon: 'nav.NavIconView',
+            link: 'nav.NavLinkView',
+            tabs: 'nav.NavTabsView',
+            navbar: 'nav.NavBarView',
+            list: 'nav.NavListView'
+        };
+        const NavView = this.props.view || this.props.ui.getView(defaultViewMap[this.props.layout]);
+        const items = Array.isArray(this.props.items)
+            ? this.props.items.map((item, index) => ({
+                ...item,
+                isActive: this.state.activeTab === (_has(item, 'id') ? item.id : index),
+            }))
+            : (this.props.routes
+                ? this.props.routes.map(route => ({
+                    id: route.id,
+                    label: route.label,
+                    toRoute: route.id,
+                    toRouteParams: this.props.routerParams,
+                    visible: route.isNavVisible,
+                    isActive: (this.props.activeRouteIds || []).includes(route.id),
+                })) as INavItem[]
+                : []
+            );
+        return (
+            <NavView
+                {...this.props}
+                onClick={this._onClick}
+                items={items.filter(item => item.visible !== false)}
+            >
+                {this.renderContent()}
+            </NavView>
+        );
+    }
+
+    renderContent() {
+        const items = Array.isArray(this.props.items) ? this.props.items : [];
+        const activeItem = items.find((item, index) => {
+            return this.state.activeTab === (_has(item, 'id') ? item.id : index);
+        });
+        if (!activeItem || !activeItem.content) {
+            return null;
+        }
+        if (_isFunction(activeItem.content) || _isObject(activeItem.content)) {
+            const ContentComponent = activeItem.content;
+            return <ContentComponent {...activeItem} {...activeItem.contentProps} />;
+        }
+        return activeItem.content;
+    }
+
+    _onClick(item, index) {
+        const activeTab = _has(item, 'id') ? item.id : index;
+        this.setState({activeTab});
+        if (this.props.onChange) {
+            this.props.onChange(activeTab);
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import Nav from '../Nav';
+
+export const items = [
+    {
+        id: 'one',
+        label: 'One',
+        content: () => (
+            <div className='card'>
+                <div className='card-body'>
+                    One
+                </div>
+            </div>
+        )
+    },
+    {
+        id: 'two',
+        label: 'Two',
+        content: () => (
+            <div className='card'>
+                <div className='card-body'>
+                    Two
+                </div>
+            </div>
+        )
+    },
+    {
+        id: 'three',
+        label: 'Three',
+        content: () => (
+            <div className='card'>
+                <div className='card-body'>
+                    Three
+                </div>
+            </div>
+        )
+    },
+];
+
+export default () => (
+    <>
+        <h6>
+            Buttons
+        </h6>
+        <Nav layout={'button'} items={items}/>
+    </>
+);

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

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

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