@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 CHANGED
@@ -1,6 +1,6 @@
1
1
  # @primer/components
2
2
 
3
- ## 0.0.0-202192543046
3
+ ## 0.0.0-202192602912
4
4
 
5
5
  ### Patch Changes
6
6
 
@@ -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<HTMLButtonElement>>;
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 = _interopRequireDefault(require("../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
- return /*#__PURE__*/_react.default.createElement(_TextInput.default, {
66
- value: formattedDate
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(DatePickerAnchorButton, {
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,2 @@
1
+ declare function useDebounce<T>(value: T, delay: number): T;
2
+ export default useDebounce;
@@ -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<HTMLButtonElement>>;
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
- return /*#__PURE__*/React.createElement(TextInput, {
43
- value: formattedDate
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(DatePickerAnchorButton, {
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,2 @@
1
+ declare function useDebounce<T>(value: T, delay: number): T;
2
+ export default useDebounce;
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-202192543046",
3
+ "version": "0.0.0-202192602912",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",