@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.6

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

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { IFileHocInput, IFileHocOutput } from '../../../hoc/file';
+import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
+export interface IFileFieldProps extends IFieldWrapperInputProps, IFileHocInput, IFileHocOutput {
+    /**
+     * Показать значок удаление файла
+     * @example true
+     */
+    showRemove?: boolean;
+    buttonComponent?: React.ReactNode;
+    buttonProps?: any;
+    className?: CssClassName;
+    view?: CustomView;
+    itemView?: CustomView;
+    itemProps?: any;
+    [key: string]: any;
+}
+export interface IFileFieldItemViewProps extends IFileHocInput, IFileHocOutput {
+    /**
+     * Уникальный текстовый идентификатор
+     * @example e65f5867-0083-48a7-af43-1121ed9e6280
+     */
+    uid?: string;
+    imagesOnly?: boolean;
+    /**
+     * ID файла
+     * @example 34
+     */
+    fileId?: number | string;
+    /**
+     * Исходное название файла
+     * @example original-name
+     */
+    title?: string;
+    disabled?: boolean;
+    showRemove?: boolean;
+    /**
+     * Обработчик события удаления файла
+     * @param e
+     */
+    onRemove?: () => void;
+    error?: string;
+    image?: {
+        /**
+         * Url файла
+         * @example assets/file.txt
+         */
+        url: string;
+        /**
+         * Ширина
+         * @example 1280
+         */
+        width: string;
+        /**
+         * Высота
+         * @example 720
+         */
+        height: string;
+    };
+    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>;
+export default _default;

package/ui/form/FileField/FileField.js

@@ -0,0 +1,109 @@
+"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 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 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) {
+            var data = file.getResultHttpMessage() || {};
+            var item = {
+                uid: file.getUid(),
+                fileId: data.id || null,
+                title: file.getName(),
+                size: data.size || data.fileSize,
+                disabled: props.disabled,
+                showRemove: props.showRemove,
+                onRemove: function () { return onRemove(file); },
+                error: null,
+                image: null,
+                progress: null,
+                item: data
+            };
+            // 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());
+                    item.error = errorResponse.error || errorResponse.message || __('Ошибка');
+                }
+                else {
+                    item.error = file.getResultHttpMessage()
+                        ? JSON.stringify(file.getResultHttpMessage())
+                        : __('Ошибка');
+                }
+            }
+            // Add thumbnail image
+            if (data.images) {
+                // Image object has properties: url, width, height
+                item.image = data.images[props.imagesProcessor]
+                    || first_1["default"](values_1["default"](data.images));
+            }
+            // Add progress
+            if (file.getStatus() === File_1["default"].STATUS_PROCESS) {
+                item.progress = {
+                    bytesUploaded: file.getBytesUploaded(),
+                    percent: file.progress.getPercent()
+                };
+            }
+            return item;
+        }) })));
+}
+FileField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    showRemove: true,
+    buttonProps: {
+        color: 'secondary',
+        outline: true
+    },
+    multiple: false
+};
+exports["default"] = fieldWrapper_1["default"]('FileField', FileField);

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример использования FileField.
+ * @order 1
+ * @col 6
+ */
+export default _default;

package/ui/form/FileField/demo/basic.js

@@ -0,0 +1,33 @@
+"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 FileField_1 = __importDefault(require("../FileField"));
+/**
+ * Обычный пример использования FileField.
+ * @order 1
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
+    React.createElement(FileField_1["default"], { backendUrl: '/api/v1/file-test' }))); });

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

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

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

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

@@ -0,0 +1,6 @@
+export default class AutoSaveHelper {
+    static STORAGE_KEY_PREFIX: string;
+    static restore(clientStorage: any, formId: any, initialValues: any): any;
+    static save(clientStorage: any, formId: any, values: any): void;
+    static remove(clientStorage: any, formId: any): void;
+}

package/ui/form/Form/AutoSaveHelper.js

@@ -0,0 +1,37 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var isString_1 = __importDefault(require("lodash-es/isString"));
+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) === '{') {
+            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));
+    };
+    AutoSaveHelper.remove = function (clientStorage, formId) {
+        clientStorage.remove(AutoSaveHelper.STORAGE_KEY_PREFIX + "_" + formId);
+    };
+    AutoSaveHelper.STORAGE_KEY_PREFIX = 'Form';
+    return AutoSaveHelper;
+}());
+exports["default"] = AutoSaveHelper;

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

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import { IAddressBarConfig } from '../../../hooks/useAddressBar';
+import { IApiMethod } from '../../../components/ApiComponent';
+import { IFieldProps } from '../Field/Field';
+/**
+ * Form
+ * Компонент для создания формы
+ */
+export interface IFormProps {
+    /**
+     * Идентификатор формы
+     * @example BookingForm
+     */
+    formId?: string;
+    prefix?: string;
+    /**
+     * Модель с полями формы
+     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     */
+    model?: string | ((...args: any[]) => any) | any;
+    /**
+     * Url на который будет отправлена форма
+     * @example api/v1/handle-form
+     */
+    action?: string | IApiMethod;
+    /**
+     * Тип HTTP запроса (GET | POST | PUT | DELETE)
+     * @example POST
+     */
+    actionMethod?: string;
+    /**
+     * Текст ошибки при неудачной отправке данных. По-умолчанию: "Ошибка сервера"
+     * @example Упс, что-то пошло не так
+     */
+    submitErrorMessage?: string;
+    /**
+     * Шаблон для полей в форме
+     * @example horizontal
+     */
+    layout?: FormLayout;
+    /**
+     * Обработчик события отправки формы
+     * @param args
+     */
+    onSubmit?: (...args: any[]) => any;
+    /**
+     * Набор с правилами для проверки соответствия значений полей формы определенному формату.
+     * Проверка запускается в момент отправки формы (в обработчике onSubmit).
+     * @example [['name', 'required'], ['age', 'integer']]
+     */
+    validators?: any[];
+    /**
+     * Обработчик события перед отправкой формы
+     * @param args
+     */
+    onBeforeSubmit?: (...args: any[]) => any;
+    /**
+     * Обработчик события после отправки формы
+     * @param args
+     */
+    onAfterSubmit?: (...args: any[]) => any;
+    /**
+     * Обработчик события при каком-либо изменении в форме
+     * @param args
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * Обработчик успешного выполнения формы (без ошибок)
+     * @param args
+     */
+    onComplete?: (...args: any[]) => any;
+    /**
+     * Автоматически стартовать 2fa аутентификацию (отправлять код)
+     */
+    autoStartTwoFactor?: boolean;
+    /**
+     * Обработчик, который вызывается при запросе 2FA
+     */
+    onTwoFactor?: (providerName: string, info?: any) => Promise<any> | any | void;
+    /**
+     * Сохраняет значения полей формы в LocalStorage
+     * @example true
+     */
+    autoSave?: boolean;
+    /**
+     * Начальные значения формы
+     */
+    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'}]
+     */
+    fields?: (string | IFieldProps)[];
+    /**
+     * Использовать для данных глобальное хранилище (redux)
+     * @example true
+     */
+    useRedux?: boolean;
+    /**
+     * Надпись на кнопке отправки формы
+     * @example Submit
+     */
+    submitLabel?: string;
+    /**
+     * Синхронизация значений формы с адресной строкой
+     * @example true
+     */
+    addressBar?: boolean | IAddressBarConfig;
+    /**
+     * Если в форме есть элементы \<input\>, то произойдет автоматическая фокусировка на первом из них
+     * @example true
+     */
+    autoFocus?: boolean;
+    /**
+     * Название действия, которое передаётся в API Google reCAPTCHA v3, для более детального анализа
+     * поведения пользователя (https://developers.google.com/recaptcha/docs/v3)
+     * @example 'addComment'
+     */
+    captchaActionName?: string;
+    /**
+     * Включает рамки и тень.
+     * @example true
+     */
+    isBordered?: boolean;
+    /**
+     * Очищать ли данные формы с redux хранилища при размонтировании компонента. По-умолчанию - false
+     * @example false
+     */
+    autoDestroy?: boolean;
+    [key: string]: any;
+}
+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;
+    };
+    children?: React.ReactNode;
+}
+export interface IFormReducerState {
+    values: any;
+    initialValues: any;
+    errors: any;
+    isInvalid: boolean;
+    isSubmitting: boolean;
+}
+export interface IFormContext {
+    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>;
+declare function Form(props: IFormProps): JSX.Element;
+declare namespace Form {
+    var defaultProps: {
+        actionMethod: string;
+        autoStartTwoFactor: boolean;
+        layout: string;
+        captchaActionName: string;
+    };
+}
+export default Form;