@ringcentral/juno 2.39.1 → 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/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/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;
|
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;
|