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

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

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

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

@@ -0,0 +1,118 @@
+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',
+}
+
+/**
+ * Controls
+ * Коллекция с контролами. Можно передавать список с кастомными контролами, а можно использовать стандарные контролы
+ * компонента. Стандартные контролы подходят для CRUD-операций, все что нужно для их использования - передать
+ * соответствующий id и обработчик - внешний вид (иконка и название) отобразятся автоматом.
+ */
+export interface IControlsProps {
+    /**
+     * Коллекция контролов
+     * @example [{id: 'delete', onClick: () => alert("It's deleted")}]
+     */
+    items?: IControlItem[],
+
+    /**
+     * Пропсы для компонента Nav, в который передаются контролы в качестве items
+     * @example {layout: 'link'}
+     */
+    navProps?: INavProps,
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: any,
+
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     * @example MyCustomView
+     */
+    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): JSX.Element {
+    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/demo/basic.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Controls from '../Controls';
+
+export const controls = [
+    {
+        id: 'back',
+        onClick: () => alert('Go back'),
+    }, {
+        id: 'create',
+        onClick: () => alert('Something is created'),
+    },
+    {
+        id: 'view',
+        onClick: () => alert('Something is shown'),
+    },
+    {
+        id: 'update',
+        onClick: () => alert('Something is updated'),
+    },
+    {
+        id: 'delete',
+        onClick: () => alert('Something is deleted'),
+    },
+];
+
+/**
+ * Basic
+ * @order 1
+ * @col 6
+ */
+export default () => (
+    <>
+        <Controls items={controls} />
+    </>
+);

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

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

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

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

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import Link from '../Link';
+
+/**
+ * Link with badge
+ * @order 3
+ * @col 4
+ */
+export default () => (
+    <>
+        <Link
+            url='https://google.ru'
+            target='_blank'
+            badge={2}
+            label={__('Badge')}
+            className='d-block mb-3'
+        />
+    </>
+);

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Link from '../Link';
+
+/**
+ * Basic
+ * @order 1
+ * @col 4
+ */
+export default () => (
+    <>
+        <Link
+            url='https://google.ru'
+            target='_blank'
+            label={__('Basic')}
+            className='d-block mb-3'
+        />
+    </>
+);

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Link from '../Link';
+
+const colors = {
+    primary: 'Primary',
+    secondary: 'Secondary',
+    success: 'Success',
+    danger: 'Danger',
+    warning: 'Warning',
+    info: 'Info',
+    light: 'Light',
+    dark: 'Dark',
+};
+
+/**
+ * Colors
+ * @order 4
+ * @col 8
+ */
+export default () => (
+    <>
+        {Object.keys(colors).map(color => (
+            <Link
+                url='https://google.ru'
+                target='_blank'
+                key={color}
+                color={color}
+                label={colors[color]}
+                className='d-inline-block mb-3'
+            />
+        ))}
+    </>
+);

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import Link from '../Link';
+
+/**
+ * Confirm
+ * @order 7
+ * @col 4
+ */
+export default () => (
+    <>
+        <Link
+            confirm='Confirm text'
+            label='Confirm'
+            className='d-block mb-3'
+        />
+    </>
+);

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import Link from '../Link';
+
+/**
+ * Disabled
+ * @order 3
+ * @col 4
+ */
+export default () => (
+    <>
+        <Link
+            disabled
+            url='https://google.ru'
+            target='_blank'
+            label='Disabled'
+            className='d-block mb-3'
+        />
+    </>
+);

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import Link from '../Link';
+
+/**
+ * Hint
+ * @order 4
+ * @col 4
+ */
+export default () => (
+    <>
+        <Link
+            label='Hint'
+            hint='hint text'
+            className='d-block mb-3'
+        />
+    </>
+);

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import Link from '../Link';
+
+/**
+ * Link with icon
+ * @order 6
+ * @col 4
+ */
+export default () => (
+    <>
+        <Link
+            label={__('Icon')}
+            icon='phone'
+            url='https://google.ru'
+            target='_blank'
+            className='d-block mb-3'
+        />
+    </>
+);

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import Link from '../Link';
+
+const sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large',
+};
+
+/**
+ * Sizes
+ * @order 5
+ * @col 8
+ */
+export default () => (
+    <>
+        {Object.keys(sizes).map(size => (
+            <Link
+                key={size}
+                size={size}
+                className='float-left mr-2'
+                url='https://google.ru'
+                target='_blank'
+                label={sizes[size]}
+            />
+        ))}
+    </>
+);

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

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

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

@@ -0,0 +1,209 @@
+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, getRouteParams,
+    getRouterParams,
+} from '../../../reducers/router';
+import {IButtonProps} from '../../form/Button/Button';
+
+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,
+}
+
+/**
+ * Nav
+ * Компонент навигации
+ */
+export interface INavProps {
+    /**
+     * Шаблон отображения элементов навигации
+     * @example 'link'
+     */
+    layout?: 'button' | 'icon' | 'link' | 'tabs' | 'navbar' | 'list' | string;
+
+    /**
+     * Коллекция с элементами навигации. Также можно передать идентификатор роута, тогда компонент найдет все
+     * вложенные роуты и отобразит их в навигации.
+     * @example [{id: 1, label: 'One'}, {id: 2, label: 'Two'}] | 'root'
+     */
+    items?: string | INavItem[];
+
+    /**
+     * Идентификатор активного элемента. По умолчанию будет активен первый элемент.
+     * @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): JSX.Element {
+    const components = useComponents();
+
+    const {routes, activeRouteIds, routerParams} = useSelector(state => ({
+        routes: typeof props.items === 'string' ? getNavItems(state, props.items) : null,
+        activeRouteIds: getActiveRouteIds(state),
+        routerParams: getRouteParams(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;
+        setActiveTab(newActiveTab);
+        if (props.onChange) {
+            props.onChange.call(null, 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 as INavItem[] || []).map(route => ({
+                id: route.id,
+                label: route.label,
+                toRoute: route.id,
+                toRouteParams: routerParams,
+                visible: route.isNavVisible,
+                isActive: (activeRouteIds || []).includes(route.id),
+            }))
+                .filter(item => item.visible !== false)
+    ),
+    [activeRouteIds, activeTab, props.items, routerParams, routes]);
+
+    return components.ui.renderView(props.view || defaultViewMap[props.layout], {
+        ...props,
+        items,
+        onClick,
+        disabled: props.disabled,
+        children: renderContent(),
+    });
+}
+
+Nav.defaultProps = {
+    layout: 'button',
+};
+
+export default Nav;

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

@@ -0,0 +1,50 @@
+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>
+        ),
+    },
+];
+
+/**
+ * Basic
+ * @order 1
+ * @col 6
+ */
+export default () => (
+    <>
+        <Nav items={items} />
+    </>
+);

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import _startCase from 'lodash-es/startCase';
+import {items} from '../../../nav/Nav/demo/basic';
+import Nav from '../Nav';
+
+const layouts = ['button', 'icon', 'link', 'tabs', 'navbar', 'list'];
+const icons = ['coffee', 'shopping-basket', 'hospital'];
+
+/**
+ * Nav with different layouts
+ * @order 2
+ * @col 12
+ */
+export default () => (
+    <>
+        <div className='row'>
+            {layouts.map(layout => (
+                <div
+                    className='col-8 mb-5'
+                    key={layout}
+                >
+                    <h6>{_startCase(layout)}</h6>
+                    <Nav
+                        items={layout === 'icon'
+                            ? items.map((item, index) => ({
+                                ...item,
+                                icon: icons[index],
+                            }))
+                            : items}
+                        layout={layout}
+                    />
+                </div>
+            ))}
+        </div>
+    </>
+);

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

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