@steroidsjs/core 3.0.0-beta.4 → 3.0.0-beta.40

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

@@ -4,7 +4,7 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Fi
  * FieldList
  * Создает список из сгруппированных полей формы
  */
-interface IFieldListItem extends IFieldWrapperInputProps {
+export interface IFieldListItem extends IFieldWrapperInputProps {
     /**
      * Будет ли отображён item ?
      * @example true
@@ -33,6 +33,10 @@ interface IFieldListItem extends IFieldWrapperInputProps {
      * @example MyCustomView
      */
     view?: CustomView;
+    /**
+     * Заголовок для колонки таблицы.
+     */
+    title?: string;
     [key: string]: any;
 }
 export interface IFieldListProps extends IFieldWrapperInputProps {
@@ -74,7 +78,7 @@ export interface IFieldListProps extends IFieldWrapperInputProps {
      * Переопределение view React компонента для кастомизации отображения списка с группами полей
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      * Пропсы для компонента отображения списка с группами полей - FieldListView
      */
@@ -94,6 +98,10 @@ export interface IFieldListProps extends IFieldWrapperInputProps {
      * @example true
      */
     enableKeyboardNavigation?: boolean;
+    /**
+     * Добавляет эффект зебры к таблице
+     */
+    hasAlternatingColors?: boolean;
     [key: string]: any;
 }
 export interface IFieldListViewProps {
@@ -105,12 +113,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

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -45,51 +49,50 @@ var tableNavigationHandler_1 = __importStar(require("./tableNavigationHandler"))
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 function FieldList(props) {
     var _a;
-    var components = hooks_1.useComponents();
-    var context = react_1.useContext(Form_1.FormContext);
+    var components = (0, hooks_1.useComponents)();
+    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 dispatch = context.provider.useDispatch();
     // Add and Remove handlers
-    var onAdd = react_1.useCallback(function (rowsCount) {
+    var onAdd = (0, react_1.useCallback)(function (rowsCount) {
         if (rowsCount === void 0) { rowsCount = 1; }
-        dispatch(form_1.formArrayAdd(context.formId, props.input.name, rowsCount, props.initialValues));
+        dispatch((0, form_1.formArrayAdd)(context.formId, props.input.name, rowsCount, props.initialValues));
     }, [context.formId, dispatch, props.initialValues, props.input.name]);
-    var onRemove = react_1.useCallback(function (rowIndex) {
-        dispatch(form_1.formArrayRemove(context.formId, props.input.name, rowIndex));
+    var onRemove = (0, react_1.useCallback)(function (rowIndex) {
+        dispatch((0, form_1.formArrayRemove)(context.formId, props.input.name, rowIndex));
     }, [context.formId, dispatch, props.input.name]);
     // Add initial rows
-    react_use_1.useMount(function () {
+    (0, react_use_1.useMount)(function () {
         if (!props.input.value) {
             onAdd(props.initialRowsCount);
         }
     });
     // Keyboard navigation
-    var nodeRef = react_1.useRef();
-    var onKeyDown = react_1.useCallback(function (event) {
-        if (props.enableKeyboardNavigation && tableNavigationHandler_1.isDescendant(nodeRef.current, event.target)) {
-            tableNavigationHandler_1["default"](event, function () { return onAdd(); });
+    var nodeRef = (0, react_1.useRef)();
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        if (props.enableKeyboardNavigation && (0, tableNavigationHandler_1.isDescendant)(nodeRef.current, event.target)) {
+            (0, tableNavigationHandler_1["default"])(event, function () { return onAdd(); });
         }
     }, [onAdd, props.enableKeyboardNavigation]);
-    react_use_1.useEvent('keydown', onKeyDown);
+    (0, react_use_1.useEvent)('keydown', onKeyDown);
     // Rows items
-    var items = react_1.useMemo(function () { return (props.items || [])
+    var items = (0, react_1.useMemo)(function () { return (props.items || [])
         .filter(function (field) { return field.visible !== false; })
         .map(function (field) {
         if (typeof field === 'string') {
             field = { attribute: field };
         }
-        return __assign(__assign(__assign({}, (modelAttributes || []).find(function (attributeItem) { return attributeItem.attribute === field.attribute; })), field), { disabled: isBoolean_1["default"](field.disabled) ? field.disabled : props.disabled, size: field.size || props.size });
+        return __assign(__assign(__assign({}, (modelAttributes || []).find(function (attributeItem) { return attributeItem.attribute === field.attribute; })), field), { disabled: (0, isBoolean_1["default"])(field.disabled) ? field.disabled : props.disabled, size: field.size || props.size });
     }); }, [modelAttributes, props.disabled, props.items, props.size]);
-    var contextValue = react_1.useMemo(function () { return ({
+    var contextValue = (0, react_1.useMemo)(function () { return ({
         formId: props.formId,
         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,
@@ -103,7 +106,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 }), range_1["default"](props.input.value || 0)
+        React.createElement(FieldListView, __assign({}, props.viewProps, commonProps, { forwardedRef: nodeRef, onAdd: onAdd, hasAlternatingColors: props.hasAlternatingColors }), (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 }))); }))));
 }
 FieldList.defaultProps = {
@@ -116,4 +119,4 @@ FieldList.defaultProps = {
     initialRowsCount: 1,
     enableKeyboardNavigation: true
 };
-exports["default"] = fieldWrapper_1["default"]('FieldList', FieldList, { list: true });
+exports["default"] = (0, fieldWrapper_1["default"])('FieldList', FieldList, { list: true });

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

@@ -27,7 +27,7 @@ export interface IFieldSetProps extends IFormContext {
     [key: string]: any;
 }
 export interface IFieldSetViewProps {
-    className?: string;
+    className?: CssClassName;
     children?: React.ReactNode;
     label?: string | any;
 }

package/ui/form/FieldSet/FieldSet.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -38,26 +42,24 @@ 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 = hooks_1.useComponents();
-    var context = react_1.useContext(Form_1.FormContext);
-    var contextValue = react_1.useMemo(function () { return ({
+    var components = (0, hooks_1.useComponents)();
+    var context = (0, react_1.useContext)(Form_1.FormContext);
+    var contextValue = (0, react_1.useMemo)(function () { return ({
         formId: props.formId || context.formId,
         model: props.model || context.model,
         prefix: [context.prefix, props.prefix]
             .filter(Boolean)
             .join('.'),
         size: props.size || context.size,
-        layout: 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),
             props.children,
-            (props.fields || []).map(function (field, index) { return (react_1["default"].createElement(Field_1["default"], __assign({ key: index }, (isString_1["default"](field) ? { attribute: field } : field), { prefix: contextValue.prefix }))); }))));
+            (props.fields || []).map(function (field, index) { return (react_1["default"].createElement(Field_1["default"], __assign({ key: index }, ((0, isString_1["default"])(field) ? { attribute: field } : field), { prefix: contextValue.prefix }))); }))));
 }
 exports["default"] = FieldSet;

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;
+    /**
+     * Кастомная иконка для удаление файла
+     * @example true
+     */
+    customRemoveIcon?: string;
+    /**
+     * Вариант отображения файлов
+     * @example 'list'
+     */
+    filesLayout?: FilesLayout | string;
+}
+export interface IFileFieldProps extends IFieldWrapperInputProps, IFileFieldCommonProps {
+    /**
+     * Дополнительный css класс
+     * @example true
+     */
     className?: CssClassName;
+    /**
+     * View компонент
+     * @example true
+     */
     view?: CustomView;
-    itemView?: CustomView;
-    itemProps?: any;
+    /**
+     * 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 файла
@@ -63,28 +103,6 @@ export interface IFileFieldItemViewProps extends IFileHocInput, IFileHocOutput {
     };
 }
 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

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -33,6 +37,7 @@ 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"));
@@ -40,18 +45,19 @@ var values_1 = __importDefault(require("lodash-es/values"));
 var useFile_1 = __importDefault(require("../../../hooks/useFile"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
-function FileField(props) {
-    var components = hooks_1.useComponents();
-    var _a = useFile_1["default"](props), files = _a.files, onBrowse = _a.onBrowse, onRemove = _a.onRemove;
+var FilesLayout;
+(function (FilesLayout) {
+    FilesLayout["list"] = "list";
+    FilesLayout["wall"] = "wall";
+})(FilesLayout = exports.FilesLayout || (exports.FilesLayout = {}));
+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 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) {
+    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(),
@@ -80,10 +86,10 @@ 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]
-                    || first_1["default"](values_1["default"](data.images));
+                    || (0, first_1["default"])((0, values_1["default"])(data.images));
             }
             // Add progress
             if (file.getStatus() === File_1["default"].STATUS_PROCESS) {
@@ -95,15 +101,22 @@ 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
 };
-exports["default"] = fieldWrapper_1["default"]('FileField', FileField);
+exports["default"] = (0, fieldWrapper_1["default"])('FileField', FileField);

package/ui/form/Form/AutoSaveHelper.js

@@ -19,17 +19,17 @@ var AutoSaveHelper = /** @class */ (function () {
     function AutoSaveHelper() {
     }
     AutoSaveHelper.restore = function (clientStorage, formId, initialValues) {
-        var values = clientStorage.get(AutoSaveHelper.STORAGE_KEY_PREFIX + "_" + formId) || '';
-        if (isString_1["default"](values) && values.substr(0, 1) === '{') {
+        var values = clientStorage.get("".concat(AutoSaveHelper.STORAGE_KEY_PREFIX, "_").concat(formId)) || '';
+        if ((0, isString_1["default"])(values) && values.substr(0, 1) === '{') {
             return __assign(__assign({}, JSON.parse(values)), initialValues);
         }
         return initialValues;
     };
     AutoSaveHelper.save = function (clientStorage, formId, values) {
-        clientStorage.set(AutoSaveHelper.STORAGE_KEY_PREFIX + "_" + formId, JSON.stringify(values));
+        clientStorage.set("".concat(AutoSaveHelper.STORAGE_KEY_PREFIX, "_").concat(formId), JSON.stringify(values));
     };
     AutoSaveHelper.remove = function (clientStorage, formId) {
-        clientStorage.remove(AutoSaveHelper.STORAGE_KEY_PREFIX + "_" + formId);
+        clientStorage.remove("".concat(AutoSaveHelper.STORAGE_KEY_PREFIX, "_").concat(formId));
     };
     AutoSaveHelper.STORAGE_KEY_PREFIX = 'Form';
     return AutoSaveHelper;

package/ui/form/Form/Form.d.ts

@@ -33,11 +33,6 @@ export interface IFormProps {
      * @example Упс, что-то пошло не так
      */
     submitErrorMessage?: string;
-    /**
-     * Шаблон для полей в форме
-     * @example horizontal
-     */
-    layout?: FormLayout;
     /**
      * Обработчик события отправки формы
      * @param args
@@ -99,7 +94,7 @@ export interface IFormProps {
      * Объект CSS стилей
      * @example {width: '45%'}
      */
-    style?: any;
+    style?: CustomStyle;
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
@@ -140,11 +135,6 @@ export interface IFormProps {
      * @example 'addComment'
      */
     captchaActionName?: string;
-    /**
-     * Включает рамки и тень.
-     * @example true
-     */
-    isBordered?: boolean;
     /**
      * Очищать ли данные формы с redux хранилища при размонтировании компонента. По-умолчанию - false
      * @example false
@@ -156,18 +146,9 @@ export interface IFormViewProps {
     submitLabel?: string;
     fields?: (string | IFieldProps)[];
     onSubmit: any;
-    isInvalid?: boolean;
     className?: CssClassName;
-    isBordered?: boolean;
     autoFocus?: boolean;
-    style?: any;
-    layout?: {
-        layout: FormLayoutName | boolean;
-        className: CssClassName;
-        label: boolean;
-        cols: number[];
-        [key: string]: any;
-    };
+    style?: CustomStyle;
     children?: React.ReactNode;
 }
 export interface IFormReducerState {
@@ -181,7 +162,6 @@ export interface IFormContext {
     formId?: string;
     model?: any;
     prefix?: string | boolean;
-    layout?: FormLayout;
     size?: Size;
     provider?: any;
     reducer?: {
@@ -196,7 +176,6 @@ declare namespace Form {
     var defaultProps: {
         actionMethod: string;
         autoStartTwoFactor: boolean;
-        layout: string;
         captchaActionName: string;
     };
 }