wini-web-components 2.3.8 → 2.4.0
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.
- package/README.md +3 -0
- package/dist/component/ck-editor/ckeditor.d.ts +36 -0
- package/dist/component/ck-editor/ckeditor.js +403 -0
- package/dist/component/import-file/import-file.d.ts +3 -0
- package/dist/component/import-file/import-file.js +13 -12
- package/dist/component/text-field/text-field.js +2 -2
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/index.js.LICENSE.txt +28 -0
- package/package.json +10 -6
package/README.md
CHANGED
|
@@ -14,5 +14,8 @@ add this cdn link into your App.css file. \
|
|
|
14
14
|
@import url(https://cdn.jsdelivr.net/gh/WiniGit/web-component@latest/src/skin/typography.css); \
|
|
15
15
|
@import url(https://cdn.jsdelivr.net/gh/WiniGit/web-component@latest/src/skin/layout.css);
|
|
16
16
|
|
|
17
|
+
add this import css into your App.js \
|
|
18
|
+
import 'ckeditor5/ckeditor5.css';
|
|
19
|
+
|
|
17
20
|
|
|
18
21
|
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import { ClassicEditor, EventInfo } from 'ckeditor5';
|
|
3
|
+
import './ck-editor.css';
|
|
4
|
+
/**
|
|
5
|
+
* Please update the following values with your tokens.
|
|
6
|
+
* Instructions on how to obtain them: https://ckeditor.com/docs/trial/latest/guides/real-time/quick-start.html
|
|
7
|
+
*/
|
|
8
|
+
interface Props {
|
|
9
|
+
style?: CSSProperties;
|
|
10
|
+
className?: string;
|
|
11
|
+
value?: string;
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
menuBar?: boolean;
|
|
15
|
+
onChange?: (event: EventInfo, editor: ClassicEditor) => void;
|
|
16
|
+
onFocus?: (event: EventInfo, editor: ClassicEditor) => void;
|
|
17
|
+
onBlur?: (event: EventInfo, editor: ClassicEditor) => void;
|
|
18
|
+
onError?: (error: Error, details: any) => void;
|
|
19
|
+
onReady?: (editor: ClassicEditor) => void;
|
|
20
|
+
onAfterDestroy?: (editor: ClassicEditor) => void;
|
|
21
|
+
extraPlugins?: Array<any>;
|
|
22
|
+
fontFamily?: Array<string>;
|
|
23
|
+
fontSize?: Array<number | "default">;
|
|
24
|
+
fontColors?: Array<{
|
|
25
|
+
color: string;
|
|
26
|
+
label: string;
|
|
27
|
+
}>;
|
|
28
|
+
fontBgColors?: Array<{
|
|
29
|
+
color: string;
|
|
30
|
+
label: string;
|
|
31
|
+
}>;
|
|
32
|
+
helperText?: string;
|
|
33
|
+
helperTextColor?: string;
|
|
34
|
+
}
|
|
35
|
+
export declare function CustomCkEditor5(props: Props): React.JSX.Element;
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,403 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.CustomCkEditor5 = CustomCkEditor5;
|
|
18
|
+
var react_1 = __importDefault(require("react"));
|
|
19
|
+
var react_2 = require("react");
|
|
20
|
+
var ckeditor5_react_1 = require("@ckeditor/ckeditor5-react");
|
|
21
|
+
var ckeditor5_1 = require("ckeditor5");
|
|
22
|
+
require("./ck-editor.css");
|
|
23
|
+
var react_i18next_1 = require("react-i18next");
|
|
24
|
+
/**
|
|
25
|
+
* Create a free account with a trial: https://portal.ckeditor.com/checkout?plan=free
|
|
26
|
+
*/
|
|
27
|
+
var LICENSE_KEY = 'GPL'; // or <YOUR_LICENSE_KEY>.
|
|
28
|
+
function CustomCkEditor5(props) {
|
|
29
|
+
var _a, _b, _c, _d;
|
|
30
|
+
var editorContainerRef = (0, react_2.useRef)(null);
|
|
31
|
+
var editorRef = (0, react_2.useRef)(null);
|
|
32
|
+
// const editorWordCountRef = useRef(null);
|
|
33
|
+
var _e = (0, react_2.useState)(false), isLayoutReady = _e[0], setIsLayoutReady = _e[1];
|
|
34
|
+
var i18n = (0, react_i18next_1.useTranslation)().i18n;
|
|
35
|
+
(0, react_2.useEffect)(function () {
|
|
36
|
+
setIsLayoutReady(true);
|
|
37
|
+
return function () { return setIsLayoutReady(false); };
|
|
38
|
+
}, []);
|
|
39
|
+
var editorConfig = (0, react_2.useMemo)(function () {
|
|
40
|
+
if (!isLayoutReady) {
|
|
41
|
+
return {};
|
|
42
|
+
}
|
|
43
|
+
return {
|
|
44
|
+
editorConfig: {
|
|
45
|
+
toolbar: {
|
|
46
|
+
items: [
|
|
47
|
+
'heading',
|
|
48
|
+
'|',
|
|
49
|
+
// 'sourceEditing',
|
|
50
|
+
// 'showBlocks',
|
|
51
|
+
// 'findAndReplace',
|
|
52
|
+
// 'textPartLanguage',
|
|
53
|
+
'fontSize',
|
|
54
|
+
'fontFamily',
|
|
55
|
+
'fontColor',
|
|
56
|
+
'fontBackgroundColor',
|
|
57
|
+
'|',
|
|
58
|
+
'bold',
|
|
59
|
+
'italic',
|
|
60
|
+
'underline',
|
|
61
|
+
'strikethrough',
|
|
62
|
+
// 'subscript',
|
|
63
|
+
// 'superscript',
|
|
64
|
+
// 'code',
|
|
65
|
+
// 'removeFormat',
|
|
66
|
+
'|',
|
|
67
|
+
'specialCharacters',
|
|
68
|
+
'insertImage',
|
|
69
|
+
'horizontalLine',
|
|
70
|
+
'pageBreak',
|
|
71
|
+
'link',
|
|
72
|
+
// 'bookmark',
|
|
73
|
+
// 'insertImageViaUrl',
|
|
74
|
+
// 'ckbox',
|
|
75
|
+
'mediaEmbed',
|
|
76
|
+
'insertTable',
|
|
77
|
+
'highlight',
|
|
78
|
+
// 'blockQuote',
|
|
79
|
+
// 'codeBlock',
|
|
80
|
+
'htmlEmbed',
|
|
81
|
+
'|',
|
|
82
|
+
'alignment',
|
|
83
|
+
'|',
|
|
84
|
+
'bulletedList',
|
|
85
|
+
'numberedList',
|
|
86
|
+
'todoList',
|
|
87
|
+
'outdent',
|
|
88
|
+
'indent'
|
|
89
|
+
],
|
|
90
|
+
shouldNotGroupWhenFull: false,
|
|
91
|
+
},
|
|
92
|
+
plugins: [
|
|
93
|
+
ckeditor5_1.Alignment,
|
|
94
|
+
ckeditor5_1.Autoformat,
|
|
95
|
+
ckeditor5_1.AutoImage,
|
|
96
|
+
ckeditor5_1.AutoLink,
|
|
97
|
+
ckeditor5_1.Autosave,
|
|
98
|
+
ckeditor5_1.BalloonToolbar,
|
|
99
|
+
ckeditor5_1.BlockQuote,
|
|
100
|
+
ckeditor5_1.Bold,
|
|
101
|
+
ckeditor5_1.Bookmark,
|
|
102
|
+
ckeditor5_1.Code,
|
|
103
|
+
ckeditor5_1.CodeBlock,
|
|
104
|
+
ckeditor5_1.Essentials,
|
|
105
|
+
ckeditor5_1.FindAndReplace,
|
|
106
|
+
ckeditor5_1.FontBackgroundColor,
|
|
107
|
+
ckeditor5_1.FontColor,
|
|
108
|
+
ckeditor5_1.FontFamily,
|
|
109
|
+
ckeditor5_1.FontSize,
|
|
110
|
+
ckeditor5_1.FullPage,
|
|
111
|
+
ckeditor5_1.GeneralHtmlSupport,
|
|
112
|
+
ckeditor5_1.Heading,
|
|
113
|
+
ckeditor5_1.Highlight,
|
|
114
|
+
ckeditor5_1.HorizontalLine,
|
|
115
|
+
ckeditor5_1.HtmlComment,
|
|
116
|
+
ckeditor5_1.HtmlEmbed,
|
|
117
|
+
ckeditor5_1.ImageBlock,
|
|
118
|
+
ckeditor5_1.ImageCaption,
|
|
119
|
+
ckeditor5_1.ImageInline,
|
|
120
|
+
ckeditor5_1.ImageInsert,
|
|
121
|
+
ckeditor5_1.ImageInsertViaUrl,
|
|
122
|
+
ckeditor5_1.ImageResize,
|
|
123
|
+
ckeditor5_1.ImageStyle,
|
|
124
|
+
ckeditor5_1.ImageTextAlternative,
|
|
125
|
+
ckeditor5_1.ImageToolbar,
|
|
126
|
+
ckeditor5_1.ImageUpload,
|
|
127
|
+
ckeditor5_1.Indent,
|
|
128
|
+
ckeditor5_1.IndentBlock,
|
|
129
|
+
ckeditor5_1.Italic,
|
|
130
|
+
ckeditor5_1.Link,
|
|
131
|
+
ckeditor5_1.LinkImage,
|
|
132
|
+
ckeditor5_1.List,
|
|
133
|
+
ckeditor5_1.ListProperties,
|
|
134
|
+
ckeditor5_1.Markdown,
|
|
135
|
+
ckeditor5_1.MediaEmbed,
|
|
136
|
+
ckeditor5_1.Mention,
|
|
137
|
+
ckeditor5_1.PageBreak,
|
|
138
|
+
ckeditor5_1.Paragraph,
|
|
139
|
+
ckeditor5_1.PasteFromMarkdownExperimental,
|
|
140
|
+
ckeditor5_1.PasteFromOffice,
|
|
141
|
+
ckeditor5_1.PictureEditing,
|
|
142
|
+
ckeditor5_1.RemoveFormat,
|
|
143
|
+
ckeditor5_1.ShowBlocks,
|
|
144
|
+
ckeditor5_1.SourceEditing,
|
|
145
|
+
ckeditor5_1.SpecialCharacters,
|
|
146
|
+
ckeditor5_1.SpecialCharactersArrows,
|
|
147
|
+
ckeditor5_1.SpecialCharactersCurrency,
|
|
148
|
+
ckeditor5_1.SpecialCharactersEssentials,
|
|
149
|
+
ckeditor5_1.SpecialCharactersLatin,
|
|
150
|
+
ckeditor5_1.SpecialCharactersMathematical,
|
|
151
|
+
ckeditor5_1.SpecialCharactersText,
|
|
152
|
+
ckeditor5_1.Strikethrough,
|
|
153
|
+
ckeditor5_1.Style,
|
|
154
|
+
ckeditor5_1.Subscript,
|
|
155
|
+
ckeditor5_1.Superscript,
|
|
156
|
+
ckeditor5_1.Table,
|
|
157
|
+
ckeditor5_1.TableCaption,
|
|
158
|
+
ckeditor5_1.TableCellProperties,
|
|
159
|
+
ckeditor5_1.TableColumnResize,
|
|
160
|
+
ckeditor5_1.TableProperties,
|
|
161
|
+
ckeditor5_1.TableToolbar,
|
|
162
|
+
ckeditor5_1.TextPartLanguage,
|
|
163
|
+
ckeditor5_1.TextTransformation,
|
|
164
|
+
// Title,
|
|
165
|
+
ckeditor5_1.TodoList,
|
|
166
|
+
ckeditor5_1.Underline,
|
|
167
|
+
ckeditor5_1.WordCount
|
|
168
|
+
],
|
|
169
|
+
balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'],
|
|
170
|
+
extraPlugins: props.extraPlugins,
|
|
171
|
+
mediaEmbed: {
|
|
172
|
+
previewsInData: true,
|
|
173
|
+
providers: [
|
|
174
|
+
{
|
|
175
|
+
name: "youtube",
|
|
176
|
+
url: /^https:\/\/www\.youtube\.com\/watch\?v=([\w-]+)/,
|
|
177
|
+
html: function (match) {
|
|
178
|
+
var id = match[1];
|
|
179
|
+
return ('<div style="position: relative; padding-bottom: 56.25%; height: 0;">' +
|
|
180
|
+
"<iframe src=\"https://www.youtube.com/embed/".concat(id, "\" ") +
|
|
181
|
+
'style="position: absolute; width: 100%; height: 100%; left: 0;" ' +
|
|
182
|
+
'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>' +
|
|
183
|
+
"</div>");
|
|
184
|
+
},
|
|
185
|
+
},
|
|
186
|
+
],
|
|
187
|
+
},
|
|
188
|
+
fontFamily: {
|
|
189
|
+
options: props.fontFamily || ["Default", "Arial", "Courier New", "Inter", "Roboto", "Times New Roman", "Source Serif 4"],
|
|
190
|
+
supportAllValues: true
|
|
191
|
+
},
|
|
192
|
+
fontSize: {
|
|
193
|
+
options: props.fontSize || [10, 12, 14, 'default', 18, 20, 22, 24],
|
|
194
|
+
supportAllValues: true,
|
|
195
|
+
},
|
|
196
|
+
fontColor: {
|
|
197
|
+
columns: 6,
|
|
198
|
+
colors: props.fontColors || [
|
|
199
|
+
{
|
|
200
|
+
color: 'var(--neutral-text-title-color)',
|
|
201
|
+
label: 'title'
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
color: 'var(--neutral-text-subtitle-color)',
|
|
205
|
+
label: 'subtitle'
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
color: 'var(--neutral-text-body-color)',
|
|
209
|
+
label: 'body'
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
color: 'var(--neutral-text-placeholder-color)',
|
|
213
|
+
label: 'placeholder'
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
color: 'var(--neutral-text-disabled-color)',
|
|
217
|
+
label: 'disabled'
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
color: 'var(--neutral-text-stable-color)',
|
|
221
|
+
label: 'stable'
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
color: 'var(--primary-main-color)',
|
|
225
|
+
label: 'primay'
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
color: 'var(--warning-main-color)',
|
|
229
|
+
label: 'warning'
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
color: 'var(--success-main-color)',
|
|
233
|
+
label: 'success'
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
color: 'var(--secondary3-main-color)',
|
|
237
|
+
label: 'secondary3'
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
color: 'var(--secondary4-main-color)',
|
|
241
|
+
label: 'secondary4'
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
color: 'var(--secondary5-main-color)',
|
|
245
|
+
label: 'secondary5'
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
color: 'var(--infor-main-color)',
|
|
249
|
+
label: 'infor'
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
color: 'var(--error-main-color)',
|
|
253
|
+
label: 'error'
|
|
254
|
+
},
|
|
255
|
+
],
|
|
256
|
+
},
|
|
257
|
+
fontBackgroundColor: {
|
|
258
|
+
columns: 6,
|
|
259
|
+
colors: props.fontBgColors || [
|
|
260
|
+
{
|
|
261
|
+
color: 'var(--neutral-main-background-color)',
|
|
262
|
+
label: 'main'
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
color: 'var(--neutral-main-reverse-background-color)',
|
|
266
|
+
label: 'main-reverse'
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
color: 'var(--neutral-absolute-background-color)',
|
|
270
|
+
label: 'absolute'
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
color: 'var(--neutral-absolute-reverse-background-color)',
|
|
274
|
+
label: 'absolute-reverse'
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
color: 'var(--primary-background)',
|
|
278
|
+
label: 'primay-bg'
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
color: 'var(--warning-background)',
|
|
282
|
+
label: 'warning-bg'
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
color: 'var(--success-background)',
|
|
286
|
+
label: 'success-bg'
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
color: 'var(--secondary3-background)',
|
|
290
|
+
label: 'secondary3-bg'
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
color: 'var(--secondary4-background)',
|
|
294
|
+
label: 'secondary4-bg'
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
color: 'var(--secondary5-background)',
|
|
298
|
+
label: 'secondary5-bg'
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
color: 'var(--infor-background)',
|
|
302
|
+
label: 'infor-bg'
|
|
303
|
+
},
|
|
304
|
+
{
|
|
305
|
+
color: 'var(--error-background)',
|
|
306
|
+
label: 'error-bg'
|
|
307
|
+
},
|
|
308
|
+
],
|
|
309
|
+
},
|
|
310
|
+
heading: {
|
|
311
|
+
options: [
|
|
312
|
+
{
|
|
313
|
+
model: 'paragraph',
|
|
314
|
+
title: 'Paragraph',
|
|
315
|
+
class: 'ck-heading_paragraph'
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
model: 'heading1',
|
|
319
|
+
view: 'h1',
|
|
320
|
+
title: 'Heading 1',
|
|
321
|
+
class: 'ck-heading_heading1'
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
model: 'heading2',
|
|
325
|
+
view: 'h2',
|
|
326
|
+
title: 'Heading 2',
|
|
327
|
+
class: 'ck-heading_heading2'
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
model: 'heading3',
|
|
331
|
+
view: 'h3',
|
|
332
|
+
title: 'Heading 3',
|
|
333
|
+
class: 'ck-heading_heading3'
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
model: 'heading4',
|
|
337
|
+
view: 'h4',
|
|
338
|
+
title: 'Heading 4',
|
|
339
|
+
class: 'ck-heading_heading4'
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
model: 'heading5',
|
|
343
|
+
view: 'h5',
|
|
344
|
+
title: 'Heading 5',
|
|
345
|
+
class: 'ck-heading_heading5'
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
model: 'heading6',
|
|
349
|
+
view: 'h6',
|
|
350
|
+
title: 'Heading 6',
|
|
351
|
+
class: 'ck-heading_heading6'
|
|
352
|
+
}
|
|
353
|
+
]
|
|
354
|
+
},
|
|
355
|
+
htmlSupport: {
|
|
356
|
+
allow: [
|
|
357
|
+
{
|
|
358
|
+
name: /^.*$/,
|
|
359
|
+
styles: true,
|
|
360
|
+
attributes: true,
|
|
361
|
+
classes: true
|
|
362
|
+
}
|
|
363
|
+
]
|
|
364
|
+
},
|
|
365
|
+
image: {
|
|
366
|
+
toolbar: [
|
|
367
|
+
'toggleImageCaption',
|
|
368
|
+
'imageTextAlternative',
|
|
369
|
+
'|',
|
|
370
|
+
'imageStyle:inline',
|
|
371
|
+
'imageStyle:wrapText',
|
|
372
|
+
'imageStyle:breakText',
|
|
373
|
+
'|',
|
|
374
|
+
'resizeImage'
|
|
375
|
+
]
|
|
376
|
+
},
|
|
377
|
+
language: "vi",
|
|
378
|
+
licenseKey: LICENSE_KEY,
|
|
379
|
+
link: {
|
|
380
|
+
addTargetToExternalLinks: true,
|
|
381
|
+
defaultProtocol: 'https://',
|
|
382
|
+
decorators: {
|
|
383
|
+
toggleDownloadable: {
|
|
384
|
+
mode: 'manual',
|
|
385
|
+
label: 'Downloadable',
|
|
386
|
+
attributes: {
|
|
387
|
+
download: 'file'
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
},
|
|
392
|
+
menuBar: { isVisible: props.menuBar },
|
|
393
|
+
placeholder: props.placeholder,
|
|
394
|
+
table: {
|
|
395
|
+
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
|
|
396
|
+
},
|
|
397
|
+
}
|
|
398
|
+
};
|
|
399
|
+
}, [isLayoutReady, i18n.language]).editorConfig;
|
|
400
|
+
return react_1.default.createElement("div", { ref: editorContainerRef, className: "col editor-container editor-container_classic-editor editor-container_include-style ".concat((_a = props.className) !== null && _a !== void 0 ? _a : "", " ").concat(((_b = props.helperText) === null || _b === void 0 ? void 0 : _b.length) ? 'helper-text' : ""), "helper-text": props.helperText, style: props.style ? __assign(__assign({}, { '--helper-text-color': (_c = props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), props.style) : { '--helper-text-color': (_d = props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } },
|
|
401
|
+
react_1.default.createElement("div", { className: "editor-container__editor" },
|
|
402
|
+
react_1.default.createElement("div", { ref: editorRef }, editorConfig && (react_1.default.createElement(ckeditor5_react_1.CKEditor, { onReady: props.onReady, onAfterDestroy: props.onAfterDestroy, onFocus: props.onFocus, onChange: props.onChange, onBlur: props.onBlur, editor: ckeditor5_1.ClassicEditor, onError: props.onError, config: editorConfig, data: props.value, disabled: props.disabled })))));
|
|
403
|
+
}
|
|
@@ -105,17 +105,18 @@ var TImportFile = /** @class */ (function (_super) {
|
|
|
105
105
|
};
|
|
106
106
|
TImportFile.prototype.render = function () {
|
|
107
107
|
var _this = this;
|
|
108
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
108
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
109
109
|
var t = this.props.t;
|
|
110
110
|
var sizeTitle;
|
|
111
111
|
if (this.props.maxSize) {
|
|
112
112
|
sizeTitle = this.props.maxSize > Math.pow(1024, 3) ? "".concat(Math.round(this.props.maxSize / Math.pow(1024, 3)), "TB") : this.props.maxSize > Math.pow(1024, 2) ? "".concat(Math.round(this.props.maxSize / Math.pow(1024, 2)), "GB") : this.props.maxSize > 1024 ? "".concat(Math.round(this.props.maxSize / 1024), "MB") : "".concat(this.props.maxSize, "KB");
|
|
113
113
|
}
|
|
114
|
-
|
|
114
|
+
var _style = this.state.preview ? ((_a = this.props.style) !== null && _a !== void 0 ? _a : {}) : __assign({ cursor: 'pointer' }, ((_b = this.props.style) !== null && _b !== void 0 ? _b : {}));
|
|
115
|
+
return react_1.default.createElement("div", { id: this.props.id, className: "".concat(import_file_module_css_1.default['import-file-container'], " ").concat((_c = this.props.className) !== null && _c !== void 0 ? _c : 'row', " ").concat(this.props.buttonOnly ? import_file_module_css_1.default['button-only'] : '', " ").concat(((_d = this.props.helperText) === null || _d === void 0 ? void 0 : _d.length) ? import_file_module_css_1.default['helper-text'] : ""), style: __assign({ '--helper-text-color': (_e = this.props.helperTextColor) !== null && _e !== void 0 ? _e : '#e14337' }, _style), "helper-text": this.props.helperText, onClick: function () {
|
|
115
116
|
if (!_this.state.preview && !_this.props.buttonOnly)
|
|
116
117
|
_this.showFilePicker();
|
|
117
118
|
} },
|
|
118
|
-
react_1.default.createElement("input", { type: 'file', multiple: this.props.multiple, accept: ((
|
|
119
|
+
react_1.default.createElement("input", { disabled: this.props.disabled, type: 'file', multiple: this.props.multiple, accept: ((_f = this.props.allowType) !== null && _f !== void 0 ? _f : []).join(','), ref: this.fileRef, onChange: function (ev) {
|
|
119
120
|
var _a, _b, _c, _d;
|
|
120
121
|
var files;
|
|
121
122
|
if ((_a = ev.target.files) === null || _a === void 0 ? void 0 : _a.length) {
|
|
@@ -143,7 +144,7 @@ var TImportFile = /** @class */ (function (_super) {
|
|
|
143
144
|
} }),
|
|
144
145
|
this.props.buttonOnly
|
|
145
146
|
? null
|
|
146
|
-
: this.props.multiple && ((
|
|
147
|
+
: this.props.multiple && ((_g = this.state.preview) === null || _g === void 0 ? void 0 : _g.length) ? react_1.default.createElement("div", { className: 'row', style: { flex: 1, flexWrap: "wrap", gap: "0.8rem" } }, this.state.preview.map(function (f) {
|
|
147
148
|
var _a;
|
|
148
149
|
return react_1.default.createElement("div", { key: "".concat(f.name, "-").concat(f.size, "-").concat(f.lastModified), className: 'row col6', style: { "--gutter": "0.8rem", gap: "0.8rem", padding: "0.6rem 0.8rem", borderRadius: "0.4rem", border: "var(--neutral-main-border)" } },
|
|
149
150
|
react_1.default.createElement(index_1.Winicon, { src: "outline/".concat(((_a = f.type) === null || _a === void 0 ? void 0 : _a.includes('image')) ? "multimedia/image" : "files/file-export"), size: "1.4rem" }),
|
|
@@ -156,20 +157,20 @@ var TImportFile = /** @class */ (function (_super) {
|
|
|
156
157
|
_this.props.onChange(newValue);
|
|
157
158
|
}, color: '#E14337' }));
|
|
158
159
|
})) : react_1.default.createElement(react_1.default.Fragment, null,
|
|
159
|
-
react_1.default.createElement("div", { className: "".concat(import_file_module_css_1.default['import-file-prefix'], " row") }, ((
|
|
160
|
+
react_1.default.createElement("div", { className: "".concat(import_file_module_css_1.default['import-file-prefix'], " row") }, ((_h = this.state.preview) === null || _h === void 0 ? void 0 : _h.length) ? ((_j = this.state.preview[0].type) === null || _j === void 0 ? void 0 : _j.includes('image')) ? react_1.default.createElement("img", { src: this.state.preview[0] instanceof File ? URL.createObjectURL(this.state.preview[0]) : (_l = (_k = this.state.preview) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.url }) : fileSvg : cloudSvg),
|
|
160
161
|
react_1.default.createElement("div", { className: "".concat(import_file_module_css_1.default['file-preview-content'], " col") },
|
|
161
|
-
react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['title-file'], " heading-8"), style: { maxWidth: '100%' } }, (
|
|
162
|
-
react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['subtitle-file'], " subtitle-3"), style: { maxWidth: '100%' } }, ((
|
|
163
|
-
? "".concat((
|
|
164
|
-
: ((
|
|
165
|
-
((
|
|
166
|
-
react_1.default.createElement(index_1.Text, { className: 'button-text-6' }, (
|
|
162
|
+
react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['title-file'], " heading-8"), style: { maxWidth: '100%' } }, (_p = (_o = (_m = this.state.preview) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.name) !== null && _p !== void 0 ? _p : ((_q = this.props.label) !== null && _q !== void 0 ? _q : t("uploadFileAction"))),
|
|
163
|
+
react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['subtitle-file'], " subtitle-3"), style: { maxWidth: '100%' } }, ((_s = (_r = this.state.preview) === null || _r === void 0 ? void 0 : _r[0]) === null || _s === void 0 ? void 0 : _s.size)
|
|
164
|
+
? "".concat((_t = this.state.preview) === null || _t === void 0 ? void 0 : _t[0].size, "KB")
|
|
165
|
+
: ((_u = this.props.subTitle) !== null && _u !== void 0 ? _u : (sizeTitle ? t("limitFileWarning", { sizeTitle: sizeTitle }) : ''))))),
|
|
166
|
+
((_v = this.state.preview) === null || _v === void 0 ? void 0 : _v.length) && this.props.buttonOnly && !this.props.multiple ? react_1.default.createElement("div", { className: 'row', style: { gap: "0.4rem" } },
|
|
167
|
+
react_1.default.createElement(index_1.Text, { className: 'button-text-6' }, (_x = (_w = this.state.preview) === null || _w === void 0 ? void 0 : _w[0].name) !== null && _x !== void 0 ? _x : ''),
|
|
167
168
|
react_1.default.createElement("button", { type: 'button', className: "".concat(import_file_module_css_1.default['remove-preview-file']), onClick: function () {
|
|
168
169
|
_this.setState(__assign(__assign({}, _this.state), { preview: undefined }));
|
|
169
170
|
if (_this.props.onChange)
|
|
170
171
|
_this.props.onChange(undefined);
|
|
171
172
|
} }, closeSvg))
|
|
172
|
-
: react_1.default.createElement(index_1.Button, { label: ((
|
|
173
|
+
: react_1.default.createElement(index_1.Button, { label: ((_y = this.state.preview) === null || _y === void 0 ? void 0 : _y.length) ? 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", backgroundColor: "var(--neutral-main-background-color)" }, className: 'button-text-4', onClick: function () {
|
|
173
174
|
if (_this.state.preview && !_this.props.multiple) {
|
|
174
175
|
_this.setState(__assign(__assign({}, _this.state), { preview: undefined }));
|
|
175
176
|
if (_this.props.onChange)
|
|
@@ -76,10 +76,10 @@ var TextField = /** @class */ (function (_super) {
|
|
|
76
76
|
TextField.prototype.render = function () {
|
|
77
77
|
var _this = this;
|
|
78
78
|
var _a, _b, _c, _d, _e, _f;
|
|
79
|
-
return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, className: "text-field-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length)
|
|
79
|
+
return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, className: "text-field-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) ? 'helper-text' : ""), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } },
|
|
80
80
|
this.props.prefix,
|
|
81
81
|
this.props.register ?
|
|
82
|
-
react_1.default.createElement("input", __assign({}, this.props.register, { autoComplete: this.props.autoComplete, autoFocus: this.props.autoFocus, maxLength: this.props.maxLength,
|
|
82
|
+
react_1.default.createElement("input", __assign({ name: this.props.name }, this.props.register, { autoComplete: this.props.autoComplete, autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, type: (_e = this.props.type) !== null && _e !== void 0 ? _e : 'text', placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus, onKeyDown: this.props.onComplete ? function (ev) {
|
|
83
83
|
if (_this.props.onComplete) {
|
|
84
84
|
switch (ev.key.toLowerCase()) {
|
|
85
85
|
case "enter":
|
package/dist/index.d.ts
CHANGED
|
@@ -27,6 +27,7 @@ import { Winicon } from './component/wini-icon/winicon';
|
|
|
27
27
|
import { NumberPicker } from './component/number-picker/number-picker';
|
|
28
28
|
import { InputOpt } from './component/input-opt/input-opt';
|
|
29
29
|
import { WLoginView } from './form/login/view';
|
|
30
|
-
|
|
30
|
+
import { CustomCkEditor5 } from './component/ck-editor/ckeditor';
|
|
31
|
+
export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, Switch, Popup, showPopup, closePopup, Dialog, showDialog, DialogAlignment, DatePicker, SelectMultiple, ProgressBar, Text, Pagination, Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems, TextField, RadioButton, TextArea, ImportFile, ToastMessage, InfiniteScroll, Rating, ProgressCircle, CustomSlider, ToastContainer, Button, Tag, Winicon, NumberPicker, InputOpt, WLoginView, CustomCkEditor5 };
|
|
31
32
|
export type { OptionsItem };
|
|
32
33
|
export { i18n } from './language/i18n';
|