@steroidsjs/core 3.0.0-beta.11 → 3.0.0-beta.111

package/ui/form/Field/Field.js

@@ -50,7 +50,8 @@ function Field(props) {
     var fieldModel = (0, react_1.useMemo)(function () {
         var _a;
         var model = props.model || context.model;
-        var result = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || [])
+        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || (model === null || model === void 0 ? void 0 : model.attributes) || []);
+        var result = modelAttributes
             .find(function (field) { return field.attribute === props.attribute; });
         return result || {};
     }, [components, props.model, context.model, props.attribute]);

package/ui/form/Field/fieldWrapper.d.ts

@@ -16,7 +16,15 @@ export interface IFieldWrapperInputProps {
     attribute?: string;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: string | ((...args: any[]) => any) | any;
     /**
@@ -41,12 +49,16 @@ export interface IFieldWrapperInputProps {
      */
     placeholder?: string;
     /**
-     * Шаблон для поля, который настраивает его расположение внутри формы.
-     * Если false, то поле будет отрендерено без шаблона.
-     * @example 'horizontal'
+     * Input ID для связи поля с label
      */
-    layout?: FormLayout;
+    id?: string;
+    /**
+    * Значение для поля
+    */
     value?: any;
+    /**
+    * Callback-функция, которая вызывается при изменении данных
+    */
     onChange?: (...args: any[]) => any;
     /**
      * Ошибки в поле
@@ -54,25 +66,42 @@ export interface IFieldWrapperInputProps {
      */
     errors?: string[];
     date?: any;
-    /**
-     * Темная тема
-     */
-    dark?: boolean;
     /**
      * Размер поля
      */
     size?: Size;
+    /**
+     * Дополнительный CSS-класс для обертки FieldLayout
+     */
+    fieldLayoutClassName?: CssClassName;
+    /**
+     * Возможность отрендерить поле без обертки в компонент FieldLayout
+     */
+    isRenderWithoutFieldLayout?: boolean;
     [key: string]: any;
 }
+export interface IInputParams {
+    name?: string;
+    value?: any;
+    onChange: (value: any) => void;
+}
 export interface IFieldWrapperOutputProps {
+    /**
+    * Id формы
+    */
     formId?: string;
+    /**
+    * Id компонента
+    */
     componentId?: string;
+    /**
+    * Коллекция ошибок
+    */
     errors?: string[];
-    input?: {
-        name?: string;
-        value?: any;
-        onChange: (value: any) => void;
-    };
+    /**
+    * Параметры для input элемента
+    */
+    input?: IInputParams;
 }
 interface IFieldWrapperOptions {
     label?: boolean;
@@ -85,5 +114,5 @@ export interface FieldWrapperComponent<T> {
     displayName: any;
     defaultProps: any;
 }
-export default function fieldWrapper<T = any>(componentId: any, Component: any, optionsConfig?: IFieldWrapperOptions): FieldWrapperComponent<T>;
+export default function fieldWrapper<T = any>(componentId: string, Component: any, optionsConfig?: IFieldWrapperOptions): FieldWrapperComponent<T>;
 export {};

package/ui/form/Field/fieldWrapper.js

@@ -129,12 +129,12 @@ function fieldWrapper(componentId, Component, optionsConfig) {
         if (!Component.DynamicField) {
             Component.DynamicField = createDynamicField(componentId, Component, options);
         }
-        // Resolve layout
-        var layout = (0, react_1.useMemo)(function () { return (0, form_1.mergeLayoutProp)(context.layout, props.layout); }, [context.layout, props.layout]);
-        if (layout !== null) {
-            return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { layout: layout, size: props.size || context.size || null, required: (0, has_1["default"])(props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : ((0, has_1["default"])(props, 'label') ? props.label : metaProps.label), hint: (0, has_1["default"])(props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, children: (React.createElement(Component.DynamicField, __assign({}, props))) }));
+        var uniqueId = (0, hooks_1.useUniqueId)('input');
+        var inputId = props.id || uniqueId;
+        if (props.isRenderWithoutFieldLayout) {
+            return components.ui.renderView(Component.DynamicField, props);
         }
-        return components.ui.renderView(Component.DynamicField, props);
+        return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { className: props.fieldLayoutClassName, size: props.size || context.size || null, required: (0, has_1["default"])(props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : ((0, has_1["default"])(props, 'label') ? props.label : metaProps.label), hint: (0, has_1["default"])(props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, id: inputId, children: (React.createElement(Component.DynamicField, __assign({}, props, { id: inputId }))) }));
     };
     NewComponent.WrappedComponent = Component;
     NewComponent.displayName = componentId;

package/ui/form/FieldLayout/FieldLayout.d.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
 /**
  * FieldLayout
- * Специальный шаблон для поля, который настраивает его расположение внутри формы, рендерит лейбл, подсказки и ошибки
+ *
+ * Специальный шаблон для поля, который настраивает его расположение внутри формы, рендерит лейбл, подсказки и ошибки.
+ *
  */
-export interface IFieldLayoutProps {
+export interface IFieldLayoutProps extends IUiComponent {
     /**
      * Название поля либо отмена отображение поля (false)
      * @example 'Visible'
      */
     label?: string | boolean | any;
     /**
-     * Подсказка, которая отображается, когда в поле нет ошибок и layout !== 'inline'
+     * Подсказка, которая отображается, когда в поле нет ошибок
      * @example 'Save'
      */
     hint?: string | boolean;
@@ -20,37 +22,28 @@ export interface IFieldLayoutProps {
      * @example true
      */
     required?: boolean;
-    /**
-     * Выбор шаблона для расположения поля. Если false, то поле будет отрендерено без шаблона
-     * @example 'inline'
-     */
-    layout?: FormLayout;
     /**
      * Ошибки в поле
      * @example 'Field is required'
      */
     errors?: string[];
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
+     * Отображать ли состояние successful на поле
+     * @example 'true'
      */
-    layoutView?: CustomView;
+    successful?: boolean;
     [key: string]: any;
 }
 export interface IFieldLayoutViewProps {
     label: string | boolean | any;
     required: boolean;
     hint: string | boolean;
-    errors: string | string[];
-    layout?: {
-        layout: FormLayoutName | boolean;
-        className?: string;
-        style?: any;
-        label: boolean;
-        cols: number[];
-        [key: string]: any;
-    };
+    errors: string[];
+    successful: boolean;
+    id: string;
+    size: Size;
     children?: React.ReactNode;
+    className?: string;
 }
 declare function FieldLayout(props: IFieldLayoutProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FieldLayout>;

package/ui/form/FieldLayout/FieldLayout.js

@@ -39,23 +39,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
-var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
-var form_1 = require("../../../utils/form");
-var defaultProps = {
-    layout: {
-        layout: 'default',
-        cols: [3, 6]
-    }
-};
 function FieldLayout(props) {
     var components = (0, hooks_1.useComponents)();
     // Error from state
     var errors = (0, hooks_1.useForm)().formSelector(function (state) { return (0, get_1["default"])(state, 'errors.' + props.attribute); });
-    var layout = (0, react_1.useMemo)(function () { return (0, form_1.mergeLayoutProp)(defaultProps.layout, props.layout); }, [props.layout]);
-    if (layout === false) {
-        return props.children;
-    }
-    return components.ui.renderView(props.layoutView || 'form.FieldLayoutView', __assign(__assign({}, props), { errors: props.errors || errors, layout: layout }));
+    return components.ui.renderView(props.view || 'form.FieldLayoutView', __assign(__assign({}, props), { errors: props.errors || errors }));
 }
 exports["default"] = React.memo(FieldLayout);

package/ui/form/FieldList/FieldList.d.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
-/**
- * FieldList
- * Создает список из сгруппированных полей формы
- */
-interface IFieldListItem extends IFieldWrapperInputProps {
+export interface IFieldListItem extends IFieldWrapperInputProps, IUiComponent {
     /**
-     * Будет ли отображён item ?
+     * Будет ли отображён item?
      * @example true
      */
     visible?: boolean;
@@ -20,25 +16,30 @@ interface IFieldListItem extends IFieldWrapperInputProps {
      * @example Your text...
      */
     placeholder?: string;
-    /**
-     * Дополнительный CSS-класс для item
-     */
-    className?: CssClassName;
     /**
      * Дополнительный CSS-класс для заголовка
      */
     headerClassName?: CssClassName;
     /**
-     * Переопределение view React компонента для кастомизации отображения item
-     * @example MyCustomView
+     * Заголовок для колонки таблицы
      */
-    view?: CustomView;
+    title?: string;
     [key: string]: any;
 }
-export interface IFieldListProps extends IFieldWrapperInputProps {
+/**
+ * FieldList
+ *
+ * Создает список из сгруппированных полей формы.
+ * Для загрузки файлов с помощью `FileField` внутри строк `FieldList`, нужно использовать форму с флагом `useRedux`.
+ */
+export interface IFieldListProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Начальные значения в полях
-     * @example {name: 'Ivan', amount: 5}
+     * @example
+     * {
+     *  name: 'Ivan',
+     *  amount: 5
+     * }
      */
     initialValues?: {
         [key: string]: any;
@@ -62,19 +63,10 @@ export interface IFieldListProps extends IFieldWrapperInputProps {
      * @example true
      */
     showRemove?: boolean;
-    /**
-     * Дополнительный CSS-класс для списка с группами полей
-     */
-    className?: CssClassName;
     /**
      * Дополнительный CSS-класс для таблицы
      */
     tableClassName?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения списка с группами полей
-     * @example MyCustomView
-     */
-    view?: any;
     /**
      * Пропсы для компонента отображения списка с группами полей - FieldListView
      */
@@ -94,6 +86,10 @@ export interface IFieldListProps extends IFieldWrapperInputProps {
      * @example true
      */
     enableKeyboardNavigation?: boolean;
+    /**
+     * Добавляет эффект зебры к таблице
+     */
+    hasAlternatingColors?: boolean;
     [key: string]: any;
 }
 export interface IFieldListViewProps {
@@ -105,12 +101,13 @@ export interface IFieldListViewProps {
     showRemove?: boolean;
     showAdd?: boolean;
     children?: React.ReactNode;
-    className?: string;
+    className?: CssClassName;
     tableClassName?: string;
-    style?: any;
+    style?: CustomStyle;
     forwardedRef?: any;
     disabled?: boolean;
     size?: Size;
+    hasAlternatingColors?: boolean;
 }
 export interface IFieldListItemViewProps extends IFieldWrapperOutputProps {
     items?: (IFieldListItem & {

package/ui/form/FieldList/FieldList.js

@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -40,6 +49,10 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var isBoolean_1 = __importDefault(require("lodash-es/isBoolean"));
 var range_1 = __importDefault(require("lodash-es/range"));
+var concat_1 = __importDefault(require("lodash-es/concat"));
+var last_1 = __importDefault(require("lodash-es/last"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var get_1 = __importDefault(require("lodash-es/get"));
 var react_use_1 = require("react-use");
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
@@ -53,15 +66,29 @@ function FieldList(props) {
     var context = (0, react_1.useContext)(Form_1.FormContext);
     // Resolve model
     var modelAttributes = (_a = components.meta.getModel(props.model)) === null || _a === void 0 ? void 0 : _a.attributes;
+    var isWithReduxForm = (0, hooks_1.useSelector)(function (state) { return (0, get_1["default"])(state, ['form', context.formId]) || null; });
     var dispatch = context.provider.useDispatch();
+    // Mapper for preserving the correct sequence of rows on the UI
+    var _b = (0, react_1.useState)((0, range_1["default"])(props.input.value) || []), storeToRowIndexMap = _b[0], setStoreToRowIndexMap = _b[1];
+    var addRowIndexes = (0, react_1.useCallback)(function (rowsCount) {
+        setStoreToRowIndexMap(function (prevMap) {
+            var lastIndex = !(0, isEmpty_1["default"])(prevMap) ? (0, last_1["default"])(prevMap) + 1 : 0;
+            return (0, concat_1["default"])(prevMap, (0, range_1["default"])(lastIndex, lastIndex + rowsCount));
+        });
+    }, []);
+    var removeRowIndex = (0, react_1.useCallback)(function (rowIndex) {
+        setStoreToRowIndexMap(function (prevMap) { return __spreadArray(__spreadArray([], prevMap.slice(0, rowIndex), true), prevMap.slice(rowIndex + 1), true); });
+    }, []);
     // Add and Remove handlers
     var onAdd = (0, react_1.useCallback)(function (rowsCount) {
         if (rowsCount === void 0) { rowsCount = 1; }
+        addRowIndexes(rowsCount);
         dispatch((0, form_1.formArrayAdd)(context.formId, props.input.name, rowsCount, props.initialValues));
-    }, [context.formId, dispatch, props.initialValues, props.input.name]);
+    }, [context.formId, dispatch, props.initialValues, props.input.name, addRowIndexes]);
     var onRemove = (0, react_1.useCallback)(function (rowIndex) {
+        removeRowIndex(rowIndex);
         dispatch((0, form_1.formArrayRemove)(context.formId, props.input.name, rowIndex));
-    }, [context.formId, dispatch, props.input.name]);
+    }, [context.formId, dispatch, props.input.name, removeRowIndex]);
     // Add initial rows
     (0, react_use_1.useMount)(function () {
         if (!props.input.value) {
@@ -90,10 +117,9 @@ function FieldList(props) {
         model: props.model,
         prefix: props.prefix,
         size: props.size,
-        layout: props.layout,
         provider: context.provider,
         reducer: context.reducer
-    }); }, [context.provider, context.reducer, props.formId, props.layout, props.model, props.prefix, props.size]);
+    }); }, [context.provider, context.reducer, props.formId, props.model, props.prefix, props.size]);
     var commonProps = {
         showAdd: props.showAdd,
         showRemove: props.showRemove,
@@ -107,8 +133,7 @@ function FieldList(props) {
     var FieldListView = props.view || components.ui.getView('form.FieldListView');
     var FieldListItemView = props.itemView || components.ui.getView('form.FieldListItemView');
     return (React.createElement(Form_1.FormContext.Provider, { value: contextValue },
-        React.createElement(FieldListView, __assign({}, props.viewProps, commonProps, { forwardedRef: nodeRef, onAdd: onAdd }), (0, range_1["default"])(props.input.value || 0)
-            .map(function (index) { return (React.createElement(FieldListItemView, __assign({}, props.itemViewProps, commonProps, { key: index, onRemove: onRemove, prefix: props.input.name + '.' + index, rowIndex: index }))); }))));
+        React.createElement(FieldListView, __assign({}, props.viewProps, commonProps, { forwardedRef: nodeRef, onAdd: onAdd, hasAlternatingColors: props.hasAlternatingColors }), !(0, isEmpty_1["default"])(storeToRowIndexMap) && (0, range_1["default"])(props.input.value || 0).map(function (index) { return (React.createElement(FieldListItemView, __assign({}, props.itemViewProps, commonProps, { key: isWithReduxForm ? storeToRowIndexMap[index] : index, onRemove: onRemove, prefix: props.input.name + '.' + index, rowIndex: index }))); }))));
 }
 FieldList.defaultProps = {
     initialValues: null,

package/ui/form/FieldSet/FieldSet.d.ts

@@ -21,13 +21,13 @@ export interface IFieldSetProps extends IFormContext {
      */
     view?: CustomView;
     /**
-     * Дополнительный CSS-класс для \<fieldset\>...\<\/fieldset\>
+     * Дополнительный CSS-класс для '<fieldset>...</fieldset>'
      */
     className?: CssClassName;
     [key: string]: any;
 }
 export interface IFieldSetViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     label?: string | any;
 }

package/ui/form/FieldSet/FieldSet.js

@@ -42,7 +42,6 @@ var isString_1 = __importDefault(require("lodash-es/isString"));
 var Field_1 = __importDefault(require("../Field"));
 var Form_1 = require("../Form/Form");
 var hooks_1 = require("../../../hooks");
-var form_1 = require("../../../utils/form");
 function FieldSet(props) {
     var components = (0, hooks_1.useComponents)();
     var context = (0, react_1.useContext)(Form_1.FormContext);
@@ -53,11 +52,10 @@ function FieldSet(props) {
             .filter(Boolean)
             .join('.'),
         size: props.size || context.size,
-        layout: (0, form_1.mergeLayoutProp)(context.layout, props.layout),
         provider: context.provider,
         reducer: context.reducer
-    }); }, [context.formId, context.layout, context.model, context.prefix, context.provider, context.reducer,
-        context.size, props.formId, props.layout, props.model, props.prefix, props.size]);
+    }); }, [context.formId, context.model, context.prefix, context.provider, context.reducer,
+        context.size, props.formId, props.model, props.prefix, props.size]);
     var FieldSetView = props.view || components.ui.getView('form.FieldSetView');
     return (react_1["default"].createElement(Form_1.FormContext.Provider, { value: contextValue },
         react_1["default"].createElement(FieldSetView, __assign({ className: props.className, label: props.label }, props),

package/ui/form/FileField/FileField.d.ts

@@ -1,27 +1,66 @@
-import * as React from 'react';
-import { IFileHocInput, IFileHocOutput } from '../../../hoc/file';
+import { IFileInput } from '../../../hooks/useFile';
 import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
-export interface IFileFieldProps extends IFieldWrapperInputProps, IFileHocInput, IFileHocOutput {
+import { IButtonProps } from '../Button/Button';
+export declare enum FilesLayout {
+    list = "list",
+    wall = "wall"
+}
+interface IFileFieldCommonProps extends IFileInput {
     /**
      * Показать значок удаление файла
      * @example true
      */
     showRemove?: boolean;
-    buttonComponent?: React.ReactNode;
-    buttonProps?: any;
-    className?: CssClassName;
-    view?: CustomView;
-    itemView?: CustomView;
-    itemProps?: any;
+    /**
+     * Кастомная иконка для удаление файла
+     * @example true
+     */
+    customRemoveIcon?: string;
+    /**
+     * Вариант отображения файлов
+     * @example 'list'
+     */
+    filesLayout?: FilesLayout | string;
+}
+/**
+ * FileField
+ *
+ * Компонент `FileField` представляет собой поле формы для загрузки файлов.
+ * Он использует хук `useFile` для управления состоянием файлов и выполнения операций с файлами, таких как выбор и удаление.
+ * Компонент поддерживает различные варианты отображения файлов (список или стена) с помощью перечисления `FilesLayout`.
+ * На backendUrl по дефолту файл отправляется в теле запроса в виде бинарного кода.
+ * Чтобы отправлять файл в виде form-data (например в таком виде принимает файл FileModule в библиотеке steroidsjs/nest),
+ * нужно передать в `FileField` пропс uploaderConfig, в котором нужно указать поле useFormData: true.
+ **/
+export interface IFileFieldProps extends IFieldWrapperInputProps, IFileFieldCommonProps, IUiComponent {
+    /**
+     * View компонент для кнопки
+     * @example true
+     */
+    buttonView?: any;
+    /**
+     * Пропсы для кнопки
+     * @example true
+     */
+    buttonProps?: IButtonProps;
+    /**
+     * View компонент для элемента списка файлов
+     * @example true
+     */
+    itemView?: any;
+    /**
+     * Пропсы для элемента файла
+     * @example true
+     */
+    itemProps?: Record<string, any>;
     [key: string]: any;
 }
-export interface IFileFieldItemViewProps extends IFileHocInput, IFileHocOutput {
+export interface IFileFieldItemViewProps extends IFileFieldCommonProps {
     /**
      * Уникальный текстовый идентификатор
      * @example e65f5867-0083-48a7-af43-1121ed9e6280
      */
     uid?: string;
-    imagesOnly?: boolean;
     /**
      * ID файла
      * @example 34
@@ -33,13 +72,14 @@ export interface IFileFieldItemViewProps extends IFileHocInput, IFileHocOutput {
      */
     title?: string;
     disabled?: boolean;
-    showRemove?: boolean;
     /**
      * Обработчик события удаления файла
      * @param e
      */
     onRemove?: () => void;
     error?: string;
+    size?: number;
+    item?: Record<string, any>;
     image?: {
         /**
          * Url файла
@@ -57,34 +97,17 @@ export interface IFileFieldItemViewProps extends IFileHocInput, IFileHocOutput {
          */
         height: string;
     };
+    /**
+     * Обработчик события загрузки файлов
+     * @param e
+     */
+    onLoad?: () => void;
     progress?: {
         bytesUploaded: number;
         percent: number;
     };
 }
 export interface IFileFieldViewProps extends IFileFieldProps {
-    buttonComponent?: React.ReactNode | any;
-    imagesOnly?: boolean;
-    itemProps?: any;
-    buttonProps: {
-        /**
-         * Название поля
-         * @example Save
-         */
-        label?: string | any;
-        size?: boolean;
-        /**
-         * Переводит в неактивное состояние
-         * @example true
-         */
-        disabled?: boolean;
-        /**
-         * Обработчик события нажатия
-         * @param e
-         */
-        onClick?: (e: Event) => void;
-    };
-    itemView?: React.ReactNode | any;
     items: IFileFieldItemViewProps[];
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IFileFieldProps>;

package/ui/form/FileField/FileField.js

@@ -37,25 +37,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+exports.FilesLayout = void 0;
 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 useFile_1 = __importDefault(require("../../../hooks/useFile"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
-function FileField(props) {
+var FilesLayout;
+(function (FilesLayout) {
+    FilesLayout["list"] = "list";
+    FilesLayout["wall"] = "wall";
+})(FilesLayout = exports.FilesLayout || (exports.FilesLayout = {}));
+var FILE_STATUS_END = 'end';
+function FileFieldComponent(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = (0, useFile_1["default"])(props), files = _a.files, onBrowse = _a.onBrowse, onRemove = _a.onRemove;
+    var _b = React.useState(false), isFilesLoaded = _b[0], setIsFilesLoaded = _b[1];
     var FileFieldView = props.view || components.ui.getView('form.FileFieldView');
     var FileFieldItemView = props.itemView || components.ui.getView('form.FileFieldItemView');
-    return (React.createElement(FileFieldView, __assign({}, props, { buttonComponent: props.buttonComponent, buttonProps: __assign({ label: props.imagesOnly
-                ? props.multiple
-                    ? __('Прикрепить фотографии')
-                    : __('Прикрепить фото')
-                : props.multiple
-                    ? __('Прикрепить файлы')
-                    : __('Прикрепить файл'), size: props.size, disabled: props.disabled, onClick: onBrowse }, props.buttonProps), itemView: FileFieldItemView, items: files.map(function (file) {
+    (0, react_1.useEffect)(function () {
+        setIsFilesLoaded(files.filter(function (file) { return file._status === FILE_STATUS_END; }).length === files.length);
+    }, [files]);
+    (0, react_1.useEffect)(function () {
+        if (isFilesLoaded && props.onLoad) {
+            props.onLoad();
+        }
+    }, [isFilesLoaded, props]);
+    return (React.createElement(FileFieldView, __assign({}, props, { buttonView: props.buttonView, buttonProps: __assign({ label: props.filesLayout === FilesLayout.wall
+                ? __('Upload')
+                : __('Click to Upload'), size: props.size, disabled: props.disabled, onClick: onBrowse }, props.buttonProps), itemView: FileFieldItemView, items: files.map(function (file) {
             var data = file.getResultHttpMessage() || {};
             var item = {
                 uid: file.getUid(),
@@ -84,7 +97,7 @@ function FileField(props) {
                 }
             }
             // Add thumbnail image
-            if (data.images) {
+            if (props.imagesOnly && data.images) {
                 // Image object has properties: url, width, height
                 item.image = data.images[props.imagesProcessor]
                     || (0, first_1["default"])((0, values_1["default"])(data.images));
@@ -99,13 +112,20 @@ function FileField(props) {
             return item;
         }) })));
 }
+function FileField(props) {
+    if (process.env.IS_SSR) {
+        return null;
+    }
+    return (React.createElement(FileFieldComponent, __assign({}, props)));
+}
 FileField.defaultProps = {
     disabled: false,
     required: false,
+    filesLayout: FilesLayout.list,
     className: '',
     showRemove: true,
     buttonProps: {
-        color: 'secondary',
+        color: 'basic',
         outline: true
     },
     multiple: false