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

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

@@ -1,28 +1,40 @@
 import * as React from 'react';
 import { IAddressBarConfig } from '../../../hooks/useAddressBar';
-import { IApiMethod } from '../../../components/ApiComponent';
 import { IFieldProps } from '../Field/Field';
 /**
  * Form
- * Компонент для создания формы
+ *
+ * Компонент для создания формы. Предоставляет управление и синхронизацию состояния формы,
+ * а также позволяет выполнять отправку данных формы на сервер с возможностью валидации и обработки результатов.
  */
-export interface IFormProps {
+export interface IFormProps extends IUiComponent {
     /**
      * Идентификатор формы
      * @example BookingForm
      */
     formId?: string;
+    /**
+    * Префикс
+    */
     prefix?: string;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: string | ((...args: any[]) => any) | any;
     /**
      * Url на который будет отправлена форма
      * @example api/v1/handle-form
      */
-    action?: string | IApiMethod;
+    action?: string;
     /**
      * Тип HTTP запроса (GET | POST | PUT | DELETE)
      * @example POST
@@ -33,11 +45,6 @@ export interface IFormProps {
      * @example Упс, что-то пошло не так
      */
     submitErrorMessage?: string;
-    /**
-     * Шаблон для полей в форме
-     * @example horizontal
-     */
-    layout?: FormLayout;
     /**
      * Обработчик события отправки формы
      * @param args
@@ -46,7 +53,11 @@ export interface IFormProps {
     /**
      * Набор с правилами для проверки соответствия значений полей формы определенному формату.
      * Проверка запускается в момент отправки формы (в обработчике onSubmit).
-     * @example [['name', 'required'], ['age', 'integer']]
+     * @example
+     * [
+     *  ['name', 'required'],
+     *  ['age', 'integer']
+     * ]
      */
     validators?: any[];
     /**
@@ -92,26 +103,19 @@ export interface IFormProps {
      */
     initialValues?: any | any[];
     /**
-     * Дополнительный CSS-класс для \<form\>...\<\/form\>
-     */
-    className?: CssClassName;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
+     * Свойства для представления
      * @example {className: 'foo'}
      */
     viewProps?: any;
     /**
      * Поля, которые необходимо поместить в форму
-     * @example [{attribute: 'category', component: 'DropDownField'}]
+     * @example
+     * [
+     *  {
+     *   attribute: 'category',
+     *   component: 'DropDownField'
+     *  }
+     * ]
      */
     fields?: (string | IFieldProps)[];
     /**
@@ -130,7 +134,7 @@ export interface IFormProps {
      */
     addressBar?: boolean | IAddressBarConfig;
     /**
-     * Если в форме есть элементы \<input\>, то произойдет автоматическая фокусировка на первом из них
+     * Если в форме есть элементы '<input>', то произойдет автоматическая фокусировка на первом из них
      * @example true
      */
     autoFocus?: boolean;
@@ -140,11 +144,6 @@ export interface IFormProps {
      * @example 'addComment'
      */
     captchaActionName?: string;
-    /**
-     * Включает рамки и тень.
-     * @example true
-     */
-    isBordered?: boolean;
     /**
      * Очищать ли данные формы с redux хранилища при размонтировании компонента. По-умолчанию - false
      * @example false
@@ -156,18 +155,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 {
@@ -178,16 +168,37 @@ export interface IFormReducerState {
     isSubmitting: boolean;
 }
 export interface IFormContext {
+    /**
+    * Id формы
+    * @example {}
+    */
     formId?: string;
+    /**
+    * Модель с полями формы
+    */
     model?: any;
+    /**
+    * Префикс для полей формы
+    */
     prefix?: string | boolean;
-    layout?: FormLayout;
+    /**
+    * Размер компонента
+    */
     size?: Size;
+    /**
+    * Провайдер
+    */
     provider?: any;
+    /**
+    * Редьюсер
+    */
     reducer?: {
         dispatch: React.Dispatch<any>;
         select: any;
     };
+    /**
+    * Диспатч
+    */
     dispatch?: any;
 }
 export declare const FormContext: React.Context<IFormContext>;
@@ -196,7 +207,6 @@ declare namespace Form {
     var defaultProps: {
         actionMethod: string;
         autoStartTwoFactor: boolean;
-        layout: string;
         captchaActionName: string;
     };
 }

package/ui/form/Form/Form.js

@@ -111,8 +111,6 @@ function Form(props) {
     // Get components and dispatch method
     var components = (0, hooks_1.useComponents)();
     var reduxDispatch = (0, hooks_1.useDispatch)();
-    // Normalize layout
-    var layout = (0, react_1.useMemo)(function () { return (0, form_1.normalizeLayout)(props.layout); }, [props.layout]);
     // Address bar synchronization
     var _a = (0, useAddressBar_1["default"])(__assign({ enable: !!props.addressBar, model: props.model }, (typeof props.addressBar === 'boolean' ? { enable: props.addressBar } : props.addressBar))), initialQuery = _a.initialQuery, updateQuery = _a.updateQuery;
     // Resolve initial values
@@ -131,7 +129,7 @@ function Form(props) {
     }
     // Init data provider
     var provider = props.useRedux ? form_1.providers.redux : form_1.providers.reducer;
-    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
+    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, errors = _b.errors, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
     // Sync with address bar
     (0, react_use_1.useUpdateEffect)(function () {
         updateQuery(values);
@@ -149,6 +147,9 @@ function Form(props) {
             dispatch((0, form_2.formDestroy)(props.formId));
         }
     });
+    // Clear Errors
+    var prevValues = (0, react_use_1.usePrevious)(values);
+    (0, react_use_1.useUpdateEffect)(function () { return (0, form_1.clearErrors)(values, prevValues, errors, setErrors); }, [errors, prevValues, setErrors, values]);
     // OnChange handler
     (0, react_use_1.useUpdateEffect)(function () {
         if (props.onChange) {
@@ -159,11 +160,11 @@ function Form(props) {
     var onSubmit = (0, react_1.useCallback)(function (e) {
         if (e === void 0) { e = null; }
         return __awaiter(_this, void 0, void 0, function () {
-            var cleanedValues, submitResult, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, requestError_1, data;
-            var _b;
+            var cleanedValues, submitResult, captchaAttribute, googleCaptcha, captchaToken, options, response, requestError_1, data;
+            var _a;
             var _this = this;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         dispatch((0, form_2.formSetSubmitting)(props.formId, true));
                         // TODO
@@ -208,7 +209,7 @@ function Form(props) {
                         if (!props.onSubmit) return [3 /*break*/, 2];
                         return [4 /*yield*/, props.onSubmit.call(null, cleanedValues)];
                     case 1:
-                        submitResult = _c.sent();
+                        submitResult = _b.sent();
                         dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                         return [2 /*return*/, submitResult];
                     case 2:
@@ -222,16 +223,16 @@ function Form(props) {
                         if (!(captchaAttribute && components.resource.googleCaptchaSiteKey)) return [3 /*break*/, 5];
                         return [4 /*yield*/, components.resource.loadGoogleCaptcha()];
                     case 3:
-                        googleCaptcha = _c.sent();
+                        googleCaptcha = _b.sent();
                         return [4 /*yield*/, getCaptchaToken({
                                 googleCaptcha: googleCaptcha,
                                 siteKey: components.resource.googleCaptchaSiteKey,
                                 actionName: props.captchaActionName
                             })];
                     case 4:
-                        captchaToken = _c.sent();
-                        cleanedValues = __assign(__assign({}, cleanedValues), (_b = {}, _b[captchaAttribute] = captchaToken, _b));
-                        _c.label = 5;
+                        captchaToken = _b.sent();
+                        cleanedValues = __assign(__assign({}, cleanedValues), (_a = {}, _a[captchaAttribute] = captchaToken, _a));
+                        _b.label = 5;
                     case 5:
                         options = {
                             onTwoFactor: props.onTwoFactor
@@ -257,29 +258,25 @@ function Form(props) {
                                 }); }
                                 : undefined
                         };
-                        _c.label = 6;
+                        _b.label = 6;
                     case 6:
-                        _c.trys.push([6, 11, , 12]);
-                        if (!(typeof props.action === 'function')) return [3 /*break*/, 8];
-                        return [4 /*yield*/, props.action.call(null, components.api, cleanedValues, options)];
+                        _b.trys.push([6, 8, , 9]);
+                        return [4 /*yield*/, components.http.send(props.actionMethod, props.action || window.location.pathname, cleanedValues, options)];
                     case 7:
-                        _a = _c.sent();
-                        return [3 /*break*/, 10];
-                    case 8: return [4 /*yield*/, components.http.send(props.actionMethod, props.action || window.location.pathname, cleanedValues, options)];
-                    case 9:
-                        _a = _c.sent();
-                        _c.label = 10;
-                    case 10:
-                        response = _a;
-                        return [3 /*break*/, 12];
-                    case 11:
-                        requestError_1 = _c.sent();
+                        response = _b.sent();
+                        return [3 /*break*/, 9];
+                    case 8:
+                        requestError_1 = _b.sent();
                         console.error(requestError_1); // eslint-disable-line no-console
                         dispatch((0, form_2.formSetSubmitting)(props.formId, false));
-                        props.onError(requestError_1);
-                        reduxDispatch((0, notifications_1.showNotification)(props.submitErrorMessage || __('Ошибка сервера'), 'danger'));
+                        if (typeof props.onError === 'function') {
+                            props.onError(requestError_1);
+                        }
+                        else {
+                            reduxDispatch((0, notifications_1.showNotification)(props.submitErrorMessage || __('Ошибка сервера'), 'error'));
+                        }
                         return [2 /*return*/, null];
-                    case 12:
+                    case 9:
                         // Skip on 2fa
                         if (response.twoFactor) {
                             dispatch((0, form_2.formSetSubmitting)(props.formId, false));
@@ -312,7 +309,7 @@ function Form(props) {
             });
         });
     }, [dispatch, props, values, components.ui, components.resource,
-        components.http, components.api, reduxDispatch, setErrors]);
+        components.http, reduxDispatch, setErrors]);
     // Manual submit form by reducer action
     var prevSubmitCounter = (0, react_use_1.usePrevious)(submitCounter);
     (0, react_use_1.useUpdateEffect)(function () {
@@ -325,24 +322,22 @@ function Form(props) {
         model: props.model,
         prefix: props.prefix,
         size: props.size,
-        layout: props.layout,
         provider: provider,
         reducer: reducer,
         dispatch: dispatch
-    }); }, [dispatch, props.formId, props.layout, props.model, props.prefix, props.size, provider, reducer]);
+    }); }, [dispatch, props.formId, props.model, props.prefix, props.size, provider, reducer]);
     // Wait initialization (only for redux)
     if (values === undefined) {
         return null;
     }
     // Render context and form
     return (React.createElement(exports.FormContext.Provider, { value: formContextValue }, props.view !== false
-        ? components.ui.renderView(props.view || 'form.FormView', __assign(__assign({}, props.viewProps), { isInvalid: isInvalid, isSubmitting: isSubmitting, layout: layout, onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, isBordered: props.isBordered, className: props.className, style: props.style, autoFocus: props.autoFocus }))
+        ? components.ui.renderView(props.view || 'form.FormView', __assign(__assign({}, props.viewProps), { isSubmitting: isSubmitting, onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, className: props.className, style: props.style, autoFocus: props.autoFocus }))
         : props.children));
 }
 Form.defaultProps = {
     actionMethod: 'POST',
     autoStartTwoFactor: true,
-    layout: 'default',
     captchaActionName: 'submit'
 };
 exports["default"] = Form;

package/ui/form/HtmlField/HtmlField.d.ts

@@ -1,17 +1,13 @@
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * HtmlField
- * Компонент для создания HTML-разметки, использующий WYSIWYG-реадактор
+ * Компонент для создания HTML-разметки, использующий WYSIWYG редактор
  */
-export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps {
+export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps, IUiComponent {
     /**
      * Конфигурация wysiwyg реадактора
      */
     editorProps?: any;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
      * Url на который будет отправлена форма загрузки файла
      * @example /api/v1/upload-files
@@ -23,11 +19,6 @@ export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperO
      * @example origin
      */
     uploadImagesProcessor?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Обработчик события при фокусе на редактора
      * @param event

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

@@ -1,11 +1,20 @@
 import ReactCropProps, { Crop } from 'react-image-crop';
 import { IModalProps } from '../../modal/Modal/Modal';
+import { IFileInput } from '../../../hooks/useFile';
 import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
-import { IFileHocInput, IFileHocOutput } from '../../../hoc/file';
-export interface ICropInputProps {
+import { IButtonProps } from '../Button/Button';
+export interface ICropConfig {
     /**
      * Изначальные параметры обрезки изображения
-     * @example {unit: 'px', aspect: 1, x: 0, y: 0, width: 200, height: 200}
+     * @example
+     * {
+     *  unit: 'px',
+     *  aspect: 1,
+     *  x: 0,
+     *  y: 0,
+     *  width: 200,
+     *  height: 200
+     * }
      */
     initialValues?: Crop;
     /**
@@ -19,16 +28,12 @@ export interface ICropInputProps {
      */
     reactImageCropProps?: ReactCropProps;
 }
-export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileHocInput, 'multiple' | 'imagesOnly'>, IFileHocOutput {
-    /**
-     * Дополнительный CSS-класс для компонента
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение внешнего вида компонента
-     * @example MyCustomView
-     */
-    view?: CustomView;
+/**
+ * ImageField
+ *
+ * Компонент для загрузки изображений с возможностью обрезки и предпросмотра.
+ **/
+export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileInput, 'multiple' | 'imagesOnly'>, IUiComponent {
     /**
      * Переопределение внешнего вида модального окна
      * @example MyCustomModalView
@@ -41,15 +46,19 @@ export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileHoc
     /**
      * Параметры обрезки
      */
-    crop?: ICropInputProps;
+    crop?: ICropConfig;
     /**
      * Название кнопки
      * @example 'Загрузить'
      */
     label?: string;
+    /**
+     * Пропсы для кнопки
+     */
+    buttonProps?: IButtonProps;
     [key: string]: any;
 }
-export interface ICropOutputProps extends ICropInputProps {
+export interface ICropOutputProps extends ICropConfig {
     onSubmit: (crop: Crop, imageId: any) => void;
 }
 export interface IImageFieldModalViewProps extends IModalProps {

package/ui/form/ImageField/ImageField.js

@@ -144,6 +144,10 @@ ImageField.defaultProps = {
         initialValues: {
             aspect: 1
         }
+    },
+    buttonProps: {
+        color: 'basic',
+        outline: true
     }
 };
 exports["default"] = (0, fieldWrapper_1["default"])('ImageField', ImageField);

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

@@ -1,49 +1,49 @@
 import * as React from 'react';
-import { ChangeEventHandler, ReactNode } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { MaskitoOptions } from '@maskito/core';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
-type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
+export declare const MASK_PRESETS: {
+    date: Required<MaskitoOptions>;
+    phone: {
+        mask: any[];
+    };
+    card: {
+        mask: any[];
+    };
+};
+export type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
+export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
+    /**
+     * Свойства для элемента input
+     * @example { onKeyDown: ... }
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Показывать иконку очищения поля
+     * @example true
+    */
+    showClear?: boolean;
+    /**
+     * Свойства для компонента отображения
+     * @example
+     * {
+     *  customHandler: () => {...}
+     * }
+     */
+    viewProps?: {
+        [key: string]: any;
+    };
+}
 /**
  * InputField
  * Поле ввода текста
  */
-export interface IInputFieldProps extends IFieldWrapperInputProps {
+export interface IInputFieldProps extends IBaseFieldProps {
     /**
      * HTML Тип
      * @example email
      */
     type?: IElementInputType;
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: string;
-    /**
-     * Свойства для элемента \<input /\>
-     * @example {onKeyDown: ...}
-     */
-    inputProps?: any;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-    /**
-     */
-    viewProps?: any;
-    /**
-     * Размер Input
-     * @example 'large'
-     */
-    size?: Size;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
     /**
      * Изображение или React-нода, которая будет отрендерена слева от поля.
      * @example require('icon.png') | <component/>
@@ -51,7 +51,7 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
     textBefore?: number | ReactNode | string;
     /**
      * Изображение или React-нода, которая будет отрендерена справа от поля.
-     * @example require('icon.png') | <component/>
+     * @example require('icon.png') | '<component/>'
      */
     textAfter?: number | ReactNode | string;
     /**
@@ -66,34 +66,38 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
     addonAfter?: ReactNode | string;
     /**
      * Конфигурация маски
-     * @example { mask: '+7 (999) 999-99-99' }
+     * @example: {
+         mask: [
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+         ],
+        }
+     */
+    maskOptions?: MaskitoOptions;
+    /**
+     * Пользовательская иконка svg или название иконки
      */
-    maskProps?: any;
-    success?: boolean;
-    failed?: boolean;
-    [key: string]: any;
+    leadIcon?: React.ReactElement | string;
 }
 export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOutputProps {
-    style?: any;
-    errors?: string[];
-    placeholder?: string;
-    type?: string;
     inputProps: {
         type: string;
         name: string;
-        onChange: ChangeEventHandler<Element>;
+        onInput: (event: any, value?: string) => void;
         value: string | number;
         placeholder: string;
-        disabled: string;
+        disabled: boolean;
     };
-    textBefore?: number | ReactNode | string;
-    textAfter?: number | ReactNode | string;
-    addonBefore?: ReactNode | string;
-    addonAfter?: ReactNode | string;
-    maskProps?: any;
+    onClear?: () => void;
     onFocus?: (e: Event | React.FocusEvent) => void;
     onBlur?: (e: Event | React.FocusEvent) => void;
     onMouseDown?: (e: Event | React.MouseEvent) => void;
+    defaultValue?: string;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IInputFieldProps>;
 export default _default;