@ringcentral/juno 2.39.0 → 2.39.2
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/README.md +2 -2
- package/components/Forms/Picker/DatePicker/Calendar.js +1 -1
- package/components/Forms/Picker/DatePicker/styles/StyledCalendar.d.ts +1 -1
- package/components/Forms/Picker/DatePicker/styles/StyledCalendar.js +16 -9
- package/components/Forms/Picker/TimePicker/TimePicker.js +1 -1
- package/components/Forms/Picker/TimePicker/utils/TimePickerHelper.d.ts +1 -1
- package/components/Forms/Picker/TimePicker/utils/TimePickerHelper.js +2 -2
- package/es6/README.md +2 -2
- package/es6/components/Forms/Picker/DatePicker/Calendar.js +1 -1
- package/es6/components/Forms/Picker/DatePicker/styles/StyledCalendar.js +16 -9
- package/es6/components/Forms/Picker/TimePicker/TimePicker.js +1 -1
- package/es6/components/Forms/Picker/TimePicker/utils/TimePickerHelper.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,9 +15,9 @@ View in [Codesandbox Example](https://codesandbox.io/s/4j370).
|
|
|
15
15
|
### Install
|
|
16
16
|
|
|
17
17
|
```ts
|
|
18
|
-
npm i @ringcentral/juno @ringcentral/juno-icon styled-components
|
|
18
|
+
npm i @ringcentral/juno @ringcentral/juno-icon styled-components dayjs
|
|
19
19
|
// or
|
|
20
|
-
yarn add @ringcentral/juno @ringcentral/juno-icon styled-components
|
|
20
|
+
yarn add @ringcentral/juno @ringcentral/juno-icon styled-components dayjs
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
### Quick Start
|
|
@@ -108,7 +108,7 @@ var Calendar = react_1.forwardRef(function (_a, ref) {
|
|
|
108
108
|
});
|
|
109
109
|
var _g = utils_2.useScreenReaderContext(), getBackToTodayAriaLabel = _g.getBackToTodayAriaLabel, getDayAriaLabel = _g.getDayAriaLabel;
|
|
110
110
|
var backToTodayAriaLabel = getBackToTodayAriaLabel === null || getBackToTodayAriaLabel === void 0 ? void 0 : getBackToTodayAriaLabel();
|
|
111
|
-
var header = react_1.useMemo(function () { return (react_1.default.createElement(styles_1.StyledDaysHeader,
|
|
111
|
+
var header = react_1.useMemo(function () { return (react_1.default.createElement(styles_1.StyledDaysHeader, { size: size }, weekdays.map(function (day) { return (react_1.default.createElement(styles_1.StyledDayLabel, { size: size, key: day, variant: "caption" }, day)); }))); }, [size, weekdays]);
|
|
112
112
|
var renderDays = function (week) {
|
|
113
113
|
var selectedDate = date;
|
|
114
114
|
return week.map(function (day) {
|
|
@@ -6,7 +6,7 @@ declare const CalendarSlideTransitionWrapper: import("styled-components").Styled
|
|
|
6
6
|
}>;
|
|
7
7
|
declare const ProgressContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../../../../foundation").RcTheme, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
|
|
8
8
|
declare const WeekWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<RcDatePickerProps, "size">, import("../../../../../foundation").RcTheme, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<RcDatePickerProps, "size">>;
|
|
9
|
-
declare const StyledDaysHeader: import("styled-components").StyledComponentClass<import("react").
|
|
9
|
+
declare const StyledDaysHeader: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<RcDatePickerProps, "size">, import("../../../../../foundation").RcTheme, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<RcDatePickerProps, "size">>;
|
|
10
10
|
declare const StyledDayLabel: import("styled-components").StyledComponentClass<{
|
|
11
11
|
align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
|
|
12
12
|
children?: import("react").ReactNode;
|
|
@@ -18,26 +18,33 @@ var WeekWrapper = foundation_1.styled.div(templateObject_5 || (templateObject_5
|
|
|
18
18
|
return foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n height: 32px;\n\n & > div:not(:first-child) {\n margin-left: ", ";\n }\n "], ["\n height: 32px;\n\n & > div:not(:first-child) {\n margin-left: ", ";\n }\n "])), foundation_1.spacing(1));
|
|
19
19
|
});
|
|
20
20
|
exports.WeekWrapper = WeekWrapper;
|
|
21
|
-
var StyledDaysHeader = foundation_1.styled.div(
|
|
21
|
+
var StyledDaysHeader = foundation_1.styled.div(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n ", ";\n ", "\n"], ["\n ", ";\n ",
|
|
22
|
+
"\n"])), foundation_1.flexCenterStyle, function (_a) {
|
|
23
|
+
var size = _a.size;
|
|
24
|
+
if (size === 'small') {
|
|
25
|
+
return foundation_1.css(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n height: 28px;\n ", " {\n width: 20px;\n max-width: 20px;\n flex: none;\n }\n "], ["\n height: 28px;\n ", " {\n width: 20px;\n max-width: 20px;\n flex: none;\n }\n "])), StyledDayLabel);
|
|
26
|
+
}
|
|
27
|
+
return foundation_1.css(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n height: 32px;\n "], ["\n height: 32px;\n "])));
|
|
28
|
+
});
|
|
22
29
|
exports.StyledDaysHeader = StyledDaysHeader;
|
|
23
|
-
var StyledDayLabel = foundation_1.styled(Typography_1.default)(
|
|
30
|
+
var StyledDayLabel = foundation_1.styled(Typography_1.default)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n ", "\n\n text-align: center;\n ", ";\n color: ", ";\n"], ["\n ",
|
|
24
31
|
"\n\n text-align: center;\n ", ";\n color: ", ";\n"])), function (_a) {
|
|
25
32
|
var size = _a.size;
|
|
26
33
|
if (size === 'small') {
|
|
27
|
-
return foundation_1.css(
|
|
34
|
+
return foundation_1.css(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n &:not(:first-child) {\n margin-left: ", ";\n }\n "], ["\n &:not(:first-child) {\n margin-left: ", ";\n }\n "])), foundation_1.spacing(0.5));
|
|
28
35
|
}
|
|
29
|
-
return foundation_1.css(
|
|
36
|
+
return foundation_1.css(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n width: 32px;\n\n &:not(:first-child) {\n margin-left: ", ";\n }\n "], ["\n width: 32px;\n\n &:not(:first-child) {\n margin-left: ", ";\n }\n "])), foundation_1.spacing(1));
|
|
30
37
|
}, foundation_1.typography('caption1'), foundation_1.palette2('neutral', 'f04'));
|
|
31
38
|
exports.StyledDayLabel = StyledDayLabel;
|
|
32
|
-
var DatePickerWrapper = foundation_1.styled.div(
|
|
39
|
+
var DatePickerWrapper = foundation_1.styled.div(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n ", ";\n\n box-sizing: border-box;\n padding: ", ";\n display: flex;\n flex-direction: column;\n background-color: ", ";\n ", ";\n overflow: hidden;\n"], ["\n ",
|
|
33
40
|
";\n\n box-sizing: border-box;\n padding: ", ";\n display: flex;\n flex-direction: column;\n background-color: ", ";\n ", ";\n overflow: hidden;\n"])), function (_a) {
|
|
34
41
|
var size = _a.size;
|
|
35
42
|
var _b = utils_1.RcDatePickerSizes[size], width = _b.width, height = _b.height;
|
|
36
|
-
return foundation_1.css(
|
|
43
|
+
return foundation_1.css(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n width: ", ";\n height: ", ";\n "], ["\n width: ", ";\n height: ", ";\n "])), width, height);
|
|
37
44
|
}, foundation_1.spacing(3, 0), foundation_1.palette2('neutral', 'elevation'), foundation_1.fakeBorder());
|
|
38
45
|
exports.DatePickerWrapper = DatePickerWrapper;
|
|
39
|
-
var DaysWrapper = foundation_1.styled.div(
|
|
46
|
+
var DaysWrapper = foundation_1.styled.div(templateObject_14 || (templateObject_14 = tslib_1.__makeTemplateObject(["\n min-height: 216px;\n"], ["\n min-height: 216px;\n"])));
|
|
40
47
|
exports.DaysWrapper = DaysWrapper;
|
|
41
|
-
var DayFooterWrapper = foundation_1.styled.div(
|
|
48
|
+
var DayFooterWrapper = foundation_1.styled.div(templateObject_15 || (templateObject_15 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n bottom: ", ";\n left: 0;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n bottom: ", ";\n left: 0;\n width: 100%;\n"])), foundation_1.spacing(3));
|
|
42
49
|
exports.DayFooterWrapper = DayFooterWrapper;
|
|
43
|
-
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;
|
|
50
|
+
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;
|
|
@@ -270,7 +270,7 @@ RcTimePicker.defaultProps = {
|
|
|
270
270
|
},
|
|
271
271
|
MinutePickerProps: {
|
|
272
272
|
getScreenReaderLabel: function (minute) {
|
|
273
|
-
return "Minute: " + minute + ", use up and down arrow keys to change minutes time by
|
|
273
|
+
return "Minute: " + minute + ", use up and down arrow keys to change minutes time by " + utils_2.TIME_GAP + " minutes";
|
|
274
274
|
},
|
|
275
275
|
},
|
|
276
276
|
PeriodToggleProps: {
|
|
@@ -21,7 +21,7 @@ declare type GetFormattedTimeOption = {
|
|
|
21
21
|
declare const getFormattedTime: ({ hour, minute, period, periodTexts }: GetFormattedTimeOption, isTwelveHourSystem?: boolean | undefined) => string;
|
|
22
22
|
declare const HALF_DAY_HOURS = 12;
|
|
23
23
|
declare const HOUR_MINUTES = 60;
|
|
24
|
-
declare const TIME_GAP =
|
|
24
|
+
declare const TIME_GAP = 5;
|
|
25
25
|
declare const ONE_HOUR: number;
|
|
26
26
|
declare const twelveHourSystemSource: number[];
|
|
27
27
|
declare const twentyFourHourSystemSource: number[];
|
|
@@ -43,7 +43,7 @@ var HALF_DAY_HOURS = 12;
|
|
|
43
43
|
exports.HALF_DAY_HOURS = HALF_DAY_HOURS;
|
|
44
44
|
var HOUR_MINUTES = 60;
|
|
45
45
|
exports.HOUR_MINUTES = HOUR_MINUTES;
|
|
46
|
-
var TIME_GAP =
|
|
46
|
+
var TIME_GAP = 5;
|
|
47
47
|
exports.TIME_GAP = TIME_GAP;
|
|
48
48
|
var ONE_HOUR = HOUR_MINUTES * HOUR_MINUTES * 1000;
|
|
49
49
|
exports.ONE_HOUR = ONE_HOUR;
|
|
@@ -55,7 +55,7 @@ exports.twelveHourSystemSource = twelveHourSystemSource;
|
|
|
55
55
|
var twentyFourHourSystemSource = range_1.default(0, 24);
|
|
56
56
|
exports.twentyFourHourSystemSource = twentyFourHourSystemSource;
|
|
57
57
|
// [0, 60) step 5
|
|
58
|
-
var minuteSource = range_1.default(0, 60,
|
|
58
|
+
var minuteSource = range_1.default(0, 60, TIME_GAP);
|
|
59
59
|
exports.minuteSource = minuteSource;
|
|
60
60
|
var lastMinute = 55;
|
|
61
61
|
exports.lastMinute = lastMinute;
|
package/es6/README.md
CHANGED
|
@@ -15,9 +15,9 @@ View in [Codesandbox Example](https://codesandbox.io/s/4j370).
|
|
|
15
15
|
### Install
|
|
16
16
|
|
|
17
17
|
```ts
|
|
18
|
-
npm i @ringcentral/juno @ringcentral/juno-icon styled-components
|
|
18
|
+
npm i @ringcentral/juno @ringcentral/juno-icon styled-components dayjs
|
|
19
19
|
// or
|
|
20
|
-
yarn add @ringcentral/juno @ringcentral/juno-icon styled-components
|
|
20
|
+
yarn add @ringcentral/juno @ringcentral/juno-icon styled-components dayjs
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
### Quick Start
|
|
@@ -106,7 +106,7 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
106
106
|
});
|
|
107
107
|
var _g = useScreenReaderContext(), getBackToTodayAriaLabel = _g.getBackToTodayAriaLabel, getDayAriaLabel = _g.getDayAriaLabel;
|
|
108
108
|
var backToTodayAriaLabel = getBackToTodayAriaLabel === null || getBackToTodayAriaLabel === void 0 ? void 0 : getBackToTodayAriaLabel();
|
|
109
|
-
var header = useMemo(function () { return (React.createElement(StyledDaysHeader,
|
|
109
|
+
var header = useMemo(function () { return (React.createElement(StyledDaysHeader, { size: size }, weekdays.map(function (day) { return (React.createElement(StyledDayLabel, { size: size, key: day, variant: "caption" }, day)); }))); }, [size, weekdays]);
|
|
110
110
|
var renderDays = function (week) {
|
|
111
111
|
var selectedDate = date;
|
|
112
112
|
return week.map(function (day) {
|
|
@@ -13,22 +13,29 @@ var WeekWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTempl
|
|
|
13
13
|
}
|
|
14
14
|
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 32px;\n\n & > div:not(:first-child) {\n margin-left: ", ";\n }\n "], ["\n height: 32px;\n\n & > div:not(:first-child) {\n margin-left: ", ";\n }\n "])), spacing(1));
|
|
15
15
|
});
|
|
16
|
-
var StyledDaysHeader = styled.div(
|
|
17
|
-
|
|
16
|
+
var StyledDaysHeader = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", ";\n ", "\n"], ["\n ", ";\n ",
|
|
17
|
+
"\n"])), flexCenterStyle, function (_a) {
|
|
18
|
+
var size = _a.size;
|
|
19
|
+
if (size === 'small') {
|
|
20
|
+
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 28px;\n ", " {\n width: 20px;\n max-width: 20px;\n flex: none;\n }\n "], ["\n height: 28px;\n ", " {\n width: 20px;\n max-width: 20px;\n flex: none;\n }\n "])), StyledDayLabel);
|
|
21
|
+
}
|
|
22
|
+
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: 32px;\n "], ["\n height: 32px;\n "])));
|
|
23
|
+
});
|
|
24
|
+
var StyledDayLabel = styled(MuiTypography)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n\n text-align: center;\n ", ";\n color: ", ";\n"], ["\n ",
|
|
18
25
|
"\n\n text-align: center;\n ", ";\n color: ", ";\n"])), function (_a) {
|
|
19
26
|
var size = _a.size;
|
|
20
27
|
if (size === 'small') {
|
|
21
|
-
return css(
|
|
28
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n &:not(:first-child) {\n margin-left: ", ";\n }\n "], ["\n &:not(:first-child) {\n margin-left: ", ";\n }\n "])), spacing(0.5));
|
|
22
29
|
}
|
|
23
|
-
return css(
|
|
30
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 32px;\n\n &:not(:first-child) {\n margin-left: ", ";\n }\n "], ["\n width: 32px;\n\n &:not(:first-child) {\n margin-left: ", ";\n }\n "])), spacing(1));
|
|
24
31
|
}, typography('caption1'), palette2('neutral', 'f04'));
|
|
25
|
-
var DatePickerWrapper = styled.div(
|
|
32
|
+
var DatePickerWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", ";\n\n box-sizing: border-box;\n padding: ", ";\n display: flex;\n flex-direction: column;\n background-color: ", ";\n ", ";\n overflow: hidden;\n"], ["\n ",
|
|
26
33
|
";\n\n box-sizing: border-box;\n padding: ", ";\n display: flex;\n flex-direction: column;\n background-color: ", ";\n ", ";\n overflow: hidden;\n"])), function (_a) {
|
|
27
34
|
var size = _a.size;
|
|
28
35
|
var _b = RcDatePickerSizes[size], width = _b.width, height = _b.height;
|
|
29
|
-
return css(
|
|
36
|
+
return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n "], ["\n width: ", ";\n height: ", ";\n "])), width, height);
|
|
30
37
|
}, spacing(3, 0), palette2('neutral', 'elevation'), fakeBorder());
|
|
31
|
-
var DaysWrapper = styled.div(
|
|
32
|
-
var DayFooterWrapper = styled.div(
|
|
38
|
+
var DaysWrapper = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n min-height: 216px;\n"], ["\n min-height: 216px;\n"])));
|
|
39
|
+
var DayFooterWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n bottom: ", ";\n left: 0;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n bottom: ", ";\n left: 0;\n width: 100%;\n"])), spacing(3));
|
|
33
40
|
export { CalendarSlideTransitionWrapper, DatePickerWrapper, DayFooterWrapper, DaysWrapper, ProgressContainer, StyledDayLabel, StyledDaysHeader, WeekWrapper, };
|
|
34
|
-
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;
|
|
41
|
+
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;
|
|
@@ -268,7 +268,7 @@ RcTimePicker.defaultProps = {
|
|
|
268
268
|
},
|
|
269
269
|
MinutePickerProps: {
|
|
270
270
|
getScreenReaderLabel: function (minute) {
|
|
271
|
-
return "Minute: " + minute + ", use up and down arrow keys to change minutes time by
|
|
271
|
+
return "Minute: " + minute + ", use up and down arrow keys to change minutes time by " + TIME_GAP + " minutes";
|
|
272
272
|
},
|
|
273
273
|
},
|
|
274
274
|
PeriodToggleProps: {
|
|
@@ -34,7 +34,7 @@ var getFormattedTime = function (_a, isTwelveHourSystem) {
|
|
|
34
34
|
};
|
|
35
35
|
var HALF_DAY_HOURS = 12;
|
|
36
36
|
var HOUR_MINUTES = 60;
|
|
37
|
-
var TIME_GAP =
|
|
37
|
+
var TIME_GAP = 5;
|
|
38
38
|
var ONE_HOUR = HOUR_MINUTES * HOUR_MINUTES * 1000;
|
|
39
39
|
var ONE_MINUTE = HOUR_MINUTES * 1000;
|
|
40
40
|
// [0, 12)
|
|
@@ -42,7 +42,7 @@ var twelveHourSystemSource = range(0, 12);
|
|
|
42
42
|
// [0, 24)
|
|
43
43
|
var twentyFourHourSystemSource = range(0, 24);
|
|
44
44
|
// [0, 60) step 5
|
|
45
|
-
var minuteSource = range(0, 60,
|
|
45
|
+
var minuteSource = range(0, 60, TIME_GAP);
|
|
46
46
|
var lastMinute = 55;
|
|
47
47
|
/**
|
|
48
48
|
* hour and minute timestamp
|