@steroidsjs/core 2.1.0-beta.3 → 2.1.0-beta.30

package/ui/form/index.d.ts

@@ -28,142 +28,32 @@ import TextField from './TextField';
 import TimeField from './TimeField';
 export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, };
 declare const _default: {
-    AutoCompleteField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    BlankField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
+    AutoCompleteField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./AutoCompleteField/AutoCompleteField").IAutoCompleteFieldProps>;
+    BlankField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./BlankField/BlankField").IBlankFieldProps>;
     Button: typeof Button;
-    CheckboxField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    CheckboxListField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    DateField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    DateRangeField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    DateTimeField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    DateTimeRangeField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    DropDownField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
+    CheckboxField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./CheckboxField/CheckboxField").ICheckboxFieldProps>;
+    CheckboxListField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./CheckboxListField/CheckboxListField").ICheckboxListFieldProps>;
+    DateField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateField/DateField").IDateFieldProps>;
+    DateRangeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateRangeField/DateRangeField").IDateRangeFieldProps>;
+    DateTimeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateTimeField/DateTimeField").IDateTimeFieldProps>;
+    DateTimeRangeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DateTimeRangeField/DateTimeRangeField").IDateTimeRangeFieldProps>;
+    DropDownField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./DropDownField/DropDownField").IDropDownFieldProps>;
     Field: import("react").MemoExoticComponent<(props: import("./Field/Field").IFieldProps) => JSX.Element>;
     FieldLayout: import("react").MemoExoticComponent<(props: import("./FieldLayout/FieldLayout").IFieldLayoutProps) => JSX.Element>;
-    FieldList: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
+    FieldList: import("./Field/fieldWrapper").FieldWrapperComponent<import("./FieldList/FieldList").IFieldListProps>;
     FieldSet: typeof FieldSet;
-    FileField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
+    FileField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./FileField/FileField").IFileFieldProps>;
     Form: typeof Form;
-    HtmlField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    InputField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    NavField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    NumberField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    PasswordField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    RadioListField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    ReCaptchaField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    SliderField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    SwitcherField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    TextField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
-    TimeField: {
-        (props: import("./Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-        WrappedComponent: any;
-        displayName: any;
-        defaultProps: any;
-    };
+    HtmlField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./HtmlField/HtmlField").IHtmlFieldProps>;
+    InputField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./InputField/InputField").IInputFieldProps>;
+    NavField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./NavField/NavField").INavFieldProps>;
+    NumberField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./NumberField/NumberField").INumberFieldProps>;
+    PasswordField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./PasswordField/PasswordField").IPasswordFieldProps>;
+    RadioListField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./RadioListField/RadioListField").IRadioListFieldProps>;
+    ReCaptchaField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./ReCaptchaField/ReCaptchaField").IReCaptchaFieldProps>;
+    SliderField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./SliderField/SliderField").ISliderFieldProps>;
+    SwitcherField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./SwitcherField/SwitcherField").ISwitcherFieldProps>;
+    TextField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./TextField/TextField").ITextFieldProps>;
+    TimeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./TimeField/TimeField").ITimeFieldProps>;
 };
 export default _default;

package/ui/icon/Icon/Icon.js

@@ -20,6 +20,9 @@ var hooks_1 = require("../../../hooks");
 function Icon(props) {
     var components = hooks_1.useComponents();
     var name = props.name;
+    if (!isString_1["default"](name)) {
+        return null;
+    }
     var icon;
     if (process.env.PLATFORM === 'mobile') {
         icon = components.ui.getIcon(name) || name;

package/ui/icon/Icon/demo/icon.d.ts

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

package/ui/{form/SliderField/demo/required.js → icon/Icon/demo/icon.js}

@@ -23,11 +23,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var SliderField_1 = __importDefault(require("../SliderField"));
-/**
- * Required
- * @order 3
- * @col 4
- */
+var Icon_1 = __importDefault(require("../Icon"));
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(SliderField_1["default"], { label: 'Required', required: true }))); });
+    React.createElement(Icon_1["default"], { name: 'star' }))); });

package/ui/layout/Meta/Meta.d.ts

@@ -0,0 +1,56 @@
+import { BaseHTMLAttributes, LinkHTMLAttributes, MetaHTMLAttributes, PropsWithChildren, ScriptHTMLAttributes, StyleHTMLAttributes } from 'react';
+interface IInnerHTML {
+    /**
+     * Содержимое тега
+     */
+    innerHtml?: string;
+}
+interface IScript extends ScriptHTMLAttributes<any>, IInnerHTML {
+}
+interface IStyle extends StyleHTMLAttributes<any>, IInnerHTML {
+}
+/**
+ * Meta
+ * Компонент используется для ssr и нужен для конфигурации html-тегов в документе.
+ */
+interface IMetaProps extends PropsWithChildren<any> {
+    /**
+     * Заголовок документа
+     * @example Home page
+     */
+    title?: string;
+    /**
+     * Описание документа
+     * @example The main page of the site
+     */
+    description?: string;
+    /**
+     * Скрипты, которые необходимо разместить на сайте
+     * @example [{src: '/lib/SomeLibrary.min.js'}]
+     */
+    scripts?: IScript[];
+    /**
+     * Мета-теги
+     * @example [{name: 'yandex-verification', content: 'ce...9e6'}]
+     */
+    meta?: MetaHTMLAttributes<any>[];
+    /**
+     * Ссылки на ресурсы
+     * @example [{href: '/lib/SomeLibrary.css', rel: 'stylesheet', type: 'text/css'}]
+     */
+    links?: LinkHTMLAttributes<any>[];
+    /**
+     * Контент для тегов \<style\>
+     */
+    styles?: IStyle[];
+    /**
+     * Контент для тегов \<noscript\>
+     */
+    noScripts?: IInnerHTML[];
+    /**
+     * Конфигурация тега \<base\>
+     */
+    base?: BaseHTMLAttributes<any>;
+}
+declare function Meta(props: IMetaProps): JSX.Element;
+export default Meta;

package/ui/layout/Meta/Meta.js

@@ -0,0 +1,38 @@
+"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 react_helmet_1 = __importDefault(require("react-helmet"));
+function Meta(props) {
+    var _a, _b, _c, _d, _e;
+    return (react_1["default"].createElement(react_helmet_1["default"], null,
+        react_1["default"].createElement("title", null, props.title),
+        props.base && react_1["default"].createElement("base", __assign({}, props.base)),
+        props.description && react_1["default"].createElement("meta", { name: 'description', content: props.description }), (_a = props.meta) === null || _a === void 0 ? void 0 :
+        _a.map(function (attrs, index) { return react_1["default"].createElement("meta", __assign({ key: index }, attrs)); }), (_b = props.links) === null || _b === void 0 ? void 0 :
+        _b.map(function (attrs, index) { return react_1["default"].createElement("link", __assign({ key: index }, attrs)); }), (_c = props.styles) === null || _c === void 0 ? void 0 :
+        _c.map(function (attrs, index) { return (react_1["default"].createElement("style", __assign({ key: index }, attrs, { dangerouslySetInnerHTML: {
+                __html: attrs.innerHtml
+            } }))); }), (_d = props.scripts) === null || _d === void 0 ? void 0 :
+        _d.map(function (attrs, index) { return (react_1["default"].createElement("script", __assign({ key: index }, attrs, { dangerouslySetInnerHTML: {
+                __html: attrs.innerHtml
+            } }))); }), (_e = props.noScripts) === null || _e === void 0 ? void 0 :
+        _e.map(function (attrs, index) { return (react_1["default"].createElement("noscript", { key: index, dangerouslySetInnerHTML: {
+                __html: attrs.innerHtml
+            } })); }),
+        props.children));
+}
+exports["default"] = Meta;

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

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

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

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

@@ -1,4 +1,18 @@
 import * as React from 'react';
+/**
+ * Перед тем как использовать компонент Notification поместите его в DOM дереве следующим образом:
+ * ```
+ * <div className={bem.block()})}>
+ * ```
+ *      <Notifications/>
+ *      ```
+ *      <ModalPortal/>
+ *      ```
+ *      <TooltipPortal/>
+ *      ```
+ * </div>
+ * ```
+ */
 interface INotificationItem {
     id?: number;
     /**

package/ui/layout/Notifications/Notifications.js

@@ -54,7 +54,7 @@ function Notifications(props) {
         if (props.initialFlashes) {
             dispatch(notifications_1.setFlashes(props.initialFlashes));
             // Disable scroll or scroll to top on show notifications
-            if (typeof window !== 'undefined') {
+            if (!process.env.IS_SSR) {
                 if ('scrollRestoration' in window.history) {
                     window.history.scrollRestoration = 'manual';
                 }

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("@steroidsjs/core/ui/form");
+var useDispatch_1 = __importDefault(require("@steroidsjs/core/hooks/useDispatch"));
+var notifications_1 = require("@steroidsjs/core/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("@steroidsjs/core/ui/form");
+var useDispatch_1 = __importDefault(require("@steroidsjs/core/hooks/useDispatch"));
+var notifications_1 = require("@steroidsjs/core/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/Portal.js

@@ -21,6 +21,9 @@ function Portal(props) {
             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 Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon/Icon"));
+var React = __importStar(require("react"));
+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;