pds-dev-kit-web 2.2.256 → 2.2.257
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/dist/src/common/services/i18n/resources/en.json +1 -2
- package/dist/src/common/services/i18n/resources/es.json +1 -2
- package/dist/src/common/services/i18n/resources/fil.json +1 -2
- package/dist/src/common/services/i18n/resources/index.d.ts +0 -7
- package/dist/src/common/services/i18n/resources/ja.json +1 -2
- package/dist/src/common/services/i18n/resources/ko.json +1 -2
- package/dist/src/common/services/i18n/resources/zh-cn.json +1 -2
- package/dist/src/common/services/i18n/resources/zh-tw.json +1 -2
- package/dist/src/common/styles/colorSet/UIColor.json +1 -6
- package/dist/src/common/styles/colorSet/index.d.ts +126 -131
- package/dist/src/common/styles/colorSet/index.js +2 -2
- package/dist/src/common/styles/colorSet/ui-type.d.ts +0 -5
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +1 -12
- package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +7 -12
- package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.d.ts +1 -1
- package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js +16 -10
- package/dist/src/hybrid/components/LottieIcon/LottieIcon.js +1 -1
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +1 -12
- package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +7 -12
- package/package.json +1 -1
- package/release-note.md +2 -3
- package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionBubble.d.ts +0 -11
- package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionBubble.js +0 -86
- package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.d.ts +0 -18
- package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.js +0 -133
- package/dist/src/desktop/components/ChatBubbleListItem/components/index.d.ts +0 -1
- package/dist/src/desktop/components/ChatBubbleListItem/components/index.js +0 -8
- package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionBubble.d.ts +0 -11
- package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionBubble.js +0 -86
- package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.d.ts +0 -18
- package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.js +0 -126
- package/dist/src/mobile/components/ChatBubbleListItem/components/index.d.ts +0 -1
- package/dist/src/mobile/components/ChatBubbleListItem/components/index.js +0 -8
|
@@ -102,7 +102,6 @@
|
|
|
102
102
|
"str_9069": "If French is not entered, members will see the content in English.",
|
|
103
103
|
"str_9070": "If Spanish is not entered, members will see the content in English.",
|
|
104
104
|
"str_upload": "Upload",
|
|
105
|
-
"str_delete": "Delete"
|
|
106
|
-
"str_reaction": "Reaction"
|
|
105
|
+
"str_delete": "Delete"
|
|
107
106
|
}
|
|
108
107
|
}
|
|
@@ -102,7 +102,6 @@
|
|
|
102
102
|
"str_9069": "Si no ingresa en francés, se mostrará a los miembros en inglés.",
|
|
103
103
|
"str_9070": "Si no ingresa en español, se mostrará a los miembros en inglés.",
|
|
104
104
|
"str_upload": "Subir",
|
|
105
|
-
"str_delete": "borrar"
|
|
106
|
-
"str_reaction": "Reaction"
|
|
105
|
+
"str_delete": "borrar"
|
|
107
106
|
}
|
|
108
107
|
}
|
|
@@ -105,7 +105,6 @@ declare const locale: {
|
|
|
105
105
|
str_9070: string;
|
|
106
106
|
str_upload: string;
|
|
107
107
|
str_delete: string;
|
|
108
|
-
str_reaction: string;
|
|
109
108
|
};
|
|
110
109
|
};
|
|
111
110
|
readonly en: {
|
|
@@ -213,7 +212,6 @@ declare const locale: {
|
|
|
213
212
|
str_9070: string;
|
|
214
213
|
str_upload: string;
|
|
215
214
|
str_delete: string;
|
|
216
|
-
str_reaction: string;
|
|
217
215
|
};
|
|
218
216
|
};
|
|
219
217
|
readonly ja: {
|
|
@@ -321,7 +319,6 @@ declare const locale: {
|
|
|
321
319
|
str_9070: string;
|
|
322
320
|
str_upload: string;
|
|
323
321
|
str_delete: string;
|
|
324
|
-
str_reaction: string;
|
|
325
322
|
};
|
|
326
323
|
};
|
|
327
324
|
readonly es: {
|
|
@@ -429,7 +426,6 @@ declare const locale: {
|
|
|
429
426
|
str_9070: string;
|
|
430
427
|
str_upload: string;
|
|
431
428
|
str_delete: string;
|
|
432
|
-
str_reaction: string;
|
|
433
429
|
};
|
|
434
430
|
};
|
|
435
431
|
readonly 'zh-cn': {
|
|
@@ -537,7 +533,6 @@ declare const locale: {
|
|
|
537
533
|
str_9070: string;
|
|
538
534
|
str_upload: string;
|
|
539
535
|
str_delete: string;
|
|
540
|
-
str_reaction: string;
|
|
541
536
|
};
|
|
542
537
|
};
|
|
543
538
|
readonly 'zh-tw': {
|
|
@@ -645,7 +640,6 @@ declare const locale: {
|
|
|
645
640
|
str_9070: string;
|
|
646
641
|
str_upload: string;
|
|
647
642
|
str_delete: string;
|
|
648
|
-
str_reaction: string;
|
|
649
643
|
};
|
|
650
644
|
};
|
|
651
645
|
readonly fil: {
|
|
@@ -746,7 +740,6 @@ declare const locale: {
|
|
|
746
740
|
str_friendly_currency_dollar: string;
|
|
747
741
|
str_upload: string;
|
|
748
742
|
str_delete: string;
|
|
749
|
-
str_reaction: string;
|
|
750
743
|
};
|
|
751
744
|
};
|
|
752
745
|
};
|
|
@@ -905,10 +905,5 @@
|
|
|
905
905
|
"ui_142": "sys_widget_grey_08",
|
|
906
906
|
"ui_143": "sys_on_base_hover_01",
|
|
907
907
|
"ui_144": "sys_on_base_pressed_01",
|
|
908
|
-
"ui_cpnt_badge_base_confirm": "sys_component_base_green"
|
|
909
|
-
"ui_cpnt_message_reaction_base_01": "sys_component_pastel_base_01",
|
|
910
|
-
"ui_cpnt_message_reaction_base_02": "sys_component_pastel_base_02",
|
|
911
|
-
"ui_cpnt_message_reaction_base_03": "sys_component_pastel_base_03",
|
|
912
|
-
"ui_cpnt_message_reaction_base_04": "sys_component_pastel_base_04",
|
|
913
|
-
"ui_cpnt_message_reaction_base_05": "sys_component_pastel_base_05"
|
|
908
|
+
"ui_cpnt_badge_base_confirm": "sys_component_base_green"
|
|
914
909
|
}
|
|
@@ -1,129 +1,5 @@
|
|
|
1
1
|
declare const colorSet: {
|
|
2
|
-
readonly
|
|
3
|
-
blue500: string;
|
|
4
|
-
blue700: string;
|
|
5
|
-
blue300: string;
|
|
6
|
-
green700: string;
|
|
7
|
-
green500: string;
|
|
8
|
-
green300: string;
|
|
9
|
-
red500: string;
|
|
10
|
-
grey900: string;
|
|
11
|
-
grey500: string;
|
|
12
|
-
grey400: string;
|
|
13
|
-
grey100: string;
|
|
14
|
-
grey50: string;
|
|
15
|
-
white: string;
|
|
16
|
-
black: string;
|
|
17
|
-
darkblue500: string;
|
|
18
|
-
grey950: string;
|
|
19
|
-
darkgrey900: string;
|
|
20
|
-
darkgrey500: string;
|
|
21
|
-
darkgrey400: string;
|
|
22
|
-
darkgrey100: string;
|
|
23
|
-
darkgrey50: string;
|
|
24
|
-
darkred500: string;
|
|
25
|
-
darkgreen700: string;
|
|
26
|
-
orange500: string;
|
|
27
|
-
darkorange500: string;
|
|
28
|
-
opacity00: string;
|
|
29
|
-
opacity20: string;
|
|
30
|
-
opacity30: string;
|
|
31
|
-
opacity65: string;
|
|
32
|
-
darkgreen500: string;
|
|
33
|
-
grey70: string;
|
|
34
|
-
navy500: string;
|
|
35
|
-
lightgreen500: string;
|
|
36
|
-
pink500: string;
|
|
37
|
-
darkgrey70: string;
|
|
38
|
-
darknavy500: string;
|
|
39
|
-
darkpink500: string;
|
|
40
|
-
darklightgreen500: string;
|
|
41
|
-
opacity10: string;
|
|
42
|
-
grey600: string;
|
|
43
|
-
darkgrey600: string;
|
|
44
|
-
skyblue500: string;
|
|
45
|
-
skyblue300: string;
|
|
46
|
-
pink300: string;
|
|
47
|
-
lightpink500: string;
|
|
48
|
-
darkblue300: string;
|
|
49
|
-
darkblue700: string;
|
|
50
|
-
darkgreen300: string;
|
|
51
|
-
darkskyblue500: string;
|
|
52
|
-
navy100: string;
|
|
53
|
-
darknavy100: string;
|
|
54
|
-
opacity80: string;
|
|
55
|
-
opacity50: string;
|
|
56
|
-
grey30: string;
|
|
57
|
-
opacity95: string;
|
|
58
|
-
darkgrey30: string;
|
|
59
|
-
opacity40: string;
|
|
60
|
-
kakaoyellow: string;
|
|
61
|
-
pastelblue500: string;
|
|
62
|
-
pastelpink500: string;
|
|
63
|
-
pastelorange500: string;
|
|
64
|
-
pastelgreen500: string;
|
|
65
|
-
pastelpurple500: string;
|
|
66
|
-
darkpastelblue500: string;
|
|
67
|
-
darkpastelpink500: string;
|
|
68
|
-
darkpastelorange500: string;
|
|
69
|
-
darkpastelgreen500: string;
|
|
70
|
-
darkpastelpurple500: string;
|
|
71
|
-
green30: string;
|
|
72
|
-
darkgreen30: string;
|
|
73
|
-
orange50: string;
|
|
74
|
-
darkorange50: string;
|
|
75
|
-
orange30: string;
|
|
76
|
-
darkorange30: string;
|
|
77
|
-
green50: string;
|
|
78
|
-
darkgreen50: string;
|
|
79
|
-
opacity90: string;
|
|
80
|
-
facebookblue: string;
|
|
81
|
-
opacity05: string;
|
|
82
|
-
opacity15: string;
|
|
83
|
-
grey80: string;
|
|
84
|
-
grey200: string;
|
|
85
|
-
darkgrey80: string;
|
|
86
|
-
darkgrey200: string;
|
|
87
|
-
opacity70: string;
|
|
88
|
-
opacity60: string;
|
|
89
|
-
skyblue100: string;
|
|
90
|
-
green100: string;
|
|
91
|
-
darkgreen100: string;
|
|
92
|
-
darkskyblue100: string;
|
|
93
|
-
opacity25: string;
|
|
94
|
-
opacity35: string;
|
|
95
|
-
grey10: string;
|
|
96
|
-
darkgrey10: string;
|
|
97
|
-
blue50: string;
|
|
98
|
-
darkblue50: string;
|
|
99
|
-
blue10: string;
|
|
100
|
-
red10: string;
|
|
101
|
-
green10: string;
|
|
102
|
-
blue30: string;
|
|
103
|
-
red30: string;
|
|
104
|
-
orange300: string;
|
|
105
|
-
darkorange300: string;
|
|
106
|
-
darkpink300: string;
|
|
107
|
-
pastelblue300: string;
|
|
108
|
-
darkpastelblue300: string;
|
|
109
|
-
softpurple500: string;
|
|
110
|
-
darksoftpurple500: string;
|
|
111
|
-
coolpink500: string;
|
|
112
|
-
darkcoolpink500: string;
|
|
113
|
-
brown500: string;
|
|
114
|
-
darkbrown500: string;
|
|
115
|
-
yellow300: string;
|
|
116
|
-
darkyellow300: string;
|
|
117
|
-
grey20: string;
|
|
118
|
-
darkgrey20: string;
|
|
119
|
-
grey300: string;
|
|
120
|
-
darkgrey300: string;
|
|
121
|
-
yellow500: string;
|
|
122
|
-
darkyellow500: string;
|
|
123
|
-
grey450: string;
|
|
124
|
-
darkgrey450: string;
|
|
125
|
-
};
|
|
126
|
-
readonly PaletteColor_light: {
|
|
2
|
+
readonly PaletteColor_Dark: {
|
|
127
3
|
sys_container_background_01: string;
|
|
128
4
|
sys_container_background_02: string;
|
|
129
5
|
sys_container_background_03: string;
|
|
@@ -506,7 +382,131 @@ declare const colorSet: {
|
|
|
506
382
|
sys_on_base_hover_01: string;
|
|
507
383
|
sys_on_base_pressed_01: string;
|
|
508
384
|
};
|
|
509
|
-
readonly
|
|
385
|
+
readonly SemanticColor: {
|
|
386
|
+
blue500: string;
|
|
387
|
+
blue700: string;
|
|
388
|
+
blue300: string;
|
|
389
|
+
green700: string;
|
|
390
|
+
green500: string;
|
|
391
|
+
green300: string;
|
|
392
|
+
red500: string;
|
|
393
|
+
grey900: string;
|
|
394
|
+
grey500: string;
|
|
395
|
+
grey400: string;
|
|
396
|
+
grey100: string;
|
|
397
|
+
grey50: string;
|
|
398
|
+
white: string;
|
|
399
|
+
black: string;
|
|
400
|
+
darkblue500: string;
|
|
401
|
+
grey950: string;
|
|
402
|
+
darkgrey900: string;
|
|
403
|
+
darkgrey500: string;
|
|
404
|
+
darkgrey400: string;
|
|
405
|
+
darkgrey100: string;
|
|
406
|
+
darkgrey50: string;
|
|
407
|
+
darkred500: string;
|
|
408
|
+
darkgreen700: string;
|
|
409
|
+
orange500: string;
|
|
410
|
+
darkorange500: string;
|
|
411
|
+
opacity00: string;
|
|
412
|
+
opacity20: string;
|
|
413
|
+
opacity30: string;
|
|
414
|
+
opacity65: string;
|
|
415
|
+
darkgreen500: string;
|
|
416
|
+
grey70: string;
|
|
417
|
+
navy500: string;
|
|
418
|
+
lightgreen500: string;
|
|
419
|
+
pink500: string;
|
|
420
|
+
darkgrey70: string;
|
|
421
|
+
darknavy500: string;
|
|
422
|
+
darkpink500: string;
|
|
423
|
+
darklightgreen500: string;
|
|
424
|
+
opacity10: string;
|
|
425
|
+
grey600: string;
|
|
426
|
+
darkgrey600: string;
|
|
427
|
+
skyblue500: string;
|
|
428
|
+
skyblue300: string;
|
|
429
|
+
pink300: string;
|
|
430
|
+
lightpink500: string;
|
|
431
|
+
darkblue300: string;
|
|
432
|
+
darkblue700: string;
|
|
433
|
+
darkgreen300: string;
|
|
434
|
+
darkskyblue500: string;
|
|
435
|
+
navy100: string;
|
|
436
|
+
darknavy100: string;
|
|
437
|
+
opacity80: string;
|
|
438
|
+
opacity50: string;
|
|
439
|
+
grey30: string;
|
|
440
|
+
opacity95: string;
|
|
441
|
+
darkgrey30: string;
|
|
442
|
+
opacity40: string;
|
|
443
|
+
kakaoyellow: string;
|
|
444
|
+
pastelblue500: string;
|
|
445
|
+
pastelpink500: string;
|
|
446
|
+
pastelorange500: string;
|
|
447
|
+
pastelgreen500: string;
|
|
448
|
+
pastelpurple500: string;
|
|
449
|
+
darkpastelblue500: string;
|
|
450
|
+
darkpastelpink500: string;
|
|
451
|
+
darkpastelorange500: string;
|
|
452
|
+
darkpastelgreen500: string;
|
|
453
|
+
darkpastelpurple500: string;
|
|
454
|
+
green30: string;
|
|
455
|
+
darkgreen30: string;
|
|
456
|
+
orange50: string;
|
|
457
|
+
darkorange50: string;
|
|
458
|
+
orange30: string;
|
|
459
|
+
darkorange30: string;
|
|
460
|
+
green50: string;
|
|
461
|
+
darkgreen50: string;
|
|
462
|
+
opacity90: string;
|
|
463
|
+
facebookblue: string;
|
|
464
|
+
opacity05: string;
|
|
465
|
+
opacity15: string;
|
|
466
|
+
grey80: string;
|
|
467
|
+
grey200: string;
|
|
468
|
+
darkgrey80: string;
|
|
469
|
+
darkgrey200: string;
|
|
470
|
+
opacity70: string;
|
|
471
|
+
opacity60: string;
|
|
472
|
+
skyblue100: string;
|
|
473
|
+
green100: string;
|
|
474
|
+
darkgreen100: string;
|
|
475
|
+
darkskyblue100: string;
|
|
476
|
+
opacity25: string;
|
|
477
|
+
opacity35: string;
|
|
478
|
+
grey10: string;
|
|
479
|
+
darkgrey10: string;
|
|
480
|
+
blue50: string;
|
|
481
|
+
darkblue50: string;
|
|
482
|
+
blue10: string;
|
|
483
|
+
red10: string;
|
|
484
|
+
green10: string;
|
|
485
|
+
blue30: string;
|
|
486
|
+
red30: string;
|
|
487
|
+
orange300: string;
|
|
488
|
+
darkorange300: string;
|
|
489
|
+
darkpink300: string;
|
|
490
|
+
pastelblue300: string;
|
|
491
|
+
darkpastelblue300: string;
|
|
492
|
+
softpurple500: string;
|
|
493
|
+
darksoftpurple500: string;
|
|
494
|
+
coolpink500: string;
|
|
495
|
+
darkcoolpink500: string;
|
|
496
|
+
brown500: string;
|
|
497
|
+
darkbrown500: string;
|
|
498
|
+
yellow300: string;
|
|
499
|
+
darkyellow300: string;
|
|
500
|
+
grey20: string;
|
|
501
|
+
darkgrey20: string;
|
|
502
|
+
grey300: string;
|
|
503
|
+
darkgrey300: string;
|
|
504
|
+
yellow500: string;
|
|
505
|
+
darkyellow500: string;
|
|
506
|
+
grey450: string;
|
|
507
|
+
darkgrey450: string;
|
|
508
|
+
};
|
|
509
|
+
readonly PaletteColor_light: {
|
|
510
510
|
sys_container_background_01: string;
|
|
511
511
|
sys_container_background_02: string;
|
|
512
512
|
sys_container_background_03: string;
|
|
@@ -1797,11 +1797,6 @@ declare const colorSet: {
|
|
|
1797
1797
|
ui_143: string;
|
|
1798
1798
|
ui_144: string;
|
|
1799
1799
|
ui_cpnt_badge_base_confirm: string;
|
|
1800
|
-
ui_cpnt_message_reaction_base_01: string;
|
|
1801
|
-
ui_cpnt_message_reaction_base_02: string;
|
|
1802
|
-
ui_cpnt_message_reaction_base_03: string;
|
|
1803
|
-
ui_cpnt_message_reaction_base_04: string;
|
|
1804
|
-
ui_cpnt_message_reaction_base_05: string;
|
|
1805
1800
|
};
|
|
1806
1801
|
};
|
|
1807
1802
|
export default colorSet;
|
|
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
|
+
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
7
8
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
9
|
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
9
|
-
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
10
10
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
11
11
|
var colorSet = {
|
|
12
|
+
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
12
13
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
14
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
14
|
-
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
15
15
|
UIColor: UIColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -906,9 +906,4 @@ export interface UITheme {
|
|
|
906
906
|
ui_143: string;
|
|
907
907
|
ui_144: string;
|
|
908
908
|
ui_cpnt_badge_base_confirm: string;
|
|
909
|
-
ui_cpnt_message_reaction_base_01: string;
|
|
910
|
-
ui_cpnt_message_reaction_base_02: string;
|
|
911
|
-
ui_cpnt_message_reaction_base_03: string;
|
|
912
|
-
ui_cpnt_message_reaction_base_04: string;
|
|
913
|
-
ui_cpnt_message_reaction_base_05: string;
|
|
914
909
|
}
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { PDSTextType, PDSValueOption } from '../../../common';
|
|
3
3
|
type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black' | 'transparent';
|
|
4
|
-
type ReactionType = 'heart' | 'like' | 'confetti';
|
|
5
|
-
type ReactionValueOption = {
|
|
6
|
-
type: ReactionType;
|
|
7
|
-
count: number;
|
|
8
|
-
};
|
|
9
|
-
type ReactionArrayType = ReactionValueOption[];
|
|
10
4
|
export type ChatBubbleListItemProps = {
|
|
11
5
|
titleText?: PDSTextType;
|
|
12
6
|
imageSrc?: string;
|
|
@@ -20,13 +14,8 @@ export type ChatBubbleListItemProps = {
|
|
|
20
14
|
contextMenuState?: 'normal' | 'disabled';
|
|
21
15
|
children?: React.ReactNode;
|
|
22
16
|
downloadIBtnMode?: 'use' | 'none';
|
|
23
|
-
reactionBtnMode?: 'use' | 'none';
|
|
24
|
-
reactionBtnText?: string;
|
|
25
|
-
reactionArray?: ReactionArrayType;
|
|
26
|
-
reactionBubblePosition?: 'top' | 'bottom';
|
|
27
17
|
onClickContextMenuItem?: (option: PDSValueOption) => void;
|
|
28
18
|
onClickDownloadIBtn?: () => void;
|
|
29
|
-
onClickReactionBtn?: (type: ReactionType) => void;
|
|
30
19
|
};
|
|
31
|
-
declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode,
|
|
20
|
+
declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
|
|
32
21
|
export default ChatBubbleListItem;
|
|
@@ -50,7 +50,6 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
|
|
|
50
50
|
var IconButton_1 = require("../IconButton");
|
|
51
51
|
var TextLabel_1 = require("../TextLabel");
|
|
52
52
|
var ChatBubble_1 = __importDefault(require("./ChatBubble"));
|
|
53
|
-
var components_1 = require("./components");
|
|
54
53
|
var Popup_1 = require("./Popup");
|
|
55
54
|
var chatBubbleTailType = {
|
|
56
55
|
other_avatar_impact: 'left_top',
|
|
@@ -69,8 +68,8 @@ var profileImageBorderColorTheme = {
|
|
|
69
68
|
transparent: 'ui_cpnt_list_chatbubble_base_transparent'
|
|
70
69
|
};
|
|
71
70
|
function ChatBubbleListItem(_a) {
|
|
72
|
-
var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f,
|
|
73
|
-
var
|
|
71
|
+
var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
|
|
72
|
+
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
|
|
74
73
|
var contextMenuRef = (0, react_1.useRef)(null);
|
|
75
74
|
var chatBody = document.querySelector('#chatMessageBox');
|
|
76
75
|
var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
|
|
@@ -136,7 +135,7 @@ function ChatBubbleListItem(_a) {
|
|
|
136
135
|
}
|
|
137
136
|
setIsContextMenuOpen(false);
|
|
138
137
|
};
|
|
139
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox,
|
|
138
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
|
|
140
139
|
}
|
|
141
140
|
var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
142
141
|
var theme = _a.theme;
|
|
@@ -170,14 +169,11 @@ var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 ||
|
|
|
170
169
|
return isMe && theme.spacing.spacingB;
|
|
171
170
|
});
|
|
172
171
|
var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
173
|
-
var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n
|
|
174
|
-
var isMe = _a.isMe;
|
|
175
|
-
return isMe && MyChatBubble;
|
|
176
|
-
});
|
|
172
|
+
var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
177
173
|
var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
|
|
178
|
-
var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n
|
|
174
|
+
var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n\n ", ";\n"], ["\n display: flex;\n flex: 1;\n\n ", ";\n"])), function (_a) {
|
|
179
175
|
var isMe = _a.isMe;
|
|
180
|
-
return isMe &&
|
|
176
|
+
return isMe && MyChatBubble;
|
|
181
177
|
});
|
|
182
178
|
var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: ", ";\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
|
|
183
179
|
var isMe = _a.isMe;
|
|
@@ -205,6 +201,5 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (temp
|
|
|
205
201
|
var hoverMode = _a.hoverMode;
|
|
206
202
|
return hoverMode === 'use' && '1';
|
|
207
203
|
});
|
|
208
|
-
var S_BubbleWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
209
204
|
exports.default = ChatBubbleListItem;
|
|
210
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13
|
|
205
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
@@ -16,7 +16,7 @@ type DesktopBasicModalProps = {
|
|
|
16
16
|
mBtn1Type?: 'button' | 'submit';
|
|
17
17
|
mBtn2Type?: 'button' | 'submit';
|
|
18
18
|
mBtn3Type?: 'button' | 'submit';
|
|
19
|
-
size?: 'large' | 'medium' | 'small' | 'rlarge';
|
|
19
|
+
size?: 'large' | 'medium' | 'small' | 'rlarge' | 'xlarge' | 'rxlarge';
|
|
20
20
|
scrollVisibleType?: ScrollVisibleType;
|
|
21
21
|
onClickMBtn1?: () => void;
|
|
22
22
|
onClickMBtn2?: () => void;
|
|
@@ -75,7 +75,8 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
|
|
|
75
75
|
return theme.ui_cpnt_modal_dimmed;
|
|
76
76
|
}, animationStyle_1.modalOverlayOnAni);
|
|
77
77
|
var rlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-width: 1400px;\n min-width: 960px;\n"], ["\n max-width: 1400px;\n min-width: 960px;\n"])));
|
|
78
|
-
var
|
|
78
|
+
var rxlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-width: 1200px;\n"], ["\n min-width: 1200px;\n"])));
|
|
79
|
+
var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n left: 50%;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 24px;\n box-shadow: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n left: 50%;\n position: fixed;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", ";\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
|
|
79
80
|
var theme = _a.theme;
|
|
80
81
|
return theme.ui_cpnt_modal_base;
|
|
81
82
|
}, function (_a) {
|
|
@@ -90,23 +91,28 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_3 || (templa
|
|
|
90
91
|
large: '960px',
|
|
91
92
|
medium: '688px',
|
|
92
93
|
small: '400px',
|
|
93
|
-
rlarge: '80vw'
|
|
94
|
+
rlarge: '80vw',
|
|
95
|
+
xlarge: '1200px',
|
|
96
|
+
rxlarge: '80vw'
|
|
94
97
|
};
|
|
95
98
|
return size && sizes[size];
|
|
96
99
|
}, function (_a) {
|
|
97
100
|
var size = _a.size;
|
|
98
101
|
return size === 'rlarge' && rlarge;
|
|
102
|
+
}, function (_a) {
|
|
103
|
+
var size = _a.size;
|
|
104
|
+
return size === 'rxlarge' && rxlarge;
|
|
99
105
|
}, animationStyle_1.modalOnAni);
|
|
100
|
-
var S_Left = styled_components_1.default.div(
|
|
106
|
+
var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
101
107
|
var theme = _a.theme;
|
|
102
108
|
return theme.spacing.spacingB;
|
|
103
109
|
});
|
|
104
|
-
var S_Btn2Wrapper = styled_components_1.default.div(
|
|
110
|
+
var S_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
105
111
|
var theme = _a.theme;
|
|
106
112
|
return theme.spacing.spacingB;
|
|
107
113
|
});
|
|
108
|
-
var S_Right = styled_components_1.default.div(
|
|
109
|
-
var S_Header = styled_components_1.default.div(
|
|
114
|
+
var S_Right = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
115
|
+
var S_Header = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
|
|
110
116
|
var theme = _a.theme;
|
|
111
117
|
return theme.spacing.spacingC;
|
|
112
118
|
}, function (_a) {
|
|
@@ -119,7 +125,7 @@ var S_Header = styled_components_1.default.div(templateObject_7 || (templateObje
|
|
|
119
125
|
var theme = _a.theme;
|
|
120
126
|
return theme.spacing.spacingE;
|
|
121
127
|
});
|
|
122
|
-
var S_Body = styled_components_1.default.div(
|
|
128
|
+
var S_Body = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n max-height: 60vh;\n overflow: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n ", ";\n"], ["\n flex: 1;\n max-height: 60vh;\n overflow: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n ", ";\n"])), function (_a) {
|
|
123
129
|
var bodyOverflowType = _a.bodyOverflowType;
|
|
124
130
|
return bodyOverflowType;
|
|
125
131
|
}, function (_a) {
|
|
@@ -144,9 +150,9 @@ var S_Body = styled_components_1.default.div(templateObject_9 || (templateObject
|
|
|
144
150
|
}[scrollVisibleType];
|
|
145
151
|
}, function (_a) {
|
|
146
152
|
var bodySpacingMode = _a.bodySpacingMode;
|
|
147
|
-
return bodySpacingMode === 'none' && (0, styled_components_1.css)(
|
|
153
|
+
return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-bottom: 0;\n padding-left: 0;\n padding-right: 0;\n "], ["\n padding-bottom: 0;\n padding-left: 0;\n padding-right: 0;\n "])));
|
|
148
154
|
});
|
|
149
|
-
var S_Footer = styled_components_1.default.div(
|
|
155
|
+
var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-top: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n border-top: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
|
|
150
156
|
var theme = _a.theme;
|
|
151
157
|
return theme.ui_cpnt_modal_border;
|
|
152
158
|
}, function (_a) {
|
|
@@ -163,4 +169,4 @@ var S_Footer = styled_components_1.default.div(templateObject_10 || (templateObj
|
|
|
163
169
|
return theme.spacing.spacingD;
|
|
164
170
|
});
|
|
165
171
|
exports.default = DesktopBasicModal;
|
|
166
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
172
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -16,7 +16,7 @@ var LottieIcon = function (_a) {
|
|
|
16
16
|
var animationData = lotties_1.default[iconName];
|
|
17
17
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_Lottie, { "x-pds-name": "LottieIcon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", animationData: animationData, lottieRef: lottieRef, autoplay: autoplayMode === 'use' ? true : false, loop: loopMode === 'use' ? true : false, "$size": size, onComplete: onComplete }) }));
|
|
18
18
|
};
|
|
19
|
-
var S_Lottie = (0, styled_components_1.default)(lottie_react_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
19
|
+
var S_Lottie = (0, styled_components_1.default)(lottie_react_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n"], ["\n height: ", ";\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n"])), function (_a) {
|
|
20
20
|
var $size = _a.$size;
|
|
21
21
|
return "".concat($size, "px");
|
|
22
22
|
}, function (_a) {
|