@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.
- package/HiDatePicker/HiDateRangePicker.js +69 -28
- package/HiDatePicker/HiDateRangeSelector.js +14 -6
- package/HiDatePicker/Overlays/Overlay.js +9 -3
- package/HiDatePicker/stylesheet.js +7 -0
- package/HiSelect/HiSelect.js +1 -1
- package/es/HiDatePicker/HiDateRangePicker.js +65 -27
- package/es/HiDatePicker/HiDateRangeSelector.js +15 -7
- package/es/HiDatePicker/Overlays/Overlay.js +10 -3
- package/es/HiDatePicker/stylesheet.js +7 -0
- package/es/HiSelect/HiSelect.js +1 -1
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/umd/hipay-material-ui.development.js +2 -2
- package/umd/hipay-material-ui.production.min.js +1 -1
@@ -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
|
-
|
107
|
-
|
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
|
-
|
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
|
-
{
|
584
|
-
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
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
|
-
{
|
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);
|
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
|
-
|
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%',
|
package/HiSelect/HiSelect.js
CHANGED
@@ -485,7 +485,7 @@ HiSelect.defaultProps = {
|
|
485
485
|
var _initialiseProps = function _initialiseProps() {
|
486
486
|
var _this3 = this;
|
487
487
|
|
488
|
-
this.handleClick = function (
|
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
|
-
|
30
|
-
|
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
|
-
{
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
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
|
-
{
|
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%',
|
package/es/HiSelect/HiSelect.js
CHANGED
package/index.es.js
CHANGED
package/index.js
CHANGED
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.
|
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": {
|