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

package/ui/layout/Notifications/Notifications.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+/**
+ * Перед тем как использовать компонент Notification поместите его в DOM дереве следующим образом:
+ * ```
+ * <div className={bem.block()})}>
+ * ```
+ *      <Notifications/>
+ *      ```
+ *      <ModalPortal/>
+ *      ```
+ *      <TooltipPortal/>
+ *      ```
+ * </div>
+ * ```
+ */
+interface INotificationItem {
+    id?: number;
+    /**
+     * Цвет всплывающего уведомления
+     * @example warning
+     */
+    level?: ColorName;
+    /**
+     * Сообщение во всплывающем уведомлении
+     * @example Сохранено!
+     */
+    message?: string;
+    isClosing?: boolean;
+}
+export interface INotificationsProps {
+    initialFlashes?: {
+        [key: string]: string | any;
+    };
+    notifications?: INotificationItem[];
+    closeTimeoutMs?: number;
+    className?: CssClassName;
+    view?: any;
+    itemView?: any;
+    position?: string;
+    [key: string]: any;
+}
+export interface INotificationsViewProps {
+    notifications?: INotificationItem[];
+    className?: CssClassName;
+    position: string;
+    children?: React.ReactNode;
+}
+export interface INotificationsItemViewProps extends INotificationItem {
+    isClosing: boolean;
+    onClose: () => void;
+    position: string;
+}
+declare function Notifications(props: INotificationsProps): JSX.Element;
+declare namespace Notifications {
+    var defaultProps: {
+        closeTimeoutMs: number;
+    };
+}
+export default Notifications;

package/ui/layout/Notifications/Notifications.js

@@ -0,0 +1,89 @@
+"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 react_use_1 = require("react-use");
+var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
+var hooks_1 = require("../../../hooks");
+var notifications_1 = require("../../../actions/notifications");
+var notifications_2 = require("../../../reducers/notifications");
+function Notifications(props) {
+    var _a = hooks_1.useSelector(function (state) { return ({
+        notifications: notifications_2.getNotifications(state),
+        position: notifications_2.getPosition(state)
+    }); }), notifications = _a.notifications, position = _a.position;
+    var components = hooks_1.useComponents();
+    var _b = react_1.useState(props.notifications || []), innerNotifications = _b[0], setInnerNotifications = _b[1];
+    var _c = react_1.useState([]), closing = _c[0], setClosing = _c[1];
+    var dispatch = useDispatch_1["default"]();
+    react_use_1.useMount(function () {
+        if (props.initialFlashes) {
+            dispatch(notifications_1.setFlashes(props.initialFlashes));
+            // Disable scroll or scroll to top on show notifications
+            if (!process.env.IS_SSR) {
+                if ('scrollRestoration' in window.history) {
+                    window.history.scrollRestoration = 'manual';
+                }
+                else {
+                    setTimeout(function () { return window.scrollTo(0, 0); }, 1000);
+                }
+            }
+        }
+    });
+    var prevNotifications = react_use_1.usePrevious(notifications);
+    react_use_1.useUpdateEffect(function () {
+        if (prevNotifications !== notifications) {
+            var propsIds_1 = notifications.map(function (item) { return item.id; });
+            var toClose_1 = innerNotifications.filter(function (item) { return !propsIds_1.includes(item.id); });
+            setInnerNotifications([].concat(notifications));
+            setClosing(closing.concat(innerNotifications.filter(function (item) { return !propsIds_1.includes(item.id); })));
+            if (toClose_1.length > 0) {
+                setTimeout(function () { return setClosing(closing.filter(function (item) { return !toClose_1.includes(item); })); }, props.closeTimeoutMs);
+            }
+        }
+    }, [closing, innerNotifications, notifications, prevNotifications, props.closeTimeoutMs]);
+    var onClose = react_1.useCallback(function (notificationId) { return dispatch(notifications_1.closeNotification(notificationId)); }, [dispatch]);
+    var closingIds = closing.map(function (item) { return item.id; });
+    var items = react_1.useMemo(function () { return (orderBy_1["default"]([].concat(innerNotifications).concat(closing), ['id'], 'asc')
+        .map(function (item) { return (__assign(__assign({}, item), { isClosing: closingIds.includes(item.id), onClose: function () { return onClose(item.id); } })); })); }, [innerNotifications, closing, closingIds, onClose]);
+    var NotificationsItemView = props.itemView || components.ui.getView('layout.NotificationsItemView');
+    return components.ui.renderView(props.view || 'layout.NotificationsView', __assign(__assign({}, props), { position: position || '', children: items.map(function (item) { return (React.createElement(NotificationsItemView, __assign({ key: item.id }, item))); }) }));
+}
+Notifications.defaultProps = {
+    closeTimeoutMs: 1500
+};
+exports["default"] = Notifications;

package/ui/layout/Notifications/demo/basic.d.ts

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

package/ui/layout/Notifications/demo/basic.js

@@ -0,0 +1,53 @@
+"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 useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+var Button_1 = __importDefault(require("../../../form/Button"));
+var notifications_1 = require("../../../../actions/notifications");
+/**
+ * Все типы уведомлений
+ * @order 1
+ * @col 6
+ */
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    var notifications = {
+        primary: 'Primary notification',
+        secondary: 'Secondary notification',
+        success: 'Success notification',
+        danger: 'Danger notification',
+        warning: 'Warning notification',
+        info: 'Info notification',
+        light: 'Light notification',
+        dark: 'Dark notification'
+    };
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexFlow: 'column'
+        } }, Object.keys(notifications).map(function (level) { return ([].concat(notifications[level] || [])
+        .map(function (message) { return (React.createElement(Button_1["default"], { key: level, color: level, label: __("\u0423\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u0435 \u0442\u0438\u043F\u0430 \"" + level + "\""), onClick: function () {
+            dispatch(notifications_1.showNotification(message, level));
+        }, style: { margin: '10px 0' } })); })); })));
+});

package/ui/layout/Notifications/demo/position.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/ui/layout/Notifications/demo/position.js

@@ -0,0 +1,45 @@
+"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 form_1 = require("../../../form");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+var notifications_1 = require("../../../../actions/notifications");
+/**
+ * Все позиции уведомлений
+ * @order 3
+ * @col 12
+ */
+var positions = {
+    tr: 'top-right',
+    tl: 'top-left',
+    br: 'bottom-right',
+    bl: 'bottom-left'
+};
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement("div", { style: { display: 'grid', gridAutoFlow: 'column', gridGap: '10px', justifyContent: 'center' } }, Object.values(positions).map(function (position) { return (React.createElement(form_1.Button, { key: position, color: 'dark', label: "\u041F\u043E\u0437\u0438\u0446\u0438\u044F " + position, onClick: function () {
+            dispatch(notifications_1.showNotification(position, 'success', { position: position, timeOut: 1000 }));
+        } })); })));
+});

package/ui/layout/Notifications/demo/timeOut.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/ui/layout/Notifications/demo/timeOut.js

@@ -0,0 +1,45 @@
+"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 form_1 = require("../../../form");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+var notifications_1 = require("../../../../actions/notifications");
+/**
+ * Время самостоятельного пропадания уведомления в милесекундах
+ * @order 2
+ * @col 6
+ */
+var times = {
+    1: 1000,
+    3: 3000,
+    5: 5000,
+    10: 10000
+};
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement("div", { style: { display: 'flex', flexFlow: 'column' } }, Object.values(times).map(function (time) { return (React.createElement(form_1.Button, { key: time, color: 'primary', label: "\u0427\u0435\u0440\u0435\u0437 " + time / 1000 + " \u0441\u0435\u043A\u0443\u043D\u0434 \u043F\u0440\u043E\u043F\u0430\u0434\u0435\u0442 \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u0435", onClick: function () {
+            dispatch(notifications_1.showNotification(time / 1000 + " \u0441\u0435\u043A\u0443\u043D\u0434", 'info', { position: 'bottom-right', timeOut: time }));
+        }, style: { margin: '10px 0' } })); })));
+});

package/ui/layout/Notifications/index.d.ts

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

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

package/ui/layout/Portal.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Portal(props: any): import("react").ReactPortal;

package/ui/layout/Portal.js

@@ -0,0 +1,29 @@
+"use strict";
+exports.__esModule = true;
+var react_dom_1 = require("react-dom");
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var hooks_1 = require("../../hooks");
+function Portal(props) {
+    var components = hooks_1.useComponents();
+    var elementRef = react_1.useRef(null);
+    if (!elementRef.current) {
+        elementRef.current = document.createElement('div');
+        elementRef.current.className = 'Portal';
+    }
+    react_use_1.useMount(function () {
+        document.body.appendChild(elementRef.current);
+        components.ui.setPortalElement(elementRef.current);
+    });
+    react_use_1.useUnmount(function () {
+        if (elementRef.current) {
+            components.ui.setPortalElement(null);
+            document.body.removeChild(elementRef.current);
+        }
+    });
+    if (process.env.IS_SSR) {
+        return null;
+    }
+    return react_dom_1.createPortal(props.children, elementRef.current);
+}
+exports["default"] = Portal;

package/ui/layout/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+export interface IProgressBarViewProps {
+    percent: number;
+    status?: 'normal' | 'success' | 'exception';
+    size?: 'small' | 'medium' | 'large';
+    label?: string | React.ReactNode;
+}
+/**
+ * ProgressBar
+ * Progress bar. Отображает текущий прогресс какой-либо операции
+ */
+export interface IProgressBarProps {
+    /**
+     * Прогресс в процентах
+     */
+    percent: number;
+    /**
+     * Статус компонента
+     */
+    status?: 'normal' | 'success' | 'exception';
+    /**
+     * Размер компонента
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Тип компонента - круг или линия
+     */
+    type?: 'line' | 'circle';
+    /**
+     * Флаг, определяющий показывать ли лейбл
+     */
+    showLabel?: boolean;
+    /**
+     * Функция, позволяющая изменить генерацию лейбла
+     * @param percent Прогресс в процентах
+     */
+    label?: (percent: number) => string;
+    /**
+     * Функция, позволяющая задавать собственные иконки в зависимости от прогресса и статуса
+     * @param status Статус компонента
+     * @param percent Прогресс в процентах
+     */
+    icon?: (status: string, percent: number) => React.ReactNode;
+}
+declare function ProgressBar(props: IProgressBarProps): JSX.Element;
+declare namespace ProgressBar {
+    var defaultProps: {
+        status: string;
+        size: string;
+        type: string;
+        showLabel: boolean;
+        label: (percent: any) => string;
+    };
+}
+export default ProgressBar;

package/ui/layout/ProgressBar/ProgressBar.js

@@ -0,0 +1,53 @@
+"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 Icon_1 = __importDefault(require("../../icon/Icon/Icon"));
+var hooks_1 = require("../../../hooks");
+function ProgressBar(props) {
+    var components = hooks_1.useComponents();
+    var getLabel = (function () {
+        if (!props.showLabel)
+            return null;
+        if (props.icon)
+            return props.icon(props.status, props.percent);
+        if (props.status === 'success')
+            return React.createElement(Icon_1["default"], { name: "check" });
+        if (props.status === 'exception')
+            return React.createElement(Icon_1["default"], { name: "times" });
+        return props.label(props.percent);
+    });
+    if (props.type === 'line') {
+        return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+    }
+    return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+}
+ProgressBar.defaultProps = {
+    status: 'normal',
+    size: 'medium',
+    type: 'line',
+    showLabel: true,
+    label: function (percent) { return percent + "%"; }
+};
+exports["default"] = ProgressBar;

package/ui/layout/ProgressBar/demo/percent.d.ts

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

package/ui/layout/ProgressBar/demo/percent.js

@@ -0,0 +1,49 @@
+"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 ProgressBar_1 = __importDefault(require("../ProgressBar"));
+/**
+ * Свойство percent может задваться статично или динамически.
+ * @order 2
+ * @col 6
+ */
+exports["default"] = (function () {
+    var _a = React.useState(0), count = _a[0], setCount = _a[1];
+    var getRandomInt = function (min, max) {
+        min = Math.ceil(min);
+        max = Math.floor(max);
+        return Math.floor(Math.random() * (max - min)) + min;
+    };
+    if (count < 100) {
+        setTimeout(function () { return setCount(function (e) { return e + getRandomInt(1, 10); }); }, 1500);
+    }
+    return (React.createElement("div", { style: { display: 'flex', gridGap: '10px', paddingRight: '10px' } },
+        React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
+            React.createElement(ProgressBar_1["default"], { percent: count, size: 'small', type: 'circle', status: count >= 100 ? 'success' : 'normal' }),
+            React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small', type: 'circle', status: 'exception' })),
+        React.createElement("div", { style: { maxWidth: '70%' } },
+            React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small', status: 'exception' }),
+            React.createElement(ProgressBar_1["default"], { percent: count, size: 'small', status: count >= 100 ? 'success' : 'normal' }))));
+});

package/ui/layout/ProgressBar/demo/showLabel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Можно убрать иконку.
+ * @order 4
+ * @col 6
+ */
+export default _default;

package/ui/layout/ProgressBar/demo/showLabel.js

@@ -0,0 +1,40 @@
+"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 ProgressBar_1 = __importDefault(require("../ProgressBar"));
+/**
+ * Можно убрать иконку.
+ * @order 4
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: { display: 'grid', gridGap: '10px', paddingRight: '10px' } },
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
+        React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small', type: 'circle', showLabel: false }),
+        React.createElement(ProgressBar_1["default"], { percent: 50, size: 'small', status: 'exception', type: 'circle', showLabel: false }),
+        React.createElement(ProgressBar_1["default"], { percent: 100, size: 'small', status: 'success', type: 'circle', showLabel: false })),
+    React.createElement("div", { style: { maxWidth: '90%', display: 'grid', gridGap: '10px' } },
+        React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small', showLabel: false }),
+        React.createElement(ProgressBar_1["default"], { percent: 50, size: 'small', status: 'exception', showLabel: false }),
+        React.createElement(ProgressBar_1["default"], { percent: 100, size: 'small', status: 'success', showLabel: false })))); });

package/ui/layout/ProgressBar/demo/sizes.d.ts

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

package/ui/layout/ProgressBar/demo/sizes.js

@@ -0,0 +1,40 @@
+"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 ProgressBar_1 = __importDefault(require("../ProgressBar"));
+/**
+ * По-умолчанию имеется 3 вида размера.
+ * @order 5
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: { display: 'grid', gridGap: '10px', paddingRight: '10px' } },
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
+        React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small', type: 'circle' }),
+        React.createElement(ProgressBar_1["default"], { percent: 50, size: 'medium', status: 'exception', type: 'circle' }),
+        React.createElement(ProgressBar_1["default"], { percent: 100, size: 'large', status: 'success', type: 'circle' })),
+    React.createElement("div", { style: { maxWidth: '90%', display: 'grid', gridGap: '10px' } },
+        React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small' }),
+        React.createElement(ProgressBar_1["default"], { percent: 50, size: 'medium', status: 'exception' }),
+        React.createElement(ProgressBar_1["default"], { percent: 100, size: 'large', status: 'success' })))); });

package/ui/layout/ProgressBar/demo/status.d.ts

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