@steroidsjs/core 3.0.0-beta.5 → 3.0.0-beta.51

package/reducers/list.d.ts

@@ -10,3 +10,4 @@ export declare const getListItems: (state: any, listId: any) => any;
 export declare const getSelectedIds: (state: any, listId: any) => any;
 export declare const isSelected: (state: any, listId: any, itemId: any) => any;
 export declare const isSelectedAll: (state: any, listId: any) => any;
+export declare const getCheckedIds: (state: any, listId: any) => any;

package/reducers/list.js

@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a;
 exports.__esModule = true;
-exports.isSelectedAll = exports.isSelected = exports.getSelectedIds = exports.getListItems = exports.getIds = exports.getList = exports.isListInitialized = void 0;
+exports.getCheckedIds = exports.isSelectedAll = exports.isSelected = exports.getSelectedIds = exports.getListItems = exports.getIds = exports.getList = exports.isListInitialized = void 0;
 var get_1 = __importDefault(require("lodash-es/get"));
 var isMatch_1 = __importDefault(require("lodash-es/isMatch"));
 var every_1 = __importDefault(require("lodash-es/every"));
@@ -152,3 +152,6 @@ var isSelectedAll = function (state, listId) {
         && (0, every_1["default"])((0, exports.getIds)(state, listId).map(function (id) { return selectedIds.includes(id); })));
 };
 exports.isSelectedAll = isSelectedAll;
+// deprecated
+var getCheckedIds = function (state, listId) { return (0, get_1["default"])(state, ['list', 'selectedIds', listId]) || []; };
+exports.getCheckedIds = getCheckedIds;

package/reducers/router.d.ts

@@ -58,7 +58,6 @@ export declare const normalizeRoutes: (state: any, item: IRouteItem, activeIds:
     models?: string | string[];
     enums?: string | string[];
     role?: string;
-    fetch?: import("../hoc/fetch").IFetchHocConfigFunc;
     preloadData?: (match: Record<string, any>) => (import("../hooks/useFetch").IFetchConfig | import("../ui/list/List/List").IListProps)[];
 };
 /**

package/reducers/router.js

@@ -135,13 +135,13 @@ exports.normalizeRoutes = normalizeRoutes;
  */
 var findRecursive = function (item, predicate, pathItems) {
     if (pathItems === void 0) { pathItems = null; }
-    if (((0, isFunction_1["default"])(predicate) && predicate(item)) || predicate === item.id) {
+    if (((0, isFunction_1["default"])(predicate) && predicate(item)) || predicate === (item === null || item === void 0 ? void 0 : item.id)) {
         if (pathItems) {
             pathItems.push(item);
         }
         return item;
     }
-    if (Array.isArray((item.items))) {
+    if (Array.isArray((item === null || item === void 0 ? void 0 : item.items))) {
         var foundedItem = item.items.find(function (subItem) { return (0, exports.findRecursive)(subItem, predicate, pathItems); }) || null;
         if (foundedItem && pathItems) {
             pathItems.push(item);

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+export interface IAccordionIcon {
+    /**
+    * Пользовательская иконка открытия
+    * @example 'user
+    */
+    open: React.ReactElement | string;
+    /**
+    * Пользовательская иконка закрытия
+    * @example 'user'
+    */
+    close: React.ReactElement | string;
+}
+export interface IAccordionProps extends IUiComponent {
+    /**
+    * Дочерние элементы
+    */
+    children?: React.ReactNode;
+    /**
+     * Переводит Accordion в выключенное состояние
+     * @example true
+     */
+    disabled?: boolean;
+    /**
+     * Пользовательская иконка svg или название иконки или объект с иконками open и close
+     * @example 'circle'
+     */
+    icon?: IAccordionIcon | React.ReactElement | string;
+    /**
+   * Включает режим в котором можно открыть только один AccordionItem
+   * @example true
+   */
+    hasOneOpenItem?: boolean;
+    /**
+     * Название AccordionItem
+     * @example 'Подробнее'
+     */
+    title?: string;
+    /**
+     * Тема аккордеона
+     */
+    theme?: 'light' | 'dark' | 'intermediate';
+    /**
+     * Номер активного AccordionItem, который может меняться динамический или быть статичным
+     * @example 1
+     */
+    activeKey?: number;
+    /**
+     * Вызываемая функция при каждом изменении состояния
+     * @example {() => {console.log('success')}}
+     */
+    onChange?: () => void;
+    /**
+     * Стилизация позиционирования.
+     * При значении "top" верхняя часть шапки будет закруглена.
+     * @example 'top'
+     */
+    position?: 'bottom' | 'middle' | 'top';
+    /**
+     * Отображать ли иконку у AccordionItem
+     */
+    showIcon?: boolean;
+}
+export interface IAccordionViewProps extends IAccordionProps {
+    toggleAccordion?: (number: any) => void;
+    toggleCollapse?: (number: any) => void;
+    childIndex?: number;
+    isShowMore?: boolean;
+}
+export type IAccordionItemProps = IAccordionProps;
+export type IAccordionItemViewProps = IAccordionViewProps;
+declare function Accordion(props: IAccordionProps): JSX.Element;
+export default Accordion;

package/ui/content/{Collapse/Collapse.js → Accordion/Accordion.js}

@@ -45,43 +45,39 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
-function Collapse(props) {
-    var _a = React.useState([]), state = _a[0], setState = _a[1];
+function Accordion(props) {
+    var _a = React.useState([]), selectedAccordionItems = _a[0], setSelectedAccordionItems = _a[1];
     React.useEffect(function () {
         if (props.onChange) {
-            props.onChange(state);
+            props.onChange();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
+    }, [selectedAccordionItems]);
     var toggleCollapse = function (indexSelected) {
-        if (state.includes(indexSelected)) {
-            var newState = __spreadArray([], state, true);
-            var indexInArray = state.indexOf(indexSelected);
+        if (selectedAccordionItems.includes(indexSelected)) {
+            var newState = __spreadArray([], selectedAccordionItems, true);
+            var indexInArray = selectedAccordionItems.indexOf(indexSelected);
             newState.splice(indexInArray, 1);
-            setState(newState);
+            setSelectedAccordionItems(newState);
         }
         else {
-            var newState = __spreadArray([], state, true);
+            var newState = __spreadArray([], selectedAccordionItems, true);
             newState.push(indexSelected);
-            setState(newState);
+            setSelectedAccordionItems(newState);
         }
     };
     var toggleAccordion = function (indexSelected) {
-        if (state.includes(indexSelected)) {
-            setState([]);
+        if (selectedAccordionItems.includes(indexSelected)) {
+            setSelectedAccordionItems([]);
         }
         else {
-            var newState = [];
-            newState.push(indexSelected);
-            setState(newState);
+            var newSelectedAccordion = [];
+            newSelectedAccordion.push(indexSelected);
+            setSelectedAccordionItems(newSelectedAccordion);
         }
     };
     var components = (0, hooks_1.useComponents)();
-    var CollapseView = components.ui.getView(props.view || 'content.CollapseView');
-    return (React.createElement(CollapseView, __assign({}, props), React.Children.map(props.children, function (child, index) { return React.cloneElement(child, __assign({ style: props.style, activeKey: props.activeKey, isAccordion: props.isAccordion, childIndex: index, toggleAccordion: toggleAccordion, toggleCollapse: toggleCollapse, isShowMore: (state || []).includes(index), icon: props.icon, showIcon: props.showIcon, iconPosition: props.iconPosition, borderless: props.borderless }, child.props)); })));
+    var AccordionView = components.ui.getView(props.view || 'content.AccordionView');
+    return (React.createElement(AccordionView, __assign({}, props), React.Children.map(props.children, function (child, index) { return React.cloneElement(child, __assign({ style: props.style, activeKey: props.activeKey, childIndex: index, toggleCollapse: toggleCollapse, toggleAccordion: toggleAccordion, hasOneOpenItem: props.hasOneOpenItem, isShowMore: (selectedAccordionItems || []).includes(index), icon: props.icon, showIcon: props.showIcon }, child.props)); })));
 }
-Collapse.defaultProps = {
-    iconPosition: 'right',
-    showIcon: true
-};
-exports["default"] = Collapse;
+exports["default"] = Accordion;

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

@@ -0,0 +1,6 @@
+import { IAccordionItemProps } from './Accordion';
+declare function AccordionItem(props: IAccordionItemProps): any;
+declare namespace AccordionItem {
+    var defaultProps: import("./Accordion").IAccordionViewProps;
+}
+export default AccordionItem;

package/ui/content/Accordion/AccordionItem.js

@@ -0,0 +1,25 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+function AccordionItem(props) {
+    var components = (0, hooks_1.useComponents)();
+    return components.ui.renderView(props.view || 'content.AccordionItemView', __assign({}, props));
+}
+AccordionItem.defaultProps = {
+    title: 'Accordion',
+    positionStyle: 'top',
+    theme: 'light',
+    showIcon: true
+};
+exports["default"] = AccordionItem;

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

@@ -0,0 +1,3 @@
+import AccordionItem from './AccordionItem';
+import Accordion from './Accordion';
+export { AccordionItem, Accordion, };

package/ui/content/Accordion/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Accordion = exports.AccordionItem = void 0;
+var AccordionItem_1 = __importDefault(require("./AccordionItem"));
+exports.AccordionItem = AccordionItem_1["default"];
+var Accordion_1 = __importDefault(require("./Accordion"));
+exports.Accordion = Accordion_1["default"];

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

@@ -1,32 +1,30 @@
 import React from 'react';
-export interface IAlertProps {
-    view?: any;
-    className?: CssClassName;
+export interface IAlertProps extends IUiComponent {
     /**
     * Дочерние элементы
+    * @example {<span>children</span>}
     */
-    action?: React.ReactNode;
+    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?: React.CSSProperties;
     /**
      *  Нужно ли отображать кнопку, чтобы закрыть Оповещение
      */
     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 | 'x-large' | number;
+    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/Avatar/AvatarGroup.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export interface AvatarGroupProps {
-    view?: any;
-    children?: CustomView[];
-    style?: React.CSSProperties;
+    view?: CustomView;
+    children?: React.ReactNode[];
+    style?: CustomStyle;
     maxCount?: number;
 }
 export type IAvatarGroupViewProps = AvatarGroupProps;

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

@@ -1,47 +1,49 @@
-import React from 'react';
-interface ICounter {
+/// <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: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    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?: React.CSSProperties;
     /**
      * Размер для badge
+     * @example 'md'
      */
-    size: 'small' | 'medium' | 'large';
+    size: Size;
 }
 export interface IBadgeViewProps extends IBadgeProps {
     isExist: boolean;

package/ui/content/Badge/Badge.js

@@ -27,7 +27,7 @@ function Badge(props) {
 Badge.defaultProps = {
     type: 'primary',
     roundingStyle: 'squarer',
-    size: 'medium',
+    size: 'md',
     counter: false,
     showClose: false
 };

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/Calendar/Calendar.js

@@ -31,7 +31,9 @@ function Calendar(props) {
             setMonth(selectedDates[0]);
         }
     }, [selectedDates]);
-    var onDaySelect = (0, react_1.useCallback)(function (date) { return props.onChange.call(null, (0, calendar_1.convertDate)(date, null, props.valueFormat, false, true)); }, [props.onChange, props.valueFormat]);
+    var onDaySelect = (0, react_1.useCallback)(function (date) {
+        props.onChange.call(null, (0, calendar_1.convertDate)(date, null, props.valueFormat, false, true));
+    }, [props.onChange, props.valueFormat]);
     var toggleCaptionPanel = (0, react_1.useCallback)(function () {
         setIsCaptionPanelVisible(!isCaptionPanelVisible);
     }, [isCaptionPanelVisible]);

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

@@ -1,22 +1,38 @@
-export interface ICardProps {
+/// <reference types="react" />
+import { IButtonProps } from 'src/ui/form/Button/Button';
+import { ILinkProps } from 'src/ui/nav/Link/Link';
+import { IAvatarProps } from '../Avatar/Avatar';
+export interface ICardHeader {
     /**
-     * Цвет границы (если передать false, то граница будет скрыта)
-     * @example success
-     */
-    borderColor?: ColorName | 'default' | boolean;
+    * Параметры для аватара
+    * @example
+    * {
+    *   src: 'Kate.png',
+    *   status: true,
+    * }
+    */
+    avatar?: IAvatarProps;
     /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+    * Отображается ли меню
+    * @example true
+    */
+    menu?: boolean;
     /**
-     * Дочерние элементы
-     */
-    children?: CustomView;
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js head'
+    */
+    head?: string;
     /**
-     * Цвет состояния
-     * @example success
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js subhead'
+    */
+    subhead?: string;
+}
+export interface ICardProps extends IUiComponent {
+    /**
+     * Дочерние элементы
      */
-    color?: ColorName;
+    children?: React.ReactNode;
     /**
      * Обложка для карточки, нужно передать ссылку на изображение
      * @example 'https://cat/cat.png'
@@ -24,50 +40,42 @@ export interface ICardProps {
     cover?: string;
     /**
      * Описание карточки
-     * @example {'Scroll to see more...'}
+     * @example 'Scroll to see more...'
      */
     description?: string;
     /**
-     * Текст для header
+     * Контент хедера
+     * @example
+     * avatar: {
+     * src: 'Kate.png',
+     * status: true,
+     * },
+     * head: 'Header',
+     * subhead: 'Subhead',
+     * menu: true,
      */
-    header?: string;
+    header?: ICardHeader;
     /**
-     * Текст для footer
+     * Контент футера
      */
-    footer?: string;
-    /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    orientation?: 'vertical' | 'vertical-reverse' | 'horizontal' | string;
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    shape?: 'square' | 'circle';
+    * Коллекция ссылок
+    */
+    links?: ILinkProps[];
     /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
+     * Коллекция кнопок
      */
-    style?: CustomStyle;
+    buttons?: IButtonProps[];
     /**
      * Заголовок карточки
-     * @example {'Main card'}
+     * @example 'Main card'
      */
     title?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
 }
 export type ICardViewProps = ICardProps;
 declare function Card(props: ICardProps): any;
-declare namespace Card {
-    var defaultProps: {
-        borderColor: string;
-        orientation: string;
-        shape: string;
-    };
-}
 export default Card;

package/ui/content/Card/Card.js

@@ -16,9 +16,4 @@ function Card(props) {
     var components = (0, hooks_1.useComponents)();
     return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
 }
-Card.defaultProps = {
-    borderColor: 'default',
-    orientation: 'vertical',
-    shape: 'circle'
-};
 exports["default"] = Card;