@planningcenter/tapestry-react 2.7.0 → 2.8.0
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/cjs/Button/Button.js +10 -13
- package/dist/cjs/Button/Button.test.js +53 -21
- package/dist/cjs/Calendar/Calendar.js +30 -25
- package/dist/cjs/Combobox/ComboboxInput.js +41 -37
- package/dist/cjs/DateField/DateField.js +74 -47
- package/dist/cjs/DateField/parse.js +106 -0
- package/dist/cjs/DateField/parse.test.js +46 -0
- package/dist/cjs/DateField/useArrowKeysToNavigateCalendar.js +44 -0
- package/dist/cjs/DateField/useEditableDate.js +72 -0
- package/dist/cjs/Select/Select.test.js +74 -0
- package/dist/esm/Button/Button.js +10 -13
- package/dist/esm/Button/Button.test.js +58 -26
- package/dist/esm/Calendar/Calendar.js +30 -25
- package/dist/esm/Combobox/ComboboxInput.js +40 -37
- package/dist/esm/DateField/DateField.js +75 -48
- package/dist/esm/DateField/parse.js +93 -0
- package/dist/esm/DateField/parse.test.js +42 -0
- package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js +36 -0
- package/dist/esm/DateField/useEditableDate.js +62 -0
- package/dist/esm/Select/Select.test.js +59 -0
- package/dist/types/Button/Button.d.ts +1 -1
- package/dist/types/DateField/DateField.d.ts +48 -0
- package/dist/types/DateField/parse.d.ts +17 -0
- package/dist/types/DateField/parse.test.d.ts +1 -0
- package/dist/types/DateField/useArrowKeysToNavigateCalendar.d.ts +8 -0
- package/dist/types/DateField/useEditableDate.d.ts +25 -0
- package/dist/types/Select/Select.test.d.ts +1 -0
- package/package.json +3 -3
- package/src/Button/Button.test.tsx +32 -8
- package/src/Button/Button.tsx +8 -9
- package/src/Calendar/Calendar.js +22 -17
- package/src/Combobox/ComboboxInput.js +76 -62
- package/src/DateField/DateField.mdx +15 -0
- package/src/DateField/{DateField.js → DateField.tsx} +96 -52
- package/src/DateField/parse.test.ts +76 -0
- package/src/DateField/parse.ts +92 -0
- package/src/DateField/useArrowKeysToNavigateCalendar.ts +54 -0
- package/src/DateField/useEditableDate.ts +81 -0
- package/src/Select/Select.test.tsx +58 -0
|
@@ -179,21 +179,18 @@ function Button(_ref) {
|
|
|
179
179
|
|
|
180
180
|
if (disabled) {
|
|
181
181
|
buttonProps.opacity = 0.65;
|
|
182
|
+
buttonProps['aria-disabled'] = true;
|
|
183
|
+
buttonProps.cursor = 'not-allowed';
|
|
182
184
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
}
|
|
186
|
-
buttonProps['aria-disabled'] = true;
|
|
187
|
-
buttonProps.cursor = 'not-allowed';
|
|
188
|
-
|
|
189
|
-
buttonProps.onClick = function (event) {
|
|
190
|
-
return event.preventDefault();
|
|
191
|
-
};
|
|
185
|
+
buttonProps.onClick = function (event) {
|
|
186
|
+
return event.preventDefault();
|
|
187
|
+
};
|
|
192
188
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
189
|
+
buttonProps.onKeyDown = function (event) {
|
|
190
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
191
|
+
event.preventDefault();
|
|
192
|
+
}
|
|
193
|
+
};
|
|
197
194
|
} // don't apply hover/active styles or events when disabled or spinner is present
|
|
198
195
|
|
|
199
196
|
|
|
@@ -24,60 +24,92 @@ it("should render as <button> with type=\"submit\"", function () {
|
|
|
24
24
|
var button = container.querySelector('button');
|
|
25
25
|
expect(button.getAttribute('type')).toEqual('submit');
|
|
26
26
|
});
|
|
27
|
-
it("
|
|
27
|
+
it("if \"disabled\" prop is provided, set \"aria-disabled\" attribute", function () {
|
|
28
28
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
29
29
|
disabled: true
|
|
30
30
|
})),
|
|
31
31
|
container = _render3.container;
|
|
32
32
|
|
|
33
33
|
var button = container.querySelector('button');
|
|
34
|
-
expect(button.getAttribute("aria-disabled")).toEqual(
|
|
35
|
-
expect(button.disabled).toBe(
|
|
34
|
+
expect(button.getAttribute("aria-disabled")).toEqual("true");
|
|
35
|
+
expect(button.disabled).toBe(false);
|
|
36
36
|
});
|
|
37
|
-
it("
|
|
37
|
+
it("if \"disabled\" prop is provided, prevent \"Click\" event from firing", function () {
|
|
38
38
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
39
|
-
type: "submit",
|
|
40
39
|
disabled: true
|
|
41
40
|
})),
|
|
42
41
|
container = _render4.container;
|
|
43
42
|
|
|
44
43
|
var button = container.querySelector('button');
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
|
|
45
|
+
var clickEvent = _react2.createEvent.click(button);
|
|
46
|
+
|
|
47
|
+
(0, _react2.fireEvent)(button, clickEvent);
|
|
48
|
+
expect(clickEvent.defaultPrevented).toBe(true);
|
|
49
|
+
});
|
|
50
|
+
it("if \"disabled\" prop is provided, prevent keyDown \"Enter\" event from firing", function () {
|
|
51
|
+
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
52
|
+
disabled: true
|
|
53
|
+
})),
|
|
54
|
+
container = _render5.container;
|
|
55
|
+
|
|
56
|
+
var button = container.querySelector('button');
|
|
57
|
+
|
|
58
|
+
var keyDownEvent = _react2.createEvent.keyDown(button, {
|
|
59
|
+
key: 'Enter'
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
(0, _react2.fireEvent)(button, keyDownEvent);
|
|
63
|
+
expect(keyDownEvent.defaultPrevented).toBe(true);
|
|
64
|
+
});
|
|
65
|
+
it("if \"disabled\" prop is provided, prevent keyDown \"Space\" event from firing", function () {
|
|
66
|
+
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
67
|
+
disabled: true
|
|
68
|
+
})),
|
|
69
|
+
container = _render6.container;
|
|
70
|
+
|
|
71
|
+
var button = container.querySelector('button');
|
|
72
|
+
|
|
73
|
+
var keyDownEvent = _react2.createEvent.keyDown(button, {
|
|
74
|
+
key: ' '
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
(0, _react2.fireEvent)(button, keyDownEvent);
|
|
78
|
+
expect(keyDownEvent.defaultPrevented).toBe(true);
|
|
47
79
|
});
|
|
48
80
|
it("should render title", function () {
|
|
49
81
|
var title = 'Hello';
|
|
50
82
|
|
|
51
|
-
var
|
|
83
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
52
84
|
title: title
|
|
53
85
|
})),
|
|
54
|
-
getByText =
|
|
86
|
+
getByText = _render7.getByText;
|
|
55
87
|
|
|
56
88
|
getByText(title);
|
|
57
89
|
});
|
|
58
90
|
it("should render <a> without a type if \"to\" is provided", function () {
|
|
59
|
-
var
|
|
91
|
+
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
60
92
|
to: "#"
|
|
61
93
|
})),
|
|
62
|
-
container =
|
|
94
|
+
container = _render8.container;
|
|
63
95
|
|
|
64
96
|
var button = container.querySelector('a');
|
|
65
97
|
expect(button.getAttribute('type')).toBeNull();
|
|
66
98
|
});
|
|
67
99
|
it("should render <a> without a type if \"href\" is provided", function () {
|
|
68
|
-
var
|
|
100
|
+
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
69
101
|
href: "#"
|
|
70
102
|
})),
|
|
71
|
-
container =
|
|
103
|
+
container = _render9.container;
|
|
72
104
|
|
|
73
105
|
var button = container.querySelector('a');
|
|
74
106
|
expect(button.getAttribute('type')).toBeNull();
|
|
75
107
|
});
|
|
76
108
|
it("should render <a> with \"href\" if \"to\" is specifed", function () {
|
|
77
|
-
var
|
|
109
|
+
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
78
110
|
to: "#"
|
|
79
111
|
})),
|
|
80
|
-
container =
|
|
112
|
+
container = _render10.container;
|
|
81
113
|
|
|
82
114
|
var button = container.querySelector('a');
|
|
83
115
|
expect(button.getAttribute('href')).toEqual('#');
|
|
@@ -85,12 +117,12 @@ it("should render <a> with \"href\" if \"to\" is specifed", function () {
|
|
|
85
117
|
it("should render href and external link values", function () {
|
|
86
118
|
var title = 'Hello';
|
|
87
119
|
|
|
88
|
-
var
|
|
120
|
+
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
89
121
|
external: true,
|
|
90
122
|
title: title,
|
|
91
123
|
to: "https://www.planningcenter.com"
|
|
92
124
|
})),
|
|
93
|
-
getByText =
|
|
125
|
+
getByText = _render11.getByText;
|
|
94
126
|
|
|
95
127
|
var button = getByText(title);
|
|
96
128
|
expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
|
|
@@ -100,18 +132,18 @@ it("should render href and external link values", function () {
|
|
|
100
132
|
it("should call onClick when clicked or Enter or Space key is pressed", function () {
|
|
101
133
|
var onClick = jest.fn();
|
|
102
134
|
|
|
103
|
-
var
|
|
135
|
+
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
104
136
|
onClick: onClick
|
|
105
137
|
})),
|
|
106
|
-
container =
|
|
138
|
+
container = _render12.container;
|
|
107
139
|
|
|
108
140
|
_react2.fireEvent.click(container.firstChild);
|
|
109
141
|
|
|
110
142
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
111
143
|
});
|
|
112
144
|
it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
|
|
113
|
-
var
|
|
114
|
-
container =
|
|
145
|
+
var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
|
|
146
|
+
container = _render13.container;
|
|
115
147
|
|
|
116
148
|
_react2.fireEvent.keyDown(container.firstChild, {
|
|
117
149
|
key: 'Enter'
|
|
@@ -167,35 +167,37 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, calendarRef)
|
|
|
167
167
|
axis: "horizontal",
|
|
168
168
|
spacing: 0.5
|
|
169
169
|
}, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
|
|
170
|
-
as: "button",
|
|
171
170
|
"aria-label": isMonthsView ? 'Choose dates' : 'Choose month',
|
|
172
|
-
|
|
173
|
-
fontSize: headerFontSize,
|
|
174
|
-
lineHeight: 3,
|
|
175
|
-
radius: 3,
|
|
176
|
-
cursor: "pointer",
|
|
171
|
+
as: "button",
|
|
177
172
|
backgroundColor: hover ? 'highlight' : 'transparent',
|
|
173
|
+
cursor: "pointer",
|
|
174
|
+
fontSize: headerFontSize,
|
|
178
175
|
hover: {
|
|
179
176
|
backgroundColor: 'highlightSecondary'
|
|
180
177
|
},
|
|
178
|
+
lineHeight: 3,
|
|
181
179
|
onClick: function onClick() {
|
|
182
180
|
setCurrentView(isMonthsView ? 'calendar' : 'months');
|
|
183
|
-
}
|
|
184
|
-
}, (0, _dateFns.format)(currentDate, 'MMMM')), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
|
|
185
|
-
as: "button",
|
|
186
|
-
"aria-label": isYearsView ? 'Choose dates' : 'Choose year',
|
|
181
|
+
},
|
|
187
182
|
padding: 0.25,
|
|
188
|
-
fontSize: headerFontSize,
|
|
189
|
-
lineHeight: 3,
|
|
190
183
|
radius: 3,
|
|
191
|
-
|
|
184
|
+
tabIndex: -1
|
|
185
|
+
}, (0, _dateFns.format)(currentDate, 'MMMM')), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
|
|
186
|
+
"aria-label": isYearsView ? 'Choose dates' : 'Choose year',
|
|
187
|
+
as: "button",
|
|
192
188
|
backgroundColor: hover ? 'highlight' : 'transparent',
|
|
189
|
+
cursor: "pointer",
|
|
190
|
+
fontSize: headerFontSize,
|
|
193
191
|
hover: {
|
|
194
192
|
backgroundColor: 'highlightSecondary'
|
|
195
193
|
},
|
|
194
|
+
lineHeight: 3,
|
|
196
195
|
onClick: function onClick() {
|
|
197
196
|
setCurrentView(isYearsView ? 'calendar' : 'years');
|
|
198
|
-
}
|
|
197
|
+
},
|
|
198
|
+
padding: 0.25,
|
|
199
|
+
radius: 3,
|
|
200
|
+
tabIndex: -1
|
|
199
201
|
}, currentYear)), /*#__PURE__*/_react["default"].createElement(_Group["default"], {
|
|
200
202
|
marginRight: 0.5,
|
|
201
203
|
childProps: {
|
|
@@ -203,35 +205,38 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, calendarRef)
|
|
|
203
205
|
size: buttonSize
|
|
204
206
|
}
|
|
205
207
|
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
206
|
-
|
|
208
|
+
disabled: isYearsView ? currentYear <= minYear : (0, _dateFns.isSameMonth)(currentDate, minDate),
|
|
207
209
|
icon: {
|
|
208
210
|
name: 'general.leftChevron',
|
|
209
|
-
size:
|
|
211
|
+
size: 'xxs'
|
|
210
212
|
},
|
|
211
|
-
disabled: isYearsView ? currentYear <= minYear : (0, _dateFns.isSameMonth)(currentDate, minDate),
|
|
212
213
|
onClick: function onClick() {
|
|
213
214
|
return navigateCalendar(-1);
|
|
214
|
-
}
|
|
215
|
-
}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
216
|
-
tooltip: {
|
|
217
|
-
title: 'Today'
|
|
218
215
|
},
|
|
216
|
+
tabIndex: -1,
|
|
217
|
+
title: "Previous month"
|
|
218
|
+
}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
219
219
|
icon: {
|
|
220
220
|
name: 'tapestry.radio1'
|
|
221
221
|
},
|
|
222
222
|
onClick: function onClick() {
|
|
223
223
|
return setDate(_utils.TODAY, true);
|
|
224
|
+
},
|
|
225
|
+
tabIndex: -1,
|
|
226
|
+
tooltip: {
|
|
227
|
+
title: 'Today'
|
|
224
228
|
}
|
|
225
229
|
}), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
226
|
-
|
|
230
|
+
disabled: isYearsView ? currentYear >= maxYear : (0, _dateFns.isSameMonth)(currentDate, maxDate),
|
|
227
231
|
icon: {
|
|
228
232
|
name: 'general.rightChevron',
|
|
229
|
-
size:
|
|
233
|
+
size: 'xxs'
|
|
230
234
|
},
|
|
231
|
-
disabled: isYearsView ? currentYear >= maxYear : (0, _dateFns.isSameMonth)(currentDate, maxDate),
|
|
232
235
|
onClick: function onClick() {
|
|
233
236
|
return navigateCalendar(1);
|
|
234
|
-
}
|
|
237
|
+
},
|
|
238
|
+
tabIndex: -1,
|
|
239
|
+
title: "Next month"
|
|
235
240
|
}))), isMonthsView && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
|
|
236
241
|
axis: "horizontal",
|
|
237
242
|
width: cellSize * 7,
|
|
@@ -17,6 +17,8 @@ var _Input = _interopRequireDefault(require("../Input"));
|
|
|
17
17
|
|
|
18
18
|
var _ItemListContext = _interopRequireDefault(require("../ItemList/ItemListContext"));
|
|
19
19
|
|
|
20
|
+
var _ItemList = require("../ItemList");
|
|
21
|
+
|
|
20
22
|
var _system = require("../system");
|
|
21
23
|
|
|
22
24
|
function ComboboxInput(props, ref) {
|
|
@@ -56,13 +58,11 @@ function ComboboxInput(props, ref) {
|
|
|
56
58
|
};
|
|
57
59
|
});
|
|
58
60
|
var itemList = (0, _react.useContext)(_ItemListContext["default"]);
|
|
59
|
-
var highlightedItemId = itemList.highlightedItemId,
|
|
60
|
-
id = itemList.id;
|
|
61
61
|
(0, _react.useEffect)(function () {
|
|
62
62
|
setTimeout(function () {
|
|
63
63
|
itemList.setHighlightedIndex(0);
|
|
64
64
|
});
|
|
65
|
-
}, [itemList
|
|
65
|
+
}, [itemList]);
|
|
66
66
|
var handleKeyDown = (0, _react.useCallback)(function (e) {
|
|
67
67
|
if (e.key === 'ArrowUp') {
|
|
68
68
|
e.preventDefault();
|
|
@@ -90,45 +90,49 @@ function ComboboxInput(props, ref) {
|
|
|
90
90
|
if (onClose && e.key === 'Tab') {
|
|
91
91
|
onClose();
|
|
92
92
|
}
|
|
93
|
-
});
|
|
93
|
+
}, [itemList, onClose, onKeyDown]);
|
|
94
94
|
var handleDocumentKeyDown = (0, _react.useCallback)(function (e) {
|
|
95
95
|
if (onClear && e.key === 'Escape') {
|
|
96
96
|
onClear();
|
|
97
97
|
}
|
|
98
|
+
}, [onClear]);
|
|
99
|
+
return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListController, null, function (itemList) {
|
|
100
|
+
var highlightedItemId = itemList.highlightedItemId,
|
|
101
|
+
id = itemList.id;
|
|
102
|
+
return /*#__PURE__*/_react["default"].createElement(_Input["default"].InputBox, (0, _extends2["default"])({
|
|
103
|
+
innerRef: innerRef,
|
|
104
|
+
size: size,
|
|
105
|
+
disabled: disabled,
|
|
106
|
+
isLoading: isLoading,
|
|
107
|
+
onClear: onClear
|
|
108
|
+
}, restProps, {
|
|
109
|
+
grow: 1
|
|
110
|
+
}), /*#__PURE__*/_react["default"].createElement(_Input["default"].InputField, {
|
|
111
|
+
innerRef: function innerRef(node) {
|
|
112
|
+
inputNode.current = node;
|
|
113
|
+
},
|
|
114
|
+
grow: 1,
|
|
115
|
+
role: "combobox",
|
|
116
|
+
autoComplete: "off",
|
|
117
|
+
"aria-autocomplete": "list",
|
|
118
|
+
"aria-controls": id,
|
|
119
|
+
"aria-expanded": isOpen,
|
|
120
|
+
"aria-activedescendant": highlightedItemId,
|
|
121
|
+
autoFocus: autoFocus,
|
|
122
|
+
type: type,
|
|
123
|
+
name: name,
|
|
124
|
+
disabled: disabled,
|
|
125
|
+
readOnly: readOnly,
|
|
126
|
+
placeholder: placeholder,
|
|
127
|
+
defaultValue: defaultValue,
|
|
128
|
+
value: value,
|
|
129
|
+
onChange: onChange,
|
|
130
|
+
onFocus: onFocus,
|
|
131
|
+
onBlur: onBlur,
|
|
132
|
+
onKeyDown: handleKeyDown,
|
|
133
|
+
onKeyUp: onKeyUp
|
|
134
|
+
}));
|
|
98
135
|
});
|
|
99
|
-
return /*#__PURE__*/_react["default"].createElement(_Input["default"].InputBox, (0, _extends2["default"])({
|
|
100
|
-
innerRef: innerRef,
|
|
101
|
-
size: size,
|
|
102
|
-
disabled: disabled,
|
|
103
|
-
isLoading: isLoading,
|
|
104
|
-
onClear: onClear
|
|
105
|
-
}, restProps, {
|
|
106
|
-
grow: 1
|
|
107
|
-
}), /*#__PURE__*/_react["default"].createElement(_Input["default"].InputField, {
|
|
108
|
-
innerRef: function innerRef(node) {
|
|
109
|
-
inputNode.current = node;
|
|
110
|
-
},
|
|
111
|
-
grow: 1,
|
|
112
|
-
role: "combobox",
|
|
113
|
-
autoComplete: "off",
|
|
114
|
-
"aria-autocomplete": "list",
|
|
115
|
-
"aria-controls": id,
|
|
116
|
-
"aria-expanded": isOpen,
|
|
117
|
-
"aria-activedescendant": highlightedItemId,
|
|
118
|
-
autoFocus: autoFocus,
|
|
119
|
-
type: type,
|
|
120
|
-
name: name,
|
|
121
|
-
disabled: disabled,
|
|
122
|
-
readOnly: readOnly,
|
|
123
|
-
placeholder: placeholder,
|
|
124
|
-
defaultValue: defaultValue,
|
|
125
|
-
value: value,
|
|
126
|
-
onChange: onChange,
|
|
127
|
-
onFocus: onFocus,
|
|
128
|
-
onBlur: onBlur,
|
|
129
|
-
onKeyDown: handleKeyDown,
|
|
130
|
-
onKeyUp: onKeyUp
|
|
131
|
-
}));
|
|
132
136
|
}
|
|
133
137
|
|
|
134
138
|
ComboboxInput = /*#__PURE__*/(0, _react.forwardRef)(ComboboxInput);
|
|
@@ -13,8 +13,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
|
|
|
13
13
|
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
15
|
|
|
16
|
-
var _dateFns = require("date-fns");
|
|
17
|
-
|
|
18
16
|
var _Card = _interopRequireDefault(require("../Card"));
|
|
19
17
|
|
|
20
18
|
var _Calendar = _interopRequireDefault(require("../Calendar"));
|
|
@@ -31,6 +29,10 @@ var _utils = require("../utils");
|
|
|
31
29
|
|
|
32
30
|
var _system = require("../system");
|
|
33
31
|
|
|
32
|
+
var _useArrowKeysToNavigateCalendar = require("./useArrowKeysToNavigateCalendar");
|
|
33
|
+
|
|
34
|
+
var _useEditableDate2 = require("./useEditableDate");
|
|
35
|
+
|
|
34
36
|
function DateField(_ref) {
|
|
35
37
|
var _ref$formatValue = _ref.formatValue,
|
|
36
38
|
formatValue = _ref$formatValue === void 0 ? 'MMMM dd, yyyy' : _ref$formatValue,
|
|
@@ -55,8 +57,6 @@ function DateField(_ref) {
|
|
|
55
57
|
trackColor = _useThemeProps.trackColor,
|
|
56
58
|
restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["calendarProps", "color", "popoverProps", "sizes", "thickness", "trackColor"]);
|
|
57
59
|
|
|
58
|
-
var canClosePopover = true;
|
|
59
|
-
|
|
60
60
|
var _useState = (0, _react.useState)(defaultOpen),
|
|
61
61
|
isPopoverOpen = _useState[0],
|
|
62
62
|
setIsPopoverOpen = _useState[1];
|
|
@@ -64,36 +64,67 @@ function DateField(_ref) {
|
|
|
64
64
|
var id = (0, _utils.generateId)('datefield');
|
|
65
65
|
var popover = (0, _react.useRef)(null);
|
|
66
66
|
var inputWrapper = (0, _react.useRef)(null);
|
|
67
|
-
var
|
|
68
|
-
setIsPopoverOpen(true);
|
|
69
|
-
});
|
|
70
|
-
var closePopover = (0, _react.useCallback)(function () {
|
|
71
|
-
if (canClosePopover) {
|
|
72
|
-
setIsPopoverOpen(false);
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
var togglePopover = (0, _react.useCallback)(function () {
|
|
76
|
-
if (isPopoverOpen) {
|
|
77
|
-
closePopover();
|
|
78
|
-
} else {
|
|
79
|
-
openPopover();
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
var handleDateSelect = (0, _react.useCallback)(function (date) {
|
|
67
|
+
var focusInput = (0, _react.useCallback)(function () {
|
|
83
68
|
var input = inputWrapper.current.querySelector('input');
|
|
84
69
|
|
|
85
70
|
if (input.focus) {
|
|
86
71
|
input.focus();
|
|
87
72
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
73
|
+
}, []);
|
|
74
|
+
var openPopover = (0, _react.useCallback)(function () {
|
|
75
|
+
setIsPopoverOpen(true);
|
|
76
|
+
}, []);
|
|
77
|
+
var closePopover = (0, _react.useCallback)(function () {
|
|
78
|
+
setIsPopoverOpen(false);
|
|
79
|
+
}, []);
|
|
80
|
+
var dateValidator = (0, _react.useCallback)(function (date) {
|
|
81
|
+
if (!date) return false;
|
|
82
|
+
if (minDate && date < minDate) return false;
|
|
83
|
+
if (maxDate && date > maxDate) return false;
|
|
84
|
+
return true;
|
|
85
|
+
}, [minDate, maxDate]);
|
|
86
|
+
|
|
87
|
+
var _useEditableDate = (0, _useEditableDate2.useEditableDate)({
|
|
88
|
+
date: value,
|
|
89
|
+
dateFormat: formatValue,
|
|
90
|
+
dateValidator: dateValidator,
|
|
91
|
+
onChange: onChange
|
|
92
|
+
}),
|
|
93
|
+
formattedDate = _useEditableDate.formattedDate,
|
|
94
|
+
setDate = _useEditableDate.setDate,
|
|
95
|
+
clearKeyBuffer = _useEditableDate.clearKeyBuffer,
|
|
96
|
+
invalidKeyBuffer = _useEditableDate.invalidKeyBuffer;
|
|
97
|
+
|
|
98
|
+
var handleDateSelectedFromCalendar = (0, _react.useCallback)(function (date) {
|
|
99
|
+
focusInput();
|
|
100
|
+
setDate(date);
|
|
93
101
|
closePopover();
|
|
102
|
+
}, [focusInput, setDate, closePopover]);
|
|
103
|
+
var navigateCalendarWithArrowKeys = (0, _useArrowKeysToNavigateCalendar.useArrowKeysToNavigateCalendar)({
|
|
104
|
+
date: value,
|
|
105
|
+
calendarIsOpen: isPopoverOpen,
|
|
106
|
+
openCalendar: openPopover,
|
|
107
|
+
onChange: setDate
|
|
94
108
|
});
|
|
109
|
+
var handleInputOnChange = (0, _react.useCallback)(function (event) {
|
|
110
|
+
setDate(event.currentTarget.value);
|
|
111
|
+
}, [setDate]);
|
|
112
|
+
var handleOnBlur = (0, _react.useCallback)(function () {
|
|
113
|
+
clearKeyBuffer();
|
|
114
|
+
closePopover();
|
|
115
|
+
}, [clearKeyBuffer, closePopover]);
|
|
116
|
+
var inputColors = (0, _react.useMemo)(function () {
|
|
117
|
+
if (invalidKeyBuffer) {
|
|
118
|
+
return {
|
|
119
|
+
color: 'error-darker',
|
|
120
|
+
backgroundColor: 'error-lighter'
|
|
121
|
+
};
|
|
122
|
+
} else {
|
|
123
|
+
return {};
|
|
124
|
+
}
|
|
125
|
+
}, [invalidKeyBuffer]);
|
|
95
126
|
return /*#__PURE__*/_react["default"].createElement(_FocusGroup["default"], {
|
|
96
|
-
onBlur:
|
|
127
|
+
onBlur: handleOnBlur
|
|
97
128
|
}, function (_ref2) {
|
|
98
129
|
var requestBlur = _ref2.requestBlur,
|
|
99
130
|
setRef = _ref2.setRef;
|
|
@@ -101,47 +132,43 @@ function DateField(_ref) {
|
|
|
101
132
|
ref: function ref(component) {
|
|
102
133
|
popover.current = component;
|
|
103
134
|
},
|
|
135
|
+
as: _Card["default"],
|
|
136
|
+
elevation: 2,
|
|
104
137
|
innerRef: function innerRef(node) {
|
|
105
138
|
popover.current = node;
|
|
106
139
|
setRef(id + "-popover")(node);
|
|
107
140
|
},
|
|
108
|
-
as: _Card["default"],
|
|
109
|
-
tabIndex: -1,
|
|
110
|
-
elevation: 2,
|
|
111
|
-
onBlur: requestBlur,
|
|
112
141
|
keepInView: keepInView,
|
|
113
142
|
lockScrollWhileOpen: lockScrollWhileOpen,
|
|
114
|
-
|
|
115
|
-
open: isPopoverOpen,
|
|
143
|
+
onBlur: requestBlur,
|
|
116
144
|
onRequestClose: closePopover,
|
|
145
|
+
open: isPopoverOpen,
|
|
146
|
+
placement: placement,
|
|
147
|
+
tabIndex: -1,
|
|
117
148
|
anchorElement: /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({
|
|
118
149
|
innerRef: function innerRef(node) {
|
|
119
150
|
inputWrapper.current = node;
|
|
120
151
|
setRef(id + "-input")(node);
|
|
121
152
|
},
|
|
122
|
-
|
|
123
|
-
|
|
153
|
+
onBlur: requestBlur,
|
|
154
|
+
onFocus: openPopover,
|
|
155
|
+
onChange: handleInputOnChange,
|
|
156
|
+
onKeyDown: navigateCalendarWithArrowKeys,
|
|
157
|
+
value: formattedDate,
|
|
124
158
|
renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
125
159
|
name: "general.calendar",
|
|
126
|
-
color: "foregroundTertiary"
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
onKeyDown: function onKeyDown(event) {
|
|
131
|
-
if (event.key === ' ') {
|
|
132
|
-
event.preventDefault();
|
|
133
|
-
togglePopover();
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}, restProps))
|
|
160
|
+
color: "foregroundTertiary",
|
|
161
|
+
onClick: openPopover
|
|
162
|
+
})
|
|
163
|
+
}, inputColors, restProps))
|
|
137
164
|
}), /*#__PURE__*/_react["default"].createElement(_Calendar["default"], (0, _extends2["default"])({
|
|
138
165
|
size: "sm"
|
|
139
166
|
}, calendarProps, {
|
|
140
|
-
|
|
167
|
+
date: value,
|
|
141
168
|
selected: value,
|
|
142
169
|
minDate: minDate,
|
|
143
170
|
maxDate: maxDate,
|
|
144
|
-
onDateSelect:
|
|
171
|
+
onDateSelect: handleDateSelectedFromCalendar
|
|
145
172
|
})));
|
|
146
173
|
});
|
|
147
174
|
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.parseMonth = exports.isValidDate = exports.parseDate = void 0;
|
|
5
|
+
var monthDayYearFormat = /^(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|\s)(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|,\s)(\d{4})$/i;
|
|
6
|
+
var dayMonthYearFormat = /^(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|\s)(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|,\s)(\d{4})$/i;
|
|
7
|
+
var yearMonthDayFormat = /^(\d{4})[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[1-2][0-9]|3[0-1])$/;
|
|
8
|
+
|
|
9
|
+
var parseDate = function parseDate(_ref) {
|
|
10
|
+
var date = _ref.date,
|
|
11
|
+
format = _ref.format;
|
|
12
|
+
|
|
13
|
+
try {
|
|
14
|
+
var _parseDateIntoObject = parseDateIntoObject(date, format),
|
|
15
|
+
year = _parseDateIntoObject.year,
|
|
16
|
+
month = _parseDateIntoObject.month,
|
|
17
|
+
day = _parseDateIntoObject.day;
|
|
18
|
+
|
|
19
|
+
return new Date(year, month - 1, day);
|
|
20
|
+
} catch (e) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
exports.parseDate = parseDate;
|
|
26
|
+
|
|
27
|
+
var isValidDate = function isValidDate(date) {
|
|
28
|
+
return monthDayYearFormat.test(date) || yearMonthDayFormat.test(date);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
exports.isValidDate = isValidDate;
|
|
32
|
+
|
|
33
|
+
var parseMonth = function parseMonth(monthString) {
|
|
34
|
+
var months = {
|
|
35
|
+
jan: 1,
|
|
36
|
+
feb: 2,
|
|
37
|
+
mar: 3,
|
|
38
|
+
apr: 4,
|
|
39
|
+
may: 5,
|
|
40
|
+
jun: 6,
|
|
41
|
+
jul: 7,
|
|
42
|
+
aug: 8,
|
|
43
|
+
sep: 9,
|
|
44
|
+
oct: 10,
|
|
45
|
+
nov: 11,
|
|
46
|
+
dec: 12
|
|
47
|
+
};
|
|
48
|
+
var normalizedString = monthString.toLowerCase().replace(/^0/, '').slice(0, 3);
|
|
49
|
+
|
|
50
|
+
if (/^\d+$/.test(normalizedString)) {
|
|
51
|
+
var month = parseInt(normalizedString, 10);
|
|
52
|
+
|
|
53
|
+
if (month >= 1 && month <= 12) {
|
|
54
|
+
return month;
|
|
55
|
+
}
|
|
56
|
+
} else if (normalizedString in months) {
|
|
57
|
+
return months[normalizedString];
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
throw new Error("Invalid month string: " + monthString);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
exports.parseMonth = parseMonth;
|
|
64
|
+
|
|
65
|
+
var parseDateIntoObject = function parseDateIntoObject(date, format) {
|
|
66
|
+
if (format != null && format.match(/d.*M/) && dayMonthYearFormat.test(date)) {
|
|
67
|
+
var _dayMonthYearFormat$e = dayMonthYearFormat.exec(date),
|
|
68
|
+
day = _dayMonthYearFormat$e[1],
|
|
69
|
+
month = _dayMonthYearFormat$e[2],
|
|
70
|
+
year = _dayMonthYearFormat$e[3];
|
|
71
|
+
|
|
72
|
+
return {
|
|
73
|
+
year: parseInt(year, 10),
|
|
74
|
+
month: parseMonth(month),
|
|
75
|
+
day: parseInt(day, 10)
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
if (monthDayYearFormat.test(date)) {
|
|
80
|
+
var _monthDayYearFormat$e = monthDayYearFormat.exec(date),
|
|
81
|
+
_month = _monthDayYearFormat$e[1],
|
|
82
|
+
_day = _monthDayYearFormat$e[2],
|
|
83
|
+
_year = _monthDayYearFormat$e[3];
|
|
84
|
+
|
|
85
|
+
return {
|
|
86
|
+
year: parseInt(_year, 10),
|
|
87
|
+
month: parseMonth(_month),
|
|
88
|
+
day: parseInt(_day, 10)
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
if (yearMonthDayFormat.test(date)) {
|
|
93
|
+
var _yearMonthDayFormat$e = yearMonthDayFormat.exec(date),
|
|
94
|
+
_year2 = _yearMonthDayFormat$e[1],
|
|
95
|
+
_month2 = _yearMonthDayFormat$e[2],
|
|
96
|
+
_day2 = _yearMonthDayFormat$e[3];
|
|
97
|
+
|
|
98
|
+
return {
|
|
99
|
+
year: parseInt(_year2, 10),
|
|
100
|
+
month: parseMonth(_month2),
|
|
101
|
+
day: parseInt(_day2, 10)
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
throw new Error("Invalid date: " + date);
|
|
106
|
+
};
|