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

package/ui/content/CopyToClipboard/CopyToClipboard.d.ts

@@ -3,14 +3,28 @@ import { IShowNotificationParameters } from '../../../actions/notifications';
 export interface ICopyToClipboardProps extends IUiComponent {
     /**
     * Значение, которое будет использоваться при копировании
-    * @example value: 'Steroids.js'
+    * @example 'Steroids.js'
     */
     value: string;
     /**
-    * Флаг, который отвечает за выключение функции копирования
-    * @example disabled: false
+    * Переводит состояние компонента в выключенное
+    * @example true
     */
     disabled?: boolean;
+    /**
+    * Параметры для уведомления, которое появляется после копирования
+    * @example
+    * 'Some value has been copied to buffer'
+    * @example
+    * {
+    *   message: 'Some value has been copied to buffer',
+    *   level: 'info',
+    *   params: {
+    *   position: 'top-left',
+    *   timeOut: 100,
+    *  }
+    * }
+    */
     notification?: string | {
         message?: string;
         level?: string;
@@ -18,7 +32,7 @@ export interface ICopyToClipboardProps extends IUiComponent {
     };
     /**
     * Позволяет включить или выключить отображение иконки
-    * @example showCopyIcon: false
+    * @example false
     */
     showCopyIcon?: boolean;
     /**
@@ -32,8 +46,7 @@ export interface ICopyToClipboardProps extends IUiComponent {
     */
     children?: React.ReactNode;
     /**
-    * Callback функция, которая вызывается при копировании
-    * @example {}
+    * Callback который вызывается при копировании
     */
     onCopy?: VoidFunction;
 }

package/ui/content/Detail/Detail.d.ts

@@ -31,7 +31,7 @@ export interface IDetailResponsive {
      */
     media: IDetailMedia[];
 }
-export interface IDetailProps {
+export interface IDetailProps extends IUiComponent {
     /**
      * Размер ячеек в таблице
      * @example 'sm'
@@ -62,15 +62,6 @@ export interface IDetailProps {
      * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
      */
     controls?: IControlItem[];
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Дополнительный CSS-класс для таблицы
-     */
-    className?: CssClassName;
     /**
      * Дочерние компоненты
      */

package/ui/content/DropDown/DropDown.d.ts

@@ -1,25 +1,25 @@
 import * as React from 'react';
 import { IAbsolutePositioningInputProps, IAbsolutePositioningOutputProps } from '../../../hooks/useAbsolutePositioning';
 export interface IDropDownProps extends IAbsolutePositioningInputProps {
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
      * Содержимое DropDown (компонент или jsx-код)
      * @example () => Component
      */
     content?: () => React.ReactNode;
-    /**
-     * Переопределение view React компонента для кастомизациии отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * В каком случае закрывать DropDown. По-умолчанию - `click-away`
      * @example click-any
      */
     closeMode?: 'click-away' | 'click-any';
+    /**
+    * Переопределение view React компонента для кастомизациии отображения
+    * @example MyCustomView
+    */
+    view?: CustomView;
+    /**
+    * Дополнительный CSS-класс
+    */
+    className?: CssClassName;
 }
 export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioningOutputProps {
     /**

package/ui/content/Icon/Icon.d.ts

@@ -17,7 +17,7 @@
  *
  * That get the icon used <Icon name={'icon-name'} />
  */
-export interface IIconProps {
+export interface IIconProps extends IUiComponent {
     /**
      * Имя иконки (латиницей). Импорт иконок происходит на старте приложения.
      * @example create
@@ -28,16 +28,13 @@ export interface IIconProps {
      * @example Добавить запись
      */
     title?: string;
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
     *  Должен ли данный элемент участвовать в последовательной навигации
     */
     tabIndex?: number;
+    /**
+    * Функция которая вызывается при клике по иконке
+    */
     onClick?: any;
     [key: string]: any;
 }

package/ui/content/Menu/Menu.d.ts

@@ -6,7 +6,7 @@ export interface IMenuItem {
      */
     label: string;
     /**
-     * Функция при клике
+     * Функция вызываемая при клике
      */
     onClick: VoidFunction;
     /**
@@ -18,7 +18,7 @@ export interface IMenuItem {
      */
     hasBorder?: boolean;
 }
-export interface IMenuProps {
+export interface IMenuProps extends IUiComponent {
     /**
     *   Элементы меню
     */
@@ -27,10 +27,6 @@ export interface IMenuProps {
     * Кастомная иконка, по клику на которую открывается меню
     */
     icon?: string | React.ReactElement;
-    /**
-    * Дополнительный CSS-класс
-    */
-    className?: CssClassName;
     /**
      * Пропсы для DropDown
      */
@@ -39,10 +35,6 @@ export interface IMenuProps {
      * Переопределение view React элемента меню для кастомизации отображения
      */
     itemView?: CustomView | any;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     */
-    view?: CustomView;
 }
 export type IMenuViewProps = IMenuProps;
 declare function Menu(props: IMenuProps): JSX.Element;

package/ui/crud/Crud/Crud.d.ts

@@ -35,26 +35,88 @@ export interface ICrudClickProps {
     errorHandler?: (error: any, dispatch: any) => void;
 }
 export interface ICrudProps {
+    /**
+    * Id для Crud
+    */
     crudId?: string;
+    /**
+    * Режим работы Crud
+    */
     mode?: 'page' | 'modal';
+    /**
+    * Ссылка на rest
+    */
     restUrl?: string;
+    /**
+    * Методы rest api
+    * @example {}
+    */
     restApi?: IApiRest;
+    /**
+    * Первичный ключ
+    */
     primaryKey?: 'id' | string;
+    /**
+    * Ключ запроса
+    * @example {}
+    */
     queryKey?: 'id' | string;
+    /**
+    * Модель
+    * @example {}
+    */
     model?: string;
+    /**
+    * Модель используемая для поиска
+    */
     searchModel?: string;
+    /**
+    * Параметры для колонки index
+    */
     index?: boolean | ICrudItem;
+    /**
+    * Параметры для колонки create
+    */
     create?: boolean | ICrudItem;
+    /**
+    * Параметры для колонки update
+    */
     update?: boolean | ICrudItem;
+    /**
+    * Представление
+    */
     view?: boolean | ICrudItem;
+    /**
+    * Параметры для колонки delete
+    */
     delete?: boolean | ICrudItem;
+    /**
+    * Коллекция элементов
+    */
     items?: ICrudItem[] | {
         [key: string]: ICrudItem;
     };
+    /**
+    * Параметры Grid
+    */
     grid?: IGridProps | React.ReactNode;
+    /**
+    * Параметры формы
+    */
     form?: IFormProps | React.ReactNode;
+    /**
+    * Параметры для колонки detail
+    */
     detail?: any;
+    /**
+    * Представление для Crud
+    */
     crudView?: CustomView;
+    /**
+    * Функция-обработчик ошибок
+    * @param error - ошибка
+    * @param dispatch - диспатч
+    */
     errorHandler?: (error: any, dispatch: any) => void;
     [key: string]: any;
 }

package/ui/form/BlankField/BlankField.d.ts

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
-export interface IBlankFieldProps extends IFieldWrapperInputProps {
+export interface IBlankFieldProps extends IFieldWrapperInputProps, IUiComponent {
+    /**
+    * Текст для отображения
+    * @example 'Hello World!'
+    */
     text?: string | React.ReactNode;
+    /**
+     * Дочерние элементы
+     */
     children?: React.ReactNode;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IBlankFieldProps>;

package/ui/form/Button/Button.d.ts

@@ -10,7 +10,7 @@ export interface IButtonBadge {
  * Кнопка или ссылка. Используется в интерфейсе для выполнения какого-либо действия по клику (onClick),
  * смена страницы в рамках роутинга (goToRoute), переход по внешней ссылке (url) или отправки формы (submit form)
  */
-export interface IButtonProps {
+export interface IButtonProps extends IUiComponent {
     /**
      * Текст кнопки или ссылки
      * @example Save
@@ -71,7 +71,7 @@ export interface IButtonProps {
     target?: string;
     /**
      * Ссылка на внешнюю страницу, используется совместно с свойством `link`
-     * @example https://ya.ru
+     * @example https://kozhindev.com
      */
     url?: string;
     /**
@@ -96,20 +96,6 @@ export interface IButtonProps {
      * @example true
      */
     block?: boolean;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: CustomStyle;
-    /**
-     * Дополнительный CSS-класс для кнопки или ссылки
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Вложенные элементы
      */

package/ui/form/CheckboxField/CheckboxField.d.ts

@@ -4,24 +4,15 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fiel
  * CheckboxField
  * Одиночный чекбокс. Используется в формах для отметки булевого значения.
  */
-export interface ICheckboxFieldProps extends IFieldWrapperInputProps {
+export interface ICheckboxFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
-     * Свойства для элемента \<input /\>
+     * Свойства для элемента input
      * @example {onKeyDown: ...}
      */
     inputProps?: any;
-    /**
-     * Дополнительный CSS-класс для элемента \<input /\>
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Флаг определяющий включен ли элемент
-     * @example {'true'}
+     * @example true
      */
     checked?: boolean;
     [key: string]: any;

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -7,21 +7,12 @@ import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
  * CheckboxListField
  * Список с чекбоксами. Используется в формах для выбора нескольких значений.
  */
-export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'> {
+export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
-     * Свойства для элемента \<input /\>
+     * Свойства для элемента input
      * @example {onKeyDown: ...}
      */
     inputProps?: any;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Ориентация списка
      */

package/ui/form/DateRangeField/DateRangeField.d.ts

@@ -46,7 +46,13 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * @example true
      */
     showRemove?: boolean;
+    /**
+    * Свойства для input элемента from
+    */
     inputPropsFrom?: any;
+    /**
+    * Свойства для input элемента to
+    */
     inputPropsTo?: any;
     /**
      * Свойства для компонента Calendar

package/ui/form/DropDownField/DropDownField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IAccordionItemViewProps } from 'src/ui/content/Accordion/Accordion';
+import { IAccordionItemViewProps } from '../../../ui/content/Accordion/Accordion';
 import { DataProviderItems, IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
 import { IFieldWrapperInputProps } from '../../form/Field/fieldWrapper';
@@ -26,13 +26,15 @@ export interface IDropDownFieldItemViewProps extends IAccordionItemViewProps, Pi
     hoveredId: string;
     onItemSelect: (id: PrimaryKey | any) => void;
     onItemHover: (id: PrimaryKey | any) => void;
+    isItemToSelectAll: boolean;
+    isSelectedAll: boolean;
     [key: string]: any;
 }
 /**
  * DropDownField
  * Выпадающий список для выбора одного или нескольких значений
  */
-export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'> {
+export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
      * Placeholder подсказка
      * @example Your text...
@@ -48,26 +50,15 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     * @example true
     */
     outline?: boolean;
-    inputProps?: any;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
+     * Параметры для элемента input
      */
-    style?: CustomStyle;
+    inputProps?: any;
     /**
      * Показать иконку сброса для выбранных значений
      * @example true
      */
     showReset?: boolean;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Атрибут, в котором должны лежать дочерние элементы списка (для группировки)
      * Если аттрибут не задан - группировка не производится
@@ -89,9 +80,17 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     items?: IDropDownFieldItem[] | DataProviderItems;
     /**
      * Нужно ли использовать троеточие при переполнении DropDownField
-     * @example {'true'}
+     * @example true
      */
     showEllipses?: boolean;
+    /**
+    * Добавляет кнопку при нажатии на которую выбираются все элементы, работает только при multiple: true
+    * @example {label: 'All', id: 'all'}
+    */
+    itemToSelectAll?: boolean | {
+        label: string;
+        id: string;
+    };
     [key: string]: any;
 }
 export interface IDropDownFieldViewProps extends IDropDownFieldProps {
@@ -119,6 +118,10 @@ export interface IDropDownFieldViewProps extends IDropDownFieldProps {
     isSearchAutoFocus?: boolean;
     primaryKey: string;
     items: IDropDownFieldItem[];
+    itemToSelectAll: null | {
+        label: string;
+        id: string;
+    };
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDropDownFieldProps>;
 export default _default;

package/ui/form/DropDownField/DropDownField.js

@@ -51,6 +51,7 @@ var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var includes_1 = __importDefault(require("lodash-es/includes"));
+var isPlainObject_1 = __importDefault(require("lodash-es/isPlainObject"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 exports.GROUP_CONTENT_TYPE = 'group';
@@ -58,12 +59,25 @@ exports.CHECKBOX_CONTENT_TYPE = 'checkbox';
 exports.RADIO_CONTENT_TYPE = 'radio';
 exports.ICON_CONTENT_TYPE = 'icon';
 exports.IMG_CONTENT_TYPE = 'img';
+var normalizeItemToSelectAll = function (itemToSelectAll) {
+    if (!itemToSelectAll) {
+        return null;
+    }
+    if (typeof itemToSelectAll !== 'boolean' && (0, isPlainObject_1["default"])(itemToSelectAll)) {
+        return itemToSelectAll;
+    }
+    return {
+        id: 'all',
+        label: __('Все')
+    };
+};
 function DropDownField(props) {
     var components = (0, hooks_1.useComponents)();
     // Query state
     var _a = (0, react_1.useState)(''), query = _a[0], setQuery = _a[1];
     var hasGroup = !!props.groupAttribute;
     var _b = react_1["default"].useState([]), selectedAccordionItems = _b[0], setSelectedAccordionItems = _b[1];
+    var normalizedItemToSelectAll = react_1["default"].useMemo(function () { return normalizeItemToSelectAll(props.itemToSelectAll); }, [props.itemToSelectAll]);
     var toggleCollapse = function (indexSelected) {
         if (selectedAccordionItems.includes(indexSelected)) {
             var newState = __spreadArray([], selectedAccordionItems, true);
@@ -97,7 +111,7 @@ function DropDownField(props) {
         items: items,
         sourceItems: sourceItems,
         inputValue: props.input.value
-    }), isOpened = _d.isOpened, setIsOpened = _d.setIsOpened, setIsFocused = _d.setIsFocused, hoveredId = _d.hoveredId, setHoveredId = _d.setHoveredId, selectedIds = _d.selectedIds, setSelectedIds = _d.setSelectedIds, selectedItems = _d.selectedItems;
+    }), isOpened = _d.isOpened, setIsOpened = _d.setIsOpened, setIsFocused = _d.setIsFocused, hoveredId = _d.hoveredId, setHoveredId = _d.setHoveredId, selectedIds = _d.selectedIds, setSelectedIds = _d.setSelectedIds, selectedItems = _d.selectedItems, setSelectedAll = _d.setSelectedAll, isSelectedAll = _d.isSelectedAll;
     var onOpen = (0, react_1.useCallback)(function () {
         setQuery('');
         setIsFocused(true);
@@ -108,8 +122,12 @@ function DropDownField(props) {
         setHoveredId(id);
     }, [setHoveredId]);
     var onItemSelect = (0, react_1.useCallback)(function (id) {
+        if (id === (normalizedItemToSelectAll === null || normalizedItemToSelectAll === void 0 ? void 0 : normalizedItemToSelectAll.id)) {
+            setSelectedAll();
+            return;
+        }
         setSelectedIds(id);
-    }, [setSelectedIds]);
+    }, [normalizedItemToSelectAll, setSelectedAll, setSelectedIds]);
     var onItemRemove = (0, react_1.useCallback)(function (id) {
         setSelectedIds(selectedIds.filter(function (i) { return i !== id; }));
     }, [selectedIds, setSelectedIds]);
@@ -165,7 +183,9 @@ function DropDownField(props) {
         onItemSelect: onItemSelect,
         isShowMore: (0, includes_1["default"])(selectedAccordionItems || [], item.id),
         childIndex: item.id,
-        toggleCollapse: toggleCollapse
+        toggleCollapse: toggleCollapse,
+        isItemToSelectAll: item.id === (normalizedItemToSelectAll === null || normalizedItemToSelectAll === void 0 ? void 0 : normalizedItemToSelectAll.id),
+        isSelectedAll: isSelectedAll
     }); };
     var renderItem = function (item) {
         if (hasGroup && Array.isArray(item[props.groupAttribute])) {
@@ -182,7 +202,7 @@ function DropDownField(props) {
     return components.ui.renderView(props.view || 'form.DropDownFieldView', __assign(__assign({}, props), { isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, forwardedRef: forwardedRef, searchInputProps: searchInputProps, isOpened: isOpened, isLoading: isLoading, onOpen: onOpen, selectedItems: selectedItems, 
         // TODO onFocus
         // TODO onBlur
-        onReset: onReset, onClose: onClose, renderItem: renderItem, onItemRemove: onItemRemove, hasGroup: hasGroup }));
+        onReset: onReset, onClose: onClose, renderItem: renderItem, onItemRemove: onItemRemove, hasGroup: hasGroup, itemToSelectAll: normalizedItemToSelectAll }));
 }
 DropDownField.defaultProps = {
     primaryKey: 'id',
@@ -195,6 +215,7 @@ DropDownField.defaultProps = {
     autoComplete: false,
     showReset: false,
     multiple: false,
-    isSearchAutoFocus: true
+    isSearchAutoFocus: true,
+    itemToSelectAll: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DropDownField', DropDownField);

package/ui/form/Field/fieldWrapper.d.ts

@@ -44,7 +44,13 @@ export interface IFieldWrapperInputProps {
      * Input ID для связи поля с label
      */
     id?: string;
+    /**
+    * Значение для поля
+    */
     value?: any;
+    /**
+    * Callback-функция, которая вызывается при изменении данных
+    */
     onChange?: (...args: any[]) => any;
     /**
      * Ошибки в поле
@@ -52,10 +58,6 @@ export interface IFieldWrapperInputProps {
      */
     errors?: string[];
     date?: any;
-    /**
-     * Темная тема
-     */
-    dark?: boolean;
     /**
      * Размер поля
      */
@@ -71,9 +73,21 @@ export interface IFieldWrapperInputProps {
     [key: string]: any;
 }
 export interface IFieldWrapperOutputProps {
+    /**
+    * Id формы
+    */
     formId?: string;
+    /**
+    * Id компонента
+    */
     componentId?: string;
+    /**
+    * Коллекция ошибок
+    */
     errors?: string[];
+    /**
+    * Параметры для input элемента
+    */
     input?: {
         name?: string;
         value?: any;

package/ui/form/FieldLayout/FieldLayout.d.ts

@@ -3,11 +3,7 @@ import * as React from 'react';
  * FieldLayout
  * Специальный шаблон для поля, который настраивает его расположение внутри формы, рендерит лейбл, подсказки и ошибки
  */
-export interface IFieldLayoutProps {
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+export interface IFieldLayoutProps extends IUiComponent {
     /**
      * Название поля либо отмена отображение поля (false)
      * @example 'Visible'
@@ -31,14 +27,9 @@ export interface IFieldLayoutProps {
     errors?: string[];
     /**
      * Отображать ли состояние successful на поле
-     * @example {'true'}
+     * @example 'true'
      */
     successful?: boolean;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     [key: string]: any;
 }
 export interface IFieldLayoutViewProps {