@elliemae/ds-time-picker 1.60.0 → 2.0.0-alpha.12

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.
Files changed (54) hide show
  1. package/cjs/DSTimePicker.js +28 -71
  2. package/cjs/DSTimePickerMenu.js +17 -27
  3. package/cjs/PickerPanel.js +323 -340
  4. package/cjs/TimePickerDropdown.js +19 -29
  5. package/cjs/TimePickerImpl.js +89 -124
  6. package/cjs/TimePickerMenu.js +257 -295
  7. package/cjs/index.js +1 -30
  8. package/cjs/moveElementOnScroll.js +19 -28
  9. package/cjs/utils.js +14 -19
  10. package/esm/DSTimePicker.js +27 -69
  11. package/esm/DSTimePickerMenu.js +14 -25
  12. package/esm/PickerPanel.js +321 -330
  13. package/esm/TimePickerDropdown.js +18 -27
  14. package/esm/TimePickerImpl.js +84 -117
  15. package/esm/TimePickerMenu.js +254 -285
  16. package/esm/index.js +0 -29
  17. package/esm/moveElementOnScroll.js +18 -27
  18. package/esm/utils.js +14 -19
  19. package/package.json +66 -17
  20. package/types/DSTimePicker.d.ts +181 -0
  21. package/types/DSTimePickerMenu.d.ts +4 -0
  22. package/types/PickerPanel.d.ts +24 -0
  23. package/types/TimePickerDropdown.d.ts +25 -0
  24. package/types/TimePickerImpl.d.ts +35 -0
  25. package/types/TimePickerMenu.d.ts +19 -0
  26. package/types/index.d.ts +5 -0
  27. package/types/moveElementOnScroll.d.ts +13 -0
  28. package/types/utils.d.ts +8 -0
  29. package/DSTimePicker/package.json +0 -10
  30. package/DSTimePickerMenu/package.json +0 -10
  31. package/PickerPanel/package.json +0 -10
  32. package/TimePickerDropdown/package.json +0 -10
  33. package/TimePickerImpl/package.json +0 -10
  34. package/TimePickerMenu/package.json +0 -10
  35. package/cjs/DSTimePicker.js.map +0 -1
  36. package/cjs/DSTimePickerMenu.js.map +0 -1
  37. package/cjs/PickerPanel.js.map +0 -1
  38. package/cjs/TimePickerDropdown.js.map +0 -1
  39. package/cjs/TimePickerImpl.js.map +0 -1
  40. package/cjs/TimePickerMenu.js.map +0 -1
  41. package/cjs/index.js.map +0 -1
  42. package/cjs/moveElementOnScroll.js.map +0 -1
  43. package/cjs/utils.js.map +0 -1
  44. package/esm/DSTimePicker.js.map +0 -1
  45. package/esm/DSTimePickerMenu.js.map +0 -1
  46. package/esm/PickerPanel.js.map +0 -1
  47. package/esm/TimePickerDropdown.js.map +0 -1
  48. package/esm/TimePickerImpl.js.map +0 -1
  49. package/esm/TimePickerMenu.js.map +0 -1
  50. package/esm/index.js.map +0 -1
  51. package/esm/moveElementOnScroll.js.map +0 -1
  52. package/esm/utils.js.map +0 -1
  53. package/moveElementOnScroll/package.json +0 -10
  54. package/utils/package.json +0 -10
@@ -3,348 +3,310 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
7
- var _createClass = require('@babel/runtime/helpers/createClass');
8
- var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
9
- var _inherits = require('@babel/runtime/helpers/inherits');
10
- var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
11
- var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
6
+ var _jsx = require('@babel/runtime/helpers/jsx');
7
+ require('core-js/modules/esnext.async-iterator.map.js');
8
+ require('core-js/modules/esnext.iterator.map.js');
9
+ require('core-js/modules/esnext.async-iterator.filter.js');
10
+ require('core-js/modules/esnext.iterator.constructor.js');
11
+ require('core-js/modules/esnext.iterator.filter.js');
12
+ require('core-js/modules/esnext.async-iterator.for-each.js');
13
+ require('core-js/modules/esnext.iterator.for-each.js');
12
14
  var React = require('react');
13
- var PropTypes = require('prop-types');
14
15
  var dsClassnames = require('@elliemae/ds-classnames');
15
16
  var moment = require('moment');
16
17
  var dsUtilities = require('@elliemae/ds-utilities');
17
18
  var utils = require('./utils.js');
18
19
  var PickerPanel = require('./PickerPanel.js');
19
- require('@babel/runtime/helpers/extends');
20
- require('@babel/runtime/helpers/slicedToArray');
21
- require('@babel/runtime/helpers/toArray');
22
- require('lodash');
23
- require('memoize-one');
24
- require('@elliemae/ds-icons');
25
- require('@elliemae/ds-button');
26
- require('./moveElementOnScroll.js');
27
20
 
28
21
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
29
22
 
30
23
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
31
- var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
32
- var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
33
- var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
34
- var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
35
- var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
36
- var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
37
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
38
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
24
+ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
39
25
  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
40
26
 
41
27
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
42
28
 
43
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
29
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
30
+ const blockName = 'time-picker-menu';
31
+ const TimePickerContainer = dsClassnames.aggregatedClasses('div')(blockName);
32
+ const TimePickerHeader = dsClassnames.aggregatedClasses('div')(blockName, 'header');
33
+ const TimePickerPanelContainer = dsClassnames.aggregatedClasses('div')(blockName, 'panel-container');
34
+
35
+ const generateOption = format => option => ({
36
+ value: option,
37
+ label: typeof format === 'function' ? format(option) : option
38
+ });
39
+
40
+ class TimePickerMenu extends React.Component {
41
+ constructor(props) {
42
+ super(props);
43
+
44
+ this.renderHeader = () => {
45
+ const {
46
+ time
47
+ } = this.state;
48
+ return /*#__PURE__*/_jsx__default["default"](TimePickerHeader, {}, void 0, time.format('hh:mma'));
49
+ };
44
50
 
45
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
51
+ this.state = {
52
+ time: moment__default["default"](props.time || '', props.format) || moment__default["default"]()
53
+ };
54
+ this.handleHoursChange = this.handleHoursChange.bind(this);
55
+ this.handleMinuteChange = this.handleMinuteChange.bind(this);
56
+ this.handleSecondsChange = this.handleSecondsChange.bind(this);
57
+ this.handleAMPMChange = this.handleAMPMChange.bind(this);
58
+ }
46
59
 
47
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
48
- var blockName = 'time-picker-menu';
49
- var TimePickerContainer = dsClassnames.aggregatedClasses('div')(blockName);
50
- var TimePickerHeader = dsClassnames.aggregatedClasses('div')(blockName, 'header');
51
- var TimePickerPanelContainer = dsClassnames.aggregatedClasses('div')(blockName, 'panel-container');
60
+ static getDerivedStateFromProps(props, state) {
61
+ if (props.time) {
62
+ return _objectSpread(_objectSpread({}, state), {}, {
63
+ time: moment__default["default"](props.time)
64
+ });
65
+ }
52
66
 
53
- var generateOption = function generateOption(format) {
54
- return function (option) {
55
- return {
56
- value: option,
57
- label: typeof format === 'function' ? format(option) : option
58
- };
59
- };
60
- };
67
+ return _objectSpread(_objectSpread({}, state), {}, {
68
+ time: undefined
69
+ });
70
+ }
61
71
 
62
- var TimePickerMenu = /*#__PURE__*/function (_Component) {
63
- _inherits__default['default'](TimePickerMenu, _Component);
72
+ componentDidMount() {
73
+ const {
74
+ time
75
+ } = this.state;
76
+ this.setState({
77
+ time
78
+ });
79
+ }
64
80
 
65
- var _super = _createSuper(TimePickerMenu);
81
+ handleMinuteChange(value) {
82
+ const {
83
+ time
84
+ } = this.state;
85
+ this.updateTime(time.minute(value));
86
+ }
66
87
 
67
- function TimePickerMenu(props) {
68
- var _this;
88
+ handleHoursChange(value) {
89
+ const {
90
+ time
91
+ } = this.state;
92
+ const {
93
+ use12Hours
94
+ } = this.props;
95
+ let nextHour = value;
96
+
97
+ if (use12Hours) {
98
+ if (!utils.isAM(time)) {
99
+ nextHour = value % 12 + 12;
100
+ }
101
+ }
69
102
 
70
- _classCallCheck__default['default'](this, TimePickerMenu);
103
+ this.updateTime(time.hour(nextHour));
104
+ }
71
105
 
72
- _this = _super.call(this, props);
106
+ handleSecondsChange(value) {
107
+ const {
108
+ time
109
+ } = this.state;
110
+ this.updateTime(time.second(value));
111
+ }
73
112
 
74
- _this.renderHeader = function () {
75
- var time = _this.state.time;
76
- return /*#__PURE__*/React__default['default'].createElement(TimePickerHeader, null, time.format('hh:mma'));
77
- };
113
+ handleAMPMChange(value) {
114
+ const {
115
+ time
116
+ } = this.state;
117
+ const hour = time.hour();
118
+ const nextHour = value.toLowerCase() === 'am' ? hour % 12 : hour % 12 + 12;
119
+ this.updateTime(time.hour(nextHour));
120
+ }
78
121
 
79
- _this.state = {
80
- time: moment__default['default'](props.time || '', props.format) || moment__default['default']()
81
- };
82
- _this.handleHoursChange = _this.handleHoursChange.bind(_assertThisInitialized__default['default'](_this));
83
- _this.handleMinuteChange = _this.handleMinuteChange.bind(_assertThisInitialized__default['default'](_this));
84
- _this.handleSecondsChange = _this.handleSecondsChange.bind(_assertThisInitialized__default['default'](_this));
85
- _this.handleAMPMChange = _this.handleAMPMChange.bind(_assertThisInitialized__default['default'](_this));
86
- return _this;
122
+ updateTime(time) {
123
+ const {
124
+ onTimeChange
125
+ } = this.props;
126
+ onTimeChange(time);
127
+ this.setState({
128
+ time
129
+ });
87
130
  }
88
131
 
89
- _createClass__default['default'](TimePickerMenu, [{
90
- key: "componentDidMount",
91
- value: function componentDidMount() {
92
- var time = this.state.time;
93
- this.setState({
94
- time: time
95
- });
96
- }
97
- }, {
98
- key: "handleMinuteChange",
99
- value: function handleMinuteChange(value) {
100
- var time = this.state.time;
101
- this.updateTime(time.minute(value));
102
- }
103
- }, {
104
- key: "handleHoursChange",
105
- value: function handleHoursChange(value) {
106
- var time = this.state.time;
107
- var use12Hours = this.props.use12Hours;
108
- var nextHour = value;
109
-
110
- if (use12Hours) {
111
- if (!utils.isAM(time)) {
112
- nextHour = value % 12 + 12;
132
+ renderHoursPanel() {
133
+ const {
134
+ time
135
+ } = this.state;
136
+ const {
137
+ showHours,
138
+ use12Hours,
139
+ format,
140
+ hasHeader,
141
+ disabledTimes
142
+ } = this.props;
143
+ if (!showHours) return null;
144
+ const hour = time.hour(); // in 24 format
145
+
146
+ let selectedHour = use12Hours ? hour % 12 || 12 : hour;
147
+
148
+ if (disabledTimes) {
149
+ const {
150
+ from,
151
+ to
152
+ } = disabledTimes;
153
+
154
+ if (hour > from.hour && hour < to.hour) {
155
+ if (to.hour < 24) {
156
+ const toFormatted = to.hour % 12 || 12;
157
+ if (selectedHour !== toFormatted) this.handleHoursChange(toFormatted);
158
+ selectedHour = toFormatted;
159
+ } else if (from) {
160
+ selectedHour = (from.hour - 1) % 12 || 12;
113
161
  }
114
162
  }
115
-
116
- this.updateTime(time.hour(nextHour));
117
- }
118
- }, {
119
- key: "handleSecondsChange",
120
- value: function handleSecondsChange(value) {
121
- var time = this.state.time;
122
- this.updateTime(time.second(value));
123
163
  }
124
- }, {
125
- key: "handleAMPMChange",
126
- value: function handleAMPMChange(value) {
127
- var time = this.state.time;
128
- var hour = time.hour();
129
- var nextHour = value.toLowerCase() === 'am' ? hour % 12 : hour % 12 + 12;
130
- this.updateTime(time.hour(nextHour));
131
- }
132
- }, {
133
- key: "updateTime",
134
- value: function updateTime(time) {
135
- var onTimeChange = this.props.onTimeChange;
136
- onTimeChange(time);
137
- this.setState({
138
- time: time
139
- });
140
- }
141
- }, {
142
- key: "renderHoursPanel",
143
- value: function renderHoursPanel() {
144
- var time = this.state.time;
145
- var _this$props = this.props,
146
- showHours = _this$props.showHours,
147
- use12Hours = _this$props.use12Hours,
148
- format = _this$props.format,
149
- hasHeader = _this$props.hasHeader,
150
- disabledTimes = _this$props.disabledTimes;
151
- if (!showHours) return null;
152
- var hour = time.hour(); // in 24 format
153
-
154
- var selectedHour = use12Hours ? hour % 12 || 12 : hour;
155
-
156
- if (disabledTimes) {
157
- var from = disabledTimes.from,
158
- to = disabledTimes.to;
159
-
160
- if (hour > from.hour && hour < to.hour) {
161
- if (to.hour < 24) {
162
- var toFormatted = to.hour % 12 || 12;
163
- if (selectedHour !== toFormatted) this.handleHoursChange(toFormatted);
164
- selectedHour = toFormatted;
165
- } else if (from) {
166
- selectedHour = (from.hour - 1) % 12 || 12;
167
- }
168
- }
169
- }
170
164
 
171
- var meridiem = hour >= 12 ? 'PM' : 'AM';
172
- var withLeadingZeros = format.indexOf('hh') > -1;
173
- var rangeHours = use12Hours ? dsUtilities.range(1, 13) : dsUtilities.range(24);
174
- var hoursOptions = rangeHours.map(generateOption(withLeadingZeros && dsUtilities.addLeadingZeros(2)));
175
- return /*#__PURE__*/React__default['default'].createElement(PickerPanel, {
176
- type: "hour",
177
- time: time,
178
- meridiem: meridiem,
179
- hasHeader: hasHeader,
180
- header: "H",
181
- onChange: this.handleHoursChange,
182
- options: hoursOptions,
183
- selected: selectedHour,
184
- disabledTimes: disabledTimes
185
- });
186
- }
187
- }, {
188
- key: "renderMinutesPanel",
189
- value: function renderMinutesPanel() {
190
- var time = this.state.time;
191
- var _this$props2 = this.props,
192
- showMinutes = _this$props2.showMinutes,
193
- format = _this$props2.format,
194
- hasHeader = _this$props2.hasHeader,
195
- disabledTimes = _this$props2.disabledTimes,
196
- minutesInterval = _this$props2.minutesInterval;
197
- if (!showMinutes) return null;
198
- var withLeadingZeros = format.indexOf('mm') > -1;
199
- var rangeMinutes = dsUtilities.range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && dsUtilities.addLeadingZeros(2)));
200
- var selectedMinute = time.minute();
201
- var selectedHour = time.hour();
202
-
203
- if (disabledTimes) {
204
- var from = disabledTimes.from,
205
- to = disabledTimes.to;
206
-
207
- if (selectedHour <= to.hour && selectedHour > from.hour) {
208
- if (to) {
209
- if (selectedMinute < to.min) this.handleMinuteChange(to.min);
210
- } else if (from) {
211
- if (selectedMinute > from.min) this.handleMinuteChange(from.min - 1);
212
- }
213
- } else {
214
- selectedMinute = time.minute();
165
+ const meridiem = hour >= 12 ? 'PM' : 'AM';
166
+ const withLeadingZeros = format.indexOf('hh') > -1;
167
+ const rangeHours = use12Hours ? dsUtilities.range(1, 13) : dsUtilities.range(24);
168
+ const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && dsUtilities.addLeadingZeros(2)));
169
+ return /*#__PURE__*/_jsx__default["default"](PickerPanel, {
170
+ type: "hour",
171
+ time: time,
172
+ meridiem: meridiem,
173
+ hasHeader: hasHeader,
174
+ header: "H",
175
+ onChange: this.handleHoursChange,
176
+ options: hoursOptions,
177
+ selected: selectedHour,
178
+ disabledTimes: disabledTimes
179
+ });
180
+ }
181
+
182
+ renderMinutesPanel() {
183
+ const {
184
+ time
185
+ } = this.state;
186
+ const {
187
+ showMinutes,
188
+ format,
189
+ hasHeader,
190
+ disabledTimes,
191
+ minutesInterval
192
+ } = this.props;
193
+ if (!showMinutes) return null;
194
+ const withLeadingZeros = format.indexOf('mm') > -1;
195
+ const rangeMinutes = dsUtilities.range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && dsUtilities.addLeadingZeros(2)));
196
+ let selectedMinute = time.minute();
197
+ const selectedHour = time.hour();
198
+
199
+ if (disabledTimes) {
200
+ const {
201
+ from,
202
+ to
203
+ } = disabledTimes;
204
+
205
+ if (selectedHour <= to.hour && selectedHour > from.hour) {
206
+ if (to) {
207
+ if (selectedMinute < to.min) this.handleMinuteChange(to.min);
208
+ } else if (from) {
209
+ if (selectedMinute > from.min) this.handleMinuteChange(from.min - 1);
215
210
  }
211
+ } else {
212
+ selectedMinute = time.minute();
216
213
  }
217
-
218
- return /*#__PURE__*/React__default['default'].createElement(PickerPanel, {
219
- type: "minutes",
220
- time: time,
221
- hasHeader: hasHeader,
222
- header: "M",
223
- onChange: this.handleMinuteChange,
224
- options: rangeMinutes,
225
- selected: selectedMinute,
226
- disabledTimes: disabledTimes
227
- });
228
214
  }
229
- }, {
230
- key: "renderSecondsPanel",
231
- value: function renderSecondsPanel() {
232
- var time = this.state.time;
233
- var _this$props3 = this.props,
234
- showSeconds = _this$props3.showSeconds,
235
- format = _this$props3.format,
236
- hasHeader = _this$props3.hasHeader;
237
- if (!showSeconds) return null;
238
- var withLeadingZeros = format.indexOf('ss') > -1;
239
- var rangeSeconds = dsUtilities.range(60).map(generateOption(withLeadingZeros && dsUtilities.addLeadingZeros(2)));
240
- return /*#__PURE__*/React__default['default'].createElement(PickerPanel, {
241
- type: "seconds",
242
- hasHeader: hasHeader,
243
- header: "S",
244
- onChange: this.handleSecondsChange,
245
- options: rangeSeconds,
246
- selected: time.second()
247
- });
248
- }
249
- }, {
250
- key: "renderAMPMPanel",
251
- value: function renderAMPMPanel() {
252
- var time = this.state.time;
253
- var _this$props4 = this.props,
254
- use12Hours = _this$props4.use12Hours,
255
- hasHeader = _this$props4.hasHeader,
256
- disabledTimes = _this$props4.disabledTimes;
257
- if (!use12Hours) return null;
258
- var meridiemSelected = !utils.isAM(time) ? 'pm' : 'am';
259
-
260
- if (disabledTimes && disabledTimes.to && meridiemSelected === 'am') {
261
- meridiemSelected = disabledTimes.to.hour >= 12 ? 'pm' : 'am';
262
-
263
- if (meridiemSelected === 'am' && time.hour() > 12) {
264
- this.handleAMPMChange('am');
265
- }
266
215
 
267
- if (meridiemSelected === 'pm' && time.hour() <= 12) {
268
- this.handleAMPMChange('pm');
269
- }
270
- }
216
+ return /*#__PURE__*/_jsx__default["default"](PickerPanel, {
217
+ type: "minutes",
218
+ time: time,
219
+ hasHeader: hasHeader,
220
+ header: "M",
221
+ onChange: this.handleMinuteChange,
222
+ options: rangeMinutes,
223
+ selected: selectedMinute,
224
+ disabledTimes: disabledTimes
225
+ });
226
+ }
271
227
 
272
- return /*#__PURE__*/React__default['default'].createElement(PickerPanel, {
273
- type: "meridiem",
274
- hasHeader: hasHeader,
275
- header: "",
276
- onChange: this.handleAMPMChange,
277
- options: [{
278
- value: 'am',
279
- label: 'am'
280
- }, {
281
- value: 'pm',
282
- label: 'pm'
283
- }],
284
- selected: meridiemSelected,
285
- disabledTimes: disabledTimes
286
- });
287
- }
288
- }, {
289
- key: "render",
290
- value: function render() {
291
- var hasHeaderDisplay = this.props.hasHeaderDisplay;
292
- return /*#__PURE__*/React__default['default'].createElement(TimePickerContainer, null, hasHeaderDisplay && this.renderHeader(), /*#__PURE__*/React__default['default'].createElement(TimePickerPanelContainer, null, this.renderHoursPanel(), this.renderMinutesPanel(), this.renderSecondsPanel(), this.renderAMPMPanel()));
293
- }
294
- }], [{
295
- key: "getDerivedStateFromProps",
296
- value: function getDerivedStateFromProps(props, state) {
297
- if (props.time) {
298
- return _objectSpread(_objectSpread({}, state), {}, {
299
- time: moment__default['default'](props.time)
300
- });
228
+ renderSecondsPanel() {
229
+ const {
230
+ time
231
+ } = this.state;
232
+ const {
233
+ showSeconds,
234
+ format,
235
+ hasHeader
236
+ } = this.props;
237
+ if (!showSeconds) return null;
238
+ const withLeadingZeros = format.indexOf('ss') > -1;
239
+ const rangeSeconds = dsUtilities.range(60).map(generateOption(withLeadingZeros && dsUtilities.addLeadingZeros(2)));
240
+ return /*#__PURE__*/_jsx__default["default"](PickerPanel, {
241
+ type: "seconds",
242
+ hasHeader: hasHeader,
243
+ header: "S",
244
+ onChange: this.handleSecondsChange,
245
+ options: rangeSeconds,
246
+ selected: time.second()
247
+ });
248
+ }
249
+
250
+ renderAMPMPanel() {
251
+ const {
252
+ time
253
+ } = this.state;
254
+ const {
255
+ use12Hours,
256
+ hasHeader,
257
+ disabledTimes
258
+ } = this.props;
259
+ if (!use12Hours) return null;
260
+ let meridiemSelected = !utils.isAM(time) ? 'pm' : 'am';
261
+
262
+ if (disabledTimes && disabledTimes.to && meridiemSelected === 'am') {
263
+ meridiemSelected = disabledTimes.to.hour >= 12 ? 'pm' : 'am';
264
+
265
+ if (meridiemSelected === 'am' && time.hour() > 12) {
266
+ this.handleAMPMChange('am');
301
267
  }
302
268
 
303
- return _objectSpread(_objectSpread({}, state), {}, {
304
- time: undefined
305
- });
269
+ if (meridiemSelected === 'pm' && time.hour() <= 12) {
270
+ this.handleAMPMChange('pm');
271
+ }
306
272
  }
307
- }]);
308
273
 
309
- return TimePickerMenu;
310
- }(React.Component);
274
+ return /*#__PURE__*/_jsx__default["default"](PickerPanel, {
275
+ type: "meridiem",
276
+ hasHeader: hasHeader,
277
+ header: "",
278
+ onChange: this.handleAMPMChange,
279
+ options: [{
280
+ value: 'am',
281
+ label: 'am'
282
+ }, {
283
+ value: 'pm',
284
+ label: 'pm'
285
+ }],
286
+ selected: meridiemSelected,
287
+ disabledTimes: disabledTimes
288
+ });
289
+ }
290
+
291
+ render() {
292
+ const {
293
+ hasHeaderDisplay
294
+ } = this.props;
295
+ return /*#__PURE__*/_jsx__default["default"](TimePickerContainer, {}, void 0, hasHeaderDisplay && this.renderHeader(), /*#__PURE__*/_jsx__default["default"](TimePickerPanelContainer, {}, void 0, this.renderHoursPanel(), this.renderMinutesPanel(), this.renderSecondsPanel(), this.renderAMPMPanel()));
296
+ }
297
+
298
+ }
311
299
 
312
300
  TimePickerMenu.defaultProps = {
313
- time: moment__default['default'](),
301
+ time: moment__default["default"](),
314
302
  hasHeader: false,
315
303
  use12Hours: true,
316
304
  showSeconds: true,
317
305
  showMinutes: true,
318
306
  showHours: true,
319
307
  disabledTimes: undefined,
320
- onTimeChange: function onTimeChange() {
321
- return null;
322
- }
323
- };
324
- TimePickerMenu.propTypes = {
325
- /** Time value */
326
- time: PropTypes__default['default'].instanceOf(moment__default['default']),
327
-
328
- /** If the menu has header or not */
329
- hasHeader: PropTypes__default['default'].bool,
330
-
331
- /** Whether to use the 12 hours format */
332
- use12Hours: PropTypes__default['default'].bool,
333
-
334
- /** Whether show 'seconds' or not */
335
- showSeconds: PropTypes__default['default'].bool,
336
-
337
- /** Whether show 'minutes' or not */
338
- showMinutes: PropTypes__default['default'].bool,
339
-
340
- /** Whether show 'hours' or not */
341
- showHours: PropTypes__default['default'].bool,
342
-
343
- /** Handler when time changes */
344
- onTimeChange: PropTypes__default['default'].func,
345
- disabledTimes: PropTypes__default['default'].object
308
+ onTimeChange: () => null
346
309
  };
347
310
 
348
311
  exports.TimePickerMenu = TimePickerMenu;
349
- exports['default'] = TimePickerMenu;
350
- //# sourceMappingURL=TimePickerMenu.js.map
312
+ exports["default"] = TimePickerMenu;
package/cjs/index.js CHANGED
@@ -6,41 +6,12 @@ var DSTimePicker = require('./DSTimePicker.js');
6
6
  var TimePickerMenu = require('./TimePickerMenu.js');
7
7
  var DSTimePickerMenu = require('./DSTimePickerMenu.js');
8
8
  var utils = require('./utils.js');
9
- require('react');
10
- require('react-desc');
11
- require('moment');
12
- require('./TimePickerImpl.js');
13
- require('@babel/runtime/helpers/objectWithoutProperties');
14
- require('@babel/runtime/helpers/extends');
15
- require('@babel/runtime/helpers/slicedToArray');
16
- require('prop-types');
17
- require('memoize-one');
18
- require('@elliemae/ds-utilities');
19
- require('@elliemae/ds-classnames');
20
- require('@elliemae/ds-form');
21
- require('./TimePickerDropdown.js');
22
- require('@elliemae/ds-icons');
23
- require('@elliemae/ds-button');
24
- require('@elliemae/ds-popper');
25
- require('@babel/runtime/helpers/defineProperty');
26
- require('@babel/runtime/helpers/classCallCheck');
27
- require('@babel/runtime/helpers/createClass');
28
- require('@babel/runtime/helpers/assertThisInitialized');
29
- require('@babel/runtime/helpers/inherits');
30
- require('@babel/runtime/helpers/possibleConstructorReturn');
31
- require('@babel/runtime/helpers/getPrototypeOf');
32
- require('./PickerPanel.js');
33
- require('@babel/runtime/helpers/toArray');
34
- require('lodash');
35
- require('./moveElementOnScroll.js');
36
- require('styled-components');
37
9
 
38
10
 
39
11
 
40
12
  exports.DSTimePicker = DSTimePicker.DSTimePicker;
41
13
  exports.DSTimePickerWithSchema = DSTimePicker.DSTimePickerWithSchema;
42
- exports.default = DSTimePicker.DSTimePicker;
14
+ exports["default"] = DSTimePicker.DSTimePicker;
43
15
  exports.TimePickerMenu = TimePickerMenu.TimePickerMenu;
44
16
  exports.DSTimePickerMenu = DSTimePickerMenu.DSTimePickerMenu;
45
17
  exports.convertTimeString = utils.convertTimeString;
46
- //# sourceMappingURL=index.js.map