@steroidsjs/core 3.0.0-beta.8 → 3.0.0-beta.81

package/ui/list/Grid/Grid.d.ts

@@ -1,6 +1,15 @@
 import * as React from 'react';
+import { ILinkProps } from 'src/ui/nav/Link/Link';
 import { IListConfig, ListControlPosition } from '../../../hooks/useList';
 import { IControlItem } from '../../nav/Controls/Controls';
+export interface IColumnViewProps extends IGridColumn {
+    item: Record<string, any>;
+    size: Size;
+    primaryKey: string;
+    listId: string;
+    model: string;
+    [key: string]: any;
+}
 export interface IGridColumn {
     /**
      * Атрибут колонки, по которому происходит поиск нужного свойства в items и нужного поля в SearchForm
@@ -44,7 +53,7 @@ export interface IGridColumn {
      * Компонент для кастомизации отображения значения в ячейке
      * @example MyCustomView
      */
-    valueView?: any;
+    valueView?: any | 'ContentColumnView';
     /**
      * Свойства для компонента отображения значения в ячейке
      */
@@ -58,6 +67,48 @@ export interface IGridColumn {
      * @example true
      */
     sortable?: boolean;
+    /**
+     * Название свойства в items, которое будет использовано как subtitle
+     * @example 'name'
+     */
+    subtitleAttribute?: string;
+    /**
+     * Параметры для ссылки в колонке
+    * @example {attribute: 'name', linkProps: {target: 'blank'}, url: 'https://kozhindev.com'}
+    */
+    link?: {
+        attribute: string;
+        linkProps?: ILinkProps;
+        urlAttribute: string;
+    };
+    /**
+    * Параметры для иконки в колонке
+    * @example {attribute: 'icon', isLeft: true}
+    */
+    icon?: {
+        attribute: string;
+        isLeft?: boolean;
+    };
+    /**
+    *  Параметры для картинки в колонке
+    * @example {attribute: 'icon', isLeft: true}
+    */
+    picture?: {
+        attribute: string;
+        isLeft?: boolean;
+    };
+    /**
+    * Диаграмма.
+    * Цвет должен соответствовать success | warning | danger | secondary.
+    * Цвета можно расширить или изменить через стили (см. colors.scss в react-bootstrap)
+    */
+    diagram?: {
+        type: 'horizontal' | 'vertical' | 'circle';
+        items: {
+            color: 'success' | 'warning' | 'danger' | 'secondary' | string;
+            percentageAttribute: string;
+        }[];
+    };
 }
 /**
  * Grid
@@ -68,7 +119,7 @@ export interface IGridProps extends IListConfig {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
      * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
@@ -85,6 +136,14 @@ export interface IGridProps extends IListConfig {
      * должно быть задано свойство index
      */
     itemsIndexing?: any;
+    /**
+     * Размер Grid
+     */
+    size?: Size;
+    /**
+     * Включает переменные цвета для строк в таблице
+     */
+    hasAlternatingColors?: boolean;
     [key: string]: any;
 }
 export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
@@ -105,4 +164,11 @@ export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
     onFetch: (params?: Record<string, unknown>) => void;
     onSort: (value: any) => void;
 }
-export default function Grid(props: IGridProps): JSX.Element;
+declare function Grid(props: IGridProps): JSX.Element;
+declare namespace Grid {
+    var defaultProps: {
+        size: string;
+        hasAlternatingColors: boolean;
+    };
+}
+export default Grid;

package/ui/list/Grid/Grid.js

@@ -88,10 +88,15 @@ function Grid(props) {
     var renderValue = (0, react_1.useCallback)(function (item, column) {
         // Custom component
         if (column.valueView) {
-            var ValueView = column.valueView;
-            return (React.createElement(ValueView, __assign({}, column, column.valueProps, { listId: props.listId, primaryKey: props.primaryKey, item: item })));
+            var isValueViewString = typeof column.valueView === 'string';
+            var ValueView = isValueViewString ? components.ui.getView("list.".concat(column.valueView)) : column.valueView;
+            var viewProps = __assign(__assign(__assign({}, column), column.valueProps), { listId: props.listId, primaryKey: props.primaryKey, item: item, size: props.size });
+            if (isValueViewString) {
+                return components.ui.renderView(ValueView, viewProps);
+            }
+            return (React.createElement(ValueView, __assign({}, viewProps)));
         }
-        return React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {})));
+        return (React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {}))));
     }, [props.listId, props.model, props.primaryKey]);
     // Columns
     var columns = (0, react_1.useMemo)(function () { return []
@@ -117,3 +122,7 @@ function Grid(props) {
     return components.ui.renderView(props.view || 'list.GridView', __assign(__assign({}, props), { list: list, paginationPosition: paginationPosition, paginationSizePosition: paginationSizePosition, layoutNamesPosition: layoutNamesPosition, renderList: renderList, renderEmpty: renderEmpty, renderPagination: renderPagination, renderPaginationSize: renderPaginationSize, renderLayoutNames: renderLayoutNames, renderSearchForm: renderSearchForm, renderValue: renderValue, columns: columns, onFetch: onFetch, onSort: onSort, items: (list === null || list === void 0 ? void 0 : list.items) || [] }));
 }
 exports["default"] = Grid;
+Grid.defaultProps = {
+    size: 'md',
+    hasAlternatingColors: true
+};

package/ui/list/List/List.d.ts

@@ -34,10 +34,12 @@ export interface IListViewProps extends Omit<IListProps, 'onFetch'>, Omit<IListO
 }
 export interface IListItemViewProps {
     id: PrimaryKey;
+    primaryKey: PrimaryKey;
     item: {
         id?: PrimaryKey;
         title?: string | any;
         label?: string | any;
+        [key: string]: any;
     };
     index: number;
     className?: CssClassName;

package/ui/list/List/List.js

@@ -55,6 +55,7 @@ function List(props) {
         searchForm: props.searchForm,
         autoDestroy: props.autoDestroy,
         onFetch: props.onFetch,
+        onError: props.onError,
         condition: props.condition,
         addressBar: props.addressBar,
         scope: props.scope,

package/ui/list/Pagination/Pagination.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ListControlPosition } from '../../../hooks/useList';
 import { IButtonProps } from '../../form/Button/Button';
 /**
  * Pagination
@@ -41,10 +40,8 @@ export interface IPaginationProps {
      */
     className?: CssClassName;
     /**
-     * Расположение пагинации
-     * @example 'both'
-     */
-    position?: ListControlPosition;
+    * Параметры кнопки
+    */
     buttonProps?: IButtonProps;
     /**
      * Переопределение view React компонента для кастомизации отображения
@@ -69,6 +66,16 @@ export interface IPaginationProps {
      * Список, для которого используется пагинация
      */
     list?: any;
+    /**
+    * Нужно ли отображать кнопки с шагом в одну страницу
+    * @example {'true'}
+    */
+    showSteps?: boolean;
+    /**
+     * Нужно ли отображать кнопки с шагом до первой / последней страницы
+     * @example {'true'}
+     */
+    showEdgeSteps?: boolean;
     [key: string]: any;
 }
 export interface IPaginationViewProps extends IPaginationProps {
@@ -80,6 +87,11 @@ export interface IPaginationViewProps extends IPaginationProps {
     }[];
     onSelect: (page: number) => void;
     onSelectNext: () => void;
+    onSelectPrev: () => void;
+    onSelectLast: () => void;
+    onSelectFirst: () => void;
+    isFirstPage: boolean;
+    isLastPage: boolean;
 }
 export declare const generatePages: (page: any, totalPages: any, aroundCount?: number) => any[];
 declare function Pagination(props: IPaginationProps): JSX.Element;
@@ -89,6 +101,7 @@ declare namespace Pagination {
         attribute: string;
         aroundCount: number;
         defaultValue: number;
+        size: string;
         loadMore: boolean;
         position: string;
         sizeAttribute: string;

package/ui/list/Pagination/Pagination.js

@@ -44,6 +44,7 @@ var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useForm_1 = __importDefault(require("../../../hooks/useForm"));
 var form_1 = require("../../../actions/form");
+var FIRST_PAGE = 1;
 var generatePages = function (page, totalPages, aroundCount) {
     if (aroundCount === void 0) { aroundCount = 3; }
     if (!page || !totalPages) {
@@ -78,6 +79,8 @@ function Pagination(props) {
         });
     }) || initialValues, page = _e.page, pageSize = _e.pageSize;
     var totalPages = Math.ceil((((_c = props.list) === null || _c === void 0 ? void 0 : _c.total) || 0) / (pageSize || 1));
+    var isFirstPage = React.useMemo(function () { return page === FIRST_PAGE; }, [page]);
+    var isLastPage = React.useMemo(function () { return page === totalPages; }, [page, totalPages]);
     var pages = (0, react_1.useMemo)(function () { return (0, exports.generatePages)(page, totalPages, props.aroundCount)
         .map(function (pageItem, index, pagesArray) {
         // Номер страницы для '...' кнопки (выбирает страницу между двумя соседними пронумерованными)
@@ -99,26 +102,31 @@ function Pagination(props) {
     var onSelectNext = (0, react_1.useCallback)(function () {
         onSelect(page + 1);
     }, [onSelect, page]);
+    var onSelectPrev = (0, react_1.useCallback)(function () {
+        onSelect(page - 1);
+    }, [onSelect, page]);
+    var onSelectLast = (0, react_1.useCallback)(function () {
+        onSelect(totalPages);
+    }, [onSelect, totalPages]);
+    var onSelectFirst = (0, react_1.useCallback)(function () {
+        onSelect(FIRST_PAGE);
+    }, [onSelect]);
     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) {
+    if (props.loadMore && isLastPage) {
         return null;
     }
     var defaultView = (props.loadMore ? 'list.PaginationMoreView' : 'list.PaginationButtonView');
-    return components.ui.renderView(props.view || defaultView, {
-        totalPages: totalPages,
-        pages: pages,
-        onSelect: onSelect,
-        onSelectNext: onSelectNext
-    });
+    return components.ui.renderView(props.view || defaultView, __assign(__assign({}, props), { totalPages: totalPages, pages: pages, onSelect: onSelect, onSelectNext: onSelectNext, onSelectPrev: onSelectPrev, onSelectLast: onSelectLast, onSelectFirst: onSelectFirst, isFirstPage: isFirstPage, isLastPage: isLastPage }));
 }
 Pagination.defaultProps = {
     enable: true,
     attribute: 'page',
     aroundCount: 3,
     defaultValue: 1,
+    size: 'md',
     loadMore: false,
     position: 'bottom',
     sizeAttribute: 'pageSize'

package/ui/list/PaginationSize/PaginationSize.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { IButtonProps } from 'src/ui/form/Button/Button';
 import { ListControlPosition } from '../../../hooks/useList';
 /**
  * PaginationSize
  * Компонент для выбора количества элементов в списке
  */
-export interface IPaginationSizeProps {
+export interface IPaginationSizeProps extends IUiComponent {
     /**
      * Подключить выбор количества элементов
      * @example true
@@ -25,19 +26,10 @@ export interface IPaginationSizeProps {
      * @example 'both'
      */
     position?: ListControlPosition;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
     /**
      * Значение по-умолчанию
      */
     defaultValue?: number;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Обработчик, который вызывается после смены страницы
      * @param {number} value
@@ -48,13 +40,16 @@ export interface IPaginationSizeProps {
      * Список, для которого используется пагинация
      */
     list?: any;
+    /**
+     * Свойства для кнопок пагинации
+     */
+    buttonProps?: IButtonProps;
     [key: string]: any;
 }
 export interface IPaginationSizeViewProps extends IPaginationSizeProps {
     items: {
-        size: number;
+        id: number;
         label: string | number;
-        isActive: boolean;
     }[];
     onSelect: (size: number) => void;
 }
@@ -66,6 +61,9 @@ declare namespace PaginationSize {
         sizes: number[];
         defaultValue: number;
         position: string;
+        buttonProps: {
+            size: string;
+        };
     };
 }
 export declare const normalizePaginationSizeProps: (props: any) => any;

package/ui/list/PaginationSize/PaginationSize.js

@@ -45,15 +45,13 @@ var hooks_1 = require("../../../hooks");
 var useForm_1 = __importDefault(require("../../../hooks/useForm"));
 var form_1 = require("../../../actions/form");
 function PaginationSize(props) {
-    var _a, _b, _c;
+    var _a, _b;
     var components = (0, hooks_1.useComponents)();
-    var pageSize = (_a = props.list) === null || _a === void 0 ? void 0 : _a.pageSize;
     var items = (0, react_1.useMemo)(function () { return props.sizes.map(function (size) { return ({
-        size: size,
-        label: size,
-        isActive: pageSize === size
-    }); }); }, [pageSize, props.sizes]);
-    var _d = (0, useForm_1["default"])(), formId = _d.formId, formDispatch = _d.formDispatch;
+        id: size,
+        label: size
+    }); }); }, [props.sizes]);
+    var _c = (0, useForm_1["default"])(), formId = _c.formId, formDispatch = _c.formDispatch;
     var onSelect = (0, react_1.useCallback)(function (newPage) {
         if (formDispatch) {
             formDispatch((0, form_1.formChange)(formId, props.attribute, newPage));
@@ -62,7 +60,7 @@ function PaginationSize(props) {
             props.onChange.call(null, newPage);
         }
     }, [formDispatch, formId, props.attribute, props.onChange]);
-    if (!((_c = (_b = props.list) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length)) {
+    if (!((_b = (_a = props.list) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length)) {
         return null;
     }
     return components.ui.renderView(props.view || 'list.PaginationSizeView', __assign(__assign({}, props), { items: items, onSelect: onSelect }));
@@ -72,7 +70,10 @@ PaginationSize.defaultProps = {
     attribute: 'pageSize',
     sizes: [30, 50, 100],
     defaultValue: 50,
-    position: 'top'
+    position: 'top',
+    buttonProps: {
+        size: 'sm'
+    }
 };
 var normalizePaginationSizeProps = function (props) { return (__assign(__assign(__assign({}, PaginationSize.defaultProps), { enable: !!props, defaultValue: (0, get_1["default"])(props, 'sizes.0') || PaginationSize.defaultProps.defaultValue }), (typeof props === 'boolean' ? { enable: props } : props))); };
 exports.normalizePaginationSizeProps = normalizePaginationSizeProps;

package/ui/list/SearchForm/SearchForm.d.ts

@@ -7,6 +7,9 @@ import { IFormProps } from '../../../ui/form/Form/Form';
  * после чего в list-компонент подгружаются новые элементы коллекции.
  */
 export interface ISearchFormProps extends IFormProps {
+    /**
+    * Id списка
+    */
     listId?: string;
 }
 declare const _default: React.MemoExoticComponent<(props: ISearchFormProps) => JSX.Element>;

package/ui/list/SearchForm/demo/basic.js

@@ -28,12 +28,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var List_1 = __importDefault(require("../../List"));
-var search_form_1 = require("../../List/demo/search-form");
+// import {searchForm, items} from '../../List/demo/search-form';
 /**
  * List with search form
  * @order 1
  * @col 6
  */
-exports["default"] = (function () { return (React.createElement(List_1["default"], { listId: 'ListDemoSearch', items: search_form_1.items, searchForm: search_form_1.searchForm, className: 'list-group', itemView: function (props) { return (React.createElement("div", { className: 'list-group-item' },
+exports["default"] = (function () { return (React.createElement(List_1["default"], { listId: 'ListDemoSearch', 
+    // items={items}
+    // searchForm={searchForm}
+    className: 'list-group', itemView: function (props) { return (React.createElement("div", { className: 'list-group-item' },
         React.createElement("div", null, props.item.name),
         React.createElement("div", null, "Category: ".concat(props.item.category)))); } })); });

package/ui/list/Steps/Steps.d.ts

@@ -1,18 +1,21 @@
 import React from 'react';
+/**
+ * Компонент Steps предоставляет шаги для выполнения определенного процесса.
+ **/
 interface IStepsProps {
     stepItems: IStepItem[];
     currentStep: number;
     isChangeable?: boolean;
-    className?: string;
+    className?: CssClassName;
     onChange?: (index: number) => void;
 }
 export interface IStepsViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
 }
 export interface IStepItemViewProps {
     stepItem: IStepItem;
-    className?: string;
+    className?: CssClassName;
     index: number;
     status: string;
     disabled: boolean;

package/ui/list/Steps/Steps.js

@@ -6,12 +6,15 @@ function Steps(props) {
     var _a = (0, react_1.useState)(false), isChangeable = _a[0], setIsChangeable = _a[1];
     (0, react_1.useEffect)(function () { return setIsChangeable(props.isChangeable); }, [props.isChangeable]);
     function getStepStatus(index, stepItem) {
-        if (stepItem.isError)
+        if (stepItem.isError) {
             return 'error';
-        if (props.currentStep < index)
+        }
+        if (props.currentStep < index) {
             return 'wait';
-        if (props.currentStep === index)
+        }
+        if (props.currentStep === index) {
             return 'active';
+        }
         return 'finish';
     }
     return (0, hooks_1.useComponents)().ui.renderView('list.StepsView', {
@@ -23,8 +26,11 @@ function Steps(props) {
             index: index + 1,
             status: getStepStatus(index, stepItem),
             disabled: !isChangeable,
-            onChange: function () { if (isChangeable)
-                props.onChange(index); }
+            onChange: function () {
+                if (isChangeable) {
+                    props.onChange(index);
+                }
+            }
         }); })
     });
 }

package/ui/modal/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { IControlItem } from '../../nav/Controls/Controls';
+import * as React from 'react';
+import { IButtonProps } from 'src/ui/form/Button/Button';
 /**
  * Modal
  * Модальное окно
@@ -14,16 +14,16 @@ export interface IModalProps {
      * Компонент, который отрендерится внутри Modal
      * @example () => <InnerModalComponent />
      */
-    component?: () => JSX.Element;
+    component?: (props: React.ComponentProps<any>) => JSX.Element;
     /**
      * Свойства для внутреннего компонента
      */
     componentProps?: any;
     /**
-     * Коллекция контролов, которая отобразится в Modal
+     * Коллекция кнопок, которая отобразится в нижней секции Modal
      * @example [{label: __(('Закрыть')), onClick: () => props.onClose()}]
      */
-    controls?: IControlItem[];
+    buttons?: IButtonProps[];
     /**
      * Время, в течение которого будет происходить анимация закрытия Modal.
      * Переопределяет отрезок времени, заданный в ModalPortal

package/ui/modal/Modal/Modal.js

@@ -49,7 +49,7 @@ function Modal(props) {
     return (React.createElement(ModalView, __assign({}, props), (ContentComponent && (React.createElement(ContentComponent, __assign({}, props, props.componentProps)))) || (props.children)));
 }
 Modal.defaultProps = {
-    size: 'middle',
+    size: 'md',
     shouldCloseOnEsc: true,
     shouldCloseOnOverlayClick: true
 };

package/ui/modal/ModalPortal/ModalPortal.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+/**
+ * Компонент ModalPortal отвечает за отображение модальных окон.
+ **/
 export interface IModalPortalProps {
     /**
      * Время, через которое произойдет закрытие Modal

package/ui/modal/TwoFactorModal/TwoFactorModal.d.ts

@@ -1,7 +1,12 @@
 /// <reference types="react" />
-interface ITwoFactorModalProps {
-    view?: any;
+interface ITwoFactorModalProps extends IUiComponent {
+    /**
+    * Имя провайдера
+    */
     providerName: string;
+    /**
+    * Функция, которая вызывается при закрытии модального окна
+    */
     onClose?: any;
 }
 interface ITwoFactorModalPrivateProps extends ITwoFactorModalProps {
@@ -13,6 +18,9 @@ interface ITwoFactorModalPrivateProps extends ITwoFactorModalProps {
         isConfirmed: string;
     };
 }
+/**
+ * Компонент TwoFactorModal отображает модальное окно для двухфакторной аутентификации.
+ **/
 export interface ITwoFactorModalViewProps extends ITwoFactorModalPrivateProps {
     description?: string;
     formProps?: any;

package/ui/nav/Breadcrumbs/Breadcrumbs.d.ts

@@ -2,8 +2,9 @@
 import { IRouteItem } from '../Router/Router';
 /**
  * Breadcrumbs
- * Хлебные крошки
- */
+ *
+ * Компонент Breadcrumbs отображает хлебные крошки.
+ **/
 export interface IBreadcrumbsProps {
     /**
      * Кастомный CSS-класс
@@ -27,6 +28,15 @@ export interface IBreadcrumbsProps {
      * @example 'Каталог'
      */
     pageTitle?: string;
+    /**
+     * Показать иконку заменяющую первый роут
+     * @example true
+     */
+    showIcon?: boolean;
+    /**
+     * Кастомная иконка, заменяющая первый роут
+     */
+    customIcon?: string | React.ReactElement;
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView

package/ui/nav/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { IButtonProps } from 'src/ui/form/Button/Button';
+import { DataProviderItems } from '../../../hooks/useDataProvider';
+/**
+ * ButtonGroup
+ *
+ * Компонент ButtonGroup отображает группу кнопок.
+ **/
+export interface IButtonGroupProps extends IUiComponent {
+    /**
+     * Элементы для группы кнопок
+     * @example ['button1', 'button2', 'button3']
+     */
+    items: DataProviderItems;
+    /**
+     * Функция, которая будет вызываться при клике по кнопке
+     * @example setActiveTab
+     */
+    onClick: (value: number | string | boolean) => void;
+    /**
+     * При указании в связке с onClick предоставляет возможность реализовать two-way binding
+     * @example 'button1'
+     */
+    activeButton?: number | string;
+    /**
+    * Кнопка по умолчанию.
+    */
+    defaultActiveButton?: number | string;
+    /**
+     * Общие свойства для всех кнопок группы
+     * @example {outline: true, color: 'secondary'}
+     */
+    buttonProps?: IButtonProps;
+}
+export interface IButtonGroupViewProps extends Omit<IButtonGroupProps, 'items'> {
+    items: {
+        id: number | string | boolean;
+        label?: string;
+        [key: string]: unknown;
+    }[];
+    size: Size;
+}
+declare function ButtonGroup(props: IButtonGroupProps): JSX.Element;
+export default ButtonGroup;