@primer/components 0.0.0-202192543046 → 0.0.0-202192602912
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/lib/DatePicker/DatePicker.js +2 -0
- package/lib/DatePicker/DatePickerAnchor.d.ts +1 -1
- package/lib/DatePicker/DatePickerAnchor.js +78 -8
- package/lib/DatePicker/useDatePicker.d.ts +2 -1
- package/lib/DatePicker/useDatePicker.js +5 -2
- package/lib/hooks/useDebounce.d.ts +2 -0
- package/lib/hooks/useDebounce.js +24 -0
- package/lib-esm/DatePicker/DatePicker.js +2 -0
- package/lib-esm/DatePicker/DatePickerAnchor.d.ts +1 -1
- package/lib-esm/DatePicker/DatePickerAnchor.js +77 -8
- package/lib-esm/DatePicker/useDatePicker.d.ts +2 -1
- package/lib-esm/DatePicker/useDatePicker.js +5 -2
- package/lib-esm/hooks/useDebounce.d.ts +2 -0
- package/lib-esm/hooks/useDebounce.js +16 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
@@ -21,6 +21,7 @@ const DatePicker = ({
|
|
21
21
|
anchorVariant,
|
22
22
|
anchorRef: externalAnchorRef,
|
23
23
|
confirmation,
|
24
|
+
dateFormat,
|
24
25
|
focusTrapSettings,
|
25
26
|
focusZoneSettings,
|
26
27
|
maxDate,
|
@@ -40,6 +41,7 @@ const DatePicker = ({
|
|
40
41
|
const datePickerConfiguration = {
|
41
42
|
anchorVariant,
|
42
43
|
confirmation,
|
44
|
+
dateFormat,
|
43
45
|
maxDate,
|
44
46
|
minDate,
|
45
47
|
selection,
|
@@ -2,4 +2,4 @@ import React from 'react';
|
|
2
2
|
export interface DatePickerAnchorProps {
|
3
3
|
onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
|
4
4
|
}
|
5
|
-
export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<
|
5
|
+
export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
@@ -11,7 +11,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
11
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
13
13
|
|
14
|
-
var _Button =
|
14
|
+
var _Button = _interopRequireWildcard(require("../Button"));
|
15
15
|
|
16
16
|
var _Text = _interopRequireDefault(require("../Text"));
|
17
17
|
|
@@ -23,6 +23,8 @@ var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
|
|
23
23
|
|
24
24
|
var _TextInput = _interopRequireDefault(require("../TextInput"));
|
25
25
|
|
26
|
+
var _Box = _interopRequireDefault(require("../Box"));
|
27
|
+
|
26
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); }
|
27
29
|
|
28
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; }
|
@@ -39,7 +41,9 @@ const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
|
|
39
41
|
}, ref) => {
|
40
42
|
const {
|
41
43
|
configuration: {
|
42
|
-
anchorVariant
|
44
|
+
anchorVariant,
|
45
|
+
iconPlacement,
|
46
|
+
selection
|
43
47
|
},
|
44
48
|
disabled,
|
45
49
|
formattedDate
|
@@ -60,15 +64,81 @@ const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
|
|
60
64
|
|
61
65
|
onAction === null || onAction === void 0 ? void 0 : onAction(event);
|
62
66
|
}, [disabled, onAction]);
|
67
|
+
const onInputChangeHandler = (0, _react.useCallback)(e => {
|
68
|
+
const value = e.currentTarget.value;
|
69
|
+
if (!value) return;
|
70
|
+
|
71
|
+
if (selection === 'range') {
|
72
|
+
var _values$, _values$2;
|
73
|
+
|
74
|
+
const values = value.split(' - ');
|
75
|
+
const dates = {
|
76
|
+
from: new Date((_values$ = values[0]) === null || _values$ === void 0 ? void 0 : _values$.trim()),
|
77
|
+
to: new Date((_values$2 = values[1]) === null || _values$2 === void 0 ? void 0 : _values$2.trim())
|
78
|
+
};
|
79
|
+
console.log(dates);
|
80
|
+
} else if (selection === 'multi') {
|
81
|
+
const values = value.split(',');
|
82
|
+
const dates = [];
|
83
|
+
|
84
|
+
for (const date of values) {
|
85
|
+
dates.push(new Date(date.trim()));
|
86
|
+
}
|
87
|
+
|
88
|
+
console.log(dates);
|
89
|
+
} else {
|
90
|
+
const date = new Date(value);
|
91
|
+
console.log(date);
|
92
|
+
}
|
93
|
+
}, [selection]);
|
63
94
|
|
64
95
|
if (anchorVariant === 'input') {
|
65
|
-
|
66
|
-
|
67
|
-
|
96
|
+
const calendarButton = side => /*#__PURE__*/_react.default.createElement(_Button.ButtonInvisible, {
|
97
|
+
onClick: clickHandler,
|
98
|
+
sx: {
|
99
|
+
width: '32px',
|
100
|
+
px: '6px',
|
101
|
+
position: 'absolute',
|
102
|
+
[side]: '1px',
|
103
|
+
top: '1px'
|
104
|
+
}
|
105
|
+
}, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
|
106
|
+
icon: _octiconsReact.CalendarIcon
|
107
|
+
}));
|
108
|
+
|
109
|
+
const inputSx = () => {
|
110
|
+
if (iconPlacement === 'start') {
|
111
|
+
return {
|
112
|
+
pl: 5,
|
113
|
+
pr: 2
|
114
|
+
};
|
115
|
+
} else if (iconPlacement === 'end') {
|
116
|
+
return {
|
117
|
+
pl: 2,
|
118
|
+
pr: 5
|
119
|
+
};
|
120
|
+
} else {
|
121
|
+
return {};
|
122
|
+
}
|
123
|
+
};
|
124
|
+
|
125
|
+
return /*#__PURE__*/_react.default.createElement(_Box.default, {
|
126
|
+
ref: ref,
|
127
|
+
sx: {
|
128
|
+
position: 'relative',
|
129
|
+
display: 'flex',
|
130
|
+
flex: 1
|
131
|
+
}
|
132
|
+
}, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
|
133
|
+
defaultValue: formattedDate,
|
134
|
+
onChange: onInputChangeHandler,
|
135
|
+
sx: inputSx()
|
136
|
+
}), iconPlacement === 'end' && calendarButton('right'));
|
68
137
|
}
|
69
138
|
|
70
|
-
return /*#__PURE__*/_react.default.createElement(
|
71
|
-
ref: ref
|
139
|
+
return /*#__PURE__*/_react.default.createElement(_Box.default, {
|
140
|
+
ref: ref
|
141
|
+
}, /*#__PURE__*/_react.default.createElement(DatePickerAnchorButton, {
|
72
142
|
onClick: clickHandler,
|
73
143
|
onKeyPress: keyPressHandler
|
74
144
|
}, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
|
@@ -82,7 +152,7 @@ const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
|
|
82
152
|
overflow: 'hidden',
|
83
153
|
textOverflow: 'ellipsis'
|
84
154
|
}
|
85
|
-
}, formattedDate));
|
155
|
+
}, formattedDate)));
|
86
156
|
});
|
87
157
|
|
88
158
|
exports.DatePickerAnchor = DatePickerAnchor;
|
@@ -9,13 +9,14 @@ export interface DatePickerConfiguration {
|
|
9
9
|
contiguousSelection?: boolean;
|
10
10
|
dateFormat?: DateFormat;
|
11
11
|
dimWeekends?: boolean;
|
12
|
+
iconPlacement?: 'start' | 'end' | 'none';
|
12
13
|
minDate?: Date;
|
13
14
|
maxDate?: Date;
|
14
15
|
placeholder?: string;
|
15
16
|
rangeIncrement?: number;
|
16
17
|
selection?: SelectionVariant;
|
17
18
|
view?: '1-month' | '2-month';
|
18
|
-
weekStartsOn?: 'Sunday' | 'Monday';
|
19
|
+
weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
|
19
20
|
}
|
20
21
|
export declare type RangeSelection = {
|
21
22
|
from: Date;
|
@@ -164,6 +164,7 @@ const defaultConfiguration = {
|
|
164
164
|
confirmation: false,
|
165
165
|
contiguousSelection: false,
|
166
166
|
dimWeekends: false,
|
167
|
+
iconPlacement: 'start',
|
167
168
|
placeholder: 'Select a Date...',
|
168
169
|
selection: 'single',
|
169
170
|
view: '2-month',
|
@@ -202,7 +203,7 @@ const DatePickerProvider = ({
|
|
202
203
|
|
203
204
|
let template = 'MMM d';
|
204
205
|
|
205
|
-
if (configuration.dateFormat) {
|
206
|
+
if (configuration.anchorVariant !== 'input' && configuration.dateFormat) {
|
206
207
|
switch (configuration.dateFormat) {
|
207
208
|
case 'short':
|
208
209
|
template = 'MMM d';
|
@@ -216,6 +217,8 @@ const DatePickerProvider = ({
|
|
216
217
|
template = configuration.dateFormat;
|
217
218
|
break;
|
218
219
|
}
|
220
|
+
} else {
|
221
|
+
template = 'MM/dd/yyyy';
|
219
222
|
}
|
220
223
|
|
221
224
|
switch (configuration.selection) {
|
@@ -273,7 +276,7 @@ const DatePickerProvider = ({
|
|
273
276
|
return 'Invalid Configuration';
|
274
277
|
}
|
275
278
|
}
|
276
|
-
}, [configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
|
279
|
+
}, [configuration.anchorVariant, configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
|
277
280
|
const saveValue = (0, _react.useCallback)(updatedSelection => {
|
278
281
|
setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
|
279
282
|
closePicker === null || closePicker === void 0 ? void 0 : closePicker();
|
@@ -0,0 +1,24 @@
|
|
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;
|
@@ -6,6 +6,7 @@ export const DatePicker = ({
|
|
6
6
|
anchorVariant,
|
7
7
|
anchorRef: externalAnchorRef,
|
8
8
|
confirmation,
|
9
|
+
dateFormat,
|
9
10
|
focusTrapSettings,
|
10
11
|
focusZoneSettings,
|
11
12
|
maxDate,
|
@@ -25,6 +26,7 @@ export const DatePicker = ({
|
|
25
26
|
const datePickerConfiguration = {
|
26
27
|
anchorVariant,
|
27
28
|
confirmation,
|
29
|
+
dateFormat,
|
28
30
|
maxDate,
|
29
31
|
minDate,
|
30
32
|
selection,
|
@@ -2,4 +2,4 @@ import React from 'react';
|
|
2
2
|
export interface DatePickerAnchorProps {
|
3
3
|
onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
|
4
4
|
}
|
5
|
-
export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<
|
5
|
+
export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
@@ -1,12 +1,13 @@
|
|
1
1
|
import { CalendarIcon } from '@primer/octicons-react';
|
2
2
|
import styled from 'styled-components';
|
3
3
|
import React, { useCallback } from 'react';
|
4
|
-
import Button from '../Button';
|
4
|
+
import Button, { ButtonInvisible } from '../Button';
|
5
5
|
import Text from '../Text';
|
6
6
|
import { get } from '../constants';
|
7
7
|
import StyledOcticon from '../StyledOcticon';
|
8
8
|
import useDatePicker from './useDatePicker';
|
9
9
|
import TextInput from '../TextInput';
|
10
|
+
import Box from '../Box';
|
10
11
|
const DatePickerAnchorButton = styled(Button).withConfig({
|
11
12
|
displayName: "DatePickerAnchor__DatePickerAnchorButton",
|
12
13
|
componentId: "sc-8gpb9d-0"
|
@@ -16,7 +17,9 @@ export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
|
|
16
17
|
}, ref) => {
|
17
18
|
const {
|
18
19
|
configuration: {
|
19
|
-
anchorVariant
|
20
|
+
anchorVariant,
|
21
|
+
iconPlacement,
|
22
|
+
selection
|
20
23
|
},
|
21
24
|
disabled,
|
22
25
|
formattedDate
|
@@ -37,15 +40,81 @@ export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
|
|
37
40
|
|
38
41
|
onAction === null || onAction === void 0 ? void 0 : onAction(event);
|
39
42
|
}, [disabled, onAction]);
|
43
|
+
const onInputChangeHandler = useCallback(e => {
|
44
|
+
const value = e.currentTarget.value;
|
45
|
+
if (!value) return;
|
46
|
+
|
47
|
+
if (selection === 'range') {
|
48
|
+
var _values$, _values$2;
|
49
|
+
|
50
|
+
const values = value.split(' - ');
|
51
|
+
const dates = {
|
52
|
+
from: new Date((_values$ = values[0]) === null || _values$ === void 0 ? void 0 : _values$.trim()),
|
53
|
+
to: new Date((_values$2 = values[1]) === null || _values$2 === void 0 ? void 0 : _values$2.trim())
|
54
|
+
};
|
55
|
+
console.log(dates);
|
56
|
+
} else if (selection === 'multi') {
|
57
|
+
const values = value.split(',');
|
58
|
+
const dates = [];
|
59
|
+
|
60
|
+
for (const date of values) {
|
61
|
+
dates.push(new Date(date.trim()));
|
62
|
+
}
|
63
|
+
|
64
|
+
console.log(dates);
|
65
|
+
} else {
|
66
|
+
const date = new Date(value);
|
67
|
+
console.log(date);
|
68
|
+
}
|
69
|
+
}, [selection]);
|
40
70
|
|
41
71
|
if (anchorVariant === 'input') {
|
42
|
-
|
43
|
-
|
44
|
-
|
72
|
+
const calendarButton = side => /*#__PURE__*/React.createElement(ButtonInvisible, {
|
73
|
+
onClick: clickHandler,
|
74
|
+
sx: {
|
75
|
+
width: '32px',
|
76
|
+
px: '6px',
|
77
|
+
position: 'absolute',
|
78
|
+
[side]: '1px',
|
79
|
+
top: '1px'
|
80
|
+
}
|
81
|
+
}, /*#__PURE__*/React.createElement(StyledOcticon, {
|
82
|
+
icon: CalendarIcon
|
83
|
+
}));
|
84
|
+
|
85
|
+
const inputSx = () => {
|
86
|
+
if (iconPlacement === 'start') {
|
87
|
+
return {
|
88
|
+
pl: 5,
|
89
|
+
pr: 2
|
90
|
+
};
|
91
|
+
} else if (iconPlacement === 'end') {
|
92
|
+
return {
|
93
|
+
pl: 2,
|
94
|
+
pr: 5
|
95
|
+
};
|
96
|
+
} else {
|
97
|
+
return {};
|
98
|
+
}
|
99
|
+
};
|
100
|
+
|
101
|
+
return /*#__PURE__*/React.createElement(Box, {
|
102
|
+
ref: ref,
|
103
|
+
sx: {
|
104
|
+
position: 'relative',
|
105
|
+
display: 'flex',
|
106
|
+
flex: 1
|
107
|
+
}
|
108
|
+
}, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/React.createElement(TextInput, {
|
109
|
+
defaultValue: formattedDate,
|
110
|
+
onChange: onInputChangeHandler,
|
111
|
+
sx: inputSx()
|
112
|
+
}), iconPlacement === 'end' && calendarButton('right'));
|
45
113
|
}
|
46
114
|
|
47
|
-
return /*#__PURE__*/React.createElement(
|
48
|
-
ref: ref
|
115
|
+
return /*#__PURE__*/React.createElement(Box, {
|
116
|
+
ref: ref
|
117
|
+
}, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
|
49
118
|
onClick: clickHandler,
|
50
119
|
onKeyPress: keyPressHandler
|
51
120
|
}, /*#__PURE__*/React.createElement(StyledOcticon, {
|
@@ -59,5 +128,5 @@ export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
|
|
59
128
|
overflow: 'hidden',
|
60
129
|
textOverflow: 'ellipsis'
|
61
130
|
}
|
62
|
-
}, formattedDate));
|
131
|
+
}, formattedDate)));
|
63
132
|
});
|
@@ -9,13 +9,14 @@ export interface DatePickerConfiguration {
|
|
9
9
|
contiguousSelection?: boolean;
|
10
10
|
dateFormat?: DateFormat;
|
11
11
|
dimWeekends?: boolean;
|
12
|
+
iconPlacement?: 'start' | 'end' | 'none';
|
12
13
|
minDate?: Date;
|
13
14
|
maxDate?: Date;
|
14
15
|
placeholder?: string;
|
15
16
|
rangeIncrement?: number;
|
16
17
|
selection?: SelectionVariant;
|
17
18
|
view?: '1-month' | '2-month';
|
18
|
-
weekStartsOn?: 'Sunday' | 'Monday';
|
19
|
+
weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
|
19
20
|
}
|
20
21
|
export declare type RangeSelection = {
|
21
22
|
from: Date;
|
@@ -139,6 +139,7 @@ const defaultConfiguration = {
|
|
139
139
|
confirmation: false,
|
140
140
|
contiguousSelection: false,
|
141
141
|
dimWeekends: false,
|
142
|
+
iconPlacement: 'start',
|
142
143
|
placeholder: 'Select a Date...',
|
143
144
|
selection: 'single',
|
144
145
|
view: '2-month',
|
@@ -176,7 +177,7 @@ export const DatePickerProvider = ({
|
|
176
177
|
|
177
178
|
let template = 'MMM d';
|
178
179
|
|
179
|
-
if (configuration.dateFormat) {
|
180
|
+
if (configuration.anchorVariant !== 'input' && configuration.dateFormat) {
|
180
181
|
switch (configuration.dateFormat) {
|
181
182
|
case 'short':
|
182
183
|
template = 'MMM d';
|
@@ -190,6 +191,8 @@ export const DatePickerProvider = ({
|
|
190
191
|
template = configuration.dateFormat;
|
191
192
|
break;
|
192
193
|
}
|
194
|
+
} else {
|
195
|
+
template = 'MM/dd/yyyy';
|
193
196
|
}
|
194
197
|
|
195
198
|
switch (configuration.selection) {
|
@@ -247,7 +250,7 @@ export const DatePickerProvider = ({
|
|
247
250
|
return 'Invalid Configuration';
|
248
251
|
}
|
249
252
|
}
|
250
|
-
}, [configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
|
253
|
+
}, [configuration.anchorVariant, configuration.dateFormat, configuration.placeholder, configuration.selection, selection]);
|
251
254
|
const saveValue = useCallback(updatedSelection => {
|
252
255
|
setPreviousSelection(updatedSelection !== null && updatedSelection !== void 0 ? updatedSelection : selection);
|
253
256
|
closePicker === null || closePicker === void 0 ? void 0 : closePicker();
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { useEffect, useState } from 'react';
|
2
|
+
|
3
|
+
function useDebounce(value, delay) {
|
4
|
+
const [debouncedValue, setDebouncedValue] = useState(value);
|
5
|
+
useEffect(() => {
|
6
|
+
const handler = setTimeout(() => {
|
7
|
+
setDebouncedValue(value);
|
8
|
+
}, delay);
|
9
|
+
return () => {
|
10
|
+
clearTimeout(handler);
|
11
|
+
};
|
12
|
+
}, [value, delay]);
|
13
|
+
return debouncedValue;
|
14
|
+
}
|
15
|
+
|
16
|
+
export default useDebounce;
|