@primer/components 0.0.0-20211040541 → 0.0.0-2021104151625
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 +3 -1
- package/dist/browser.esm.js +473 -474
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +97 -98
- package/dist/browser.umd.js.map +1 -1
- package/lib/ActionList2/Description.d.ts +12 -0
- package/lib/ActionList2/Description.js +53 -0
- package/lib/ActionList2/Divider.d.ts +5 -0
- package/lib/ActionList2/Divider.js +35 -0
- package/lib/ActionList2/Group.d.ts +11 -0
- package/lib/ActionList2/Group.js +57 -0
- package/lib/ActionList2/Header.d.ts +26 -0
- package/lib/ActionList2/Header.js +55 -0
- package/lib/ActionList2/Item.d.ts +67 -0
- package/lib/ActionList2/Item.js +221 -0
- package/lib/ActionList2/LinkItem.d.ts +17 -0
- package/lib/ActionList2/LinkItem.js +57 -0
- package/lib/ActionList2/List.d.ts +26 -0
- package/lib/ActionList2/List.js +51 -0
- package/lib/ActionList2/Selection.d.ts +5 -0
- package/lib/ActionList2/Selection.js +70 -0
- package/lib/ActionList2/Visuals.d.ts +11 -0
- package/lib/ActionList2/Visuals.js +90 -0
- package/lib/ActionList2/index.d.ts +40 -0
- package/lib/ActionList2/index.js +47 -0
- package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib/Autocomplete/Autocomplete.d.ts +28 -30
- package/lib/Autocomplete/AutocompleteInput.d.ts +28 -30
- package/lib/Button/Button.d.ts +24 -24
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonClose.d.ts +43 -43
- package/lib/Button/ButtonDanger.d.ts +24 -24
- package/lib/Button/ButtonInvisible.d.ts +24 -24
- package/lib/Button/ButtonOutline.d.ts +24 -24
- package/lib/Button/ButtonPrimary.d.ts +24 -24
- package/lib/CircleOcticon.d.ts +40 -40
- package/lib/Dialog.d.ts +43 -43
- package/lib/Dropdown.d.ts +168 -168
- package/lib/DropdownMenu/DropdownButton.d.ts +44 -44
- package/lib/FilterList.d.ts +40 -40
- package/lib/Position.d.ts +4 -4
- package/lib/SelectMenu/SelectMenu.d.ts +237 -239
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/TextInputWithTokens.d.ts +28 -30
- package/lib/Timeline.d.ts +41 -41
- package/lib/Token/AvatarToken.d.ts +1 -1
- package/lib/Token/IssueLabelToken.d.ts +1 -1
- package/lib/Token/Token.d.ts +1 -1
- package/lib/experiments.d.ts +1 -0
- package/lib/experiments.js +18 -0
- package/lib/hooks/useResizeObserver.d.ts +1 -1
- package/lib/hooks/useResizeObserver.js +1 -1
- package/lib/sx.d.ts +2 -0
- package/lib/sx.js +8 -0
- package/lib/theme-preval.js +79 -0
- package/lib/utils/create-slots.d.ts +17 -0
- package/lib/utils/create-slots.js +105 -0
- package/lib/utils/testing.d.ts +13 -0
- package/lib/utils/use-force-update.d.ts +1 -0
- package/lib/utils/use-force-update.js +19 -0
- package/lib-esm/ActionList2/Description.d.ts +12 -0
- package/lib-esm/ActionList2/Description.js +37 -0
- package/lib-esm/ActionList2/Divider.d.ts +5 -0
- package/lib-esm/ActionList2/Divider.js +23 -0
- package/lib-esm/ActionList2/Group.d.ts +11 -0
- package/lib-esm/ActionList2/Group.js +40 -0
- package/lib-esm/ActionList2/Header.d.ts +26 -0
- package/lib-esm/ActionList2/Header.js +44 -0
- package/lib-esm/ActionList2/Item.d.ts +67 -0
- package/lib-esm/ActionList2/Item.js +195 -0
- package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
- package/lib-esm/ActionList2/LinkItem.js +43 -0
- package/lib-esm/ActionList2/List.d.ts +26 -0
- package/lib-esm/ActionList2/List.js +34 -0
- package/lib-esm/ActionList2/Selection.d.ts +5 -0
- package/lib-esm/ActionList2/Selection.js +52 -0
- package/lib-esm/ActionList2/Visuals.d.ts +11 -0
- package/lib-esm/ActionList2/Visuals.js +68 -0
- package/lib-esm/ActionList2/index.d.ts +40 -0
- package/lib-esm/ActionList2/index.js +33 -0
- package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
- package/lib-esm/Autocomplete/Autocomplete.d.ts +28 -30
- package/lib-esm/Autocomplete/AutocompleteInput.d.ts +28 -30
- package/lib-esm/Button/Button.d.ts +24 -24
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonClose.d.ts +43 -43
- package/lib-esm/Button/ButtonDanger.d.ts +24 -24
- package/lib-esm/Button/ButtonInvisible.d.ts +24 -24
- package/lib-esm/Button/ButtonOutline.d.ts +24 -24
- package/lib-esm/Button/ButtonPrimary.d.ts +24 -24
- package/lib-esm/CircleOcticon.d.ts +40 -40
- package/lib-esm/Dialog.d.ts +43 -43
- package/lib-esm/Dropdown.d.ts +168 -168
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +44 -44
- package/lib-esm/FilterList.d.ts +40 -40
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/SelectMenu/SelectMenu.d.ts +237 -239
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/TextInputWithTokens.d.ts +28 -30
- package/lib-esm/Timeline.d.ts +41 -41
- package/lib-esm/Token/AvatarToken.d.ts +1 -1
- package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
- package/lib-esm/Token/Token.d.ts +1 -1
- package/lib-esm/experiments.d.ts +1 -0
- package/lib-esm/experiments.js +2 -0
- package/lib-esm/hooks/useResizeObserver.d.ts +1 -1
- package/lib-esm/hooks/useResizeObserver.js +1 -1
- package/lib-esm/sx.d.ts +2 -0
- package/lib-esm/sx.js +3 -1
- package/lib-esm/theme-preval.js +79 -0
- package/lib-esm/utils/create-slots.d.ts +17 -0
- package/lib-esm/utils/create-slots.js +84 -0
- package/lib-esm/utils/testing.d.ts +13 -0
- package/lib-esm/utils/use-force-update.d.ts +1 -0
- package/lib-esm/utils/use-force-update.js +6 -0
- package/package.json +10 -9
- package/lib/DatePicker/DatePicker.d.ts +0 -52
- package/lib/DatePicker/DatePicker.js +0 -109
- package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib/DatePicker/DatePickerAnchor.js +0 -202
- package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib/DatePicker/DatePickerOverlay.js +0 -55
- package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib/DatePicker/DatePickerPanel.js +0 -363
- package/lib/DatePicker/Day.d.ts +0 -15
- package/lib/DatePicker/Day.js +0 -206
- package/lib/DatePicker/Month.d.ts +0 -8
- package/lib/DatePicker/Month.js +0 -122
- package/lib/DatePicker/dateParser.d.ts +0 -12
- package/lib/DatePicker/dateParser.js +0 -192
- package/lib/DatePicker/index.d.ts +0 -2
- package/lib/DatePicker/index.js +0 -13
- package/lib/DatePicker/useDatePicker.d.ts +0 -107
- package/lib/DatePicker/useDatePicker.js +0 -558
- package/lib/hooks/useDebounce.d.ts +0 -2
- package/lib/hooks/useDebounce.js +0 -24
- package/lib-esm/DatePicker/DatePicker.d.ts +0 -52
- package/lib-esm/DatePicker/DatePicker.js +0 -92
- package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
- package/lib-esm/DatePicker/DatePickerAnchor.js +0 -174
- package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
- package/lib-esm/DatePicker/DatePickerOverlay.js +0 -40
- package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
- package/lib-esm/DatePicker/DatePickerPanel.js +0 -332
- package/lib-esm/DatePicker/Day.d.ts +0 -15
- package/lib-esm/DatePicker/Day.js +0 -182
- package/lib-esm/DatePicker/Month.d.ts +0 -8
- package/lib-esm/DatePicker/Month.js +0 -98
- package/lib-esm/DatePicker/dateParser.d.ts +0 -12
- package/lib-esm/DatePicker/dateParser.js +0 -178
- package/lib-esm/DatePicker/index.d.ts +0 -2
- package/lib-esm/DatePicker/index.js +0 -1
- package/lib-esm/DatePicker/useDatePicker.d.ts +0 -107
- package/lib-esm/DatePicker/useDatePicker.js +0 -523
- package/lib-esm/hooks/useDebounce.d.ts +0 -2
- package/lib-esm/hooks/useDebounce.js +0 -16
@@ -1,558 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.isSingleSelection = isSingleSelection;
|
7
|
-
exports.isMultiSelection = isMultiSelection;
|
8
|
-
exports.isRangeSelection = isRangeSelection;
|
9
|
-
exports.isStringRangeSelection = isStringRangeSelection;
|
10
|
-
exports.DatePickerProvider = exports.normalizeDate = exports.default = void 0;
|
11
|
-
|
12
|
-
var _octiconsReact = require("@primer/octicons-react");
|
13
|
-
|
14
|
-
var _dateFns = require("date-fns");
|
15
|
-
|
16
|
-
var _esm = require("date-fns/esm");
|
17
|
-
|
18
|
-
var _deepmerge = _interopRequireDefault(require("deepmerge"));
|
19
|
-
|
20
|
-
var _react = _interopRequireWildcard(require("react"));
|
21
|
-
|
22
|
-
var _ = require("..");
|
23
|
-
|
24
|
-
var _useResizeObserver = require("../hooks/useResizeObserver");
|
25
|
-
|
26
|
-
var _dateParser = require("./dateParser");
|
27
|
-
|
28
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
29
|
-
|
30
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
31
|
-
|
32
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
33
|
-
|
34
|
-
const DatePickerContext = /*#__PURE__*/(0, _react.createContext)(null);
|
35
|
-
|
36
|
-
const useDatePicker = date => {
|
37
|
-
const dateCtx = (0, _react.useContext)(DatePickerContext);
|
38
|
-
const [selected, setSelected] = (0, _react.useState)(false);
|
39
|
-
const [focused, setFocused] = (0, _react.useState)(false);
|
40
|
-
const today = date ? (0, _dateFns.isToday)(date) : false;
|
41
|
-
|
42
|
-
if (!dateCtx) {
|
43
|
-
throw new Error('useDatePicker must be used inside a DatePickerProvider');
|
44
|
-
}
|
45
|
-
|
46
|
-
(0, _react.useEffect)(() => {
|
47
|
-
if (date) {
|
48
|
-
if (dateCtx.hoverRange) {
|
49
|
-
if (isRangeSelection(dateCtx.hoverRange)) {
|
50
|
-
if ((0, _dateFns.isEqual)(date, dateCtx.hoverRange.from)) {
|
51
|
-
setSelected('start');
|
52
|
-
} else if (dateCtx.hoverRange.to && (0, _dateFns.isEqual)(date, dateCtx.hoverRange.to)) {
|
53
|
-
setSelected('end');
|
54
|
-
} else if ((0, _dateFns.isAfter)(date, dateCtx.hoverRange.from) && dateCtx.hoverRange.to && (0, _dateFns.isBefore)(date, dateCtx.hoverRange.to)) {
|
55
|
-
setSelected('middle');
|
56
|
-
} else {
|
57
|
-
setSelected(false);
|
58
|
-
}
|
59
|
-
}
|
60
|
-
} else if (dateCtx.selection) {
|
61
|
-
if (isMultiSelection(dateCtx.selection)) {
|
62
|
-
setSelected(!!dateCtx.selection.find(d => (0, _dateFns.isEqual)(d, date)));
|
63
|
-
} else if (isRangeSelection(dateCtx.selection)) {
|
64
|
-
if ((0, _dateFns.isEqual)(date, dateCtx.selection.from)) {
|
65
|
-
setSelected('start');
|
66
|
-
} else if (dateCtx.selection.to && (0, _dateFns.isEqual)(date, dateCtx.selection.to)) {
|
67
|
-
setSelected('end');
|
68
|
-
} else if ((0, _dateFns.isAfter)(date, dateCtx.selection.from) && dateCtx.selection.to && (0, _dateFns.isBefore)(date, dateCtx.selection.to)) {
|
69
|
-
setSelected('middle');
|
70
|
-
} else {
|
71
|
-
setSelected(false);
|
72
|
-
}
|
73
|
-
} else {
|
74
|
-
setSelected((0, _dateFns.isEqual)(date, dateCtx.selection));
|
75
|
-
}
|
76
|
-
}
|
77
|
-
}
|
78
|
-
}, [date, dateCtx.hoverRange, dateCtx.selection, today]);
|
79
|
-
(0, _react.useEffect)(() => {
|
80
|
-
if (date) {
|
81
|
-
// Determine if date is focused
|
82
|
-
setFocused((0, _dateFns.isEqual)(dateCtx.focusDate, date));
|
83
|
-
}
|
84
|
-
}, [date, dateCtx.focusDate]);
|
85
|
-
let blocked,
|
86
|
-
disabled = false;
|
87
|
-
|
88
|
-
if (date) {
|
89
|
-
// Determine if date is blocked out
|
90
|
-
if (dateCtx.configuration.blockedDates) {
|
91
|
-
blocked = !!dateCtx.configuration.blockedDates.find(d => (0, _dateFns.isEqual)(d, date));
|
92
|
-
} // Determine if date is disabled
|
93
|
-
|
94
|
-
|
95
|
-
if (dateCtx.configuration.minDate || dateCtx.configuration.maxDate || dateCtx.configuration.disableWeekends) {
|
96
|
-
disabled = (dateCtx.configuration.minDate ? (0, _dateFns.isBefore)(date, dateCtx.configuration.minDate) : false) || (dateCtx.configuration.maxDate ? (0, _dateFns.isAfter)(date, dateCtx.configuration.maxDate) : false) || (dateCtx.configuration.disableWeekends ? (0, _dateFns.isWeekend)(date) : false);
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
return { ...dateCtx,
|
101
|
-
blocked,
|
102
|
-
disabled,
|
103
|
-
focused,
|
104
|
-
selected,
|
105
|
-
today
|
106
|
-
};
|
107
|
-
};
|
108
|
-
|
109
|
-
var _default = useDatePicker;
|
110
|
-
exports.default = _default;
|
111
|
-
|
112
|
-
function isSingleSelection(selection) {
|
113
|
-
return selection instanceof Date;
|
114
|
-
}
|
115
|
-
|
116
|
-
function isMultiSelection(selection) {
|
117
|
-
return Array.isArray(selection);
|
118
|
-
}
|
119
|
-
|
120
|
-
function isRangeSelection(selection) {
|
121
|
-
return !!selection.from;
|
122
|
-
}
|
123
|
-
|
124
|
-
function isStringRangeSelection(selection) {
|
125
|
-
return !!selection.from;
|
126
|
-
}
|
127
|
-
|
128
|
-
function parseSelection(selection, variant) {
|
129
|
-
if (!selection) return;
|
130
|
-
|
131
|
-
if (variant === 'multi') {
|
132
|
-
if (isMultiSelection(selection)) {
|
133
|
-
const parsedSelection = [];
|
134
|
-
|
135
|
-
for (const d of selection) {
|
136
|
-
parsedSelection.push(normalizeDate(d));
|
137
|
-
}
|
138
|
-
|
139
|
-
return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
|
140
|
-
} else if (selection instanceof Date) {
|
141
|
-
return [normalizeDate(selection)];
|
142
|
-
} else if (isRangeSelection(selection)) {
|
143
|
-
const parsedSelection = [];
|
144
|
-
parsedSelection.push(normalizeDate(selection.from));
|
145
|
-
|
146
|
-
if (selection.to) {
|
147
|
-
parsedSelection.push(normalizeDate(selection.to));
|
148
|
-
}
|
149
|
-
|
150
|
-
return parsedSelection.sort((a, b) => a.getTime() - b.getTime());
|
151
|
-
}
|
152
|
-
} else if (variant === 'range') {
|
153
|
-
if (isRangeSelection(selection)) {
|
154
|
-
return {
|
155
|
-
from: normalizeDate(selection.from),
|
156
|
-
to: selection.to ? normalizeDate(selection.to) : null
|
157
|
-
};
|
158
|
-
} else if (isMultiSelection(selection)) {
|
159
|
-
return {
|
160
|
-
from: normalizeDate(selection[0]),
|
161
|
-
to: selection[1] ? normalizeDate(selection[1]) : null
|
162
|
-
};
|
163
|
-
} else if (selection instanceof Date) {
|
164
|
-
return {
|
165
|
-
from: normalizeDate(selection),
|
166
|
-
to: null
|
167
|
-
};
|
168
|
-
}
|
169
|
-
} else {
|
170
|
-
if (selection instanceof Date) {
|
171
|
-
return normalizeDate(selection);
|
172
|
-
} else if (isMultiSelection(selection)) {
|
173
|
-
return normalizeDate(selection[0]);
|
174
|
-
} else if (isRangeSelection(selection)) {
|
175
|
-
return normalizeDate(selection.from);
|
176
|
-
} else {
|
177
|
-
return;
|
178
|
-
}
|
179
|
-
}
|
180
|
-
}
|
181
|
-
|
182
|
-
const getInitialFocusDate = selection => {
|
183
|
-
if (!selection) return normalizeDate(new Date());
|
184
|
-
|
185
|
-
if (selection instanceof Date) {
|
186
|
-
return normalizeDate(selection);
|
187
|
-
} else if (Array.isArray(selection)) {
|
188
|
-
return normalizeDate(selection[0]);
|
189
|
-
} else if (isRangeSelection(selection)) {
|
190
|
-
return normalizeDate(selection.from);
|
191
|
-
} else {
|
192
|
-
return normalizeDate(new Date());
|
193
|
-
}
|
194
|
-
};
|
195
|
-
|
196
|
-
const normalizeDate = date => new Date(new Date(date).toDateString());
|
197
|
-
|
198
|
-
exports.normalizeDate = normalizeDate;
|
199
|
-
const defaultConfiguration = {
|
200
|
-
anchorVariant: 'button',
|
201
|
-
confirmation: false,
|
202
|
-
confirmUnsavedClose: false,
|
203
|
-
compressedHeader: false,
|
204
|
-
disableWeekends: false,
|
205
|
-
iconPlacement: 'start',
|
206
|
-
placeholder: 'Choose Date...',
|
207
|
-
showInputPrompt: false,
|
208
|
-
variant: 'single',
|
209
|
-
view: '2-month',
|
210
|
-
weekStartsOn: 'Sunday'
|
211
|
-
};
|
212
|
-
|
213
|
-
const DatePickerProvider = ({
|
214
|
-
configuration: externalConfig = {},
|
215
|
-
children,
|
216
|
-
closePicker,
|
217
|
-
value
|
218
|
-
}) => {
|
219
|
-
const [configuration, setConfiguration] = (0, _react.useState)((0, _deepmerge.default)(defaultConfiguration, externalConfig));
|
220
|
-
const initialSelection = parseSelection(value, configuration.variant);
|
221
|
-
const [previousSelection, setPreviousSelection] = (0, _react.useState)(parseSelection(value, configuration.variant));
|
222
|
-
const [isDirty, setIsDirty] = (0, _react.useState)(false);
|
223
|
-
const [selection, setSelection] = (0, _react.useState)(initialSelection);
|
224
|
-
const [hoverRange, setHoverRange] = (0, _react.useState)(null);
|
225
|
-
const [currentViewingDate, setCurrentViewingDate] = (0, _react.useState)(new Date());
|
226
|
-
const [multiMonthSupport, setMultiMonthSupport] = (0, _react.useState)(true);
|
227
|
-
const confirm = (0, _.useConfirm)();
|
228
|
-
const [dialogOpen, setDialogOpen] = (0, _react.useState)(false);
|
229
|
-
const [focusDate, setFocusDate] = (0, _react.useState)(getInitialFocusDate(initialSelection));
|
230
|
-
(0, _react.useEffect)(() => {
|
231
|
-
setConfiguration((0, _deepmerge.default)(defaultConfiguration, externalConfig));
|
232
|
-
setSelection(parseSelection(selection, configuration.variant)); // Don't want this to run every time selection gets updated
|
233
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
234
|
-
}, [configuration.variant, externalConfig]);
|
235
|
-
const goToMonth = (0, _react.useCallback)(date => {
|
236
|
-
let newDate = date;
|
237
|
-
const {
|
238
|
-
minDate,
|
239
|
-
maxDate
|
240
|
-
} = configuration;
|
241
|
-
|
242
|
-
if (minDate && (0, _dateFns.isBefore)(date, minDate)) {
|
243
|
-
newDate = minDate;
|
244
|
-
} else if (maxDate && (0, _dateFns.isAfter)(date, maxDate)) {
|
245
|
-
newDate = maxDate;
|
246
|
-
}
|
247
|
-
|
248
|
-
setFocusDate(normalizeDate(newDate));
|
249
|
-
setCurrentViewingDate(normalizeDate(newDate));
|
250
|
-
}, [configuration]);
|
251
|
-
const nextMonth = (0, _react.useCallback)(() => {
|
252
|
-
const date = (0, _dateFns.addMonths)(currentViewingDate, 1);
|
253
|
-
setFocusDate(normalizeDate(date));
|
254
|
-
setCurrentViewingDate(date);
|
255
|
-
}, [currentViewingDate]);
|
256
|
-
const previousMonth = (0, _react.useCallback)(() => {
|
257
|
-
const date = (0, _dateFns.subMonths)(currentViewingDate, 1);
|
258
|
-
setFocusDate(normalizeDate(date));
|
259
|
-
setCurrentViewingDate(date);
|
260
|
-
}, [currentViewingDate]);
|
261
|
-
const formattedDate = (0, _react.useMemo)(() => {
|
262
|
-
const {
|
263
|
-
anchorVariant,
|
264
|
-
dateFormat,
|
265
|
-
placeholder,
|
266
|
-
variant
|
267
|
-
} = configuration;
|
268
|
-
return (0, _dateParser.formatDate)({
|
269
|
-
selection,
|
270
|
-
anchorVariant,
|
271
|
-
dateFormat,
|
272
|
-
placeholder,
|
273
|
-
rawFormat: false,
|
274
|
-
variant
|
275
|
-
});
|
276
|
-
}, [configuration, selection]);
|
277
|
-
const inputDate = (0, _react.useMemo)(() => {
|
278
|
-
const {
|
279
|
-
dateFormat,
|
280
|
-
placeholder,
|
281
|
-
variant
|
282
|
-
} = configuration;
|
283
|
-
return (0, _dateParser.formatDate)({
|
284
|
-
selection,
|
285
|
-
dateFormat,
|
286
|
-
placeholder,
|
287
|
-
rawFormat: true,
|
288
|
-
variant
|
289
|
-
});
|
290
|
-
}, [configuration, selection]);
|
291
|
-
const saveValue = (0, _react.useCallback)(updatedSelection => {
|
292
|
-
setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
|
293
|
-
setIsDirty(false);
|
294
|
-
closePicker === null || closePicker === void 0 ? void 0 : closePicker();
|
295
|
-
}, [closePicker, selection]);
|
296
|
-
const revertValue = (0, _react.useCallback)(() => {
|
297
|
-
setSelection(previousSelection);
|
298
|
-
setIsDirty(false);
|
299
|
-
}, [previousSelection]);
|
300
|
-
const handleClose = (0, _react.useCallback)(async () => {
|
301
|
-
if (configuration.confirmUnsavedClose) {
|
302
|
-
if (isDirty) {
|
303
|
-
const result = await confirm({
|
304
|
-
title: 'Save Changes?',
|
305
|
-
content: 'You have unsaved changes, would you like to save them?',
|
306
|
-
confirmButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null), /*#__PURE__*/_react.default.createElement(_.Text, {
|
307
|
-
sx: {
|
308
|
-
ml: 1
|
309
|
-
}
|
310
|
-
}, "Save")),
|
311
|
-
cancelButtonContent: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_octiconsReact.TrashIcon, null), /*#__PURE__*/_react.default.createElement(_.Text, {
|
312
|
-
sx: {
|
313
|
-
ml: 1
|
314
|
-
}
|
315
|
-
}, "Discard"))
|
316
|
-
});
|
317
|
-
|
318
|
-
if (result) {
|
319
|
-
saveValue();
|
320
|
-
} else {
|
321
|
-
revertValue();
|
322
|
-
}
|
323
|
-
}
|
324
|
-
} else if (isDirty) revertValue();
|
325
|
-
}, [configuration.confirmUnsavedClose, confirm, isDirty, revertValue, saveValue]);
|
326
|
-
const inputHandler = (0, _react.useCallback)(updatedSelection => {
|
327
|
-
if (!updatedSelection) return;
|
328
|
-
const {
|
329
|
-
maxDate,
|
330
|
-
minDate,
|
331
|
-
variant,
|
332
|
-
maxSelections,
|
333
|
-
maxRangeSize
|
334
|
-
} = configuration;
|
335
|
-
|
336
|
-
switch (variant) {
|
337
|
-
case 'single':
|
338
|
-
{
|
339
|
-
if (updatedSelection instanceof Date) {
|
340
|
-
if (maxDate && (0, _dateFns.isAfter)(updatedSelection, maxDate)) {
|
341
|
-
setSelection(maxDate);
|
342
|
-
} else if (minDate && (0, _dateFns.isBefore)(minDate, updatedSelection)) {
|
343
|
-
setSelection(minDate);
|
344
|
-
} else {
|
345
|
-
setSelection(updatedSelection);
|
346
|
-
}
|
347
|
-
}
|
348
|
-
|
349
|
-
break;
|
350
|
-
}
|
351
|
-
|
352
|
-
case 'multi':
|
353
|
-
{
|
354
|
-
if (Array.isArray(updatedSelection)) {
|
355
|
-
let validSelections = updatedSelection.filter(d => (maxDate ? (0, _dateFns.isBefore)(d, maxDate) : true) && (minDate ? (0, _dateFns.isAfter)(d, minDate) : true));
|
356
|
-
|
357
|
-
if (maxSelections) {
|
358
|
-
validSelections = validSelections.slice(0, maxSelections);
|
359
|
-
}
|
360
|
-
|
361
|
-
setSelection(validSelections);
|
362
|
-
}
|
363
|
-
|
364
|
-
break;
|
365
|
-
}
|
366
|
-
|
367
|
-
case 'range':
|
368
|
-
{
|
369
|
-
if (isRangeSelection(updatedSelection)) {
|
370
|
-
const validRange = updatedSelection;
|
371
|
-
|
372
|
-
if (minDate) {
|
373
|
-
validRange.from = (0, _dateFns.isAfter)(updatedSelection.from, minDate) ? updatedSelection.from : minDate;
|
374
|
-
|
375
|
-
if (updatedSelection.to) {
|
376
|
-
validRange.to = (0, _dateFns.isAfter)(updatedSelection.to, minDate) ? updatedSelection.to : minDate;
|
377
|
-
}
|
378
|
-
}
|
379
|
-
|
380
|
-
if (maxDate) {
|
381
|
-
validRange.from = (0, _dateFns.isBefore)(updatedSelection.from, maxDate) ? updatedSelection.from : maxDate;
|
382
|
-
|
383
|
-
if (updatedSelection.to) {
|
384
|
-
validRange.to = (0, _dateFns.isBefore)(updatedSelection.to, maxDate) ? updatedSelection.to : maxDate;
|
385
|
-
}
|
386
|
-
}
|
387
|
-
|
388
|
-
if (maxRangeSize && validRange.to && Math.abs((0, _dateFns.differenceInDays)(validRange.from, validRange.to)) >= maxRangeSize) {
|
389
|
-
validRange.to = (0, _dateFns.addDays)(validRange.from, maxRangeSize - 1);
|
390
|
-
}
|
391
|
-
|
392
|
-
setSelection(updatedSelection);
|
393
|
-
}
|
394
|
-
|
395
|
-
break;
|
396
|
-
}
|
397
|
-
}
|
398
|
-
}, [configuration]);
|
399
|
-
(0, _react.useEffect)(() => {
|
400
|
-
if (configuration.view === '1-month') {
|
401
|
-
if (currentViewingDate.getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear()) {
|
402
|
-
return;
|
403
|
-
} else {
|
404
|
-
setCurrentViewingDate((0, _dateFns.setDate)(focusDate, 1));
|
405
|
-
return;
|
406
|
-
}
|
407
|
-
}
|
408
|
-
/**
|
409
|
-
* This logic is rough, so buckle up.
|
410
|
-
* We want to set the currently shown months based on what has focus. If the focus leaves what we're able to view,
|
411
|
-
* we want to be able to change the currently shown month. However, this gets complicated with the 2-month view.
|
412
|
-
* FIRST: If it's the same month/year: Easy
|
413
|
-
* SECOND: If it's the next month, but same year: Done
|
414
|
-
* THIRD: If it's the next month AND next year, but it's January (i.e. we're viewing Dec/Jan): Good to go
|
415
|
-
*/
|
416
|
-
|
417
|
-
|
418
|
-
if (currentViewingDate.getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear() || (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth() === focusDate.getMonth() && currentViewingDate.getFullYear() === focusDate.getFullYear() || (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth() === focusDate.getMonth() && focusDate.getMonth() === 0 && (0, _dateFns.addYears)(currentViewingDate, 1).getFullYear() === focusDate.getFullYear()) {
|
419
|
-
return;
|
420
|
-
} else {
|
421
|
-
setCurrentViewingDate((0, _dateFns.setDate)(focusDate, 1));
|
422
|
-
}
|
423
|
-
}, [configuration.view, currentViewingDate, focusDate]);
|
424
|
-
const selectionHandler = (0, _react.useCallback)(date => {
|
425
|
-
setIsDirty(true);
|
426
|
-
|
427
|
-
if (configuration.variant === 'multi') {
|
428
|
-
const selections = Array.isArray(selection) ? selection : [];
|
429
|
-
const existingIndex = selections.findIndex(s => (0, _dateFns.isEqual)(s, date));
|
430
|
-
|
431
|
-
if (existingIndex > -1) {
|
432
|
-
selections.splice(existingIndex, 1);
|
433
|
-
setSelection(selections.sort((a, b) => a.getTime() - b.getTime()));
|
434
|
-
} else {
|
435
|
-
if (configuration.maxSelections && selections.length + 1 > configuration.maxSelections) return;
|
436
|
-
setSelection([...selections, date].sort((a, b) => a.getTime() - b.getTime()));
|
437
|
-
}
|
438
|
-
} else if (configuration.variant === 'range') {
|
439
|
-
if (selection && isRangeSelection(selection) && !selection.to) {
|
440
|
-
let toDate = date;
|
441
|
-
|
442
|
-
if (configuration.maxRangeSize && Math.abs((0, _dateFns.differenceInDays)(selection.from, date)) >= configuration.maxRangeSize) {
|
443
|
-
toDate = (0, _dateFns.isBefore)(date, selection.from) ? (0, _dateFns.subDays)(selection.from, configuration.maxRangeSize - 1) : (0, _dateFns.addDays)(selection.from, configuration.maxRangeSize - 1);
|
444
|
-
}
|
445
|
-
|
446
|
-
const updatedSelection = (0, _dateFns.isBefore)(toDate, selection.from) ? {
|
447
|
-
from: toDate,
|
448
|
-
to: selection.from
|
449
|
-
} : {
|
450
|
-
from: selection.from,
|
451
|
-
to: toDate
|
452
|
-
};
|
453
|
-
setSelection(updatedSelection);
|
454
|
-
setHoverRange(null);
|
455
|
-
|
456
|
-
if (!configuration.confirmation) {
|
457
|
-
saveValue(updatedSelection);
|
458
|
-
}
|
459
|
-
} else {
|
460
|
-
setHoverRange({
|
461
|
-
from: date,
|
462
|
-
to: date
|
463
|
-
});
|
464
|
-
setSelection({
|
465
|
-
from: date,
|
466
|
-
to: null
|
467
|
-
});
|
468
|
-
}
|
469
|
-
} else {
|
470
|
-
setSelection(date);
|
471
|
-
|
472
|
-
if (!configuration.confirmation) {
|
473
|
-
saveValue(date);
|
474
|
-
}
|
475
|
-
}
|
476
|
-
}, [configuration.confirmation, configuration.maxRangeSize, configuration.maxSelections, configuration.variant, saveValue, selection]);
|
477
|
-
const focusHandler = (0, _react.useCallback)(date => {
|
478
|
-
if (!selection) return;
|
479
|
-
const {
|
480
|
-
minDate,
|
481
|
-
maxDate,
|
482
|
-
maxRangeSize,
|
483
|
-
disableWeekends,
|
484
|
-
variant
|
485
|
-
} = configuration;
|
486
|
-
|
487
|
-
if (variant === 'range' && isRangeSelection(selection) && hoverRange) {
|
488
|
-
let hoverDate = date;
|
489
|
-
if (minDate) hoverDate = (0, _dateFns.isBefore)(date, minDate) ? minDate : hoverDate;
|
490
|
-
if (maxDate) hoverDate = (0, _dateFns.isAfter)(date, maxDate) ? maxDate : hoverDate;
|
491
|
-
const daysInRange = disableWeekends ? Math.abs((0, _dateFns.differenceInBusinessDays)(selection.from, hoverDate)) : Math.abs((0, _dateFns.differenceInDays)(selection.from, hoverDate));
|
492
|
-
|
493
|
-
if (maxRangeSize && daysInRange >= maxRangeSize) {
|
494
|
-
if (disableWeekends) {
|
495
|
-
hoverDate = (0, _dateFns.isBefore)(hoverDate, selection.from) ? (0, _esm.subBusinessDays)(selection.from, configuration.maxRangeSize - 1) : (0, _esm.addBusinessDays)(selection.from, configuration.maxRangeSize - 1);
|
496
|
-
} else {
|
497
|
-
hoverDate = (0, _dateFns.isBefore)(hoverDate, selection.from) ? (0, _dateFns.subDays)(selection.from, configuration.maxRangeSize - 1) : (0, _dateFns.addDays)(selection.from, configuration.maxRangeSize - 1);
|
498
|
-
}
|
499
|
-
}
|
500
|
-
|
501
|
-
if (disableWeekends && (0, _dateFns.isWeekend)(hoverDate)) {
|
502
|
-
hoverDate = (0, _dateFns.previousFriday)(hoverDate);
|
503
|
-
}
|
504
|
-
|
505
|
-
setHoverRange((0, _dateFns.isBefore)(hoverDate, selection.from) ? {
|
506
|
-
from: hoverDate,
|
507
|
-
to: selection.from
|
508
|
-
} : {
|
509
|
-
from: selection.from,
|
510
|
-
to: hoverDate
|
511
|
-
});
|
512
|
-
}
|
513
|
-
}, [configuration, hoverRange, selection]);
|
514
|
-
|
515
|
-
const onResize = windowEntry => {
|
516
|
-
// Only care about the first element, we expect one element ot be watched
|
517
|
-
const {
|
518
|
-
width
|
519
|
-
} = windowEntry.contentRect; // 610 is the panel width with 2 months
|
520
|
-
|
521
|
-
setMultiMonthSupport(width > 610);
|
522
|
-
};
|
523
|
-
|
524
|
-
(0, _useResizeObserver.useResizeObserver)(onResize);
|
525
|
-
const datePickerCtx = (0, _react.useMemo)(() => {
|
526
|
-
return {
|
527
|
-
configuration,
|
528
|
-
currentViewingDate,
|
529
|
-
disabled: false,
|
530
|
-
focusDate,
|
531
|
-
formattedDate,
|
532
|
-
inputDate,
|
533
|
-
goToMonth,
|
534
|
-
hoverRange,
|
535
|
-
dialogOpen,
|
536
|
-
nextMonth,
|
537
|
-
onClose: handleClose,
|
538
|
-
onDateInput: inputHandler,
|
539
|
-
onDayFocus: focusHandler,
|
540
|
-
onSelection: selectionHandler,
|
541
|
-
previousMonth,
|
542
|
-
revertValue,
|
543
|
-
saveValue,
|
544
|
-
selectionActive: false,
|
545
|
-
setFocusDate,
|
546
|
-
setHoverRange,
|
547
|
-
selection,
|
548
|
-
setDialogOpen,
|
549
|
-
viewMode: configuration.view === '2-month' && multiMonthSupport ? '2-month' : '1-month'
|
550
|
-
};
|
551
|
-
}, [configuration, currentViewingDate, dialogOpen, focusDate, focusHandler, formattedDate, goToMonth, handleClose, hoverRange, inputDate, inputHandler, multiMonthSupport, nextMonth, previousMonth, revertValue, saveValue, selection, selectionHandler]);
|
552
|
-
return /*#__PURE__*/_react.default.createElement(DatePickerContext.Provider, {
|
553
|
-
value: datePickerCtx
|
554
|
-
}, children);
|
555
|
-
};
|
556
|
-
|
557
|
-
exports.DatePickerProvider = DatePickerProvider;
|
558
|
-
DatePickerProvider.displayName = "DatePickerProvider";
|
package/lib/hooks/useDebounce.js
DELETED
@@ -1,24 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _react = require("react");
|
9
|
-
|
10
|
-
function useDebounce(value, delay) {
|
11
|
-
const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
|
12
|
-
(0, _react.useEffect)(() => {
|
13
|
-
const handler = setTimeout(() => {
|
14
|
-
setDebouncedValue(value);
|
15
|
-
}, delay);
|
16
|
-
return () => {
|
17
|
-
clearTimeout(handler);
|
18
|
-
};
|
19
|
-
}, [value, delay]);
|
20
|
-
return debouncedValue;
|
21
|
-
}
|
22
|
-
|
23
|
-
var _default = useDebounce;
|
24
|
-
exports.default = _default;
|
@@ -1,52 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { OverlayProps } from '../Overlay';
|
3
|
-
import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
|
4
|
-
import { FocusZoneHookSettings } from '../hooks/useFocusZone';
|
5
|
-
import { DatePickerConfiguration, Selection } from './useDatePicker';
|
6
|
-
declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
|
7
|
-
declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
|
8
|
-
export interface DatePickerProps extends DatePickerConfiguration {
|
9
|
-
/**
|
10
|
-
* An override to the internal ref that will be spread on to the renderAnchor
|
11
|
-
*/
|
12
|
-
anchorRef?: React.RefObject<HTMLElement>;
|
13
|
-
/**
|
14
|
-
* Settings to apply to the Focus Zone on the internal `Overlay` component.
|
15
|
-
*/
|
16
|
-
focusTrapSettings?: Partial<FocusTrapHookSettings>;
|
17
|
-
/**
|
18
|
-
* Settings to apply to the Focus Zone on the internal `Overlay` component.
|
19
|
-
*/
|
20
|
-
focusZoneSettings?: Partial<FocusZoneHookSettings>;
|
21
|
-
initialValue?: 'today' | Date | string | null;
|
22
|
-
iconOnly?: boolean;
|
23
|
-
placeholder?: string;
|
24
|
-
/**
|
25
|
-
* Determines whether the overlay portion of the component should be shown or not
|
26
|
-
*/
|
27
|
-
open?: boolean;
|
28
|
-
/**
|
29
|
-
* A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
|
30
|
-
*/
|
31
|
-
onOpen?: (gesture: OpenGesture) => unknown;
|
32
|
-
/**
|
33
|
-
* A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
|
34
|
-
*/
|
35
|
-
onClose?: (gesture: CloseGesture) => unknown;
|
36
|
-
/**
|
37
|
-
* Props to be spread on the internal `Overlay` component.
|
38
|
-
*/
|
39
|
-
overlayProps?: Partial<OverlayProps>;
|
40
|
-
/**
|
41
|
-
* A custom function component used to render the anchor element.
|
42
|
-
* Will receive the selected text as `children` prop when an item is activated.
|
43
|
-
*/
|
44
|
-
renderAnchor?: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
|
45
|
-
value?: Selection;
|
46
|
-
/**
|
47
|
-
* Minimum date to select
|
48
|
-
*/
|
49
|
-
minDate?: Date | null;
|
50
|
-
}
|
51
|
-
export declare const DatePicker: React.FC<DatePickerProps>;
|
52
|
-
export {};
|