@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.6

package/src/ui/modal/Modal/Modal.tsx

@@ -1,141 +0,0 @@
-import * as React from 'react';
-import {useComponents} from '../../../hooks';
-import {IControlItem} from '../../nav/Controls/Controls';
-
-/**
- * Modal
- * Модальное окно
- */
-export interface IModalProps {
-    /**
-     * Кастомный CSS-класс
-     * @example 'CustomCssClassName'
-     */
-    className?: CssClassName,
-
-    /**
-     * Компонент, который отрендерится внутри Modal
-     * @example () => <InnerModalComponent />
-     */
-    component?: () => JSX.Element,
-
-    /**
-     * Свойства для внутреннего компонента
-     */
-    componentProps?: any,
-
-    /**
-     * Коллекция контролов, которая отобразится в Modal
-     * @example [{label: __(('Закрыть')), onClick: () => props.onClose()}]
-     */
-    controls?: IControlItem[],
-
-    /**
-     * Время, в течение которого будет происходить анимация закрытия Modal.
-     * Переопределяет отрезок времени, заданный в ModalPortal
-     * @example 300
-     */
-    closeTimeoutMs?: number,
-
-    /**
-     * Время в миллисекундах, через которое автоматически произойдет закрытие Modal.
-     * @example 1000
-     */
-    closeAfterMs?: number,
-
-    /**
-     * Группа Modal
-     * @example 'modal'
-     */
-    group?: string,
-
-    /**
-     * Порядковый номер Modal
-     * @example 0
-     */
-    index?: number,
-
-    /**
-     * Значение свойства отслеживается для показа/закрытия Modal.
-     * Если для компонента ModalPortal установлено значение задержки (animationDelayMc), то после закрытия
-     * пользователем Modal, оно исчезнет не сразу, а через указанный в animationDelayMc промежуток времени.
-     * В течение этого времени флаг isClosing будет равен true.
-     * Если задержка не установлена, Modal закроется сразу же и флаг isClosing всегда будет равен false.
-     * @example true
-     */
-    isClosing?: boolean,
-
-    /**
-     * Обработчик срабатывает при закрытии Modal
-     * @param args
-     */
-    onClose?: (...args: any[]) => void,
-
-    /**
-     * Размер Modal
-     * @example 'middle'
-     */
-    size?: Size,
-
-    /**
-     * Заголовок Modal
-     * @example 'Заявка отправлена на модерацию'
-     */
-    title?: string,
-
-    /**
-     * Закрытие Modal при нажатии на клавишу 'ESC'
-     * @example true
-     */
-    shouldCloseOnEsc?: boolean,
-
-    /**
-     * Закрытие Modal при клике на компонент overlay внутри Modal (темный фон, отделяющий контент страницы от Modal)
-     * @example true
-     */
-    shouldCloseOnOverlayClick?: boolean,
-
-    /**
-     * Переопределение React-компонента для кастомизации view-отображения
-     * @example MyCustomView
-     */
-    view?: CustomView,
-
-    [key: string]: any,
-}
-
-export type IModalViewProps = IModalProps;
-
-function Modal(props: IModalProps): JSX.Element {
-    const components = useComponents();
-
-    const ModalView = props.view || components.ui.getView('modal.ModalView');
-    const ContentComponent = props.component;
-
-    React.useEffect(() => {
-        if (props.closeAfterMs) {
-            setTimeout(() => props.onClose(), props.closeAfterMs);
-        }
-    }, []);
-
-    return (
-        <ModalView {...props}>
-            {(ContentComponent && (
-                <ContentComponent
-                    {...props}
-                    {...props.componentProps}
-                />
-            )) || (
-                props.children
-            )}
-        </ModalView>
-    );
-}
-
-Modal.defaultProps = {
-    size: 'middle',
-    shouldCloseOnEsc: true,
-    shouldCloseOnOverlayClick: true,
-};
-
-export default Modal;

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

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import Modal, {IModalProps} from '../Modal';
-import Button from '../../../form/Button';
-import {openModal} from '../../../../actions/modal';
-import useDispatch from '../../../../hooks/useDispatch';
-
-function DemoModal(props: IModalProps) {
-    return (
-        <Modal
-            title='Basic Modal'
-            onClose={props.onClose}
-            {...props}
-        >
-            <div style={{ marginBottom: '20px' }}>
-                This is your modal content.
-            </div>
-        </Modal>
-    );
-}
-
-/**
- * Простой пример Modal, с заданным заголовком и контентом.
- * @order 1
- * @col 6
- */
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <>
-            <Button
-                label='Open modal'
-                onClick={e => {
-                    e.preventDefault();
-                    dispatch(openModal(DemoModal, {
-                        modalId: 'demo',
-                    }));
-                }}
-            />
-        </>
-    );
-};

package/src/ui/modal/Modal/demo/closeTimeout.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import Modal, {IModalProps} from '../Modal';
-import Button from '../../../form/Button';
-import {openModal} from '../../../../actions/modal';
-import useDispatch from '../../../../hooks/useDispatch';
-
-function DemoModal(props: IModalProps) {
-    return (
-        <Modal
-            title='Custom closing time'
-            onClose={props.onClose}
-            {...props}
-        >
-            <div style={{ marginBottom: '20px' }}>
-                This is your modal content.
-            </div>
-        </Modal>
-    );
-}
-
-/**
- * Настройка времени, через которое произойдет закрытие Modal.
- * @order 5
- * @col 6
- */
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <>
-            <Button
-                label='Open modal'
-                onClick={e => {
-                    e.preventDefault();
-                    dispatch(openModal(DemoModal, {
-                        modalId: 'demo',
-                        closeTimeoutMs: 1000,
-                    }));
-                }}
-            />
-        </>
-    );
-};

package/src/ui/modal/Modal/demo/closing.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Modal, {IModalProps} from '../Modal';
-import Button from '../../../form/Button';
-import {openModal} from '../../../../actions/modal';
-import useDispatch from '../../../../hooks/useDispatch';
-
-function DemoModal(props: IModalProps) {
-    return (
-        <Modal
-            title='Modal with custom closing'
-            onClose={props.onClose}
-            {...props}
-        >
-            <div style={{ marginBottom: '20px' }}>
-                This is your modal content.
-            </div>
-        </Modal>
-    );
-}
-
-/**
- * Обработка закрытия Modal при помощи onClose.
- * Также это модальное окно не закроется при нажатии на клавишу 'ESC' или клике на overlay.
- * @order 4
- * @col 6
- */
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <>
-            <Button
-                label='Open modal'
-                onClick={e => {
-                    e.preventDefault();
-                    dispatch(openModal(DemoModal, {
-                        modalId: 'demo',
-                        onClose: () => alert('Modal will be closed!'),
-                        shouldCloseOnOverlayClick: false,
-                        shouldCloseOnEsc: false,
-                    }));
-                }}
-            />
-        </>
-    );
-};

package/src/ui/modal/Modal/demo/component.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import Modal from '../Modal';
-import Button from '../../../form/Button';
-import {openModal} from '../../../../actions/modal';
-import useDispatch from '../../../../hooks/useDispatch';
-
-/**
- * Контент для Modal также можно задать через свойство component.
- * При этом, в action openModal необязательно передавать отдельный компонент, построенный на базе Modal.
- * Можно передать сам Modal, контент настроить уже через свойства Modal.
- * @order 6
- * @col 6
- */
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <>
-            <Button
-                label='Open modal'
-                onClick={e => {
-                    e.preventDefault();
-                    dispatch(openModal(Modal, {
-                        modalId: 'demo',
-                        title: 'Modal based only on props',
-                        component: () => (
-                            <div style={{ marginBottom: '20px' }}>
-                                This is your modal content.
-                            </div>
-                        ),
-                        controls: [
-                            {label: 'Show Alert', onClick: () => alert('This is alert!')},
-                        ],
-                    }));
-                }}
-            />
-        </>
-    );
-};

package/src/ui/modal/Modal/demo/controls.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Modal, {IModalProps} from '../Modal';
-import Button from '../../../form/Button';
-import {openModal} from '../../../../actions/modal';
-import useDispatch from '../../../../hooks/useDispatch';
-
-function DemoModal(props: IModalProps) {
-    return (
-        <Modal
-            title='Modal with controls'
-            onClose={props.onClose}
-            controls={[
-                {label: 'Show Alert', onClick: () => alert('This is alert!')},
-                {label: 'Close', onClick: () => props.onClose()},
-            ]}
-            {...props}
-        >
-            <div style={{ marginBottom: '20px' }}>
-                This is your modal content.
-            </div>
-        </Modal>
-    );
-}
-
-/**
- * Modal содержит набор контролов с привязанными обработчиками.
- * @order 2
- * @col 6
- */
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <>
-            <Button
-                label='Open modal'
-                onClick={e => {
-                    e.preventDefault();
-                    dispatch(openModal(DemoModal, {
-                        modalId: 'demo',
-                    }));
-                }}
-            />
-        </>
-    );
-};

package/src/ui/modal/Modal/demo/size.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import Modal, {IModalProps} from '../Modal';
-import Button from '../../../form/Button';
-import {openModal} from '../../../../actions/modal';
-import useDispatch from '../../../../hooks/useDispatch';
-
-const sizesArray: Size[] = ['small', 'middle', 'large'];
-
-function DemoModal(props: IModalProps) {
-    return (
-        <Modal
-            title={`${props.size} modal`}
-            onClose={props.onClose}
-            {...props}
-        >
-            <div style={{ marginBottom: '20px' }}>
-                This is your content for
-                <strong>
-                    {' '}
-                    {props.size}
-                    {' '}
-                </strong>
-                modal.
-            </div>
-        </Modal>
-    );
-}
-
-/**
- * По-умолчанию, Modal имеет 3 заданных размера.
- * @order 3
- * @col 12
- */
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <div style={{ display: 'flex' }}>
-            {sizesArray.map((size) => (
-                <Button
-                    key={size}
-                    label={`Open ${size} modal`}
-                    onClick={e => {
-                        e.preventDefault();
-                        dispatch(openModal(DemoModal, {
-                            modalId: 'demo',
-                            size,
-                        }));
-                    }}
-                    style={{ marginRight: '20px' }}
-                />
-            ))}
-        </div>
-    );
-};

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

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

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

@@ -1,72 +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 {
-    /**
-     * Время, через которое произойдет закрытие Modal
-     * @example 300
-     */
-    animationDelayMc?: number,
-
-    /**
-     * Группа Modal
-     * @example 'modal'
-     */
-    group?: string,
-}
-
-function ModalPortal(props: IModalPortalProps): JSX.Element {
-    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) => {
-        const animationDelayMc = item.props?.closeTimeoutMs ?? props.animationDelayMc;
-        if (animationDelayMc > 0) {
-            dispatch(modalMarkClosing(item.id, props.group));
-            setTimeout(() => closeInternal(item), animationDelayMc);
-        } else {
-            closeInternal(item);
-        }
-    }, [closeInternal, dispatch, props.animationDelayMc, props.group]);
-
-    return _orderBy(opened, 'id').map((item, index) => {
-        const ModalComponent = item.modal;
-        const modalProps = {
-            ...item.props,
-            index,
-            group,
-            isClosing: item.isClosing,
-            onClose: () => onClose(item),
-            closeTimeoutMs: item.props.closeTimeoutMs || props.animationDelayMc,
-        } as IModalProps;
-
-        return (
-            <ModalComponent
-                key={item.id}
-                {...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): JSX.Element {
-    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,60 +0,0 @@
-import {useComponents, useSelector} from '../../../hooks';
-import {getRouteBreadcrumbs, getRouteParams} from '../../../reducers/router';
-import {IRouteItem} from '../Router/Router';
-
-/**
- * Breadcrumbs
- * Хлебные крошки
- */
-export interface IBreadcrumbsProps {
-    /**
-     * Кастомный CSS-класс
-     * @example 'CustomCssClassName'
-     */
-    className?: CssClassName,
-
-    /**
-     * Коллекция элементов навигационной цепочки
-     * @example [{id: 'root', title: 'Home'}, {id: 'catalog', title: 'Catalog'}]
-     */
-    items?: IRouteItem[],
-
-    /**
-     * Вместо items можно передать идентификатор роута, от которого компонент самостоятельно построит
-     * навигационную цепочку
-     * @example 'catalog'
-     */
-    pageId?: string,
-
-    /**
-     * Заголовок последней в списке страницы (обычно, это текущая страница, на которой находится пользователь).
-     * Если заголовок не задан, то подставится item.title
-     * @example 'Каталог'
-     */
-    pageTitle?: string,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView,
-
-    [key: string]: any,
-}
-
-export type IBreadcrumbsViewProps = IBreadcrumbsProps & {
-    routeParams?: any,
-};
-
-export default function Breadcrumbs(props: IBreadcrumbsProps): JSX.Element {
-    const components = useComponents();
-    const routeItems = useSelector(state => getRouteBreadcrumbs(state, props.pageId));
-    const routeParams = useSelector(state => getRouteParams(state));
-    const items = props.items || routeItems;
-
-    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', {
-        ...props,
-        items,
-        routeParams,
-    });
-}

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

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import Breadcrumbs from '../Breadcrumbs';
-
-/**
- * Самый простой способ построить цепочку Breadcrumbs - передать id целевого роута.
- * @order 1
- * @col 6
- */
-export default () => (
-    <>
-        <Breadcrumbs pageId='react' />
-    </>
-);

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import Breadcrumbs from '../Breadcrumbs';
-
-/**
- * Передаем заданный массив роутов.
- * @order 3
- * @col 12
- */
-export default () => (
-    <>
-        <Breadcrumbs
-            items={[
-                {id: 'root', title: 'Home'},
-                {id: 'react', title: 'Frontend React'},
-                {id: 'ui', title: 'Ui'},
-                {id: 'Breadcrumbs', title: 'Breadcrumbs'},
-            ]}
-        />
-    </>
-);

package/src/ui/nav/Breadcrumbs/demo/page-title.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import Breadcrumbs from '../Breadcrumbs';
-
-/**
- * Изменяем заголовок последней в списке страницы.
- * @order 2
- * @col 6
- */
-export default () => (
-    <>
-        <Breadcrumbs pageId='react' pageTitle='Custom text' />
-    </>
-);