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

package/src/ui/list/Grid/Grid.tsx

@@ -1,257 +0,0 @@
-import * as React from 'react';
-import _upperFirst from 'lodash-es/upperFirst';
-import _isString from 'lodash-es/isString';
-import {useCallback, useMemo} from 'react';
-import {useComponents} from '../../../hooks';
-import useList, {IListConfig, ListControlPosition} from '../../../hooks/useList';
-import ControlsColumn from '../ControlsColumn';
-import Format from '../../format/Format';
-import {IControlItem} from '../../nav/Controls/Controls';
-
-export interface IGridColumn {
-    /**
-     * Атрибут колонки, по которому происходит поиск нужного свойства в items и нужного поля в SearchForm
-     * @example 'Name'
-     */
-    attribute?: string,
-
-    /**
-     * Свойства для компонента форматирования
-     * @example {component: DateFormatter, format: 'DD MMMM'}
-     */
-    formatter?: Record<string, any>,
-
-    /**
-     * Заголовок колонки
-     * @example 'Name'
-     */
-    label?: React.ReactNode,
-
-    /**
-     * Подсказка
-     * @example 'Some text'
-     */
-    hint?: React.ReactNode,
-
-    /**
-     * CSS-класс для ячейки с заголовком колонки <th>...</th>
-     */
-    headerClassName?: CssClassName,
-
-    /**
-     * Скрыть или показать колонку
-     * @example true
-     */
-    visible?: boolean,
-
-    /**
-     * Компонент для кастомизации отображения заголовка колонки
-     * @example MyCustomView
-     */
-    headerView?: any,
-
-    /**
-     * Свойства для компонента отображения заголовка колонки
-     */
-    headerProps?: any,
-
-    /**
-     * Компонент для кастомизации отображения значения в ячейке
-     * @example MyCustomView
-     */
-    valueView?: any,
-
-    /**
-     * Свойства для компонента отображения значения в ячейке
-     */
-    valueProps?: any,
-
-    /**
-     * CSS-класс для ячейки со значением
-     */
-    className?: CssClassName,
-
-    /**
-     * Включить возможность сортировки по данным в колонке
-     * @example true
-     */
-    sortable?: boolean,
-}
-
-/**
- * Grid
- * Компонент для представления данных коллекции в виде таблицы.
- */
-export interface IGridProps extends IListConfig {
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-
-    /**
-     * Коллекция с наименованиями и свойствами колонок в таблице
-     * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
-     */
-    columns: (string | IGridColumn)[];
-
-    /**
-     * Коллекция с элементами управления. Данная коллекция отобразится в колонке рядом с каждой записью в таблице.
-     * Например, кнопки для удаления и детального просмотра записи.
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
-     */
-    controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
-
-    /**
-     * Нужно ли отображать колонку с порядковым номером элемента? Если да, то для каждого элемента в коллекции items
-     * должно быть задано свойство index
-     */
-    itemsIndexing?: any;
-
-    [key: string]: any;
-}
-
-export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
-    className: CssClassName,
-    columns: (IGridColumn & {
-        label: any,
-    })[],
-    paginationPosition: ListControlPosition,
-    paginationSizePosition: ListControlPosition,
-    layoutNamesPosition: ListControlPosition,
-    renderList: (children: any) => any,
-    renderEmpty: () => any,
-    renderPagination: () => any,
-    renderPaginationSize: () => any,
-    renderLayoutNames: () => any,
-    renderSearchForm: () => any,
-    renderValue: (item: Record<string, unknown>, column: IGridColumn) => any,
-    onFetch: (params?: Record<string, unknown>) => void,
-    onSort: (value: any) => void,
-}
-
-export default function Grid(props: IGridProps): JSX.Element {
-    const components = useComponents();
-    const {
-        list,
-        model,
-        searchModel,
-        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 renderLabel = useCallback((column) => {
-        if (column.headerView) {
-            const HeaderView = column.headerView;
-            return (
-                <HeaderView
-                    {...column}
-                    {...column.headerProps}
-                    listId={props.listId}
-                />
-            );
-        }
-        if (column.label || column.label === '') {
-            return column.label;
-        }
-
-        const attributeMeta = []
-            .concat(model?.attributes || [])
-            .concat(searchModel?.attributes || [])
-            .find(item => column.attribute && item.attribute === column.attribute);
-        return attributeMeta ? attributeMeta.label : _upperFirst(column.attribute);
-    }, [model, props.listId, searchModel]);
-
-    const renderValue = useCallback((item, column) => {
-        // Custom component
-        if (column.valueView) {
-            const ValueView = column.valueView;
-            return (
-                <ValueView
-                    {...column}
-                    {...column.valueProps}
-                    listId={props.listId}
-                    primaryKey={props.primaryKey}
-                    item={item}
-                />
-            );
-        }
-
-        return <Format item={item} model={props.model} {...column} {...(column.formatter || {})} />;
-    }, [props.listId, props.model, props.primaryKey]);
-
-    // Columns
-    const columns = useMemo(
-        () => []
-            .concat({
-                label: __('№'),
-                valueView: ({item}) => item.index + 1,
-                visible: !!props.itemsIndexing,
-            })
-            .concat(props.columns)
-            .concat({
-                valueView: ControlsColumn,
-                valueProps: {
-                    controls: props.controls,
-                },
-                visible: !!props.controls,
-            })
-            .map(column => (_isString(column) ? {attribute: column} : column))
-            .filter((column: IGridColumn) => column.visible !== false)
-            .map(column => ({
-                ...column,
-                label: renderLabel(column),
-            })),
-        [props.columns, props.controls, props.itemsIndexing, renderLabel],
-    );
-
-    return components.ui.renderView(props.view || 'list.GridView', {
-        ...props,
-        paginationPosition,
-        paginationSizePosition,
-        layoutNamesPosition,
-        renderList,
-        renderEmpty,
-        renderPagination,
-        renderPaginationSize,
-        renderLayoutNames,
-        renderSearchForm,
-        renderValue,
-        columns,
-        onFetch,
-        onSort,
-        items: list?.items || [],
-    });
-}

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

@@ -1,54 +0,0 @@
-import * as React from 'react';
-
-import Grid from '../Grid';
-
-export const items = [
-    {
-        id: 1,
-        name: 'Ivan',
-        secondName: 'Ivanov',
-        work: 'development',
-    },
-    {
-        id: 2,
-        name: 'Petr',
-        secondName: 'Petrov',
-        work: 'manager',
-    },
-    {
-        id: 3,
-        name: 'Jhon',
-        secondName: 'Doe',
-        work: 'designer',
-    },
-];
-
-export const columns = [
-    {
-        label: 'Name',
-        attribute: 'name',
-    },
-    {
-        label: 'Second name',
-        attribute: 'secondName',
-    },
-    {
-        label: 'Work',
-        attribute: 'work',
-    },
-];
-
-/**
- * Basic
- * @order 1
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridBasicDemo'
-            items={items}
-            columns={columns}
-        />
-    </>
-);

package/src/ui/list/Grid/demo/controls.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import Grid from '../Grid';
-import {items, columns} from './basic';
-
-/**
- * Grid with controls
- * @order 9
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridControlsDemo'
-            items={items}
-            columns={columns}
-            controls={[{
-                id: 'delete',
-                onClick: (e) => {
-                    e.preventDefault();
-                    alert("It's deleted");
-                },
-            }]}
-        />
-    </>
-);

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

@@ -1,19 +0,0 @@
-import Grid from '../Grid';
-import * as React from 'react';
-import {columns} from './basic';
-
-/**
- * Grid with empty data
- * @order 2
- * @col 4
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridEmptyDemo'
-            items={[]}
-            columns={columns}
-            empty='Empty data'
-        />
-    </>
-);

package/src/ui/list/Grid/demo/formatter.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import Grid from '../Grid';
-import DateFormatter from '../../../format/DateFormatter';
-
-/**
- * Grid with DateFormatter (format: 'DD MMMM')
- * @order 7
- * @col 6
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridFormatterDemo'
-            items={[
-                {
-                    id: 1,
-                    date: '2021-09-11',
-                    route: 'Krasnoyarsk - Moscow',
-                },
-                {
-                    id: 2,
-                    date: '2021-09-15',
-                    route: 'Krasnoyarsk - Krasnodar',
-                },
-                {
-                    id: 3,
-                    date: '2021-09-20',
-                    route: 'Krasnoyarsk - Tomsk',
-                },
-            ]}
-            columns={[
-                {
-                    attribute: 'route',
-                    label: 'Route',
-                },
-                {
-                    attribute: 'date',
-                    label: 'Date',
-                    formatter: {
-                        component: DateFormatter,
-                        format: 'DD MMMM',
-                    },
-                },
-            ]}
-        />
-    </>
-);

package/src/ui/list/Grid/demo/indexing.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-import Grid from '../Grid';
-import {items, columns} from './basic';
-
-/**
- * Grid with indexing items
- * @order 8
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridIndexingDemo'
-            items={items.map((item, index) => ({...item, index}))}
-            columns={columns}
-            itemsIndexing
-            paginationSize={{
-                defaultValue: 2,
-                sizes: [2, 3, 4],
-            }}
-            pagination
-        />
-    </>
-);

package/src/ui/list/Grid/demo/inner-search-form.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../../../form/InputField/InputField';
-import Grid from '../Grid';
-import {items, columns} from './basic';
-
-export const searchForm = {
-    layout: 'table',
-    fields: [
-        {
-            label: 'Name',
-            attribute: 'name',
-            component: InputField,
-        },
-        {
-            label: 'Second name',
-            attribute: 'secondName',
-            component: InputField,
-        },
-        {
-            label: 'Work',
-            attribute: 'work',
-            component: InputField,
-        },
-    ],
-};
-
-/**
- * Grid with inner search form
- * @order 5
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridInnerSearchFormDemo'
-            items={items}
-            columns={columns}
-            searchForm={searchForm}
-        />
-    </>
-);

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import Grid from '../Grid';
-import {columns, items} from './basic';
-
-/**
- * Grid with load more
- * @order 4
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridLoadMoreDemo'
-            items={items}
-            columns={columns}
-            pagination={{
-                loadMore: true,
-            }}
-            paginationSize={{
-                defaultValue: 2,
-                sizes: [2, 3, 4],
-            }}
-        />
-    </>
-);

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

@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-import Grid from '../Grid';
-import {items, columns} from './basic';
-
-/**
- * Grid with page numbers
- * @order 3
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridPaginationDemo'
-            items={items}
-            columns={columns}
-            paginationSize={{
-                defaultValue: 2,
-                sizes: [2, 3, 4],
-            }}
-            pagination
-        />
-    </>
-);

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

@@ -1,23 +0,0 @@
-import Grid from '../Grid';
-import {columns, items} from './basic';
-import * as React from 'react';
-import {searchForm} from './inner-search-form';
-
-/**
- * Grid with search form
- * @order 6
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridSearchFormDemo'
-            items={items}
-            columns={columns}
-            searchForm={{
-                ...searchForm,
-                layout: 'default',
-            }}
-        />
-    </>
-);

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

@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-import Grid from '../Grid';
-import {items} from '../../List/demo/sort';
-
-/**
- * Grid with sorting
- * @order 7
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridSortDemo'
-            items={items}
-            columns={[
-                {
-                    attribute: 'title',
-                    label: 'Title',
-                },
-                {
-                    attribute: 'price',
-                    label: 'Price',
-                    sortable: true,
-                },
-            ]}
-        />
-    </>
-);

package/src/ui/list/Grid/demo/visible.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import Grid from '../Grid';
-import {columns, items} from './basic';
-
-/**
- * Grid with invisible column (column Work - visible: false)
- * @order 10
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='GridVisibleDemo'
-            items={items}
-            columns={columns.map(column => ({
-                ...column,
-                visible: column.attribute !== 'work',
-            }))}
-            paginationSize={{
-                enable: true,
-                defaultValue: 30,
-            }}
-        />
-    </>
-);

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

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