bright-components 10.1.1 → 10.2.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/dist/components/DayPicker/NewDayPicker/index.js +207 -0
  2. package/dist/components/DayPicker/index.js +30 -7
  3. package/dist/components/DayPickerPanel/index.js +1 -1
  4. package/dist/components/Icons/Users/index.js +1 -1
  5. package/dist/components/Icons/Visibility/index.js +2 -14
  6. package/dist/components/Icons/Visible/index.js +29 -0
  7. package/dist/components/Modal/ModalBody/index.js +1 -0
  8. package/dist/components/Modal/index.js +2 -1
  9. package/dist/components/Time/TimePicker/index.js +1 -0
  10. package/dist/setupTests.js +5 -0
  11. package/package.json +3 -2
  12. package/src/components/DayPicker/NewDayPicker/index.js +208 -0
  13. package/src/components/DayPicker/examples.md +17 -0
  14. package/src/components/DayPicker/index.js +43 -17
  15. package/src/components/DayPicker/test.js +297 -1
  16. package/src/components/DayPickerPanel/index.js +1 -1
  17. package/src/components/DayPickerPanel/test.js +1 -1
  18. package/src/components/DurationInput/test.js +5 -3
  19. package/src/components/EmployeePicker/FilterBar/test.js +1 -1
  20. package/src/components/Icons/Users/index.js +1 -1
  21. package/src/components/Icons/Visibility/index.js +3 -14
  22. package/src/components/Icons/Visible/examples.md +5 -0
  23. package/src/components/Icons/Visible/index.js +19 -0
  24. package/src/components/Modal/ModalBody/index.js +1 -0
  25. package/src/components/Modal/index.js +2 -1
  26. package/src/components/Modal/test.js +0 -1
  27. package/src/components/ResponsiveTabs/test.js +3 -3
  28. package/src/components/Time/TimePicker/index.js +1 -0
  29. package/src/components/Time/TimePicker/test.js +29 -28
  30. package/src/setupTests.js +2 -0
@@ -0,0 +1,207 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.default = void 0;
5
+
6
+ var _react = _interopRequireWildcard(require("react"));
7
+
8
+ var _dateFns = require("date-fns");
9
+
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+
12
+ var _Input = _interopRequireDefault(require("../../Input"));
13
+
14
+ var _ErrorMessage = _interopRequireDefault(require("../../ErrorMessage"));
15
+
16
+ var _propTypes = require("prop-types");
17
+
18
+ var _colors = _interopRequireDefault(require("../../../constants/colors"));
19
+
20
+ var _spacing = _interopRequireDefault(require("../../../constants/spacing"));
21
+
22
+ var _Calendar = _interopRequireDefault(require("../../Icons/Calendar"));
23
+
24
+ var _reactGa = require("react-ga");
25
+
26
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
33
+
34
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
35
+
36
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
37
+
38
+ const HiddenBox = (0, _styledComponents.default)(_Input.default.withComponent('div'))`
39
+ display: flex;
40
+ align-items: center;
41
+ ${props => props.error && `
42
+ margin-bottom: 0px !important;
43
+ border-bottom-left-radius: 0px;
44
+ border-bottom-right-radius: 0px;
45
+ border-color: ${_colors.default.borderError} !important;
46
+ `};
47
+ input {
48
+ height: 2.5rem !important;
49
+ min-height: 2.5rem !important;
50
+ border: 0 !important;
51
+ margin: 0 !important;
52
+ padding: 0 !important;
53
+ box-shadow: none !important;
54
+ }
55
+ `;
56
+ HiddenBox.displayName = 'HiddenBox';
57
+ const OpenCalendarIcon = (0, _styledComponents.default)(_Calendar.default)`
58
+ cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
59
+ margin-left: ${_spacing.default.s1};
60
+ color: ${_colors.default.primary};
61
+ `;
62
+ OpenCalendarIcon.displayName = 'OpenCalendarIcon';
63
+ const formats = {
64
+ CA: {
65
+ placeholderDate: 'YY/MM/DD',
66
+ dateFormat: 'yy/MM/dd'
67
+ },
68
+ default: {
69
+ placeholderDate: 'DD/MM/YY',
70
+ dateFormat: 'dd/MM/yy'
71
+ }
72
+ };
73
+
74
+ const makeInnerDate = (date, dateFormat) => {
75
+ if (date.from) {
76
+ return (0, _dateFns.format)(date.from, dateFormat);
77
+ }
78
+
79
+ return '';
80
+ };
81
+
82
+ const NewDisplay = _ref => {
83
+ let {
84
+ placeholder,
85
+ datesToDisplay,
86
+ range,
87
+ allowClear,
88
+ yearRange,
89
+ onSelectedDate,
90
+ locale,
91
+ clearValue,
92
+ disabled,
93
+ error,
94
+ toggleDayPicker,
95
+ GA: {
96
+ category,
97
+ actionId
98
+ },
99
+ recordValue,
100
+ dayPickerOpen
101
+ } = _ref;
102
+ const {
103
+ placeholderDate,
104
+ dateFormat
105
+ } = formats[locale] || formats.default;
106
+ const [hasFocus, setHasFocus] = (0, _react.useState)(false);
107
+ const [hasError, setHasError] = (0, _react.useState)(false);
108
+ const [innerDate, setInnerDate] = (0, _react.useState)(makeInnerDate(range, dateFormat));
109
+ return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(HiddenBox, {
110
+ error: error,
111
+ "data-testid": "input-selector"
112
+ }, _react.default.createElement(_Input.default, {
113
+ "data-testid": "new input",
114
+ placeholder: hasFocus ? placeholderDate : placeholder,
115
+ value: hasFocus ? innerDate : datesToDisplay,
116
+ fullWidth: true,
117
+ disabled: disabled,
118
+ onFocus: () => {
119
+ setInnerDate(makeInnerDate(range, dateFormat));
120
+ setHasFocus(true);
121
+ setHasError(false);
122
+ },
123
+ onBlur: _ref2 => {
124
+ let {
125
+ target: {
126
+ value
127
+ }
128
+ } = _ref2;
129
+ setHasFocus(false);
130
+ if (dayPickerOpen) toggleDayPicker();
131
+
132
+ if (!value && (allowClear || !range.from)) {
133
+ return range.from ? clearValue() : null;
134
+ }
135
+
136
+ const newDate = {
137
+ from: (0, _dateFns.parse)(value, dateFormat, new Date()),
138
+ to: (0, _dateFns.parse)(value, dateFormat, new Date())
139
+ };
140
+ const fromYear = (0, _dateFns.getYear)(newDate.from);
141
+ const toYear = (0, _dateFns.getYear)(newDate.to);
142
+
143
+ if (!(0, _dateFns.isValid)(newDate.from) || !(0, _dateFns.isValid)(newDate.to) || fromYear < yearRange.min || toYear > yearRange.max) {
144
+ setHasError(!((0, _dateFns.isValid)(newDate.from) && (0, _dateFns.isValid)(newDate.to)) ? 'invalid' : 'range');
145
+ return range.from ? onSelectedDate(allowClear ? '' : range) : null;
146
+ }
147
+
148
+ if (category) {
149
+ const label = `${(0, _dateFns.format)(newDate.from, 'EEE dd MMM')} ${(0, _dateFns.format)(newDate.from, 'yyyy')}`;
150
+ (0, _reactGa.event)(_objectSpread({
151
+ category,
152
+ action: `${actionId} - Set via Typing`
153
+ }, recordValue ? {
154
+ label
155
+ } : {}));
156
+ }
157
+
158
+ return onSelectedDate(newDate);
159
+ },
160
+ onChange: _ref3 => {
161
+ let {
162
+ target: {
163
+ value
164
+ }
165
+ } = _ref3;
166
+ setInnerDate(value.replace(/.*\/$/g, text => value.length < innerDate.length ? value.slice(0, -1) : text).replace(/(\d\d)(\d)/g, '$1/$2').replace(/^(\d\/)$/g, '0$1').replace(/\d\d$/g, text => value.length > innerDate.length && value.length < 7 ? `${text}/` : text).replace(/^(\d\d\/)(\d\/)$/g, '$10$2').replace(/[^\d/]/g, '').replace(/^(.{0,8})(.*)$/g, '$1').replace(/\/\/$/g, '/'));
167
+ }
168
+ }), _react.default.createElement(OpenCalendarIcon, {
169
+ "data-testid": "calendarIcon",
170
+ size: 22,
171
+ disabled: disabled,
172
+ onClick: () => {
173
+ setHasError(false);
174
+ toggleDayPicker();
175
+ }
176
+ })), hasError && _react.default.createElement(_ErrorMessage.default, {
177
+ showIcon: false
178
+ }, hasError === 'invalid' ? 'Date is invalid' : `Year is outside of range. Must be between ${yearRange.min} - ${yearRange.max}`));
179
+ };
180
+
181
+ NewDisplay.propTypes = {
182
+ placeholder: _propTypes.string.isRequired,
183
+ datesToDisplay: _propTypes.string.isRequired,
184
+ range: (0, _propTypes.shape)({
185
+ from: (0, _propTypes.instanceOf)(Date),
186
+ to: (0, _propTypes.instanceOf)(Date)
187
+ }).isRequired,
188
+ allowClear: _propTypes.bool.isRequired,
189
+ yearRange: (0, _propTypes.shape)({
190
+ min: _propTypes.number,
191
+ max: _propTypes.number
192
+ }).isRequired,
193
+ onSelectedDate: _propTypes.func.isRequired,
194
+ locale: _propTypes.string.isRequired,
195
+ clearValue: _propTypes.func.isRequired,
196
+ disabled: _propTypes.bool.isRequired,
197
+ error: _propTypes.bool.isRequired,
198
+ toggleDayPicker: _propTypes.func.isRequired,
199
+ GA: (0, _propTypes.shape)({
200
+ category: _propTypes.string,
201
+ actionId: _propTypes.string
202
+ }).isRequired,
203
+ recordValue: _propTypes.bool.isRequired,
204
+ dayPickerOpen: _propTypes.bool.isRequired
205
+ };
206
+ var _default = NewDisplay;
207
+ exports.default = _default;
@@ -33,6 +33,8 @@ var _breakpoints = _interopRequireDefault(require("../../constants/breakpoints")
33
33
 
34
34
  var _Calendar = _interopRequireDefault(require("../Icons/Calendar"));
35
35
 
36
+ var _NewDayPicker = _interopRequireDefault(require("./NewDayPicker"));
37
+
36
38
  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); }
37
39
 
38
40
  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; }
@@ -271,15 +273,17 @@ class DayPicker extends _react.default.Component {
271
273
  closeButton,
272
274
  panelAbsoluteOnDesktop,
273
275
  onSelectedDate,
274
- isDateSelect
276
+ isDateSelect,
277
+ typeable
275
278
  } = _this$props,
276
- rest = _objectWithoutProperties(_this$props, ["allowClear", "placeholder", "dateRange", "yearRange", "yearsToDisplay", "style", "error", "disabled", "shortcuts", "disabledDays", "GA", "recordValue", "legacyInputStyle", "closeButton", "panelAbsoluteOnDesktop", "onSelectedDate", "isDateSelect"]);
279
+ rest = _objectWithoutProperties(_this$props, ["allowClear", "placeholder", "dateRange", "yearRange", "yearsToDisplay", "style", "error", "disabled", "shortcuts", "disabledDays", "GA", "recordValue", "legacyInputStyle", "closeButton", "panelAbsoluteOnDesktop", "onSelectedDate", "isDateSelect", "typeable"]);
277
280
 
278
281
  const {
279
282
  dayPickerOpen
280
283
  } = this.state;
281
284
  const {
282
- range
285
+ range,
286
+ locale
283
287
  } = this.props;
284
288
  const fromDate = range.from ? (0, _dateFns.format)(range.from, this.getDisplayFormat()) : '';
285
289
  const toDate = range.to ? (0, _dateFns.format)(range.to, friendlyShortWithYear) : '';
@@ -290,7 +294,7 @@ class DayPicker extends _react.default.Component {
290
294
  } = style,
291
295
  otherStyles = _objectWithoutProperties(style, ["width"]);
292
296
 
293
- return _react.default.createElement(DayPickerInputContainer, rest, _react.default.createElement(InputBox, {
297
+ return _react.default.createElement(DayPickerInputContainer, rest, !typeable || dateRange ? _react.default.createElement(InputBox, {
294
298
  onClick: this.toggleDayPicker,
295
299
  error: error,
296
300
  disabled: disabled,
@@ -299,7 +303,22 @@ class DayPicker extends _react.default.Component {
299
303
  }, datesToDisplay ? _react.default.createElement("span", null, datesToDisplay) : _react.default.createElement(Placeholder, null, placeholder), _react.default.createElement(OpenCalendarIcon, {
300
304
  size: 22,
301
305
  disabled: disabled
302
- })), dayPickerOpen && _react.default.createElement(DayRangeContainer, {
306
+ })) : _react.default.createElement(_NewDayPicker.default, {
307
+ placeholder: placeholder,
308
+ datesToDisplay: datesToDisplay,
309
+ range: range,
310
+ allowClear: allowClear,
311
+ yearRange: yearRange,
312
+ onSelectedDate: onSelectedDate,
313
+ locale: locale,
314
+ clearValue: this.clearValue,
315
+ disabled: disabled,
316
+ error: error,
317
+ toggleDayPicker: this.toggleDayPicker,
318
+ GA: GA,
319
+ recordValue: recordValue,
320
+ dayPickerOpen: dayPickerOpen
321
+ }), dayPickerOpen && _react.default.createElement(DayRangeContainer, {
303
322
  panelAbsoluteOnDesktop: panelAbsoluteOnDesktop,
304
323
  style: otherStyles,
305
324
  width: width,
@@ -360,7 +379,9 @@ DayPicker.propTypes = {
360
379
  legacyInputStyle: _propTypes.bool,
361
380
  closeButton: _propTypes.bool,
362
381
  panelAbsoluteOnDesktop: _propTypes.bool,
363
- isDateSelect: _propTypes.bool
382
+ isDateSelect: _propTypes.bool,
383
+ typeable: _propTypes.bool,
384
+ locale: _propTypes.string
364
385
  };
365
386
  DayPicker.defaultProps = {
366
387
  recordValue: false,
@@ -385,7 +406,9 @@ DayPicker.defaultProps = {
385
406
  legacyInputStyle: false,
386
407
  closeButton: false,
387
408
  panelAbsoluteOnDesktop: true,
388
- isDateSelect: false
409
+ isDateSelect: false,
410
+ typeable: false,
411
+ locale: 'GB'
389
412
  };
390
413
 
391
414
  var _default = (0, _reactOnclickoutside.default)(DayPicker);
@@ -207,7 +207,7 @@ class DayPickerPanel extends _react.default.Component {
207
207
  to
208
208
  }
209
209
  } = this.state;
210
- const actionEvent = selectedDay ? 'Set' : 'Apply';
210
+ const actionEvent = selectedDay ? 'Set via Date Picker' : 'Apply';
211
211
 
212
212
  if (category) {
213
213
  const label = dateRange ? `${(0, _dateFns.format)(from, friendlyShort)} - ${(0, _dateFns.format)(to || from, friendlyShort)} ${(0, _dateFns.format)(to || from, 'yyyy')}` : `${(0, _dateFns.format)(from, friendlyShort)} ${(0, _dateFns.format)(from, 'yyyy')}`;
@@ -16,7 +16,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
16
16
  const UsersIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
17
17
  viewBox: "0 0 32 32"
18
18
  }, props), _react.default.createElement("path", {
19
- d: "M28.465 13.771A8.125 8.125 0 1 0 15.859 3.626 9.963 9.963 0 0 0 11.25 2.5c-5.522 0-10 4.478-10 10 0 2.7 1.071 5.148 2.81 6.946A10.945 10.945 0 0 0 0 27.963v1.844c0 1.206.986 2.192 2.192 2.192h18.115a2.198 2.198 0 0 0 2.192-2.192v-1.844c0-1.444-.284-2.824-.796-4.089h8.796c.825 0 1.5-.675 1.5-1.5v-2.25c0-2.671-1.416-5.025-3.535-6.354zM22.625 3c2.826 0 5.125 2.299 5.125 5.125s-2.299 5.125-5.125 5.125c-.483 0-.949-.069-1.391-.194a9.966 9.966 0 0 0-2.945-7.657A5.125 5.125 0 0 1 22.625 3zM11.25 5.5c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7zM19.5 29H3v-1.036a7.96 7.96 0 0 1 3.56-6.631 9.96 9.96 0 0 0 4.69 1.168 9.958 9.958 0 0 0 4.685-1.165 8.16 8.16 0 0 1 1.224 1.006 7.903 7.903 0 0 1 2.341 5.621v1.038zm9.5-8.125h-9.117c-.44-.516-.925-.991-1.451-1.419.95-.981 1.7-2.156 2.188-3.459a8.12 8.12 0 0 0 4.86-.264 4.493 4.493 0 0 1 2.199 1.215 4.465 4.465 0 0 1 1.325 3.175v.751h-.003z"
19
+ d: "M6.421 16.496C6.15 15.635 6 14.773 6 14c0-3.308 2.692-6 6-6 1.069 0 2.073.283 2.944.775A6 6 0 0120 6c3.308 0 6 2.692 6 6 0 .773-.15 1.635-.421 2.496C28.166 15.525 30 18.051 30 21c0 1.654-1.346 3-3 3h-5.172A3.004 3.004 0 0119 26H5c-1.654 0-3-1.346-3-3 0-2.949 1.834-5.475 4.421-6.504zM8 14c0 2.479 2.069 6 4 6s4-3.521 4-6c0-2.206-1.794-4-4-4s-4 1.794-4 4zm12-6a4 4 0 00-3.49 2.05A5.974 5.974 0 0118 14c0 .773-.15 1.635-.421 2.496a7 7 0 012.315 1.506L20 18c1.931 0 4-3.521 4-6 0-2.206-1.794-4-4-4zm8 13a5.006 5.006 0 00-3.194-4.66 9.92 9.92 0 01-.43.737c-.903 1.402-1.995 2.331-3.156 2.717A6.93 6.93 0 0121.927 22H27c.551 0 1-.449 1-1zM5 24h14c.551 0 1-.449 1-1a5.006 5.006 0 00-3.194-4.66 9.92 9.92 0 01-.43.737C15.162 20.962 13.608 22 12 22c-1.608 0-3.162-1.038-4.376-2.923a10.13 10.13 0 01-.43-.737A5.006 5.006 0 004 23c0 .551.449 1 1 1z"
20
20
  }));
21
21
 
22
22
  UsersIcon.propTypes = {
@@ -14,27 +14,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
14
14
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
15
 
16
16
  const VisibilityIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
17
- viewBox: "0 0 256 256"
17
+ viewBox: "0 0 32 32"
18
18
  }, props), _react.default.createElement("path", {
19
- d: "M254.89 122.97c-.36-.78-9.08-19.38-29.04-37.79C207.48 68.22 175.58 48 128 48S48.52 68.22 30.14 85.18c-19.95 18.41-28.67 37-29.04 37.79a12.026 12.026 0 0 0 0 10.06c.36.78 9.08 19.38 29.04 37.79C48.52 187.78 80.42 208 128 208s79.48-20.22 97.86-37.18c19.95-18.41 28.67-37 29.04-37.79 1.47-3.19 1.47-6.87-.01-10.06zM184 128c0 30.88-25.12 56-56 56s-56-25.12-56-56 25.12-56 56-56 56 25.12 56 56zm-158.3 0c3.54-5.84 10.5-15.91 21.44-25.84 2.49-2.26 5.05-4.39 7.68-6.4C50.44 105.63 48 116.53 48 128s2.44 22.37 6.81 32.24c-2.62-2.01-5.18-4.14-7.68-6.4-10.93-9.93-17.9-20-21.43-25.84zm183.17 25.84a118.32 118.32 0 0 1-7.68 6.4c4.36-9.87 6.81-20.77 6.81-32.24s-2.44-22.37-6.81-32.24c2.62 2.01 5.18 4.14 7.68 6.4 10.94 9.93 17.91 20.01 21.44 25.83-3.54 5.85-10.51 15.92-21.44 25.85z",
20
- fill: props.color
21
- }), _react.default.createElement("circle", {
22
- cx: "128",
23
- cy: "128",
24
- r: "30",
25
- fill: props.color
26
- }), _react.default.createElement("path", {
27
- d: "M252.49 3.51c-4.69-4.69-12.29-4.69-16.97 0l-232 232c-4.69 4.69-4.69 12.28 0 16.97 4.69 4.69 12.29 4.69 16.97 0l232-232c4.68-4.68 4.68-12.28 0-16.97z",
28
- fill: props.color
19
+ d: "M29.769 15.36C29.519 15.06 23.562 8 16 8c-1.938 0-3.77.464-5.427 1.159L5.707 4.293a1 1 0 00-1.414 1.414l4.38 4.38c-3.774 2.108-6.282 5.08-6.442 5.274a1 1 0 000 1.278C2.481 16.94 8.438 24 16 24c1.938 0 3.77-.463 5.427-1.158l4.866 4.866a1 1 0 001.414-1.414l-4.38-4.38c3.774-2.108 6.282-5.081 6.442-5.274a1 1 0 000-1.278zM16 22c-5.372 0-10.05-4.336-11.647-6 .973-1.014 3.088-3.015 5.805-4.428l.25.25a6 6 0 007.77 7.77l1.699 1.699C18.653 21.727 17.349 22 16 22zm5.842-1.572l-9.719-9.719C13.347 10.274 14.651 10 16 10c5.372 0 10.049 4.335 11.647 6-.973 1.014-3.088 3.015-5.805 4.428z"
29
20
  }));
30
21
 
31
- VisibilityIcon.displayName = 'VisibilityIcon';
32
22
  VisibilityIcon.propTypes = {
33
- color: _propTypes.string,
34
23
  size: _propTypes.number
35
24
  };
36
25
  VisibilityIcon.defaultProps = {
37
- color: '#000',
38
26
  size: 40
39
27
  };
40
28
  var _default = VisibilityIcon;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.default = void 0;
5
+
6
+ var _react = _interopRequireDefault(require("react"));
7
+
8
+ var _propTypes = require("prop-types");
9
+
10
+ var _reactIconBase = _interopRequireDefault(require("react-icon-base"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
+
16
+ const VisibleIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
17
+ viewBox: "0 0 32 32"
18
+ }, props), _react.default.createElement("path", {
19
+ d: "M29.769 15.36C29.519 15.06 23.562 8 16 8S2.481 15.06 2.231 15.36a1 1 0 000 1.28C2.481 16.94 8.438 24 16 24s13.519-7.06 13.769-7.36a1 1 0 000-1.28zM16 22c-5.372 0-10.05-4.336-11.647-6 1.028-1.07 3.33-3.243 6.269-4.66a6 6 0 1010.757 0c2.939 1.416 5.24 3.59 6.268 4.66-1.598 1.665-6.275 6-11.647 6z"
20
+ }));
21
+
22
+ VisibleIcon.propTypes = {
23
+ size: _propTypes.number
24
+ };
25
+ VisibleIcon.defaultProps = {
26
+ size: 40
27
+ };
28
+ var _default = VisibleIcon;
29
+ exports.default = _default;
@@ -11,6 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
11
11
 
12
12
  const ModalBody = _styledComponents.default.div`
13
13
  padding: ${props => props.noPadding ? '0px' : _spacing.default.s2};
14
+ overflow-y: auto;
14
15
  `;
15
16
  ModalBody.displayName = 'ModalBody';
16
17
  /* @component */
@@ -55,6 +55,8 @@ const Background = _styledComponents.default.div`
55
55
  align-items: center;
56
56
  `;
57
57
  const ModalContainer = _styledComponents.default.div`
58
+ display: flex;
59
+ flex-direction: column;
58
60
  background: white;
59
61
  position: relative;
60
62
  width: ${props => props.width};
@@ -64,7 +66,6 @@ const ModalContainer = _styledComponents.default.div`
64
66
  border-radius: ${_vars.default.borderRadius};
65
67
  max-height: 90%;
66
68
  overflow-x: hidden;
67
- overflow-y: auto;
68
69
  ${props => props.version === '1' && '-webkit-overflow-scrolling: touch'};
69
70
 
70
71
  ${props => props.allowOverflow && (0, _styledComponents.css)`
@@ -133,6 +133,7 @@ const TimePicker = _ref => {
133
133
  const valueAsString = (0, _durationToTimeString.default)(value);
134
134
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(MobileTimePicker, {
135
135
  type: "time",
136
+ "data-testid": "mobileTimePicker",
136
137
  onChange: e => {
137
138
  const timeString = e.target.value;
138
139
 
@@ -2,6 +2,8 @@
2
2
 
3
3
  var _enzyme = require("enzyme");
4
4
 
5
+ var _react = require("@testing-library/react");
6
+
5
7
  var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
6
8
 
7
9
  var _reactGa = _interopRequireDefault(require("react-ga"));
@@ -53,4 +55,7 @@ afterEach(() => {
53
55
  });
54
56
  (0, _enzyme.configure)({
55
57
  adapter: new _enzymeAdapterReact.default()
58
+ });
59
+ (0, _react.configure)({
60
+ defaultHidden: true
56
61
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bright-components",
3
- "version": "10.1.1",
3
+ "version": "10.2.2",
4
4
  "private": false,
5
5
  "main": "./dist",
6
6
  "repository": {
@@ -73,10 +73,11 @@
73
73
  "@babel/preset-env": "^7.16.5",
74
74
  "@babel/preset-react": "^7.7.4",
75
75
  "@svgr/webpack": "4.3.2",
76
+ "@testing-library/dom": "^8.11.2",
76
77
  "@testing-library/jest-dom": "^4.1.0",
77
78
  "@testing-library/react": "^9.1.4",
78
79
  "@testing-library/react-hooks": "^2.0.1",
79
- "@testing-library/user-event": "^7.0.1",
80
+ "@testing-library/user-event": "^12.8.3",
80
81
  "babel-eslint": "10.0.2",
81
82
  "babel-jest": "^24.9.0",
82
83
  "babel-loader": "8.0.6",
@@ -0,0 +1,208 @@
1
+ import React, { useState } from 'react';
2
+ import { format, isValid, parse, getYear } from 'date-fns';
3
+ import styled from 'styled-components';
4
+ import Input from 'components/Input';
5
+ import ErrorMessage from 'components/ErrorMessage';
6
+ import { string, func, bool, shape, instanceOf, number } from 'prop-types';
7
+ import colors from 'constants/colors';
8
+ import spacing from 'constants/spacing';
9
+ import CalendarIcon from 'components/Icons/Calendar/';
10
+ import { event } from 'react-ga';
11
+
12
+ const HiddenBox = styled(Input.withComponent('div'))`
13
+ display: flex;
14
+ align-items: center;
15
+ ${props =>
16
+ props.error &&
17
+ `
18
+ margin-bottom: 0px !important;
19
+ border-bottom-left-radius: 0px;
20
+ border-bottom-right-radius: 0px;
21
+ border-color: ${colors.borderError} !important;
22
+ `};
23
+ input {
24
+ height: 2.5rem !important;
25
+ min-height: 2.5rem !important;
26
+ border: 0 !important;
27
+ margin: 0 !important;
28
+ padding: 0 !important;
29
+ box-shadow: none !important;
30
+ }
31
+ `;
32
+ HiddenBox.displayName = 'HiddenBox';
33
+
34
+ const OpenCalendarIcon = styled(CalendarIcon)`
35
+ cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
36
+ margin-left: ${spacing.s1};
37
+ color: ${colors.primary};
38
+ `;
39
+ OpenCalendarIcon.displayName = 'OpenCalendarIcon';
40
+
41
+ const formats = {
42
+ CA: { placeholderDate: 'YY/MM/DD', dateFormat: 'yy/MM/dd' },
43
+ default: { placeholderDate: 'DD/MM/YY', dateFormat: 'dd/MM/yy' }
44
+ };
45
+
46
+ const makeInnerDate = (date, dateFormat) => {
47
+ if (date.from) {
48
+ return format(date.from, dateFormat);
49
+ }
50
+ return '';
51
+ };
52
+
53
+ const NewDisplay = ({
54
+ placeholder,
55
+ datesToDisplay,
56
+ range,
57
+ allowClear,
58
+ yearRange,
59
+ onSelectedDate,
60
+ locale,
61
+ clearValue,
62
+ disabled,
63
+ error,
64
+ toggleDayPicker,
65
+ GA: { category, actionId },
66
+ recordValue,
67
+ dayPickerOpen
68
+ }) => {
69
+ const { placeholderDate, dateFormat } = formats[locale] || formats.default;
70
+
71
+ const [hasFocus, setHasFocus] = useState(false);
72
+ const [hasError, setHasError] = useState(false);
73
+ const [innerDate, setInnerDate] = useState(
74
+ makeInnerDate(range, dateFormat)
75
+ );
76
+
77
+ return (
78
+ <>
79
+ <HiddenBox error={error} data-testid="input-selector">
80
+ <Input
81
+ data-testid="new input"
82
+ placeholder={hasFocus ? placeholderDate : placeholder}
83
+ value={hasFocus ? innerDate : datesToDisplay}
84
+ fullWidth
85
+ disabled={disabled}
86
+ onFocus={() => {
87
+ setInnerDate(makeInnerDate(range, dateFormat));
88
+ setHasFocus(true);
89
+ setHasError(false);
90
+ }}
91
+ onBlur={({ target: { value } }) => {
92
+ setHasFocus(false);
93
+ if (dayPickerOpen) toggleDayPicker();
94
+ if (!value && (allowClear || !range.from)) {
95
+ return range.from ? clearValue() : null;
96
+ }
97
+
98
+ const newDate = {
99
+ from: parse(value, dateFormat, new Date()),
100
+ to: parse(value, dateFormat, new Date())
101
+ };
102
+
103
+ const fromYear = getYear(newDate.from);
104
+ const toYear = getYear(newDate.to);
105
+
106
+ if (
107
+ !isValid(newDate.from) ||
108
+ !isValid(newDate.to) ||
109
+ fromYear < yearRange.min ||
110
+ toYear > yearRange.max
111
+ ) {
112
+ setHasError(
113
+ !(isValid(newDate.from) && isValid(newDate.to))
114
+ ? 'invalid'
115
+ : 'range'
116
+ );
117
+
118
+ return range.from
119
+ ? onSelectedDate(allowClear ? '' : range)
120
+ : null;
121
+ }
122
+
123
+ if (category) {
124
+ const label = `${format(
125
+ newDate.from,
126
+ 'EEE dd MMM'
127
+ )} ${format(newDate.from, 'yyyy')}`;
128
+
129
+ event({
130
+ category,
131
+ action: `${actionId} - Set via Typing`,
132
+ ...(recordValue ? { label } : {})
133
+ });
134
+ }
135
+
136
+ return onSelectedDate(newDate);
137
+ }}
138
+ onChange={({ target: { value } }) => {
139
+ setInnerDate(
140
+ value
141
+ .replace(/.*\/$/g, text =>
142
+ value.length < innerDate.length
143
+ ? value.slice(0, -1)
144
+ : text
145
+ )
146
+ .replace(/(\d\d)(\d)/g, '$1/$2')
147
+ .replace(/^(\d\/)$/g, '0$1')
148
+ .replace(/\d\d$/g, text =>
149
+ value.length > innerDate.length &&
150
+ value.length < 7
151
+ ? `${text}/`
152
+ : text
153
+ )
154
+ .replace(/^(\d\d\/)(\d\/)$/g, '$10$2')
155
+ .replace(/[^\d/]/g, '')
156
+ .replace(/^(.{0,8})(.*)$/g, '$1')
157
+ .replace(/\/\/$/g, '/')
158
+ );
159
+ }}
160
+ />
161
+ <OpenCalendarIcon
162
+ data-testid="calendarIcon"
163
+ size={22}
164
+ disabled={disabled}
165
+ onClick={() => {
166
+ setHasError(false);
167
+ toggleDayPicker();
168
+ }}
169
+ />
170
+ </HiddenBox>
171
+ {hasError && (
172
+ <ErrorMessage showIcon={false}>
173
+ {hasError === 'invalid'
174
+ ? 'Date is invalid'
175
+ : `Year is outside of range. Must be between ${yearRange.min} - ${yearRange.max}`}
176
+ </ErrorMessage>
177
+ )}
178
+ </>
179
+ );
180
+ };
181
+
182
+ NewDisplay.propTypes = {
183
+ placeholder: string.isRequired,
184
+ datesToDisplay: string.isRequired,
185
+ range: shape({
186
+ from: instanceOf(Date),
187
+ to: instanceOf(Date)
188
+ }).isRequired,
189
+ allowClear: bool.isRequired,
190
+ yearRange: shape({
191
+ min: number,
192
+ max: number
193
+ }).isRequired,
194
+ onSelectedDate: func.isRequired,
195
+ locale: string.isRequired,
196
+ clearValue: func.isRequired,
197
+ disabled: bool.isRequired,
198
+ error: bool.isRequired,
199
+ toggleDayPicker: func.isRequired,
200
+ GA: shape({
201
+ category: string,
202
+ actionId: string
203
+ }).isRequired,
204
+ recordValue: bool.isRequired,
205
+ dayPickerOpen: bool.isRequired
206
+ };
207
+
208
+ export default NewDisplay;