@steroidsjs/core 2.1.0-beta.10 → 2.1.0-beta.14

package/ui/content/Detail/demo/basic.js

@@ -0,0 +1,56 @@
+"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 Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * Basic table with title
+ * @order 1
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { title: "Users", responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

package/ui/content/Detail/demo/controls.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Table with controls
+ * @order 3
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/controls.js

@@ -0,0 +1,56 @@
+"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 Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * Table with controls
+ * @order 3
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { controls: [{ label: 'Edit' }], responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

package/ui/content/Detail/demo/layout.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Table with vertical layout
+ * @order 4
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/layout.js

@@ -0,0 +1,56 @@
+"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 Detail_1 = __importStar(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * Table with vertical layout
+ * @order 4
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { layout: Detail_1.DetailLayoutEnum.Vertical, responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

package/ui/content/Detail/demo/responsive.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * When the screen width resizes, the number of columns changes
+ * @order 4
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/responsive.js

@@ -0,0 +1,71 @@
+"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 Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * When the screen width resizes, the number of columns changes
+ * @order 4
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { column: 4, responsive: {
+            media: [
+                {
+                    breakpoint: 500,
+                    column: 1
+                },
+                {
+                    breakpoint: 700,
+                    column: 2
+                },
+                {
+                    breakpoint: 900,
+                    column: 3
+                },
+            ]
+        } },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

package/ui/content/Detail/demo/sizes.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Table with different cell's sizes
+ * @order 2
+ * @col 8
+ */
+export default _default;

package/ui/content/Detail/demo/sizes.js

@@ -0,0 +1,61 @@
+"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 Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+var sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large'
+};
+/**
+ * Table with different cell's sizes
+ * @order 2
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null, Object.keys(sizes).map(function (size) { return (React.createElement("div", { style: { marginBottom: '30px' }, key: size },
+    React.createElement(Detail_1["default"], { title: sizes[size], size: size, responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); }))); });

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

@@ -0,0 +1,3 @@
+import Detail from './Detail';
+import DetailItem from './DetailItem';
+export { Detail, DetailItem };

package/ui/content/Detail/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.DetailItem = exports.Detail = void 0;
+var Detail_1 = __importDefault(require("./Detail"));
+exports.Detail = Detail_1["default"];
+var DetailItem_1 = __importDefault(require("./DetailItem"));
+exports.DetailItem = DetailItem_1["default"];

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

@@ -29,6 +29,7 @@ export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioning
 declare function DropDown(props: IDropDownProps): JSX.Element;
 declare namespace DropDown {
     var defaultProps: {
+        autoPositioning: boolean;
         componentDestroyDelay: number;
         defaultVisible: boolean;
         gap: number;

package/ui/content/DropDown/DropDown.js

@@ -71,6 +71,7 @@ function DropDown(props) {
             React.createElement(DropDownView, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible })))));
 }
 DropDown.defaultProps = {
+    autoPositioning: false,
     componentDestroyDelay: 300,
     defaultVisible: false,
     gap: 15,

package/ui/form/DateField/useDateInputState.d.ts

@@ -37,7 +37,6 @@ export interface IDateInputStateInput extends IFieldWrapperInputProps {
     valueFormat?: string;
     /**
      * Использовать всемирное время (UTC) вместо местного для даты, отправляемой на сервер
-     * @example YYYY-MM-DD
      */
     useUTC?: boolean;
 }

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',

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

@@ -0,0 +1,87 @@
+/// <reference types="react" />
+import ReactCropProps, { Crop } from 'react-image-crop';
+import { IModalProps } from '../../modal/Modal/Modal';
+import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
+import { IFileHocInput, IFileHocOutput } from '../../../hoc/file';
+export interface ICropInputProps {
+    /**
+     * Изначальные параметры обрезки изображения
+     * @example {unit: 'px', aspect: 1, x: 0, y: 0, width: 200, height: 200}
+     */
+    initialValues?: Crop;
+    /**
+     * Экшн для отправки параметров обрезки на бэкенд
+     * @example '/api/v1/user/avatar/crop'
+     */
+    backendUrl?: string;
+    /**
+     * Пропсы для модуля react-image-crop
+     * @example {maxWidth: 400, maxHeight: 400}
+     */
+    reactImageCropProps?: ReactCropProps;
+}
+export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileHocInput, 'multiple' | 'imagesOnly'>, IFileHocOutput {
+    /**
+     * Дополнительный CSS-класс для компонента
+     */
+    className?: CssClassName;
+    /**
+     * Переопределение внешнего вида компонента
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Переопределение внешнего вида модального окна
+     * @example MyCustomModalView
+     */
+    modalView?: CustomView;
+    /**
+     * Пропсы для модального окна
+     */
+    modalProps?: IModalProps;
+    /**
+     * Параметры обрезки
+     */
+    crop?: ICropInputProps;
+    /**
+     * Название кнопки
+     * @example 'Загрузить'
+     */
+    label?: string;
+    [key: string]: any;
+}
+export interface ICropOutputProps extends ICropInputProps {
+    onSubmit: (crop: Crop, imageId: any) => void;
+}
+export interface IImageFieldModalViewProps extends IModalProps {
+    crop: ICropOutputProps;
+    image: Record<string, any>;
+}
+export interface IImageFieldViewProps extends IImageFieldProps {
+    item: {
+        uid?: string;
+        fileId?: number | string;
+        title?: string;
+        size: number | string;
+        disabled?: boolean;
+        onRemove?: () => void;
+        error?: string;
+        image?: {
+            url: string;
+            width: string;
+            height: string;
+        };
+        progress?: {
+            bytesUploaded: number;
+            percent: number;
+        };
+    };
+    onClick: (e: Event) => void;
+}
+declare const _default: {
+    (props: IFieldWrapperInputProps): JSX.Element;
+    WrappedComponent: any;
+    displayName: any;
+    defaultProps: any;
+};
+export default _default;

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"];