@instructure/ui-calendar 8.33.2-snapshot-0 → 8.33.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/CHANGELOG.md +1 -5
- package/es/Calendar/CalendarLocator.js +2 -1
- package/es/Calendar/Day/DayLocator.js +3 -1
- package/es/Calendar/Day/index.js +16 -37
- package/es/Calendar/Day/locator.js +1 -0
- package/es/Calendar/Day/props.js +2 -1
- package/es/Calendar/Day/styles.js +2 -3
- package/es/Calendar/Day/theme.js +7 -7
- package/es/Calendar/index.js +10 -25
- package/es/Calendar/props.js +1 -0
- package/es/Calendar/styles.js +0 -1
- package/es/Calendar/theme.js +5 -5
- package/lib/Calendar/CalendarLocator.js +1 -4
- package/lib/Calendar/Day/DayLocator.js +1 -3
- package/lib/Calendar/Day/index.js +16 -51
- package/lib/Calendar/Day/locator.js +0 -2
- package/lib/Calendar/Day/props.js +1 -5
- package/lib/Calendar/Day/styles.js +2 -4
- package/lib/Calendar/Day/theme.js +7 -8
- package/lib/Calendar/index.js +10 -43
- package/lib/Calendar/locator.js +0 -2
- package/lib/Calendar/props.js +1 -5
- package/lib/Calendar/styles.js +0 -2
- package/lib/Calendar/theme.js +5 -6
- package/lib/index.js +0 -1
- package/package.json +17 -17
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Calendar/Day/index.d.ts +1 -1
- package/types/Calendar/Day/index.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,14 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [8.33.2
|
|
6
|
+
## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-calendar
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
10
|
## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
|
|
15
11
|
|
|
16
12
|
**Note:** Version bump only for package @instructure/ui-calendar
|
|
@@ -24,8 +24,9 @@
|
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
25
|
import { Calendar } from './index';
|
|
26
26
|
import { DayLocator } from './Day/DayLocator';
|
|
27
|
-
export { DayLocator };
|
|
27
|
+
export { DayLocator };
|
|
28
28
|
|
|
29
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
29
30
|
export const CalendarLocator = locator(Calendar.selector, {
|
|
30
31
|
findAllDays: function () {
|
|
31
32
|
return DayLocator.findAll(...arguments);
|
|
@@ -21,7 +21,9 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
|
-
import { Day } from './index';
|
|
26
|
+
import { Day } from './index';
|
|
26
27
|
|
|
28
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
27
29
|
export const DayLocator = locator(Day.selector);
|
package/es/Calendar/Day/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["children", "label", "interaction", "isOutsideMonth", "isSelected", "isToday", "onClick", "onKeyDown", "as", "styles"];
|
|
3
|
-
|
|
4
3
|
var _dec, _dec2, _class, _class2;
|
|
5
|
-
|
|
6
4
|
/*
|
|
7
5
|
* The MIT License (MIT)
|
|
8
6
|
*
|
|
@@ -37,7 +35,6 @@ import { withStyle, jsx } from '@instructure/emotion';
|
|
|
37
35
|
import generateStyle from './styles';
|
|
38
36
|
import generateComponentTheme from './theme';
|
|
39
37
|
import { propTypes, allowedProps } from './props';
|
|
40
|
-
|
|
41
38
|
/**
|
|
42
39
|
---
|
|
43
40
|
parent: Calendar
|
|
@@ -49,91 +46,74 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
|
|
|
49
46
|
constructor() {
|
|
50
47
|
super(...arguments);
|
|
51
48
|
this.ref = null;
|
|
52
|
-
|
|
53
49
|
this.handleClick = event => {
|
|
54
50
|
const _this$props = this.props,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
51
|
+
onClick = _this$props.onClick,
|
|
52
|
+
date = _this$props.date;
|
|
58
53
|
if (typeof onClick === 'function') {
|
|
59
54
|
onClick(event, {
|
|
60
55
|
date
|
|
61
56
|
});
|
|
62
57
|
}
|
|
63
58
|
};
|
|
64
|
-
|
|
65
59
|
this.handleKeyDown = event => {
|
|
66
60
|
const _this$props2 = this.props,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
61
|
+
onKeyDown = _this$props2.onKeyDown,
|
|
62
|
+
date = _this$props2.date;
|
|
70
63
|
if (typeof onKeyDown === 'function') {
|
|
71
64
|
onKeyDown(event, {
|
|
72
65
|
date
|
|
73
66
|
});
|
|
74
67
|
}
|
|
75
68
|
};
|
|
76
|
-
|
|
77
69
|
this.handleElementRef = el => {
|
|
78
70
|
const elementRef = this.props.elementRef;
|
|
79
71
|
this.ref = el;
|
|
80
|
-
|
|
81
72
|
if (typeof elementRef === 'function') {
|
|
82
73
|
elementRef(el);
|
|
83
74
|
}
|
|
84
75
|
};
|
|
85
76
|
}
|
|
86
|
-
|
|
87
77
|
componentDidMount() {
|
|
88
78
|
var _this$props$makeStyle, _this$props3;
|
|
89
|
-
|
|
90
79
|
(_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, this.makeStylesVariables);
|
|
91
80
|
}
|
|
92
|
-
|
|
93
81
|
componentDidUpdate() {
|
|
94
82
|
var _this$props$makeStyle2, _this$props4;
|
|
95
|
-
|
|
96
83
|
(_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, this.makeStylesVariables);
|
|
97
84
|
}
|
|
98
|
-
|
|
99
85
|
get makeStylesVariables() {
|
|
100
86
|
return {
|
|
101
87
|
isDisabled: this.isDisabled
|
|
102
88
|
};
|
|
103
89
|
}
|
|
104
|
-
|
|
105
90
|
get isDisabled() {
|
|
106
91
|
const interaction = this.props.interaction;
|
|
107
92
|
return interaction === 'disabled';
|
|
108
93
|
}
|
|
109
|
-
|
|
110
94
|
get elementType() {
|
|
111
95
|
const as = this.props.as;
|
|
112
96
|
return as || getElementType(Day, this.props);
|
|
113
97
|
}
|
|
114
|
-
|
|
115
98
|
shouldApplyAriaSelected() {
|
|
116
99
|
const role = this.props.role; // eslint-disable-line react/prop-types
|
|
117
|
-
|
|
118
100
|
return !!role && ['option', 'gridcell'].indexOf(role) > -1;
|
|
119
101
|
}
|
|
120
|
-
|
|
121
102
|
render() {
|
|
122
103
|
const _this$props5 = this.props,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
104
|
+
children = _this$props5.children,
|
|
105
|
+
label = _this$props5.label,
|
|
106
|
+
interaction = _this$props5.interaction,
|
|
107
|
+
isOutsideMonth = _this$props5.isOutsideMonth,
|
|
108
|
+
isSelected = _this$props5.isSelected,
|
|
109
|
+
isToday = _this$props5.isToday,
|
|
110
|
+
onClick = _this$props5.onClick,
|
|
111
|
+
onKeyDown = _this$props5.onKeyDown,
|
|
112
|
+
as = _this$props5.as,
|
|
113
|
+
styles = _this$props5.styles,
|
|
114
|
+
props = _objectWithoutProperties(_this$props5, _excluded);
|
|
135
115
|
const elementType = this.elementType,
|
|
136
|
-
|
|
116
|
+
isDisabled = this.isDisabled;
|
|
137
117
|
const passthroughProps = View.omitViewProps(omitProps(props, Day.allowedProps), Day);
|
|
138
118
|
return jsx(View, Object.assign({}, passthroughProps, {
|
|
139
119
|
as: elementType,
|
|
@@ -156,7 +136,6 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
|
|
|
156
136
|
alt: label
|
|
157
137
|
}, callRenderProp(children))));
|
|
158
138
|
}
|
|
159
|
-
|
|
160
139
|
}, _class2.displayName = "Day", _class2.componentId = 'Calendar.Day', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
161
140
|
interaction: 'enabled',
|
|
162
141
|
isSelected: false,
|
package/es/Calendar/Day/props.js
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import PropTypes from 'prop-types';
|
|
25
26
|
import { I18nPropTypes } from '@instructure/ui-i18n';
|
|
26
27
|
const propTypes = {
|
|
@@ -35,7 +36,7 @@ const propTypes = {
|
|
|
35
36
|
onKeyDown: PropTypes.func,
|
|
36
37
|
elementRef: PropTypes.func,
|
|
37
38
|
as: PropTypes.elementType // eslint-disable-line react/require-default-props
|
|
38
|
-
|
|
39
39
|
};
|
|
40
|
+
|
|
40
41
|
const allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
|
|
41
42
|
export { propTypes, allowedProps };
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
*/
|
|
35
35
|
const generateStyle = (componentTheme, props, state) => {
|
|
36
36
|
const isOutsideMonth = props.isOutsideMonth,
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
isSelected = props.isSelected,
|
|
38
|
+
isToday = props.isToday;
|
|
39
39
|
const isDisabled = state.isDisabled;
|
|
40
40
|
return {
|
|
41
41
|
calendarDay: {
|
|
@@ -75,5 +75,4 @@ const generateStyle = (componentTheme, props, state) => {
|
|
|
75
75
|
}
|
|
76
76
|
};
|
|
77
77
|
};
|
|
78
|
-
|
|
79
78
|
export default generateStyle;
|
package/es/Calendar/Day/theme.js
CHANGED
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
*/
|
|
30
30
|
const generateComponentTheme = theme => {
|
|
31
31
|
const borders = theme.borders,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
colors = theme.colors,
|
|
33
|
+
typography = theme.typography,
|
|
34
|
+
spacing = theme.spacing,
|
|
35
|
+
forms = theme.forms,
|
|
36
|
+
themeName = theme.key;
|
|
37
37
|
const themeSpecificStyle = {
|
|
38
38
|
canvas: {
|
|
39
39
|
color: theme['ic-brand-font-color-dark'],
|
|
@@ -55,9 +55,9 @@ const generateComponentTheme = theme => {
|
|
|
55
55
|
todayColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
56
56
|
todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
|
|
57
57
|
};
|
|
58
|
-
return {
|
|
58
|
+
return {
|
|
59
|
+
...componentVariables,
|
|
59
60
|
...themeSpecificStyle[themeName]
|
|
60
61
|
};
|
|
61
62
|
};
|
|
62
|
-
|
|
63
63
|
export default generateComponentTheme;
|
package/es/Calendar/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
var _dec, _dec2, _class, _class2;
|
|
2
|
-
|
|
3
2
|
/*
|
|
4
3
|
* The MIT License (MIT)
|
|
5
4
|
*
|
|
@@ -37,7 +36,6 @@ import generateStyle from './styles';
|
|
|
37
36
|
import generateComponentTheme from './theme';
|
|
38
37
|
import { Day } from './Day';
|
|
39
38
|
import { propTypes, allowedProps } from './props';
|
|
40
|
-
|
|
41
39
|
/**
|
|
42
40
|
---
|
|
43
41
|
category: components
|
|
@@ -49,63 +47,53 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
49
47
|
super(...arguments);
|
|
50
48
|
this.ref = null;
|
|
51
49
|
this._weekdayHeaderIds = this.props.renderWeekdayLabels.reduce((ids, _label, i) => {
|
|
52
|
-
return {
|
|
50
|
+
return {
|
|
51
|
+
...ids,
|
|
53
52
|
[i]: uid(`weekday-header-${i}`)
|
|
54
53
|
};
|
|
55
54
|
}, {});
|
|
56
|
-
|
|
57
55
|
this.handleRef = el => {
|
|
58
56
|
this.ref = el;
|
|
59
57
|
};
|
|
60
58
|
}
|
|
61
|
-
|
|
62
59
|
componentDidMount() {
|
|
63
60
|
var _this$props$makeStyle, _this$props;
|
|
64
|
-
|
|
65
61
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
66
62
|
}
|
|
67
|
-
|
|
68
63
|
componentDidUpdate() {
|
|
69
64
|
var _this$props$makeStyle2, _this$props2;
|
|
70
|
-
|
|
71
65
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
72
66
|
}
|
|
73
|
-
|
|
74
67
|
get role() {
|
|
75
68
|
return this.props.role === 'listbox' ? this.props.role : void 0;
|
|
76
69
|
}
|
|
77
|
-
|
|
78
70
|
renderHeader() {
|
|
79
71
|
const _this$props3 = this.props,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
72
|
+
renderNextMonthButton = _this$props3.renderNextMonthButton,
|
|
73
|
+
renderPrevMonthButton = _this$props3.renderPrevMonthButton,
|
|
74
|
+
renderNavigationLabel = _this$props3.renderNavigationLabel,
|
|
75
|
+
onRequestRenderNextMonth = _this$props3.onRequestRenderNextMonth,
|
|
76
|
+
onRequestRenderPrevMonth = _this$props3.onRequestRenderPrevMonth,
|
|
77
|
+
styles = _this$props3.styles;
|
|
86
78
|
const nextButton = callRenderProp(renderNextMonthButton);
|
|
87
79
|
const prevButton = callRenderProp(renderPrevMonthButton);
|
|
88
|
-
|
|
89
80
|
const cloneButton = (button, onClick) => safeCloneElement(button, {
|
|
90
81
|
onClick: createChainedFunction(button.props.onClick, onClick)
|
|
91
82
|
});
|
|
92
|
-
|
|
93
83
|
const style = [styles === null || styles === void 0 ? void 0 : styles.navigation, ...(prevButton || nextButton ? [styles === null || styles === void 0 ? void 0 : styles.navigationWithButtons] : [])];
|
|
94
84
|
return jsx("div", {
|
|
95
85
|
css: style
|
|
96
86
|
}, prevButton && cloneButton(prevButton, onRequestRenderPrevMonth), callRenderProp(renderNavigationLabel), nextButton && cloneButton(nextButton, onRequestRenderNextMonth));
|
|
97
87
|
}
|
|
98
|
-
|
|
99
88
|
renderBody() {
|
|
100
89
|
return jsx("table", {
|
|
101
90
|
role: this.role
|
|
102
91
|
}, jsx("thead", null, this.renderWeekdayHeaders()), jsx("tbody", null, this.renderDays()));
|
|
103
92
|
}
|
|
104
|
-
|
|
105
93
|
renderWeekdayHeaders() {
|
|
106
94
|
const _this$props4 = this.props,
|
|
107
|
-
|
|
108
|
-
|
|
95
|
+
renderWeekdayLabels = _this$props4.renderWeekdayLabels,
|
|
96
|
+
styles = _this$props4.styles;
|
|
109
97
|
const length = renderWeekdayLabels.length;
|
|
110
98
|
error(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
|
|
111
99
|
return jsx("tr", null, renderWeekdayLabels.map((label, i) => {
|
|
@@ -117,7 +105,6 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
117
105
|
}, callRenderProp(label));
|
|
118
106
|
}));
|
|
119
107
|
}
|
|
120
|
-
|
|
121
108
|
renderDays() {
|
|
122
109
|
const children = Children.toArray(this.props.children);
|
|
123
110
|
const length = children.length;
|
|
@@ -138,7 +125,6 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
138
125
|
'aria-describedby': this._weekdayHeaderIds[i]
|
|
139
126
|
}) : day))));
|
|
140
127
|
}
|
|
141
|
-
|
|
142
128
|
render() {
|
|
143
129
|
const passthroughProps = View.omitViewProps(omitProps(this.props, Calendar.allowedProps), Calendar);
|
|
144
130
|
return jsx(View, Object.assign({}, passthroughProps, {
|
|
@@ -149,7 +135,6 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
149
135
|
elementRef: this.handleRef
|
|
150
136
|
}), this.renderHeader(), this.renderBody());
|
|
151
137
|
}
|
|
152
|
-
|
|
153
138
|
}, _class2.displayName = "Calendar", _class2.componentId = 'Calendar', _class2.Day = Day, _class2.DAY_COUNT = 42, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
154
139
|
as: 'span',
|
|
155
140
|
role: 'table'
|
package/es/Calendar/props.js
CHANGED
package/es/Calendar/styles.js
CHANGED
package/es/Calendar/theme.js
CHANGED
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
*/
|
|
30
30
|
const generateComponentTheme = theme => {
|
|
31
31
|
const colors = theme.colors,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
typography = theme.typography,
|
|
33
|
+
spacing = theme.spacing,
|
|
34
|
+
themeName = theme.key;
|
|
35
35
|
const themeSpecificStyle = {
|
|
36
36
|
canvas: {
|
|
37
37
|
color: theme['ic-brand-font-color-dark']
|
|
@@ -46,9 +46,9 @@ const generateComponentTheme = theme => {
|
|
|
46
46
|
navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
47
47
|
maxHeaderWidth: spacing === null || spacing === void 0 ? void 0 : spacing.medium
|
|
48
48
|
};
|
|
49
|
-
return {
|
|
49
|
+
return {
|
|
50
|
+
...componentVariables,
|
|
50
51
|
...themeSpecificStyle[themeName]
|
|
51
52
|
};
|
|
52
53
|
};
|
|
53
|
-
|
|
54
54
|
export default generateComponentTheme;
|
|
@@ -10,13 +10,9 @@ Object.defineProperty(exports, "DayLocator", {
|
|
|
10
10
|
return _DayLocator.DayLocator;
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
|
-
|
|
14
13
|
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
15
|
-
|
|
16
14
|
var _index = require("./index");
|
|
17
|
-
|
|
18
15
|
var _DayLocator = require("./Day/DayLocator");
|
|
19
|
-
|
|
20
16
|
/*
|
|
21
17
|
* The MIT License (MIT)
|
|
22
18
|
*
|
|
@@ -40,6 +36,7 @@ var _DayLocator = require("./Day/DayLocator");
|
|
|
40
36
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
41
37
|
* SOFTWARE.
|
|
42
38
|
*/
|
|
39
|
+
|
|
43
40
|
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
44
41
|
const CalendarLocator = (0, _locator.locator)(_index.Calendar.selector, {
|
|
45
42
|
findAllDays: function () {
|
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.DayLocator = void 0;
|
|
7
|
-
|
|
8
7
|
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
9
|
-
|
|
10
8
|
var _index = require("./index");
|
|
11
|
-
|
|
12
9
|
/*
|
|
13
10
|
* The MIT License (MIT)
|
|
14
11
|
*
|
|
@@ -32,6 +29,7 @@ var _index = require("./index");
|
|
|
32
29
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
33
30
|
* SOFTWARE.
|
|
34
31
|
*/
|
|
32
|
+
|
|
35
33
|
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
36
34
|
const DayLocator = (0, _locator.locator)(_index.Day.selector);
|
|
37
35
|
exports.DayLocator = DayLocator;
|
|
@@ -1,40 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = exports.Day = void 0;
|
|
9
|
-
|
|
10
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _View = require("@instructure/ui-view/lib/View");
|
|
15
|
-
|
|
16
11
|
var _AccessibleContent = require("@instructure/ui-a11y-content/lib/AccessibleContent");
|
|
17
|
-
|
|
18
12
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
19
|
-
|
|
20
13
|
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
21
|
-
|
|
22
14
|
var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
|
|
23
|
-
|
|
24
15
|
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
25
|
-
|
|
26
16
|
var _emotion = require("@instructure/emotion");
|
|
27
|
-
|
|
28
17
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
29
|
-
|
|
30
18
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
31
|
-
|
|
32
19
|
var _props = require("./props");
|
|
33
|
-
|
|
34
20
|
const _excluded = ["children", "label", "interaction", "isOutsideMonth", "isSelected", "isToday", "onClick", "onKeyDown", "as", "styles"];
|
|
35
|
-
|
|
36
21
|
var _dec, _dec2, _class, _class2;
|
|
37
|
-
|
|
38
22
|
/**
|
|
39
23
|
---
|
|
40
24
|
parent: Calendar
|
|
@@ -46,93 +30,75 @@ let Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
|
|
|
46
30
|
constructor() {
|
|
47
31
|
super(...arguments);
|
|
48
32
|
this.ref = null;
|
|
49
|
-
|
|
50
33
|
this.handleClick = event => {
|
|
51
34
|
const _this$props = this.props,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
35
|
+
onClick = _this$props.onClick,
|
|
36
|
+
date = _this$props.date;
|
|
55
37
|
if (typeof onClick === 'function') {
|
|
56
38
|
onClick(event, {
|
|
57
39
|
date
|
|
58
40
|
});
|
|
59
41
|
}
|
|
60
42
|
};
|
|
61
|
-
|
|
62
43
|
this.handleKeyDown = event => {
|
|
63
44
|
const _this$props2 = this.props,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
45
|
+
onKeyDown = _this$props2.onKeyDown,
|
|
46
|
+
date = _this$props2.date;
|
|
67
47
|
if (typeof onKeyDown === 'function') {
|
|
68
48
|
onKeyDown(event, {
|
|
69
49
|
date
|
|
70
50
|
});
|
|
71
51
|
}
|
|
72
52
|
};
|
|
73
|
-
|
|
74
53
|
this.handleElementRef = el => {
|
|
75
54
|
const elementRef = this.props.elementRef;
|
|
76
55
|
this.ref = el;
|
|
77
|
-
|
|
78
56
|
if (typeof elementRef === 'function') {
|
|
79
57
|
elementRef(el);
|
|
80
58
|
}
|
|
81
59
|
};
|
|
82
60
|
}
|
|
83
|
-
|
|
84
61
|
componentDidMount() {
|
|
85
62
|
var _this$props$makeStyle, _this$props3;
|
|
86
|
-
|
|
87
63
|
(_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, this.makeStylesVariables);
|
|
88
64
|
}
|
|
89
|
-
|
|
90
65
|
componentDidUpdate() {
|
|
91
66
|
var _this$props$makeStyle2, _this$props4;
|
|
92
|
-
|
|
93
67
|
(_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, this.makeStylesVariables);
|
|
94
68
|
}
|
|
95
|
-
|
|
96
69
|
get makeStylesVariables() {
|
|
97
70
|
return {
|
|
98
71
|
isDisabled: this.isDisabled
|
|
99
72
|
};
|
|
100
73
|
}
|
|
101
|
-
|
|
102
74
|
get isDisabled() {
|
|
103
75
|
const interaction = this.props.interaction;
|
|
104
76
|
return interaction === 'disabled';
|
|
105
77
|
}
|
|
106
|
-
|
|
107
78
|
get elementType() {
|
|
108
79
|
const as = this.props.as;
|
|
109
80
|
return as || (0, _getElementType.getElementType)(Day, this.props);
|
|
110
81
|
}
|
|
111
|
-
|
|
112
82
|
shouldApplyAriaSelected() {
|
|
113
83
|
const role = this.props.role; // eslint-disable-line react/prop-types
|
|
114
|
-
|
|
115
84
|
return !!role && ['option', 'gridcell'].indexOf(role) > -1;
|
|
116
85
|
}
|
|
117
|
-
|
|
118
86
|
render() {
|
|
119
87
|
const _this$props5 = this.props,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
88
|
+
children = _this$props5.children,
|
|
89
|
+
label = _this$props5.label,
|
|
90
|
+
interaction = _this$props5.interaction,
|
|
91
|
+
isOutsideMonth = _this$props5.isOutsideMonth,
|
|
92
|
+
isSelected = _this$props5.isSelected,
|
|
93
|
+
isToday = _this$props5.isToday,
|
|
94
|
+
onClick = _this$props5.onClick,
|
|
95
|
+
onKeyDown = _this$props5.onKeyDown,
|
|
96
|
+
as = _this$props5.as,
|
|
97
|
+
styles = _this$props5.styles,
|
|
98
|
+
props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
|
|
131
99
|
const elementType = this.elementType,
|
|
132
|
-
|
|
133
|
-
|
|
100
|
+
isDisabled = this.isDisabled;
|
|
134
101
|
const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(props, Day.allowedProps), Day);
|
|
135
|
-
|
|
136
102
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
|
|
137
103
|
as: elementType,
|
|
138
104
|
css: styles === null || styles === void 0 ? void 0 : styles.calendarDay,
|
|
@@ -154,7 +120,6 @@ let Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
|
|
|
154
120
|
alt: label
|
|
155
121
|
}, (0, _callRenderProp.callRenderProp)(children))));
|
|
156
122
|
}
|
|
157
|
-
|
|
158
123
|
}, _class2.displayName = "Day", _class2.componentId = 'Calendar.Day', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
159
124
|
interaction: 'enabled',
|
|
160
125
|
isSelected: false,
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _I18nPropTypes = require("@instructure/ui-i18n/lib/I18nPropTypes.js");
|
|
13
|
-
|
|
14
10
|
/*
|
|
15
11
|
* The MIT License (MIT)
|
|
16
12
|
*
|
|
@@ -34,6 +30,7 @@ var _I18nPropTypes = require("@instructure/ui-i18n/lib/I18nPropTypes.js");
|
|
|
34
30
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
35
31
|
* SOFTWARE.
|
|
36
32
|
*/
|
|
33
|
+
|
|
37
34
|
const propTypes = {
|
|
38
35
|
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
39
36
|
date: _I18nPropTypes.I18nPropTypes.iso8601.isRequired,
|
|
@@ -46,7 +43,6 @@ const propTypes = {
|
|
|
46
43
|
onKeyDown: _propTypes.default.func,
|
|
47
44
|
elementRef: _propTypes.default.func,
|
|
48
45
|
as: _propTypes.default.elementType // eslint-disable-line react/require-default-props
|
|
49
|
-
|
|
50
46
|
};
|
|
51
47
|
exports.propTypes = propTypes;
|
|
52
48
|
const allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -41,8 +40,8 @@ exports.default = void 0;
|
|
|
41
40
|
*/
|
|
42
41
|
const generateStyle = (componentTheme, props, state) => {
|
|
43
42
|
const isOutsideMonth = props.isOutsideMonth,
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
isSelected = props.isSelected,
|
|
44
|
+
isToday = props.isToday;
|
|
46
45
|
const isDisabled = state.isDisabled;
|
|
47
46
|
return {
|
|
48
47
|
calendarDay: {
|
|
@@ -82,6 +81,5 @@ const generateStyle = (componentTheme, props, state) => {
|
|
|
82
81
|
}
|
|
83
82
|
};
|
|
84
83
|
};
|
|
85
|
-
|
|
86
84
|
var _default = generateStyle;
|
|
87
85
|
exports.default = _default;
|