@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
|
@@ -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
|
*
|
|
@@ -36,11 +35,11 @@ exports.default = void 0;
|
|
|
36
35
|
*/
|
|
37
36
|
const generateComponentTheme = theme => {
|
|
38
37
|
const borders = theme.borders,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
colors = theme.colors,
|
|
39
|
+
typography = theme.typography,
|
|
40
|
+
spacing = theme.spacing,
|
|
41
|
+
forms = theme.forms,
|
|
42
|
+
themeName = theme.key;
|
|
44
43
|
const themeSpecificStyle = {
|
|
45
44
|
canvas: {
|
|
46
45
|
color: theme['ic-brand-font-color-dark'],
|
|
@@ -62,10 +61,10 @@ const generateComponentTheme = theme => {
|
|
|
62
61
|
todayColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
63
62
|
todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
|
|
64
63
|
};
|
|
65
|
-
return {
|
|
64
|
+
return {
|
|
65
|
+
...componentVariables,
|
|
66
66
|
...themeSpecificStyle[themeName]
|
|
67
67
|
};
|
|
68
68
|
};
|
|
69
|
-
|
|
70
69
|
var _default = generateComponentTheme;
|
|
71
70
|
exports.default = _default;
|
package/lib/Calendar/index.js
CHANGED
|
@@ -1,44 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = exports.Calendar = void 0;
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _View = require("@instructure/ui-view/lib/View");
|
|
15
|
-
|
|
16
11
|
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
17
|
-
|
|
18
12
|
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
19
|
-
|
|
20
13
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
21
|
-
|
|
22
14
|
var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
|
|
23
|
-
|
|
24
15
|
var _console = require("@instructure/console");
|
|
25
|
-
|
|
26
16
|
var _uid = require("@instructure/uid");
|
|
27
|
-
|
|
28
17
|
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
29
|
-
|
|
30
18
|
var _emotion = require("@instructure/emotion");
|
|
31
|
-
|
|
32
19
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
33
|
-
|
|
34
20
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
35
|
-
|
|
36
21
|
var _Day = require("./Day");
|
|
37
|
-
|
|
38
22
|
var _props = require("./props");
|
|
39
|
-
|
|
40
23
|
var _dec, _dec2, _class, _class2;
|
|
41
|
-
|
|
42
24
|
/**
|
|
43
25
|
---
|
|
44
26
|
category: components
|
|
@@ -50,63 +32,53 @@ let Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
50
32
|
super(...arguments);
|
|
51
33
|
this.ref = null;
|
|
52
34
|
this._weekdayHeaderIds = this.props.renderWeekdayLabels.reduce((ids, _label, i) => {
|
|
53
|
-
return {
|
|
35
|
+
return {
|
|
36
|
+
...ids,
|
|
54
37
|
[i]: (0, _uid.uid)(`weekday-header-${i}`)
|
|
55
38
|
};
|
|
56
39
|
}, {});
|
|
57
|
-
|
|
58
40
|
this.handleRef = el => {
|
|
59
41
|
this.ref = el;
|
|
60
42
|
};
|
|
61
43
|
}
|
|
62
|
-
|
|
63
44
|
componentDidMount() {
|
|
64
45
|
var _this$props$makeStyle, _this$props;
|
|
65
|
-
|
|
66
46
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
67
47
|
}
|
|
68
|
-
|
|
69
48
|
componentDidUpdate() {
|
|
70
49
|
var _this$props$makeStyle2, _this$props2;
|
|
71
|
-
|
|
72
50
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
73
51
|
}
|
|
74
|
-
|
|
75
52
|
get role() {
|
|
76
53
|
return this.props.role === 'listbox' ? this.props.role : void 0;
|
|
77
54
|
}
|
|
78
|
-
|
|
79
55
|
renderHeader() {
|
|
80
56
|
const _this$props3 = this.props,
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
57
|
+
renderNextMonthButton = _this$props3.renderNextMonthButton,
|
|
58
|
+
renderPrevMonthButton = _this$props3.renderPrevMonthButton,
|
|
59
|
+
renderNavigationLabel = _this$props3.renderNavigationLabel,
|
|
60
|
+
onRequestRenderNextMonth = _this$props3.onRequestRenderNextMonth,
|
|
61
|
+
onRequestRenderPrevMonth = _this$props3.onRequestRenderPrevMonth,
|
|
62
|
+
styles = _this$props3.styles;
|
|
87
63
|
const nextButton = (0, _callRenderProp.callRenderProp)(renderNextMonthButton);
|
|
88
64
|
const prevButton = (0, _callRenderProp.callRenderProp)(renderPrevMonthButton);
|
|
89
|
-
|
|
90
65
|
const cloneButton = (button, onClick) => (0, _safeCloneElement.safeCloneElement)(button, {
|
|
91
66
|
onClick: (0, _createChainedFunction.createChainedFunction)(button.props.onClick, onClick)
|
|
92
67
|
});
|
|
93
|
-
|
|
94
68
|
const style = [styles === null || styles === void 0 ? void 0 : styles.navigation, ...(prevButton || nextButton ? [styles === null || styles === void 0 ? void 0 : styles.navigationWithButtons] : [])];
|
|
95
69
|
return (0, _emotion.jsx)("div", {
|
|
96
70
|
css: style
|
|
97
71
|
}, prevButton && cloneButton(prevButton, onRequestRenderPrevMonth), (0, _callRenderProp.callRenderProp)(renderNavigationLabel), nextButton && cloneButton(nextButton, onRequestRenderNextMonth));
|
|
98
72
|
}
|
|
99
|
-
|
|
100
73
|
renderBody() {
|
|
101
74
|
return (0, _emotion.jsx)("table", {
|
|
102
75
|
role: this.role
|
|
103
76
|
}, (0, _emotion.jsx)("thead", null, this.renderWeekdayHeaders()), (0, _emotion.jsx)("tbody", null, this.renderDays()));
|
|
104
77
|
}
|
|
105
|
-
|
|
106
78
|
renderWeekdayHeaders() {
|
|
107
79
|
const _this$props4 = this.props,
|
|
108
|
-
|
|
109
|
-
|
|
80
|
+
renderWeekdayLabels = _this$props4.renderWeekdayLabels,
|
|
81
|
+
styles = _this$props4.styles;
|
|
110
82
|
const length = renderWeekdayLabels.length;
|
|
111
83
|
(0, _console.logError)(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
|
|
112
84
|
return (0, _emotion.jsx)("tr", null, renderWeekdayLabels.map((label, i) => {
|
|
@@ -118,10 +90,8 @@ let Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
118
90
|
}, (0, _callRenderProp.callRenderProp)(label));
|
|
119
91
|
}));
|
|
120
92
|
}
|
|
121
|
-
|
|
122
93
|
renderDays() {
|
|
123
94
|
const children = _react.Children.toArray(this.props.children);
|
|
124
|
-
|
|
125
95
|
const length = children.length;
|
|
126
96
|
const role = this.role === 'listbox' ? 'presentation' : void 0;
|
|
127
97
|
(0, _console.logError)(length === Calendar.DAY_COUNT, `[Calendar] should have exactly ${Calendar.DAY_COUNT} children. ${length} provided.`);
|
|
@@ -140,10 +110,8 @@ let Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
140
110
|
'aria-describedby': this._weekdayHeaderIds[i]
|
|
141
111
|
}) : day))));
|
|
142
112
|
}
|
|
143
|
-
|
|
144
113
|
render() {
|
|
145
114
|
const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Calendar.allowedProps), Calendar);
|
|
146
|
-
|
|
147
115
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
|
|
148
116
|
as: this.props.as,
|
|
149
117
|
display: "inline-block",
|
|
@@ -152,7 +120,6 @@ let Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
152
120
|
elementRef: this.handleRef
|
|
153
121
|
}), this.renderHeader(), this.renderBody());
|
|
154
122
|
}
|
|
155
|
-
|
|
156
123
|
}, _class2.displayName = "Calendar", _class2.componentId = 'Calendar', _class2.Day = _Day.Day, _class2.DAY_COUNT = 42, _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
157
124
|
as: 'span',
|
|
158
125
|
role: 'table'
|
package/lib/Calendar/locator.js
CHANGED
package/lib/Calendar/props.js
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
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 _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
|
13
|
-
|
|
14
10
|
var _Day = require("./Day");
|
|
15
|
-
|
|
16
11
|
/*
|
|
17
12
|
* The MIT License (MIT)
|
|
18
13
|
*
|
|
@@ -36,6 +31,7 @@ var _Day = require("./Day");
|
|
|
36
31
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
37
32
|
* SOFTWARE.
|
|
38
33
|
*/
|
|
34
|
+
|
|
39
35
|
const propTypes = {
|
|
40
36
|
children: _Children.Children.oneOf([_Day.Day]),
|
|
41
37
|
renderNextMonthButton: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
package/lib/Calendar/styles.js
CHANGED
|
@@ -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
|
*
|
|
@@ -62,6 +61,5 @@ const generateStyle = componentTheme => {
|
|
|
62
61
|
}
|
|
63
62
|
};
|
|
64
63
|
};
|
|
65
|
-
|
|
66
64
|
var _default = generateStyle;
|
|
67
65
|
exports.default = _default;
|
package/lib/Calendar/theme.js
CHANGED
|
@@ -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
|
*
|
|
@@ -36,9 +35,9 @@ exports.default = void 0;
|
|
|
36
35
|
*/
|
|
37
36
|
const generateComponentTheme = theme => {
|
|
38
37
|
const colors = theme.colors,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
typography = theme.typography,
|
|
39
|
+
spacing = theme.spacing,
|
|
40
|
+
themeName = theme.key;
|
|
42
41
|
const themeSpecificStyle = {
|
|
43
42
|
canvas: {
|
|
44
43
|
color: theme['ic-brand-font-color-dark']
|
|
@@ -53,10 +52,10 @@ const generateComponentTheme = theme => {
|
|
|
53
52
|
navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
54
53
|
maxHeaderWidth: spacing === null || spacing === void 0 ? void 0 : spacing.medium
|
|
55
54
|
};
|
|
56
|
-
return {
|
|
55
|
+
return {
|
|
56
|
+
...componentVariables,
|
|
57
57
|
...themeSpecificStyle[themeName]
|
|
58
58
|
};
|
|
59
59
|
};
|
|
60
|
-
|
|
61
60
|
var _default = generateComponentTheme;
|
|
62
61
|
exports.default = _default;
|
package/lib/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-calendar",
|
|
3
|
-
"version": "8.33.2
|
|
3
|
+
"version": "8.33.2",
|
|
4
4
|
"description": "A calendar component.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,25 +24,25 @@
|
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@instructure/ui-babel-preset": "8.33.2
|
|
28
|
-
"@instructure/ui-color-utils": "8.33.2
|
|
29
|
-
"@instructure/ui-test-locator": "8.33.2
|
|
30
|
-
"@instructure/ui-test-utils": "8.33.2
|
|
31
|
-
"@instructure/ui-themes": "8.33.2
|
|
27
|
+
"@instructure/ui-babel-preset": "8.33.2",
|
|
28
|
+
"@instructure/ui-color-utils": "8.33.2",
|
|
29
|
+
"@instructure/ui-test-locator": "8.33.2",
|
|
30
|
+
"@instructure/ui-test-utils": "8.33.2",
|
|
31
|
+
"@instructure/ui-themes": "8.33.2"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.13.10",
|
|
35
|
-
"@instructure/console": "8.33.2
|
|
36
|
-
"@instructure/emotion": "8.33.2
|
|
37
|
-
"@instructure/shared-types": "8.33.2
|
|
38
|
-
"@instructure/ui-a11y-content": "8.33.2
|
|
39
|
-
"@instructure/ui-i18n": "8.33.2
|
|
40
|
-
"@instructure/ui-prop-types": "8.33.2
|
|
41
|
-
"@instructure/ui-react-utils": "8.33.2
|
|
42
|
-
"@instructure/ui-testable": "8.33.2
|
|
43
|
-
"@instructure/ui-utils": "8.33.2
|
|
44
|
-
"@instructure/ui-view": "8.33.2
|
|
45
|
-
"@instructure/uid": "8.33.2
|
|
35
|
+
"@instructure/console": "8.33.2",
|
|
36
|
+
"@instructure/emotion": "8.33.2",
|
|
37
|
+
"@instructure/shared-types": "8.33.2",
|
|
38
|
+
"@instructure/ui-a11y-content": "8.33.2",
|
|
39
|
+
"@instructure/ui-i18n": "8.33.2",
|
|
40
|
+
"@instructure/ui-prop-types": "8.33.2",
|
|
41
|
+
"@instructure/ui-react-utils": "8.33.2",
|
|
42
|
+
"@instructure/ui-testable": "8.33.2",
|
|
43
|
+
"@instructure/ui-utils": "8.33.2",
|
|
44
|
+
"@instructure/ui-view": "8.33.2",
|
|
45
|
+
"@instructure/uid": "8.33.2",
|
|
46
46
|
"prop-types": "^15"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|