@steroidsjs/core 3.0.0-beta.10 → 3.0.0-beta.101

package/ui/content/Chart/Chart.js

@@ -0,0 +1,19 @@
+"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 Chart(props) {
+    var components = (0, hooks_1.useComponents)();
+    return components.ui.renderView(props.view || 'content.ChartView', __assign({}, props));
+}
+exports["default"] = Chart;

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

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

package/ui/content/Chart/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 Chart_1 = __importDefault(require("./Chart"));
+exports["default"] = Chart_1["default"];

package/ui/content/Chat/Chat.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { IAvatarProps } from '../Avatar/Avatar';
+import { IGroupedMessagesByDates } from './hooks/useChat';
+export interface IChatUser {
+    id: number;
+    firstName?: string;
+    lastName?: string;
+    avatar?: IAvatarProps;
+}
+export interface IChatMessage {
+    id: number;
+    user: IChatUser;
+    text: string;
+    timestamp: Date | string;
+}
+export interface IChatProps extends IUiComponent {
+    /**
+     * Идентификатор чата
+     * @example TaskChat
+     */
+    chatId: string;
+    /**
+     * Коллекция сообщений,
+     * @example [
+     *  {
+     *         id: 1,
+     *         text: 'Всем привет!',
+     *         user: {
+     *             id: 1,
+     *             firstName: 'Olga',
+     *             lastName: 'Petrova',
+     *             avatar: {
+     *                 src: 'images.com/image.png',
+     *                 status: true,
+     *             },
+     *         },
+     *         timestamp: '2023-10-25T12:38:00',
+     *     },
+     * ]
+     */
+    messages: IChatMessage[];
+    /**
+     * Данные о текущем пользователе, нужны для отправки сообщений и определения сообщений пользователя
+     * @example {
+     *             id: 1,
+     *             firstName: 'Olga',
+     *             lastName: 'Petrova',
+     *             avatar: {
+     *                 src: 'images.com/image.png',
+     *                 status: true,
+     *             },
+     *         }
+     */
+    currentUser: IChatUser;
+    /**
+     * Обработчик события отправки сообщения
+     */
+    onSendMessage?: (chatId: string, message: IChatMessage) => void;
+}
+export interface IChatViewProps extends Omit<IChatProps, 'messages'> {
+    groupedMessagesByDates: IGroupedMessagesByDates;
+    onSendMessage: (data: any) => void;
+}
+export default function Chat(props: IChatProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/Chat/Chat.js

@@ -0,0 +1,29 @@
+"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 hooks_1 = require("../../../hooks");
+var useChat_1 = __importDefault(require("./hooks/useChat"));
+function Chat(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, useChat_1["default"])({
+        chatId: props.chatId,
+        messages: props.messages,
+        currentUser: props.currentUser,
+        onSendMessage: props.onSendMessage
+    }), onSendMessage = _a.onSendMessage, groupedMessagesByDates = _a.groupedMessagesByDates;
+    return components.ui.renderView(props.view || 'content.ChatView', __assign(__assign({}, props), { groupedMessagesByDates: groupedMessagesByDates, onSendMessage: onSendMessage }));
+}
+exports["default"] = Chat;

package/ui/content/Chat/constants/timeTemplatesAndUnits.d.ts

@@ -0,0 +1,8 @@
+export declare const MONTH_AND_DAY_TEMPLATE = "MMMM DD";
+export declare const HOURS_AND_MINUTES_TEMPLATE = "HH:mm";
+export declare const MINUTE_UNIT = "minute";
+export declare const ISO_TIMESTAMP_TEMPLATE = "YYYY-MM-DDTHH:mm:ss.SSS";
+export declare const HOUR_UNIT = "hour";
+export declare const SECONDS_IN_MINUTE_VALUE = 60000;
+export declare const MINUTES_IN_HOUR_VALUE = 60;
+export declare const HOURS_IN_DAY_VALUE = 24;

package/ui/content/Chat/constants/timeTemplatesAndUnits.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+exports.HOURS_IN_DAY_VALUE = exports.MINUTES_IN_HOUR_VALUE = exports.SECONDS_IN_MINUTE_VALUE = exports.HOUR_UNIT = exports.ISO_TIMESTAMP_TEMPLATE = exports.MINUTE_UNIT = exports.HOURS_AND_MINUTES_TEMPLATE = exports.MONTH_AND_DAY_TEMPLATE = void 0;
+exports.MONTH_AND_DAY_TEMPLATE = 'MMMM DD';
+exports.HOURS_AND_MINUTES_TEMPLATE = 'HH:mm';
+exports.MINUTE_UNIT = 'minute';
+exports.ISO_TIMESTAMP_TEMPLATE = 'YYYY-MM-DDTHH:mm:ss.SSS';
+exports.HOUR_UNIT = 'hour';
+exports.SECONDS_IN_MINUTE_VALUE = 60000;
+exports.MINUTES_IN_HOUR_VALUE = 60;
+exports.HOURS_IN_DAY_VALUE = 24;

package/ui/content/Chat/hooks/useChat.d.ts

@@ -0,0 +1,12 @@
+import { IChatMessage, IChatProps } from '../Chat';
+export type IChatConfig = Pick<IChatProps, 'chatId' | 'messages' | 'currentUser' | 'onSendMessage'>;
+export interface IGroupedMessage extends IChatMessage {
+    isFirstMessage?: boolean;
+    isLastMessage?: boolean;
+}
+export type IGroupedMessagesByDates = Record<string, IGroupedMessage[][]>;
+declare const useChat: (config: IChatConfig) => {
+    groupedMessagesByDates: {};
+    onSendMessage: (rawMessage: any) => void;
+};
+export default useChat;

package/ui/content/Chat/hooks/useChat.js

@@ -0,0 +1,41 @@
+"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 = require("react");
+var dayjs_1 = __importDefault(require("dayjs"));
+var uniqueId_1 = __importDefault(require("lodash-es/uniqueId"));
+var hooks_1 = require("../../../../hooks");
+var form_1 = require("../../../../actions/form");
+var utils_1 = require("../utils");
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var useChat = function (config) {
+    var _a = (0, react_1.useState)({}), groupedMessagesByDates = _a[0], setGroupedMessagesByDates = _a[1];
+    (0, react_1.useEffect)(function () { return setGroupedMessagesByDates((0, utils_1.getMessagesGroupedByDate)(config.messages)); }, [config.messages]);
+    var dispatch = (0, hooks_1.useDispatch)();
+    var onSendMessage = (0, react_1.useCallback)(function (rawMessage) {
+        var newMessage = __assign(__assign({}, rawMessage), { id: (0, uniqueId_1["default"])(), user: config.currentUser, timestamp: (0, dayjs_1["default"])().format(timeTemplatesAndUnits_1.ISO_TIMESTAMP_TEMPLATE) });
+        if (config.onSendMessage) {
+            config.onSendMessage(config.chatId, newMessage);
+        }
+        setGroupedMessagesByDates(function (prevGroupedMessagesByDates) { return (0, utils_1.addNewMessageIntoGroupedMessages)(newMessage, prevGroupedMessagesByDates); });
+        dispatch((0, form_1.formReset)(config.chatId));
+    }, [config, dispatch]);
+    return {
+        groupedMessagesByDates: groupedMessagesByDates,
+        onSendMessage: onSendMessage
+    };
+};
+exports["default"] = useChat;

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

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

package/ui/content/Chat/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 Chat_1 = __importDefault(require("./Chat"));
+exports["default"] = Chat_1["default"];

package/ui/content/Chat/utils/addNewMessageIntoGroupedMessages.d.ts

@@ -0,0 +1,5 @@
+import { IChatMessage } from '@steroidsjs/core/ui/content/Chat/Chat';
+import { IGroupedMessage, IGroupedMessagesByDates } from '../hooks/useChat';
+export declare const addNewMessageIntoGroupedMessages: (newMessage: IChatMessage, groupedMessagesByDates: IGroupedMessagesByDates) => {
+    [x: string]: IGroupedMessage[][];
+};

package/ui/content/Chat/utils/addNewMessageIntoGroupedMessages.js

@@ -0,0 +1,61 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.addNewMessageIntoGroupedMessages = void 0;
+var dayjs_1 = __importDefault(require("dayjs"));
+var last_1 = __importDefault(require("lodash-es/last"));
+var getMessagesGroupedByDate_1 = require("../utils/getMessagesGroupedByDate");
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var addMessageToExistingGroup = function (newMessage, groupedMessagesByDates, dateKey) {
+    var _a;
+    var currentGroupedMessagesByDates = __spreadArray([], groupedMessagesByDates[dateKey], true);
+    // last array of messages for this date
+    var lastMessageGroup = currentGroupedMessagesByDates.pop();
+    // last message for this date
+    var lastMessageFromGroup = (0, last_1["default"])(lastMessageGroup);
+    var messagesGroupForCurrentDate = __spreadArray(__spreadArray([], groupedMessagesByDates[dateKey], true), [[newMessage]], false);
+    if ((0, getMessagesGroupedByDate_1.isWithinTimeThreshold)(lastMessageFromGroup, newMessage)) {
+        // make a new message the last in the group
+        delete lastMessageFromGroup.isLastMessage;
+        delete newMessage.isFirstMessage;
+        if (lastMessageGroup.length === 1) {
+            messagesGroupForCurrentDate = __spreadArray(__spreadArray([], currentGroupedMessagesByDates, true), [[lastMessageFromGroup, newMessage]], false);
+        }
+        else {
+            messagesGroupForCurrentDate = __spreadArray(__spreadArray([], currentGroupedMessagesByDates, true), [__spreadArray(__spreadArray([], lastMessageGroup, true), [newMessage], false)], false);
+        }
+    }
+    return __assign(__assign({}, groupedMessagesByDates), (_a = {}, _a[dateKey] = messagesGroupForCurrentDate, _a));
+};
+var addNewMessageIntoGroupedMessages = function (newMessage, groupedMessagesByDates) {
+    var _a;
+    var dateKey = (0, dayjs_1["default"])(newMessage.timestamp).format(timeTemplatesAndUnits_1.MONTH_AND_DAY_TEMPLATE);
+    var singleMessageInGroup = __assign(__assign({}, newMessage), { isFirstMessage: true, isLastMessage: true });
+    if (groupedMessagesByDates[dateKey]) {
+        return addMessageToExistingGroup(singleMessageInGroup, groupedMessagesByDates, dateKey);
+    }
+    return __assign(__assign({}, groupedMessagesByDates), (_a = {}, _a[dateKey] = [[singleMessageInGroup]], _a));
+};
+exports.addNewMessageIntoGroupedMessages = addNewMessageIntoGroupedMessages;

package/ui/content/Chat/utils/calculateMessageTimeAgo.d.ts

@@ -0,0 +1 @@
+export declare const calculateMessageTimeAgo: (timestamp: any) => string;

package/ui/content/Chat/utils/calculateMessageTimeAgo.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.calculateMessageTimeAgo = void 0;
+var dayjs_1 = __importDefault(require("dayjs"));
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var calculateMessageTimeAgo = function (timestamp) {
+    var now = (0, dayjs_1["default"])();
+    var messageTime = (0, dayjs_1["default"])(timestamp);
+    var diffInMinutes = now.diff(messageTime, timeTemplatesAndUnits_1.MINUTE_UNIT);
+    var diffInHours = now.diff(messageTime, timeTemplatesAndUnits_1.HOUR_UNIT);
+    var timeAgo = '';
+    if (diffInMinutes < timeTemplatesAndUnits_1.MINUTES_IN_HOUR_VALUE) {
+        timeAgo = __("".concat(diffInMinutes, " \u043C\u0438\u043D. \u043D\u0430\u0437\u0430\u0434"), { diffInMinutes: diffInMinutes });
+    }
+    else if (diffInHours < timeTemplatesAndUnits_1.HOURS_IN_DAY_VALUE) {
+        timeAgo = __("".concat(diffInHours, " \u0447. \u043D\u0430\u0437\u0430\u0434"), { diffInHours: diffInHours });
+    }
+    else {
+        timeAgo = messageTime.format(timeTemplatesAndUnits_1.HOURS_AND_MINUTES_TEMPLATE);
+    }
+    return timeAgo;
+};
+exports.calculateMessageTimeAgo = calculateMessageTimeAgo;

package/ui/content/Chat/utils/getMessagesGroupedByDate.d.ts

@@ -0,0 +1,4 @@
+import { IGroupedMessagesByDates } from '../hooks/useChat';
+import { IChatMessage } from '../Chat';
+export declare const isWithinTimeThreshold: (firstMessage: IChatMessage, secondMessage: IChatMessage) => boolean;
+export declare const getMessagesGroupedByDate: (messages: IChatMessage[]) => IGroupedMessagesByDates;

package/ui/content/Chat/utils/getMessagesGroupedByDate.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getMessagesGroupedByDate = exports.isWithinTimeThreshold = void 0;
+var first_1 = __importDefault(require("lodash-es/first"));
+var last_1 = __importDefault(require("lodash-es/last"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var isWithinTimeThreshold = function (firstMessage, secondMessage) {
+    var firstMessageTime = new Date(firstMessage.timestamp).getTime();
+    var secondMessageTime = new Date(secondMessage.timestamp).getTime();
+    return firstMessage.user.id === secondMessage.user.id && Math.abs(firstMessageTime - secondMessageTime) <= timeTemplatesAndUnits_1.SECONDS_IN_MINUTE_VALUE;
+};
+exports.isWithinTimeThreshold = isWithinTimeThreshold;
+var addFirstAndLastKeyForMessageGroup = function (messageGroup) {
+    (0, first_1["default"])(messageGroup).isFirstMessage = true;
+    (0, last_1["default"])(messageGroup).isLastMessage = true;
+};
+var getMessagesGroupedByDate = function (messages) {
+    var groupedMessages = {};
+    var prevDateKey = null;
+    messages.forEach(function (message) {
+        var dateKey = (0, dayjs_1["default"])(message.timestamp).format(timeTemplatesAndUnits_1.MONTH_AND_DAY_TEMPLATE);
+        if (!groupedMessages[dateKey]) {
+            groupedMessages[dateKey] = [];
+        }
+        // array of grouped messages for dateKey
+        var messagesGroupFromDate = groupedMessages[dateKey];
+        // last group of messages
+        var lastMessageGroup = (0, last_1["default"])(messagesGroupFromDate);
+        // add fields to the last group of messages for the previous date
+        if (!lastMessageGroup && prevDateKey) {
+            addFirstAndLastKeyForMessageGroup((0, last_1["default"])(groupedMessages[prevDateKey]));
+        }
+        var lastMessageFromGroup = (0, last_1["default"])(lastMessageGroup);
+        // if time difference between messages is less than a minute, and they are from the same user
+        if (lastMessageFromGroup && (0, exports.isWithinTimeThreshold)(lastMessageFromGroup, message)) {
+            lastMessageGroup.push(message);
+        }
+        else if (lastMessageGroup) {
+            // add fields to the previous group of messages for the same date
+            addFirstAndLastKeyForMessageGroup(lastMessageGroup);
+            messagesGroupFromDate.push([message]);
+        }
+        else {
+            prevDateKey = dateKey;
+            messagesGroupFromDate.push([message]);
+        }
+    });
+    // add fields to the last group of messages
+    addFirstAndLastKeyForMessageGroup((0, last_1["default"])(groupedMessages[prevDateKey]));
+    return groupedMessages;
+};
+exports.getMessagesGroupedByDate = getMessagesGroupedByDate;

package/ui/content/Chat/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { getMessagesGroupedByDate, isWithinTimeThreshold } from './getMessagesGroupedByDate';
+import { addNewMessageIntoGroupedMessages } from './addNewMessageIntoGroupedMessages';
+import { calculateMessageTimeAgo } from './calculateMessageTimeAgo';
+export { getMessagesGroupedByDate, isWithinTimeThreshold, addNewMessageIntoGroupedMessages, calculateMessageTimeAgo, };

package/ui/content/Chat/utils/index.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+exports.calculateMessageTimeAgo = exports.addNewMessageIntoGroupedMessages = exports.isWithinTimeThreshold = exports.getMessagesGroupedByDate = void 0;
+var getMessagesGroupedByDate_1 = require("./getMessagesGroupedByDate");
+exports.getMessagesGroupedByDate = getMessagesGroupedByDate_1.getMessagesGroupedByDate;
+exports.isWithinTimeThreshold = getMessagesGroupedByDate_1.isWithinTimeThreshold;
+var addNewMessageIntoGroupedMessages_1 = require("./addNewMessageIntoGroupedMessages");
+exports.addNewMessageIntoGroupedMessages = addNewMessageIntoGroupedMessages_1.addNewMessageIntoGroupedMessages;
+var calculateMessageTimeAgo_1 = require("./calculateMessageTimeAgo");
+exports.calculateMessageTimeAgo = calculateMessageTimeAgo_1.calculateMessageTimeAgo;

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

@@ -1,15 +1,75 @@
-import { IBemHocOutput } from '../../../hoc/bem';
-import { IConnectHocOutput } from '../../../hoc/connect';
-interface ICopyToClipboardProps extends IBemHocOutput, IConnectHocOutput {
+import React from 'react';
+import { IShowNotificationParameters } from '../../../actions/notifications';
+/**
+ * CopyToClipboard
+ *
+ * Компонент, позволяющий копировать заданное значение в буфер обмена при клике.
+ *
+ * Компонент `CopyToClipboard` принимает значение `value` для копирования, а также
+ * может отображать иконку, дополнительный текст или другие дочерние элементы.
+ *
+ * При успешном копировании значения, можно также отобразить уведомление с помощью
+ * параметра `notification`. Можно задать текст уведомления, его уровень и параметры.
+ *
+ * Компонент также поддерживает обработчик `onCopy`, который вызывается при копировании.
+ */
+export interface ICopyToClipboardProps extends IUiComponent {
+    /**
+    * Значение, которое будет использоваться при копировании
+    * @example 'Steroids.js'
+    */
     value: string;
+    /**
+    * Переводит состояние компонента в выключенное
+    * @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;
-        timeOut?: string;
+        params?: IShowNotificationParameters;
     };
-    className?: string;
-    children?: any;
+    /**
+    * Позволяет включить или выключить отображение иконки
+    * @example false
+    */
+    showCopyIcon?: boolean;
+    /**
+    * Иконка
+    * @example calendar-day
+    */
+    icon?: string | React.ReactElement;
+    /**
+    * Дочерний элемент
+    * @example <h1>This message will be copied!</h1>
+    */
+    children?: React.ReactNode;
+    /**
+    * Callback который вызывается при копировании
+    */
+    onCopy?: VoidFunction;
 }
-export default function CopyToClipboard(props: ICopyToClipboardProps): any;
-export {};
+export interface ICopyToClipboardViewProps extends ICopyToClipboardProps {
+    onClick: () => void;
+}
+declare function CopyToClipboard(props: ICopyToClipboardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare namespace CopyToClipboard {
+    var defaultProps: {
+        showCopyIcon: boolean;
+    };
+}
+export default CopyToClipboard;

package/ui/content/CopyToClipboard/CopyToClipboard.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -69,60 +46,50 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
-var react_1 = __importStar(require("react"));
-var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
+/* eslint-disable no-unused-expressions */
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
 var notifications_1 = require("../../../actions/notifications");
+var DEFAULT_NOTIFICATION_LEVEL = 'info';
 function CopyToClipboard(props) {
     var _this = this;
-    var inputRef = (0, react_1.useRef)();
+    var components = (0, hooks_1.useComponents)();
     var _a = (0, react_1.useState)(false), isCopied = _a[0], setIsCopied = _a[1];
-    var dispatch = (0, useDispatch_1["default"])();
+    var dispatch = (0, hooks_1.useDispatch)();
+    var notification = props.notification;
     var onClick = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
-        var el, notification;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!!isCopied) return [3 /*break*/, 4];
+                    if (props.disabled) {
+                        return [2 /*return*/];
+                    }
+                    if (!!isCopied) return [3 /*break*/, 3];
                     if (!navigator.clipboard) return [3 /*break*/, 2];
                     return [4 /*yield*/, navigator.clipboard.writeText(props.value)];
                 case 1:
                     _a.sent();
-                    return [3 /*break*/, 3];
-                case 2:
-                    el = inputRef.current;
-                    if (el) {
-                        el.focus();
-                        el.select();
+                    if (props.onCopy) {
+                        props.onCopy();
                     }
-                    document.execCommand('copy');
-                    _a.label = 3;
-                case 3:
-                    if (props.notification) {
-                        notification = __assign({ level: 'info', params: undefined }, (typeof props.notification === 'string' ? { message: props.notification } : props.notification));
-                        dispatch((0, notifications_1.showNotification)(notification.message, notification.level, notification.params));
+                    _a.label = 2;
+                case 2:
+                    if (notification) {
+                        typeof notification === 'string'
+                            ? dispatch((0, notifications_1.showNotification)(notification, DEFAULT_NOTIFICATION_LEVEL))
+                            : dispatch((0, notifications_1.showNotification)(notification.message, notification.level || DEFAULT_NOTIFICATION_LEVEL, notification.params));
                     }
                     setIsCopied(true);
                     setTimeout(function () { return setIsCopied(false); }, 1000);
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
             }
         });
-    }); }, [dispatch, isCopied, props.notification, props.value]);
-    if (props.disabled) {
-        return props.children;
-    }
-    return (react_1["default"].createElement("span", { className: props.className, onClick: onClick, "aria-hidden": 'true' },
-        props.children,
-        react_1["default"].createElement("input", { ref: inputRef, defaultValue: props.value, style: {
-                position: 'absolute',
-                height: 1,
-                width: 1,
-                top: 0,
-                opacity: 0
-            } })));
+    }); }, [dispatch, isCopied, notification, props]);
+    return components.ui.renderView(props.view || 'content.CopyToClipboardView', __assign(__assign({}, props), { onClick: onClick }));
 }
+CopyToClipboard.defaultProps = {
+    showCopyIcon: true
+};
 exports["default"] = CopyToClipboard;

package/ui/content/Dashboard/Dashboard.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IFlexGridItem, IFlexGridProps } from '../../../ui/list/FlexGrid/FlexGrid';
+export interface IDashboardItem extends IFlexGridItem {
+    /**
+    * Заголовок для элемента
+    */
+    title?: string;
+}
+/**
+ * Dashboard
+ *
+ * Компонент в котором можно расположить различные элементы, например графики, таблицы на доске
+ */
+export interface IDashboardProps extends IUiComponent, IFlexGridProps {
+    /**
+     * Элементы дашборда
+     */
+    items: IDashboardItem[];
+    /**
+     * Кастомная вьюшка для элемента
+     */
+    itemView?: CustomView;
+}
+export interface IDashboardItemViewProps {
+    children: React.ReactNode;
+    title?: string;
+}
+declare function Dashboard(props: IDashboardProps): JSX.Element;
+export default Dashboard;