@steroidsjs/core 3.0.0-beta.42 → 3.0.0-beta.44

package/hooks/useApplication.d.ts

@@ -5,7 +5,7 @@ import StoreComponent from '../components/StoreComponent';
 import UiComponent from '../components/UiComponent';
 import MetaComponent from '../components/MetaComponent';
 import { IComponents } from '../providers/ComponentsProvider';
-import { IRouteItem } from '../ui/nav/Router/Router';
+import { IRouteItem, IRouterProps } from '../ui/nav/Router/Router';
 import MetricsComponent from '../components/MetricsComponent';
 import { IScreenProviderProps } from '../providers/ScreenProvider';
 import { IFetchConfig } from '../hooks/useFetch';
@@ -28,6 +28,7 @@ export interface IApplicationHookConfig {
     layoutView?: () => CustomView;
     layoutProps?: Record<string, unknown>;
     screen?: Omit<IScreenProviderProps, 'children'>;
+    routerProps?: IRouterProps;
     /**
      * These fetch configurations will be used to preload and store for no matter what route matched in case of SSR
      */

package/hooks/useApplication.js

@@ -126,7 +126,7 @@ function useApplication(config) {
         var content = children;
         // Wrap in routes
         if (config.routes) {
-            content = (React.createElement(Router_1["default"], { routes: config.routes(), wrapperView: config.layoutView(), wrapperProps: config.layoutProps }));
+            content = (React.createElement(Router_1["default"], __assign({ routes: config.routes(), wrapperView: config.layoutView(), wrapperProps: config.layoutProps }, config.routerProps)));
         }
         if (config.screen) {
             content = (React.createElement(ScreenProvider_1["default"], __assign({}, config.screen), content));

package/hooks/useDataSelect.d.ts

@@ -54,6 +54,8 @@ export interface IDataSelectResult {
     selectedIds: PrimaryKey[];
     setSelectedIds: (ids: PrimaryKey | PrimaryKey[], skipToggle?: boolean) => void;
     selectedItems: IDataSelectItem[];
+    setSelectedAll: VoidFunction;
+    isSelectedAll: boolean;
 }
-export declare const getLinearItems: (items: any, groupAttribute: any) => any[];
+export declare const getFlattenedItems: (items: any, groupAttribute: any) => any[];
 export default function useDataSelect(config: IDataSelectConfig): IDataSelectResult;

package/hooks/useDataSelect.js

@@ -12,7 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.getLinearItems = void 0;
+exports.getFlattenedItems = void 0;
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var isNil_1 = __importDefault(require("lodash-es/isNil"));
@@ -21,11 +21,11 @@ var react_use_1 = require("react-use");
 var defaultProps = {
     primaryKey: 'id'
 };
-var getLinearItems = function (items, groupAttribute) {
+var getFlattenedItems = function (items, groupAttribute) {
     var result = [];
     items.forEach(function (item) {
         if (groupAttribute && Array.isArray(item[groupAttribute])) {
-            result = result.concat((0, exports.getLinearItems)(item[groupAttribute], groupAttribute));
+            result = result.concat((0, exports.getFlattenedItems)(item[groupAttribute], groupAttribute));
         }
         else {
             result.push(item);
@@ -33,7 +33,7 @@ var getLinearItems = function (items, groupAttribute) {
     });
     return result;
 };
-exports.getLinearItems = getLinearItems;
+exports.getFlattenedItems = getFlattenedItems;
 var isIdExists = function (id) {
     if (typeof id === 'boolean') {
         return true;
@@ -43,7 +43,7 @@ var isIdExists = function (id) {
 function useDataSelect(config) {
     // Get primary key
     var primaryKey = config.primaryKey || defaultProps.primaryKey;
-    var linearItems = (0, react_1.useMemo)(function () { return (0, exports.getLinearItems)(config.items, config.groupAttribute); }, [config.groupAttribute, config.items]);
+    var flattenedItems = (0, react_1.useMemo)(function () { return (0, exports.getFlattenedItems)(config.items, config.groupAttribute); }, [config.groupAttribute, config.items]);
     // Initial select
     var initialSelectedIds = (0, react_1.useMemo)(function () {
         var _a;
@@ -53,22 +53,23 @@ function useDataSelect(config) {
         if (!(0, isNil_1["default"])(config.inputValue)) {
             return [].concat((0, isArray_1["default"])(config.inputValue) ? config.inputValue : [config.inputValue]);
         }
-        return config.selectFirst && linearItems.length > 0
-            ? [linearItems[0][primaryKey]]
+        return config.selectFirst && flattenedItems.length > 0
+            ? [flattenedItems[0][primaryKey]]
             : [];
-    }, [config.selectedIds, config.inputValue, config.selectFirst, linearItems, primaryKey]);
-    var initialSelectedItems = (0, react_1.useMemo)(function () { return linearItems.length > 0
+    }, [config.selectedIds, config.inputValue, config.selectFirst, flattenedItems, primaryKey]);
+    var initialSelectedItems = (0, react_1.useMemo)(function () { return flattenedItems.length > 0
         && initialSelectedIds.length > 0
         ? initialSelectedIds
-            .map(function (selectedId) { return linearItems.find(function (item) { return item.id === selectedId; }); })
+            .map(function (selectedId) { return flattenedItems.find(function (item) { return item.id === selectedId; }); })
             .filter(isIdExists)
-        : []; }, [initialSelectedIds, linearItems]);
+        : []; }, [initialSelectedIds, flattenedItems]);
     // State
     var _a = (0, react_1.useState)(false), isOpened = _a[0], setIsOpened = _a[1];
     var _b = (0, react_1.useState)(false), isFocused = _b[0], setIsFocused = _b[1];
     var _c = (0, react_1.useState)(null), hoveredId = _c[0], setHoveredId = _c[1];
     var _d = (0, react_1.useState)(initialSelectedIds), selectedIds = _d[0], setSelectedIdsInternal = _d[1];
     var _e = (0, react_1.useState)(initialSelectedItems), selectedItems = _e[0], setSelectedItemsInternal = _e[1];
+    var _f = (0, react_1.useState)(config.items.length === selectedIds.length), isSelectedAll = _f[0], setIsSelectedAll = _f[1];
     // Handler for select/toggle item by id
     var setSelectedIds = (0, react_1.useCallback)(function (ids, skipToggle) {
         if (skipToggle === void 0) { skipToggle = false; }
@@ -76,6 +77,10 @@ function useDataSelect(config) {
             if (!config.multiple && ids.length > 1) {
                 ids = [ids[0]];
             }
+            if (selectedItems.length === ids.length) {
+                setSelectedIds([]);
+                return;
+            }
             setSelectedIdsInternal(ids.sort());
         }
         else {
@@ -100,14 +105,18 @@ function useDataSelect(config) {
                 setIsOpened(false);
             }
         }
-    }, [config.multiple, selectedIds]);
+    }, [config.multiple, selectedIds, selectedItems.length]);
+    var setSelectedAll = (0, react_1.useCallback)(function () {
+        var itemsIds = flattenedItems.map(function (item) { return item.id; });
+        setSelectedIds(itemsIds);
+    }, [flattenedItems, setSelectedIds]);
     // Update selected items on change selectedIds or items or source items
     var prevSelectedIdsLength = (0, react_use_1.usePrevious)(selectedIds.length);
     (0, react_use_1.useUpdateEffect)(function () {
         var newSelectedItems = [];
         var hasChanges = false;
         selectedIds.forEach(function (selectedId) {
-            var finedItem = linearItems.find(function (item) { return item[primaryKey] === selectedId; });
+            var finedItem = flattenedItems.find(function (item) { return item[primaryKey] === selectedId; });
             if (!finedItem && config.sourceItems) {
                 finedItem = config.sourceItems.find(function (item) { return item[primaryKey] === selectedId; });
             }
@@ -123,14 +132,14 @@ function useDataSelect(config) {
         if (hasChanges || prevSelectedIdsLength !== selectedIds.length) {
             setSelectedItemsInternal(newSelectedItems);
         }
-    }, [linearItems, config.sourceItems, primaryKey, selectedIds, selectedItems, prevSelectedIdsLength]);
+    }, [flattenedItems, config.sourceItems, primaryKey, selectedIds, selectedItems, prevSelectedIdsLength]);
     // Select first after fetch data
-    var prevItemsLength = (0, react_use_1.usePrevious)(linearItems.length);
+    var prevItemsLength = (0, react_use_1.usePrevious)(flattenedItems.length);
     (0, react_use_1.useUpdateEffect)(function () {
-        if (config.selectFirst && prevItemsLength === 0 && linearItems.length > 0) {
-            setSelectedIdsInternal([linearItems[0][primaryKey]]);
+        if (config.selectFirst && prevItemsLength === 0 && flattenedItems.length > 0) {
+            setSelectedIdsInternal([flattenedItems[0][primaryKey]]);
         }
-    }, [linearItems, config.selectFirst, prevItemsLength, primaryKey]);
+    }, [flattenedItems, config.selectFirst, prevItemsLength, primaryKey]);
     // Update selected items on change value
     var prevConfigSelectedIds = (0, react_use_1.usePrevious)(config.selectedIds || []);
     (0, react_use_1.useUpdateEffect)(function () {
@@ -146,6 +155,9 @@ function useDataSelect(config) {
             setSelectedIdsInternal(newSelectedIds);
         }
     }, [config.selectedIds, prevConfigSelectedIds, selectedIds, selectedItems]);
+    (0, react_use_1.useUpdateEffect)(function () {
+        setIsSelectedAll(config.items.length === selectedIds.length);
+    }, [config.items.length, selectedIds]);
     // Global key down handler for navigate on items
     // Support keys:
     // - tab
@@ -175,9 +187,9 @@ function useDataSelect(config) {
                 // Select first selected
                 setSelectedIds(selectedIds[0], true);
             }
-            else if (linearItems.length > 0) {
+            else if (flattenedItems.length > 0) {
                 // Select first result
-                setSelectedIds(linearItems[0], true);
+                setSelectedIds(flattenedItems[0], true);
             }
             setIsOpened(false);
         }
@@ -202,7 +214,7 @@ function useDataSelect(config) {
             else {
                 // Navigate on items by keys
                 var direction = isDown ? 1 : -1;
-                var keys = linearItems.map(function (item) { return item.id; });
+                var keys = flattenedItems.map(function (item) { return item.id; });
                 // Get current index
                 var index = hoveredId ? keys.indexOf(hoveredId) : -1;
                 if (index === -1 && selectedIds.length === 1) {
@@ -216,7 +228,7 @@ function useDataSelect(config) {
                 setHoveredId(keys[newIndex]);
             }
         }
-    }, [isFocused, isOpened, hoveredId, selectedIds, linearItems, setSelectedIds]);
+    }, [isFocused, isOpened, hoveredId, selectedIds, flattenedItems, setSelectedIds]);
     (0, react_use_1.useEvent)('keydown', onKeyDown);
     return {
         isOpened: isOpened,
@@ -227,7 +239,9 @@ function useDataSelect(config) {
         setHoveredId: setHoveredId,
         selectedIds: selectedIds,
         setSelectedIds: setSelectedIds,
-        selectedItems: selectedItems
+        selectedItems: selectedItems,
+        setSelectedAll: setSelectedAll,
+        isSelectedAll: isSelectedAll
     };
 }
 exports["default"] = useDataSelect;

package/hooks/useFile.d.ts

@@ -1,13 +1,41 @@
 export interface IFileInput {
+    /**
+    * Параметры для input элемента
+    */
     input?: FormInputType;
+    /**
+    * Множественный выбор файлов
+    */
     multiple?: boolean;
+    /**
+    * Позволяет указать uploader
+    */
     uploader?: any;
+    /**
+     * Экшен для отправки на бэкенд
+     * @example '/api/v1/user/avatar/crop'
+     */
     backendUrl?: any;
+    /**
+    * Список mime-типов
+    */
     mimeTypes?: any;
+    /**
+    * Использовать только изображения
+    */
     imagesOnly?: any;
     imagesProcessor?: any;
+    /**
+    * Точные размеры изображений
+    */
     imagesExactSize?: any;
+    /**
+    * Начальные файлы
+    */
     initialFiles?: any;
+    /**
+    * Параметры для uploader
+    */
     uploaderConfig?: {
         useFormData?: boolean;
         fileFieldName?: string;

package/hooks/useList.d.ts

@@ -113,12 +113,18 @@ export interface IListConfig {
      * @example true
      */
     addressBar?: boolean | IAddressBarConfig;
+    /**
+    * Параметр для загрузки данных списка с сервера
+    */
     scope?: string[];
     /**
      * Дополнительные параметры, значения которых нужно передавать в запросе для получения данных
      * @example {tagName: 'MarketReviews'}
      */
     query?: Record<string, unknown>;
+    /**
+    * Модель
+    */
     model?: string;
     /**
      * Модель для синхронизации значений формы с адресной строкой

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.42",
+ "version": "3.0.0-beta.44",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -85,8 +85,8 @@
   "jest": "^26.6.3",
   "jest-environment-jsdom-fifteen": "^1.0.2",
   "jest-enzyme": "^7.1.2",
+  "rc-slider": "9.7.4",
   "ts-jest": "^26.5.1",
-  "typedoc": "^0.24.7",
   "typescript": "^4.9.5"
  }
 }

package/ui/content/Accordion/Accordion.d.ts

@@ -3,31 +3,29 @@ export interface IAccordionIcon {
     open: React.ReactElement | string;
     close: React.ReactElement | string;
 }
-export interface IAccordionProps {
-    view?: CustomView;
-    style?: CustomStyle;
-    children?: any;
+export interface IAccordionProps extends IUiComponent {
     /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+    * Дочерние элементы
+    */
+    children?: React.ReactNode;
     /**
-     * @example {true}
+     * Переводит Accordion в выключенное состояние
+     * @example true
      */
     disabled?: boolean;
     /**
      * Пользовательская иконка svg или название иконки или объект с иконками open и close
-     * @example {'circle'}
+     * @example 'circle'
      */
     icon?: IAccordionIcon | React.ReactElement | string;
     /**
    * Включает режим в котором можно открыть только один AccordionItem
-   * @example {true}
+   * @example true
    */
     hasOneOpenItem?: boolean;
     /**
      * Название AccordionItem
-     * @example {'Подробнее'}
+     * @example 'Подробнее'
      */
     title?: string;
     /**
@@ -36,7 +34,7 @@ export interface IAccordionProps {
     theme?: 'light' | 'dark' | 'intermediate';
     /**
      * Номер активного AccordionItem, который может меняться динамический или быть статичным
-     * @example
+     * @example 1
      */
     activeKey?: number;
     /**
@@ -47,7 +45,7 @@ export interface IAccordionProps {
     /**
      * Стилизация позиционирования.
      * При значении "top" верхняя часть шапки будет закруглена.
-     * @example {'top'}
+     * @example 'top'
      */
     position?: 'bottom' | 'middle' | 'top';
     /**

package/ui/content/Alert/Alert.d.ts

@@ -1,32 +1,30 @@
 import React from 'react';
-export interface IAlertProps {
-    view?: CustomView;
-    className?: CssClassName;
+export interface IAlertProps extends IUiComponent {
     /**
     * Дочерние элементы
+    * @example {<span>children</span>}
     */
     children?: React.ReactNode;
     /**
      * Типы Оповещений
-     * @example {'info'}
+     * @example 'info'
      */
-    type: 'success' | 'info' | 'warning' | 'error' | 'default' | string;
+    type?: 'success' | 'info' | 'warning' | 'error' | 'default' | string;
     /** Основное сообщения Оповещения
-     * @example {'Sending is confirmed!'}
+     * @example 'Sending is confirmed!'
      */
     message?: string;
     /** Дополнительное содрежание сообщения.
-     * @example {'Please, check your email.'}
+     * @example 'Please, check your email.'
      */
     description?: string;
-    style?: CustomStyle;
     /**
      *  Нужно ли отображать кнопку, чтобы закрыть Оповещение
      */
     showClose?: boolean;
     /**
      * Нужно ли отображать иконку, соответствующую типа Оповещения
-     * @example {true}
+     * @example true
      */
     showIcon?: boolean;
     /**
@@ -34,12 +32,17 @@ export interface IAlertProps {
      * @example {() => console.log('this is callback')}
      */
     onClose?: () => void;
+    /**
+    * Флаг, который включает анимацию
+    * @example true
+    */
     animation?: boolean;
     /**
      * Время анимации в миллисекундах
-     * @example {1000}
+     * @example 1000
      */
     animationDuration?: number;
+    [key: string]: any;
 }
 export interface IAlertViewProps extends IAlertProps {
     isExist: boolean;

package/ui/content/Avatar/Avatar.d.ts

@@ -1,56 +1,46 @@
-export interface IAvatarProps {
+/// <reference types="react" />
+export interface IAvatarProps extends IUiComponent {
     /**
      * Альтернативный текст для изображения
-     * @example {'default image'}
+     * @example 'default image'
      */
     alt?: string;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
      * Дочерние элементы
      */
-    children?: CustomView;
+    children?: React.ReactNode;
     /**
      * Размер аватара
-     * @example {'md'}
+     * @example 'md'
      */
     size?: Size | number;
     /**
      * Форма аватара
-     * @example {'circle'}
+     * @example 'circle'
      */
     shape?: 'circle' | 'square' | string;
     /**
      * Ссылка на изображение для аватара
-     * @example {'https://user/avatar.png'}
+     * @example 'https://user/avatar.png'
      */
     src?: string;
+    /**
+    * Набор адаптивных изображений
+    */
     srcSet?: string;
     /**
      * Статус онлайна
-     * @example {true}
+     * @example true
      */
     status?: boolean;
-    /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
-     */
-    style?: CustomStyle;
     /**
      * Заголовок аватарки
-     * @example {'Avatar'}
+     * @example 'Avatar'
      */
     title?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Наличие обводки вокруг аватара
-     * @example {true}
+     * @example true
      */
     hasBorder?: boolean;
 }

package/ui/content/Badge/Badge.d.ts

@@ -1,45 +1,47 @@
 /// <reference types="react" />
 export interface ICounter {
+    /**
+    * Состояние счетчика
+    * @example true
+    */
     isEnable: boolean;
-    content: string | number;
-}
-export interface IBadgeProps {
     /**
-    * Дополнительный CSS-класс
+    * Содержимое счетчика
+    * @example 'Counter'
     */
-    className?: CssClassName;
+    content: string | number;
+}
+export interface IBadgeProps extends IUiComponent {
     /**
      * Тип badge
+     * @example 'primary'
      */
     type: ColorName;
     /**
      * Стиль скругления
      */
     roundingStyle: 'rounder' | 'squarer';
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     */
-    view?: CustomView;
     /**
      * Нужно ли отображать кнопку, чтобы закрыть badge
      */
     showClose?: boolean;
     /**
      * Callback функция вызываемая при нажатии на кнопку закрытия
-     * @example {() => console.log('this is callback')}
+     * @example () => console.log('Hello from onClose!')
      */
     onClose?: () => void;
     /** Текст для badge
-    * @example {'Sending is confirmed!'}
+    * @example 'Sending is confirmed!'
     */
     message?: string;
     /**
      * Нужно ли отображать счетчик
+     * @example {isEnable: true, content: 'Hello from counter!'}
      */
     counter: boolean | ICounter;
-    style?: CustomStyle;
     /**
      * Размер для badge
+     * @example 'md'
      */
     size: Size;
 }

package/ui/content/Calendar/Calendar.d.ts

@@ -1,5 +1,5 @@
 import { DayPickerProps } from 'react-day-picker';
-export interface ICalendarProps {
+export interface ICalendarProps extends IUiComponent {
     /**
      * Значение задает выбранные в календаре дату или диапазон дат.
      * Необходимо передать валидную дату в виде строки (массива строк)
@@ -19,11 +19,6 @@ export interface ICalendarProps {
      * @example {dayPickerProps: {showWeekNumbers: true}}
      */
     pickerProps?: DayPickerProps | any;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Пропсы для компонента отображения
      */
@@ -37,10 +32,6 @@ export interface ICalendarProps {
      * @example 1
      */
     numberOfMonths?: number;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
 }
 export interface ICalendarViewProps extends ICalendarProps {
     /**

package/ui/content/Card/Card.d.ts

@@ -3,16 +3,32 @@ import { IButtonProps } from 'src/ui/form/Button/Button';
 import { ILinkProps } from 'src/ui/nav/Link/Link';
 import { IAvatarProps } from '../Avatar/Avatar';
 export interface ICardHeader {
+    /**
+    * Параметры для аватара
+    * @example
+    * {
+    *   src: 'Kate.png',
+    *   status: true,
+    * }
+    */
     avatar?: IAvatarProps;
+    /**
+    * Отображается ли меню
+    * @example true
+    */
     menu?: boolean;
+    /**
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js head'
+    */
     head?: string;
+    /**
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js subhead'
+    */
     subhead?: string;
 }
-export interface ICardProps {
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+export interface ICardProps extends IUiComponent {
     /**
      * Дочерние элементы
      */
@@ -24,11 +40,19 @@ export interface ICardProps {
     cover?: string;
     /**
      * Описание карточки
-     * @example {'Scroll to see more...'}
+     * @example 'Scroll to see more...'
      */
     description?: string;
     /**
      * Контент хедера
+     * @example
+     * avatar: {
+     * src: 'Kate.png',
+     * status: true,
+     * },
+     * head: 'Header',
+     * subhead: 'Subhead',
+     * menu: true,
      */
     header?: ICardHeader;
     /**
@@ -40,28 +64,17 @@ export interface ICardProps {
     };
     /**
     * Коллекция ссылок
-    * @example {}
     */
     links?: ILinkProps[];
     /**
      * Коллекция кнопок
      */
     buttons?: IButtonProps[];
-    /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
-     */
-    style?: CustomStyle;
     /**
      * Заголовок карточки
-     * @example {'Main card'}
+     * @example 'Main card'
      */
     title?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
 }
 export type ICardViewProps = ICardProps;
 declare function Card(props: ICardProps): any;