@steroidsjs/core 3.0.0-beta.23 → 3.0.0-beta.24

package/index.d.ts

@@ -74,6 +74,12 @@ declare type CustomStyle = React.CSSProperties;
  */
 declare type CustomView = React.ReactNode | React.FunctionComponent;
 
+/**
+ * Кастомная иконка
+ * @example custom-icon
+ */
+declare type CustomIcon = string | React.ReactElement;
+
 /**
  * HTTP метод
  */

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.23",
+ "version": "3.0.0-beta.24",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

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

@@ -1,27 +1,66 @@
-import * as React from 'react';
 import { IFileHocInput, IFileHocOutput } from '../../../hoc/file';
 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 IFileHocInput, IFileHocOutput {
     /**
      * Показать значок удаление файла
      * @example true
      */
     showRemove?: boolean;
-    buttonComponent?: React.ReactNode;
-    buttonProps?: any;
+    /**
+     * Кастомная иконка для удаление файла
+     * @example true
+     */
+    customRemoveIcon?: string;
+    /**
+     * Вариант отображения файлов
+     * @example 'list'
+     */
+    filesLayout?: FilesLayout;
+}
+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

@@ -37,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"));
@@ -44,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 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(),
@@ -84,7 +86,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 +101,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

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

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

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

@@ -1,37 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = 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];
-}));
-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' }))); });