@instructure/ui-date-input 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/DateInput/DateInputLocator.js +5 -5
- package/es/DateInput/index.js +46 -76
- package/es/DateInput/props.js +1 -0
- package/es/DateInput/styles.js +0 -1
- package/es/index.js +1 -0
- package/lib/DateInput/DateInputLocator.js +2 -6
- package/lib/DateInput/index.js +46 -94
- package/lib/DateInput/locator.js +0 -2
- package/lib/DateInput/props.js +1 -8
- package/lib/DateInput/styles.js +0 -2
- package/lib/index.js +0 -1
- package/package.json +16 -16
- package/tsconfig.build.tsbuildinfo +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-date-input
|
|
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-date-input
|
|
@@ -22,16 +22,17 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
|
+
|
|
25
26
|
/* eslint-disable no-restricted-imports */
|
|
26
27
|
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
import { CalendarLocator } from '@instructure/ui-calendar/es/Calendar/CalendarLocator';
|
|
29
|
+
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
30
30
|
import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocator';
|
|
31
31
|
/* eslint-enable no-restricted-imports */
|
|
32
32
|
|
|
33
|
-
import { DateInput } from './index';
|
|
33
|
+
import { DateInput } from './index';
|
|
34
34
|
|
|
35
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
35
36
|
export const DateInputLocator = locator(DateInput.selector, {
|
|
36
37
|
findInput: function () {
|
|
37
38
|
return locator('input').find(...arguments);
|
|
@@ -40,7 +41,6 @@ export const DateInputLocator = locator(DateInput.selector, {
|
|
|
40
41
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
41
42
|
args[_key - 1] = arguments[_key];
|
|
42
43
|
}
|
|
43
|
-
|
|
44
44
|
const content = await PopoverLocator.findContent(element, ...args);
|
|
45
45
|
return content ? CalendarLocator.find(content.getDOMNode()) : null;
|
|
46
46
|
}
|
package/es/DateInput/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["renderLabel", "value", "placeholder", "onBlur", "isRequired", "size", "isInline", "layout", "width", "messages", "onRequestValidateDate", "onRequestShowCalendar", "onRequestHideCalendar", "onRequestSelectNextDay", "onRequestSelectPrevDay", "onRequestRenderNextMonth", "onRequestRenderPrevMonth"],
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
_excluded2 = ["ref"];
|
|
5
4
|
var _dec, _dec2, _class, _class2, _IconCalendarMonthLin;
|
|
6
|
-
|
|
7
5
|
/*
|
|
8
6
|
* The MIT License (MIT)
|
|
9
7
|
*
|
|
@@ -41,7 +39,6 @@ import { testable } from '@instructure/ui-testable';
|
|
|
41
39
|
import { withStyle, jsx } from '@instructure/emotion';
|
|
42
40
|
import generateStyle from './styles';
|
|
43
41
|
import { propTypes, allowedProps } from './props';
|
|
44
|
-
|
|
45
42
|
/**
|
|
46
43
|
---
|
|
47
44
|
category: components
|
|
@@ -58,16 +55,13 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
|
|
|
58
55
|
};
|
|
59
56
|
this._input = void 0;
|
|
60
57
|
this.ref = null;
|
|
61
|
-
|
|
62
58
|
this.formatDateId = date => {
|
|
63
59
|
// ISO8601 strings may contain a space. Remove any spaces before using the
|
|
64
60
|
// date as the id.
|
|
65
61
|
return date.replace(/\s/g, '');
|
|
66
62
|
};
|
|
67
|
-
|
|
68
63
|
this.handleInputRef = el => {
|
|
69
64
|
var _this$props$inputRef, _this$props;
|
|
70
|
-
|
|
71
65
|
// Ensures that we position the Calendar with respect to the input correctly
|
|
72
66
|
// if the Calendar is open on mount
|
|
73
67
|
if (!this.state.hasInputRef) {
|
|
@@ -75,115 +69,98 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
|
|
|
75
69
|
hasInputRef: true
|
|
76
70
|
});
|
|
77
71
|
}
|
|
78
|
-
|
|
79
72
|
this._input = el;
|
|
80
73
|
(_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
|
|
81
74
|
};
|
|
82
|
-
|
|
83
75
|
this.handleInputChange = (event, value) => {
|
|
84
76
|
var _this$props$onChange, _this$props2;
|
|
85
|
-
|
|
86
77
|
(_this$props$onChange = (_this$props2 = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, event, {
|
|
87
78
|
value
|
|
88
79
|
});
|
|
89
80
|
this.handleShowCalendar(event);
|
|
90
81
|
};
|
|
91
|
-
|
|
92
82
|
this.handleShowCalendar = event => {
|
|
93
83
|
if (this.interaction === 'enabled') {
|
|
94
84
|
var _this$props$onRequest, _this$props3;
|
|
95
|
-
|
|
96
85
|
(_this$props$onRequest = (_this$props3 = this.props).onRequestShowCalendar) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props3, event);
|
|
97
86
|
}
|
|
98
87
|
};
|
|
99
|
-
|
|
100
88
|
this.handleHideCalendar = event => {
|
|
101
89
|
var _this$props$onRequest2, _this$props4, _this$props$onRequest3, _this$props5;
|
|
102
|
-
|
|
103
90
|
(_this$props$onRequest2 = (_this$props4 = this.props).onRequestValidateDate) === null || _this$props$onRequest2 === void 0 ? void 0 : _this$props$onRequest2.call(_this$props4, event);
|
|
104
91
|
(_this$props$onRequest3 = (_this$props5 = this.props).onRequestHideCalendar) === null || _this$props$onRequest3 === void 0 ? void 0 : _this$props$onRequest3.call(_this$props5, event);
|
|
105
92
|
};
|
|
106
|
-
|
|
107
93
|
this.handleHighlightOption = (event, _ref) => {
|
|
108
94
|
let direction = _ref.direction;
|
|
109
95
|
const _this$props6 = this.props,
|
|
110
|
-
|
|
111
|
-
|
|
96
|
+
onRequestSelectNextDay = _this$props6.onRequestSelectNextDay,
|
|
97
|
+
onRequestSelectPrevDay = _this$props6.onRequestSelectPrevDay;
|
|
112
98
|
if (direction === -1) onRequestSelectPrevDay === null || onRequestSelectPrevDay === void 0 ? void 0 : onRequestSelectPrevDay(event);
|
|
113
99
|
if (direction === 1) onRequestSelectNextDay === null || onRequestSelectNextDay === void 0 ? void 0 : onRequestSelectNextDay(event);
|
|
114
100
|
};
|
|
115
101
|
}
|
|
116
|
-
|
|
117
102
|
componentDidMount() {
|
|
118
103
|
var _this$props$makeStyle, _this$props7;
|
|
119
|
-
|
|
120
104
|
(_this$props$makeStyle = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props7);
|
|
121
105
|
}
|
|
122
|
-
|
|
123
106
|
componentDidUpdate() {
|
|
124
107
|
var _this$props$makeStyle2, _this$props8;
|
|
125
|
-
|
|
126
108
|
(_this$props$makeStyle2 = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props8);
|
|
127
109
|
}
|
|
128
|
-
|
|
129
110
|
get selectedDateId() {
|
|
130
111
|
let selectedDateId;
|
|
131
112
|
Children.toArray(this.props.children).forEach(day => {
|
|
132
113
|
const _props = day.props,
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
114
|
+
date = _props.date,
|
|
115
|
+
isSelected = _props.isSelected;
|
|
136
116
|
if (isSelected) {
|
|
137
117
|
selectedDateId = this.formatDateId(date);
|
|
138
118
|
}
|
|
139
119
|
});
|
|
140
120
|
return selectedDateId;
|
|
141
121
|
}
|
|
142
|
-
|
|
143
122
|
get interaction() {
|
|
144
123
|
return getInteraction({
|
|
145
124
|
props: this.props
|
|
146
125
|
});
|
|
147
126
|
}
|
|
148
|
-
|
|
149
127
|
renderMonthNavigationButton() {
|
|
150
128
|
let type = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 'prev';
|
|
151
129
|
const _this$props9 = this.props,
|
|
152
|
-
|
|
153
|
-
|
|
130
|
+
renderPrevMonthButton = _this$props9.renderPrevMonthButton,
|
|
131
|
+
renderNextMonthButton = _this$props9.renderNextMonthButton;
|
|
154
132
|
const button = type === 'prev' ? renderPrevMonthButton : renderNextMonthButton;
|
|
155
133
|
return button && safeCloneElement(callRenderProp(button), {
|
|
156
134
|
tabIndex: -1
|
|
157
135
|
});
|
|
158
136
|
}
|
|
159
|
-
|
|
160
137
|
renderDays(getOptionProps) {
|
|
161
138
|
const children = this.props.children;
|
|
162
139
|
return Children.map(children, day => {
|
|
163
140
|
const _day$props = day.props,
|
|
164
|
-
|
|
165
|
-
|
|
141
|
+
date = _day$props.date,
|
|
142
|
+
isOutsideMonth = _day$props.isOutsideMonth;
|
|
166
143
|
const props = {
|
|
167
144
|
tabIndex: -1,
|
|
168
145
|
id: this.formatDateId(date)
|
|
169
146
|
};
|
|
170
147
|
const optionProps = getOptionProps(props);
|
|
171
|
-
const propsAdded = isOutsideMonth ? {
|
|
148
|
+
const propsAdded = isOutsideMonth ? {
|
|
149
|
+
...props,
|
|
172
150
|
onClick: optionProps.onClick,
|
|
173
151
|
role: 'presentation'
|
|
174
152
|
} : optionProps;
|
|
175
153
|
return safeCloneElement(day, propsAdded);
|
|
176
154
|
});
|
|
177
155
|
}
|
|
178
|
-
|
|
179
156
|
renderCalendar(_ref2) {
|
|
180
157
|
let getListProps = _ref2.getListProps,
|
|
181
|
-
|
|
158
|
+
getOptionProps = _ref2.getOptionProps;
|
|
182
159
|
const _this$props10 = this.props,
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
160
|
+
onRequestRenderNextMonth = _this$props10.onRequestRenderNextMonth,
|
|
161
|
+
onRequestRenderPrevMonth = _this$props10.onRequestRenderPrevMonth,
|
|
162
|
+
renderNavigationLabel = _this$props10.renderNavigationLabel,
|
|
163
|
+
renderWeekdayLabels = _this$props10.renderWeekdayLabels;
|
|
187
164
|
return jsx(Calendar, getListProps({
|
|
188
165
|
onRequestRenderNextMonth,
|
|
189
166
|
onRequestRenderPrevMonth,
|
|
@@ -193,37 +170,32 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
|
|
|
193
170
|
renderPrevMonthButton: this.renderMonthNavigationButton('prev')
|
|
194
171
|
}), this.renderDays(getOptionProps));
|
|
195
172
|
}
|
|
196
|
-
|
|
197
173
|
renderInput(_ref3) {
|
|
198
174
|
let getInputProps = _ref3.getInputProps,
|
|
199
|
-
|
|
200
|
-
|
|
175
|
+
getTriggerProps = _ref3.getTriggerProps;
|
|
201
176
|
const _this$props11 = this.props,
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
177
|
+
renderLabel = _this$props11.renderLabel,
|
|
178
|
+
value = _this$props11.value,
|
|
179
|
+
placeholder = _this$props11.placeholder,
|
|
180
|
+
onBlur = _this$props11.onBlur,
|
|
181
|
+
isRequired = _this$props11.isRequired,
|
|
182
|
+
size = _this$props11.size,
|
|
183
|
+
isInline = _this$props11.isInline,
|
|
184
|
+
layout = _this$props11.layout,
|
|
185
|
+
width = _this$props11.width,
|
|
186
|
+
messages = _this$props11.messages,
|
|
187
|
+
onRequestValidateDate = _this$props11.onRequestValidateDate,
|
|
188
|
+
onRequestShowCalendar = _this$props11.onRequestShowCalendar,
|
|
189
|
+
onRequestHideCalendar = _this$props11.onRequestHideCalendar,
|
|
190
|
+
onRequestSelectNextDay = _this$props11.onRequestSelectNextDay,
|
|
191
|
+
onRequestSelectPrevDay = _this$props11.onRequestSelectPrevDay,
|
|
192
|
+
onRequestRenderNextMonth = _this$props11.onRequestRenderNextMonth,
|
|
193
|
+
onRequestRenderPrevMonth = _this$props11.onRequestRenderPrevMonth,
|
|
194
|
+
rest = _objectWithoutProperties(_this$props11, _excluded);
|
|
221
195
|
const interaction = this.interaction;
|
|
222
|
-
|
|
223
196
|
const _getTriggerProps = getTriggerProps(),
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
197
|
+
ref = _getTriggerProps.ref,
|
|
198
|
+
triggerProps = _objectWithoutProperties(_getTriggerProps, _excluded2);
|
|
227
199
|
return jsx(TextInput, Object.assign({}, triggerProps, passthroughProps(rest), getInputProps({
|
|
228
200
|
renderLabel: callRenderProp(renderLabel),
|
|
229
201
|
value,
|
|
@@ -243,13 +215,12 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
|
|
|
243
215
|
}))
|
|
244
216
|
})));
|
|
245
217
|
}
|
|
246
|
-
|
|
247
218
|
render() {
|
|
248
219
|
const _this$props12 = this.props,
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
220
|
+
placement = _this$props12.placement,
|
|
221
|
+
isShowingCalendar = _this$props12.isShowingCalendar,
|
|
222
|
+
assistiveText = _this$props12.assistiveText,
|
|
223
|
+
styles = _this$props12.styles;
|
|
253
224
|
return jsx(Selectable, {
|
|
254
225
|
isShowingOptions: isShowingCalendar,
|
|
255
226
|
onRequestShowOptions: this.handleShowCalendar,
|
|
@@ -260,11 +231,11 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
|
|
|
260
231
|
highlightedOptionId: this.selectedDateId
|
|
261
232
|
}, _ref4 => {
|
|
262
233
|
let getRootProps = _ref4.getRootProps,
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
234
|
+
getInputProps = _ref4.getInputProps,
|
|
235
|
+
getTriggerProps = _ref4.getTriggerProps,
|
|
236
|
+
getListProps = _ref4.getListProps,
|
|
237
|
+
getOptionProps = _ref4.getOptionProps,
|
|
238
|
+
getDescriptionProps = _ref4.getDescriptionProps;
|
|
268
239
|
return jsx("span", Object.assign({}, getRootProps({
|
|
269
240
|
css: styles === null || styles === void 0 ? void 0 : styles.dateInput
|
|
270
241
|
}), {
|
|
@@ -286,7 +257,6 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec
|
|
|
286
257
|
})));
|
|
287
258
|
});
|
|
288
259
|
}
|
|
289
|
-
|
|
290
260
|
}, _class2.displayName = "DateInput", _class2.componentId = 'DateInput', _class2.Day = Calendar.Day, _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
291
261
|
value: '',
|
|
292
262
|
size: 'medium',
|
package/es/DateInput/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 { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
|
26
27
|
import { FormPropTypes } from '@instructure/ui-form-field';
|
package/es/DateInput/styles.js
CHANGED
package/es/index.js
CHANGED
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.DateInputLocator = void 0;
|
|
7
|
-
|
|
8
7
|
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
9
|
-
|
|
10
8
|
var _CalendarLocator = require("@instructure/ui-calendar/lib/Calendar/CalendarLocator");
|
|
11
|
-
|
|
12
9
|
var _PopoverLocator = require("@instructure/ui-popover/lib/Popover/PopoverLocator");
|
|
13
|
-
|
|
14
10
|
var _index = require("./index");
|
|
15
|
-
|
|
16
11
|
/*
|
|
17
12
|
* The MIT License (MIT)
|
|
18
13
|
*
|
|
@@ -39,9 +34,11 @@ var _index = require("./index");
|
|
|
39
34
|
|
|
40
35
|
/* eslint-disable no-restricted-imports */
|
|
41
36
|
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
37
|
+
|
|
42
38
|
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
43
39
|
|
|
44
40
|
/* eslint-enable no-restricted-imports */
|
|
41
|
+
|
|
45
42
|
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
46
43
|
const DateInputLocator = (0, _locator.locator)(_index.DateInput.selector, {
|
|
47
44
|
findInput: function () {
|
|
@@ -51,7 +48,6 @@ const DateInputLocator = (0, _locator.locator)(_index.DateInput.selector, {
|
|
|
51
48
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
52
49
|
args[_key - 1] = arguments[_key];
|
|
53
50
|
}
|
|
54
|
-
|
|
55
51
|
const content = await _PopoverLocator.PopoverLocator.findContent(element, ...args);
|
|
56
52
|
return content ? _CalendarLocator.CalendarLocator.find(content.getDOMNode()) : null;
|
|
57
53
|
}
|