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

Sign up to get free protection for your applications and to get access to all the features.
@@ -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": {