@steroidsjs/core 3.0.0-beta.1 → 3.0.0-beta.100

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,25 +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;
-    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 __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) {
@@ -44,7 +25,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -65,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 = react_1.useRef();
-    var _a = react_1.useState(false), isCopied = _a[0], setIsCopied = _a[1];
-    var dispatch = useDispatch_1["default"]();
-    var onClick = react_1.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
-        var el, notification;
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, react_1.useState)(false), isCopied = _a[0], setIsCopied = _a[1];
+    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 () {
         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(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;

package/ui/content/Dashboard/Dashboard.js

@@ -0,0 +1,26 @@
+"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 FlexGrid_1 = __importDefault(require("../../../ui/list/FlexGrid/FlexGrid"));
+var hooks_1 = require("../../../hooks");
+function Dashboard(props) {
+    var components = (0, hooks_1.useComponents)();
+    var DashboardItemView = props.itemView || components.ui.getView('content.DashboardItemView');
+    var flexGridItems = react_1["default"].useMemo(function () { return props.items.map(function (item) { return (__assign(__assign({}, item), { content: (react_1["default"].createElement(DashboardItemView, { title: item.title }, item.content)) })); }); }, [DashboardItemView, props.items]);
+    return (react_1["default"].createElement(FlexGrid_1["default"], __assign({}, props, { items: flexGridItems })));
+}
+exports["default"] = Dashboard;

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

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

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

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

@@ -31,7 +31,21 @@ export interface IDetailResponsive {
      */
     media: IDetailMedia[];
 }
-export interface IDetailProps {
+/**
+ * Detail
+ *
+ * Представление данных в виде таблицы, в которой поля группируются по принципу "ключ-значение".
+ *
+ * Компонент `Detail` принимает данные в виде дочерних компонентов `DetailItem`, которые отображаются
+ * в виде таблицы с ячейками "ключ-значение".
+ *
+ * Компонент поддерживает различные настройки, такие как размер ячеек, вариант расположения
+ * ячеек ("horizontal" или "vertical"), а также респонсивный режим, позволяющий перестраивать
+ * таблицу при изменении размеров окна.
+ *
+ * Компонент также может отображать заголовок таблицы и контролы, расположенные рядом с таблицей.
+ */
+export interface IDetailProps extends IUiComponent {
     /**
      * Размер ячеек в таблице
      * @example 'sm'
@@ -62,15 +76,6 @@ export interface IDetailProps {
      * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
      */
     controls?: IControlItem[];
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Дополнительный CSS-класс для таблицы
-     */
-    className?: string;
     /**
      * Дочерние компоненты
      */
@@ -83,19 +88,19 @@ export interface IDetailItemOutputProps extends IDetailItemProps {
 }
 export interface IDetailViewProps extends IDetailProps {
     rows: IDetailItemOutputProps[][];
-    resizedNodeRef?: (node: HTMLElement) => void;
+    resizedNodeRef?: (node: HTMLDivElement) => void;
 }
 export declare const constants: Readonly<{
-    MAX_COLUMN: number;
-    CELLS_IN_COLUMN: number;
-    TABLE_HEAD_COLSPAN: number;
+    MAX_COLUMN: 3;
+    CELLS_IN_COLUMN: 2;
+    TABLE_HEAD_COLSPAN: 1;
 }>;
 declare function Detail(props: IDetailProps): JSX.Element;
 declare namespace Detail {
     var defaultProps: {
         size: string;
         layout: DetailLayoutEnum;
-        column: number;
+        column: 3;
         responsive: boolean;
     };
 }