@steroidsjs/core 3.0.0-beta.11 → 3.0.0-beta.111

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.isTodayMessage = 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;
+var isTodayMessage_1 = require("./isTodayMessage");
+exports.isTodayMessage = isTodayMessage_1.isTodayMessage;

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

@@ -0,0 +1 @@
+export declare const isTodayMessage: (timestamp: string | Date) => boolean;

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.isTodayMessage = void 0;
+var dayjs_1 = __importDefault(require("dayjs"));
+var isTodayMessage = function (timestamp) {
+    var messageDate = (0, dayjs_1["default"])(timestamp);
+    var currentDate = (0, dayjs_1["default"])();
+    return currentDate.isSame(messageDate, 'day') || currentDate.isAfter(messageDate);
+};
+exports.isTodayMessage = isTodayMessage;

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,32 @@
+import React from 'react';
+import { IFlexGridItem, IFlexGridProps } from '../../../ui/list/FlexGrid/FlexGrid';
+export interface IDashboardItem extends IFlexGridItem {
+    /**
+    * Заголовок для элемента
+    */
+    title?: string;
+    /**
+     * Иконка, которая отобразится слева от заголовка
+     */
+    iconName?: string;
+}
+/**
+ * Dashboard
+ *
+ * Компонент в котором можно расположить различные элементы, например графики, таблицы на доске
+ */
+export interface IDashboardProps extends IUiComponent, IFlexGridProps {
+    /**
+     * Элементы дашборда
+     */
+    items: IDashboardItem[];
+    /**
+     * Кастомная вьюшка для элемента
+     */
+    itemView?: CustomView;
+}
+export interface IDashboardItemViewProps extends Pick<IDashboardItem, 'title' | 'iconName'> {
+    children: React.ReactNode;
+}
+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, iconName: item.iconName }, 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'
@@ -44,7 +58,16 @@ export interface IDetailProps {
     layout?: DetailLayoutEnum;
     /**
      * Перестраивать таблицу при ресайзе
-     * @example {enable: true, media: [{breakpoint: 600, column: 2}]}
+     * @example
+     * {
+     *  enable: true,
+     *  media: [
+     *   {
+     *    breakpoint: 600,
+     *    column: 2
+     *   }
+     *  ]
+     * }
      */
     responsive?: boolean | IDetailResponsive;
     /**
@@ -59,18 +82,13 @@ export interface IDetailProps {
     title?: string | React.ReactNode;
     /**
      * Контролы, которые нужно расположить рядом с таблицей
-     * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
+     * @example
+     * [{
+     *  label: __(('Edit')),
+     *  onClick: () => props.onClick()
+     * }]
      */
     controls?: IControlItem[];
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Дополнительный CSS-класс для таблицы
-     */
-    className?: string;
     /**
      * Дочерние компоненты
      */
@@ -83,7 +101,7 @@ 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: 3;

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

@@ -22,7 +22,7 @@ export interface IDetailItemProps {
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
-     */
+    */
     view?: CustomView;
     /**
      * Дополнительный CSS-класс для ячейки с наименованием

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

@@ -1,31 +1,42 @@
 import * as React from 'react';
 import { IAbsolutePositioningInputProps, IAbsolutePositioningOutputProps } from '../../../hooks/useAbsolutePositioning';
+/**
+ * Menu
+ *
+ * Компонент, представляющий меню с элементами, которые могут быть выбраны или нажаты.
+ * Компонент позволяет отображать и скрывать содержимое меню, а также управлять его позиционированием.
+ */
 export interface IDropDownProps extends IAbsolutePositioningInputProps {
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
      * Содержимое DropDown (компонент или jsx-код)
      * @example () => Component
      */
     content?: () => React.ReactNode;
-    /**
-     * Переопределение view React компонента для кастомизациии отображения
-     * @example MyCustomView
-     */
-    view?: any;
     /**
      * В каком случае закрывать DropDown. По-умолчанию - `click-away`
      * @example click-any
      */
-    closeMode?: 'click-away' | 'click-any';
+    closeMode?: 'click-away' | 'click-any' | string;
+    /**
+    * Позволяет управлять отображением указателя
+    * @example true
+    */
+    hasArrow?: boolean;
+    /**
+    * Переопределение view React компонента для кастомизациии отображения
+    * @example MyCustomView
+    */
+    view?: CustomView;
+    /**
+    * Дополнительный CSS-класс
+    */
+    className?: CssClassName;
 }
 export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioningOutputProps {
     /**
      * Рассчет абсолютной позиции
      */
-    calculatePosition: (componentSize: ClientRect) => void;
+    calculatePosition?: (dropDownDimensions: Record<string, any>, arrowDimensions: Record<string, any>) => void;
     /**
      * Ссылка на view
      */
@@ -40,6 +51,7 @@ declare namespace DropDown {
         gap: number;
         position: string;
         closeMode: string;
+        hasArrow: boolean;
     };
 }
 export default DropDown;

package/ui/content/DropDown/DropDown.js

@@ -1,4 +1,15 @@
 "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;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,7 +45,7 @@ var TooltipPortalInner_1 = __importDefault(require("../../layout/Tooltip/Tooltip
 var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
 function DropDown(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, useAbsolutePositioning_1["default"])(props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
+    var _a = (0, useAbsolutePositioning_1["default"])(props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, arrowPosition = _a.arrowPosition, style = _a.style;
     var childRef = (0, react_1.useRef)(null);
     var isManualControl = props.visible !== undefined;
     // Outside click -> close
@@ -59,8 +70,8 @@ function DropDown(props) {
     }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
     (0, react_use_1.useEvent)('mousedown', onAnyClick);
     (0, react_use_1.useEvent)('touchstart', onAnyClick);
-    var calculatePosition = (0, react_1.useCallback)(function (componentSize) {
-        calculateAbsolutePosition(position, childRef.current, componentSize);
+    var calculatePosition = (0, react_1.useCallback)(function (componentSize, arrowSize) {
+        calculateAbsolutePosition(position, childRef.current, componentSize, arrowSize);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var DropDownView = components.ui.getView(props.view || 'content.DropDownView');
@@ -82,14 +93,15 @@ function DropDown(props) {
         isComponentExist && (
         // TODO Change Portal to global
         React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(DropDownView, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide })))));
+            React.createElement(DropDownView, __assign({}, props, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, arrowPosition: arrowPosition, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide }))))));
 }
 DropDown.defaultProps = {
-    autoPositioning: false,
+    autoPositioning: true,
     componentDestroyDelay: 300,
     defaultVisible: false,
     gap: 15,
     position: 'bottom',
-    closeMode: 'click-away'
+    closeMode: 'click-away',
+    hasArrow: true
 };
 exports["default"] = DropDown;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 /**
  * Install the latest free version of Font Awesome via yarn:
  * ```
@@ -17,7 +17,12 @@ import * as React from 'react';
  *
  * That get the icon used <Icon name={'icon-name'} />
  */
-export interface IIconProps {
+/**
+ * Icon
+ *
+ * Компонент, представляющий иконку. Иконки могут быть импортированы при старте приложения.
+ */
+export interface IIconProps extends Omit<IUiComponent, 'className' | 'style'>, Partial<HTMLElement> {
     /**
      * Имя иконки (латиницей). Импорт иконок происходит на старте приложения.
      * @example create
@@ -28,12 +33,13 @@ export interface IIconProps {
      * @example Добавить запись
      */
     title?: string;
-    className?: CssClassName;
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: React.ComponentType;
+    *  Должен ли данный элемент участвовать в последовательной навигации
+    */
+    tabIndex?: number;
+    /**
+    * Функция которая вызывается при клике по иконке
+    */
     onClick?: any;
     [key: string]: any;
 }

package/ui/content/Icon/Icon.js

@@ -17,6 +17,7 @@ exports.__esModule = true;
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
 var isString_1 = __importDefault(require("lodash-es/isString"));
 var hooks_1 = require("../../../hooks");
+var DEFAULT_ICON_NAME = 'default_24x24';
 function Icon(props) {
     var components = (0, hooks_1.useComponents)();
     var name = props.name;
@@ -42,7 +43,9 @@ function Icon(props) {
             }
         }
         if (!icon) {
-            throw new Error('Not found icon with name "' + name + '"');
+            // eslint-disable-next-line no-console
+            console.warn('Not found icon with name "' + name + '"');
+            icon = components.ui.getIcon(DEFAULT_ICON_NAME);
         }
     }
     return components.ui.renderView(props.view || 'content.IconView', __assign(__assign({}, props), { icon: icon }));