@steroidsjs/core 2.0.0-rc.6 → 2.0.1-beta.112

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

@@ -1,187 +0,0 @@
-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) {
-    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 => ({
-                page: pageItem !== '...' ? pageItem : null,
-                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

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import Pagination from '../Pagination';
-
-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

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

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

@@ -1,30 +0,0 @@
-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}
-                    list={{
-                        total: 100,
-                        page: 2,
-                        pageSize: 20
-                    }}
-                    size={size}
-                />
-            </div>
-        ))}
-    </>
-);

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

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

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

@@ -1,120 +0,0 @@
-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;
-
-    /**
-     * Размер
-     */
-    size?: Size;
-
-    /**
-     * Переопределение 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) {
-    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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-import PaginationSize from '../PaginationSize';
-import {demoItems} from '../../../../ui/list/List/demo/basic';
-
-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

@@ -1,37 +0,0 @@
-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',
-};
-
-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

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

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

@@ -1,42 +0,0 @@
-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-компонент подгружаются новые элементы коллекции.
- */
-interface ISearchFormProps extends IFormProps {
-    listId?: string,
-}
-
-export default React.memo((props: ISearchFormProps) => {
-    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

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

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

package/src/ui/modal/Modal/Modal.tsx

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import {useComponents} from '../../../hooks';
-import {IControlItem} from '../../nav/Controls/Controls';
-
-/**
- * Modal
- * Модальное окно
- */
-export interface IModalProps {
-    /**
-     * Порядковый номер модального окна
-     * @example 0
-     */
-    index?: number,
-
-    /**
-     * Обработчик для закрытия модального окна
-     * @param args
-     */
-    onClose?: (...args: any[]) => any;
-
-    /**
-     * Заголовок модального окна
-     * @example 'Заявка отправлена на модерацию'
-     */
-    title?: string,
-
-    /**
-     * Размер
-     */
-    size?: Size,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-
-    /**
-     * CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-
-    /**
-     * Если для компонента ModalPortal установлено значение задержки (animationDelayMc), то после закрытия
-     * пользователем модального окна, оно исчезнет не сразу, а через указанный в animationDelayMc промежуток времени.
-     * В течение этого времени флаг isClosing будет равен true.
-     * Если задержка не установлена, модальное окно закроется сразу же и флаг isClosing всегда будет равен false.
-     * @example true
-     */
-    isClosing?: boolean;
-
-    /**
-     * Группа модального окна
-     * @example 'modal'
-     */
-    group?: string;
-
-    /**
-     * Компонент, который отрендерится внутри модального окна
-     * @example InnerModalComponent
-     */
-    component?: any;
-
-    /**
-     * Свойства для внутреннего компонента
-     */
-    componentProps?: any;
-
-    /**
-     * Коллекция контролов, которая отобразится в модальном окне
-     * @example [{label: __(('Отлично')), onClick: () => props.onClose()}]
-     */
-    controls?: IControlItem[],
-
-    [key: string]: any,
-}
-
-export interface IModalViewProps extends IModalProps {
-    isClosing?: boolean,
-}
-
-function Modal(props: IModalProps) {
-    const components = useComponents();
-
-    const ModalView = props.view || components.ui.getView('modal.ModalView');
-    const ContentComponent = props.component;
-
-    return (
-        <ModalView {...props}>
-            {(ContentComponent && (
-                <ContentComponent
-                    {...props}
-                    {...props.componentProps}
-                />
-            )) || (
-                props.children
-            )}
-        </ModalView>
-    );
-}
-
-Modal.defaultProps = {
-    size: 'md',
-};
-
-export default Modal;

package/src/ui/modal/Modal/demo/basic.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-
-import useDispatch from '../../../../hooks/useDispatch';
-import Button from '../../../form/Button';
-import ModalPortal from '../../ModalPortal';
-import {openModal} from '../../../../actions/modal';
-import Modal from '../Modal';
-
-interface IMyModalProps {
-    nextId: number,
-    isClosing: boolean;
-    onClose: (...args: any[]) => any;
-}
-
-// TODO test sub modals
-
-function MyModal(props: IMyModalProps) {
-    const dispatch = useDispatch();
-    return (
-        <Modal
-            title='Hello!'
-            isClosing={props.isClosing}
-            onClose={props.onClose}
-            controls={[{label: __(('OK')), onClick: () => props.onClose()}]}
-        >
-            <div className='mb-3'>
-                This is your modal window.
-            </div>
-            <Button
-                label='Open sub modal'
-                onClick={e => {
-                    e.preventDefault();
-                    dispatch(openModal(MyModal, {
-                        modalId: 'test' + props.nextId,
-                        nextId: props.nextId + 1,
-                    }));
-                }}
-            />
-        </Modal>
-    );
-}
-
-/**
- * Basic
- * @order 1
- * @col 6
- */
-export default () => {
-    const dispatch = useDispatch();
-    return (
-        <>
-            <ModalPortal />
-            <Button
-                label='Open modal'
-                onClick={e => {
-                    e.preventDefault();
-                    dispatch(openModal(MyModal, {
-                        modalId: 'test0',
-                        nextId: 1,
-                    }));
-                }}
-            />
-        </>
-    );
-};

package/src/ui/modal/Modal/index.ts

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