wini-web-components 2.3.3 → 2.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
import { ComponentStatus } from '../component-status';
|
|
3
3
|
import { WithTranslation } from 'react-i18next';
|
|
4
|
-
type ChangeFileFunction = (a?: File
|
|
4
|
+
type ChangeFileFunction = (a?: Array<File> | Array<{
|
|
5
|
+
[k: string]: any;
|
|
6
|
+
}>) => void;
|
|
5
7
|
interface ImportFileProps extends WithTranslation {
|
|
6
8
|
id?: string;
|
|
7
9
|
status?: ComponentStatus;
|
|
8
|
-
value?: File | {
|
|
10
|
+
value?: File | Array<File> | {
|
|
9
11
|
[k: string]: any;
|
|
10
|
-
}
|
|
12
|
+
} | Array<{
|
|
13
|
+
[k: string]: any;
|
|
14
|
+
}>;
|
|
11
15
|
buttonOnly?: boolean;
|
|
12
16
|
onChange?: ChangeFileFunction;
|
|
13
17
|
label?: string;
|
|
@@ -15,6 +19,7 @@ interface ImportFileProps extends WithTranslation {
|
|
|
15
19
|
style?: CSSProperties;
|
|
16
20
|
allowType?: Array<string>;
|
|
17
21
|
subTitle?: string;
|
|
22
|
+
multiple?: boolean;
|
|
18
23
|
/**
|
|
19
24
|
* maxSize unit: kb (kilobytes)
|
|
20
25
|
*/
|
|
@@ -58,6 +58,15 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
58
58
|
return result;
|
|
59
59
|
};
|
|
60
60
|
})();
|
|
61
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
62
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
63
|
+
if (ar || !(i in from)) {
|
|
64
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
65
|
+
ar[i] = from[i];
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
69
|
+
};
|
|
61
70
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
62
71
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
63
72
|
};
|
|
@@ -81,7 +90,7 @@ var TImportFile = /** @class */ (function (_super) {
|
|
|
81
90
|
var _this = _super.call(this, props) || this;
|
|
82
91
|
_this.fileRef = (0, react_1.createRef)();
|
|
83
92
|
_this.state = {
|
|
84
|
-
preview: _this.props.value
|
|
93
|
+
preview: Array.isArray(_this.props.value) ? _this.props.value : [_this.props.value]
|
|
85
94
|
};
|
|
86
95
|
return _this;
|
|
87
96
|
}
|
|
@@ -91,12 +100,12 @@ var TImportFile = /** @class */ (function (_super) {
|
|
|
91
100
|
};
|
|
92
101
|
TImportFile.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
93
102
|
if (prevProps.value !== this.props.value || prevProps.status !== this.props.status) {
|
|
94
|
-
this.setState(__assign(__assign({}, this.state), { status: this.props.status, preview: this.props.value }));
|
|
103
|
+
this.setState(__assign(__assign({}, this.state), { status: this.props.status, preview: Array.isArray(this.props.value) ? this.props.value : [this.props.value] }));
|
|
95
104
|
}
|
|
96
105
|
};
|
|
97
106
|
TImportFile.prototype.render = function () {
|
|
98
107
|
var _this = this;
|
|
99
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
108
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
100
109
|
var t = this.props.t;
|
|
101
110
|
var sizeTitle;
|
|
102
111
|
if (this.props.maxSize) {
|
|
@@ -106,42 +115,62 @@ var TImportFile = /** @class */ (function (_super) {
|
|
|
106
115
|
if (!_this.state.preview && !_this.props.buttonOnly)
|
|
107
116
|
_this.showFilePicker();
|
|
108
117
|
} },
|
|
109
|
-
react_1.default.createElement("input", { type: 'file', accept: ((_b = this.props.allowType) !== null && _b !== void 0 ? _b : []).join(','), ref: this.fileRef, onChange: function (ev) {
|
|
110
|
-
var
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
react_1.default.createElement("input", { type: 'file', multiple: this.props.multiple, accept: ((_b = this.props.allowType) !== null && _b !== void 0 ? _b : []).join(','), ref: this.fileRef, onChange: function (ev) {
|
|
119
|
+
var _a, _b, _c, _d;
|
|
120
|
+
var files;
|
|
121
|
+
if ((_a = ev.target.files) === null || _a === void 0 ? void 0 : _a.length) {
|
|
122
|
+
files = __spreadArray([], ev.target.files, true);
|
|
113
123
|
if (_this.props.maxSize) {
|
|
114
|
-
if (
|
|
115
|
-
index_1.ToastMessage.errors(t("limitFileError", { name:
|
|
116
|
-
|
|
124
|
+
if (files.some(function (f) { return (f.size > (_this.props.maxSize * 1024)); })) {
|
|
125
|
+
index_1.ToastMessage.errors(t("limitFileError", { name: (_b = files.find(function (f) { return (f.size > (_this.props.maxSize * 1024)); })) === null || _b === void 0 ? void 0 : _b.name, sizeTitle: sizeTitle }));
|
|
126
|
+
files = files.filter(function (f) { return (f.size <= (_this.props.maxSize * 1024)); });
|
|
117
127
|
}
|
|
118
128
|
}
|
|
119
129
|
}
|
|
120
|
-
if (
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
_this.
|
|
130
|
+
if (files) {
|
|
131
|
+
if (_this.props.multiple) {
|
|
132
|
+
var newValue = (_d = (_c = _this.state.preview) === null || _c === void 0 ? void 0 : _c.filter(function (e) { return files.every(function (f) { return e.name !== f.name && e.size !== f.size && e.lastModified !== f.lastModified; }); })) !== null && _d !== void 0 ? _d : [];
|
|
133
|
+
_this.setState(__assign(__assign({}, _this.state), { preview: __spreadArray(__spreadArray([], newValue, true), files, true) }));
|
|
134
|
+
if (_this.props.onChange)
|
|
135
|
+
_this.props.onChange(__spreadArray(__spreadArray([], newValue, true), files, true));
|
|
136
|
+
}
|
|
137
|
+
else {
|
|
138
|
+
_this.setState(__assign(__assign({}, _this.state), { preview: files }));
|
|
139
|
+
if (_this.props.onChange)
|
|
140
|
+
_this.props.onChange(files);
|
|
141
|
+
}
|
|
124
142
|
}
|
|
125
143
|
} }),
|
|
126
144
|
this.props.buttonOnly
|
|
127
145
|
? null
|
|
128
|
-
:
|
|
129
|
-
react_1.default.createElement("div", {
|
|
146
|
+
: this.props.multiple && ((_c = this.state.preview) === null || _c === void 0 ? void 0 : _c.length) ? react_1.default.createElement("div", { className: 'row', style: { flex: 1, flexWrap: "wrap", gap: "0.8rem" } }, this.state.preview.map(function (f) {
|
|
147
|
+
return react_1.default.createElement("div", { key: "".concat(f.name, "-").concat(f.size, "-").concat(f.lastModified), className: 'row', style: { gap: "0.8rem", padding: "0.4rem 0.8rem", borderRadius: 2, border: "var(--neutral-main-border)" } },
|
|
148
|
+
react_1.default.createElement(index_1.Winicon, { src: 'outline/multimedia/image', size: "1.4rem" }),
|
|
149
|
+
react_1.default.createElement(index_1.Text, { className: 'subtitle-4', style: { flex: 1, width: "100%" }, maxLine: 1 }, f.name),
|
|
150
|
+
react_1.default.createElement(index_1.Winicon, { src: 'fill/user interface/e-remove', size: "1.4rem", onClick: function () {
|
|
151
|
+
var _a;
|
|
152
|
+
var newValue = (_a = _this.state.preview) === null || _a === void 0 ? void 0 : _a.filter(function (e) { return e.name !== f.name && e.size !== f.size && e.lastModified !== f.lastModified; });
|
|
153
|
+
_this.setState(__assign(__assign({}, _this.state), { preview: newValue }));
|
|
154
|
+
if (_this.props.onChange)
|
|
155
|
+
_this.props.onChange(newValue);
|
|
156
|
+
} }));
|
|
157
|
+
})) : react_1.default.createElement(react_1.default.Fragment, null,
|
|
158
|
+
react_1.default.createElement("div", { className: "".concat(import_file_module_css_1.default['import-file-prefix'], " row") }, this.state.preview ? ((_d = this.state.preview[0].type) === null || _d === void 0 ? void 0 : _d.includes('image')) ? react_1.default.createElement("img", { src: this.state.preview[0] instanceof File ? URL.createObjectURL(this.state.preview[0]) : (_f = (_e = this.state.preview) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.url }) : fileSvg : cloudSvg),
|
|
130
159
|
react_1.default.createElement("div", { className: "".concat(import_file_module_css_1.default['file-preview-content'], " col") },
|
|
131
|
-
react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['title-file'], " heading-8"), style: { maxWidth: '100%' } }, (
|
|
132
|
-
react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['subtitle-file'], " subtitle-3"), style: { maxWidth: '100%' } }, ((
|
|
133
|
-
? "".concat((
|
|
134
|
-
: ((
|
|
135
|
-
this.state.preview && this.props.buttonOnly ? react_1.default.createElement("div", { className: 'row', style: { gap: "0.4rem" } },
|
|
136
|
-
react_1.default.createElement(index_1.Text, { className: 'button-text-6' }, (
|
|
160
|
+
react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['title-file'], " heading-8"), style: { maxWidth: '100%' } }, (_h = (_g = this.state.preview) === null || _g === void 0 ? void 0 : _g[0].name) !== null && _h !== void 0 ? _h : ((_j = this.props.label) !== null && _j !== void 0 ? _j : t("uploadFileAction"))),
|
|
161
|
+
react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['subtitle-file'], " subtitle-3"), style: { maxWidth: '100%' } }, ((_k = this.state.preview) === null || _k === void 0 ? void 0 : _k[0].size)
|
|
162
|
+
? "".concat((_l = this.state.preview) === null || _l === void 0 ? void 0 : _l[0].size, "KB")
|
|
163
|
+
: ((_m = this.props.subTitle) !== null && _m !== void 0 ? _m : (sizeTitle ? t("limitFileWarning", { sizeTitle: sizeTitle }) : ''))))),
|
|
164
|
+
this.state.preview && this.props.buttonOnly && !this.props.multiple ? react_1.default.createElement("div", { className: 'row', style: { gap: "0.4rem" } },
|
|
165
|
+
react_1.default.createElement(index_1.Text, { className: 'button-text-6' }, (_p = (_o = this.state.preview) === null || _o === void 0 ? void 0 : _o[0].name) !== null && _p !== void 0 ? _p : ''),
|
|
137
166
|
react_1.default.createElement("button", { type: 'button', className: "".concat(import_file_module_css_1.default['remove-preview-file']), onClick: function () {
|
|
138
|
-
_this.setState(__assign(__assign({}, _this.state), { preview:
|
|
167
|
+
_this.setState(__assign(__assign({}, _this.state), { preview: undefined }));
|
|
139
168
|
if (_this.props.onChange)
|
|
140
169
|
_this.props.onChange(undefined);
|
|
141
170
|
} }, closeSvg))
|
|
142
|
-
: react_1.default.createElement(index_1.Button, { label: this.state.preview ? "".concat(t("remove"), " ").concat(t("file").toLowerCase()) : "".concat(t("choose"), " ").concat(t("file").toLowerCase()), style: { padding: "1.2rem" }, className: 'button-text-4', onClick: function () {
|
|
143
|
-
if (_this.state.preview) {
|
|
144
|
-
_this.setState(__assign(__assign({}, _this.state), { preview:
|
|
171
|
+
: react_1.default.createElement(index_1.Button, { label: this.state.preview ? this.props.multiple ? "".concat(t("add"), " ").concat(t("file").toLowerCase()) : "".concat(t("remove"), " ").concat(t("file").toLowerCase()) : "".concat(t("choose"), " ").concat(t("file").toLowerCase()), style: { padding: "1.2rem" }, className: 'button-text-4', onClick: function () {
|
|
172
|
+
if (_this.state.preview && !_this.props.multiple) {
|
|
173
|
+
_this.setState(__assign(__assign({}, _this.state), { preview: undefined }));
|
|
145
174
|
if (_this.props.onChange)
|
|
146
175
|
_this.props.onChange(undefined);
|
|
147
176
|
}
|