@planningcenter/tapestry-react 2.6.2 → 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 +12 -3
- package/dist/cjs/Button/Button.test.js +67 -14
- package/dist/cjs/Calendar/Calendar.js +30 -25
- package/dist/cjs/Combobox/ComboboxInput.js +41 -37
- package/dist/cjs/DataTable/DataTable.js +3 -2
- 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/cjs/system/colors/colors.js +18 -15
- package/dist/esm/Button/Button.js +12 -3
- package/dist/esm/Button/Button.test.js +78 -19
- package/dist/esm/Calendar/Calendar.js +30 -25
- package/dist/esm/Combobox/ComboboxInput.js +40 -37
- package/dist/esm/DataTable/DataTable.js +3 -2
- 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/esm/system/colors/colors.js +18 -15
- 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 +5 -6
- package/src/Button/Button.test.tsx +39 -1
- package/src/Button/Button.tsx +8 -3
- package/src/Calendar/Calendar.js +22 -17
- package/src/Combobox/ComboboxInput.js +76 -62
- package/src/DataTable/DataTable.js +2 -1
- 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/Icon/Icon.mdx +12 -11
- package/src/Select/Select.test.tsx +58 -0
- package/src/system/colors/colors.js +18 -15
|
@@ -175,13 +175,22 @@ function Button(_ref) {
|
|
|
175
175
|
if (iconRight) {
|
|
176
176
|
iconRight['color'] = 'transparent';
|
|
177
177
|
}
|
|
178
|
-
}
|
|
179
|
-
|
|
178
|
+
}
|
|
180
179
|
|
|
181
180
|
if (disabled) {
|
|
181
|
+
buttonProps.opacity = 0.65;
|
|
182
182
|
buttonProps['aria-disabled'] = true;
|
|
183
183
|
buttonProps.cursor = 'not-allowed';
|
|
184
|
-
|
|
184
|
+
|
|
185
|
+
buttonProps.onClick = function (event) {
|
|
186
|
+
return event.preventDefault();
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
buttonProps.onKeyDown = function (event) {
|
|
190
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
191
|
+
event.preventDefault();
|
|
192
|
+
}
|
|
193
|
+
};
|
|
185
194
|
} // don't apply hover/active styles or events when disabled or spinner is present
|
|
186
195
|
|
|
187
196
|
|
|
@@ -24,39 +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("if \"disabled\" prop is provided, set \"aria-disabled\" attribute", function () {
|
|
28
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
29
|
+
disabled: true
|
|
30
|
+
})),
|
|
31
|
+
container = _render3.container;
|
|
32
|
+
|
|
33
|
+
var button = container.querySelector('button');
|
|
34
|
+
expect(button.getAttribute("aria-disabled")).toEqual("true");
|
|
35
|
+
expect(button.disabled).toBe(false);
|
|
36
|
+
});
|
|
37
|
+
it("if \"disabled\" prop is provided, prevent \"Click\" event from firing", function () {
|
|
38
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
39
|
+
disabled: true
|
|
40
|
+
})),
|
|
41
|
+
container = _render4.container;
|
|
42
|
+
|
|
43
|
+
var button = container.querySelector('button');
|
|
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);
|
|
79
|
+
});
|
|
27
80
|
it("should render title", function () {
|
|
28
81
|
var title = 'Hello';
|
|
29
82
|
|
|
30
|
-
var
|
|
83
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
31
84
|
title: title
|
|
32
85
|
})),
|
|
33
|
-
getByText =
|
|
86
|
+
getByText = _render7.getByText;
|
|
34
87
|
|
|
35
88
|
getByText(title);
|
|
36
89
|
});
|
|
37
90
|
it("should render <a> without a type if \"to\" is provided", function () {
|
|
38
|
-
var
|
|
91
|
+
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
39
92
|
to: "#"
|
|
40
93
|
})),
|
|
41
|
-
container =
|
|
94
|
+
container = _render8.container;
|
|
42
95
|
|
|
43
96
|
var button = container.querySelector('a');
|
|
44
97
|
expect(button.getAttribute('type')).toBeNull();
|
|
45
98
|
});
|
|
46
99
|
it("should render <a> without a type if \"href\" is provided", function () {
|
|
47
|
-
var
|
|
100
|
+
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
48
101
|
href: "#"
|
|
49
102
|
})),
|
|
50
|
-
container =
|
|
103
|
+
container = _render9.container;
|
|
51
104
|
|
|
52
105
|
var button = container.querySelector('a');
|
|
53
106
|
expect(button.getAttribute('type')).toBeNull();
|
|
54
107
|
});
|
|
55
108
|
it("should render <a> with \"href\" if \"to\" is specifed", function () {
|
|
56
|
-
var
|
|
109
|
+
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
57
110
|
to: "#"
|
|
58
111
|
})),
|
|
59
|
-
container =
|
|
112
|
+
container = _render10.container;
|
|
60
113
|
|
|
61
114
|
var button = container.querySelector('a');
|
|
62
115
|
expect(button.getAttribute('href')).toEqual('#');
|
|
@@ -64,12 +117,12 @@ it("should render <a> with \"href\" if \"to\" is specifed", function () {
|
|
|
64
117
|
it("should render href and external link values", function () {
|
|
65
118
|
var title = 'Hello';
|
|
66
119
|
|
|
67
|
-
var
|
|
120
|
+
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
68
121
|
external: true,
|
|
69
122
|
title: title,
|
|
70
123
|
to: "https://www.planningcenter.com"
|
|
71
124
|
})),
|
|
72
|
-
getByText =
|
|
125
|
+
getByText = _render11.getByText;
|
|
73
126
|
|
|
74
127
|
var button = getByText(title);
|
|
75
128
|
expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
|
|
@@ -79,18 +132,18 @@ it("should render href and external link values", function () {
|
|
|
79
132
|
it("should call onClick when clicked or Enter or Space key is pressed", function () {
|
|
80
133
|
var onClick = jest.fn();
|
|
81
134
|
|
|
82
|
-
var
|
|
135
|
+
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
83
136
|
onClick: onClick
|
|
84
137
|
})),
|
|
85
|
-
container =
|
|
138
|
+
container = _render12.container;
|
|
86
139
|
|
|
87
140
|
_react2.fireEvent.click(container.firstChild);
|
|
88
141
|
|
|
89
142
|
expect(onClick).toHaveBeenCalledTimes(1);
|
|
90
143
|
});
|
|
91
144
|
it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
|
|
92
|
-
var
|
|
93
|
-
container =
|
|
145
|
+
var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
|
|
146
|
+
container = _render13.container;
|
|
94
147
|
|
|
95
148
|
_react2.fireEvent.keyDown(container.firstChild, {
|
|
96
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);
|
|
@@ -171,12 +171,13 @@ var DataTable = function DataTable(props) {
|
|
|
171
171
|
onDrop: onDrop
|
|
172
172
|
}, function (provided) {
|
|
173
173
|
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
|
|
174
|
+
className: css(getVariant('body')),
|
|
175
|
+
"data-dnd-ignore-scrollable": true,
|
|
174
176
|
ref: function ref(_ref2) {
|
|
175
177
|
bodyRef.current = _ref2;
|
|
176
178
|
provided.innerRef(_ref2);
|
|
177
179
|
},
|
|
178
|
-
role: "rowgroup"
|
|
179
|
-
className: css(getVariant('body'))
|
|
180
|
+
role: "rowgroup"
|
|
180
181
|
}, provided.droppableProps), /*#__PURE__*/_react["default"].createElement(_components.BodyRows, bodyRowsProps), provided.placeholder);
|
|
181
182
|
}));
|
|
182
183
|
} else {
|
|
@@ -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
|
+
};
|