@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.
- 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": {
|