@hipay/hipay-material-ui 1.0.0-beta.13 → 1.0.0-beta.14

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.
@@ -50,6 +50,10 @@ var _DayPickerInput = require('react-day-picker/DayPickerInput');
50
50
 
51
51
  var _DayPickerInput2 = _interopRequireDefault(_DayPickerInput);
52
52
 
53
+ var _classnames = require('classnames');
54
+
55
+ var _classnames2 = _interopRequireDefault(_classnames);
56
+
53
57
  var _withStyles = require('../styles/withStyles');
54
58
 
55
59
  var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -92,6 +96,8 @@ var _stylesheet2 = _interopRequireDefault(_stylesheet);
92
96
 
93
97
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
94
98
 
99
+ // weak
100
+
95
101
  var HiDateRangePicker = function (_React$Component) {
96
102
  (0, _inherits3.default)(HiDateRangePicker, _React$Component);
97
103
 
@@ -100,11 +106,16 @@ var HiDateRangePicker = function (_React$Component) {
100
106
 
101
107
  var _this = (0, _possibleConstructorReturn3.default)(this, (HiDateRangePicker.__proto__ || (0, _getPrototypeOf2.default)(HiDateRangePicker)).call(this));
102
108
 
109
+ _this.handleDayPickerFocus = function (name) {
110
+ return function () {
111
+ _this.setState({ focusedInput: name });
112
+ };
113
+ };
114
+
103
115
  _this.state = {
104
- fromOpenedPanel: 'calendar',
105
116
  fromCurrentMonth: props.from ? props.from : new Date(),
106
- toOpenedPanel: 'calendar',
107
- toCurrentMonth: props.to ? props.to : new Date()
117
+ toCurrentMonth: props.to ? props.to : new Date(),
118
+ focusedInput: ''
108
119
  };
109
120
 
110
121
  _this.handleReset = _this.handleReset.bind(_this);
@@ -128,6 +139,8 @@ var HiDateRangePicker = function (_React$Component) {
128
139
  _this.handleYearClick = _this.handleYearClick.bind(_this);
129
140
  _this.handleYearClickFrom = _this.handleYearClickFrom.bind(_this);
130
141
  _this.handleYearClickTo = _this.handleYearClickTo.bind(_this);
142
+ _this.handleDayPickerFocus = _this.handleDayPickerFocus.bind(_this);
143
+ _this.handleDayPickerBlur = _this.handleDayPickerBlur.bind(_this);
131
144
 
132
145
  _this.openPanel = _this.openPanel.bind(_this);
133
146
 
@@ -324,6 +337,11 @@ var HiDateRangePicker = function (_React$Component) {
324
337
  document.activeElement.blur();
325
338
  }
326
339
  }
340
+ }, {
341
+ key: 'handleDayPickerBlur',
342
+ value: function handleDayPickerBlur() {
343
+ this.setState({ focusedInput: '' });
344
+ }
327
345
  }, {
328
346
  key: 'openPanel',
329
347
  value: function openPanel(name, panel) {
@@ -367,9 +385,10 @@ var HiDateRangePicker = function (_React$Component) {
367
385
  }
368
386
  }, {
369
387
  key: 'renderOverlay',
370
- value: function renderOverlay(name, propsOverlay) {
388
+ value: function renderOverlay(name, propsOverlay, staticPosition) {
371
389
  var rangeOverlayProps = (0, _extends3.default)({}, propsOverlay, {
372
- side: name
390
+ side: name,
391
+ staticPosition: staticPosition
373
392
  });
374
393
 
375
394
  switch (this.state[name + 'OpenedPanel']) {
@@ -387,12 +406,12 @@ var HiDateRangePicker = function (_React$Component) {
387
406
  }, {
388
407
  key: 'renderOverlayFrom',
389
408
  value: function renderOverlayFrom(propsOverlay) {
390
- return this.renderOverlay('from', propsOverlay);
409
+ return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
391
410
  }
392
411
  }, {
393
412
  key: 'renderOverlayTo',
394
413
  value: function renderOverlayTo(propsOverlay) {
395
- return this.renderOverlay('to', propsOverlay);
414
+ return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
396
415
  }
397
416
  }, {
398
417
  key: 'renderMonthPickerOverlay',
@@ -439,7 +458,8 @@ var HiDateRangePicker = function (_React$Component) {
439
458
  }, {
440
459
  key: 'render',
441
460
  value: function render() {
442
- var _this6 = this;
461
+ var _this6 = this,
462
+ _classNames;
443
463
 
444
464
  var _props = this.props,
445
465
  classes = _props.classes,
@@ -457,7 +477,8 @@ var HiDateRangePicker = function (_React$Component) {
457
477
  to = _props.to,
458
478
  translations = _props.translations,
459
479
  id = _props.id,
460
- props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
480
+ staticPosition = _props.staticPosition,
481
+ props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
461
482
  var _state = this.state,
462
483
  fromCurrentMonth = _state.fromCurrentMonth,
463
484
  toCurrentMonth = _state.toCurrentMonth;
@@ -575,32 +596,47 @@ var HiDateRangePicker = function (_React$Component) {
575
596
  id: id + '-to'
576
597
  });
577
598
 
599
+ var fromClass = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'to'), (0, _defineProperty3.default)(_classNames, classes.dayPickerMargin, staticPosition === true && this.state.focusedInput === 'to'), _classNames));
600
+ var toClass = (0, _classnames2.default)(classes.toInput, (0, _defineProperty3.default)({}, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'));
601
+
578
602
  return _react2.default.createElement(
579
603
  'div',
580
604
  { className: classes.root },
581
605
  _react2.default.createElement(
582
606
  'div',
583
- { className: classes.fromInput },
584
- _react2.default.createElement(_DayPickerInput2.default, {
585
- ref: function ref(el) {
586
- _this6.fromInput = el;
587
- },
588
- value: from,
589
- hideOnDayClick: false,
590
- overlayComponent: this.renderOverlayFrom,
591
- dayPickerProps: fromDayPickerProps,
592
- component: _HiForm.HiTextField,
593
- inputProps: fromInputProps,
594
- format: enableTime ? format + ' HH:mm' : format,
595
- formatDate: _moment.formatDate,
596
- parseDate: _moment.parseDate,
597
- onDayChange: this.handleDayChangeFrom,
598
- placeholder: ''
599
- })
607
+ {
608
+ className: classes.fromInput,
609
+ onFocus: this.handleDayPickerFocus('from'),
610
+ onBlur: this.handleDayPickerBlur
611
+ },
612
+ _react2.default.createElement(
613
+ 'div',
614
+ { className: fromClass },
615
+ _react2.default.createElement(_DayPickerInput2.default, {
616
+ ref: function ref(el) {
617
+ _this6.fromInput = el;
618
+ },
619
+ value: from,
620
+ hideOnDayClick: false,
621
+ overlayComponent: this.renderOverlayFrom,
622
+ dayPickerProps: fromDayPickerProps,
623
+ component: _HiForm.HiTextField,
624
+ inputProps: fromInputProps,
625
+ format: enableTime ? format + ' HH:mm' : format,
626
+ formatDate: _moment.formatDate,
627
+ parseDate: _moment.parseDate,
628
+ onDayChange: this.handleDayChangeFrom,
629
+ placeholder: ''
630
+ })
631
+ )
600
632
  ),
601
633
  _react2.default.createElement(
602
634
  'div',
603
- { className: classes.toInput },
635
+ {
636
+ className: toClass,
637
+ onFocus: this.handleDayPickerFocus('to'),
638
+ onBlur: this.handleDayPickerBlur
639
+ },
604
640
  _react2.default.createElement(_DayPickerInput2.default, {
605
641
  ref: function ref(el) {
606
642
  _this6.toInput = el;
@@ -622,12 +658,13 @@ var HiDateRangePicker = function (_React$Component) {
622
658
  }
623
659
  }]);
624
660
  return HiDateRangePicker;
625
- }(_react2.default.Component); // weak
661
+ }(_react2.default.Component);
626
662
 
627
663
  HiDateRangePicker.defaultProps = {
628
664
  disabledDays: [],
629
665
  disablePastDays: false,
630
666
  disableFutureDays: false,
667
+ staticPosition: false,
631
668
  enableTime: false,
632
669
  format: 'YYYY-DD-MM',
633
670
  labelFrom: 'Start',
@@ -703,6 +740,10 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
703
740
  * Callback au reset de l'input
704
741
  */
705
742
  onReset: _propTypes2.default.func,
743
+ /**
744
+ * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
745
+ */
746
+ staticPosition: _propTypes2.default.bool,
706
747
  /**
707
748
  * Date de fin sélectionnée
708
749
  */
@@ -191,11 +191,11 @@ var HiDateRangeSelector = function (_React$Component) {
191
191
  if (selectedOption) {
192
192
  _this.props.onChange('from', selectedOption.from.toDate());
193
193
  _this.props.onChange('to', selectedOption.to.toDate());
194
- if (_this.props.returnSelectValue === true) {
195
- _this.props.onChange('period', value);
196
- }
197
194
  }
198
195
  }
196
+ if (_this.props.returnSelectValue === true) {
197
+ _this.props.onChange('period', value);
198
+ }
199
199
  };
200
200
  };
201
201
 
@@ -252,7 +252,8 @@ var HiDateRangeSelector = function (_React$Component) {
252
252
  translations = _props.translations,
253
253
  classes = _props.classes,
254
254
  selectProps = _props.selectProps,
255
- props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps']);
255
+ staticPosition = _props.staticPosition,
256
+ props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
256
257
  var selectedPreset = this.state.selectedPreset;
257
258
 
258
259
 
@@ -284,7 +285,8 @@ var HiDateRangeSelector = function (_React$Component) {
284
285
  translations: translations,
285
286
  value: selectedPreset,
286
287
  containerWidth: this.state.containerWidth,
287
- classes: { root: classes.dateSelect }
288
+ classes: { root: classes.dateSelect },
289
+ staticPosition: staticPosition
288
290
  }, selectProps))
289
291
  ),
290
292
  _react2.default.createElement(
@@ -299,7 +301,8 @@ var HiDateRangeSelector = function (_React$Component) {
299
301
  onChange: onChange,
300
302
  onReset: this.handleReset,
301
303
  disabled: disabled || selectedPreset !== 'custom',
302
- translations: translations
304
+ translations: translations,
305
+ staticPosition: staticPosition
303
306
  }, props))
304
307
  )
305
308
  );
@@ -313,6 +316,7 @@ HiDateRangeSelector.defaultProps = {
313
316
  defaultPreset: 'cd',
314
317
  enableTime: false,
315
318
  returnSelectValue: false,
319
+ staticPosition: false,
316
320
  locale: 'fr-FR',
317
321
  format: 'YYYY-DD-MM',
318
322
  translations: {
@@ -414,6 +418,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
414
418
  * Props passées au HiSelectField
415
419
  */
416
420
  selectProps: _propTypes2.default.object,
421
+ /**
422
+ * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
423
+ */
424
+ staticPosition: _propTypes2.default.bool,
417
425
  /**
418
426
  * Date de fin sélectionnée
419
427
  */
@@ -34,10 +34,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
34
34
  var styles = exports.styles = function styles() {
35
35
  return {
36
36
  paper: {
37
- position: 'absolute',
38
37
  width: '100%',
39
38
  zIndex: 10
40
39
  },
40
+ absolute: {
41
+ position: 'absolute'
42
+ },
43
+ relative: {
44
+ position: 'relative'
45
+ },
41
46
  left: {
42
47
  width: '200%',
43
48
  left: 0
@@ -57,9 +62,10 @@ var Overlay = function Overlay(_ref) {
57
62
 
58
63
  var classes = _ref.classes,
59
64
  children = _ref.children,
60
- side = _ref.side;
65
+ side = _ref.side,
66
+ staticPosition = _ref.staticPosition;
61
67
 
62
- var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
68
+ var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty3.default)(_classNames, classes.relative, staticPosition === true), _classNames));
63
69
 
64
70
  return _react2.default.createElement(
65
71
  _Paper2.default,
@@ -31,6 +31,13 @@ exports.default = function (theme) {
31
31
  width: 'calc(50% - 4px)',
32
32
  marginLeft: 4
33
33
  },
34
+ absolute: {
35
+ position: 'absolute'
36
+ },
37
+ dayPickerMargin: {
38
+ top: -337,
39
+ width: 'calc(100% - 4px)'
40
+ },
34
41
  // The container element
35
42
  container: {
36
43
  width: '100%',
@@ -485,7 +485,7 @@ HiSelect.defaultProps = {
485
485
  var _initialiseProps = function _initialiseProps() {
486
486
  var _this3 = this;
487
487
 
488
- this.handleClick = function (event) {
488
+ this.handleClick = function () {
489
489
  if (_this3.state.open) {
490
490
  _this3.handleClose();
491
491
  } else {
@@ -6,6 +6,8 @@ import React from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import { formatDate, parseDate } from 'react-day-picker/moment';
8
8
  import DayPickerInput from 'react-day-picker/DayPickerInput';
9
+ import classNames from 'classnames';
10
+
9
11
  import withStyles from '../styles/withStyles';
10
12
  import { capitalizeFirstLetter } from '../utils/helpers';
11
13
  import Caption from './Caption';
@@ -23,11 +25,14 @@ class HiDateRangePicker extends React.Component {
23
25
  constructor(props) {
24
26
  super();
25
27
 
28
+ this.handleDayPickerFocus = name => () => {
29
+ this.setState({ focusedInput: name });
30
+ };
31
+
26
32
  this.state = {
27
- fromOpenedPanel: 'calendar',
28
33
  fromCurrentMonth: props.from ? props.from : new Date(),
29
- toOpenedPanel: 'calendar',
30
- toCurrentMonth: props.to ? props.to : new Date()
34
+ toCurrentMonth: props.to ? props.to : new Date(),
35
+ focusedInput: ''
31
36
  };
32
37
 
33
38
  this.handleReset = this.handleReset.bind(this);
@@ -51,6 +56,8 @@ class HiDateRangePicker extends React.Component {
51
56
  this.handleYearClick = this.handleYearClick.bind(this);
52
57
  this.handleYearClickFrom = this.handleYearClickFrom.bind(this);
53
58
  this.handleYearClickTo = this.handleYearClickTo.bind(this);
59
+ this.handleDayPickerFocus = this.handleDayPickerFocus.bind(this);
60
+ this.handleDayPickerBlur = this.handleDayPickerBlur.bind(this);
54
61
 
55
62
  this.openPanel = this.openPanel.bind(this);
56
63
 
@@ -207,6 +214,10 @@ class HiDateRangePicker extends React.Component {
207
214
  }
208
215
  }
209
216
 
217
+ handleDayPickerBlur() {
218
+ this.setState({ focusedInput: '' });
219
+ }
220
+
210
221
  openPanel(name, panel) {
211
222
  this.setState({
212
223
  [`${name}OpenedPanel`]: panel
@@ -239,9 +250,10 @@ class HiDateRangePicker extends React.Component {
239
250
  return this.renderNavbar('to', propsNavbar);
240
251
  }
241
252
 
242
- renderOverlay(name, propsOverlay) {
253
+ renderOverlay(name, propsOverlay, staticPosition) {
243
254
  const rangeOverlayProps = _extends({}, propsOverlay, {
244
- side: name
255
+ side: name,
256
+ staticPosition
245
257
  });
246
258
 
247
259
  switch (this.state[`${name}OpenedPanel`]) {
@@ -257,10 +269,10 @@ class HiDateRangePicker extends React.Component {
257
269
  }
258
270
  }
259
271
  renderOverlayFrom(propsOverlay) {
260
- return this.renderOverlay('from', propsOverlay);
272
+ return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
261
273
  }
262
274
  renderOverlayTo(propsOverlay) {
263
- return this.renderOverlay('to', propsOverlay);
275
+ return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
264
276
  }
265
277
 
266
278
  renderMonthPickerOverlay(name, propsOverlay) {
@@ -315,9 +327,10 @@ class HiDateRangePicker extends React.Component {
315
327
  onReset,
316
328
  to,
317
329
  translations,
318
- id
330
+ id,
331
+ staticPosition
319
332
  } = _props,
320
- props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
333
+ props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
321
334
 
322
335
  const { fromCurrentMonth, toCurrentMonth } = this.state;
323
336
 
@@ -429,32 +442,52 @@ class HiDateRangePicker extends React.Component {
429
442
  id: `${id}-to`
430
443
  });
431
444
 
445
+ let fromClass = classNames({
446
+ [classes.absolute]: staticPosition === true && this.state.focusedInput === 'to',
447
+ [classes.dayPickerMargin]: staticPosition === true && this.state.focusedInput === 'to'
448
+ });
449
+ let toClass = classNames(classes.toInput, {
450
+ [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from'
451
+ });
452
+
432
453
  return React.createElement(
433
454
  'div',
434
455
  { className: classes.root },
435
456
  React.createElement(
436
457
  'div',
437
- { className: classes.fromInput },
438
- React.createElement(DayPickerInput, {
439
- ref: el => {
440
- this.fromInput = el;
441
- },
442
- value: from,
443
- hideOnDayClick: false,
444
- overlayComponent: this.renderOverlayFrom,
445
- dayPickerProps: fromDayPickerProps,
446
- component: HiTextField,
447
- inputProps: fromInputProps,
448
- format: enableTime ? `${format} HH:mm` : format,
449
- formatDate: formatDate,
450
- parseDate: parseDate,
451
- onDayChange: this.handleDayChangeFrom,
452
- placeholder: ''
453
- })
458
+ {
459
+ className: classes.fromInput,
460
+ onFocus: this.handleDayPickerFocus('from'),
461
+ onBlur: this.handleDayPickerBlur
462
+ },
463
+ React.createElement(
464
+ 'div',
465
+ { className: fromClass },
466
+ React.createElement(DayPickerInput, {
467
+ ref: el => {
468
+ this.fromInput = el;
469
+ },
470
+ value: from,
471
+ hideOnDayClick: false,
472
+ overlayComponent: this.renderOverlayFrom,
473
+ dayPickerProps: fromDayPickerProps,
474
+ component: HiTextField,
475
+ inputProps: fromInputProps,
476
+ format: enableTime ? `${format} HH:mm` : format,
477
+ formatDate: formatDate,
478
+ parseDate: parseDate,
479
+ onDayChange: this.handleDayChangeFrom,
480
+ placeholder: ''
481
+ })
482
+ )
454
483
  ),
455
484
  React.createElement(
456
485
  'div',
457
- { className: classes.toInput },
486
+ {
487
+ className: toClass,
488
+ onFocus: this.handleDayPickerFocus('to'),
489
+ onBlur: this.handleDayPickerBlur
490
+ },
458
491
  React.createElement(DayPickerInput, {
459
492
  ref: el => {
460
493
  this.toInput = el;
@@ -480,6 +513,7 @@ HiDateRangePicker.defaultProps = {
480
513
  disabledDays: [],
481
514
  disablePastDays: false,
482
515
  disableFutureDays: false,
516
+ staticPosition: false,
483
517
  enableTime: false,
484
518
  format: 'YYYY-DD-MM',
485
519
  labelFrom: 'Start',
@@ -555,6 +589,10 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
555
589
  * Callback au reset de l'input
556
590
  */
557
591
  onReset: PropTypes.func,
592
+ /**
593
+ * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
594
+ */
595
+ staticPosition: PropTypes.bool,
558
596
  /**
559
597
  * Date de fin sélectionnée
560
598
  */
@@ -127,11 +127,11 @@ class HiDateRangeSelector extends React.Component {
127
127
  if (selectedOption) {
128
128
  this.props.onChange('from', selectedOption.from.toDate());
129
129
  this.props.onChange('to', selectedOption.to.toDate());
130
- if (this.props.returnSelectValue === true) {
131
- this.props.onChange('period', value);
132
- }
133
130
  }
134
131
  }
132
+ if (this.props.returnSelectValue === true) {
133
+ this.props.onChange('period', value);
134
+ }
135
135
  };
136
136
 
137
137
  this.state = {
@@ -177,9 +177,10 @@ class HiDateRangeSelector extends React.Component {
177
177
  to,
178
178
  translations,
179
179
  classes,
180
- selectProps
180
+ selectProps,
181
+ staticPosition
181
182
  } = _props,
182
- props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps']);
183
+ props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
183
184
 
184
185
  const { selectedPreset } = this.state;
185
186
 
@@ -209,7 +210,8 @@ class HiDateRangeSelector extends React.Component {
209
210
  translations: translations,
210
211
  value: selectedPreset,
211
212
  containerWidth: this.state.containerWidth,
212
- classes: { root: classes.dateSelect }
213
+ classes: { root: classes.dateSelect },
214
+ staticPosition: staticPosition
213
215
  }, selectProps))
214
216
  ),
215
217
  React.createElement(
@@ -224,7 +226,8 @@ class HiDateRangeSelector extends React.Component {
224
226
  onChange: onChange,
225
227
  onReset: this.handleReset,
226
228
  disabled: disabled || selectedPreset !== 'custom',
227
- translations: translations
229
+ translations: translations,
230
+ staticPosition: staticPosition
228
231
  }, props))
229
232
  )
230
233
  );
@@ -236,6 +239,7 @@ HiDateRangeSelector.defaultProps = {
236
239
  defaultPreset: 'cd',
237
240
  enableTime: false,
238
241
  returnSelectValue: false,
242
+ staticPosition: false,
239
243
  locale: 'fr-FR',
240
244
  format: 'YYYY-DD-MM',
241
245
  translations: {
@@ -337,6 +341,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
337
341
  * Props passées au HiSelectField
338
342
  */
339
343
  selectProps: PropTypes.object,
344
+ /**
345
+ * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
346
+ */
347
+ staticPosition: PropTypes.bool,
340
348
  /**
341
349
  * Date de fin sélectionnée
342
350
  */
@@ -9,10 +9,15 @@ import withStyles from '../../styles/withStyles';
9
9
 
10
10
  export const styles = () => ({
11
11
  paper: {
12
- position: 'absolute',
13
12
  width: '100%',
14
13
  zIndex: 10
15
14
  },
15
+ absolute: {
16
+ position: 'absolute'
17
+ },
18
+ relative: {
19
+ position: 'relative'
20
+ },
16
21
  left: {
17
22
  width: '200%',
18
23
  left: 0
@@ -26,10 +31,12 @@ export const styles = () => ({
26
31
  }
27
32
  });
28
33
 
29
- const Overlay = ({ classes, children, side }) => {
34
+ const Overlay = ({ classes, children, side, staticPosition }) => {
30
35
  const paperClass = classNames(classes.paper, {
31
36
  [classes.left]: side === 'from',
32
- [classes.right]: side === 'to'
37
+ [classes.right]: side === 'to',
38
+ [classes.absolute]: staticPosition !== true,
39
+ [classes.relative]: staticPosition === true
33
40
  });
34
41
 
35
42
  return React.createElement(
@@ -19,6 +19,13 @@ export default (theme => ({
19
19
  width: 'calc(50% - 4px)',
20
20
  marginLeft: 4
21
21
  },
22
+ absolute: {
23
+ position: 'absolute'
24
+ },
25
+ dayPickerMargin: {
26
+ top: -337,
27
+ width: 'calc(100% - 4px)'
28
+ },
22
29
  // The container element
23
30
  container: {
24
31
  width: '100%',
@@ -390,7 +390,7 @@ HiSelect.defaultProps = {
390
390
  };
391
391
 
392
392
  var _initialiseProps = function () {
393
- this.handleClick = event => {
393
+ this.handleClick = () => {
394
394
  if (this.state.open) {
395
395
  this.handleClose();
396
396
  } else {
package/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license Material-UI v1.0.0-beta.13
1
+ /** @license Material-UI v1.0.0-beta.14
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license Material-UI v1.0.0-beta.13
1
+ /** @license Material-UI v1.0.0-beta.14
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
4
  "author": "HiPay PSYCHE Team",
5
- "version": "1.0.0-beta.13",
5
+ "version": "1.0.0-beta.14",
6
6
  "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
7
7
  "main": "./index.js",
8
8
  "repository": {