@steroidsjs/core 2.1.0-beta.2 → 2.1.0-beta.20

package/ui/form/ImageField/ImageField.js

@@ -0,0 +1,145 @@
+"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 File_1 = __importDefault(require("fileup-core/lib/models/File"));
+var first_1 = __importDefault(require("lodash-es/first"));
+var values_1 = __importDefault(require("lodash-es/values"));
+var react_1 = require("react");
+var uniqueId_1 = __importDefault(require("lodash-es/uniqueId"));
+var hooks_1 = require("../../../hooks");
+var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
+var useFile_1 = __importDefault(require("../../../hooks/useFile"));
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var modal_1 = require("../../../actions/modal");
+function ImageField(props) {
+    var components = hooks_1.useComponents();
+    var dispatch = useDispatch_1["default"]();
+    // Add cropping option
+    var _a = react_1.useState(null), croppedImage = _a[0], setCroppedImage = _a[1];
+    var modalId = react_1.useMemo(function () { var _a; return ((_a = props.modalProps) === null || _a === void 0 ? void 0 : _a.modalId) || uniqueId_1["default"]('cropModal'); }, [props.modalProps.modalId]);
+    var ImageFieldModalVIew = props.modalView || components.ui.getView('form.ImageFieldModalView');
+    var responseParser = react_1.useCallback(function (text) {
+        var data = null;
+        try {
+            data = JSON.parse(text);
+            dispatch(modal_1.openModal(ImageFieldModalVIew, __assign(__assign({ modalId: modalId }, props.modalProps), { crop: __assign(__assign({}, props.crop), { onSubmit: function (crop, imageId) { return setCroppedImage(__assign(__assign({}, crop), { id: imageId })); } }), image: first_1["default"](data) })));
+            // eslint-disable-next-line no-empty
+        }
+        catch (e) { }
+        return data;
+    }, [ImageFieldModalVIew, modalId, dispatch, props.crop, props.modalProps]);
+    var _b = useFile_1["default"](__assign(__assign({}, props), { multiple: false, imagesOnly: true, uploader: __assign({ uploaderConfigs: {
+                xhr: {
+                    responseParser: responseParser
+                }
+            } }, props.uploader) })), files = _b.files, onBrowse = _b.onBrowse, onRemove = _b.onRemove, onAdd = _b.onAdd;
+    // Fetch cropped image
+    react_1.useEffect(function () {
+        if (croppedImage) {
+            components.http.post(props.crop.backendUrl, croppedImage).then(function (res) {
+                setCroppedImage(null);
+                onAdd(new File_1["default"]({
+                    path: res.title || res.label || res.uid || res.id,
+                    status: File_1["default"].STATUS_END,
+                    result: File_1["default"].RESULT_SUCCESS,
+                    resultHttpStatus: 200,
+                    resultHttpMessage: res,
+                    uid: res.uid
+                }));
+            });
+        }
+    }, [components.http, croppedImage, onAdd, onRemove, props.crop.backendUrl]);
+    var ImageFieldView = props.view || components.ui.getView('form.ImageFieldView');
+    var item = react_1.useMemo(function () {
+        var result = null;
+        var _file = first_1["default"](files);
+        if (_file) {
+            var data = _file.getResultHttpMessage() || {};
+            result = {
+                uid: _file.getUid(),
+                fileId: data.id || null,
+                title: _file.getName(),
+                size: props.size,
+                disabled: props.disabled,
+                onRemove: function () { return onRemove(_file); },
+                error: null,
+                image: null,
+                progress: null
+            };
+            // Add error
+            if (_file.getResult() === File_1["default"].RESULT_ERROR) {
+                if (typeof _file.getResultHttpMessage() === 'string'
+                    && _file.getResultHttpMessage().substr(0, 1) === '{') {
+                    var errorResponse = JSON.parse(_file.getResultHttpMessage());
+                    result.error = errorResponse.error || errorResponse.message || __('Ошибка');
+                }
+                else {
+                    result.error = _file.getResultHttpMessage()
+                        ? JSON.stringify(_file.getResultHttpMessage())
+                        : __('Ошибка');
+                }
+            }
+            // Add thumbnail image
+            if (data.images) {
+                // Image object has properties: url, width, height
+                result.image = data.images[props.imagesProcessor]
+                    || first_1["default"](values_1["default"](data.images));
+            }
+            // Add progress
+            if (_file.getStatus() === File_1["default"].STATUS_PROCESS) {
+                result.progress = {
+                    bytesUploaded: _file.getBytesUploaded(),
+                    percent: _file.progress.getPercent()
+                };
+            }
+        }
+        return result;
+    }, [files, onRemove, props.disabled, props.imagesProcessor, props.size]);
+    return (React.createElement(ImageFieldView, __assign({}, props, { item: item, onClick: onBrowse })));
+}
+ImageField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    modalProps: {},
+    label: 'Upload',
+    crop: {
+        initialValues: {
+            aspect: 1
+        }
+    }
+};
+exports["default"] = fieldWrapper_1["default"]('ImageField', ImageField);

package/ui/form/ImageField/index.d.ts

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

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

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

@@ -10,13 +10,34 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+var React = __importStar(require("react"));
 var react_1 = require("react");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var react_input_mask_1 = __importDefault(require("react-input-mask"));
 function InputField(props) {
     var components = hooks_1.useComponents();
     var inputProps = react_1.useMemo(function () { return (__assign({ type: props.type, name: props.input.name, value: props.input.value || '', onChange: function (value) { return props.input.onChange(value); }, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps)); }, [props.disabled, props.input, props.inputProps, props.placeholder, props.type]);
@@ -25,32 +46,15 @@ function InputField(props) {
         return null;
     }
     // react-input-mask HOC for mask
-    // TODO
-    /*if (props.maskProps) {
-        return (
-            <InputMask
-                {...props}
-                {...props.maskProps}
-                value={props.input.value || ''}
-                onChange={e => props.input.onChange(e.target.value)}
-            >
-                <InputFieldView
-                    {...this.props}
-                    inputProps={{
-                        type: this.props.type,
-                        name: this.props.input.name,
-                        placeholder: this.props.placeholder,
-                        disabled: this.props.disabled,
-                        ...this.props.inputProps
-                    }}
-                />
-            </InputMask>
-        );
-    }*/
+    if (props.maskProps) {
+        var maskOnChange = function (e) { return props.input.onChange(e.target.value); };
+        return (React.createElement(react_input_mask_1["default"], __assign({}, inputProps, props.maskProps, { onChange: maskOnChange }), components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, onChange: maskOnChange }))));
+    }
     return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps }));
 }
 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;

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

package/ui/layout/Skeleton/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface ISkeletonViewProps {
+    className?: string;
+    children?: React.ReactNode;
+    animation?: 'pulse' | 'wave';
+    type?: 'text' | 'rect' | 'circle';
+    height?: string | number;
+    width?: string | number;
+}
+interface ISkeletonProps {
+    className?: string;
+    children?: React.ReactNode;
+    animation?: 'pulse' | 'wave';
+    type?: 'text' | 'rect' | 'circle';
+    height?: string | number;
+    width?: string | number;
+}
+declare function Skeleton(props: ISkeletonProps): JSX.Element;
+declare namespace Skeleton {
+    var defaultProps: {
+        animation: string;
+        type: string;
+    };
+}
+export default Skeleton;

package/ui/layout/Skeleton/Skeleton.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+function Skeleton(props) {
+    return hooks_1.useComponents().ui.renderView('layout.SkeletonView', props);
+}
+Skeleton.defaultProps = {
+    animation: 'pulse',
+    type: 'text'
+};
+exports["default"] = Skeleton;

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

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

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

package/ui/list/Steps/Steps.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+interface IStepsProps {
+    stepItems: IStepItem[];
+    currentStep: number;
+    isChangeable?: boolean;
+    className?: string;
+    onChange?: (index: number) => void;
+}
+export interface IStepsViewProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface IStepItemViewProps {
+    stepItem: IStepItem;
+    className?: string;
+    index: number;
+    status: string;
+    disabled: boolean;
+    onChange: () => void;
+}
+export interface IStepItem {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    icon?: string | React.ReactNode;
+    isError?: boolean;
+}
+declare function Steps(props: IStepsProps): JSX.Element;
+declare namespace Steps {
+    var defaultProps: {};
+}
+export default Steps;

package/ui/list/Steps/Steps.js

@@ -0,0 +1,23 @@
+"use strict";
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+var react_1 = require("react");
+function Steps(props) {
+    var _a = react_1.useState(false), isChangeable = _a[0], setIsChangeable = _a[1];
+    react_1.useEffect(function () { return setIsChangeable(props.isChangeable); }, [props.isChangeable]);
+    function getStepStatus(index, stepItem) {
+        if (stepItem.isError)
+            return 'error';
+        if (props.currentStep < index)
+            return 'wait';
+        if (props.currentStep === index)
+            return 'active';
+        return 'finish';
+    }
+    return hooks_1.useComponents().ui.renderView("list.StepsView", { className: props.className, children: props.stepItems.map(function (stepItem, index) {
+            return hooks_1.useComponents().ui.renderView("list.StepItemView", { stepItem: stepItem, index: index + 1, status: getStepStatus(index, stepItem), disabled: !isChangeable, onChange: function () { if (isChangeable)
+                    props.onChange(index); } });
+        }) });
+}
+Steps.defaultProps = {};
+exports["default"] = Steps;

package/ui/list/Steps/index.d.ts

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

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