@steroidsjs/core 2.2.86 → 2.3.0-beta.1

package/src/ui/list/LayoutNames/LayoutNames.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import _get from 'lodash-es/get';
+import {useCallback} from 'react';
+import {useComponents} from '../../../hooks';
+import {INavItem} from '../../nav/Nav/Nav';
+import {ListControlPosition} from '../../../hooks/useList';
+import {IList, listSetLayout} from '../../../actions/list';
+import useDispatch from '../../../hooks/useDispatch';
+
+/**
+ * LayoutNames
+ * Переключает варианты расположения элементов коллекции.
+ * Сохраняет выбранный пользователем шаблон в LocalStorage.
+ */
+export interface ILayoutNamesProps {
+    /**
+     * Данные списка
+     */
+    list?: IList,
+
+    /**
+     * Отобразить переключатель
+     * @example false
+     */
+    enable?: boolean,
+
+    /**
+     * Название ключа, под которым в LocalStorage сохранится значение выбранного шаблона
+     * @example 'layout'
+     */
+    attribute?: string,
+
+    /**
+     * Шаблон по умолчанию
+     * @example 'list'
+     */
+    defaultValue?: string,
+
+    /**
+     * Расположение переключателя
+     * @example 'bottom'
+     */
+    position?: ListControlPosition,
+
+    /**
+     * Коллекция с шаблонами
+     * @example [{id: 'list', label: 'List'}, {id: 'grid', label: 'Grid'}]
+     */
+    items?: INavItem[],
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView,
+}
+
+export type ILayoutNamesViewProps = ILayoutNamesProps;
+
+function LayoutNames(props: ILayoutNamesProps): JSX.Element {
+    const components = useComponents();
+
+    const dispatch = useDispatch();
+
+    const list: IList = props.list || {};
+
+    const onChange = useCallback((value) => {
+        components.clientStorage.set(props.attribute, value);
+        dispatch(listSetLayout(list.listId, value));
+    }, [components.clientStorage, dispatch, list.listId, props.attribute]);
+
+    if (props.enable === false) {
+        return null;
+    }
+
+    const defaultComponent = require('../../nav/Nav').default;
+    return components.ui.renderView(props.view || defaultComponent, {
+        items: props.items,
+        activeTab: list.layoutName || null,
+        onChange,
+    }, true);
+}
+
+LayoutNames.defaultProps = {
+    enable: false,
+    attribute: 'layout',
+    defaultValue: null,
+    position: 'top',
+};
+
+export const normalizeLayoutNamesProps = props => ({
+    ...LayoutNames.defaultProps,
+    enable: !!props,
+    defaultValue: _get(props, 'items.0.id') || LayoutNames.defaultProps.defaultValue,
+    ...(typeof props === 'boolean' ? {enable: props} : props),
+});
+
+export default React.memo(LayoutNames);

package/src/ui/list/LayoutNames/demo/basic.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import demo from '../../List/demo/layout';
+
+/**
+ * List with layout switcher
+ * @order 1
+ * @col 6
+ */
+export default demo;

package/src/ui/list/LayoutNames/index.ts

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

package/src/ui/list/List/List.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {useComponents} from '../../../hooks';
+import useList, {IListConfig, IListOutput} from '../../../hooks/useList';
+
+/**
+ * List
+ * Компонент для представления коллекции в виде списка.
+ */
+export interface IListProps extends IListConfig {
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента коллекции
+     * @example MyCustomView
+     */
+    itemView?: CustomView;
+
+    /**
+     * Свойства для элемента коллекции
+     */
+    itemProps?: Record<string, unknown>;
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
+
+    /**
+     * Дополнительный CSS-класс для элемента с контентом
+     */
+    contentClassName?: string;
+
+    [key: string]: any;
+}
+
+export interface IListViewProps extends Omit<IListProps, 'onFetch'>, Omit<IListOutput, 'list'> {
+    content: any,
+}
+
+export interface IListItemViewProps {
+    id: PrimaryKey,
+    item: {
+        id?: PrimaryKey,
+        title?: string | any,
+        label?: string | any,
+    },
+    index: number,
+    className?: CssClassName;
+    contentClassName?: string;
+    layoutSelected?: PrimaryKey;
+}
+
+export default function List(props: IListProps): JSX.Element {
+    const components = useComponents();
+    const {
+        list,
+        paginationPosition,
+        paginationSizePosition,
+        layoutNamesPosition,
+        renderList,
+        renderEmpty,
+        renderPagination,
+        renderPaginationSize,
+        renderLayoutNames,
+        renderSearchForm,
+        //onFetch,
+        //onSort,
+    } = useList({
+        listId: props.listId,
+        primaryKey: props.primaryKey,
+        action: props.action,
+        actionMethod: props.actionMethod,
+        pagination: props.pagination,
+        paginationSize: props.paginationSize,
+        sort: props.sort,
+        layout: props.layout,
+        empty: props.empty,
+        searchForm: props.searchForm,
+        autoDestroy: props.autoDestroy,
+        onFetch: props.onFetch,
+        condition: props.condition,
+        addressBar: props.addressBar,
+        scope: props.scope,
+        query: props.query,
+        model: props.model,
+        searchModel: props.searchModel,
+        items: props.items,
+        initialItems: props.initialItems,
+        initialTotal: props.initialTotal,
+        autoFetchOnFormChanges: props.autoFetchOnFormChanges,
+    });
+
+    const ItemView = props.itemView || components.ui.getView('list.ListItemView');
+    const content = (list?.items || []).map((item, index) => (
+        <ItemView
+            {...props.itemProps}
+            key={item[props.primaryKey] || index}
+            primaryKey={props.primaryKey}
+            item={item}
+            index={index}
+            layoutSelected={list.layoutName}
+        />
+    ));
+
+    return components.ui.renderView(props.view || 'list.ListView', {
+        ...props,
+        list,
+        paginationPosition,
+        paginationSizePosition,
+        layoutNamesPosition,
+        renderList,
+        renderEmpty,
+        renderPagination,
+        renderPaginationSize,
+        renderLayoutNames,
+        renderSearchForm,
+        //onFetch,
+        //onSort,
+        content,
+    });
+}

package/src/ui/list/List/demo/basic.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import List from '../List';
+
+export const demoItems = [
+    {
+        id: 1,
+        title: 'Racing car sprays burning fuel into crowd.',
+    },
+    {
+        id: 2,
+        title: 'Japanese princess to wed commoner.',
+    },
+    {
+        id: 3,
+        title: 'Australian walks 100km after outback crash.',
+    },
+    {
+        id: 4,
+        title: 'Man charged over missing wedding girl.',
+    },
+    {
+        id: 5,
+        title: 'Los Angeles battles huge wildfires.',
+    },
+];
+
+/**
+ * Basic
+ * @order 1
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoBasic'
+        items={demoItems}
+        className='list-group'
+        itemProps={{
+            className: 'list-group-item',
+        }}
+    />
+);

package/src/ui/list/List/demo/condition.tsx

@@ -0,0 +1,77 @@
+import List from '../List';
+import * as React from 'react';
+
+/**
+ * List with filtration by custom condition
+ * @order 7
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoCondition'
+        items={[
+            {
+                id: 1,
+                name: 'Michael',
+                age: 21,
+            },
+            {
+                id: 2,
+                name: 'Brad',
+                age: 20,
+            },
+            {
+                id: 3,
+                name: 'Charles',
+                age: 15,
+            },
+            {
+                id: 4,
+                name: 'Martin',
+                age: 18,
+            },
+            {
+                id: 5,
+                name: 'Kevin',
+                age: 14,
+            },
+            {
+                id: 6,
+                name: 'Jacob',
+                age: 17,
+            },
+        ]}
+        searchForm={{
+            layout: 'horizontal',
+            fields: [
+                'isAdult',
+            ],
+            model: {
+                attributes: [
+                    {
+                        attribute: 'isAdult',
+                        searchField: 'CheckboxField',
+                        searchFieldProps: {
+                            label: 'Age over 18',
+                        },
+                    },
+                ],
+            },
+        }}
+        condition={(query) => {
+            if (query?.isAdult) {
+                return ['>=', 'age', 18];
+            }
+
+            return [];
+        }}
+        className='list-group'
+        // @ts-ignore
+        itemView={(props: any) => (
+            <div className='list-group-item'>
+                <div>{props.item.name}</div>
+                <div>{`Age: ${props.item.age}`}</div>
+            </div>
+        )}
+    />
+);

package/src/ui/list/List/demo/empty.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import List from '../List';
+
+/**
+ * Empty view with custom text when no items
+ * @order 3
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoPaginationEmpty'
+        items={[]}
+        empty='Empty data'
+    />
+);

package/src/ui/list/List/demo/layout.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import List from '../List';
+import {demoItems} from './basic';
+
+/**
+ * List with layout switcher
+ * @order 5
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoLayout'
+        items={demoItems}
+        layout={{
+            items: [
+                {
+                    id: 'list',
+                    label: 'List',
+                },
+                {
+                    id: 'grid',
+                    label: 'Grid',
+                },
+            ],
+        }}
+        contentClassName='row mx-lg-n1'
+        // @ts-ignore
+        itemView={(props: any) => (
+            <div className={`py-1 px-lg-1 ${props.layoutSelected === 'list' ? 'col-12' : 'col-6'}`}>
+                <div className='card p-2'>
+                    {props.item.title}
+                </div>
+            </div>
+        )}
+    />
+);

package/src/ui/list/List/demo/load-more.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import List from '../List';
+import {demoItems} from './basic';
+
+/**
+ * List with load more and show sizes switcher
+ * @order 4
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoLoadMore'
+        items={demoItems}
+        pagination={{
+            loadMore: true,
+        }}
+        paginationSize={{
+            enable: true,
+            sizes: [3, 6, 9],
+            defaultValue: 3,
+        }}
+        className='list-group'
+        itemProps={{
+            className: 'list-group-item',
+        }}
+    />
+);

package/src/ui/list/List/demo/pagination.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import List from '../List';
+import {demoItems} from './basic';
+
+/**
+ * Pagination with page numbers and custom position (show both: top and bottom)
+ * @order 2
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoPagination'
+        items={demoItems}
+        pagination={{
+            loadMore: false,
+            position: 'both',
+        }}
+        paginationSize={{
+            defaultValue: 3,
+            sizes: [2, 3, 4],
+        }}
+        className='list-group'
+        itemProps={{
+            className: 'list-group-item',
+        }}
+    />
+);

package/src/ui/list/List/demo/search-form.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import List from '../List';
+
+export const items = [
+    {
+        id: 1,
+        name: 'Hamster',
+        category: 'mammals',
+    },
+    {
+        id: 2,
+        name: 'Mockingbird',
+        category: 'birds',
+    },
+    {
+        id: 3,
+        name: 'Raccoon',
+        category: 'mammals',
+    },
+    {
+        id: 4,
+        name: 'Python',
+        category: 'reptiles',
+    },
+    {
+        id: 5,
+        name: 'Dolphin',
+        category: 'mammals',
+    },
+    {
+        id: 6,
+        name: 'Turtles',
+        category: 'reptiles',
+    },
+];
+
+export const searchForm = {
+    layout: 'horizontal',
+    fields: [
+        'name',
+        'category',
+    ],
+    model: {
+        attributes: [
+            'name:string:Name',
+            {
+                attribute: 'category',
+                label: 'Category',
+                searchField: 'DropDownField',
+                searchFieldProps: {
+                    items: [
+                        {
+                            id: 'mammals',
+                            label: 'Mammals',
+                        },
+                        {
+                            id: 'birds',
+                            label: 'Birds',
+                        },
+                        {
+                            id: 'reptiles',
+                            label: 'Reptiles',
+                        },
+                    ],
+                },
+            },
+        ],
+    },
+};
+
+/**
+ * List with search form, address bar and custom pagination
+ * @order 6
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoSearch'
+        items={items}
+        searchForm={searchForm}
+        paginationSize={{
+            attribute: 'ps',
+            sizes: [2, 4],
+        }}
+        addressBar
+        className='list-group'
+        // @ts-ignore
+        itemView={(props: any) => (
+            <div className='list-group-item'>
+                <div>{props.item.name}</div>
+                <div>{`Category: ${props.item.category}`}</div>
+            </div>
+        )}
+    />
+);

package/src/ui/list/List/demo/sort.tsx

@@ -0,0 +1,78 @@
+import List from '../List';
+import * as React from 'react';
+
+export const items = [
+    {
+        id: 1,
+        price: 50,
+        title: 'Jeans',
+    },
+    {
+        id: 2,
+        price: 125,
+        title: 'Coat',
+    },
+    {
+        id: 3,
+        price: 18,
+        title: 'Shirt',
+    },
+    {
+        id: 4,
+        price: 62,
+        title: 'Dress',
+    },
+    {
+        price: 100,
+        title: 'Boots',
+    },
+];
+
+/**
+ * List with sorting
+ * @order 8
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoSort'
+        items={items}
+        className='list-group'
+        searchForm={{
+            layout: 'horizontal',
+            fields: ['sort'],
+            model: {
+                attributes: [
+                    {
+                        attribute: 'sort',
+                        label: 'Sort',
+                        searchField: 'DropDownField',
+                        searchFieldProps: {
+                            items: [
+                                {
+                                    id: '-price',
+                                    label: 'Descending price',
+                                },
+                                {
+                                    id: 'price',
+                                    label: 'Ascending price',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        }}
+        sort={{
+            enable: true,
+            defaultValue: '-price',
+        }}
+        // @ts-ignore
+        itemView={(props: any) => (
+            <div className='list-group-item'>
+                <div>{props.item.title}</div>
+                <div>{`Price: ${props.item.price} $`}</div>
+            </div>
+        )}
+    />
+);

package/src/ui/list/List/index.ts

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