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

package/src/ui/modal/ModalPortal/ModalPortal.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import _orderBy from 'lodash-es/orderBy';
-import {useCallback} from 'react';
-import {useSelector} from '../../../hooks';
-import useDispatch from '../../../hooks/useDispatch';
-import {closeModal, modalMarkClosing} from '../../../actions/modal';
-import {getOpened, MODAL_DEFAULT_GROUP} from '../../../reducers/modal';
-import {IModalProps} from '../Modal/Modal';
-
-export interface IModalPortalProps {
-    animationDelayMc?: number,
-    group?: string,
-}
-
-function ModalPortal(props: IModalPortalProps) {
-    const dispatch = useDispatch();
-
-    const group = props.group || ModalPortal.defaultProps.group;
-    const opened = useSelector(state => getOpened(state, group));
-
-    const closeInternal = useCallback((item) => {
-        if (item.props && item.props.onClose) {
-            item.props.onClose();
-        }
-        dispatch(closeModal(item.id, props.group));
-    }, [dispatch, props.group]);
-
-    const onClose = useCallback((item) => {
-        if (props.animationDelayMc || props.animationDelayMc === 0) {
-            dispatch(modalMarkClosing(item.id, props.group));
-            setTimeout(() => closeInternal(item), props.animationDelayMc);
-        } else {
-            closeInternal(item);
-        }
-    }, [closeInternal, dispatch, props.animationDelayMc, props.group]);
-
-    return _orderBy(opened, 'id').map((item, index) => {
-        const ModalComponent = item.modal;
-        const modalProps = {
-            index,
-            group,
-            isClosing: item.isClosing,
-            onClose: () => onClose(item),
-        } as IModalProps;
-
-        return (
-            <ModalComponent
-                key={item.id}
-                {...item.props}
-                {...modalProps}
-            />
-        );
-    });
-}
-
-ModalPortal.defaultProps = {
-    group: MODAL_DEFAULT_GROUP,
-    animationDelayMc: 300,
-};
-
-export default ModalPortal;

package/src/ui/modal/ModalPortal/index.ts

@@ -1,3 +0,0 @@
-import ModalPortal from './ModalPortal';
-
-export default ModalPortal;

package/src/ui/modal/TwoFactorModal/TwoFactorModal.tsx

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

package/src/ui/modal/TwoFactorModal/index.ts

@@ -1,3 +0,0 @@
-import TwoFactorModal from './TwoFactorModal';
-
-export default TwoFactorModal;

package/src/ui/nav/Breadcrumbs/Breadcrumbs.tsx

@@ -1,23 +0,0 @@
-import {useComponents, useSelector} from '../../../hooks';
-import {getRouteBreadcrumbs} from '../../../reducers/router';
-
-export interface IBreadcrumbsProps {
-    items?: any[];
-    pageId?: string;
-    pageTitle?: string;
-    view?: any;
-    [key: string]: any;
-}
-
-export type IBreadcrumbsViewProps = IBreadcrumbsProps;
-
-export default function Breadcrumbs(props: IBreadcrumbsProps) {
-    const components = useComponents();
-    const routeItems = useSelector(state => props.pageId ? getRouteBreadcrumbs(state, props.pageId) : null);
-    const items = props.items || routeItems;
-
-    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', {
-        ...props,
-        items,
-    });
-}

package/src/ui/nav/Breadcrumbs/index.ts

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

package/src/ui/nav/Controls/Controls.tsx

@@ -1,92 +0,0 @@
-import {useMemo} from 'react';
-import {useComponents} from '../../../hooks';
-import {IButtonProps} from '../../form/Button/Button';
-import {INavProps} from '../Nav/Nav';
-
-export interface IControlItem extends IButtonProps {
-    /**
-     * Идентификатор элемента управления
-     * @example 'create'
-     */
-    id?: string,
-
-    /**
-     * Скрыть или показать элемент
-     * @example true
-     */
-    visible?: boolean,
-
-    /**
-     * Расположение элемента
-     * @example 'left'
-     */
-    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'
-    })[],
-}
-
-export default function Controls(props: IControlsProps) {
-    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 components = useComponents();
-    const items = useMemo(() => props.items.map(item => ({
-        ...defaultItems[item.id],
-        ...item,
-    })), [defaultItems, props.items]);
-
-    return components.ui.renderView(props.view || 'nav.ControlsView', {
-        ...props,
-        items,
-    });
-}

package/src/ui/nav/Controls/index.ts

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

package/src/ui/nav/Link/Link.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import Button from '../../form/Button';
-import {IButtonProps, IButtonViewProps} from '../../form/Button/Button';
-
-export interface ILinkProps extends IButtonProps {
-    [key: string]: any,
-}
-
-export type ILinkViewProps = IButtonViewProps
-
-export default function Link(props: ILinkProps) {
-    return (
-        <Button
-            tag='a'
-            link
-            {...props}
-            formId={false}
-        />
-    );
-}

package/src/ui/nav/Link/index.ts

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

package/src/ui/nav/Nav/Nav.tsx

@@ -1,211 +0,0 @@
-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 {useCallback, useEffect, useMemo, useState} from 'react';
-import {useComponents, useSelector} from '../../../hooks';
-import {
-    getActiveRouteIds, getNavItems,
-    getRouterParams,
-    IRoute,
-} from '../../../reducers/router';
-import {IButtonProps} from '../../form/Button/Button';
-
-/**
- * Nav
- * Компонент навигации
- */
-export interface INavItem extends IButtonProps {
-    /**
-     * Идентификатор элемента
-     */
-    id?: number | string,
-
-    /**
-     * Текст элемента
-     * @example 'Отзывы'
-     */
-    label?: string | any,
-
-    /**
-     * Ссылка на внешнюю страницу
-     * @example https://ya.ru
-     */
-    url?: string,
-
-    /**
-     * Обработчик события нажатия
-     * @param args
-     */
-    onClick?: (...args: any[]) => any,
-
-    /**
-     * CSS-класс для элемента отображения
-     */
-    className?: CssClassName,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения элемента
-     * @example MyCustomView
-     */
-    view?: any,
-
-    /**
-     * Видимость элемента
-     * @example true
-     */
-    visible?: boolean,
-
-    /**
-     * Контент, который отобразиться, если элемент навигации будет активен
-     * @example ContentComponent
-     */
-    content?: any,
-
-    /**
-     * Свойства для компонента с контентом
-     * @example {content: 'Some text'}
-     */
-    contentProps?: any,
-}
-
-export interface INavProps {
-    /**
-     * Шаблон отображения элементов навигации
-     * @example 'link'
-     */
-    layout?: 'button' | 'icon' | 'link' | 'tabs' | 'navbar' | 'list' | string;
-
-    /**
-     * Коллекция с элементами навигации
-     * @example [{id: 1, label: 'One'}, {id: 2, label: 'Two'}]
-     */
-    items?: string | INavItem[];
-
-    routes?: IRoute[],
-
-    /**
-     * Идентификатор активного элемента
-     * @example 1
-     */
-    activeTab?: number | string;
-
-    /**
-     * CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения элемента
-     * @example MyCustomView
-     */
-    view?: any;
-
-    /**
-     * Обработчик, который вызывается при смене активного элемента навигации
-     * @param args
-     */
-    onChange?: (...args: any[]) => any;
-
-    /**
-     * Размер
-     */
-    size?: Size,
-
-    /**
-     * Темная тема
-     */
-    dark?: boolean,
-
-    [key: string]: any;
-}
-
-export interface INavViewProps extends INavProps {
-    onClick: (item: Record<string, unknown>, index: number) => void,
-    items: (INavItem & {
-        isActive: boolean,
-    })[],
-    navClassName?: CssClassName,
-}
-
-const defaultViewMap = {
-    button: 'nav.NavButtonView',
-    icon: 'nav.NavIconView',
-    link: 'nav.NavLinkView',
-    tabs: 'nav.NavTabsView',
-    navbar: 'nav.NavBarView',
-    list: 'nav.NavListView',
-};
-
-function Nav(props: INavProps) {
-    const components = useComponents();
-
-    const {routes, activeRouteIds, routerParams} = useSelector(state => ({
-        routes: typeof props.items === 'string' ? getNavItems(state, props.items) : null,
-        activeRouteIds: getActiveRouteIds(state),
-        routerParams: getRouterParams(state),
-    }));
-
-    const [activeTab, setActiveTab] = useState(props.activeTab || _get(props, 'items.0.id') || 0);
-
-    useEffect(() => {
-        if (props.activeTab) {
-            setActiveTab(props.activeTab);
-        }
-    }, [props.activeTab]);
-
-    const renderContent = () => {
-        const items = Array.isArray(props.items) ? props.items : [];
-        const activeItem = items.find((item, index) => 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;
-    };
-
-    const onClick = useCallback((item, index) => {
-        const newActiveTab = _has(item, 'id') ? item.id : index;
-        if (props.onChange) {
-            props.onChange.call(null, newActiveTab);
-        } else {
-            setActiveTab(newActiveTab);
-        }
-    }, [props.onChange]);
-
-    const items = useMemo(() => (
-        Array.isArray(props.items)
-            ? props.items.map((item, index) => ({
-                ...item,
-                isActive: activeTab === (_has(item, 'id') ? item.id : index),
-            }))
-                .filter(item => item.visible !== false)
-            : (routes || []).map(route => ({
-                id: route.id,
-                label: route.label,
-                toRoute: route.id,
-                toRouteParams: routerParams,
-                visible: route.isNavVisible,
-                isActive: (activeRouteIds || []).includes(route.id),
-            } as INavItem))
-                .filter(item => item.visible !== false)
-    ),
-    [activeRouteIds, activeTab, props.items, routerParams, routes]);
-
-    return components.ui.renderView(props.view || defaultViewMap[props.layout], {
-        ...props,
-        items,
-        onClick,
-        children: renderContent(),
-    });
-}
-
-Nav.defaultProps = {
-    layout: 'button',
-};
-
-export default Nav;

package/src/ui/nav/Nav/demo/basic.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-
-import Nav from '../Nav';
-
-export default () => (
-    <>
-        <h6>
-            Buttons
-        </h6>
-        <Nav items={[{id: 1, label: 'One'}, {id: 2, label: 'Two'}]} />
-    </>
-);

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

@@ -1,48 +0,0 @@
-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/src/ui/nav/Nav/demo/links.tsx

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

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

@@ -1,34 +0,0 @@
-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/src/ui/nav/Nav/demo/tabs.tsx

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

package/src/ui/nav/Nav/index.ts

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