pds-dev-kit-web 2.2.43 → 2.2.45

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 (16) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
  3. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  4. package/dist/src/common/styles/colorSet/index.d.ts +5 -2
  5. package/dist/src/common/styles/colorSet/index.js +2 -2
  6. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  7. package/dist/src/desktop/components/ChatList/ChatList.d.ts +8 -1
  8. package/dist/src/desktop/components/ChatList/ChatList.js +3 -3
  9. package/dist/src/desktop/components/ChatList/Header.d.ts +2 -2
  10. package/dist/src/desktop/components/ChatList/Header.js +18 -3
  11. package/dist/src/mobile/components/ChatList/ChatList.d.ts +8 -1
  12. package/dist/src/mobile/components/ChatList/ChatList.js +3 -3
  13. package/dist/src/mobile/components/ChatList/Header.d.ts +2 -2
  14. package/dist/src/mobile/components/ChatList/Header.js +15 -3
  15. package/package.json +1 -1
  16. package/release-note.md +8 -3
package/dist/src/common/styles/colorSet/PaletteColor_Dark.json CHANGED
@@ -345,5 +345,6 @@
345
345
  "sys_text_white_02": "white/opacity50",
346
346
  "sys_component_base_45": "darkgreen300",
347
347
  "sys_component_base_46": "black/opacity90",
348
- "sys_cpnt_list_chatbubble_download_button_base": "white/opacity20"
348
+ "sys_cpnt_list_chatbubble_download_button_base": "white/opacity20",
349
+ "sys_cpnt_sheet_base_11": "darkgrey10"
349
350
  }
package/dist/src/common/styles/colorSet/PaletteColor_light.json CHANGED
@@ -345,5 +345,6 @@
345
345
  "sys_text_white_02": "white/opacity50",
346
346
  "sys_component_base_45": "green300",
347
347
  "sys_component_base_46": "black/opacity90",
348
- "sys_cpnt_list_chatbubble_download_button_base": "black/opacity40"
348
+ "sys_cpnt_list_chatbubble_download_button_base": "black/opacity40",
349
+ "sys_cpnt_sheet_base_11": "grey10"
349
350
  }
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -842,5 +842,6 @@
842
842
  "ui_contentscontainer03_background": "sys_container_background_01",
843
843
  "ui_contents_dimmed": "sys_component_base_46",
844
844
  "ui_cpnt_list_chatbubble_base_transparent": "sys_component_base_white_opacity00",
845
- "ui_cpnt_list_chatbubble_download_button_base": "sys_cpnt_list_chatbubble_download_button_base"
845
+ "ui_cpnt_list_chatbubble_download_button_base": "sys_cpnt_list_chatbubble_download_button_base",
846
+ "ui_111": "sys_cpnt_sheet_base_11"
846
847
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -119,7 +119,7 @@ declare const colorSet: {
119
119
  grey300: string;
120
120
  darkgrey300: string;
121
121
  };
122
- readonly PaletteColor_light: {
122
+ readonly PaletteColor_Dark: {
123
123
  sys_container_background_01: string;
124
124
  sys_container_background_02: string;
125
125
  sys_container_background_03: string;
@@ -467,8 +467,9 @@ declare const colorSet: {
467
467
  sys_component_base_45: string;
468
468
  sys_component_base_46: string;
469
469
  sys_cpnt_list_chatbubble_download_button_base: string;
470
+ sys_cpnt_sheet_base_11: string;
470
471
  };
471
- readonly PaletteColor_Dark: {
472
+ readonly PaletteColor_light: {
472
473
  sys_container_background_01: string;
473
474
  sys_container_background_02: string;
474
475
  sys_container_background_03: string;
@@ -816,6 +817,7 @@ declare const colorSet: {
816
817
  sys_component_base_45: string;
817
818
  sys_component_base_46: string;
818
819
  sys_cpnt_list_chatbubble_download_button_base: string;
820
+ sys_cpnt_sheet_base_11: string;
819
821
  };
820
822
  readonly UIColor: {
821
823
  ui_cpnt_button_fill_base_primary: string;
@@ -1662,6 +1664,7 @@ declare const colorSet: {
1662
1664
  ui_contents_dimmed: string;
1663
1665
  ui_cpnt_list_chatbubble_base_transparent: string;
1664
1666
  ui_cpnt_list_chatbubble_download_button_base: string;
1667
+ ui_111: string;
1665
1668
  };
1666
1669
  };
1667
1670
  export default colorSet;
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -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"));
9
8
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
+ var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_light: PaletteColor_light_json_1.default,
14
13
  PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
+ PaletteColor_light: PaletteColor_light_json_1.default,
15
15
  UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -843,4 +843,5 @@ export interface UITheme {
843
843
  ui_contents_dimmed: string;
844
844
  ui_cpnt_list_chatbubble_base_transparent: string;
845
845
  ui_cpnt_list_chatbubble_download_button_base: string;
846
+ ui_111: string;
846
847
  }
package/dist/src/desktop/components/ChatList/ChatList.d.ts CHANGED
@@ -6,10 +6,15 @@ export type Props = {
6
6
  titleText?: PDSTextType;
7
7
  descText?: PDSTextType;
8
8
  captionText?: PDSTextType;
9
+ onClickCaptionText?: () => void;
9
10
  titleStyleTheme?: 'headingBold' | 'subTitleBold';
10
- headerDisplayType?: 'none' | 'ibtn1';
11
+ headerDisplayType?: 'none' | 'ibtn1' | 'ibtn2' | 'ibtn3';
11
12
  headerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
12
13
  headerIBtn1IconFillType?: 'line' | 'fill';
14
+ headerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
15
+ headerIBtn2IconFillType?: 'line' | 'fill';
16
+ headerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
17
+ headerIBtn3IconFillType?: 'line' | 'fill';
13
18
  children?: React.ReactNode;
14
19
  bodyChildren?: React.ReactNode;
15
20
  textFieldState?: 'normal' | 'read_only' | 'disabled';
@@ -41,6 +46,8 @@ export type Props = {
41
46
  onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
42
47
  onSubmit: (value: string) => void;
43
48
  onClickHeaderIBtn1?: () => void;
49
+ onClickHeaderIBtn2?: () => void;
50
+ onClickHeaderIBtn3?: () => void;
44
51
  };
45
52
  declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
46
53
  export default ChatList;
package/dist/src/desktop/components/ChatList/ChatList.js CHANGED
@@ -55,14 +55,14 @@ var baseBackgroundColors = {
55
55
  transparent: 'ui_cpnt_list_base_area_transparent'
56
56
  };
57
57
  var ChatList = react_1.default.forwardRef(function (_a, ref) {
58
- var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, bodyChildren = _a.bodyChildren, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
58
+ var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, headerIBtn2IconName = _a.headerIBtn2IconName, _h = _a.headerIBtn2IconFillType, headerIBtn2IconFillType = _h === void 0 ? 'line' : _h, headerIBtn3IconName = _a.headerIBtn3IconName, _j = _a.headerIBtn3IconFillType, headerIBtn3IconFillType = _j === void 0 ? 'line' : _j, children = _a.children, bodyChildren = _a.bodyChildren, _k = _a.textFieldState, textFieldState = _k === void 0 ? 'normal' : _k, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'moving' : _l, footerChildren = _a.footerChildren, _m = _a.submitIBtnState, submitIBtnState = _m === void 0 ? 'normal' : _m, bodyMBtnText = _a.bodyMBtnText, _o = _a.bodySpacingMode, bodySpacingMode = _o === void 0 ? 'none' : _o, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _p = _a.footerIBtn1State, footerIBtn1State = _p === void 0 ? 'normal' : _p, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _q = _a.footerIBtn1Type, footerIBtn1Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _r = _a.footerIBtn2State, footerIBtn2State = _r === void 0 ? 'normal' : _r, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _s = _a.footerIBtn2Type, footerIBtn2Type = _s === void 0 ? 'button' : _s, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _t = _a.footerIBtn3State, footerIBtn3State = _t === void 0 ? 'normal' : _t, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _u = _a.footerIBtn3Type, footerIBtn3Type = _u === void 0 ? 'button' : _u, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
59
59
  var methods = (0, react_hook_form_1.useForm)({
60
60
  mode: 'onChange',
61
61
  defaultValues: {
62
62
  chat: ''
63
63
  }
64
64
  });
65
- var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isDirty = _t.isDirty, isValid = _t.isValid, isSubmitSuccessful = _t.isSubmitSuccessful;
65
+ var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _v = methods.formState, isDirty = _v.isDirty, isValid = _v.isValid, isSubmitSuccessful = _v.isSubmitSuccessful;
66
66
  /**
67
67
  * @when 폼 submit이 성공적으로 완료 되었을 때
68
68
  * @expected 폼을 초기화합니다.
@@ -90,7 +90,7 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
90
90
  var callBackAfterScrollToBottom = function () {
91
91
  reset();
92
92
  };
93
- return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
93
+ return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, onClickCaptionText: onClickCaptionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, headerIBtn2IconName: headerIBtn2IconName, headerIBtn2IconFillType: headerIBtn2IconFillType, headerIBtn3IconName: headerIBtn3IconName, headerIBtn3IconFillType: headerIBtn3IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1, onClickHeaderIBtn2: onClickHeaderIBtn2, onClickHeaderIBtn3: onClickHeaderIBtn3 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
94
94
  });
95
95
  var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_a) {
96
96
  var backgroundColor = _a.backgroundColor, theme = _a.theme;
package/dist/src/desktop/components/ChatList/Header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import type { Props as ChatListProps } from './ChatList';
3
- type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'onClickHeaderIBtn1'>;
4
- declare function Header({ colorTheme, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, onClickHeaderIBtn1 }: Props): JSX.Element;
3
+ type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'headerIBtn2IconName' | 'headerIBtn2IconFillType' | 'headerIBtn3IconName' | 'headerIBtn3IconFillType' | 'onClickHeaderIBtn1' | 'onClickHeaderIBtn2' | 'onClickHeaderIBtn3' | 'onClickCaptionText'>;
4
+ declare function Header({ colorTheme, titleText, descText, captionText, onClickCaptionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, headerIBtn2IconName, headerIBtn2IconFillType, headerIBtn3IconName, headerIBtn3IconFillType, onClickHeaderIBtn1, onClickHeaderIBtn2, onClickHeaderIBtn3 }: Props): JSX.Element;
5
5
  export default Header;
package/dist/src/desktop/components/ChatList/Header.js CHANGED
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
6
17
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
19
  };
@@ -23,8 +34,8 @@ var iconColors = {
23
34
  transparent: 'ui_cpnt_button_icon_white'
24
35
  };
25
36
  function Header(_a) {
26
- var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
27
- return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })] }))] }), headerDisplayType === 'ibtn1' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
37
+ var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3;
38
+ return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText, "$cursor": onClickCaptionText ? 'pointer' : 'default' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn3' && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' || headerDisplayType === 'ibtn3') && headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
28
39
  }
29
40
  var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
30
41
  var theme = _a.theme;
@@ -40,5 +51,9 @@ var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 ||
40
51
  return theme.spacing.spacingD;
41
52
  });
42
53
  var S_HeaderLeftBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
54
+ var S_CaptionTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: ", ";\n width: fit-content;\n"], ["\n cursor: ", ";\n width: fit-content;\n"])), function (_a) {
55
+ var $cursor = _a.$cursor;
56
+ return $cursor;
57
+ });
43
58
  exports.default = Header;
44
- var templateObject_1, templateObject_2;
59
+ var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/mobile/components/ChatList/ChatList.d.ts CHANGED
@@ -6,10 +6,15 @@ export type Props = {
6
6
  titleText?: PDSTextType;
7
7
  descText?: PDSTextType;
8
8
  captionText?: PDSTextType;
9
+ onClickCaptionText?: () => void;
9
10
  titleStyleTheme?: 'headingBold' | 'subTitleBold';
10
- headerDisplayType?: 'none' | 'ibtn1';
11
+ headerDisplayType?: 'none' | 'ibtn1' | 'ibtn2' | 'ibtn3';
11
12
  headerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
12
13
  headerIBtn1IconFillType?: 'line' | 'fill';
14
+ headerIBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
15
+ headerIBtn2IconFillType?: 'line' | 'fill';
16
+ headerIBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
17
+ headerIBtn3IconFillType?: 'line' | 'fill';
13
18
  children?: React.ReactNode;
14
19
  bodyChildren?: React.ReactNode;
15
20
  textFieldState?: 'normal' | 'read_only' | 'disabled';
@@ -41,6 +46,8 @@ export type Props = {
41
46
  onClickFooterIBtn3?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
42
47
  onSubmit: (value: string) => void;
43
48
  onClickHeaderIBtn1?: () => void;
49
+ onClickHeaderIBtn2?: () => void;
50
+ onClickHeaderIBtn3?: () => void;
44
51
  };
45
52
  declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
46
53
  export default ChatList;
package/dist/src/mobile/components/ChatList/ChatList.js CHANGED
@@ -55,14 +55,14 @@ var baseBackgroundColors = {
55
55
  transparent: 'ui_cpnt_list_base_area_transparent'
56
56
  };
57
57
  var ChatList = react_1.default.forwardRef(function (_a, ref) {
58
- var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, bodyChildren = _a.bodyChildren, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
58
+ var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, headerIBtn2IconName = _a.headerIBtn2IconName, _h = _a.headerIBtn2IconFillType, headerIBtn2IconFillType = _h === void 0 ? 'line' : _h, headerIBtn3IconName = _a.headerIBtn3IconName, _j = _a.headerIBtn3IconFillType, headerIBtn3IconFillType = _j === void 0 ? 'line' : _j, children = _a.children, bodyChildren = _a.bodyChildren, _k = _a.textFieldState, textFieldState = _k === void 0 ? 'normal' : _k, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'moving' : _l, footerChildren = _a.footerChildren, _m = _a.submitIBtnState, submitIBtnState = _m === void 0 ? 'normal' : _m, bodyMBtnText = _a.bodyMBtnText, _o = _a.bodySpacingMode, bodySpacingMode = _o === void 0 ? 'none' : _o, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _p = _a.footerIBtn1State, footerIBtn1State = _p === void 0 ? 'normal' : _p, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _q = _a.footerIBtn1Type, footerIBtn1Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _r = _a.footerIBtn2State, footerIBtn2State = _r === void 0 ? 'normal' : _r, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _s = _a.footerIBtn2Type, footerIBtn2Type = _s === void 0 ? 'button' : _s, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _t = _a.footerIBtn3State, footerIBtn3State = _t === void 0 ? 'normal' : _t, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _u = _a.footerIBtn3Type, footerIBtn3Type = _u === void 0 ? 'button' : _u, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
59
59
  var methods = (0, react_hook_form_1.useForm)({
60
60
  mode: 'onChange',
61
61
  defaultValues: {
62
62
  chat: ''
63
63
  }
64
64
  });
65
- var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isValid = _t.isValid, isDirty = _t.isDirty, isSubmitSuccessful = _t.isSubmitSuccessful;
65
+ var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _v = methods.formState, isValid = _v.isValid, isDirty = _v.isDirty, isSubmitSuccessful = _v.isSubmitSuccessful;
66
66
  /**
67
67
  * @when 폼 제출에 성공했을 시
68
68
  * @expected 폼을 초기화합니다.
@@ -90,7 +90,7 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
90
90
  var callBackAfterScrollToBottom = function () {
91
91
  reset();
92
92
  };
93
- return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
93
+ return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, onClickCaptionText: onClickCaptionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, headerIBtn2IconName: headerIBtn2IconName, headerIBtn2IconFillType: headerIBtn2IconFillType, headerIBtn3IconName: headerIBtn3IconName, headerIBtn3IconFillType: headerIBtn3IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1, onClickHeaderIBtn2: onClickHeaderIBtn2, onClickHeaderIBtn3: onClickHeaderIBtn3 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
94
94
  });
95
95
  var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_a) {
96
96
  var backgroundColor = _a.backgroundColor, theme = _a.theme;
package/dist/src/mobile/components/ChatList/Header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import type { Props as ChatListProps } from './ChatList';
3
- type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'onClickHeaderIBtn1'>;
4
- declare function Header({ colorTheme, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, onClickHeaderIBtn1 }: Props): JSX.Element;
3
+ type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'headerIBtn2IconName' | 'headerIBtn2IconFillType' | 'headerIBtn3IconName' | 'headerIBtn3IconFillType' | 'onClickHeaderIBtn1' | 'onClickHeaderIBtn2' | 'onClickHeaderIBtn3' | 'onClickCaptionText'>;
4
+ declare function Header({ colorTheme, titleText, descText, captionText, onClickCaptionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, headerIBtn2IconName, headerIBtn2IconFillType, headerIBtn3IconName, headerIBtn3IconFillType, onClickHeaderIBtn1, onClickHeaderIBtn2, onClickHeaderIBtn3 }: Props): JSX.Element;
5
5
  export default Header;
package/dist/src/mobile/components/ChatList/Header.js CHANGED
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
6
17
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
19
  };
@@ -23,8 +34,8 @@ var iconColors = {
23
34
  transparent: 'ui_cpnt_button_icon_white'
24
35
  };
25
36
  function Header(_a) {
26
- var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1;
27
- return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" })] }))] }), headerDisplayType === 'ibtn1' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
37
+ var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3;
38
+ return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn3' && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' || headerDisplayType === 'ibtn3') && headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
28
39
  }
29
40
  var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
30
41
  var theme = _a.theme;
@@ -40,5 +51,6 @@ var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 ||
40
51
  return theme.spacing.spacingD;
41
52
  });
42
53
  var S_HeaderLeftBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
54
+ var S_CaptionTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: fit-content;\n"], ["\n width: fit-content;\n"])));
43
55
  exports.default = Header;
44
- var templateObject_1, templateObject_2;
56
+ var templateObject_1, templateObject_2, templateObject_3;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.43",
3
+ "version": "2.2.45",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,12 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.43]
2
+ ## [v2.2.45]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### component
6
- * ChatBubbleListItem
7
- * downloadIBtn 디자인 변경
6
+ * ChatList
7
+ * headerIBtn2IconName prop 추가
8
+ * headerIBtn3IconName prop 추가
9
+ * headerIBtn2IconFillType prop 추가
10
+ * headerIBtn3IconFillType prop 추가
11
+ * onClickHeaderIBtn2 prop 추가
12
+ * onClickHeaderIBtn3 prop 추가