@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.6

package/ui/modal/Modal/demo/controls.js

@@ -0,0 +1,62 @@
+"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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Modal_1 = __importDefault(require("../Modal"));
+var Button_1 = __importDefault(require("../../../form/Button"));
+var modal_1 = require("../../../../actions/modal");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+function DemoModal(props) {
+    return (React.createElement(Modal_1["default"], __assign({ title: 'Modal with controls', onClose: props.onClose, controls: [
+            { label: 'Show Alert', onClick: function () { return alert('This is alert!'); } },
+            { label: 'Close', onClick: function () { return props.onClose(); } },
+        ] }, props),
+        React.createElement("div", { style: { marginBottom: '20px' } }, "This is your modal content.")));
+}
+/**
+ * Modal содержит набор контролов с привязанными обработчиками.
+ * @order 2
+ * @col 6
+ */
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button_1["default"], { label: 'Open modal', onClick: function (e) {
+                e.preventDefault();
+                dispatch(modal_1.openModal(DemoModal, {
+                    modalId: 'demo'
+                }));
+            } })));
+});

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * По-умолчанию, Modal имеет 3 заданных размера.
+ * @order 3
+ * @col 12
+ */
+export default _default;

package/ui/modal/Modal/demo/size.js

@@ -0,0 +1,66 @@
+"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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Modal_1 = __importDefault(require("../Modal"));
+var Button_1 = __importDefault(require("../../../form/Button"));
+var modal_1 = require("../../../../actions/modal");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+var sizesArray = ['small', 'middle', 'large'];
+function DemoModal(props) {
+    return (React.createElement(Modal_1["default"], __assign({ title: props.size + " modal", onClose: props.onClose }, props),
+        React.createElement("div", { style: { marginBottom: '20px' } },
+            "This is your content for",
+            React.createElement("strong", null,
+                ' ',
+                props.size,
+                ' '),
+            "modal.")));
+}
+/**
+ * По-умолчанию, Modal имеет 3 заданных размера.
+ * @order 3
+ * @col 12
+ */
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement("div", { style: { display: 'flex' } }, sizesArray.map(function (size) { return (React.createElement(Button_1["default"], { key: size, label: "Open " + size + " modal", onClick: function (e) {
+            e.preventDefault();
+            dispatch(modal_1.openModal(DemoModal, {
+                modalId: 'demo',
+                size: size
+            }));
+        }, style: { marginRight: '20px' } })); })));
+});

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

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

package/ui/modal/Modal/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Modal_1 = __importDefault(require("./Modal"));
+exports["default"] = Modal_1["default"];

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface IModalPortalProps {
+    /**
+     * Время, через которое произойдет закрытие Modal
+     * @example 300
+     */
+    animationDelayMc?: number;
+    /**
+     * Группа Modal
+     * @example 'modal'
+     */
+    group?: string;
+}
+declare function ModalPortal(props: IModalPortalProps): JSX.Element;
+declare namespace ModalPortal {
+    var defaultProps: {
+        group: string;
+        animationDelayMc: number;
+    };
+}
+export default ModalPortal;

package/ui/modal/ModalPortal/ModalPortal.js

@@ -0,0 +1,75 @@
+"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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var orderBy_1 = __importDefault(require("lodash-es/orderBy"));
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
+var modal_1 = require("../../../actions/modal");
+var modal_2 = require("../../../reducers/modal");
+function ModalPortal(props) {
+    var dispatch = useDispatch_1["default"]();
+    var group = props.group || ModalPortal.defaultProps.group;
+    var opened = hooks_1.useSelector(function (state) { return modal_2.getOpened(state, group); });
+    var closeInternal = react_1.useCallback(function (item) {
+        if (item.props && item.props.onClose) {
+            item.props.onClose();
+        }
+        dispatch(modal_1.closeModal(item.id, props.group));
+    }, [dispatch, props.group]);
+    var onClose = react_1.useCallback(function (item) {
+        var _a, _b;
+        var animationDelayMc = (_b = (_a = item.props) === null || _a === void 0 ? void 0 : _a.closeTimeoutMs) !== null && _b !== void 0 ? _b : props.animationDelayMc;
+        if (animationDelayMc > 0) {
+            dispatch(modal_1.modalMarkClosing(item.id, props.group));
+            setTimeout(function () { return closeInternal(item); }, animationDelayMc);
+        }
+        else {
+            closeInternal(item);
+        }
+    }, [closeInternal, dispatch, props.animationDelayMc, props.group]);
+    return orderBy_1["default"](opened, 'id').map(function (item, index) {
+        var ModalComponent = item.modal;
+        var modalProps = __assign(__assign({}, item.props), { index: index,
+            group: group, isClosing: item.isClosing, onClose: function () { return onClose(item); }, closeTimeoutMs: item.props.closeTimeoutMs || props.animationDelayMc });
+        return (React.createElement(ModalComponent, __assign({ key: item.id }, modalProps)));
+    });
+}
+ModalPortal.defaultProps = {
+    group: modal_2.MODAL_DEFAULT_GROUP,
+    animationDelayMc: 300
+};
+exports["default"] = ModalPortal;

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

@@ -0,0 +1,2 @@
+import ModalPortal from './ModalPortal';
+export default ModalPortal;

package/ui/modal/ModalPortal/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ModalPortal_1 = __importDefault(require("./ModalPortal"));
+exports["default"] = ModalPortal_1["default"];

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+interface ITwoFactorModalProps {
+    view?: any;
+    providerName: string;
+    onClose?: any;
+}
+interface ITwoFactorModalPrivateProps extends ITwoFactorModalProps {
+    info?: {
+        providerName: string;
+        providerData: any;
+        createTime: string;
+        expireTime: string;
+        isConfirmed: string;
+    };
+}
+export interface ITwoFactorModalViewProps extends ITwoFactorModalPrivateProps {
+    description?: string;
+    formProps?: any;
+    [key: string]: any;
+}
+export default function TwoFactorModal(props: ITwoFactorModalProps): JSX.Element;
+export {};

package/ui/modal/TwoFactorModal/TwoFactorModal.js

@@ -0,0 +1,56 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useComponents_1 = __importDefault(require("../../../hooks/useComponents"));
+var useFetch_1 = __importDefault(require("../../../hooks/useFetch"));
+var Modal_1 = __importDefault(require("../Modal"));
+function TwoFactorModal(props) {
+    var components = useComponents_1["default"]();
+    // TODO set types
+    var data = useFetch_1["default"]({
+        method: 'post',
+        url: "/api/v1/auth/2fa/" + props.providerName + "/send"
+    }).data;
+    var providerData = data.providerData;
+    var getDescription = function () {
+        switch (props.providerName) {
+            case 'notifier':
+                if ((providerData === null || providerData === void 0 ? void 0 : providerData.type) === 'phone') {
+                    return __('Вам отправлен СМС код на номер {phone}, введите его в поле ниже', {
+                        phone: providerData === null || providerData === void 0 ? void 0 : providerData.value
+                    });
+                }
+                if ((providerData === null || providerData === void 0 ? void 0 : providerData.type) === 'email') {
+                    return __('Вам отправлен код на почту {email}, введите его в поле ниже', {
+                        email: providerData === null || providerData === void 0 ? void 0 : providerData.value
+                    });
+                }
+                return __('Для подтверждения операции вам отправлен код');
+            case 'google':
+                return __('Введите код подтверждения из мобильного приложения Google Authenticator');
+            default: return __('Введите код для подтверждения операции');
+        }
+    };
+    var TwoFactorModalView = props.view || components.ui.getView('modal.TwoFactorModalView');
+    return (react_1["default"].createElement(Modal_1["default"], __assign({}, props, { onClose: props.onClose }),
+        react_1["default"].createElement(TwoFactorModalView, __assign({}, props, { formProps: {
+                formId: 'TwoFactorModal',
+                action: "/api/v1/auth/2fa/" + props.providerName + "/confirm",
+                onComplete: function () { return props.onClose(); }
+            }, description: getDescription() }))));
+}
+exports["default"] = TwoFactorModal;

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

@@ -0,0 +1,2 @@
+import TwoFactorModal from './TwoFactorModal';
+export default TwoFactorModal;

package/ui/modal/TwoFactorModal/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var TwoFactorModal_1 = __importDefault(require("./TwoFactorModal"));
+exports["default"] = TwoFactorModal_1["default"];

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

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { IRouteItem } from '../Router/Router';
+/**
+ * Breadcrumbs
+ * Хлебные крошки
+ */
+export interface IBreadcrumbsProps {
+    /**
+     * Кастомный CSS-класс
+     * @example 'CustomCssClassName'
+     */
+    className?: CssClassName;
+    /**
+     * Коллекция элементов навигационной цепочки
+     * @example [{id: 'root', title: 'Home'}, {id: 'catalog', title: 'Catalog'}]
+     */
+    items?: IRouteItem[];
+    /**
+     * Вместо items можно передать идентификатор роута, от которого компонент самостоятельно построит
+     * навигационную цепочку
+     * @example 'catalog'
+     */
+    pageId?: string;
+    /**
+     * Заголовок последней в списке страницы (обычно, это текущая страница, на которой находится пользователь).
+     * Если заголовок не задан, то подставится item.title
+     * @example 'Каталог'
+     */
+    pageTitle?: string;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    [key: string]: any;
+}
+export declare type IBreadcrumbsViewProps = IBreadcrumbsProps & {
+    routeParams?: any;
+};
+export default function Breadcrumbs(props: IBreadcrumbsProps): JSX.Element;

package/ui/nav/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,24 @@
+"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");
+var router_1 = require("../../../reducers/router");
+function Breadcrumbs(props) {
+    var components = hooks_1.useComponents();
+    var routeItems = hooks_1.useSelector(function (state) { return router_1.getRouteBreadcrumbs(state, props.pageId); });
+    var routeParams = hooks_1.useSelector(function (state) { return router_1.getRouteParams(state); });
+    var items = props.items || routeItems;
+    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', __assign(__assign({}, props), { items: items,
+        routeParams: routeParams }));
+}
+exports["default"] = Breadcrumbs;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Самый простой способ построить цепочку Breadcrumbs - передать id целевого роута.
+ * @order 1
+ * @col 6
+ */
+export default _default;

package/ui/nav/Breadcrumbs/demo/basic.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
+/**
+ * Самый простой способ построить цепочку Breadcrumbs - передать id целевого роута.
+ * @order 1
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Breadcrumbs_1["default"], { pageId: 'react' }))); });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Передаем заданный массив роутов.
+ * @order 3
+ * @col 12
+ */
+export default _default;

package/ui/nav/Breadcrumbs/demo/items.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
+/**
+ * Передаем заданный массив роутов.
+ * @order 3
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Breadcrumbs_1["default"], { items: [
+            { id: 'root', title: 'Home' },
+            { id: 'react', title: 'Frontend React' },
+            { id: 'ui', title: 'Ui' },
+            { id: 'Breadcrumbs', title: 'Breadcrumbs' },
+        ] }))); });

package/ui/nav/Breadcrumbs/demo/page-title.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Изменяем заголовок последней в списке страницы.
+ * @order 2
+ * @col 6
+ */
+export default _default;

package/ui/nav/Breadcrumbs/demo/page-title.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
+/**
+ * Изменяем заголовок последней в списке страницы.
+ * @order 2
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Breadcrumbs_1["default"], { pageId: 'react', pageTitle: 'Custom text' }))); });

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

@@ -0,0 +1,2 @@
+import Breadcrumbs from './Breadcrumbs';
+export default Breadcrumbs;

package/ui/nav/Breadcrumbs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Breadcrumbs_1 = __importDefault(require("./Breadcrumbs"));
+exports["default"] = Breadcrumbs_1["default"];

package/ui/nav/Controls/Controls.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { IButtonProps } from '../../form/Button/Button';
+import { INavProps } from '../Nav/Nav';
+export interface IControlItem extends IButtonProps {
+    /**
+     * Идентификатор контрола
+     * @example 'create'
+     */
+    id?: string;
+    /**
+     * Скрыть или показать контрол
+     * @example true
+     */
+    visible?: boolean;
+    /**
+     * Расположение контрола
+     * @example 'left'
+     */
+    position?: 'left' | 'right';
+}
+/**
+ * Controls
+ * Коллекция с контролами. Можно передавать список с кастомными контролами, а можно использовать стандарные контролы
+ * компонента. Стандартные контролы подходят для CRUD-операций, все что нужно для их использования - передать
+ * соответствующий id и обработчик - внешний вид (иконка и название) отобразятся автоматом.
+ */
+export interface IControlsProps {
+    /**
+     * Коллекция контролов
+     * @example [{id: 'delete', onClick: () => alert("It's deleted")}]
+     */
+    items?: IControlItem[];
+    /**
+     * Пропсы для компонента Nav, в который передаются контролы в качестве items
+     * @example {layout: 'link'}
+     */
+    navProps?: INavProps;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: any;
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     * @example MyCustomView
+     */
+    className?: string;
+    [key: string]: any;
+}
+export interface IControlsViewProps extends IControlsProps {
+    className?: string;
+    items: (IControlItem & {
+        icon?: string;
+        label?: string | any;
+        confirm?: string;
+        color?: ColorName;
+        outline?: boolean;
+        position?: 'right' | 'left';
+    })[];
+}
+export default function Controls(props: IControlsProps): JSX.Element;