pds-dev-kit-web 1.4.4 → 1.4.5

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/desktop/components/AdminList/HeaderRow.js +1 -1
  2. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +18 -19
  3. package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts +4 -1
  4. package/dist/src/desktop/components/BasicListItem/BasicListItem.js +5 -5
  5. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +1 -1
  6. package/dist/src/desktop/components/StatusBlock/StatusBlock.js +3 -3
  7. package/dist/src/hybrid/components/Switch/Switch.d.ts +2 -3
  8. package/dist/src/hybrid/components/Switch/Switch.js +1 -1
  9. package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts +4 -1
  10. package/dist/src/mobile/components/BasicListItem/BasicListItem.js +5 -5
  11. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +1 -1
  12. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts +3 -1
  13. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +20 -6
  14. package/dist/src/mobile/components/StatusBlock/StatusBlock.js +3 -3
  15. package/package.json +1 -1
  16. package/release-note.md +21 -9
package/dist/src/desktop/components/AdminList/HeaderRow.js CHANGED
@@ -72,7 +72,7 @@ var S_HeaderRow = styled_components_1.default.div(templateObject_4 || (templateO
72
72
  return theme.ui_cpnt_divider;
73
73
  });
74
74
  var S_CheckBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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"])));
75
- var S_FlexColumn = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
75
+ var S_FlexColumn = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n min-width: 80px;\n"], ["\n flex: 1;\n min-width: 80px;\n"])));
76
76
  var S_Column = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
77
77
  var theme = _a.theme;
78
78
  return theme.spacing.spacingC;
package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED
@@ -126,9 +126,9 @@ function AdminListItem(_a) {
126
126
  react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
127
127
  column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
128
128
  react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageShapeType === 'circular' ? 64 : 120, ratio: imageRatio, scaleType: "cover", radius: imageShapeType === 'round' ? imageRadius : undefined }))),
129
- (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_Column, null,
129
+ (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_RowTextWrapper, null,
130
130
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
131
- rowSize === 'high' && (react_1.default.createElement(S_TextWrapper, { ref: contentRef, hasScroll: hasScroll },
131
+ rowSize === 'high' && (react_1.default.createElement(S_HighTextWrapper, { ref: contentRef, hasScroll: hasScroll },
132
132
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" })))),
133
133
  column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth },
134
134
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }))),
@@ -188,28 +188,27 @@ var S_ImageWrapper = styled_components_1.default.div(templateObject_15 || (templ
188
188
  var rowSize = _a.rowSize;
189
189
  return rowSize === 'high' && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n "], ["\n align-items: center;\n display: flex;\n height: 100%;\n "])));
190
190
  });
191
- var S_ImageColumn = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n flex: 1;\n overflow: auto;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n"], ["\n flex: 1;\n overflow: auto;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n"])), function (_a) {
192
- var theme = _a.theme, rowSize = _a.rowSize;
193
- return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
194
- }, function (_a) {
195
- var theme = _a.theme;
196
- return theme.spacing.spacingC;
197
- }, function (_a) {
191
+ var S_ImageColumn = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n flex: 1;\n min-width: 80px;\n overflow: auto;\n padding: ", ";\n\n ", "\n"], ["\n flex: 1;\n min-width: 80px;\n overflow: auto;\n padding: ", ";\n\n ", "\n"])), function (_a) {
198
192
  var theme = _a.theme;
199
193
  return theme.spacing.spacingC;
200
- }, function (_a) {
201
- var theme = _a.theme, rowSize = _a.rowSize;
202
- return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
203
194
  }, function (_a) {
204
195
  var rowSize = _a.rowSize;
205
196
  return rowSize === 'high'
206
197
  ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 200px;\n "], ["\n box-sizing: border-box;\n display: flex;\n height: 200px;\n "]))) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
207
198
  });
208
- var S_TextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n height: 100%;\n overflow: auto;\n\n ", "\n"], ["\n height: 100%;\n overflow: auto;\n\n ", "\n"])), function (_a) {
199
+ var S_HighTextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n height: 100%;\n overflow: auto;\n\n ", "\n"], ["\n height: 100%;\n overflow: auto;\n\n ", "\n"])), function (_a) {
209
200
  var hasScroll = _a.hasScroll;
210
201
  return !hasScroll && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
211
202
  });
212
- var S_Column = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
203
+ var S_RowTextWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n\n ", ";\n ", ";\n"])), function (_a) {
204
+ var columnSize = _a.columnSize;
205
+ return columnSize &&
206
+ { small: smallColumnWidth, medium: mediumColumnWidth, large: largeColumnWidth }[columnSize];
207
+ }, function (_a) {
208
+ var quickActionBtnType = _a.quickActionBtnType;
209
+ return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
210
+ });
211
+ var S_Column = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
213
212
  var theme = _a.theme;
214
213
  return theme.spacing.spacingC;
215
214
  }, function (_a) {
@@ -220,16 +219,16 @@ var S_Column = styled_components_1.default.div(templateObject_21 || (templateObj
220
219
  var quickActionBtnType = _a.quickActionBtnType;
221
220
  return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
222
221
  });
223
- var S_SelectionColumn = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"])), function (_a) {
222
+ var S_SelectionColumn = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"])), function (_a) {
224
223
  var theme = _a.theme, rowSize = _a.rowSize;
225
224
  return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
226
225
  }, function (_a) {
227
226
  var theme = _a.theme, rowSize = _a.rowSize;
228
227
  return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
229
228
  });
230
- var hoverAdminListItem = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
231
- var fixedAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
232
- var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
229
+ var hoverAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
230
+ var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
231
+ var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
233
232
  var theme = _a.theme, isSelected = _a.isSelected;
234
233
  return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
235
234
  }, function (_a) {
@@ -250,4 +249,4 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (temp
250
249
  return quickActionBtnType === 'hover' && 'flex';
251
250
  });
252
251
  exports.default = AdminListItem;
253
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
252
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -25,6 +25,9 @@ export declare type BasicListItemProps = {
25
25
  checkboxId?: string | number;
26
26
  radioId?: string;
27
27
  radioValue?: string;
28
+ switchName?: string;
29
+ switchState?: 'normal' | 'disabled';
30
+ switchStatus?: 'off' | 'on';
28
31
  onClick?: () => void;
29
32
  onClickIBtn1?: () => void;
30
33
  onClickIBtn2?: () => void;
@@ -40,5 +43,5 @@ export declare type StyleProps = {
40
43
  imageIconMode?: 'none' | 'image' | 'icon';
41
44
  displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
42
45
  };
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;
46
+ 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, switchName, switchState, switchStatus, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
44
47
  export default BasicListItem;
package/dist/src/desktop/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,7 +17,7 @@ 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, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
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, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, 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
22
  var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
23
23
  var handleCheckBoxClick = function (e) {
@@ -107,10 +107,10 @@ function BasicListItem(_a) {
107
107
  captionText && (react_1.default.createElement(react_1.default.Fragment, null,
108
108
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
109
109
  react_1.default.createElement(S_TextWrapper, null,
110
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
110
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
111
111
  react_1.default.createElement(S_RightBox, { displayType: displayType },
112
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 }),
113
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
114
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
115
  (displayType === 'ibtn_amount1' ||
116
116
  displayType === 'ibtn_amount2' ||
@@ -120,8 +120,8 @@ function BasicListItem(_a) {
120
120
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
121
121
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
122
122
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
123
- displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
124
- react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
123
+ displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
124
+ react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
125
125
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
126
126
  react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
127
127
  }
package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -47,7 +47,7 @@ function ContextMenuItem(_a) {
47
47
  textColorTheme = 'sysTextPrimary';
48
48
  }
49
49
  if (!isSelected && state === 'normal') {
50
- textColorTheme = 'sysTextSecondary';
50
+ textColorTheme = 'sysTextPrimary';
51
51
  }
52
52
  if (state === 'disabled') {
53
53
  textColorTheme = 'sysTextTertiary';
package/dist/src/desktop/components/StatusBlock/StatusBlock.js CHANGED
@@ -39,9 +39,9 @@ function StatusBlock(_a) {
39
39
  return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
40
40
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
41
41
  }
42
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n height: 48px;\n"], ["\n border-radius: 8px;\n height: 48px;\n"])));
43
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 8px;\n height: 40px;\n"], ["\n border-radius: 8px;\n height: 40px;\n"])));
44
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 8px;\n height: 32px;\n"], ["\n border-radius: 8px;\n height: 32px;\n"])));
42
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n"], ["\n border-radius: 14px;\n height: 48px;\n"])));
43
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
44
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
45
45
  var basic = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
46
46
  var theme = _a.theme;
47
47
  return theme.ui_cpnt_statusblock_basic;
package/dist/src/hybrid/components/Switch/Switch.d.ts CHANGED
@@ -1,10 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  declare type SwitchProps = {
3
+ name: string;
3
4
  status?: 'off' | 'on';
4
5
  state?: 'normal' | 'disabled';
5
6
  onClick?: (status: boolean) => void;
6
- /** @deprecated v1.6 react-hook-form을 사용하지 않아 불필요합니다. */
7
- name?: string;
8
7
  };
9
- declare function Switch({ status, state, onClick, name }: SwitchProps): JSX.Element;
8
+ declare function Switch({ name, status, state, onClick }: SwitchProps): JSX.Element;
10
9
  export default Switch;
package/dist/src/hybrid/components/Switch/Switch.js CHANGED
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var react_1 = __importDefault(require("react"));
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  function Switch(_a) {
13
- var _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, _d = _a.name, name = _d === void 0 ? 'switch' : _d;
13
+ var name = _a.name, _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick;
14
14
  var handleChange = function (e) {
15
15
  onClick && onClick(e.target.checked);
16
16
  };
package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -25,6 +25,9 @@ export declare type BasicListItemProps = {
25
25
  checkboxId?: number | string;
26
26
  radioId?: string;
27
27
  radioValue?: string;
28
+ switchName?: string;
29
+ switchState?: 'normal' | 'disabled';
30
+ switchStatus?: 'off' | 'on';
28
31
  onClick?: () => void;
29
32
  onClickIBtn1?: () => void;
30
33
  onClickIBtn2?: () => void;
@@ -40,5 +43,5 @@ export declare type StyleProps = {
40
43
  imageIconMode?: 'none' | 'image' | 'icon';
41
44
  displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
42
45
  };
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;
46
+ 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, switchName, switchState, switchStatus, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
44
47
  export default BasicListItem;
package/dist/src/mobile/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,7 +17,7 @@ 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, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
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, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, 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
22
  var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
23
23
  var handleCheckBoxClick = function (e) {
@@ -107,10 +107,10 @@ function BasicListItem(_a) {
107
107
  captionText && (react_1.default.createElement(react_1.default.Fragment, null,
108
108
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
109
109
  react_1.default.createElement(S_TextWrapper, null,
110
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
110
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
111
111
  react_1.default.createElement(S_RightBox, { displayType: displayType },
112
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 }),
113
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
114
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
115
  (displayType === 'ibtn_amount1' ||
116
116
  displayType === 'ibtn_amount2' ||
@@ -120,8 +120,8 @@ function BasicListItem(_a) {
120
120
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
121
121
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnClick }),
122
122
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
123
- displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
124
- react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
123
+ displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
124
+ react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
125
125
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
126
126
  react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
127
127
  }
package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -47,7 +47,7 @@ function ContextMenuItem(_a) {
47
47
  textColorTheme = 'sysTextPrimary';
48
48
  }
49
49
  if (!isSelected && state === 'normal') {
50
- textColorTheme = 'sysTextSecondary';
50
+ textColorTheme = 'sysTextPrimary';
51
51
  }
52
52
  if (state === 'disabled') {
53
53
  textColorTheme = 'sysTextTertiary';
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts CHANGED
@@ -1,13 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  import { PDSTabItemOption, PDSTextType } from '../../../common/types';
3
+ declare type MobileTabBarColorThemeType = 'none' | 'grey_01';
3
4
  declare type TextObj = {
4
5
  path: string;
5
6
  title: PDSTextType;
6
7
  };
7
8
  declare type MobileTabBarProps = {
8
9
  itemArray?: PDSTabItemOption[];
10
+ colorTheme?: MobileTabBarColorThemeType;
9
11
  /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
10
12
  textArray?: TextObj[];
11
13
  };
12
- declare function MobileTabBar({ itemArray, textArray }: MobileTabBarProps): JSX.Element;
14
+ declare function MobileTabBar({ itemArray, colorTheme, textArray }: MobileTabBarProps): JSX.Element;
13
15
  export default MobileTabBar;
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js CHANGED
@@ -11,8 +11,20 @@ var react_1 = __importDefault(require("react"));
11
11
  var react_router_dom_1 = require("react-router-dom");
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var TextLabel_1 = require("../TextLabel");
14
+ var mobileTabBarThemes = {
15
+ none: {
16
+ activeTextColor: 'usrTextBrandPrimary',
17
+ inActiveTextColor: 'sysTextTertiary',
18
+ activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator_primary'
19
+ },
20
+ grey_01: {
21
+ activeTextColor: 'sysTextPrimary',
22
+ inActiveTextColor: 'sysTextTertiary',
23
+ activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator'
24
+ }
25
+ };
14
26
  function MobileTabBar(_a) {
15
- var itemArray = _a.itemArray, textArray = _a.textArray;
27
+ var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, textArray = _a.textArray;
16
28
  var history = (0, react_router_dom_1.useHistory)();
17
29
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
18
30
  if (itemArray) {
@@ -21,8 +33,10 @@ function MobileTabBar(_a) {
21
33
  item.onClick();
22
34
  }
23
35
  };
24
- return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
25
- react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
36
+ return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, colorTheme: colorTheme, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
37
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive
38
+ ? mobileTabBarThemes[colorTheme].activeTextColor
39
+ : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }))); })));
26
40
  }
27
41
  if (textArray) {
28
42
  var handleClick_1 = function (value) {
@@ -30,7 +44,7 @@ function MobileTabBar(_a) {
30
44
  history.push(value.path);
31
45
  }
32
46
  };
33
- return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
47
+ return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
34
48
  react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
35
49
  }
36
50
  return react_1.default.createElement(react_1.default.Fragment, null);
@@ -42,8 +56,8 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
42
56
  var theme = _a.theme;
43
57
  return theme.spacing.spacingD;
44
58
  }, function (_a) {
45
- var theme = _a.theme;
46
- return theme.ui_cpnt_tabbar_border_active_indicator_primary;
59
+ var colorTheme = _a.colorTheme, theme = _a.theme;
60
+ return theme[mobileTabBarThemes[colorTheme].activeIndicatorBorderColor];
47
61
  }, function (_a) {
48
62
  var isActive = _a.isActive;
49
63
  return !isActive && "display: none;";
package/dist/src/mobile/components/StatusBlock/StatusBlock.js CHANGED
@@ -39,9 +39,9 @@ function StatusBlock(_a) {
39
39
  return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
40
40
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
41
41
  }
42
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n height: 48px;\n"], ["\n border-radius: 8px;\n height: 48px;\n"])));
43
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 8px;\n height: 40px;\n"], ["\n border-radius: 8px;\n height: 40px;\n"])));
44
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 8px;\n height: 32px;\n"], ["\n border-radius: 8px;\n height: 32px;\n"])));
42
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n"], ["\n border-radius: 14px;\n height: 48px;\n"])));
43
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
44
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
45
45
  var basic = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
46
46
  var theme = _a.theme;
47
47
  return theme.ui_cpnt_statusblock_basic;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.4",
3
+ "version": "1.4.5",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,14 +1,26 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.4]
2
+ ## [v1.4.5]
3
3
 
4
4
  ### Color
5
5
  * AdminList
6
- * BulkActionBar에서 TextButton의 colorTheme을 white로 적용 (LIGHT톤에서도 항상 흰색으로 보일 수 있도록)
7
- * HorizontalInputFormGroup
8
- * inputForm에 요소가 width: 100%일 경우 정상적으로 영역을 차지하게 수정
9
- * captionText가 undefined인 경우 bottom에 영역이 남지 않게 수정
6
+ * HeaderRow column2에 min-width:80px 부여
7
+ * AdminListItem
8
+ * column2에 min-width:80px 부여
9
+ * column2에 text만 있을때 좌측 간격 HeaderRow와 맞도록 수정
10
+ * BasicListItem
11
+ * descText의 색상 sysTextTertiary에서 sysTextSecondary로 변경
12
+ * captionText의 색상 sysTextSecondary에서 sysTextTertiary로 변경
13
+ * displayType이 switch일때 사용할 prop 추가
14
+ * switchName
15
+ * switchState
16
+ * switchStatus
17
+ * ContextMenuItem
18
+ * 기본 상태일때 텍스트 색상 sysTextSecondary에서 sysTextPrimary로 변경
19
+ * MobileTabBar
20
+ * colorTheme prop 추가
21
+ * StatusBlock
22
+ * border-radius 변경
23
+ * large, medium : 14px
24
+ * small : 10px
10
25
  * Switch
11
- * name prop deprecated in 1.6처리 (react-hook-form을 사용하지 않아 불필요합니다.)
12
- * status에 따라 올바르게 on/off 되지 않는 이슈 해결
13
- * TextButton
14
- * colorTheme prop에 white value 추가
26
+ * name prop deprecated 처리 철회