@zendeskgarden/react-datepickers 9.0.0-next.7 → 9.0.0-next.9
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/esm/elements/DatePicker/DatePicker.js +169 -0
- package/dist/esm/elements/DatePicker/components/Calendar.js +125 -0
- package/dist/esm/elements/DatePicker/components/Input.js +75 -0
- package/dist/esm/elements/DatePicker/components/MonthSelector.js +61 -0
- package/dist/esm/elements/DatePicker/utils/date-picker-reducer.js +187 -0
- package/dist/esm/elements/DatePicker/utils/useDatePickerContext.js +14 -0
- package/dist/esm/elements/DatePickerRange/DatePickerRange.js +101 -0
- package/dist/esm/elements/DatePickerRange/components/Calendar.js +42 -0
- package/dist/esm/elements/DatePickerRange/components/End.js +79 -0
- package/dist/esm/elements/DatePickerRange/components/Month.js +270 -0
- package/dist/esm/elements/DatePickerRange/components/Start.js +79 -0
- package/dist/esm/elements/DatePickerRange/utils/date-picker-range-reducer.js +319 -0
- package/dist/esm/elements/DatePickerRange/utils/useDatePickerRangeContext.js +14 -0
- package/dist/esm/index.js +8 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +25 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +25 -0
- package/dist/esm/styled/StyledCalendar.js +21 -0
- package/dist/esm/styled/StyledCalendarItem.js +34 -0
- package/dist/esm/styled/StyledDatePicker.js +32 -0
- package/dist/esm/styled/StyledDay.js +54 -0
- package/dist/esm/styled/StyledDayLabel.js +21 -0
- package/dist/esm/styled/StyledHeader.js +21 -0
- package/dist/esm/styled/StyledHeaderLabel.js +21 -0
- package/dist/esm/styled/StyledHeaderPaddle.js +38 -0
- package/dist/esm/styled/StyledHighlight.js +50 -0
- package/dist/esm/styled/StyledMenu.js +22 -0
- package/dist/esm/styled/StyledMenuWrapper.js +27 -0
- package/dist/esm/styled/StyledRangeCalendar.js +22 -0
- package/dist/esm/types/index.js +12 -0
- package/dist/esm/utils/calendar-utils.js +88 -0
- package/dist/index.cjs.js +12 -28
- package/package.json +5 -5
- package/dist/index.esm.js +0 -1687
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'datepickers.highlight';
|
|
11
|
+
const retrieveBorderRadius = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme,
|
|
14
|
+
isEnd,
|
|
15
|
+
isStart
|
|
16
|
+
} = _ref;
|
|
17
|
+
const startValue = 'border-radius: 0 50% 50% 0;';
|
|
18
|
+
const endValue = 'border-radius: 50% 0 0 50%;';
|
|
19
|
+
if (theme.rtl) {
|
|
20
|
+
if (isStart) {
|
|
21
|
+
return startValue;
|
|
22
|
+
} else if (isEnd) {
|
|
23
|
+
return endValue;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
if (isStart) {
|
|
27
|
+
return endValue;
|
|
28
|
+
} else if (isEnd) {
|
|
29
|
+
return startValue;
|
|
30
|
+
}
|
|
31
|
+
return '';
|
|
32
|
+
};
|
|
33
|
+
const retrieveColor = _ref2 => {
|
|
34
|
+
let {
|
|
35
|
+
isHighlighted,
|
|
36
|
+
theme
|
|
37
|
+
} = _ref2;
|
|
38
|
+
return css(["background-color:", ";"], isHighlighted && getColorV8('primaryHue', 600, theme, 0.08));
|
|
39
|
+
};
|
|
40
|
+
const StyledHighlight = styled.div.attrs({
|
|
41
|
+
'data-garden-id': COMPONENT_ID
|
|
42
|
+
}).withConfig({
|
|
43
|
+
displayName: "StyledHighlight",
|
|
44
|
+
componentId: "sc-16vr32x-0"
|
|
45
|
+
})(["position:absolute;top:0;left:0;width:100%;height:100%;", " ", " ", ";"], retrieveBorderRadius, retrieveColor, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
46
|
+
StyledHighlight.defaultProps = {
|
|
47
|
+
theme: DEFAULT_THEME
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export { StyledHighlight };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'datepickers.menu';
|
|
11
|
+
const StyledMenu = styled.div.attrs({
|
|
12
|
+
'data-garden-id': COMPONENT_ID,
|
|
13
|
+
'data-garden-version': '9.0.0-next.9'
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledMenu",
|
|
16
|
+
componentId: "sc-1npbkk0-0"
|
|
17
|
+
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
+
StyledMenu.defaultProps = {
|
|
19
|
+
theme: DEFAULT_THEME
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { StyledMenu };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { menuStyles, getMenuPosition, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
|
+
|
|
10
|
+
const COMPONENT_ID = 'datepickers.menu_wrapper';
|
|
11
|
+
const StyledMenuWrapper = styled.div.attrs(props => ({
|
|
12
|
+
className: props.isAnimated && 'is-animated'
|
|
13
|
+
})).withConfig({
|
|
14
|
+
displayName: "StyledMenuWrapper",
|
|
15
|
+
componentId: "sc-6fowoz-0"
|
|
16
|
+
})(["top:0;left:0;", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
|
|
17
|
+
theme: props.theme,
|
|
18
|
+
hidden: props.isHidden,
|
|
19
|
+
margin: `${props.theme.space.base}px`,
|
|
20
|
+
zIndex: props.zIndex,
|
|
21
|
+
animationModifier: props.isAnimated ? '.is-animated' : undefined
|
|
22
|
+
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
23
|
+
StyledMenuWrapper.defaultProps = {
|
|
24
|
+
theme: DEFAULT_THEME
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { StyledMenuWrapper };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { StyledDatePicker } from './StyledDatePicker.js';
|
|
9
|
+
import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
10
|
+
|
|
11
|
+
const COMPONENT_ID = 'datepickers.range_calendar';
|
|
12
|
+
const StyledRangeCalendar = styled.div.attrs({
|
|
13
|
+
'data-garden-id': COMPONENT_ID
|
|
14
|
+
}).withConfig({
|
|
15
|
+
displayName: "StyledRangeCalendar",
|
|
16
|
+
componentId: "sc-1og46sy-0"
|
|
17
|
+
})(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatePicker, props => props.theme.rtl ? `&:last-of-type {margin-right: ${props.theme.space.base * 5}px}` : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
+
StyledRangeCalendar.defaultProps = {
|
|
19
|
+
theme: DEFAULT_THEME
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { StyledRangeCalendar };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
|
|
8
|
+
|
|
9
|
+
const WEEK_STARTS_ON = [0, 1, 2, 3, 4, 5, 6];
|
|
10
|
+
const PLACEMENT = ['auto', ...PLACEMENT$1];
|
|
11
|
+
|
|
12
|
+
export { PLACEMENT, WEEK_STARTS_ON };
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
const REGION_MAPPINGS = {
|
|
8
|
+
'ar-DZ': 0,
|
|
9
|
+
'ar-SA': 0,
|
|
10
|
+
'en-CA': 0,
|
|
11
|
+
'en-GB': 1,
|
|
12
|
+
'en-US': 0,
|
|
13
|
+
'fa-IR': 0,
|
|
14
|
+
'fr-CH': 1,
|
|
15
|
+
'nl-BE': 1,
|
|
16
|
+
'pt-BR': 0,
|
|
17
|
+
'zh-CN': 1,
|
|
18
|
+
'zh-TW': 1
|
|
19
|
+
};
|
|
20
|
+
const LANGUAGE_MAPPINGS = {
|
|
21
|
+
af: 0,
|
|
22
|
+
ar: 6,
|
|
23
|
+
be: 1,
|
|
24
|
+
bg: 1,
|
|
25
|
+
bn: 0,
|
|
26
|
+
ca: 1,
|
|
27
|
+
cs: 1,
|
|
28
|
+
da: 1,
|
|
29
|
+
de: 1,
|
|
30
|
+
el: 1,
|
|
31
|
+
en: 0,
|
|
32
|
+
eo: 1,
|
|
33
|
+
es: 1,
|
|
34
|
+
et: 1,
|
|
35
|
+
fa: 0,
|
|
36
|
+
fi: 1,
|
|
37
|
+
fil: 0,
|
|
38
|
+
fr: 1,
|
|
39
|
+
gl: 1,
|
|
40
|
+
he: 0,
|
|
41
|
+
hr: 1,
|
|
42
|
+
hu: 1,
|
|
43
|
+
id: 1,
|
|
44
|
+
is: 1,
|
|
45
|
+
it: 1,
|
|
46
|
+
ja: 1,
|
|
47
|
+
ka: 1,
|
|
48
|
+
ko: 0,
|
|
49
|
+
lt: 1,
|
|
50
|
+
lv: 1,
|
|
51
|
+
mk: 1,
|
|
52
|
+
ms: 1,
|
|
53
|
+
nb: 1,
|
|
54
|
+
nl: 1,
|
|
55
|
+
nn: 1,
|
|
56
|
+
pl: 1,
|
|
57
|
+
pt: 0,
|
|
58
|
+
ro: 1,
|
|
59
|
+
ru: 1,
|
|
60
|
+
sk: 1,
|
|
61
|
+
sl: 1,
|
|
62
|
+
sr: 1,
|
|
63
|
+
sv: 1,
|
|
64
|
+
th: 1,
|
|
65
|
+
tr: 1,
|
|
66
|
+
ug: 0,
|
|
67
|
+
uk: 1,
|
|
68
|
+
vi: 1,
|
|
69
|
+
zh: 1
|
|
70
|
+
};
|
|
71
|
+
function getStartOfWeek(locale) {
|
|
72
|
+
if (!locale) {
|
|
73
|
+
return 0;
|
|
74
|
+
}
|
|
75
|
+
for (const region in REGION_MAPPINGS) {
|
|
76
|
+
if (locale.startsWith(region)) {
|
|
77
|
+
return REGION_MAPPINGS[region];
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
for (const language in LANGUAGE_MAPPINGS) {
|
|
81
|
+
if (locale.startsWith(language)) {
|
|
82
|
+
return LANGUAGE_MAPPINGS[language];
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
return 0;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export { getStartOfWeek };
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
8
7
|
'use strict';
|
|
9
8
|
|
|
10
9
|
var React = require('react');
|
|
@@ -63,7 +62,7 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
|
|
|
63
62
|
const COMPONENT_ID$b = 'datepickers.menu';
|
|
64
63
|
const StyledMenu = styled__default.default.div.attrs({
|
|
65
64
|
'data-garden-id': COMPONENT_ID$b,
|
|
66
|
-
'data-garden-version': '9.0.0-next.
|
|
65
|
+
'data-garden-version': '9.0.0-next.9'
|
|
67
66
|
}).withConfig({
|
|
68
67
|
displayName: "StyledMenu",
|
|
69
68
|
componentId: "sc-1npbkk0-0"
|
|
@@ -389,9 +388,9 @@ function getStartOfWeek(locale) {
|
|
|
389
388
|
}
|
|
390
389
|
|
|
391
390
|
var _path$1;
|
|
392
|
-
function _extends$
|
|
391
|
+
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
393
392
|
var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
394
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
393
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
395
394
|
xmlns: "http://www.w3.org/2000/svg",
|
|
396
395
|
width: 16,
|
|
397
396
|
height: 16,
|
|
@@ -405,9 +404,9 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
|
405
404
|
};
|
|
406
405
|
|
|
407
406
|
var _path;
|
|
408
|
-
function _extends
|
|
407
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
409
408
|
var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
|
|
410
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends
|
|
409
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
411
410
|
xmlns: "http://www.w3.org/2000/svg",
|
|
412
411
|
width: 16,
|
|
413
412
|
height: 16,
|
|
@@ -1358,21 +1357,6 @@ const End = props => {
|
|
|
1358
1357
|
};
|
|
1359
1358
|
End.displayName = 'DatePickerRange.End';
|
|
1360
1359
|
|
|
1361
|
-
function _extends() {
|
|
1362
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
1363
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
1364
|
-
var source = arguments[i];
|
|
1365
|
-
for (var key in source) {
|
|
1366
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
1367
|
-
target[key] = source[key];
|
|
1368
|
-
}
|
|
1369
|
-
}
|
|
1370
|
-
}
|
|
1371
|
-
return target;
|
|
1372
|
-
};
|
|
1373
|
-
return _extends.apply(this, arguments);
|
|
1374
|
-
}
|
|
1375
|
-
|
|
1376
1360
|
const Month = React.forwardRef((_ref, ref) => {
|
|
1377
1361
|
let {
|
|
1378
1362
|
displayDate,
|
|
@@ -1609,10 +1593,10 @@ const Calendar = React.forwardRef((props, ref) => {
|
|
|
1609
1593
|
const {
|
|
1610
1594
|
state
|
|
1611
1595
|
} = useDatePickerContext();
|
|
1612
|
-
return React__namespace.default.createElement(StyledRangeCalendar,
|
|
1596
|
+
return React__namespace.default.createElement(StyledRangeCalendar, Object.assign({
|
|
1613
1597
|
ref: ref,
|
|
1614
1598
|
"data-garden-id": "datepickers.range",
|
|
1615
|
-
"data-garden-version": '9.0.0-next.
|
|
1599
|
+
"data-garden-version": '9.0.0-next.9'
|
|
1616
1600
|
}, props), React__namespace.default.createElement(Month, {
|
|
1617
1601
|
displayDate: state.previewDate,
|
|
1618
1602
|
isNextHidden: true
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-datepickers",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.9",
|
|
4
4
|
"description": "Components relating to datepickers in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "https://github.com/zendeskgarden/react-components/issues"
|
|
11
11
|
},
|
|
12
12
|
"main": "dist/index.cjs.js",
|
|
13
|
-
"module": "dist/index.
|
|
13
|
+
"module": "dist/esm/index.js",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"react-merge-refs": "^2.0.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@zendeskgarden/react-theming": "
|
|
31
|
+
"@zendeskgarden/react-theming": ">=9.0.0-next",
|
|
32
32
|
"react": ">=16.8.0",
|
|
33
33
|
"react-dom": ">=16.8.0",
|
|
34
34
|
"styled-components": "^5.3.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
37
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.9",
|
|
38
38
|
"@zendeskgarden/svg-icons": "7.0.0"
|
|
39
39
|
},
|
|
40
40
|
"keywords": [
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
49
|
"zendeskgarden:src": "src/index.ts",
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
|
|
51
51
|
}
|