@steroidsjs/core 2.1.0-beta.15 → 2.1.0-beta.19

package/ui/content/Collapse/Collapse.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+interface ICollapseProps {
+    view?: any;
+    style?: React.CSSProperties;
+    children?: any;
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName;
+    /**
+     * @example {true}
+     */
+    disabled?: boolean;
+    /**
+     * Кастомная иконка svg или название иконки
+     * @example {'circle'}
+     */
+    icon?: React.ReactNode | string;
+    /**
+     * Показ иконки, которая показывает состояние CollapseItem. Поумолчанию включены.
+     * @example {false}
+     */
+    showIcon?: boolean;
+    /**
+     * Позиция иконки-индикатора
+     * @example {'left'}
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Включает режим Аккордиона (только один CollapseItem может быть открыт)
+     * @example {true}
+     */
+    isAccordion?: boolean;
+    /**
+     * Номер активного CollapseItem, который может меняться динамический или быть статичным
+     * @example
+     */
+    activeKey?: number;
+    /**
+     * Вызываемая функция при каждом изменении состояния
+     * @example {() => {console.log('success')}}
+     */
+    onChange?: () => void;
+    /**
+     * Отключение внешних рамок
+     * @example {true}
+     */
+    borderless?: boolean;
+}
+export interface ICollapseViewProps extends ICollapseProps {
+    toggleCollapse: (number: any) => void;
+    toggleAccordion: (number: any) => void;
+    childIndex: number;
+    isShowMore?: boolean;
+}
+declare function Collapse(props: ICollapseProps): JSX.Element;
+declare namespace Collapse {
+    var defaultProps: {
+        iconPosition: string;
+        showIcon: boolean;
+    };
+}
+export default Collapse;

package/ui/content/Collapse/Collapse.js

@@ -0,0 +1,75 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function Collapse(props) {
+    var _a = React.useState([]), state = _a[0], setState = _a[1];
+    React.useEffect(props.onChange, [state]);
+    var toggleCollapse = function (indexSelected) {
+        if (state.includes(indexSelected)) {
+            var newState = __spreadArray([], state);
+            var indexInArray = state.indexOf(indexSelected);
+            newState.splice(indexInArray, 1);
+            setState(newState);
+        }
+        else {
+            var newState = __spreadArray([], state);
+            newState.push(indexSelected);
+            setState(newState);
+        }
+    };
+    var toggleAccordion = function (indexSelected) {
+        if (state.includes(indexSelected)) {
+            setState([]);
+        }
+        else {
+            var newState = [];
+            newState.push(indexSelected);
+            setState(newState);
+        }
+    };
+    var components = hooks_1.useComponents();
+    var CollapseView = components.ui.getView(props.view || 'content.CollapseView');
+    return (React.createElement(CollapseView, __assign({}, props), React.Children.map(props.children, function (child, index) { return React.cloneElement(child, __assign({ activeKey: props.activeKey, isAccordion: props.isAccordion, childIndex: index, toggleAccordion: toggleAccordion,
+        toggleCollapse: toggleCollapse, isShowMore: (state || []).includes(index), showIcon: props.showIcon, iconPosition: props.iconPosition, borderless: props.borderless }, child.props)); })));
+}
+Collapse.defaultProps = {
+    iconPosition: 'right',
+    showIcon: true
+};
+exports["default"] = Collapse;

package/ui/content/Collapse/CollapseItem.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+interface ICollapseItemProps {
+    view?: any;
+    style?: React.CSSProperties;
+    children?: any;
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName;
+    /**
+     * Название CollapseItem
+     * @example {'Подробнее'}
+     */
+    title?: string;
+    /**
+     * @example {true}
+     */
+    disabled?: boolean;
+    /**
+     * Кастомная иконка svg или название иконки
+     * @example {'circle'}
+     */
+    icon?: React.ReactNode | string;
+    /**
+     * Показ иконки, которая показывает состояние CollapseItem. Поумолчанию включены.
+     * @example {false}
+     */
+    showIcon?: boolean;
+    /**
+     * Позиция иконки-индикатора
+     * @example {'left'}
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Включает режим Аккордиона (только один CollapseItem может быть открыт)
+     * @example {true}
+     */
+    isAccordion?: boolean;
+    /**
+     * Номер активного CollapseItem, который может меняться динамический или быть статичным
+     * @example
+     */
+    activeKey?: number;
+    /**
+     * Вызываемая функция при каждом изменении состояния
+     * @example {() => {console.log('success')}}
+     */
+    onChange?: () => void;
+    /**
+     * Отключение внешних рамок
+     * @example {true}
+     */
+    borderless?: boolean;
+}
+export interface ICollapseItemViewProps extends ICollapseItemProps {
+    toggleCollapse?: (number: any) => void;
+    toggleAccordion?: (number: any) => void;
+    childIndex?: number;
+    isShowMore?: boolean;
+}
+declare function CollapseItem(props: ICollapseItemProps): any;
+declare namespace CollapseItem {
+    var defaultProps: {
+        title: string;
+    };
+}
+export default CollapseItem;

package/ui/content/Collapse/CollapseItem.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var hooks_1 = require("@steroidsjs/core/hooks");
+function CollapseItem(props) {
+    var components = hooks_1.useComponents();
+    return components.ui.renderView(props.view || 'content.CollapseItemView', __assign({}, props));
+}
+CollapseItem.defaultProps = {
+    title: 'Collapse'
+};
+exports["default"] = CollapseItem;

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

@@ -0,0 +1,7 @@
+import CollapseItem from './CollapseItem';
+import Collapse from './Collapse';
+declare const _default: {
+    CollapseItem: typeof CollapseItem;
+    Collapse: typeof Collapse;
+};
+export default _default;

package/ui/content/Collapse/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var CollapseItem_1 = __importDefault(require("./CollapseItem"));
+var Collapse_1 = __importDefault(require("./Collapse"));
+exports["default"] = { CollapseItem: CollapseItem_1["default"], Collapse: Collapse_1["default"] };

package/ui/content/index.d.ts

@@ -0,0 +1,13 @@
+import { Avatar, AvatarGroup } from './Avatar';
+import Card from './Card';
+import DropDown from './DropDown';
+import Alert from './Alert';
+export { Avatar, AvatarGroup, Alert, Card, DropDown, };
+declare const _default: {
+    Avatar: typeof Avatar;
+    AvatarGroup: typeof AvatarGroup;
+    Alert: typeof Alert;
+    Card: typeof Card;
+    DropDown: typeof DropDown;
+};
+export default _default;

package/ui/content/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.DropDown = exports.Card = exports.Alert = exports.AvatarGroup = exports.Avatar = void 0;
+var Avatar_1 = require("./Avatar");
+exports.Avatar = Avatar_1.Avatar;
+exports.AvatarGroup = Avatar_1.AvatarGroup;
+var Card_1 = __importDefault(require("./Card"));
+exports.Card = Card_1["default"];
+var DropDown_1 = __importDefault(require("./DropDown"));
+exports.DropDown = DropDown_1["default"];
+var Alert_1 = __importDefault(require("./Alert"));
+exports.Alert = Alert_1["default"];
+exports["default"] = {
+    Avatar: Avatar_1.Avatar,
+    AvatarGroup: Avatar_1.AvatarGroup,
+    Alert: Alert_1["default"],
+    Card: Card_1["default"],
+    DropDown: DropDown_1["default"]
+};

package/ui/crud/Crud/Crud.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
 import { IApiRest } from '../../../components/ApiComponent';
-import { IComponents } from '../../../hooks/useComponents';
+import { IComponents } from '../../../providers/ComponentsProvider';
 import { IComponentsHocOutput } from '../../../hoc/components';
 import { IConnectHocOutput } from '../../../hoc/connect';
 import { IFormProps } from '../../form/Form/Form';

package/ui/crud/index.d.ts

@@ -31,4 +31,5 @@ export declare const generateCrud: (routeId: string, props: ICrudGeneratorProps)
     items?: IRouteItem[] | {
         [key: string]: IRouteItem;
     };
+    preloadData?: (match: Record<string, any>) => (import("../../hooks/useFetch").IFetchConfig | import("../list/List/List").IListProps)[];
 };

package/ui/form/Button/Button.d.ts

@@ -177,6 +177,7 @@ declare namespace Button {
         disabled: boolean;
         submitting: boolean;
         block: boolean;
+        size: string;
         className: string;
         resetFailedMs: number;
         showLabelOnLoading: boolean;

package/ui/form/Button/Button.js

@@ -136,6 +136,7 @@ Button.defaultProps = {
     disabled: false,
     submitting: false,
     block: false,
+    size: 'md',
     className: '',
     resetFailedMs: 2000,
     showLabelOnLoading: true,

package/ui/form/DropDownField/DropDownField.js

@@ -66,7 +66,9 @@ function DropDownField(props) {
     }, [setIsFocused, setIsOpened]);
     // Outside click -> close
     var forwardedRef = react_1.useRef(null);
-    react_use_1.useClickAway(forwardedRef, onClose);
+    if (process.env.PLATFORM !== 'mobile') {
+        react_use_1.useClickAway(forwardedRef, onClose);
+    }
     // Search input props
     var searchInputProps = react_1.useMemo(function () { return ({
         type: 'search',
@@ -89,7 +91,7 @@ function DropDownField(props) {
         if (props.input.value === undefined && selectedIds.length > 0) {
             onReset();
         }
-    }, [selectedIds, props.input.onChange, props.multiple, prevSelectedIds, props.attribute, props]);
+    }, [selectedIds, props.input.onChange, props.multiple, prevSelectedIds, props.attribute, props, onReset]);
     return components.ui.renderView(props.view || 'form.DropDownFieldView', __assign(__assign({}, props), { isAutoComplete: isAutoComplete,
         items: items,
         hoveredId: hoveredId,

package/ui/form/Form/Form.js

@@ -284,7 +284,7 @@ function Form(props) {
     // Manual submit form by reducer action
     var prevSubmitCounter = react_use_1.usePrevious(submitCounter);
     react_use_1.useUpdateEffect(function () {
-        if (submitCounter > prevSubmitCounter) {
+        if (submitCounter !== prevSubmitCounter) {
             onSubmit.call(null);
         }
     }, [prevSubmitCounter, submitCounter, onSubmit]);

package/ui/form/InputField/InputField.d.ts

@@ -34,6 +34,11 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
     /**
      */
     viewProps?: any;
+    /**
+     * Размер Innput
+     * @example 'large'
+     */
+    size?: Size;
     /**
      * Объект CSS стилей
      * @example {width: '45%'}
@@ -64,6 +69,8 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
      * @example { mask: '+7 (999) 999-99-99' }
      */
     maskProps?: any;
+    success?: boolean;
+    failed?: boolean;
     [key: string]: any;
 }
 export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOutputProps {

package/ui/form/InputField/InputField.js

@@ -54,6 +54,7 @@ function InputField(props) {
 }
 InputField.defaultProps = {
     type: 'text',
+    size: 'medium',
     disabled: false,
     required: false,
     className: '',

package/ui/form/TextField/TextField.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { KeyboardEventHandler } from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * TextField
@@ -35,7 +36,7 @@ export interface ITextFieldViewProps extends ITextFieldProps, IFieldWrapperOutpu
     inputProps: {
         name: string;
         onChange: (value: string | React.ChangeEvent) => void;
-        onKeyUp: (e: Event | React.KeyboardEvent) => void;
+        onKeyUp: KeyboardEventHandler<HTMLTextAreaElement>;
         value: string | number;
         placeholder: string;
         disabled: boolean;

package/ui/form/TextField/TextField.js

@@ -30,7 +30,7 @@ function TextField(props) {
             // TODO This is not worked in redux... =(
             // dispatch(submit(props.formId));
         }
-    }, [dispatch, props.formId, props.submitOnEnter]);
+    }, [props.formId, props.submitOnEnter]);
     var onChange = react_1.useCallback(function (e) { return props.input.onChange.call(null, e.target ? e.target.value : e.nativeEvent.text); }, [props.input.onChange]);
     var inputProps = react_1.useMemo(function () { return (__assign({ name: props.input.name, value: props.input.value || '', onChange: onChange,
         onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps)); }, [onKeyUp, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);

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/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.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/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. Отображает текущий прогресс какой-либо операции
+ */
+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,52 @@
+"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 hooks_1 = require("../../../hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon/Icon"));
+var React = __importStar(require("react"));
+function ProgressBar(props) {
+    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 hooks_1.useComponents().ui.renderView('layout.LineProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+    else
+        return hooks_1.useComponents().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/index.d.ts

@@ -0,0 +1,2 @@
+import ProgressBar from "./ProgressBar";
+export default ProgressBar;