pds-dev-kit-web 2.2.156 → 2.2.158
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.
- package/dist/src/mobile/components/DatePicker/DatePicker.d.ts +4 -1
- package/dist/src/mobile/components/DatePicker/DatePicker.js +15 -9
- package/dist/src/mobile/components/DatePicker/DatePickerHeader.d.ts +5 -1
- package/dist/src/mobile/components/DatePicker/DatePickerHeader.js +8 -6
- package/dist/src/mobile/components/DatePicker/Day.js +2 -2
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import type { PDSTextType } from '../../../common/types';
|
|
2
3
|
type Props = {
|
|
3
4
|
id?: string;
|
|
4
5
|
type: 'single' | 'range';
|
|
@@ -7,7 +8,9 @@ type Props = {
|
|
|
7
8
|
minDate?: string;
|
|
8
9
|
maxDate?: string;
|
|
9
10
|
startOfWeek?: 'sunday' | 'monday';
|
|
11
|
+
quickActionMode?: 'use' | 'none';
|
|
12
|
+
quickActionBtnText?: PDSTextType;
|
|
10
13
|
onChange?: (val1: string, val2?: string) => void;
|
|
11
14
|
};
|
|
12
|
-
declare const DatePicker: ({ id, type, date, endDate, minDate, maxDate, startOfWeek, onChange }: Props) => JSX.Element;
|
|
15
|
+
declare const DatePicker: ({ id, type, date, endDate, minDate, maxDate, startOfWeek, quickActionMode, quickActionBtnText, onChange }: Props) => JSX.Element;
|
|
13
16
|
export default DatePicker;
|
|
@@ -47,16 +47,17 @@ var react_i18next_1 = require("react-i18next");
|
|
|
47
47
|
var dateHelper_1 = require("../../../common/utils/dateHelper");
|
|
48
48
|
var components_1 = require("../../../hybrid/components");
|
|
49
49
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
50
|
+
var TextLabel_1 = require("../TextLabel");
|
|
50
51
|
var DatePickerHeader_1 = __importDefault(require("./DatePickerHeader"));
|
|
51
52
|
var Day_1 = __importDefault(require("./Day"));
|
|
52
53
|
var DatePicker = function (_a) {
|
|
53
|
-
var id = _a.id, type = _a.type, date = _a.date, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.startOfWeek, startOfWeek = _b === void 0 ? 'sunday' : _b, onChange = _a.onChange;
|
|
54
|
+
var id = _a.id, type = _a.type, date = _a.date, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.startOfWeek, startOfWeek = _b === void 0 ? 'sunday' : _b, _c = _a.quickActionMode, quickActionMode = _c === void 0 ? 'none' : _c, quickActionBtnText = _a.quickActionBtnText, onChange = _a.onChange;
|
|
54
55
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
55
56
|
var startDate = date || dateHelper_1.DateHelper.formatDate(new Date());
|
|
56
|
-
var
|
|
57
|
+
var _d = (0, react_1.useState)(function () {
|
|
57
58
|
return dateHelper_1.DateHelper.startOfMonth(dateHelper_1.DateHelper.parseDate(startDate));
|
|
58
|
-
}), currentMonth =
|
|
59
|
-
var
|
|
59
|
+
}), currentMonth = _d[0], setCurrentMonth = _d[1];
|
|
60
|
+
var handleDateClick = function (target) {
|
|
60
61
|
if (!onChange)
|
|
61
62
|
return;
|
|
62
63
|
var ISODate = dateHelper_1.DateHelper.toISOString(target);
|
|
@@ -76,6 +77,11 @@ var DatePicker = function (_a) {
|
|
|
76
77
|
var startISO = dateHelper_1.DateHelper.toISOString(parsedStartDate);
|
|
77
78
|
onChange(startISO, ISODate);
|
|
78
79
|
};
|
|
80
|
+
var handleQuickActionButtonClick = function () {
|
|
81
|
+
var today = new Date();
|
|
82
|
+
var startOfCurrentMonth = dateHelper_1.DateHelper.startOfMonth(today);
|
|
83
|
+
setCurrentMonth(startOfCurrentMonth);
|
|
84
|
+
};
|
|
79
85
|
var calendarDates = (0, react_1.useMemo)(function () { return dateHelper_1.DateHelper.getCalendarDates(currentMonth, startOfWeek); }, [currentMonth, startOfWeek]);
|
|
80
86
|
var days = [
|
|
81
87
|
t('str_3893'),
|
|
@@ -89,10 +95,10 @@ var DatePicker = function (_a) {
|
|
|
89
95
|
return ((0, jsx_runtime_1.jsxs)(CalendarContainer, __assign({ id: id }, { children: [(0, jsx_runtime_1.jsx)(DatePickerHeader_1.default, { headerTitle: t('str_35', {
|
|
90
96
|
year: currentMonth.getFullYear(),
|
|
91
97
|
month: String(currentMonth.getMonth() + 1)
|
|
92
|
-
}), 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); }); } }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "
|
|
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
|
|
93
99
|
.slice(startOfWeek === 'monday' ? 1 : 0)
|
|
94
100
|
.concat(startOfWeek === 'monday' ? [t('str_3893')] : [])
|
|
95
|
-
.map(function (day) { return ((0, jsx_runtime_1.jsx)(S_DayOfWeek, { children: day }, "".concat(id, "_").concat(day))); }) })), (0, jsx_runtime_1.jsx)(S_Grid, { children: calendarDates.map(function (d) {
|
|
101
|
+
.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) {
|
|
96
102
|
var dateStr = dateHelper_1.DateHelper.formatDate(d);
|
|
97
103
|
var inRange = startDate &&
|
|
98
104
|
endDate &&
|
|
@@ -100,7 +106,7 @@ var DatePicker = function (_a) {
|
|
|
100
106
|
dateHelper_1.DateHelper.isBefore(d, dateHelper_1.DateHelper.parseDate(endDate));
|
|
101
107
|
var isStart = dateHelper_1.DateHelper.isSameDay(d, dateHelper_1.DateHelper.parseDate(startDate));
|
|
102
108
|
var isEnd = !!endDate && dateHelper_1.DateHelper.isSameDay(d, dateHelper_1.DateHelper.parseDate(endDate));
|
|
103
|
-
return ((0, jsx_runtime_1.jsx)(S_CellWrapper, __assign({ isValidRange: !!startDate && !!endDate, isRange: !!inRange, isStart: isStart, isEnd: isEnd }, { children: (0, jsx_runtime_1.jsx)(Day_1.default, { date: d, currentMonth: currentMonth, minDate: minDate, maxDate: maxDate, startDate: date, endDate: endDate, onClick:
|
|
109
|
+
return ((0, jsx_runtime_1.jsx)(S_CellWrapper, __assign({ isValidRange: !!startDate && !!endDate, isRange: !!inRange, isStart: isStart, isEnd: isEnd }, { children: (0, jsx_runtime_1.jsx)(Day_1.default, { date: d, currentMonth: currentMonth, minDate: minDate, maxDate: maxDate, startDate: date, endDate: endDate, onClick: handleDateClick }) }), "".concat(id, "_").concat(dateStr)));
|
|
104
110
|
}) })] })] })));
|
|
105
111
|
};
|
|
106
112
|
var CalendarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
|
|
@@ -108,12 +114,12 @@ var S_MonthContainer = styled_components_1.default.div(templateObject_2 || (temp
|
|
|
108
114
|
var theme = _a.theme;
|
|
109
115
|
return theme.spacing.spacingD;
|
|
110
116
|
});
|
|
111
|
-
var S_DayOfWeekContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: grid;\n grid-template-columns: repeat(7, minmax(
|
|
117
|
+
var S_DayOfWeekContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: grid;\n grid-template-columns: repeat(7, minmax(32px, 120px));\n grid-template-rows: minmax(25px, 32px);\n justify-items: center;\n"], ["\n align-items: center;\n display: grid;\n grid-template-columns: repeat(7, minmax(32px, 120px));\n grid-template-rows: minmax(25px, 32px);\n justify-items: center;\n"])));
|
|
112
118
|
var S_DayOfWeek = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n background-color: transparent;\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n"])), function (_a) {
|
|
113
119
|
var theme = _a.theme;
|
|
114
120
|
return theme.ui_cpnt_textlabel_sys_primary;
|
|
115
121
|
});
|
|
116
|
-
var S_Grid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: grid;\n flex: 1;\n grid-row-gap: 2px;\n grid-template-columns: repeat(7, minmax(
|
|
122
|
+
var S_Grid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: grid;\n flex: 1;\n grid-row-gap: 2px;\n grid-template-columns: repeat(7, minmax(32px, 120px));\n grid-template-rows: repeat(6, minmax(25px, 32px));\n justify-items: center;\n"], ["\n align-items: center;\n display: grid;\n flex: 1;\n grid-row-gap: 2px;\n grid-template-columns: repeat(7, minmax(32px, 120px));\n grid-template-rows: repeat(6, minmax(25px, 32px));\n justify-items: center;\n"])));
|
|
117
123
|
var S_CellWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: relative;\n width: 100%;\n\n ", "\n\n ", "\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: relative;\n width: 100%;\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
118
124
|
var isRange = _a.isRange, isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
|
|
119
125
|
return isValidRange &&
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import type { PDSTextType } from '../../../common/types';
|
|
2
3
|
type Props = {
|
|
3
4
|
headerTitle: string;
|
|
5
|
+
textButtonText?: PDSTextType;
|
|
6
|
+
isTextButtonDisabled: boolean;
|
|
4
7
|
onClickPrevButton: () => void;
|
|
5
8
|
onClickNextButton: () => void;
|
|
9
|
+
onClickTextButton: () => void;
|
|
6
10
|
};
|
|
7
|
-
declare function DatePickerHeader({ headerTitle, onClickPrevButton, onClickNextButton }: Props): JSX.Element;
|
|
11
|
+
declare function DatePickerHeader({ headerTitle, textButtonText, isTextButtonDisabled, onClickPrevButton, onClickNextButton, onClickTextButton }: Props): JSX.Element;
|
|
8
12
|
export default DatePickerHeader;
|
|
@@ -10,16 +10,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var IconButton_1 = require("../IconButton");
|
|
13
|
+
var TextButton_1 = require("../TextButton");
|
|
13
14
|
var TextLabel_1 = require("../TextLabel");
|
|
14
15
|
function DatePickerHeader(_a) {
|
|
15
|
-
var headerTitle = _a.headerTitle, onClickPrevButton = _a.onClickPrevButton, onClickNextButton = _a.onClickNextButton;
|
|
16
|
-
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
|
+
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' }) }))] }));
|
|
17
18
|
}
|
|
18
|
-
var S_HeaderContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display:
|
|
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) {
|
|
19
20
|
var theme = _a.theme;
|
|
20
21
|
return theme.spacing.spacingD;
|
|
21
22
|
});
|
|
22
|
-
var
|
|
23
|
-
var
|
|
23
|
+
var S_TextButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: auto 0;\n position: absolute;\n right: 0;\n"], ["\n margin: auto 0;\n position: absolute;\n right: 0;\n"])));
|
|
24
|
+
var S_LeftIconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n grid-column: 1 / 2;\n height: auto;\n width: auto;\n"], ["\n align-items: center;\n display: flex;\n grid-column: 1 / 2;\n height: auto;\n width: auto;\n"])));
|
|
25
|
+
var S_RightIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n grid-column: 3 / 4;\n height: auto;\n width: auto;\n"], ["\n align-items: center;\n display: flex;\n grid-column: 3 / 4;\n height: auto;\n width: auto;\n"])));
|
|
24
26
|
exports.default = DatePickerHeader;
|
|
25
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
27
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -75,7 +75,7 @@ function Day(_a) {
|
|
|
75
75
|
};
|
|
76
76
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_DayWrapper, __assign({ isToday: isToday, isSelectedDay: !!isSelected, isOutOfThisMonthWeek: isOtherMonth, onClick: function () { return selectable && onClick(date); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: date.getDate(), textAlign: "center", styleTheme: isSelected ? 'caption1Bold' : 'caption1Regular', colorTheme: getColorTheme() }) })) }));
|
|
77
77
|
}
|
|
78
|
-
var selectedDay = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border-radius:
|
|
78
|
+
var selectedDay = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n"])), function (_a) {
|
|
79
79
|
var theme = _a.theme;
|
|
80
80
|
return theme.ui_cpnt_calendar_status_a;
|
|
81
81
|
});
|
|
@@ -83,7 +83,7 @@ var today = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
|
|
|
83
83
|
var theme = _a.theme;
|
|
84
84
|
return "radial-gradient(circle, ".concat(theme.ui_cpnt_calendar_status_c, ", 15px, rgba(255, 255, 255, 0) 15px)");
|
|
85
85
|
});
|
|
86
|
-
var S_DayWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n display: flex;\n height:
|
|
86
|
+
var S_DayWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n display: flex;\n height: 32px;\n justify-content: center;\n position: relative;\n width: 32px;\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n display: flex;\n height: 32px;\n justify-content: center;\n position: relative;\n width: 32px;\n\n ", ";\n ", ";\n"])), function (_a) {
|
|
87
87
|
var isToday = _a.isToday, isSelectedDay = _a.isSelectedDay, isOutOfThisMonthWeek = _a.isOutOfThisMonthWeek;
|
|
88
88
|
return isToday && !isOutOfThisMonthWeek && !isSelectedDay && today;
|
|
89
89
|
}, function (_a) {
|
package/package.json
CHANGED
package/release-note.md
CHANGED