pds-dev-kit-web 1.3.7 → 1.3.10

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 (38) hide show
  1. package/dist/src/common/assets/icons/line/ArrowLeftThin.d.ts +4 -0
  2. package/dist/src/common/assets/icons/line/ArrowLeftThin.js +34 -0
  3. package/dist/src/common/assets/icons/line/ArrowRightThin.d.ts +4 -0
  4. package/dist/src/common/assets/icons/line/ArrowRightThin.js +34 -0
  5. package/dist/src/common/assets/icons/line/Download.d.ts +4 -0
  6. package/dist/src/common/assets/icons/line/Download.js +34 -0
  7. package/dist/src/common/assets/icons/line/Folder.d.ts +4 -0
  8. package/dist/src/common/assets/icons/line/Folder.js +34 -0
  9. package/dist/src/common/assets/icons/line/Question.d.ts +4 -0
  10. package/dist/src/common/assets/icons/line/Question.js +34 -0
  11. package/dist/src/common/assets/icons/line/index.d.ts +5 -0
  12. package/dist/src/common/assets/icons/line/index.js +10 -0
  13. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +5 -1
  14. package/dist/src/common/styles/colorSet/PaletteColor_light.json +5 -1
  15. package/dist/src/common/styles/colorSet/UIColor.json +9 -1
  16. package/dist/src/common/styles/colorSet/index.d.ts +168 -152
  17. package/dist/src/common/styles/colorSet/index.js +3 -3
  18. package/dist/src/common/styles/colorSet/ui-type.d.ts +8 -0
  19. package/dist/src/common/styles/theme.js +1 -1
  20. package/dist/src/common/styles/ui-colors.d.ts +3 -1
  21. package/dist/src/common/styles/ui-colors.js +5 -4
  22. package/dist/src/desktop/components/AdminList/AdminList.d.ts +3 -2
  23. package/dist/src/desktop/components/AdminList/AdminList.js +53 -17
  24. package/dist/src/desktop/components/AdminList/HeaderRow.d.ts +1 -1
  25. package/dist/src/desktop/components/AdminList/HeaderRow.js +2 -2
  26. package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts +1 -1
  27. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +9 -8
  28. package/dist/src/desktop/components/Checkbox/Checkbox.js +2 -1
  29. package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.d.ts +4 -1
  30. package/dist/src/desktop/components/DesktopBasicModal/DesktopBasicModal.js +4 -4
  31. package/dist/src/desktop/components/Dropdown/Dropdown.d.ts +2 -2
  32. package/dist/src/desktop/components/Dropdown/Dropdown.js +3 -3
  33. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +4 -1
  34. package/dist/src/desktop/components/TextLabel/TextLabel.js +73 -8
  35. package/dist/src/mobile/components/Dropdown/Dropdown.d.ts +2 -2
  36. package/dist/src/mobile/components/Dropdown/Dropdown.js +2 -2
  37. package/package.json +1 -1
  38. package/release-note.md +5 -13
@@ -56,6 +56,162 @@ declare const colorSet: {
56
56
  grey30: string;
57
57
  opacity95: string;
58
58
  };
59
+ readonly PaletteColor_light: {
60
+ sys_container_background_01: string;
61
+ sys_container_background_02: string;
62
+ sys_container_background_03: string;
63
+ sys_background_dimmed: string;
64
+ sys_text_grey_01: string;
65
+ sys_text_grey_02: string;
66
+ sys_text_grey_03: string;
67
+ sys_text_white: string;
68
+ sys_text_brand_primary: string;
69
+ sys_text_error_01: string;
70
+ sys_widget_grey_01: string;
71
+ sys_widget_grey_02: string;
72
+ sys_widget_grey_03: string;
73
+ sys_widget_primary_01: string;
74
+ sys_widget_error_01: string;
75
+ sys_widget_warning_01: string;
76
+ sys_widget_success_01: string;
77
+ sys_widget_white: string;
78
+ sys_border_area_01: string;
79
+ sys_border_line_01: string;
80
+ sys_border_line_02: string;
81
+ sys_border_line_03: string;
82
+ sys_border_line_04: string;
83
+ sys_border_line_05: string;
84
+ sys_component_base_01: string;
85
+ sys_component_base_02: string;
86
+ sys_component_base_03: string;
87
+ sys_component_base_red: string;
88
+ sys_component_base_white: string;
89
+ sys_component_base_white_opacity00: string;
90
+ sys_on_base_white_opacity00: string;
91
+ sys_on_base_white_opacity30: string;
92
+ sys_on_base_black_opacity20: string;
93
+ usr_brand_primary: string;
94
+ usr_brand_secondary: string;
95
+ usr_brand_secondary_variant: string;
96
+ usr_background: string;
97
+ usr_surface: string;
98
+ usr_border: string;
99
+ usr_on_brand_primary: string;
100
+ usr_on_brand_secondary: string;
101
+ usr_on_background: string;
102
+ usr_on_surface: string;
103
+ sys_widget_status_active_01: string;
104
+ sys_text_success_01: string;
105
+ sys_widget_grey_04: string;
106
+ sys_text_active: string;
107
+ sys_component_base_blue: string;
108
+ sys_on_base_black_opacity65: string;
109
+ sys_component_base_04: string;
110
+ sys_component_base_black: string;
111
+ sys_component_base_black_opacity00: string;
112
+ usr_text_brand_secondary_variant: string;
113
+ usr_text_brand_primary: string;
114
+ usr_text_brand_on_primary: string;
115
+ sys_text_brand_secondary_variant: string;
116
+ sys_component_base_navy: string;
117
+ sys_widget_lightgreen: string;
118
+ sys_border_line_06: string;
119
+ sys_background_dimmed_20: string;
120
+ sys_widget_pink: string;
121
+ sys_widget_primary_opacity20: string;
122
+ sys_widget_secondary_variant_01: string;
123
+ usr_component_base_brand_primary_opacity10: string;
124
+ sys_temp_grey_01: string;
125
+ sys_temp_grey_02: string;
126
+ sys_temp_grey_03: string;
127
+ sys_temp_grey_04: string;
128
+ sys_temp_grey_05: string;
129
+ sys_temp_white: string;
130
+ sys_temp_primary_01: string;
131
+ sys_temp_secondary_01: string;
132
+ sys_temp_red: string;
133
+ sys_temp_white_opacity_00: string;
134
+ sys_temp_dimmed: string;
135
+ sys_temp_black: string;
136
+ sys_temp_primary_02: string;
137
+ sys_temp_primary_03: string;
138
+ sys_temp_secondary_02: string;
139
+ sys_temp_lightgreen_01: string;
140
+ sys_text_grey_04: string;
141
+ sys_papp_post_social_background: string;
142
+ sys_papp_post_notice_background: string;
143
+ sys_papp_post_free_background: string;
144
+ sys_papp_vod_background: string;
145
+ sys_papp_vodplus_background: string;
146
+ sys_papp_live_background: string;
147
+ sys_selcontrols_base_off_disabled: string;
148
+ sys_selcontrols_base_on_disabled: string;
149
+ sys_component_base_blue_opacity10: string;
150
+ sys_component_base_05: string;
151
+ sys_background_dimmed_65: string;
152
+ sys_temp_grey_06: string;
153
+ sys_on_base_white_opacity10: string;
154
+ sys_on_base_black_opacity10: string;
155
+ sys_component_base_05_opacity00: string;
156
+ sys_papp_post_notice_link: string;
157
+ sys_component_base_navy_light: string;
158
+ sys_component_base_orange: string;
159
+ sys_component_base_grey: string;
160
+ sys_component_base_black_opacity80: string;
161
+ sys_text_darkgrey_02: string;
162
+ sys_border_line_darktheme_01: string;
163
+ sys_border_line_darktheme_02: string;
164
+ sys_component_base_darktheme_01: string;
165
+ sys_component_base_darktheme_02: string;
166
+ sys_component_base_darktheme_03: string;
167
+ sys_text_grey_darktheme_01: string;
168
+ sys_text_grey_darktheme_02: string;
169
+ sys_text_grey_darktheme_03: string;
170
+ sys_widget_grey_darktheme_01: string;
171
+ sys_widget_grey_darktheme_02: string;
172
+ sys_widget_grey_darktheme_03: string;
173
+ sys_component_base_green: string;
174
+ sys_text_error_darktheme_01: string;
175
+ sys_border_line_darktheme_03: string;
176
+ sys_border_line_darktheme_04: string;
177
+ usr_widget_brand_primary_darktheme_01: string;
178
+ usr_text_brand_primary_darktheme_01: string;
179
+ sys_component_base_black_opacity50: string;
180
+ sys_component_base_card: string;
181
+ sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
182
+ sys_widget_green_01: string;
183
+ sys_component_base_black_opacity30: string;
184
+ sys_area_background: string;
185
+ sys_border_white_opacity30: string;
186
+ sys_container_background_wt: string;
187
+ sys_channeldesc_grey_03: string;
188
+ sys_channeldesc_border_grey_03: string;
189
+ sys_gradient_base_01: string;
190
+ sys_gradient_base_01_opacity00: string;
191
+ sys_channeldesc_background: string;
192
+ sys_channeldesc_bottomsheet_base: string;
193
+ sys_channeldesc_bottomsheet_border: string;
194
+ sys_channeldesc_contents_base: string;
195
+ sys_channeldesc_dimmed: string;
196
+ sys_gradient_base_01_opacity50: string;
197
+ sys_gradient_base_01_opacity75: string;
198
+ sys_gradient_base_01_opacity40: string;
199
+ sys_widget_black: string;
200
+ usr_temp_primary_01: string;
201
+ sys_cpnt_sheet_base_02_opacity50: string;
202
+ usr_menu_primarymenu_main: string;
203
+ usr_menu_primarymenu_sub: string;
204
+ usr_menu_secondarymenu_main: string;
205
+ usr_menu_secondarymenu_sub: string;
206
+ usr_menu_hover: string;
207
+ usr_menu_active: string;
208
+ usr_menu_background: string;
209
+ sys_cpnt_base_white_opacity50: string;
210
+ sys_widget_dark_01: string;
211
+ usr_menu_background_gradient_opacity00: string;
212
+ sys_border_line_white: string;
213
+ sys_component_base_white_opacity10: string;
214
+ };
59
215
  readonly UIColor: {
60
216
  ui_cpnt_button_fill_base_primary: string;
61
217
  ui_cpnt_button_fill_base_default: string;
@@ -537,6 +693,14 @@ declare const colorSet: {
537
693
  ui_menu_active: string;
538
694
  ui_menu_background: string;
539
695
  ui_cpnt_video_progress_base: string;
696
+ ui_cpnt_icon_sys_dark: string;
697
+ ui_menu_background_gradient_opacity00: string;
698
+ ui_cpnt_dropdown_border_white_normal: string;
699
+ ui_cpnt_dropdown_text_white_enabled: string;
700
+ ui_cpnt_dropdown_text_white_hint: string;
701
+ ui_cpnt_dropdown_icon_white_default: string;
702
+ ui_cpnt_dropdown_border_white_focus: string;
703
+ ui_cpnt_dropdown_base_white_normal: string;
540
704
  };
541
705
  readonly PaletteColor_Dark: {
542
706
  sys_container_background_01: string;
@@ -689,158 +853,10 @@ declare const colorSet: {
689
853
  usr_menu_active: string;
690
854
  usr_menu_background: string;
691
855
  sys_cpnt_base_white_opacity50: string;
692
- };
693
- readonly PaletteColor_light: {
694
- sys_container_background_01: string;
695
- sys_container_background_02: string;
696
- sys_container_background_03: string;
697
- sys_background_dimmed: string;
698
- sys_text_grey_01: string;
699
- sys_text_grey_02: string;
700
- sys_text_grey_03: string;
701
- sys_text_white: string;
702
- sys_text_brand_primary: string;
703
- sys_text_error_01: string;
704
- sys_widget_grey_01: string;
705
- sys_widget_grey_02: string;
706
- sys_widget_grey_03: string;
707
- sys_widget_primary_01: string;
708
- sys_widget_error_01: string;
709
- sys_widget_warning_01: string;
710
- sys_widget_success_01: string;
711
- sys_widget_white: string;
712
- sys_border_area_01: string;
713
- sys_border_line_01: string;
714
- sys_border_line_02: string;
715
- sys_border_line_03: string;
716
- sys_border_line_04: string;
717
- sys_border_line_05: string;
718
- sys_component_base_01: string;
719
- sys_component_base_02: string;
720
- sys_component_base_03: string;
721
- sys_component_base_red: string;
722
- sys_component_base_white: string;
723
- sys_component_base_white_opacity00: string;
724
- sys_on_base_white_opacity00: string;
725
- sys_on_base_white_opacity30: string;
726
- sys_on_base_black_opacity20: string;
727
- usr_brand_primary: string;
728
- usr_brand_secondary: string;
729
- usr_brand_secondary_variant: string;
730
- usr_background: string;
731
- usr_surface: string;
732
- usr_border: string;
733
- usr_on_brand_primary: string;
734
- usr_on_brand_secondary: string;
735
- usr_on_background: string;
736
- usr_on_surface: string;
737
- sys_widget_status_active_01: string;
738
- sys_text_success_01: string;
739
- sys_widget_grey_04: string;
740
- sys_text_active: string;
741
- sys_component_base_blue: string;
742
- sys_on_base_black_opacity65: string;
743
- sys_component_base_04: string;
744
- sys_component_base_black: string;
745
- sys_component_base_black_opacity00: string;
746
- usr_text_brand_secondary_variant: string;
747
- usr_text_brand_primary: string;
748
- usr_text_brand_on_primary: string;
749
- sys_text_brand_secondary_variant: string;
750
- sys_component_base_navy: string;
751
- sys_widget_lightgreen: string;
752
- sys_border_line_06: string;
753
- sys_background_dimmed_20: string;
754
- sys_widget_pink: string;
755
- sys_widget_primary_opacity20: string;
756
- sys_widget_secondary_variant_01: string;
757
- usr_component_base_brand_primary_opacity10: string;
758
- sys_temp_grey_01: string;
759
- sys_temp_grey_02: string;
760
- sys_temp_grey_03: string;
761
- sys_temp_grey_04: string;
762
- sys_temp_grey_05: string;
763
- sys_temp_white: string;
764
- sys_temp_primary_01: string;
765
- sys_temp_secondary_01: string;
766
- sys_temp_red: string;
767
- sys_temp_white_opacity_00: string;
768
- sys_temp_dimmed: string;
769
- sys_temp_black: string;
770
- sys_temp_primary_02: string;
771
- sys_temp_primary_03: string;
772
- sys_temp_secondary_02: string;
773
- sys_temp_lightgreen_01: string;
774
- sys_text_grey_04: string;
775
- sys_papp_post_social_background: string;
776
- sys_papp_post_notice_background: string;
777
- sys_papp_post_free_background: string;
778
- sys_papp_vod_background: string;
779
- sys_papp_vodplus_background: string;
780
- sys_papp_live_background: string;
781
- sys_selcontrols_base_off_disabled: string;
782
- sys_selcontrols_base_on_disabled: string;
783
- sys_component_base_blue_opacity10: string;
784
- sys_component_base_05: string;
785
- sys_background_dimmed_65: string;
786
- sys_temp_grey_06: string;
787
- sys_on_base_white_opacity10: string;
788
- sys_on_base_black_opacity10: string;
789
- sys_component_base_05_opacity00: string;
790
- sys_papp_post_notice_link: string;
791
- sys_component_base_navy_light: string;
792
- sys_component_base_orange: string;
793
- sys_component_base_grey: string;
794
- sys_component_base_black_opacity80: string;
795
- sys_text_darkgrey_02: string;
796
- sys_border_line_darktheme_01: string;
797
- sys_border_line_darktheme_02: string;
798
- sys_component_base_darktheme_01: string;
799
- sys_component_base_darktheme_02: string;
800
- sys_component_base_darktheme_03: string;
801
- sys_text_grey_darktheme_01: string;
802
- sys_text_grey_darktheme_02: string;
803
- sys_text_grey_darktheme_03: string;
804
- sys_widget_grey_darktheme_01: string;
805
- sys_widget_grey_darktheme_02: string;
806
- sys_widget_grey_darktheme_03: string;
807
- sys_component_base_green: string;
808
- sys_text_error_darktheme_01: string;
809
- sys_border_line_darktheme_03: string;
810
- sys_border_line_darktheme_04: string;
811
- usr_widget_brand_primary_darktheme_01: string;
812
- usr_text_brand_primary_darktheme_01: string;
813
- sys_component_base_black_opacity50: string;
814
- sys_component_base_card: string;
815
- sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
816
- sys_widget_green_01: string;
817
- sys_component_base_black_opacity30: string;
818
- sys_area_background: string;
819
- sys_border_white_opacity30: string;
820
- sys_container_background_wt: string;
821
- sys_channeldesc_grey_03: string;
822
- sys_channeldesc_border_grey_03: string;
823
- sys_gradient_base_01: string;
824
- sys_gradient_base_01_opacity00: string;
825
- sys_channeldesc_background: string;
826
- sys_channeldesc_bottomsheet_base: string;
827
- sys_channeldesc_bottomsheet_border: string;
828
- sys_channeldesc_contents_base: string;
829
- sys_channeldesc_dimmed: string;
830
- sys_gradient_base_01_opacity50: string;
831
- sys_gradient_base_01_opacity75: string;
832
- sys_gradient_base_01_opacity40: string;
833
- sys_widget_black: string;
834
- usr_temp_primary_01: string;
835
- sys_cpnt_sheet_base_02_opacity50: string;
836
- usr_menu_primarymenu_main: string;
837
- usr_menu_primarymenu_sub: string;
838
- usr_menu_secondarymenu_main: string;
839
- usr_menu_secondarymenu_sub: string;
840
- usr_menu_hover: string;
841
- usr_menu_active: string;
842
- usr_menu_background: string;
843
- sys_cpnt_base_white_opacity50: string;
856
+ sys_widget_dark_01: string;
857
+ usr_menu_background_gradient_opacity00: string;
858
+ sys_border_line_white: string;
859
+ sys_component_base_white_opacity10: string;
844
860
  };
845
861
  };
846
862
  export default colorSet;
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
+ var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
8
9
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
9
10
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
10
- var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
+ PaletteColor_light: PaletteColor_light_json_1.default,
13
14
  UIColor: UIColor_json_1.default,
14
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
15
- PaletteColor_light: PaletteColor_light_json_1.default
15
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
@@ -479,4 +479,12 @@ export interface UITheme {
479
479
  ui_menu_active: string;
480
480
  ui_menu_background: string;
481
481
  ui_cpnt_video_progress_base: string;
482
+ ui_cpnt_icon_sys_dark: string;
483
+ ui_menu_background_gradient_opacity00: string;
484
+ ui_cpnt_dropdown_border_white_normal: string;
485
+ ui_cpnt_dropdown_text_white_enabled: string;
486
+ ui_cpnt_dropdown_text_white_hint: string;
487
+ ui_cpnt_dropdown_icon_white_default: string;
488
+ ui_cpnt_dropdown_border_white_focus: string;
489
+ ui_cpnt_dropdown_base_white_normal: string;
482
490
  }
@@ -95,5 +95,5 @@ exports.spacing = {
95
95
  spacingM: '288px',
96
96
  spacingN: '320px'
97
97
  };
98
- var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK'));
98
+ var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
99
99
  exports.default = theme;
@@ -5,4 +5,6 @@ declare global {
5
5
  PdsUtils: any;
6
6
  }
7
7
  }
8
- export declare const customTheme: (tone: string) => any;
8
+ export declare const customTheme: (tone: string, palette?: {
9
+ [key: string]: string;
10
+ } | undefined) => any;
@@ -28,20 +28,21 @@ function buildCascadedColors(lowLevel, highLevel, override) {
28
28
  // from server (원래는 비동기)
29
29
  var colorSetting = {
30
30
  tone: 'DARK',
31
- customPalette: {
31
+ palette: {
32
32
  usr_good_job: '#999999'
33
33
  }
34
34
  };
35
35
  var phaseTwoJSON = colorSetting.tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
36
36
  // ui-color-build-phase
37
- var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
37
+ var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.palette);
38
38
  exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
39
39
  window.PdsUtils = {
40
40
  tone: 'DARK'
41
41
  };
42
- var customTheme = function (tone) {
42
+ var customTheme = function (tone, palette) {
43
43
  window.PdsUtils.tone = tone;
44
- var buildedColors = buildCascadedColors(buildCascadedColors(colorSet_1.default.SemanticColor, tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark, colorSetting.customPalette), colorSet_1.default.UIColor);
44
+ window.PdsUtils.palette = palette;
45
+ var buildedColors = buildCascadedColors(buildCascadedColors(colorSet_1.default.SemanticColor, tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark, palette), colorSet_1.default.UIColor);
45
46
  return buildedColors;
46
47
  };
47
48
  exports.customTheme = customTheme;
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import { PDSValueOption } from '../../../common';
4
4
  declare type ColumnWidthType = 'small' | 'medium' | 'large';
5
5
  declare type Props = {
6
- selectionMode?: 'none' | 'check';
6
+ selectionMode?: 'none' | 'single' | 'multi';
7
7
  headerRowMode?: 'none' | 'use';
8
8
  column2HeaderText: TFunctionResult;
9
9
  column3HeaderText?: TFunctionResult;
@@ -56,6 +56,7 @@ declare type Props = {
56
56
  children?: React.ReactNode;
57
57
  onSelect?: (ids: number[]) => void;
58
58
  selectedIds?: number[];
59
+ maintainIds?: number[];
59
60
  };
60
- declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickMBtn1, onClickMBtn2, onClickMBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect }: Props): JSX.Element;
61
+ declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickMBtn1, onClickMBtn2, onClickMBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect }: Props): JSX.Element;
61
62
  export default AdminList;
@@ -53,7 +53,7 @@ var TextLabel_1 = require("../TextLabel");
53
53
  var BulkActionBar_1 = __importDefault(require("./BulkActionBar"));
54
54
  var HeaderRow_1 = __importDefault(require("./HeaderRow"));
55
55
  function AdminList(_a) {
56
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'check' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, _t = _a.mBtnMode, mBtnMode = _t === void 0 ? 'mbtn_amount1' : _t, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, emptyText = _a.emptyText, _u = _a.scrollMode, scrollMode = _u === void 0 ? 'infinite' : _u, _v = _a.scrollVisibleType, scrollVisibleType = _v === void 0 ? 'moving' : _v, selectedIds = _a.selectedIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect;
56
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, _t = _a.mBtnMode, mBtnMode = _t === void 0 ? 'mbtn_amount1' : _t, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, emptyText = _a.emptyText, _u = _a.scrollMode, scrollMode = _u === void 0 ? 'infinite' : _u, _v = _a.scrollVisibleType, scrollVisibleType = _v === void 0 ? 'moving' : _v, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect;
57
57
  var selectAllMethods = (0, react_hook_form_1.useForm)();
58
58
  var checkboxMethods = (0, react_hook_form_1.useForm)();
59
59
  var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({ name: 'all', control: selectAllMethods.control });
@@ -67,20 +67,39 @@ function AdminList(_a) {
67
67
  return;
68
68
  }
69
69
  if (!selectedIds.length) {
70
- setIsBulkActionBarOpen(false);
71
70
  checkboxMethods.reset();
72
71
  selectAllMethods.reset();
72
+ if (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.length) {
73
+ setIsBulkActionBarOpen(true);
74
+ maintainIds.forEach(function (id) { return checkboxMethods.setValue(id.toString(), true); });
75
+ }
76
+ else {
77
+ setIsBulkActionBarOpen(false);
78
+ }
79
+ return;
80
+ }
81
+ if (selectionMode === 'single') {
82
+ checkboxMethods.reset();
83
+ checkboxMethods.setValue(selectedIds[0].toString(), true);
73
84
  return;
74
85
  }
75
86
  setIsBulkActionBarOpen(true);
76
87
  selectedIds.forEach(function (val) { return checkboxMethods.setValue(val.toString(), true); });
77
- }, [selectedIds]);
88
+ }, [selectedIds, maintainIds]);
78
89
  var handleSelectAllCheckbox = function () {
90
+ var allIds = Object.keys(checkboxMethods.getValues()).map(function (id) { return Number(id); });
91
+ var basicIds = allIds.filter(function (id) { return !(maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.includes(id)); });
79
92
  if (!isAllCheckboxSelected) {
80
- var allIds = Object.keys(checkboxMethods.getValues()).map(function (id) { return Number(id); });
81
93
  allIds.forEach(function (id) { return checkboxMethods.setValue(id.toString(), true); });
82
94
  if (onSelect) {
83
- onSelect(allIds);
95
+ onSelect(basicIds);
96
+ }
97
+ return;
98
+ }
99
+ if (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.length) {
100
+ basicIds.forEach(function (id) { return checkboxMethods.setValue(id.toString(), false); });
101
+ if (onSelect) {
102
+ onSelect([]);
84
103
  }
85
104
  return;
86
105
  }
@@ -93,17 +112,27 @@ function AdminList(_a) {
93
112
  if (!selectedIds) {
94
113
  return;
95
114
  }
96
- if (!selectedIds.includes(id)) {
97
- checkboxMethods.setValue(id.toString(), true);
98
- if (onSelect) {
99
- onSelect(__spreadArray(__spreadArray([], selectedIds, true), [id], false));
115
+ switch (selectionMode) {
116
+ case 'single': {
117
+ if (onSelect) {
118
+ onSelect([id]);
119
+ }
120
+ break;
121
+ }
122
+ case 'multi': {
123
+ if (!selectedIds.includes(id)) {
124
+ checkboxMethods.setValue(id.toString(), true);
125
+ if (onSelect) {
126
+ onSelect(__spreadArray(__spreadArray([], selectedIds, true), [id], false));
127
+ }
128
+ return;
129
+ }
130
+ var filteredId = selectedIds.filter(function (prevId) { return prevId !== id; });
131
+ checkboxMethods.setValue(id.toString(), false);
132
+ if (onSelect) {
133
+ onSelect(filteredId);
134
+ }
100
135
  }
101
- return;
102
- }
103
- var filteredId = selectedIds.filter(function (prevId) { return prevId !== id; });
104
- checkboxMethods.setValue(id.toString(), false);
105
- if (onSelect) {
106
- onSelect(filteredId);
107
136
  }
108
137
  };
109
138
  var getActionButtonCount = function () {
@@ -118,6 +147,12 @@ function AdminList(_a) {
118
147
  return 0;
119
148
  }
120
149
  };
150
+ var totalItemCount = (0, react_1.useMemo)(function () {
151
+ if (maintainIds && selectedIds) {
152
+ return maintainIds.length + selectedIds.length;
153
+ }
154
+ return (selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) || 0;
155
+ }, [selectedIds, maintainIds]);
121
156
  var childrenWithWidthProps = react_1.default.Children.map(children, function (child) {
122
157
  if (react_1.default.isValidElement(child)) {
123
158
  return react_1.default.cloneElement(child, {
@@ -141,13 +176,14 @@ function AdminList(_a) {
141
176
  onClickQuickActionBtn2: onClickQuickActionBtn2,
142
177
  onClickQuickActionBtn3: onClickQuickActionBtn3,
143
178
  selectionMode: selectionMode,
144
- onClickItem: handleSelectItem
179
+ onClickItem: handleSelectItem,
180
+ selectedState: (maintainIds === null || maintainIds === void 0 ? void 0 : maintainIds.includes(child.props.id)) ? 'maintain' : 'basic'
145
181
  });
146
182
  }
147
183
  return child;
148
184
  });
149
185
  return (react_1.default.createElement(S_AdminList, null,
150
- isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length, dropdownMode: dropdownMode, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, mBtnMode: mBtnMode, mBtn1Text: mBtn1Text, mBtn2Text: mBtn2Text, mBtn3Text: mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickMBtn1: onClickMBtn1, onClickMBtn2: onClickMBtn2, onClickMBtn3: onClickMBtn3 })),
186
+ isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, mBtnMode: mBtnMode, mBtn1Text: mBtn1Text, mBtn2Text: mBtn2Text, mBtn3Text: mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickMBtn1: onClickMBtn1, onClickMBtn2: onClickMBtn2, onClickMBtn3: onClickMBtn3 })),
151
187
  headerRowMode === 'use' && (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, selectAllMethods),
152
188
  react_1.default.createElement("form", null,
153
189
  react_1.default.createElement(HeaderRow_1.default, { selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),
@@ -2,7 +2,7 @@
2
2
  import { TFunctionResult } from 'i18next';
3
3
  declare type ColumnWidthType = 'small' | 'medium' | 'large';
4
4
  declare type Props = {
5
- selectionMode: 'none' | 'check';
5
+ selectionMode: 'none' | 'single' | 'multi';
6
6
  column2HeaderText?: TFunctionResult;
7
7
  column3HeaderText?: TFunctionResult;
8
8
  column3HeaderWidth?: ColumnWidthType;
@@ -32,10 +32,10 @@ var hybrid_1 = require("../../../hybrid");
32
32
  var Checkbox_1 = require("../Checkbox");
33
33
  var TextLabel_1 = require("../TextLabel");
34
34
  function HeaderRow(_a) {
35
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'check' : _b, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
35
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
36
36
  return (react_1.default.createElement(S_HeaderRow, null,
37
37
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
38
- selectionMode === 'check' && (react_1.default.createElement(S_CheckBox, null,
38
+ selectionMode === 'multi' && (react_1.default.createElement(S_CheckBox, null,
39
39
  react_1.default.createElement(Checkbox_1.Checkbox, { name: "all", onChange: onClickSelectAllCheckbox }))),
40
40
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
41
41
  react_1.default.createElement(S_FlexColumn, null,
@@ -5,7 +5,7 @@ declare type ColumnWidthType = 'small' | 'medium' | 'large';
5
5
  declare type ColumnTextType = 'normal' | 'active' | 'inactive' | 'report';
6
6
  declare type Props = {
7
7
  rowSize?: 'high' | 'medium' | 'low';
8
- selectionMode?: 'none' | 'check';
8
+ selectionMode?: 'none' | 'single' | 'multi';
9
9
  column2Type?: 'image_text' | 'text_only';
10
10
  imageSrc?: string;
11
11
  imageShapeType?: 'round' | 'circular' | 'rectangle';