@steroidsjs/core 2.2.86 → 2.3.0-beta.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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