@steroidsjs/core 2.2.87 → 2.3.0-beta.1

package/src/ui/list/Pagination/Pagination.tsx

@@ -0,0 +1,191 @@
+import _get from 'lodash-es/get';
+import {useCallback, useMemo} from 'react';
+import * as React from 'react';
+import {useComponents} from '../../../hooks';
+import useForm from '../../../hooks/useForm';
+import {formChange} from '../../../actions/form';
+import {ListControlPosition} from '../../../hooks/useList';
+import {IButtonProps} from '../../form/Button/Button';
+
+/**
+ * Pagination
+ * Компонент с пагинацией страниц.
+ */
+export interface IPaginationProps {
+    /**
+     * Аттрибут (название) в форме для поля пагинации
+     * @example page
+     */
+    attribute?: string,
+
+    /**
+     * Аттрибут (название) в форме для поля с количеством элементов на странице
+     * @example pageSize
+     */
+    sizeAttribute?: string,
+
+    /**
+     * Указывает, какое количество кнопок с номерами страниц будет доступно до и после выбранной страницы,
+     * включая выбранную. Остальные будут спрятаны в элемент "..."
+     * @example 5
+     */
+    aroundCount?: number;
+
+    /**
+     * Вместо списка с номерами страниц будет кнопка "Загрузить еще"
+     * @example true
+     */
+    loadMore?: boolean,
+
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
+
+    /**
+     * Расположение пагинации
+     * @example 'both'
+     */
+    position?: ListControlPosition,
+
+    buttonProps?: IButtonProps,
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView,
+
+    /**
+     * Обработчик, который вызывается после смены страницы
+     * @param {number} value
+     * @return {void}
+     */
+    onChange?: (value: number) => void,
+
+    /**
+     * Размер
+     */
+    size?: Size,
+
+    /**
+     * Темная тема
+     */
+    dark?: boolean,
+
+    [key: string]: any,
+}
+
+export interface IPaginationViewProps extends IPaginationProps {
+    totalPages: number,
+    pages: {
+        page?: number,
+        label: string,
+        isActive: boolean,
+    }[],
+    onSelect: (page: number) => void,
+    onSelectNext: () => void,
+}
+
+export const generatePages = (page, totalPages, aroundCount = 3) => {
+    if (!page || !totalPages) {
+        return [];
+    }
+
+    const pages = [];
+    for (let i = 1; i <= totalPages; i += 1) {
+        // Store first and last
+        if (i === 1 || i === totalPages || (page - aroundCount < i && i < page + aroundCount)) {
+            pages.push(i);
+        } else if (pages[pages.length - 1] !== '...') {
+            pages.push('...');
+        }
+    }
+    return pages;
+};
+
+function Pagination(props: IPaginationProps): JSX.Element {
+    const components = useComponents();
+
+    const initialValues = {
+        page: props.list?.[props.attribute],
+        pageSize: props.list?.[props.sizeAttribute],
+    };
+
+    const {
+        formId,
+        formDispatch,
+        formSelector,
+    } = useForm();
+
+    const {
+        page,
+        pageSize,
+    } = formSelector(({values}) => ({
+        page: _get(values, props.attribute),
+        pageSize: _get(values, props.sizeAttribute),
+    })) || initialValues;
+
+    const totalPages = Math.ceil((props.list?.total || 0) / (pageSize || 1));
+
+    const pages = useMemo(
+        () => generatePages(page, totalPages, props.aroundCount)
+            .map((pageItem, index, pages) => {
+                // Номер страницы для '...' кнопки (выбирает страницу между двумя соседними пронумерованными)
+                const pageNumberForButtonWithDots = Math.floor(((pages[index + 1] + pages[index - 1]) / 2));
+                return {
+                    page: pageItem !== '...' ? pageItem : pageNumberForButtonWithDots,
+                    label: pageItem,
+                    isActive: page === pageItem,
+                }
+            }),
+        [page, props.aroundCount, totalPages],
+    );
+
+    const onSelect = useCallback((newPage) => {
+        if (formDispatch) {
+            formDispatch(formChange(formId, props.attribute, newPage));
+        }
+        if (props.onChange && newPage) {
+            props.onChange.call(null, newPage);
+        }
+    }, [formDispatch, formId, props.attribute, props.onChange]);
+
+    const onSelectNext = useCallback(() => {
+        onSelect(page + 1);
+    }, [onSelect, page]);
+
+    if (!props.list || !page || !pageSize || props.list.total <= pageSize) {
+        return null;
+    }
+
+    // Do not show in last page in 'loadMore' mode
+    if (props.loadMore && page >= totalPages) {
+        return null;
+    }
+
+    const defaultView = (props.loadMore ? 'list.PaginationMoreView' : 'list.PaginationButtonView');
+    return components.ui.renderView(props.view || defaultView, {
+        totalPages,
+        pages,
+        onSelect,
+        onSelectNext,
+    });
+}
+
+Pagination.defaultProps = {
+    enable: true,
+    attribute: 'page',
+    aroundCount: 3,
+    defaultValue: 1,
+    loadMore: false,
+    position: 'bottom',
+    sizeAttribute: 'pageSize',
+};
+
+export const normalizePaginationProps = props => ({
+    ...Pagination.defaultProps,
+    ...(typeof props === 'boolean' ? {enable: props} : props),
+});
+
+export default React.memo(Pagination);

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import Pagination from '../Pagination';
+
+/**
+ * Basic
+ * @order 1
+ * @col 4
+ */
+export default () => (
+    <>
+        <Pagination
+            //Pagination.defaultProps not working
+            aroundCount={5}
+            list={{
+                total: 100,
+                page: 2,
+                pageSize: 10,
+            }}
+        />
+    </>
+);

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

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

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

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

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

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

package/src/ui/list/PaginationSize/PaginationSize.tsx

@@ -0,0 +1,120 @@
+import {useCallback, useMemo} from 'react';
+import _get from 'lodash-es/get';
+import * as React from 'react';
+import {useComponents} from '../../../hooks';
+import useForm from '../../../hooks/useForm';
+import {formChange} from '../../../actions/form';
+import {ListControlPosition} from '../../../hooks/useList';
+
+/**
+ * PaginationSize
+ * Компонент для выбора количества элементов в списке
+ */
+export interface IPaginationSizeProps {
+    /**
+     * Подключить выбор количества элементов
+     * @example true
+     */
+    enable?: boolean,
+
+    /**
+     * Аттрибут (название) поля в форме
+     * @example pageSize
+     */
+    attribute?: string,
+
+    /**
+     * Список с количествами элементов на странице
+     * @example [2, 3, 4]
+     */
+    sizes?: number[];
+
+    /**
+     * Расположение элемента в списке
+     * @example 'both'
+     */
+    position?: ListControlPosition,
+
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
+
+    /**
+     * Значение по-умолчанию
+     */
+    defaultValue?: number;
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView,
+
+    /**
+     * Обработчик, который вызывается после смены страницы
+     * @param {number} value
+     * @return {void}
+     */
+    onChange?: (value: number) => void,
+
+    [key: string]: any,
+}
+
+export interface IPaginationSizeViewProps extends IPaginationSizeProps {
+    items: {
+        size: number,
+        label: string | number,
+        isActive: boolean,
+    }[],
+    onSelect: (size: number) => void,
+}
+
+function PaginationSize(props: IPaginationSizeProps): JSX.Element {
+    const components = useComponents();
+
+    const pageSize = props.list?.pageSize;
+    const items = useMemo(() => props.sizes.map(size => ({
+        size,
+        label: size,
+        isActive: pageSize === size,
+    })), [pageSize, props.sizes]);
+
+    const {formId, formDispatch} = useForm();
+    const onSelect = useCallback((newPage) => {
+        if (formDispatch) {
+            formDispatch(formChange(formId, props.attribute, newPage));
+        }
+
+        if (props.onChange && newPage) {
+            props.onChange.call(null, newPage);
+        }
+    }, [formDispatch, formId, props.attribute, props.onChange]);
+
+    if (!props.list?.items?.length) {
+        return null;
+    }
+
+    return components.ui.renderView(props.view || 'list.PaginationSizeView', {
+        ...props,
+        items,
+        onSelect,
+    });
+}
+
+PaginationSize.defaultProps = {
+    enable: false,
+    attribute: 'pageSize',
+    sizes: [30, 50, 100],
+    defaultValue: 50,
+    position: 'top',
+};
+
+export const normalizePaginationSizeProps = props => ({
+    ...PaginationSize.defaultProps,
+    enable: !!props,
+    defaultValue: _get(props, 'sizes.0') || PaginationSize.defaultProps.defaultValue,
+    ...(typeof props === 'boolean' ? {enable: props} : props),
+});
+
+export default React.memo(PaginationSize);

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import PaginationSize from '../PaginationSize';
+import {demoItems} from '../../../../ui/list/List/demo/basic';
+
+/**
+ * Basic
+ * @order 1
+ * @col 3
+ */
+export default () => (
+    <>
+        <PaginationSize
+            list={{
+                pageSize: 3,
+                items: demoItems,
+            }}
+            enable
+            attribute='pageSize'
+            sizes={[3, 6, 9]}
+            defaultValue={3}
+            position='top'
+        />
+    </>
+);

package/src/ui/list/PaginationSize/demo/size.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import PaginationSize from '../PaginationSize';
+import {demoItems} from '../../../../ui/list/List/demo/basic';
+
+const sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large',
+};
+
+/**
+ * Sizes
+ * @order 2
+ * @col 12
+ */
+export default () => (
+    <>
+        <div className='row'>
+            {Object.keys(sizes)
+                .map(size => (
+                    <div className='col' key={size}>
+                        <h6>
+                            {sizes[size]}
+                        </h6>
+                        <PaginationSize
+                            list={{
+                                pageSize: 3,
+                                items: demoItems,
+                            }}
+                            enable
+                            attribute='pageSize'
+                            sizes={[3, 6, 9]}
+                            defaultValue={3}
+                            size={size}
+                            position='top'
+                        />
+                    </div>
+                ))}
+        </div>
+    </>
+);

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

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

package/src/ui/list/SearchForm/SearchForm.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+import useForm from '../../../hooks/useForm';
+import {IFormProps} from '../../../ui/form/Form/Form';
+import {formChange} from '../../../actions/form';
+
+/**
+ * SearchForm
+ * Форма для поиска элементов в коллекции list-компонента.
+ * Форма хранит значения в локальном состоянии, а на onSubmit отправляет их в хранилище Redux,
+ * после чего в list-компонент подгружаются новые элементы коллекции.
+ */
+export interface ISearchFormProps extends IFormProps {
+    listId?: string,
+}
+
+export default React.memo((props: ISearchFormProps): JSX.Element => {
+    const {formId} = useForm();
+
+    const dispatch = useDispatch();
+    const onSubmit = useCallback((params) => {
+        props.fields.forEach(field => {
+            const attribute = typeof field === 'string' ? field : field.attribute;
+            dispatch(formChange(formId, attribute, params?.[attribute] || null));
+        });
+    }, [dispatch, formId, props.fields]);
+
+    if (!props.fields || props.layout === 'table') {
+        return null;
+    }
+    const Form = require('../../form/Form').default;
+    return (
+        <Form
+            submitLabel={__('Найти')}
+            {...props}
+            formId={formId}
+            addressBar={false}
+            onSubmit={onSubmit}
+        />
+    );
+});

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import List from '../../List';
+import {searchForm, items} from '../../List/demo/search-form';
+
+/**
+ * List with search form
+ * @order 1
+ * @col 6
+ */
+export default () => (
+    <List
+        listId='ListDemoSearch'
+        items={items}
+        searchForm={searchForm}
+        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/SearchForm/index.ts

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

package/src/ui/list/Steps/Steps.tsx

@@ -0,0 +1,60 @@
+import { useComponents } from "../../../hooks";
+import React, {useState, useEffect} from "react";
+
+interface IStepsProps {
+	stepItems: IStepItem[];
+	currentStep: number;
+	isChangeable?: boolean;
+	className?: string;
+	onChange?: (index: number) => void;
+}
+
+export interface IStepsViewProps {
+	className?: string;
+	children?: React.ReactNode;
+}
+
+export interface IStepItemViewProps {
+	stepItem: IStepItem,
+	className?: string,
+	index: number,
+	status: string,
+	disabled: boolean,
+	onChange: () => void
+}
+
+export interface IStepItem{
+	title?: string;
+	subtitle?: string;
+	description?: string;
+	icon?: string | React.ReactNode;
+	isError?: boolean;
+}
+
+function Steps(props: IStepsProps): JSX.Element {
+	const [isChangeable, setIsChangeable] = useState(false);
+
+	useEffect(() => setIsChangeable(props.isChangeable),[props.isChangeable]);
+
+	function getStepStatus(index:number, stepItem: IStepItem) {
+		if (stepItem.isError) return 'error';
+		if (props.currentStep < index) return 'wait';
+		if (props.currentStep === index) return 'active';
+		return 'finish';
+	}
+
+	return useComponents().ui.renderView("list.StepsView",{className: props.className,
+		children: props.stepItems.map(
+				(stepItem, index) =>
+					useComponents().ui.renderView("list.StepItemView",
+					{stepItem, index: index + 1, status: getStepStatus(index, stepItem), disabled: !isChangeable,
+							onChange: () => {if (isChangeable) props.onChange(index)}}
+					)
+		)});
+}
+
+Steps.defaultProps = {
+
+};
+
+export default Steps;

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

@@ -0,0 +1,3 @@
+import Steps from "./Steps";
+
+export default Steps;