@steroidsjs/core 2.3.0-beta.1 → 2.3.0-beta.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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