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

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

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,54 @@
+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

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

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

@@ -0,0 +1,72 @@
+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

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

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

@@ -0,0 +1,77 @@
+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

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

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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,20 @@
+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

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