wini-web-components 2.3.2 → 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.
Files changed (7) hide show
  1. package/dist/component/dialog/dialog.d.ts +2 -21
  2. package/dist/component/dialog/dialog.js +55 -16
  3. package/dist/component/import-file/import-file.d.ts +8 -3
  4. package/dist/component/import-file/import-file.js +55 -26
  5. package/dist/index.js +1 -1
  6. package/dist/language/i18n.js +2 -0
  7. package/package.json +1 -1
package/dist/component/dialog/dialog.d.ts CHANGED
@@ -1,23 +1,12 @@
1
1
  import React from 'react';
2
2
  import { ComponentStatus } from '../../index';
3
- import { WithTranslation } from 'react-i18next';
4
3
  export declare enum DialogAlignment {
5
4
  start = "start",
6
5
  center = "center",
7
6
  end = "end"
8
7
  }
9
- interface DialogState {
10
- readonly open?: boolean;
11
- title: string;
12
- status: ComponentStatus;
13
- content: string;
14
- onSubmit: Function;
15
- submitTitle?: string;
16
- cancelTitle?: string;
17
- alignment?: DialogAlignment;
18
- }
19
- export declare const showDialog: ({ ref, title, status, content, onSubmit, submitTitle, cancelTitle, alignment }: {
20
- ref: React.MutableRefObject<TDialog>;
8
+ export declare const Dialog: () => React.JSX.Element;
9
+ export declare const showDialog: (props: {
21
10
  title?: string;
22
11
  status?: ComponentStatus;
23
12
  content?: string;
@@ -26,11 +15,3 @@ export declare const showDialog: ({ ref, title, status, content, onSubmit, submi
26
15
  cancelTitle?: string;
27
16
  alignment?: DialogAlignment;
28
17
  }) => void;
29
- declare class TDialog extends React.Component<WithTranslation, DialogState> {
30
- constructor(props: WithTranslation);
31
- showDialogNoti(data: DialogState): void;
32
- closeDialog(): void;
33
- render(): React.JSX.Element;
34
- }
35
- export declare const Dialog: React.ComponentType<Omit<import("react-i18next/helpers").$Subtract<WithTranslation<undefined, undefined>, import("react-i18next").WithTranslationProps>, keyof WithTranslation<Ns, undefined>> & import("react-i18next").WithTranslationProps>;
36
- export {};
package/dist/component/dialog/dialog.js CHANGED
@@ -25,12 +25,45 @@ var __assign = (this && this.__assign) || function () {
25
25
  };
26
26
  return __assign.apply(this, arguments);
27
27
  };
28
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
29
+ if (k2 === undefined) k2 = k;
30
+ var desc = Object.getOwnPropertyDescriptor(m, k);
31
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
32
+ desc = { enumerable: true, get: function() { return m[k]; } };
33
+ }
34
+ Object.defineProperty(o, k2, desc);
35
+ }) : (function(o, m, k, k2) {
36
+ if (k2 === undefined) k2 = k;
37
+ o[k2] = m[k];
38
+ }));
39
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
40
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
41
+ }) : function(o, v) {
42
+ o["default"] = v;
43
+ });
44
+ var __importStar = (this && this.__importStar) || (function () {
45
+ var ownKeys = function(o) {
46
+ ownKeys = Object.getOwnPropertyNames || function (o) {
47
+ var ar = [];
48
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
49
+ return ar;
50
+ };
51
+ return ownKeys(o);
52
+ };
53
+ return function (mod) {
54
+ if (mod && mod.__esModule) return mod;
55
+ var result = {};
56
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
57
+ __setModuleDefault(result, mod);
58
+ return result;
59
+ };
60
+ })();
28
61
  var __importDefault = (this && this.__importDefault) || function (mod) {
29
62
  return (mod && mod.__esModule) ? mod : { "default": mod };
30
63
  };
31
64
  Object.defineProperty(exports, "__esModule", { value: true });
32
- exports.Dialog = exports.showDialog = exports.DialogAlignment = void 0;
33
- var react_1 = __importDefault(require("react"));
65
+ exports.showDialog = exports.Dialog = exports.DialogAlignment = void 0;
66
+ var react_1 = __importStar(require("react"));
34
67
  var react_dom_1 = __importDefault(require("react-dom"));
35
68
  var dialog_module_css_1 = __importDefault(require("./dialog.module.css"));
36
69
  var index_1 = require("../../index");
@@ -41,19 +74,6 @@ var DialogAlignment;
41
74
  DialogAlignment["center"] = "center";
42
75
  DialogAlignment["end"] = "end";
43
76
  })(DialogAlignment || (exports.DialogAlignment = DialogAlignment = {}));
44
- var showDialog = function (_a) {
45
- var ref = _a.ref, title = _a.title, status = _a.status, content = _a.content, onSubmit = _a.onSubmit, submitTitle = _a.submitTitle, cancelTitle = _a.cancelTitle, alignment = _a.alignment;
46
- ref.current.showDialogNoti({
47
- title: title !== null && title !== void 0 ? title : '',
48
- status: status !== null && status !== void 0 ? status : index_1.ComponentStatus.INFOR,
49
- content: content !== null && content !== void 0 ? content : '',
50
- onSubmit: onSubmit !== null && onSubmit !== void 0 ? onSubmit : (function () { }),
51
- submitTitle: submitTitle,
52
- cancelTitle: cancelTitle,
53
- alignment: alignment
54
- });
55
- };
56
- exports.showDialog = showDialog;
57
77
  var TDialog = /** @class */ (function (_super) {
58
78
  __extends(TDialog, _super);
59
79
  function TDialog(props) {
@@ -96,4 +116,23 @@ var TDialog = /** @class */ (function (_super) {
96
116
  };
97
117
  return TDialog;
98
118
  }(react_1.default.Component));
99
- exports.Dialog = (0, react_i18next_1.withTranslation)()(TDialog);
119
+ var dialogRef = (0, react_1.createRef)();
120
+ var Dialog = function () {
121
+ var _a = (0, react_i18next_1.useTranslation)(), t = _a.t, i18n = _a.i18n;
122
+ return react_1.default.createElement(TDialog, { ref: dialogRef, t: t, i18n: i18n, tReady: true });
123
+ };
124
+ exports.Dialog = Dialog;
125
+ var showDialog = function (props) {
126
+ var _a, _b, _c, _d;
127
+ if (dialogRef.current)
128
+ dialogRef.current.showDialogNoti({
129
+ title: (_a = props.title) !== null && _a !== void 0 ? _a : '',
130
+ status: (_b = props.status) !== null && _b !== void 0 ? _b : index_1.ComponentStatus.INFOR,
131
+ content: (_c = props.content) !== null && _c !== void 0 ? _c : '',
132
+ onSubmit: (_d = props.onSubmit) !== null && _d !== void 0 ? _d : (function () { }),
133
+ submitTitle: props.submitTitle,
134
+ cancelTitle: props.cancelTitle,
135
+ alignment: props.alignment
136
+ });
137
+ };
138
+ exports.showDialog = showDialog;
package/dist/component/import-file/import-file.d.ts CHANGED
@@ -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) => void;
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
  */
package/dist/component/import-file/import-file.js CHANGED
@@ -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 file;
111
- if (ev.target.files && ev.target.files[0]) {
112
- file = ev.target.files[0];
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 (file.size > (_this.props.maxSize * 1024)) {
115
- index_1.ToastMessage.errors(t("limitFileError", { name: file.name, sizeTitle: sizeTitle }));
116
- file = undefined;
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 (file) {
121
- _this.setState(__assign(__assign({}, _this.state), { preview: file }));
122
- if (_this.props.onChange)
123
- _this.props.onChange(file);
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
- : react_1.default.createElement(react_1.default.Fragment, null,
129
- react_1.default.createElement("div", { className: "".concat(import_file_module_css_1.default['import-file-prefix'], " row") }, this.state.preview ? ((_c = this.state.preview.type) === null || _c === void 0 ? void 0 : _c.includes('image')) ? react_1.default.createElement("img", { src: this.state.preview instanceof File ? URL.createObjectURL(this.state.preview) : this.state.preview.url }) : fileSvg : cloudSvg),
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%' } }, (_e = (_d = this.state.preview) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : ((_f = this.props.label) !== null && _f !== void 0 ? _f : t("uploadFileAction"))),
132
- react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['subtitle-file'], " subtitle-3"), style: { maxWidth: '100%' } }, ((_g = this.state.preview) === null || _g === void 0 ? void 0 : _g.size)
133
- ? "".concat((_h = this.state.preview) === null || _h === void 0 ? void 0 : _h.size, "KB")
134
- : ((_j = this.props.subTitle) !== null && _j !== void 0 ? _j : (sizeTitle ? t("limitFileWarning", { sizeTitle: sizeTitle }) : ''))))),
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' }, (_l = (_k = this.state.preview) === null || _k === void 0 ? void 0 : _k.name) !== null && _l !== void 0 ? _l : ''),
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: null }));
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: null }));
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
  }