@steroidsjs/core 2.0.0-rc.7 → 2.0.1-beta.113

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import Grid from '../Grid';
+import {searchForm, items} from './load-more';
+
+export default () => (
+    <>
+        <h6>
+            Pagination
+        </h6>
+        <Grid
+            listId='ListStoryPagination'
+            items={items}
+            columns={[
+                {
+                    label: 'Name',
+                    attribute: 'name',
+                    // visible: false,
+                },
+                {
+                    label: __('Second name'),
+                    attribute: 'secondName',
+                },
+                {
+                    label: 'Work',
+                    attribute: 'work',
+                },
+            ]}
+            searchForm={searchForm}
+            paginationSize={{
+                enable: true,
+                defaultValue: 10,
+            }}
+            pagination={{
+                enable: true,
+                loadMore: false,
+            }}
+        />
+    </>
+);

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import Grid from '../Grid';
+import {searchForm, items} from './load-more';
+
+export default () => (
+    <>
+        <h6>
+            Visible (column Work - visible: false)
+        </h6>
+        <Grid
+            listId='ListStoryReverse'
+            items={items}
+            columns={[
+                {
+                    label: 'Name',
+                    attribute: 'name',
+                },
+                {
+                    label: __('Second name'),
+                    attribute: 'secondName',
+                },
+                {
+                    label: 'Work',
+                    attribute: 'work',
+                    visible: false,
+                },
+            ]}
+            paginationSize={{
+                enable: true,
+                defaultValue: 10,
+            }}
+            searchForm={searchForm}
+        />
+    </>
+);

package/ui/list/List/List.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import _get from 'lodash-es/get';
+import {components, list} from '../../../hoc';
+import {IListHocInput, IListHocOutput} from '../../../hoc/list';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IListProps extends IListHocInput {
+    itemView?: React.ComponentType;
+    itemProps?: object;
+    view?: React.ComponentType;
+    className?: CssClassName;
+    contentClassName?: string;
+    [key: string]: any;
+}
+
+export interface IListViewProps extends IListProps, IListHocOutput {
+    content: any,
+}
+
+export interface IListItemViewProps extends IListProps, IListHocOutput {
+    id: PrimaryKey,
+    item: {
+        id?: PrimaryKey,
+        title?: string | any,
+        label?: string | any,
+    },
+    index: number,
+    className?: CssClassName;
+    contentClassName?: string;
+    layoutSelected?: PrimaryKey;
+}
+
+interface IListPrivateProps extends IListHocOutput, IComponentsHocOutput {
+
+}
+
+@list()
+@components('ui')
+export default class List extends React.PureComponent<IListProps & IListPrivateProps> {
+    constructor(props) {
+        super(props);
+        this.renderItem = this.renderItem.bind(this);
+    }
+
+    render() {
+        const ListView = this.props.view || this.props.ui.getView('list.ListView');
+        return (
+            <ListView
+                {...this.props}
+                content={this.props.items && this.props.items.map(this.renderItem)}
+            />
+        );
+    }
+
+    renderItem(item, index) {
+        const ItemView = this.props.itemView || this.props.ui.getView('list.ListItemView');
+        const id = _get(item, this.props.primaryKey);
+        const itemProps = {
+            ...this.props,
+            ...this.props.itemProps,
+            id,
+            item,
+            index,
+        } as IListItemViewProps;
+
+        return (
+            <ItemView
+                {...this.props}
+                {...this.props.itemProps}
+                {...itemProps}
+                key={id || index}
+            />
+        );
+    }
+}

package/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 4
+ */
+export default () => (
+    <List
+        listId='ListDemoBasic'
+        items={demoItems}
+        className='list-group'
+        itemProps={{
+            className: 'list-group-item',
+        }}
+    />
+);

package/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 4
+ */
+export default () => (
+    <List
+        listId='ListDemoPaginationEmpty'
+        items={[]}
+        empty='Empty data'
+    />
+);

package/ui/list/List/demo/pagination-layout.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import List from '../List';
+import {demoItems} from './basic';
+
+/**
+ * Pagination with layout switcher
+ * @order 5
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoPaginationLayout'
+        items={demoItems}
+        layout={{
+            items: [
+                {
+                    id: 'list',
+                    label: 'List',
+                },
+                {
+                    id: 'grid',
+                    label: 'Grid',
+                },
+            ],
+        }}
+        contentClassName='row mx-lg-n1'
+        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/ui/list/List/demo/pagination-more-size.tsx

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

package/ui/list/List/demo/pagination-pages.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 4
+ */
+export default () => (
+    <List
+        listId='ListDemoPaginationPages'
+        items={demoItems}
+        pagination={{
+            loadMore: false,
+            position: 'both'
+        }}
+        paginationSize={{
+            defaultValue: 3,
+            sizes: [2, 3, 4],
+        }}
+        className='list-group'
+        itemProps={{
+            className: 'list-group-item',
+        }}
+    />
+);

package/ui/list/List/demo/pagination-search.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import List from '../List';
+import {demoItems} from './basic';
+
+/**
+ * Pagination with search form, address bar and custom pagination
+ * @order 6
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoPaginationSearch'
+        items={demoItems}
+        model={{
+            attributes: [
+                'title:string:Название',
+                {
+                    attribute: 'category',
+                    label: 'Категория',
+                    searchField: 'DropDownField',
+                }
+            ]
+        }}
+        searchForm={{
+            layout: 'horizontal',
+            fields: [
+                'title',
+                'category',
+            ]
+        }}
+        paginationSize={{
+            attribute: 'ps',
+            sizes: [2, 4],
+        }}
+        addressBar
+        className='list-group'
+        itemProps={{
+            className: 'list-group-item',
+        }}
+    />
+);

package/ui/list/Pagination/Pagination.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import _get from 'lodash-es/get';
+import {components, theme} from '../../../hoc';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {ListControlPosition} from '../../../hoc/list';
+import {IButtonProps} from '../../form/Button/Button';
+import {IThemeHocInput, IThemeHocOutput} from '../../../hoc/theme';
+
+export interface IPaginationProps extends IThemeHocInput {
+    page?: number,
+    pageSize?: number,
+    total?: number,
+    enable?: boolean,
+    attribute?: string,
+    defaultValue?: number | null,
+    aroundCount?: number;
+    loadMore?: boolean,
+    className?: CssClassName;
+    position?: ListControlPosition,
+    buttonProps?: IButtonProps,
+    view?: CustomView,
+    onChange?: (value: number) => void,
+    [key: string]: any,
+}
+
+export interface IPaginationViewProps extends IPaginationProps, IThemeHocOutput {
+    totalPages: number,
+    pages: {
+        page?: number,
+        label: string,
+        isActive: boolean,
+    }[],
+    onSelect: (page: number) => void,
+    onSelectNext: () => void,
+}
+
+interface IPaginationPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+    listId?: string;
+    list?: {
+        page?: number,
+        pageSize?: number,
+        total?: number
+    };
+    syncWithAddressBar?: boolean;
+    page?: any;
+    formId?: string;
+}
+
+@connect()
+@theme()
+@components('ui')
+export default class Pagination extends React.PureComponent<IPaginationProps & IPaginationPrivateProps> {
+
+    constructor(props) {
+        super(props);
+        this._onSelect = this._onSelect.bind(this);
+        this._onSelectNext = this._onSelectNext.bind(this);
+    }
+
+    render() {
+        const page = this.props.page;
+        const totalPages = Math.ceil((this.props.total || 0) / (this.props.pageSize || 1));
+
+        // Do not show in last page in 'loadMore' mode
+        if (this.props.loadMore && page >= totalPages) {
+            return null;
+        }
+
+        const PaginationView = this.props.view ||
+            (this.props.loadMore
+                ? this.props.ui.getView('list.PaginationMoreView')
+                : this.props.ui.getView('list.PaginationButtonView'));
+        return (
+            <PaginationView
+                {...this.props}
+                totalPages={totalPages}
+                pages={this.generatePages(page, totalPages).map(page => ({
+                    page: page !== '...' ? page : null,
+                    label: page,
+                    isActive: _get(this.props, 'list.page') === page
+                }))}
+                onSelect={this._onSelect}
+                onSelectNext={this._onSelectNext}
+            />
+        );
+    }
+
+    generatePages(page, totalPages) {
+        if (!page || !totalPages) {
+            return [];
+        }
+
+        const pages = [];
+        const aroundCount = this.props.aroundCount || 3;
+        for (let i = 1; i <= totalPages; i++) {
+            // Store first and last
+            if (i === 1 || i === totalPages) {
+                pages.push(i);
+                continue;
+            }
+            // Store around
+            if (page - aroundCount < i && i < page +aroundCount) {
+                pages.push(i);
+                continue;
+            }
+            if (pages[pages.length - 1] !== '...') {
+                pages.push('...');
+            }
+        }
+        return pages;
+    }
+
+    _onSelect(page) {
+        if (this.props.onChange && page) {
+            this.props.onChange(page);
+        }
+    }
+
+    _onSelectNext() {
+        this._onSelect(this.props.list.page + 1);
+    }
+
+}

package/ui/list/Pagination/demo/basic.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import Pagination from '../Pagination';
+
+const sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large',
+};
+
+export default () => (
+    <>
+        <Pagination
+            //Pagination.defaultProps not working
+            aroundCount={5}
+            page={2}
+            pageSize={10}
+            total={100}
+        />
+        <div className='row'>
+            <div className='col'>
+                <h6>
+                    Load more
+                </h6>
+                <Pagination
+                    aroundCount={3}
+                    page={2}
+                    pageSize={20}
+                    total={100}
+                    loadMore
+                />
+            </div>
+            {Object.keys(sizes).map(size => (
+                <div className='col' key={size}>
+                    <h6>
+                        {sizes[size]}
+                    </h6>
+                    <Pagination
+                        aroundCount={3}
+                        page={2}
+                        pageSize={20}
+                        total={100}
+                        size={size}
+                    />
+                </div>
+            ))}
+        </div>
+    </>
+);

package/ui/list/Pagination/demo/load-more.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import Pagination from '../Pagination';
+
+export default () => (
+    <>
+        <h6>
+            Load more
+        </h6>
+        <Pagination
+            aroundCount={3}
+            page={2}
+            pageSize={20}
+            total={100}
+            loadMore
+        />
+    </>
+);

package/ui/list/Pagination/demo/sizes.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import Pagination from '../Pagination';
+
+const sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large',
+};
+
+export default () => (
+    <>
+        {Object.keys(sizes).map(size => (
+            <div className='col' key={size}>
+                <h6>
+                    {sizes[size]}
+                </h6>
+                <Pagination
+                    aroundCount={3}
+                    page={2}
+                    pageSize={20}
+                    total={100}
+                    size={size}
+                />
+            </div>
+        ))}
+    </>
+);

package/ui/list/PaginationSize/PaginationSize.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import _get from 'lodash-es/get';
+import {components} from '../../../hoc';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {ListControlPosition} from '../../../hoc/list';
+
+export interface IPaginationSizeProps {
+    enable?: boolean,
+    attribute?: string,
+    defaultValue?: number | null,
+    sizes?: number[];
+    position?: ListControlPosition,
+    className?: CssClassName;
+    size?: Size;
+    view?: CustomView,
+    onChange?: (value: number) => void,
+    [key: string]: any,
+}
+
+export interface IPaginationSizeViewProps extends IPaginationSizeProps {
+    items: {
+        size: number,
+        label: string | number,
+        isActive: boolean,
+    }[],
+    onSelect: (size: number) => void,
+}
+
+interface IPaginationSizePrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+    listId?: string;
+    list?: {
+        page?: number
+        pageSize?: number
+        total?: number
+    };
+}
+
+const defaultProps = {
+    sizes: [30, 50, 100],
+};
+
+@connect()
+@components('ui')
+export default class PaginationSize extends React.PureComponent<IPaginationSizeProps & IPaginationSizePrivateProps> {
+
+    static defaultProps = defaultProps;
+
+    constructor(props) {
+        super(props);
+
+        this._onSelect = this._onSelect.bind(this);
+    }
+
+    render() {
+        const PaginationSizeView =
+            this.props.view || this.props.ui.getView('list.PaginationSizeView');
+        return (
+            <PaginationSizeView
+                {...this.props}
+                items={this.props.sizes.map(size => ({
+                    size,
+                    label: size,
+                    isActive: _get(this.props, 'list.pageSize') === size
+                }))}
+                onSelect={this._onSelect}
+            />
+        );
+    }
+
+    _onSelect(value) {
+        this.props.onChange(value);
+    }
+
+}

package/ui/list/PaginationSize/demo/basic.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import PaginationSize from '../PaginationSize';
+
+const sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large',
+};
+
+export default () => (
+    <>
+        <div className='row'>
+            {Object.keys(sizes).map(size => (
+                <div className='col' key={size}>
+                    <h6>
+                        {sizes[size]}
+                    </h6>
+                    <PaginationSize
+                        list={{
+                            page: 2,
+                            pageSize: 20,
+                            total: 100,
+                        }}
+                        size={size}
+                    />
+                </div>
+            ))}
+        </div>
+    </>
+);