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

package/ui/list/Accordion/Accordion.tsx

@@ -0,0 +1,146 @@
+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';
+import {ReactNode} from 'react';
+
+export interface IAccordionProps extends IListHocInput {
+    itemView: any;
+    itemProps?: any;
+    headerView: any;
+    headerProps?: any;
+    headerLabelAttribute?: string;
+    view?: any;
+    openFirst?: boolean;
+    openedId?: number | string;
+    onToggle?: (...args: any[]) => any;
+    [key: string]: any,
+}
+
+export interface IAccordionViewProps extends IListHocOutput {
+    renderHeader: (item: object, index?: number) => void,
+    renderItem: (item: object, index?: number) => ReactNode,
+    openedId: PrimaryKey,
+    onToggle: (item: object) => void,
+    items: {
+        id: PrimaryKey,
+        isOpened: boolean,
+    }[]
+}
+
+export interface IAccordionHeaderViewProps extends IListHocOutput {
+    id: PrimaryKey,
+    item: object,
+    index: number,
+    isOpened: boolean,
+}
+
+export interface IAccordionItemViewProps extends IListHocOutput {
+    id: PrimaryKey,
+    item: object,
+    index: number,
+    isOpened: boolean,
+}
+
+interface IAccordionPrivateProps extends IListHocOutput, IComponentsHocOutput {
+
+}
+
+interface AccordionState {
+    openedId?: any
+}
+
+@list()
+@components('ui')
+export default class Accordion extends React.PureComponent<IAccordionProps & IAccordionPrivateProps, AccordionState> {
+
+    static defaultProps = {
+        openFirst: true
+    };
+
+    constructor(props) {
+        super(props);
+        this._renderItem = this._renderItem.bind(this);
+        this._renderHeader = this._renderHeader.bind(this);
+        this._onToggle = this._onToggle.bind(this);
+        this.state = {
+            openedId:
+                this.props.openedId ||
+                (this.props.openFirst
+                    ? _get(this.props, ['items', '0', this.props.primaryKey]) || 0
+                    : null)
+        };
+    }
+
+    componentDidMount() {
+        if (this.props.onToggle && this.state.openedId) {
+            this.props.onToggle(this.state.openedId);
+        }
+    }
+
+    render() {
+        const AccordionView =
+            this.props.view || this.props.ui.getView('list.AccordionView');
+        return (
+            <AccordionView
+                {...this.props}
+                renderHeader={this._renderHeader}
+                renderItem={this._renderItem}
+                openedId={this.state.openedId}
+                onToggle={this._onToggle}
+                items={this.props.items.map((item, index) => {
+                    const id = _get(item, this.props.primaryKey) || index;
+                    return {
+                        ...item,
+                        id,
+                        isOpened: this.state.openedId === id
+                    };
+                })}
+            />
+        );
+    }
+
+    _renderHeader(item, index) {
+        const AccordionItemHeaderView =
+            this.props.headerView ||
+            this.props.ui.getView('list.AccordionItemHeaderView');
+        return this._renderItemInternal(
+            item,
+            index,
+            AccordionItemHeaderView,
+            this.props.headerProps
+        );
+    }
+
+    _renderItem(item, index) {
+        return this._renderItemInternal(
+            item,
+            index,
+            this.props.itemView,
+            this.props.itemProps
+        );
+    }
+
+    _renderItemInternal(item, index, ItemView, itemProps) {
+        return (
+            <ItemView
+                {...this.props}
+                {...itemProps}
+                id={item.id}
+                item={item}
+                index={index}
+                isOpened={item.isOpened}
+            />
+        );
+    }
+
+    _onToggle(item) {
+        const openedId = this.state.openedId === item.id ? null : item.id;
+        if (this.props.onToggle) {
+            this.props.onToggle(item, !!openedId);
+        }
+        this.setState({openedId});
+    }
+
+}

package/ui/list/Accordion/index.ts

@@ -0,0 +1,2 @@
+import Accordion from './Accordion';
+export default Accordion;

package/ui/list/CheckboxColumn/CheckboxColumn.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import _get from 'lodash-es/get';
+import {components} from '../../../hoc';
+import {toggleAll, toggleItem} from '../../../actions/list';
+import {isChecked, isCheckedAll} from '../../../reducers/list';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface ICheckboxColumnProps {
+    fieldProps?: any;
+    view?: any;
+    [key: string]: any,
+}
+
+export interface ICheckboxColumnViewProps {
+    fieldProps: {
+        fieldId: string,
+    },
+    input: {
+        name: string,
+        value: any,
+        onChange: any,
+    },
+}
+
+interface ICheckboxColumnPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+    listId?: any;
+    item?: any;
+    primaryKey?: string;
+    isChecked?: boolean;
+}
+
+@connect((state, props) => ({
+    isChecked: props.item
+        ? isChecked(state, props.listId, _get(props.item, props.primaryKey))
+        : isCheckedAll(state, props.listId)
+}))
+@components('ui')
+export default class CheckboxColumn extends React.PureComponent<ICheckboxColumnProps & ICheckboxColumnPrivateProps> {
+
+    constructor(props) {
+        super(props);
+        this._onChange = this._onChange.bind(this);
+    }
+
+    render() {
+        const CheckboxColumnView =
+            this.props.view || this.props.ui.getView('list.CheckboxColumnView');
+        return (
+            <CheckboxColumnView
+                {...this.props}
+                fieldProps={{
+                    fieldId:
+                        this.props.listId +
+                        '_checkbox_' +
+                        (this.props.item ? this.props.item[this.props.primaryKey] : 'all'),
+                    ...this.props.fieldProps
+                }}
+                input={{
+                    name: this.props.listId + '_checkbox',
+                    value: this.props.isChecked,
+                    onChange: this._onChange
+                }}
+            />
+        );
+    }
+
+    _onChange() {
+        if (this.props.item) {
+            this.props.dispatch(
+                toggleItem(
+                    this.props.listId,
+                    _get(this.props.item, this.props.primaryKey)
+                )
+            );
+        } else {
+            this.props.dispatch(toggleAll(this.props.listId));
+        }
+    }
+
+}

package/ui/list/ControlsColumn/ControlsColumn.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import _upperFirst from 'lodash-es/upperFirst';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IButtonProps} from '../../form/Button/Button';
+import {IControlItem} from '../../nav/Controls/Controls';
+
+export interface IControlsColumnItem extends IButtonProps {
+    rule?: 'view' | 'update' | 'delete' | string,
+    visible?: boolean,
+}
+
+export interface IControlsColumnProps {
+    primaryKey?: string;
+    controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
+    item?: any;
+    view?: any;
+    [key: string]: any;
+}
+
+export interface IControlsColumnViewProps {
+    items: IControlsColumnItem[],
+}
+
+interface IControlsColumnPrivateProps extends IComponentsHocOutput {
+
+}
+
+@components('ui')
+export default class ControlsColumn extends React.PureComponent<IControlsColumnProps & IControlsColumnPrivateProps> {
+
+    render() {
+        const controls = typeof this.props.controls === 'function'
+            ? this.props.controls(this.props.item, this.props.primaryKey)
+            : this.props.controls;
+        const ControlsColumnView = this.props.view || this.props.ui.getView('list.ControlsColumnView');
+        return (
+            <ControlsColumnView
+                {...this.props}
+                items={controls.map(control => ({
+                    ...control,
+                    position: 'left',
+                    visible: control.visible !== false && this.props.item['can' + _upperFirst(control.id)] !== false,
+                }))}
+            />
+        );
+    }
+
+}

package/ui/list/Detail/Detail.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import {components} from '../../../hoc';
+import {connect} from 'react-redux';
+import _isString from 'lodash-es/isString';
+import {getModel} from '../../../reducers/fields';
+import _upperFirst from 'lodash-es/upperFirst';
+import _isObject from 'lodash-es/isObject';
+import _isFunction from 'lodash-es/isFunction';
+import _get from 'lodash-es/get';
+import Format from '../../format/Format';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IDetailColumn {
+  label?: string | boolean | JSX.Element,
+  hint?: string | boolean | JSX.Element,
+  attribute?: string,
+  visible?: boolean,
+  value?: any,
+  valueView?: any,
+  valueProps?: any,
+}
+
+export interface IDetailProps {
+    item?: any;
+    model?: string | ((...args: any[]) => any) | any;
+    view?: any;
+    attributes?: (string | IDetailColumn)[];
+    className?: CssClassName,
+    size?: Size,
+    emptyText?: any,
+    [key: string]: any,
+}
+
+export interface IDetailViewProps {
+    className?: CssClassName,
+    items: (IDetailColumn & {
+        label: any,
+        value: any,
+    })[],
+}
+
+interface IDetailPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+
+}
+
+@connect((state, props) => ({
+    model: getModel(state, props.model),
+}))
+@components('ui')
+export default class Detail extends React.PureComponent<IDetailProps & IDetailPrivateProps> {
+    render() {
+        const attributes = this.props.attributes
+            .map(column => (_isString(column) ? {attribute: column} : column))
+            .filter((column:IDetailColumn) => column.visible !== false);
+        const DetailView = this.props.view || this.props.ui.getView('list.DetailView');
+        return (
+            <DetailView
+                {...this.props}
+                items={attributes.map((attribute:IDetailColumn) => ({
+                    ...attribute,
+                    label: this.renderLabel(attribute),
+                    value: this.renderValue(attribute)
+                }))}
+            />
+        );
+    }
+
+    renderLabel(attribute) {
+        if (attribute.label || attribute.label === '') {
+            return attribute.label;
+        }
+        const autoLabel = _upperFirst(attribute.attribute);
+        if (_isObject(this.props.model)) {
+            if (_isFunction(this.props.model.formatters)) {
+                return (
+                    _get(this.props.model.formatters(), [attribute.attribute, 'label']) ||
+                    autoLabel
+                );
+            }
+            if (_get(this.props, ['model', 'formatters', attribute.attribute])) {
+                return (
+                    this.props.model.formatters[attribute.attribute].label || autoLabel
+                );
+            }
+        }
+        return autoLabel;
+    }
+
+    renderValue(attribute) {
+        // Custom component
+        if (attribute.valueView) {
+            const ValueView = attribute.valueView;
+            return (
+                <ValueView
+                    {...attribute}
+                    {...attribute.valueProps}
+                    item={this.props.item}
+                />
+            );
+        }
+
+        if (attribute.value) {
+            return attribute.value;
+        }
+
+        return (
+            <Format
+                item={this.props.item}
+                model={this.props.model}
+                emptyText={this.props.emptyText}
+                {...attribute}
+            />
+        );
+    }
+}

package/ui/list/Detail/index.ts

@@ -0,0 +1,2 @@
+import Detail from './Detail';
+export default Detail;

package/ui/list/Empty/Empty.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IEmptyProps {
+    enable?: boolean,
+    text?: string | React.ReactNode;
+    className?: CssClassName;
+    view?: CustomView,
+}
+
+export interface IEmptyViewProps extends IEmptyProps{
+    [key: string]: any,
+}
+
+interface IEmptyPrivateProps extends IComponentsHocOutput {
+
+}
+
+@components('ui')
+export default class Empty extends React.PureComponent<IEmptyViewProps & IEmptyPrivateProps> {
+    render() {
+        const EmptyView = this.props.view || this.props.ui.getView('list.EmptyView');
+        return (
+            <EmptyView {...this.props} />
+        );
+    }
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import Empty from '../Empty';
+
+export default () => (
+    <>
+        <Empty
+            text='Записей не найдено'
+        />
+    </>
+);

package/ui/list/Grid/Grid.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import _get from 'lodash-es/get';
+import _upperFirst from 'lodash-es/upperFirst';
+import _isString from 'lodash-es/isString';
+import _isObject from 'lodash-es/isObject';
+import _isFunction from 'lodash-es/isFunction';
+import {components, list} from '../../../hoc';
+import ControlsColumn from '../ControlsColumn';
+import Format from '../../format/Format';
+import {IListHocInput, IListHocOutput} from '../../../hoc/list';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IDetailColumn} from '../Detail/Detail';
+import {IControlItem} from '../../nav/Controls/Controls';
+import {IFormProps} from '../../form/Form/Form';
+
+export interface IGridColumn {
+    attribute?: string,
+    format?:
+        | string
+        | {
+        component?: string | ((...args: any[]) => any)
+    },
+    label?: React.ReactNode,
+    hint?: React.ReactNode,
+    headerClassName?: CssClassName,
+    visible?: boolean,
+    headerView?: any,
+    headerProps?: any,
+    valueView?: any,
+    valueProps?: any,
+    className?: CssClassName,
+    sortable?: boolean,
+}
+
+export interface IGridProps extends IListHocInput {
+    view?: any;
+    columns: (string | IGridColumn)[];
+    controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
+    model?: any;
+    label?: any;
+    fields?: any;
+    searchForm?: IFormProps;
+    itemsIndexing?: any;
+    onSort?: (arg: string) => void;
+    fetch?: () => void;
+    [key: string]: any;
+}
+
+export interface IGridViewProps extends IGridProps, IGridPrivateProps {
+    renderValue: (item: object, column: IDetailColumn | IGridColumn) => any,
+    columns: (IGridColumn & {
+        label: any,
+    })[],
+    className: CssClassName,
+}
+
+interface IGridPrivateProps extends IListHocOutput, IComponentsHocOutput {
+    list?: any;
+}
+
+@list()
+@components('ui')
+export default class Grid extends React.PureComponent<IGridProps & IGridPrivateProps> {
+    constructor(props) {
+        super(props);
+        this.renderValue = this.renderValue.bind(this);
+    }
+
+    render() {
+        if (
+            (this.props.scope || []).includes('model') &&
+            !this.props.list.isFetched
+        ) {
+            return null;
+        }
+        const columns = this.props.columns
+            .map(column => (_isString(column) ? {attribute: column} : column))
+            .filter((column: IGridColumn) => column.visible !== false);
+        if (this.props.controls) {
+            columns.push({
+                valueView: ControlsColumn,
+                valueProps: {
+                    controls: this.props.controls
+                }
+            });
+        }
+        if (this.props.itemsIndexing) {
+            columns.unshift({
+                label: __('№'),
+                valueView: props => props.item.index
+            });
+        }
+        const GridView = this.props.view || this.props.ui.getView('list.GridView');
+        return (
+            <GridView
+                {...this.props}
+                renderValue={this.renderValue}
+                columns={columns.map((column: IGridColumn) => ({
+                    ...column,
+                    label: this.renderLabel(column)
+                }))}
+            />
+        );
+    }
+
+    renderLabel(column) {
+        if (column.headerView) {
+            const HeaderView = column.headerView;
+            return (
+                <HeaderView
+                    {...column}
+                    {...column.headerProps}
+                    listId={this.props.listId}
+                />
+            );
+        }
+        if (column.label || column.label === '') {
+            return column.label;
+        }
+        const autoLabel = _upperFirst(column.attribute);
+        if (_isObject(this.props.model)) {
+            if (_isFunction(this.props.model.formatters)) {
+                return (
+                    _get(this.props.model.formatters(), [column.attribute, 'label']) ||
+                    autoLabel
+                );
+            }
+            if (_get(this.props, ['model', 'formatters', column.attribute])) {
+                return this.props.model.formatters[column.attribute].label || autoLabel;
+            }
+        }
+        if (_isObject(_get(this.props, 'searchForm.model'))) {
+            if (_isFunction(this.props.searchForm.model.fields)) {
+                return (
+                    _get(this.props.searchForm.model.fields(), [
+                        column.attribute,
+                        'label'
+                    ]) || autoLabel
+                );
+            }
+            if (
+                _get(this.props, ['searchForm', 'model', 'fields', column.attribute])
+            ) {
+                return (
+                    this.props.searchForm.model.fields[column.attribute].label ||
+                    autoLabel
+                );
+            }
+        }
+        return autoLabel;
+    }
+
+    renderValue(item, column) {
+        // Custom component
+        if (column.valueView) {
+            const ValueView = column.valueView;
+            return (
+                <ValueView
+                    {...column}
+                    {...column.valueProps}
+                    listId={this.props.listId}
+                    primaryKey={this.props.primaryKey}
+                    item={item}
+                />
+            );
+        }
+        return <Format item={item} model={this.props.model} {...column} />;
+    }
+}

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import Grid from '../Grid';
+import DateField from '../../../form/DateField/DateField';
+import InputField from '../../../form/InputField/InputField';
+
+export const searchForm = {
+    fields: [
+        {
+            label: 'Input',
+            attribute: 'input',
+            component: InputField,
+        },
+        {
+            label: 'Date',
+            attribute: 'date',
+            component: DateField,
+        },
+    ],
+};
+
+export const items = [
+    {
+        name: 'Ivan',
+        secondName: 'Ivanov',
+        work: 'development',
+    },
+    {
+        name: 'Petr',
+        secondName: 'Petrov',
+        work: 'manager',
+    },
+    {
+        name: 'Jhon',
+        secondName: 'Doe',
+        work: 'designer',
+    },
+];
+
+export default () => (
+    <>
+        <h6>
+            Load more
+        </h6>
+        <Grid
+            listId='ListStoryLoadMore'
+            items={items}
+            columns={[
+                {
+                    label: 'Name',
+                    attribute: 'name',
+                },
+                {
+                    label: __('Second name'),
+                    attribute: 'secondName',
+                },
+                {
+                    label: 'Work',
+                    attribute: 'work',
+                },
+            ]}
+            searchForm={searchForm}
+            pagination={{
+                loadMore: true,
+            }}
+            paginationSize={{
+                defaultValue: 10,
+            }}
+        />
+    </>
+);