pds-dev-kit-web 1.3.18 → 1.3.19

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 (17) hide show
  1. package/dist/src/desktop/components/BasicList/BasicList.js +1 -17
  2. package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts +12 -10
  3. package/dist/src/desktop/components/BasicListItem/BasicListItem.js +77 -43
  4. package/dist/src/desktop/components/Checkbox/Checkbox.js +3 -1
  5. package/dist/src/desktop/components/Dropdown/Dropdown.js +1 -1
  6. package/dist/src/desktop/components/IconButton/IconButton.d.ts +2 -2
  7. package/dist/src/desktop/components/IconButton/IconButton.js +2 -2
  8. package/dist/src/mobile/components/BasicList/BasicList.js +1 -17
  9. package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts +13 -11
  10. package/dist/src/mobile/components/BasicListItem/BasicListItem.js +74 -48
  11. package/dist/src/mobile/components/Checkbox/Checkbox.d.ts +3 -2
  12. package/dist/src/mobile/components/Checkbox/Checkbox.js +8 -2
  13. package/dist/src/mobile/components/Dropdown/Dropdown.js +1 -1
  14. package/dist/src/mobile/components/IconButton/IconButton.d.ts +2 -2
  15. package/dist/src/mobile/components/IconButton/IconButton.js +3 -6
  16. package/package.json +1 -1
  17. package/release-note.md +16 -10
package/dist/src/desktop/components/BasicList/BasicList.js CHANGED
@@ -3,38 +3,22 @@ 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
- };
17
6
  var __importDefault = (this && this.__importDefault) || function (mod) {
18
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
8
  };
20
9
  Object.defineProperty(exports, "__esModule", { value: true });
21
10
  var react_1 = __importDefault(require("react"));
22
- var react_hook_form_1 = require("react-hook-form");
23
11
  var styled_components_1 = __importDefault(require("styled-components"));
24
- var common_1 = require("../../../common");
25
12
  var hybrid_1 = require("../../../hybrid");
26
13
  var TextLabel_1 = require("../TextLabel");
27
14
  function BasicList(_a) {
28
15
  var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
29
- var methods = (0, react_hook_form_1.useForm)();
30
16
  return (react_1.default.createElement(react_1.default.Fragment, null,
31
17
  (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
32
18
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
33
19
  titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
34
20
  captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
35
- react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
36
- react_1.default.createElement(common_1.Form, null,
37
- react_1.default.createElement(S_BasicListWrapper, { columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, children)))));
21
+ react_1.default.createElement(S_BasicListWrapper, { columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, children)));
38
22
  }
39
23
  var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n padding: ", ";\n"], ["\n margin-bottom: ", ";\n padding: ", ";\n"])), function (_a) {
40
24
  var theme = _a.theme;
package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
3
3
  export declare type BasicListItemProps = {
4
4
  selectionMode?: 'none' | 'check' | 'radio';
@@ -12,7 +12,7 @@ export declare type BasicListItemProps = {
12
12
  imageSrc?: string;
13
13
  iconName?: FillIconNameKeys | LineIconNameKeys;
14
14
  iconFillType?: 'fill' | 'line';
15
- displayType?: 'none' | 'text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch' | 'selected_status';
15
+ displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
16
16
  captionText?: PDSTextType;
17
17
  iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
18
18
  iBtn1IconFillType?: 'fill' | 'line';
@@ -22,21 +22,23 @@ export declare type BasicListItemProps = {
22
22
  mBtnText?: PDSTextType;
23
23
  dividerType?: 'none' | 'solid';
24
24
  titleFontWeight?: 'bold' | 'regular';
25
- checkBoxId?: number | string;
25
+ checkboxId?: string | number;
26
+ radioId?: string;
26
27
  radioValue?: string;
27
- onClickIconIBtn1?: () => void;
28
- onClickIconIBtn2?: () => void;
28
+ onClick?: () => void;
29
+ onClickIBtn1?: () => void;
30
+ onClickIBtn2?: () => void;
29
31
  onClickMBtn?: () => void;
30
- onRadioCheck?: (e: React.ChangeEvent<HTMLInputElement>) => void;
31
- onSwitchClick?: () => void;
32
+ onClickRadio?: (value: string) => void;
33
+ onClickSwitch?: () => void;
32
34
  };
33
35
  export declare type StyleProps = {
34
36
  isSelected?: boolean;
35
37
  selectionMode?: 'none' | 'check' | 'radio';
36
- descText?: PDSTextType;
38
+ captionText?: PDSTextType;
37
39
  badgeStatus?: 'cancel' | 'active' | 'inactive';
38
40
  imageIconMode?: 'none' | 'image' | 'icon';
39
- displayType?: 'none' | 'text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch' | 'selected_status';
41
+ displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
40
42
  };
41
- declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkBoxId, radioValue, onClickIconIBtn1, onClickIconIBtn2, onClickMBtn, onRadioCheck, onSwitchClick }: BasicListItemProps): JSX.Element;
43
+ declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
42
44
  export default BasicListItem;
package/dist/src/desktop/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,52 +17,79 @@ var MainButton_1 = require("../MainButton");
17
17
  var Radio_1 = require("../Radio");
18
18
  var TextLabel_1 = require("../TextLabel");
19
19
  function BasicListItem(_a) {
20
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkBoxId = _a.checkBoxId, radioValue = _a.radioValue, onClickIconIBtn1 = _a.onClickIconIBtn1, onClickIconIBtn2 = _a.onClickIconIBtn2, onClickMBtn = _a.onClickMBtn, onRadioCheck = _a.onRadioCheck, onSwitchClick = _a.onSwitchClick;
20
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
21
21
  var methods = (0, react_hook_form_1.useFormContext)();
22
- var isSelected = (0, react_hook_form_1.useWatch)({ control: methods.control, name: (checkBoxId === null || checkBoxId === void 0 ? void 0 : checkBoxId.toString()) || '' });
22
+ var isSelected = (0, react_hook_form_1.useWatch)({ control: methods.control, name: (checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '' });
23
23
  var handleCheckBoxClick = function (e) {
24
24
  e.preventDefault();
25
- if (!checkBoxId)
25
+ if (!checkboxId) {
26
26
  return;
27
- var checkedStatus = methods.getValues(checkBoxId.toString());
28
- methods.setValue(checkBoxId.toString(), !checkedStatus);
27
+ }
28
+ var checkedStatus = methods.getValues(checkboxId.toString());
29
+ methods.setValue(checkboxId.toString(), !checkedStatus);
29
30
  };
30
31
  var handleMBtnClick = function () {
31
32
  if (onClickMBtn) {
32
33
  onClickMBtn();
33
34
  }
34
- return;
35
35
  };
36
- var handleIcon1Click = function () {
37
- if (onClickIconIBtn1) {
38
- onClickIconIBtn1();
36
+ var handleIBtn1Click = function (e) {
37
+ e.stopPropagation();
38
+ if (onClickIBtn1) {
39
+ onClickIBtn1();
39
40
  }
40
- return;
41
41
  };
42
- var handleIcon2Click = function () {
43
- if (onClickIconIBtn2) {
44
- onClickIconIBtn2();
42
+ var handleIBtn2Click = function () {
43
+ if (onClickIBtn2) {
44
+ onClickIBtn2();
45
45
  }
46
- return;
47
46
  };
48
47
  var handleSwitchClick = function () {
49
- if (onSwitchClick) {
50
- onSwitchClick();
48
+ if (onClickSwitch) {
49
+ onClickSwitch();
51
50
  }
52
- return;
53
51
  };
54
- var handleRadioCheck = function (e) {
55
- if (onRadioCheck) {
56
- onRadioCheck(e);
52
+ var handleRadioClick = function (e) {
53
+ if (onClickRadio) {
54
+ onClickRadio(e.target.value);
57
55
  }
58
- return;
59
56
  };
60
- return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, isSelected: isSelected },
61
- react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, descText: descText },
57
+ var handleClick = function (e) {
58
+ switch (selectionMode) {
59
+ case 'radio': {
60
+ if (onClickRadio && radioId) {
61
+ onClickRadio(radioId);
62
+ }
63
+ return;
64
+ }
65
+ case 'check': {
66
+ if (!checkboxId) {
67
+ return;
68
+ }
69
+ e.stopPropagation();
70
+ var checkedStatus = methods.getValues(checkboxId.toString());
71
+ methods.setValue(checkboxId.toString(), !checkedStatus);
72
+ return;
73
+ }
74
+ default:
75
+ break;
76
+ }
77
+ switch (displayType) {
78
+ case 'ibtn_amount1':
79
+ case 'ibtn_text':
80
+ case 'none': {
81
+ if (onClick) {
82
+ onClick();
83
+ }
84
+ }
85
+ }
86
+ };
87
+ return (react_1.default.createElement(S_BasicListItem, { displayType: displayType, selectionMode: selectionMode, isSelected: isSelected, onClick: handleClick },
88
+ react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText },
62
89
  react_1.default.createElement(S_LeftBox, null,
63
- selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { onClick: handleCheckBoxClick, selectionMode: selectionMode },
64
- selectionMode === 'check' && checkBoxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkBoxId.toString(), state: "normal" })),
65
- selectionMode === 'radio' && radioValue && (react_1.default.createElement(Radio_1.Radio, { name: "BLI_RADIO", value: radioValue, onChange: handleRadioCheck })))),
90
+ selectionMode !== 'none' && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
91
+ selectionMode === 'check' && checkboxId && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
92
+ selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
66
93
  badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
67
94
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
68
95
  react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
@@ -76,23 +103,25 @@ function BasicListItem(_a) {
76
103
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
77
104
  react_1.default.createElement(S_TextBox, null,
78
105
  react_1.default.createElement(S_TextWrapper, null,
79
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use" })),
80
- descText && (react_1.default.createElement(react_1.default.Fragment, null,
106
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
107
+ captionText && (react_1.default.createElement(react_1.default.Fragment, null,
81
108
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
82
109
  react_1.default.createElement(S_TextWrapper, null,
83
- react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "form2Regular", singleLineMode: "use", lineLimit: 1 })))))),
110
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
84
111
  react_1.default.createElement(S_RightBox, { displayType: displayType },
85
- (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && (react_1.default.createElement(react_1.default.Fragment, null,
86
- react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIcon1Click }))),
87
- displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIcon2Click })))))),
112
+ (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
113
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
+ (displayType === 'ibtn_amount1' ||
116
+ displayType === 'ibtn_amount2' ||
117
+ displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
118
+ displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click })))),
119
+ react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }))))),
88
120
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
89
121
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
90
122
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
91
123
  displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
92
124
  react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
93
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
94
- displayType === 'text' && (react_1.default.createElement(react_1.default.Fragment, null,
95
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
96
125
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
97
126
  react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
98
127
  }
@@ -100,24 +129,29 @@ var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templa
100
129
  var theme = _a.theme, isSelected = _a.isSelected;
101
130
  return isSelected ? theme.ui_cpnt_list_base_area_select : theme.ui_cpnt_list_base_area;
102
131
  }, function (_a) {
103
- var displayType = _a.displayType;
104
- return (displayType === 'ibtn_amount1' ? 'pointer' : 'default');
132
+ var displayType = _a.displayType, selectionMode = _a.selectionMode, onClick = _a.onClick;
133
+ if (displayType === 'ibtn_amount1' || displayType === 'ibtn_text' || displayType === 'none') {
134
+ if (onClick) {
135
+ return 'pointer';
136
+ }
137
+ }
138
+ if (selectionMode === 'check' || selectionMode === 'radio') {
139
+ return 'pointer';
140
+ }
141
+ return 'default';
105
142
  }, function (_a) {
106
143
  var theme = _a.theme;
107
144
  return "0 " + theme.spacing.spacingC;
108
145
  });
109
146
  var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"])), function (_a) {
110
- var imageIconMode = _a.imageIconMode, descText = _a.descText;
111
- return imageIconMode === 'image' || descText ? '80px' : '56px';
147
+ var imageIconMode = _a.imageIconMode, captionText = _a.captionText;
148
+ return imageIconMode === 'image' || captionText ? '80px' : '56px';
112
149
  }, function (_a) {
113
150
  var theme = _a.theme;
114
151
  return "0 " + theme.spacing.spacingC;
115
152
  });
116
153
  var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"])));
117
- var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n margin-top: ", ";\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n margin-top: ", ";\n width: 40px;\n"])), function (_a) {
118
- var selectionMode = _a.selectionMode, theme = _a.theme;
119
- return selectionMode === 'check' && "" + theme.spacing.spacingB;
120
- });
154
+ var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
121
155
  var S_IconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n"])));
122
156
  var S_TextBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"])));
123
157
  var S_TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
package/dist/src/desktop/components/Checkbox/Checkbox.js CHANGED
@@ -30,7 +30,9 @@ function Checkbox(_a) {
30
30
  var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
31
31
  var handleChange = function (e) {
32
32
  checkboxFormRegister.onChange(e);
33
- onChange && onChange(e);
33
+ if (onChange) {
34
+ onChange(e);
35
+ }
34
36
  };
35
37
  var icon = function () {
36
38
  switch (state) {
package/dist/src/desktop/components/Dropdown/Dropdown.js CHANGED
@@ -130,7 +130,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
130
130
  var responsiveMode = _a.responsiveMode;
131
131
  return (responsiveMode === 'use' ? '100%' : '188px');
132
132
  });
133
- var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-block;\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n position: relative;\n\n ", ";\n"])), function (_a) {
133
+ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-block;\n outline: none;\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n outline: none;\n position: relative;\n\n ", ";\n"])), function (_a) {
134
134
  var size = _a.size;
135
135
  return size &&
136
136
  {
package/dist/src/desktop/components/IconButton/IconButton.d.ts CHANGED
@@ -14,8 +14,8 @@ export declare type IconButtonProps = {
14
14
  colorTheme?: 'none' | 'line1' | 'line2';
15
15
  type?: 'submit' | 'reset' | 'button';
16
16
  state?: 'normal' | 'disabled';
17
- onClick?: () => any;
18
- onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => any;
17
+ onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => any;
18
+ onMouseDown?: (e?: React.MouseEvent<HTMLButtonElement>) => any;
19
19
  };
20
20
  declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onMouseDown }: IconButtonProps): JSX.Element;
21
21
  export default IconButton;
package/dist/src/desktop/components/IconButton/IconButton.js CHANGED
@@ -32,9 +32,9 @@ var common_1 = require("../../../common");
32
32
  var hybrid_1 = require("../../../hybrid");
33
33
  function IconButton(_a) {
34
34
  var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
35
- var handleClick = function () {
35
+ var handleClick = function (e) {
36
36
  if (onClick) {
37
- onClick();
37
+ onClick(e);
38
38
  }
39
39
  };
40
40
  var handleMouseDown = function (e) {
package/dist/src/mobile/components/BasicList/BasicList.js CHANGED
@@ -3,38 +3,22 @@ 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
- };
17
6
  var __importDefault = (this && this.__importDefault) || function (mod) {
18
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
8
  };
20
9
  Object.defineProperty(exports, "__esModule", { value: true });
21
10
  var react_1 = __importDefault(require("react"));
22
- var react_hook_form_1 = require("react-hook-form");
23
11
  var styled_components_1 = __importDefault(require("styled-components"));
24
- var common_1 = require("../../../common");
25
12
  var hybrid_1 = require("../../../hybrid");
26
13
  var TextLabel_1 = require("../TextLabel");
27
14
  function BasicList(_a) {
28
15
  var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
29
- var methods = (0, react_hook_form_1.useForm)();
30
16
  return (react_1.default.createElement(react_1.default.Fragment, null,
31
17
  (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
32
18
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
33
19
  titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
34
20
  captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
35
- react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
36
- react_1.default.createElement(common_1.Form, null,
37
- react_1.default.createElement(S_BasicListWrapper, { columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, children)))));
21
+ react_1.default.createElement(S_BasicListWrapper, { columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, children)));
38
22
  }
39
23
  var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n padding: ", ";\n"], ["\n margin-bottom: ", ";\n padding: ", ";\n"])), function (_a) {
40
24
  var theme = _a.theme;
package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
3
3
  export declare type BasicListItemProps = {
4
4
  selectionMode?: 'none' | 'check' | 'radio';
@@ -12,7 +12,7 @@ export declare type BasicListItemProps = {
12
12
  imageSrc?: string;
13
13
  iconName?: FillIconNameKeys | LineIconNameKeys;
14
14
  iconFillType?: 'fill' | 'line';
15
- displayType?: 'none' | 'text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch' | 'selected_status';
15
+ displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
16
16
  captionText?: PDSTextType;
17
17
  iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
18
18
  iBtn1IconFillType?: 'fill' | 'line';
@@ -22,21 +22,23 @@ export declare type BasicListItemProps = {
22
22
  mBtnText?: PDSTextType;
23
23
  dividerType?: 'none' | 'solid';
24
24
  titleFontWeight?: 'bold' | 'regular';
25
- checkBoxId?: number | string;
25
+ checkboxId?: number | string;
26
+ radioId?: string;
26
27
  radioValue?: string;
27
- onTouchIconIBtn1?: () => void;
28
- onTouchIconIBtn2?: () => void;
29
- onTouchMBtn?: () => void;
30
- onRadioCheck?: (e: React.ChangeEvent<HTMLInputElement>) => void;
31
- onSwitchTouch?: () => void;
28
+ onClick?: () => void;
29
+ onClickIBtn1?: () => void;
30
+ onClickIBtn2?: () => void;
31
+ onClickMBtn?: () => void;
32
+ onClickRadio?: (value: string) => void;
33
+ onClickSwitch?: () => void;
32
34
  };
33
35
  export declare type StyleProps = {
34
36
  isSelected?: boolean;
35
37
  selectionMode?: 'none' | 'check' | 'radio';
36
- descText?: PDSTextType;
38
+ captionText?: PDSTextType;
37
39
  badgeStatus?: 'cancel' | 'active' | 'inactive';
38
40
  imageIconMode?: 'none' | 'image' | 'icon';
39
- displayType?: 'none' | 'text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch' | 'selected_status';
41
+ displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
40
42
  };
41
- declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkBoxId, radioValue, onRadioCheck, onSwitchTouch, onTouchIconIBtn1, onTouchIconIBtn2, onTouchMBtn }: BasicListItemProps): JSX.Element;
43
+ declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
42
44
  export default BasicListItem;
package/dist/src/mobile/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,52 +17,79 @@ var MainButton_1 = require("../MainButton");
17
17
  var Radio_1 = require("../Radio");
18
18
  var TextLabel_1 = require("../TextLabel");
19
19
  function BasicListItem(_a) {
20
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkBoxId = _a.checkBoxId, radioValue = _a.radioValue, onRadioCheck = _a.onRadioCheck, onSwitchTouch = _a.onSwitchTouch, onTouchIconIBtn1 = _a.onTouchIconIBtn1, onTouchIconIBtn2 = _a.onTouchIconIBtn2, onTouchMBtn = _a.onTouchMBtn;
20
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
21
21
  var methods = (0, react_hook_form_1.useFormContext)();
22
- var isSelected = (0, react_hook_form_1.useWatch)({ control: methods.control, name: (checkBoxId === null || checkBoxId === void 0 ? void 0 : checkBoxId.toString()) || '' });
23
- var handleCheckBoxTouch = function (e) {
22
+ var isSelected = (0, react_hook_form_1.useWatch)({ control: methods.control, name: (checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '' });
23
+ var handleCheckBoxClick = function (e) {
24
24
  e.preventDefault();
25
- if (!checkBoxId)
25
+ if (!checkboxId) {
26
26
  return;
27
- var checkedStatus = methods.getValues(checkBoxId.toString());
28
- methods.setValue(checkBoxId.toString(), !checkedStatus);
27
+ }
28
+ var checkedStatus = methods.getValues(checkboxId.toString());
29
+ methods.setValue(checkboxId.toString(), !checkedStatus);
30
+ };
31
+ var handleMBtnClick = function () {
32
+ if (onClickMBtn) {
33
+ onClickMBtn();
34
+ }
29
35
  };
30
- var handleMBtnTouch = function () {
31
- if (onTouchMBtn) {
32
- onTouchMBtn();
36
+ var handleIBtn1Click = function (e) {
37
+ e.stopPropagation();
38
+ if (onClickIBtn1) {
39
+ onClickIBtn1();
33
40
  }
34
- return;
35
41
  };
36
- var handleIcon1Touch = function () {
37
- if (onTouchIconIBtn1) {
38
- onTouchIconIBtn1();
42
+ var handleIBtn2Click = function () {
43
+ if (onClickIBtn2) {
44
+ onClickIBtn2();
39
45
  }
40
- return;
41
46
  };
42
- var handleIcon2Touch = function () {
43
- if (onTouchIconIBtn2) {
44
- onTouchIconIBtn2();
47
+ var handleSwitchClick = function () {
48
+ if (onClickSwitch) {
49
+ onClickSwitch();
45
50
  }
46
- return;
47
51
  };
48
- var handleSwitchTouch = function () {
49
- if (onSwitchTouch) {
50
- onSwitchTouch();
52
+ var handleRadioClick = function (e) {
53
+ if (onClickRadio) {
54
+ onClickRadio(e.target.value);
51
55
  }
52
- return;
53
56
  };
54
- var handleRadioCheck = function (e) {
55
- if (onRadioCheck) {
56
- onRadioCheck(e);
57
+ var handleClick = function (e) {
58
+ switch (selectionMode) {
59
+ case 'radio': {
60
+ if (onClickRadio && radioId) {
61
+ onClickRadio(radioId);
62
+ }
63
+ return;
64
+ }
65
+ case 'check': {
66
+ if (!checkboxId) {
67
+ return;
68
+ }
69
+ e.stopPropagation();
70
+ var checkedStatus = methods.getValues(checkboxId.toString());
71
+ methods.setValue(checkboxId.toString(), !checkedStatus);
72
+ return;
73
+ }
74
+ default:
75
+ break;
76
+ }
77
+ switch (displayType) {
78
+ case 'ibtn_amount1':
79
+ case 'ibtn_text':
80
+ case 'none': {
81
+ if (onClick) {
82
+ onClick();
83
+ }
84
+ }
57
85
  }
58
- return;
59
86
  };
60
- return (react_1.default.createElement(S_BasicListItem, { isSelected: isSelected },
61
- react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, descText: descText },
87
+ return (react_1.default.createElement(S_BasicListItem, { isSelected: isSelected, onClick: handleClick },
88
+ react_1.default.createElement(S_BasicListItemBox, { imageIconMode: imageIconMode, captionText: captionText },
62
89
  react_1.default.createElement(S_LeftBox, null,
63
- selectionMode !== 'none' && checkBoxId && (react_1.default.createElement(S_SelectionBoxWrapper, { onClick: handleCheckBoxTouch, selectionMode: selectionMode },
64
- selectionMode === 'check' && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkBoxId.toString(), state: "normal" })),
65
- selectionMode === 'radio' && radioValue && (react_1.default.createElement(Radio_1.Radio, { name: "BLI_RADIO", value: radioValue, onChange: handleRadioCheck })))),
90
+ selectionMode !== 'none' && checkboxId && (react_1.default.createElement(S_SelectionBoxWrapper, { selectionMode: selectionMode },
91
+ selectionMode === 'check' && (react_1.default.createElement(Checkbox_1.Checkbox, { name: checkboxId.toString(), state: "normal", onChange: handleCheckBoxClick })),
92
+ selectionMode === 'radio' && radioValue && radioId && (react_1.default.createElement(Radio_1.Radio, { name: radioId, value: radioValue, onChange: handleRadioClick, checked: radioId === radioValue })))),
66
93
  badgeMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
67
94
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
68
95
  react_1.default.createElement(S_Badge, { badgeStatus: badgeStatus }))),
@@ -76,23 +103,25 @@ function BasicListItem(_a) {
76
103
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
77
104
  react_1.default.createElement(S_TextBox, null,
78
105
  react_1.default.createElement(S_TextWrapper, null,
79
- react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use" })),
80
- descText && (react_1.default.createElement(react_1.default.Fragment, null,
106
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleTextColorTheme === 'none' ? 'sysTextPrimary' : 'sysTextError', styleTheme: titleFontWeight === 'bold' ? 'body2Bold' : 'body2Regular', singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })),
107
+ captionText && (react_1.default.createElement(react_1.default.Fragment, null,
81
108
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
82
109
  react_1.default.createElement(S_TextWrapper, null,
83
- react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "form2Regular", singleLineMode: "use", lineLimit: 1 })))))),
110
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
84
111
  react_1.default.createElement(S_RightBox, { displayType: displayType },
85
- (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && (react_1.default.createElement(react_1.default.Fragment, null,
86
- react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onMouseDown: handleIcon1Touch }))),
87
- displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onMouseDown: handleIcon2Touch })))))),
112
+ (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
113
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
+ (displayType === 'ibtn_amount1' ||
116
+ displayType === 'ibtn_amount2' ||
117
+ displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
118
+ displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click })))),
119
+ react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }))))),
88
120
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
89
- react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnTouch }),
121
+ react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnClick }),
90
122
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
91
123
  displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
92
- react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchTouch }),
93
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
94
- displayType === 'text' && (react_1.default.createElement(react_1.default.Fragment, null,
95
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
124
+ react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
96
125
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
97
126
  react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
98
127
  }
@@ -104,17 +133,14 @@ var S_BasicListItem = styled_components_1.default.li(templateObject_1 || (templa
104
133
  return "0 " + theme.spacing.spacingC;
105
134
  });
106
135
  var S_BasicListItemBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n height: ", ";\n padding: ", ";\n width: 100%;\n"])), function (_a) {
107
- var imageIconMode = _a.imageIconMode, descText = _a.descText;
108
- return imageIconMode === 'image' || descText ? '80px' : '56px';
136
+ var imageIconMode = _a.imageIconMode, captionText = _a.captionText;
137
+ return imageIconMode === 'image' || captionText ? '80px' : '56px';
109
138
  }, function (_a) {
110
139
  var theme = _a.theme;
111
140
  return "0 " + theme.spacing.spacingC;
112
141
  });
113
142
  var S_LeftBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex: 7;\n width: 100%;\n"])));
114
- var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n margin-top: ", ";\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n margin-top: ", ";\n width: 40px;\n"])), function (_a) {
115
- var selectionMode = _a.selectionMode, theme = _a.theme;
116
- return selectionMode === 'check' && "" + theme.spacing.spacingB;
117
- });
143
+ var S_SelectionBoxWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
118
144
  var S_IconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n"])));
119
145
  var S_TextBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n"])));
120
146
  var S_TextWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
package/dist/src/mobile/components/Checkbox/Checkbox.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { Path } from 'react-hook-form';
3
3
  import { IFormValues, PDSTextType } from '../../../common';
4
4
  declare type CheckboxProps = {
@@ -6,6 +6,7 @@ declare type CheckboxProps = {
6
6
  fontWeight?: 'bold' | 'regular';
7
7
  state?: 'normal' | 'disabled';
8
8
  name: Path<IFormValues>;
9
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
9
10
  };
10
- declare function Checkbox({ text, fontWeight, state, name }: CheckboxProps): JSX.Element;
11
+ declare function Checkbox({ text, fontWeight, state, name, onChange }: CheckboxProps): JSX.Element;
11
12
  export default Checkbox;
package/dist/src/mobile/components/Checkbox/Checkbox.js CHANGED
@@ -24,10 +24,16 @@ var styled_components_1 = __importDefault(require("styled-components"));
24
24
  var hybrid_1 = require("../../../hybrid");
25
25
  var TextLabel_1 = require("../TextLabel");
26
26
  function Checkbox(_a) {
27
- var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name;
27
+ var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onChange = _a.onChange;
28
28
  var register = (0, react_hook_form_1.useFormContext)().register;
29
29
  var checkboxFormRegister = register(name);
30
30
  var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
31
+ var handleChange = function (e) {
32
+ checkboxFormRegister.onChange(e);
33
+ if (onChange) {
34
+ onChange(e);
35
+ }
36
+ };
31
37
  var icon = function () {
32
38
  switch (state) {
33
39
  case 'normal': {
@@ -48,7 +54,7 @@ function Checkbox(_a) {
48
54
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
49
55
  ? 'ui_cpnt_selcontrols_text_default'
50
56
  : 'ui_cpnt_selcontrols_text_disabled' }))),
51
- react_1.default.createElement("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled' })))));
57
+ react_1.default.createElement("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange })))));
52
58
  }
53
59
  var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 24px;\n"], ["\n height: 24px;\n"])));
54
60
  var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n"])));
package/dist/src/mobile/components/Dropdown/Dropdown.js CHANGED
@@ -121,7 +121,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
121
121
  var responsiveMode = _a.responsiveMode;
122
122
  return (responsiveMode === 'use' ? '100%' : '188px');
123
123
  });
124
- var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-block;\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n position: relative;\n\n ", ";\n"])), function (_a) {
124
+ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-block;\n outline: none;\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n outline: none;\n position: relative;\n\n ", ";\n"])), function (_a) {
125
125
  var size = _a.size;
126
126
  return size &&
127
127
  {
package/dist/src/mobile/components/IconButton/IconButton.d.ts CHANGED
@@ -14,8 +14,8 @@ export declare type IconButtonProps = {
14
14
  colorTheme?: 'none' | 'line1' | 'line2';
15
15
  type?: 'submit' | 'reset' | 'button';
16
16
  state?: 'normal' | 'disabled';
17
- onClick?: () => any;
18
- onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => any;
17
+ onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => any;
18
+ onMouseDown?: (e?: React.MouseEvent<HTMLButtonElement>) => any;
19
19
  };
20
20
  declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onMouseDown }: IconButtonProps): JSX.Element;
21
21
  export default IconButton;
package/dist/src/mobile/components/IconButton/IconButton.js CHANGED
@@ -32,9 +32,9 @@ var ui_colors_1 = require("../../../common/styles/ui-colors");
32
32
  var hybrid_1 = require("../../../hybrid");
33
33
  function IconButton(_a) {
34
34
  var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
35
- var handleClick = function () {
35
+ var handleClick = function (e) {
36
36
  if (onClick) {
37
- onClick();
37
+ onClick(e);
38
38
  }
39
39
  };
40
40
  var handleMouseDown = function (e) {
@@ -130,10 +130,7 @@ var line2ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templat
130
130
  var theme = _a.theme;
131
131
  return theme.ui_cpnt_button_line_border_primary;
132
132
  });
133
- var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n cursor: ", ";\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
134
- var state = _a.state;
135
- return (state === 'normal' ? 'pointer' : 'default');
136
- }, function (_a) {
133
+ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n display: flex;\n justify-content: center;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
137
134
  var shapeType = _a.shapeType;
138
135
  return shapeType && { circular: 'border-radius: 50%', rectangle: '' }[shapeType];
139
136
  }, function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.3.18",
3
+ "version": "1.3.19",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,13 +1,19 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.3.18]
3
-
4
- ### Layout
5
- * WTN_3 추가
6
- * WTS_1 추가
2
+ ## [v1.3.19]
7
3
 
8
4
  ### Component
9
- * Icon
10
- * ic_subscribers(fill) 추가
11
-
12
- ### Color
13
- * 컬러 키 값 22.05.23 14시 10분 기준 싱크
5
+ * BasicList
6
+ * 내부의 useForm 제거
7
+ * BasicListItem
8
+ * onClick prop 추가(전체 클릭 가능)
9
+ * radioId prop 추가 (radio 모드일 때 원활한 라디오 선택을 위해)
10
+ * displayType prop에 ‘ibtn_text’ value 추가
11
+ * displayType prop에 ‘selected_status’ value 제거
12
+ * iBtn1과 iBtn2의 위치 순서 변경
13
+ * descText와 captionText의 위치를 서로 변경, 색상과 폰트 변경
14
+ * Checkbox
15
+ * onChange prop 추가
16
+ * Dropdown
17
+ * 내부 outline를 none처리
18
+ * IconButton
19
+ * onClick이 이벤트를 받을 수 있도록 수정