pds-dev-kit-web 2.2.159 → 2.2.161

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 (7) hide show
  1. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +3 -3
  2. package/dist/src/mobile/components/DatePicker/DatePicker.js +18 -1
  3. package/dist/src/mobile/components/DatePicker/DatePickerHeader.d.ts +3 -1
  4. package/dist/src/mobile/components/DatePicker/DatePickerHeader.js +2 -2
  5. package/dist/src/sub/AdminList/AdminListItem/AdminListItem.js +3 -3
  6. package/package.json +1 -1
  7. package/release-note.md +2 -2
package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED
@@ -176,11 +176,11 @@ var hoverQuickActionBtnBox = (0, styled_components_1.css)(templateObject_10 || (
176
176
  var theme = _a.theme;
177
177
  return theme.ui_cpnt_datatable_textbutton_base_02;
178
178
  });
179
- var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n visibility: hidden;\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n visibility: hidden;\n"])), function (_a) {
179
+ var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n position: relative;\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n position: relative;\n"])), function (_a) {
180
180
  var theme = _a.theme;
181
181
  return theme.ui_cpnt_datatable_textbutton_base_01;
182
182
  });
183
- var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
183
+ var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n opacity: 0;\n padding-left: ", ";\n padding-right: ", ";\n pointer-events: none;\n\n ", ";\n"], ["\n opacity: 0;\n padding-left: ", ";\n padding-right: ", ";\n pointer-events: none;\n\n ", ";\n"])), function (_a) {
184
184
  var theme = _a.theme;
185
185
  return theme.spacing.spacingC;
186
186
  }, function (_a) {
@@ -261,7 +261,7 @@ var disabledAdminListItem = (0, styled_components_1.css)(templateObject_28 || (t
261
261
  var theme = _a.theme;
262
262
  return theme.ui_cpnt_datatable_base_selected;
263
263
  });
264
- var S_AdminListItem = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n ", "\n"])), function (_a) {
264
+ var S_AdminListItem = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: ", ";\n opacity: 1;\n pointer-events: auto;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: ", ";\n opacity: 1;\n pointer-events: auto;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n ", "\n"])), function (_a) {
265
265
  var theme = _a.theme, isSelected = _a.isSelected;
266
266
  return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
267
267
  }, function (_a) {
package/dist/src/mobile/components/DatePicker/DatePicker.js CHANGED
@@ -57,6 +57,22 @@ var DatePicker = function (_a) {
57
57
  var _d = (0, react_1.useState)(function () {
58
58
  return dateHelper_1.DateHelper.startOfMonth(dateHelper_1.DateHelper.parseDate(startDate));
59
59
  }), currentMonth = _d[0], setCurrentMonth = _d[1];
60
+ var isPrevButtonDisabled = (0, react_1.useMemo)(function () {
61
+ if (!minDate)
62
+ return false;
63
+ var parsedMinDate = dateHelper_1.DateHelper.parseDate(minDate);
64
+ return (currentMonth.getFullYear() < parsedMinDate.getFullYear() ||
65
+ (currentMonth.getFullYear() === parsedMinDate.getFullYear() &&
66
+ currentMonth.getMonth() <= parsedMinDate.getMonth()));
67
+ }, [currentMonth, minDate]);
68
+ var isNextButtonDisabled = (0, react_1.useMemo)(function () {
69
+ if (!maxDate)
70
+ return false;
71
+ var parsedMaxDate = dateHelper_1.DateHelper.parseDate(maxDate);
72
+ return (currentMonth.getFullYear() > parsedMaxDate.getFullYear() ||
73
+ (currentMonth.getFullYear() === parsedMaxDate.getFullYear() &&
74
+ currentMonth.getMonth() >= parsedMaxDate.getMonth()));
75
+ }, [currentMonth, maxDate]);
60
76
  var handleDateClick = function (target) {
61
77
  if (!onChange)
62
78
  return;
@@ -95,7 +111,8 @@ var DatePicker = function (_a) {
95
111
  return ((0, jsx_runtime_1.jsxs)(CalendarContainer, __assign({ id: id }, { children: [(0, jsx_runtime_1.jsx)(DatePickerHeader_1.default, { headerTitle: t('str_35', {
96
112
  year: currentMonth.getFullYear(),
97
113
  month: String(currentMonth.getMonth() + 1)
98
- }), textButtonText: quickActionMode === 'use' ? quickActionBtnText : undefined, isTextButtonDisabled: currentMonth.getMonth() === new Date().getMonth(), onClickPrevButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, -1); }); }, onClickNextButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, 1); }); }, onClickTextButton: handleQuickActionButtonClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsxs)(S_MonthContainer, { children: [(0, jsx_runtime_1.jsx)(S_DayOfWeekContainer, __assign({ id: "weeks" }, { children: days
114
+ }), textButtonText: quickActionMode === 'use' ? quickActionBtnText : undefined, isTextButtonDisabled: currentMonth.getFullYear() === new Date().getFullYear() &&
115
+ currentMonth.getMonth() === new Date().getMonth(), isPrevButtonDisabled: isPrevButtonDisabled, isNextButtonDisabled: isNextButtonDisabled, onClickPrevButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, -1); }); }, onClickNextButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, 1); }); }, onClickTextButton: handleQuickActionButtonClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsxs)(S_MonthContainer, { children: [(0, jsx_runtime_1.jsx)(S_DayOfWeekContainer, __assign({ id: "weeks" }, { children: days
99
116
  .slice(startOfWeek === 'monday' ? 1 : 0)
100
117
  .concat(startOfWeek === 'monday' ? [t('str_3893')] : [])
101
118
  .map(function (day) { return ((0, jsx_runtime_1.jsx)(S_DayOfWeek, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: day, styleTheme: "caption2Bold", colorTheme: "sysTextSecondary", textAlign: "center" }) }, "".concat(id, "_").concat(day))); }) })), (0, jsx_runtime_1.jsx)(S_Grid, { children: calendarDates.map(function (d) {
package/dist/src/mobile/components/DatePicker/DatePickerHeader.d.ts CHANGED
@@ -4,9 +4,11 @@ type Props = {
4
4
  headerTitle: string;
5
5
  textButtonText?: PDSTextType;
6
6
  isTextButtonDisabled: boolean;
7
+ isPrevButtonDisabled: boolean;
8
+ isNextButtonDisabled: boolean;
7
9
  onClickPrevButton: () => void;
8
10
  onClickNextButton: () => void;
9
11
  onClickTextButton: () => void;
10
12
  };
11
- declare function DatePickerHeader({ headerTitle, textButtonText, isTextButtonDisabled, onClickPrevButton, onClickNextButton, onClickTextButton }: Props): JSX.Element;
13
+ declare function DatePickerHeader({ headerTitle, textButtonText, isTextButtonDisabled, isPrevButtonDisabled, isNextButtonDisabled, onClickPrevButton, onClickNextButton, onClickTextButton }: Props): JSX.Element;
12
14
  export default DatePickerHeader;
package/dist/src/mobile/components/DatePicker/DatePickerHeader.js CHANGED
@@ -13,8 +13,8 @@ var IconButton_1 = require("../IconButton");
13
13
  var TextButton_1 = require("../TextButton");
14
14
  var TextLabel_1 = require("../TextLabel");
15
15
  function DatePickerHeader(_a) {
16
- var headerTitle = _a.headerTitle, textButtonText = _a.textButtonText, isTextButtonDisabled = _a.isTextButtonDisabled, onClickPrevButton = _a.onClickPrevButton, onClickNextButton = _a.onClickNextButton, onClickTextButton = _a.onClickTextButton;
17
- return ((0, jsx_runtime_1.jsxs)(S_HeaderContainer, { children: [(0, jsx_runtime_1.jsx)(S_LeftIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickPrevButton, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium" }) }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: headerTitle, textAlign: "center" }), (0, jsx_runtime_1.jsx)(S_RightIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickNextButton, iconName: "ic_arrow_right", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium" }) }), textButtonText && ((0, jsx_runtime_1.jsx)(S_TextButtonWrapper, { children: (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: textButtonText, size: "xsmall", fontWeight: "bold", onClick: onClickTextButton, state: isTextButtonDisabled ? 'disabled' : 'normal' }) }))] }));
16
+ var headerTitle = _a.headerTitle, textButtonText = _a.textButtonText, isTextButtonDisabled = _a.isTextButtonDisabled, isPrevButtonDisabled = _a.isPrevButtonDisabled, isNextButtonDisabled = _a.isNextButtonDisabled, onClickPrevButton = _a.onClickPrevButton, onClickNextButton = _a.onClickNextButton, onClickTextButton = _a.onClickTextButton;
17
+ return ((0, jsx_runtime_1.jsxs)(S_HeaderContainer, { children: [(0, jsx_runtime_1.jsx)(S_LeftIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickPrevButton, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isPrevButtonDisabled ? 'disabled' : 'normal' }) }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: headerTitle, textAlign: "center" }), (0, jsx_runtime_1.jsx)(S_RightIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickNextButton, iconName: "ic_arrow_right", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isNextButtonDisabled ? 'disabled' : 'normal' }) }), textButtonText && ((0, jsx_runtime_1.jsx)(S_TextButtonWrapper, { children: (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: textButtonText, size: "xsmall", fontWeight: "bold", onClick: onClickTextButton, state: isTextButtonDisabled ? 'disabled' : 'normal' }) }))] }));
18
18
  }
19
19
  var S_HeaderContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n justify-items: center;\n margin: 0 ", ";\n position: relative;\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n justify-items: center;\n margin: 0 ", ";\n position: relative;\n"])), function (_a) {
20
20
  var theme = _a.theme;
package/dist/src/sub/AdminList/AdminListItem/AdminListItem.js CHANGED
@@ -171,11 +171,11 @@ var hoverQuickActionBtnBox = (0, styled_components_1.css)(templateObject_10 || (
171
171
  var theme = _a.theme;
172
172
  return theme.ui_cpnt_datatable_textbutton_base_02;
173
173
  });
174
- var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n visibility: hidden;\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n visibility: hidden;\n"])), function (_a) {
174
+ var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n position: relative;\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n position: relative;\n"])), function (_a) {
175
175
  var theme = _a.theme;
176
176
  return theme.ui_cpnt_datatable_textbutton_base_01;
177
177
  });
178
- var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
178
+ var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n opacity: 0;\n padding-left: ", ";\n padding-right: ", ";\n pointer-events: none;\n\n ", ";\n"], ["\n opacity: 0;\n padding-left: ", ";\n padding-right: ", ";\n pointer-events: none;\n\n ", ";\n"])), function (_a) {
179
179
  var theme = _a.theme;
180
180
  return theme.spacing.spacingC;
181
181
  }, function (_a) {
@@ -252,7 +252,7 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_24 || (te
252
252
  var hoverAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
253
253
  var fixedAdminListItem = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
254
254
  var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n @media only screen and (max-width: 1400px) {\n .hidableColumn {\n display: none;\n }\n }\n"], ["\n @media only screen and (max-width: 1400px) {\n .hidableColumn {\n display: none;\n }\n }\n"])));
255
- var S_AdminListItem = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\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 ", "\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\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 ", "\n"])), function (_a) {
255
+ var S_AdminListItem = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n opacity: 1;\n pointer-events: auto;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", "\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n opacity: 1;\n pointer-events: auto;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n\n ", "\n"])), function (_a) {
256
256
  var theme = _a.theme, isSelected = _a.isSelected;
257
257
  return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
258
258
  }, function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.159",
3
+ "version": "2.2.161",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.159]
2
+ ## [v2.2.161]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [PDS-1293] BasicListItem 에 state 추가
6
+ * [PDS-1297] 모바일 DatePicker 버튼 비활성화 조건 추가