@gravity-ui/dynamic-forms 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.4.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.3.0...v1.4.0) (2023-04-11)
+
+
+### Features
+
+* **FileInput:** added new input file input ([#24](https://github.com/gravity-ui/dynamic-forms/issues/24)) ([1553318](https://github.com/gravity-ui/dynamic-forms/commit/155331839e50ab4192b69ba32992e37b972378c4))
+
 ## [1.3.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.2.0...v1.3.0) (2023-03-31)
 
 

package/README.md

@@ -1,10 +1,6 @@
 # @gravity-ui/dynamic-forms · [![npm package](https://img.shields.io/npm/v/@gravity-ui/dynamic-forms)](https://www.npmjs.com/package/@gravity-ui/dynamic-forms) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/dynamic-forms/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/dynamic-forms/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/dynamic-forms/)
 
-This is a template for typical package.
-
-1. Create a new repository and use this repository as a template.
-2. Replace `dynamic-forms` through the whole repository with your name.
-3. Overwrite other things at your desire.
+The JSON Schema-based library for rendering forms and form values.
 
 ## Install
 
@@ -13,3 +9,36 @@ npm install --save-dev @gravity-ui/dynamic-forms
 ```
 
 ## Usage
+
+```jsx
+import {DynamicField, Spec, dynamicConfig} from '@gravity-ui/dynamic-forms';
+
+// To embed in a final-form
+<DynamicField name={name} spec={spec} config={config} />;
+
+import {DynamicView, dynamicViewConfig} from '@gravity-ui/dynamic-forms';
+
+// To get an overview of the values
+<DynamicView value={value} spec={spec} config={dynamicViewConfig} />;
+```
+
+### I18N
+
+Certain components include text tokens (words and phrases) that are available in two languages: `en` (the default) and `ru`. To set the language, use the `configure` function:
+
+```js
+// index.js
+
+import {configure, Lang} from '@gravity-ui/dynamic-forms';
+
+configure({lang: Lang.Ru});
+```
+
+## Development
+
+To start the development server with storybook execute the following command:
+
+```shell
+npm ci
+npm run dev
+```

package/build/cjs/lib/core/components/View/ViewController.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const hooks_1 = require("./hooks");
 const ViewController = ({ spec, name, }) => {
-    const { value, Link } = (0, hooks_1.useDynamicFormsCtx)();
-    const { viewEntity, Layout } = (0, hooks_1.useComponents)(spec);
+    const { config, value, Link } = (0, hooks_1.useDynamicFormsCtx)();
+    const { viewEntity, Layout } = (0, hooks_1.useComponents)(spec, config);
     const render = (0, hooks_1.useRender)({ name, value, spec, viewEntity, Layout, Link });
     return react_1.default.createElement(react_1.default.Fragment, null, render);
 };

package/build/cjs/lib/core/components/View/hooks/useComponents.js

@@ -7,10 +7,8 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_is_1 = require("react-is");
 const helpers_1 = require("../../../helpers");
 const helpers_2 = require("../helpers");
-const _1 = require("./");
-const useComponents = (spec) => {
+const useComponents = (spec, config) => {
     var _a, _b;
-    const { config } = (0, _1.useDynamicFormsCtx)();
     const { views, layouts } = react_1.default.useMemo(() => {
         if ((0, helpers_2.isCorrectViewConfig)(config) && (0, helpers_1.isCorrectSpec)(spec)) {
             return config[spec.type];

package/build/cjs/lib/kit/components/Inputs/FileInput/FileInput.css

@@ -0,0 +1,20 @@
+.df-file-input {
+  display: flex;
+}
+.df-file-input__input {
+  opacity: 0;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+}
+.df-file-input__file-name {
+  display: block;
+  margin: auto 10px;
+  max-width: 160px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--yc-color-text-secondary);
+}

package/build/cjs/lib/kit/components/Inputs/FileInput/FileInput.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const i18n_1 = tslib_1.__importDefault(require("../../../../kit/i18n"));
+const utils_1 = require("../../../utils");
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('file-input');
+const FileInput = ({ input, spec }) => {
+    var _a, _b;
+    const { value, onChange } = input;
+    const inputRef = react_1.default.useRef(null);
+    const [fileName, setFileName] = react_1.default.useState('');
+    const handleClick = react_1.default.useCallback(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const handleDownload = react_1.default.useCallback(async (file) => { var _a; return await (0, utils_2.readFile)(file, (_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.readAsMethod); }, [(_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.readAsMethod]);
+    const handleReset = react_1.default.useCallback(() => {
+        setFileName('');
+        onChange('');
+    }, [onChange]);
+    const handleInputChange = react_1.default.useCallback(async (event) => {
+        const file = event.target.files;
+        if (file && file.length > 0) {
+            setFileName(file[0].name);
+            const data = (await handleDownload(file[0]));
+            onChange(data);
+        }
+    }, [handleDownload, onChange]);
+    const fileNameContent = react_1.default.useMemo(() => {
+        if (value) {
+            if (fileName) {
+                return react_1.default.createElement(react_1.default.Fragment, null, fileName);
+            }
+            return (react_1.default.createElement(uikit_1.Label, { size: "m", theme: "info" }, (0, i18n_1.default)('label-data_loaded')));
+        }
+        return null;
+    }, [fileName, value]);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(uikit_1.Button, { disabled: spec.viewSpec.disabled, onClick: handleClick }, (0, i18n_1.default)('button-upload_file')),
+        react_1.default.createElement("input", { type: "file", ref: inputRef, autoComplete: "off", disabled: spec.viewSpec.disabled, onChange: handleInputChange, className: b('input'), tabIndex: -1, accept: (_b = spec.viewSpec.fileInput) === null || _b === void 0 ? void 0 : _b.accept }),
+        react_1.default.createElement("span", { className: b('file-name') }, fileNameContent),
+        value ? (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null));
+};
+exports.FileInput = FileInput;

package/build/cjs/lib/kit/components/Inputs/FileInput/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FileInput"), exports);

package/build/cjs/lib/kit/components/Inputs/FileInput/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readFile = void 0;
+function readFile(file, readAsMethod = 'readAsBinaryString') {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        if (typeof reader[readAsMethod] !== 'function') {
+            reject(new Error(`Unknown parameter: ${readAsMethod}`));
+            return;
+        }
+        reader.addEventListener('load', () => resolve(reader.result));
+        reader.addEventListener('error', () => reject(reader.error));
+        reader[readAsMethod](file);
+    });
+}
+exports.readFile = readFile;

package/build/cjs/lib/kit/components/Inputs/index.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrayBase"), exports);
 tslib_1.__exportStar(require("./CardOneOf"), exports);
 tslib_1.__exportStar(require("./Checkbox"), exports);
+tslib_1.__exportStar(require("./FileInput"), exports);
 tslib_1.__exportStar(require("./MultiSelect"), exports);
 tslib_1.__exportStar(require("./ObjectBase"), exports);
 tslib_1.__exportStar(require("./OneOf"), exports);

package/build/cjs/lib/kit/components/Views/FileInputView/FileInputView.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInputView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const i18n_1 = tslib_1.__importDefault(require("../../../../kit/i18n"));
+const components_1 = require("../../../components");
+const FileInputView = ({ value, spec }) => {
+    var _a;
+    return (react_1.default.createElement(components_1.LongValue, { value: ((_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.ignoreText) ? (0, i18n_1.default)('label-data_loaded') : value }));
+};
+exports.FileInputView = FileInputView;

package/build/cjs/lib/kit/components/Views/FileInputView/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FileInputView"), exports);

package/build/cjs/lib/kit/components/Views/index.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrayBaseView"), exports);
 tslib_1.__exportStar(require("./BaseView"), exports);
 tslib_1.__exportStar(require("./CardOneOfView"), exports);
+tslib_1.__exportStar(require("./FileInputView"), exports);
 tslib_1.__exportStar(require("./MonacoInputView"), exports);
 tslib_1.__exportStar(require("./MultiSelectView"), exports);
 tslib_1.__exportStar(require("./NumberWithScaleView"), exports);

package/build/cjs/lib/kit/constants/config.js

@@ -84,6 +84,7 @@ exports.dynamicConfig = {
             textarea: { Component: components_1.TextArea },
             select: { Component: components_1.Select },
             base: { Component: components_1.Text },
+            file_input: { Component: components_1.FileInput },
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInput },
             text_content: { Component: components_1.TextContent, independent: true },
@@ -177,6 +178,7 @@ exports.dynamicCardConfig = {
             textarea: { Component: components_1.TextArea },
             select: { Component: components_1.Select },
             base: { Component: components_1.Text },
+            file_input: { Component: components_1.FileInput },
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInputCard },
             text_content: { Component: components_1.TextContent, independent: true },
@@ -261,6 +263,7 @@ exports.dynamicViewConfig = {
             textarea: { Component: components_1.TextAreaView },
             select: { Component: components_1.BaseView },
             base: { Component: components_1.BaseView },
+            file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },
             text_content: undefined,
@@ -337,6 +340,7 @@ exports.dynamicViewCardConfig = {
             textarea: { Component: components_1.TextAreaView },
             select: { Component: components_1.BaseView },
             base: { Component: components_1.BaseView },
+            file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoViewCard },
             text_content: undefined,

package/build/cjs/lib/kit/i18n/en.json

@@ -42,5 +42,7 @@
   "label_error-zero-start": "Value must not start with a zero",
   "label_error-dot-end": "Value must not end with a dot",
   "label_delete": "Delete",
-  "button_cancel": "Close"
+  "button_cancel": "Close",
+  "button-upload_file": "Upload file",
+  "label-data_loaded": "Data uploaded"
 }

package/build/cjs/lib/kit/i18n/ru.json

@@ -42,5 +42,7 @@
   "label_error-zero-start": "Значение не должно начинаться с нуля",
   "label_error-dot-end": "Значение не должно заканчиваться точкой",
   "label_delete": "Удалить",
-  "button_cancel": "Закрыть"
+  "button_cancel": "Закрыть",
+  "button-upload_file": "Загрузить файл",
+  "label-data_loaded": "Данные загружены"
 }

package/build/cjs/lib/kit/utils/common.js

@@ -1,36 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCorrectSizeParams = exports.prepareSpec = exports.isNotEmptyValue = exports.getChildError = void 0;
+exports.isCorrectSizeParams = exports.prepareSpec = exports.isNotEmptyValue = void 0;
 const tslib_1 = require("tslib");
-const final_form_1 = require("final-form");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const core_1 = require("../../core");
 const helpers_1 = require("../validators/helpers");
 const bigIntMath_1 = require("./bigIntMath");
-const getChildError = (name, errors, head) => {
-    const error = lodash_1.default.get(errors, name);
-    if (!head && (error === null || error === void 0 ? void 0 : error[final_form_1.ARRAY_ERROR])) {
-        return true;
-    }
-    else if (lodash_1.default.isArray(error)) {
-        return error.some((itemError, idx) => {
-            if (lodash_1.default.isArray(itemError) || lodash_1.default.isObjectLike(itemError)) {
-                return (0, exports.getChildError)(`${name}[${idx}]`, errors);
-            }
-            return Boolean(itemError);
-        });
-    }
-    else if (lodash_1.default.isObjectLike(error)) {
-        return Object.keys(error).some((key) => {
-            if (lodash_1.default.isArray(error[key]) || lodash_1.default.isObjectLike(error[key])) {
-                return (0, exports.getChildError)(`${name}.${key}`, errors);
-            }
-            return Boolean(error[key]);
-        });
-    }
-    return false;
-};
-exports.getChildError = getChildError;
 const isNotEmptyValue = (value, spec) => {
     var _a;
     if (lodash_1.default.isNil(value)) {

package/build/cjs/lib/kit/validators/validators.js

@@ -37,7 +37,7 @@ const getBooleanValidator = (params = {}) => {
 };
 exports.getBooleanValidator = getBooleanValidator;
 const getNumberValidator = (params = {}) => {
-    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, } = params;
+    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, } = params;
     return (spec, value = '') => {
         const stringValue = String(value);
         if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
@@ -50,16 +50,17 @@ const getNumberValidator = (params = {}) => {
             if (!ignoreSpaceEndCheck && !stringValue[stringValue.length - 1].trim()) {
                 return validators_1.ErrorMessages.SPACE_END;
             }
-            if (stringValue[stringValue.length - 1] === '.') {
+            if (!ignoreDotEnd && stringValue[stringValue.length - 1] === '.') {
                 return validators_1.ErrorMessages.DOT_END;
             }
             if (!ignoreNumberCheck && !(0, helpers_1.isFloat)(stringValue)) {
                 return validators_1.ErrorMessages.NUMBER;
             }
-            if ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
-                (stringValue.length > 2 &&
-                    stringValue.substring(0, 2) === '-0' &&
-                    stringValue[2] !== '.')) {
+            if (!ignoreZeroStart &&
+                ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
+                    (stringValue.length > 2 &&
+                        stringValue.substring(0, 2) === '-0' &&
+                        stringValue[2] !== '.'))) {
                 return validators_1.ErrorMessages.ZERO_START;
             }
         }

package/build/esm/lib/core/components/View/ViewController.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useComponents, useDynamicFormsCtx, useRender } from './hooks';
 export const ViewController = ({ spec, name, }) => {
-    const { value, Link } = useDynamicFormsCtx();
-    const { viewEntity, Layout } = useComponents(spec);
+    const { config, value, Link } = useDynamicFormsCtx();
+    const { viewEntity, Layout } = useComponents(spec, config);
     const render = useRender({ name, value, spec, viewEntity, Layout, Link });
     return React.createElement(React.Fragment, null, render);
 };

package/build/esm/lib/core/components/View/hooks/useComponents.d.ts

@@ -1,6 +1,6 @@
 import { FormValue, Spec } from '../../../types';
-import { IndependentViewEntity, ViewEntity, ViewLayoutType } from '../types';
-export declare const useComponents: <Value extends FormValue, SpecType extends Spec>(spec: SpecType) => {
+import { DynamicViewConfig, IndependentViewEntity, ViewEntity, ViewLayoutType } from '../types';
+export declare const useComponents: <Value extends FormValue, SpecType extends Spec>(spec: SpecType, config: DynamicViewConfig) => {
     viewEntity: ViewEntity<Value, SpecType> | IndependentViewEntity<Value, SpecType> | undefined;
     Layout: ViewLayoutType<Value, SpecType> | undefined;
 };

package/build/esm/lib/core/components/View/hooks/useComponents.js

@@ -3,10 +3,8 @@ import _ from 'lodash';
 import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../../helpers';
 import { isCorrectViewConfig } from '../helpers';
-import { useDynamicFormsCtx } from './';
-export const useComponents = (spec) => {
+export const useComponents = (spec, config) => {
     var _a, _b;
-    const { config } = useDynamicFormsCtx();
     const { views, layouts } = React.useMemo(() => {
         if (isCorrectViewConfig(config) && isCorrectSpec(spec)) {
             return config[spec.type];

package/build/esm/lib/core/constants.d.ts

@@ -5,3 +5,4 @@ export declare enum SpecTypes {
     Object = "object",
     String = "string"
 }
+export type ReadAsMethod = 'readAsArrayBuffer' | 'readAsBinaryString' | 'readAsDataURL' | 'readAsText';

package/build/esm/lib/core/types/specs.d.ts

@@ -1,5 +1,5 @@
 import { LabelProps } from '@gravity-ui/uikit';
-import { SpecTypes } from '../constants';
+import { ReadAsMethod, SpecTypes } from '../constants';
 import { ArrayValue, ObjectValue } from './';
 export interface ArraySpec<LinkType = any> {
     defaultValue?: ArrayValue;
@@ -114,6 +114,11 @@ export interface StringSpec<LinkType = any> {
         hideValues?: string[];
         placeholder?: string;
         themeLabel?: LabelProps['theme'];
+        fileInput?: {
+            accept?: string;
+            readAsMethod?: ReadAsMethod;
+            ignoreText?: boolean;
+        };
     };
 }
 export type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;

package/build/esm/lib/kit/components/Inputs/FileInput/FileInput.css

@@ -0,0 +1,20 @@
+.df-file-input {
+  display: flex;
+}
+.df-file-input__input {
+  opacity: 0;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+}
+.df-file-input__file-name {
+  display: block;
+  margin: auto 10px;
+  max-width: 160px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--yc-color-text-secondary);
+}

package/build/esm/lib/kit/components/Inputs/FileInput/FileInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StringInputProps } from '../../../../core';
+import './FileInput.css';
+export declare const FileInput: React.FC<StringInputProps>;

package/build/esm/lib/kit/components/Inputs/FileInput/FileInput.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon, Label } from '@gravity-ui/uikit';
+import i18n from '../../../../kit/i18n';
+import { block } from '../../../utils';
+import { readFile } from './utils';
+import './FileInput.css';
+const b = block('file-input');
+export const FileInput = ({ input, spec }) => {
+    var _a, _b;
+    const { value, onChange } = input;
+    const inputRef = React.useRef(null);
+    const [fileName, setFileName] = React.useState('');
+    const handleClick = React.useCallback(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const handleDownload = React.useCallback(async (file) => { var _a; return await readFile(file, (_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.readAsMethod); }, [(_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.readAsMethod]);
+    const handleReset = React.useCallback(() => {
+        setFileName('');
+        onChange('');
+    }, [onChange]);
+    const handleInputChange = React.useCallback(async (event) => {
+        const file = event.target.files;
+        if (file && file.length > 0) {
+            setFileName(file[0].name);
+            const data = (await handleDownload(file[0]));
+            onChange(data);
+        }
+    }, [handleDownload, onChange]);
+    const fileNameContent = React.useMemo(() => {
+        if (value) {
+            if (fileName) {
+                return React.createElement(React.Fragment, null, fileName);
+            }
+            return (React.createElement(Label, { size: "m", theme: "info" }, i18n('label-data_loaded')));
+        }
+        return null;
+    }, [fileName, value]);
+    return (React.createElement("div", { className: b() },
+        React.createElement(Button, { disabled: spec.viewSpec.disabled, onClick: handleClick }, i18n('button-upload_file')),
+        React.createElement("input", { type: "file", ref: inputRef, autoComplete: "off", disabled: spec.viewSpec.disabled, onChange: handleInputChange, className: b('input'), tabIndex: -1, accept: (_b = spec.viewSpec.fileInput) === null || _b === void 0 ? void 0 : _b.accept }),
+        React.createElement("span", { className: b('file-name') }, fileNameContent),
+        value ? (React.createElement(Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled },
+            React.createElement(Icon, { data: Xmark, size: 16 }))) : null));
+};

package/build/esm/lib/kit/components/Inputs/FileInput/index.d.ts

@@ -0,0 +1 @@
+export * from './FileInput';

package/build/esm/lib/kit/components/Inputs/FileInput/index.js

@@ -0,0 +1 @@
+export * from './FileInput';

package/build/esm/lib/kit/components/Inputs/FileInput/utils.d.ts

@@ -0,0 +1,2 @@
+import { ReadAsMethod } from '../../../../core';
+export declare function readFile(file: Blob, readAsMethod?: ReadAsMethod): Promise<string | ArrayBuffer | null>;

package/build/esm/lib/kit/components/Inputs/FileInput/utils.js

@@ -0,0 +1,12 @@
+export function readFile(file, readAsMethod = 'readAsBinaryString') {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        if (typeof reader[readAsMethod] !== 'function') {
+            reject(new Error(`Unknown parameter: ${readAsMethod}`));
+            return;
+        }
+        reader.addEventListener('load', () => resolve(reader.result));
+        reader.addEventListener('error', () => reject(reader.error));
+        reader[readAsMethod](file);
+    });
+}

package/build/esm/lib/kit/components/Inputs/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
+export * from './FileInput';
 export * from './MultiSelect';
 export * from './ObjectBase';
 export * from './OneOf';

package/build/esm/lib/kit/components/Inputs/index.js

@@ -1,6 +1,7 @@
 export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
+export * from './FileInput';
 export * from './MultiSelect';
 export * from './ObjectBase';
 export * from './OneOf';

package/build/esm/lib/kit/components/Views/FileInputView/FileInputView.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { StringViewProps } from '../../../../core';
+export declare const FileInputView: React.FC<StringViewProps>;

package/build/esm/lib/kit/components/Views/FileInputView/FileInputView.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import i18n from '../../../../kit/i18n';
+import { LongValue } from '../../../components';
+export const FileInputView = ({ value, spec }) => {
+    var _a;
+    return (React.createElement(LongValue, { value: ((_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.ignoreText) ? i18n('label-data_loaded') : value }));
+};

package/build/esm/lib/kit/components/Views/FileInputView/index.d.ts

@@ -0,0 +1 @@
+export * from './FileInputView';

package/build/esm/lib/kit/components/Views/FileInputView/index.js

@@ -0,0 +1 @@
+export * from './FileInputView';

package/build/esm/lib/kit/components/Views/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ArrayBaseView';
 export * from './BaseView';
 export * from './CardOneOfView';
+export * from './FileInputView';
 export * from './MonacoInputView';
 export * from './MultiSelectView';
 export * from './NumberWithScaleView';

package/build/esm/lib/kit/components/Views/index.js

@@ -1,6 +1,7 @@
 export * from './ArrayBaseView';
 export * from './BaseView';
 export * from './CardOneOfView';
+export * from './FileInputView';
 export * from './MonacoInputView';
 export * from './MultiSelectView';
 export * from './NumberWithScaleView';

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, OneOf, OneOfCard, OneOfCardView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardLayout, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoInputCard, MonacoView, MonacoViewCard, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, OneOf, OneOfCard, OneOfCardView, OneOfView, Row, Row2, RowVerbose, Secret, Section, Section2, SectionCard, SectionCard2, SectionWithSubtitle, SectionWithSubtitle2, Select, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewRow2, ViewSection, ViewSection2, ViewSectionCard, ViewSectionCard2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -81,6 +81,7 @@ export const dynamicConfig = {
             textarea: { Component: TextArea },
             select: { Component: Select },
             base: { Component: Text },
+            file_input: { Component: FileInput },
             number_with_scale: { Component: NumberWithScale },
             monaco_input: { Component: MonacoInput },
             text_content: { Component: TextContent, independent: true },
@@ -174,6 +175,7 @@ export const dynamicCardConfig = {
             textarea: { Component: TextArea },
             select: { Component: Select },
             base: { Component: Text },
+            file_input: { Component: FileInput },
             number_with_scale: { Component: NumberWithScale },
             monaco_input: { Component: MonacoInputCard },
             text_content: { Component: TextContent, independent: true },
@@ -258,6 +260,7 @@ export const dynamicViewConfig = {
             textarea: { Component: TextAreaView },
             select: { Component: BaseView },
             base: { Component: BaseView },
+            file_input: { Component: FileInputView },
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoView },
             text_content: undefined,
@@ -334,6 +337,7 @@ export const dynamicViewCardConfig = {
             textarea: { Component: TextAreaView },
             select: { Component: BaseView },
             base: { Component: BaseView },
+            file_input: { Component: FileInputView },
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoViewCard },
             text_content: undefined,

package/build/esm/lib/kit/i18n/en.json

@@ -42,5 +42,7 @@
   "label_error-zero-start": "Value must not start with a zero",
   "label_error-dot-end": "Value must not end with a dot",
   "label_delete": "Delete",
-  "button_cancel": "Close"
+  "button_cancel": "Close",
+  "button-upload_file": "Upload file",
+  "label-data_loaded": "Data uploaded"
 }

package/build/esm/lib/kit/i18n/ru.json

@@ -42,5 +42,7 @@
   "label_error-zero-start": "Значение не должно начинаться с нуля",
   "label_error-dot-end": "Значение не должно заканчиваться точкой",
   "label_delete": "Удалить",
-  "button_cancel": "Закрыть"
+  "button_cancel": "Закрыть",
+  "button-upload_file": "Загрузить файл",
+  "label-data_loaded": "Данные загружены"
 }

package/build/esm/lib/kit/utils/common.d.ts

@@ -1,6 +1,4 @@
-import { ValidationErrors } from 'final-form';
 import { FormValue, Spec, StringSpec } from '../../core';
-export declare const getChildError: (name: string, errors?: ValidationErrors, head?: boolean) => boolean;
 export declare const isNotEmptyValue: (value: FormValue | undefined, spec: Spec | undefined) => boolean;
 export declare const prepareSpec: <Type extends Spec>(spec: Type, parseJsonDefaultValue?: boolean) => Type;
 export declare const isCorrectSizeParams: (spec: StringSpec) => boolean;

package/build/esm/lib/kit/utils/common.js

@@ -1,31 +1,7 @@
-import { ARRAY_ERROR } from 'final-form';
 import _ from 'lodash';
 import { isArraySpec, isObjectSpec, isStringSpec, } from '../../core';
 import { isFloat } from '../validators/helpers';
 import { divide } from './bigIntMath';
-export const getChildError = (name, errors, head) => {
-    const error = _.get(errors, name);
-    if (!head && (error === null || error === void 0 ? void 0 : error[ARRAY_ERROR])) {
-        return true;
-    }
-    else if (_.isArray(error)) {
-        return error.some((itemError, idx) => {
-            if (_.isArray(itemError) || _.isObjectLike(itemError)) {
-                return getChildError(`${name}[${idx}]`, errors);
-            }
-            return Boolean(itemError);
-        });
-    }
-    else if (_.isObjectLike(error)) {
-        return Object.keys(error).some((key) => {
-            if (_.isArray(error[key]) || _.isObjectLike(error[key])) {
-                return getChildError(`${name}.${key}`, errors);
-            }
-            return Boolean(error[key]);
-        });
-    }
-    return false;
-};
 export const isNotEmptyValue = (value, spec) => {
     var _a;
     if (_.isNil(value)) {

package/build/esm/lib/kit/validators/validators.d.ts

@@ -17,6 +17,8 @@ export interface GetNumberValidatorParams {
     ignoreMaximumCheck?: boolean;
     ignoreMinimumCheck?: boolean;
     ignoreIntCheck?: boolean;
+    ignoreDotEnd?: boolean;
+    ignoreZeroStart?: boolean;
 }
 export declare const getNumberValidator: (params?: GetNumberValidatorParams) => (spec: NumberSpec, value?: string | number) => string | false;
 export interface GetObjectValidatorParams {

package/build/esm/lib/kit/validators/validators.js

@@ -31,7 +31,7 @@ export const getBooleanValidator = (params = {}) => {
     };
 };
 export const getNumberValidator = (params = {}) => {
-    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, } = params;
+    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, } = params;
     return (spec, value = '') => {
         const stringValue = String(value);
         if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
@@ -44,16 +44,17 @@ export const getNumberValidator = (params = {}) => {
             if (!ignoreSpaceEndCheck && !stringValue[stringValue.length - 1].trim()) {
                 return ErrorMessages.SPACE_END;
             }
-            if (stringValue[stringValue.length - 1] === '.') {
+            if (!ignoreDotEnd && stringValue[stringValue.length - 1] === '.') {
                 return ErrorMessages.DOT_END;
             }
             if (!ignoreNumberCheck && !isFloat(stringValue)) {
                 return ErrorMessages.NUMBER;
             }
-            if ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
-                (stringValue.length > 2 &&
-                    stringValue.substring(0, 2) === '-0' &&
-                    stringValue[2] !== '.')) {
+            if (!ignoreZeroStart &&
+                ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
+                    (stringValue.length > 2 &&
+                        stringValue.substring(0, 2) === '-0' &&
+                        stringValue[2] !== '.'))) {
                 return ErrorMessages.ZERO_START;
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",