@hipay/hipay-material-ui 2.0.0-beta.74 → 2.0.0-beta.76
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/CHANGELOG.md +153 -0
- package/HiAlertModal/HiAlertModal.js +1 -1
- package/HiChip/HiChip.js +17 -1
- package/HiDatePicker/HiDatePicker.js +130 -125
- package/HiDatePicker/HiDatePickerMobile.js +127 -0
- package/HiDatePicker/HiDateRangePicker.js +53 -11
- package/HiDatePicker/HiDateRangeSelector.js +3 -1
- package/HiDatePicker/stylesheet.js +16 -0
- package/HiNotice/HiKPI.js +14 -8
- package/HiPaymentMeans/HiPaymentMeans.js +2 -1
- package/HiSelect/HiSelect.js +115 -37
- package/HiSelect/HiSelectInput.js +6 -1
- package/HiSelect/HiSelectMobile.js +198 -0
- package/es/HiAlertModal/HiAlertModal.js +1 -1
- package/es/HiChip/HiChip.js +17 -1
- package/es/HiDatePicker/HiDatePicker.js +149 -133
- package/es/HiDatePicker/HiDatePickerMobile.js +89 -0
- package/es/HiDatePicker/HiDateRangePicker.js +47 -9
- package/es/HiDatePicker/HiDateRangeSelector.js +2 -1
- package/es/HiDatePicker/stylesheet.js +16 -0
- package/es/HiNotice/HiKPI.js +13 -8
- package/es/HiPaymentMeans/HiPaymentMeans.js +2 -1
- package/es/HiSelect/HiSelect.js +110 -39
- package/es/HiSelect/HiSelectInput.js +6 -1
- package/es/HiSelect/HiSelectMobile.js +149 -0
- package/es/styles/createPalette.js +1 -1
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +2 -1
- package/styles/createPalette.js +1 -1
@@ -0,0 +1,198 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = exports.styles = void 0;
|
9
|
+
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
|
+
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
13
|
+
|
14
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
15
|
+
|
16
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
17
|
+
|
18
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
19
|
+
|
20
|
+
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
21
|
+
|
22
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
23
|
+
|
24
|
+
var _react = _interopRequireDefault(require("react"));
|
25
|
+
|
26
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
27
|
+
|
28
|
+
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
29
|
+
|
30
|
+
var styles = function styles(theme) {
|
31
|
+
return {
|
32
|
+
root: {
|
33
|
+
position: 'absolute',
|
34
|
+
opacity: '0',
|
35
|
+
marginTop: -40,
|
36
|
+
height: 40
|
37
|
+
}
|
38
|
+
};
|
39
|
+
};
|
40
|
+
|
41
|
+
exports.styles = styles;
|
42
|
+
|
43
|
+
var HiSelectMobile =
|
44
|
+
/*#__PURE__*/
|
45
|
+
function (_React$Component) {
|
46
|
+
(0, _inherits2.default)(HiSelectMobile, _React$Component);
|
47
|
+
|
48
|
+
function HiSelectMobile() {
|
49
|
+
var _getPrototypeOf2;
|
50
|
+
|
51
|
+
var _this;
|
52
|
+
|
53
|
+
(0, _classCallCheck2.default)(this, HiSelectMobile);
|
54
|
+
|
55
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
56
|
+
args[_key] = arguments[_key];
|
57
|
+
}
|
58
|
+
|
59
|
+
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiSelectMobile)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
60
|
+
|
61
|
+
_this.buildOptionList = function (itemList) {
|
62
|
+
var optionList = [];
|
63
|
+
|
64
|
+
if (itemList.length) {
|
65
|
+
var parentId;
|
66
|
+
var groupList = [];
|
67
|
+
itemList.forEach(function (item) {
|
68
|
+
if (item.id !== '_all' && item.displayed !== false) {
|
69
|
+
if (item.hasChildren) {
|
70
|
+
if (groupList.length) {
|
71
|
+
optionList.push(_this.buildChildrenList(groupList));
|
72
|
+
groupList = [];
|
73
|
+
}
|
74
|
+
|
75
|
+
parentId = item.id;
|
76
|
+
groupList.push(item);
|
77
|
+
} else if (parentId) {
|
78
|
+
groupList.push(item);
|
79
|
+
} else if (item.children) {
|
80
|
+
optionList.push(_this.buildChildrenList([item].concat((0, _toConsumableArray2.default)(item.children))));
|
81
|
+
} else {
|
82
|
+
optionList.push(_react.default.createElement("option", {
|
83
|
+
key: item.id,
|
84
|
+
"data-item": JSON.stringify(item),
|
85
|
+
value: item.id
|
86
|
+
}, item.label));
|
87
|
+
}
|
88
|
+
}
|
89
|
+
});
|
90
|
+
|
91
|
+
if (groupList.length) {
|
92
|
+
optionList.push(_this.buildChildrenList(groupList));
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
return optionList;
|
97
|
+
};
|
98
|
+
|
99
|
+
_this.buildChildrenList = function (itemList) {
|
100
|
+
var group = itemList.shift();
|
101
|
+
return _react.default.createElement("optgroup", {
|
102
|
+
key: group.id,
|
103
|
+
label: group.label
|
104
|
+
}, itemList.map(function (item) {
|
105
|
+
return _react.default.createElement("option", {
|
106
|
+
key: item.id,
|
107
|
+
"data-item": JSON.stringify(item),
|
108
|
+
value: item.id
|
109
|
+
}, item.label);
|
110
|
+
}));
|
111
|
+
};
|
112
|
+
|
113
|
+
_this.handleChange = function (event) {
|
114
|
+
if (!_this.props.multiple) {
|
115
|
+
var itemSelected = event.target[event.target.selectedIndex];
|
116
|
+
|
117
|
+
_this.props.onChange(event, JSON.parse(itemSelected.getAttribute('data-item')));
|
118
|
+
} else {
|
119
|
+
// Multiple on mobile trigger on change with all selected items
|
120
|
+
var optionsSelected = [];
|
121
|
+
Array.prototype.forEach.call(event.target.options, function (option) {
|
122
|
+
if (option.selected) {
|
123
|
+
optionsSelected.push(JSON.parse(option.getAttribute('data-item')));
|
124
|
+
}
|
125
|
+
});
|
126
|
+
|
127
|
+
_this.props.onChange(event, optionsSelected);
|
128
|
+
}
|
129
|
+
};
|
130
|
+
|
131
|
+
return _this;
|
132
|
+
}
|
133
|
+
|
134
|
+
(0, _createClass2.default)(HiSelectMobile, [{
|
135
|
+
key: "render",
|
136
|
+
value: function render() {
|
137
|
+
var _this$props = this.props,
|
138
|
+
classes = _this$props.classes,
|
139
|
+
id = _this$props.id,
|
140
|
+
itemList = _this$props.itemList,
|
141
|
+
multiple = _this$props.multiple,
|
142
|
+
value = _this$props.value;
|
143
|
+
var additionalProps = (0, _extends2.default)({}, multiple && {
|
144
|
+
multiple: 'multiple'
|
145
|
+
});
|
146
|
+
return _react.default.createElement("select", (0, _extends2.default)({
|
147
|
+
value: value,
|
148
|
+
style: {
|
149
|
+
width: this.props.width
|
150
|
+
},
|
151
|
+
onChange: this.handleChange,
|
152
|
+
className: classes.root,
|
153
|
+
name: id,
|
154
|
+
id: id
|
155
|
+
}, additionalProps), this.buildOptionList(itemList));
|
156
|
+
}
|
157
|
+
}]);
|
158
|
+
return HiSelectMobile;
|
159
|
+
}(_react.default.Component);
|
160
|
+
|
161
|
+
HiSelectMobile.defaultProps = {
|
162
|
+
itemList: []
|
163
|
+
};
|
164
|
+
HiSelectMobile.propTypes = process.env.NODE_ENV !== "production" ? {
|
165
|
+
/**
|
166
|
+
* Identifiant du select
|
167
|
+
*/
|
168
|
+
id: _propTypes.default.string,
|
169
|
+
|
170
|
+
/**
|
171
|
+
* Liste des options du select
|
172
|
+
*/
|
173
|
+
itemList: _propTypes.default.array.isRequired,
|
174
|
+
|
175
|
+
/**
|
176
|
+
* True s'il est possible de sélectionner plusieurs options
|
177
|
+
*/
|
178
|
+
multiple: _propTypes.default.bool,
|
179
|
+
|
180
|
+
/**
|
181
|
+
* Fonction appelée lors de la sélection/désélection
|
182
|
+
*/
|
183
|
+
onChange: _propTypes.default.func.isRequired,
|
184
|
+
|
185
|
+
/**
|
186
|
+
* Valeur(s) sélectionnée(s)
|
187
|
+
*/
|
188
|
+
value: _propTypes.default.any,
|
189
|
+
|
190
|
+
/**
|
191
|
+
* Largeur du select
|
192
|
+
*/
|
193
|
+
width: _propTypes.default.number
|
194
|
+
} : {};
|
195
|
+
|
196
|
+
var _default = (0, _withStyles.default)(styles)(HiSelectMobile);
|
197
|
+
|
198
|
+
exports.default = _default;
|
@@ -115,7 +115,7 @@ class HiAlertModal extends React.PureComponent {
|
|
115
115
|
color: theme.palette.background2,
|
116
116
|
icon: backgroundIcon,
|
117
117
|
size: iconSize
|
118
|
-
})), React.createElement(DialogTitle, {
|
118
|
+
})), title && React.createElement(DialogTitle, {
|
119
119
|
disableTypography: true,
|
120
120
|
classes: {
|
121
121
|
root: classes.classTitle
|
package/es/HiChip/HiChip.js
CHANGED
@@ -106,6 +106,8 @@ function HiChip(props) {
|
|
106
106
|
id,
|
107
107
|
img,
|
108
108
|
label,
|
109
|
+
onClick,
|
110
|
+
onKeyDown,
|
109
111
|
onPrevious,
|
110
112
|
onNext,
|
111
113
|
onDelete,
|
@@ -120,13 +122,17 @@ function HiChip(props) {
|
|
120
122
|
} = props;
|
121
123
|
return React.createElement("div", {
|
122
124
|
id: id,
|
125
|
+
role: 'button',
|
123
126
|
className: classNames(classes.root, className, {
|
124
127
|
[classes.leftNavigation]: onPrevious,
|
125
128
|
[classes.rightNavigation]: onNext,
|
126
129
|
[classes.deletable]: onDelete,
|
127
130
|
[classes.leftIcon]: icon
|
128
131
|
}),
|
129
|
-
title: title
|
132
|
+
title: title,
|
133
|
+
onClick: onClick,
|
134
|
+
onKeyDown: onKeyDown,
|
135
|
+
tabIndex: "0"
|
130
136
|
}, icon && React.createElement(HiIcon, {
|
131
137
|
className: classNames(classes.icon, {
|
132
138
|
[classes.iconClickable]: onIconClick
|
@@ -223,6 +229,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
223
229
|
*/
|
224
230
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
225
231
|
|
232
|
+
/**
|
233
|
+
* Fonction de callback au clic sur la chip
|
234
|
+
*/
|
235
|
+
onClick: PropTypes.func,
|
236
|
+
|
226
237
|
/**
|
227
238
|
* Fonction de callback au clic sur l'icon close si cancelable = true
|
228
239
|
*/
|
@@ -233,6 +244,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
233
244
|
*/
|
234
245
|
onIconClick: PropTypes.func,
|
235
246
|
|
247
|
+
/**
|
248
|
+
* Fonction de callback à l'appui sur une touche du clavier
|
249
|
+
*/
|
250
|
+
onKeyDown: PropTypes.func,
|
251
|
+
|
236
252
|
/**
|
237
253
|
* Fonction de callback au clic sur l'icon next
|
238
254
|
*/
|
@@ -17,11 +17,19 @@ import NavBar from './NavBar';
|
|
17
17
|
import Weekday from './Weekday';
|
18
18
|
import HiTextField from '../HiForm/HiTextField';
|
19
19
|
import styles from './stylesheet';
|
20
|
+
import { isMobile } from 'react-device-detect';
|
21
|
+
import classNames from 'classnames';
|
22
|
+
import HiFormControl from '../HiForm/HiFormControl';
|
23
|
+
import HiDatePickerMobile from './HiDatePickerMobile';
|
20
24
|
|
21
25
|
class HiDatePicker extends React.Component {
|
22
26
|
constructor(props) {
|
23
27
|
super();
|
24
28
|
|
29
|
+
this.handleInputChange = event => {
|
30
|
+
this.props.onChange(event.target.value);
|
31
|
+
};
|
32
|
+
|
25
33
|
this.handleKeyDown = name => event => {
|
26
34
|
if (event.key === 'Escape' && !event.shiftKey) {
|
27
35
|
this.datePickerInput.hideDayPicker();
|
@@ -29,164 +37,155 @@ class HiDatePicker extends React.Component {
|
|
29
37
|
}
|
30
38
|
};
|
31
39
|
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
};
|
37
|
-
|
38
|
-
this.handleCalendarClick = this.handleCalendarClick.bind(this);
|
39
|
-
this.handleClockClick = this.handleClockClick.bind(this);
|
40
|
-
this.handleMonthClick = this.handleMonthClick.bind(this);
|
41
|
-
this.handleYearClick = this.handleYearClick.bind(this);
|
42
|
-
this.handleDayChange = this.handleDayChange.bind(this);
|
43
|
-
this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
|
44
|
-
this.handleReset = this.handleReset.bind(this);
|
45
|
-
this.handleTimeChange = this.handleTimeChange.bind(this);
|
46
|
-
this.openPanel = this.openPanel.bind(this);
|
47
|
-
this.renderCaption = this.renderCaption.bind(this);
|
48
|
-
this.renderOverlay = this.renderOverlay.bind(this);
|
49
|
-
this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
|
50
|
-
this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
|
51
|
-
this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
|
52
|
-
this.handleInputChange = this.handleInputChange.bind(this);
|
53
|
-
}
|
54
|
-
|
55
|
-
componentWillUnmount() {
|
56
|
-
clearTimeout(this.timeout);
|
57
|
-
}
|
58
|
-
|
59
|
-
handleInputChange(event) {
|
60
|
-
this.props.onChange(event.target.value);
|
61
|
-
}
|
62
|
-
|
63
|
-
handleReset() {
|
64
|
-
const today = moment().tz(this.props.timezoneName);
|
65
|
-
this.handleCurrentMonthChange(new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()));
|
66
|
-
this.props.onReset();
|
67
|
-
}
|
40
|
+
this.handleReset = () => {
|
41
|
+
const today = moment().tz(this.props.timezoneName);
|
42
|
+
this.handleCurrentMonthChange(new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()));
|
43
|
+
this.props.onReset();
|
44
|
+
};
|
68
45
|
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
46
|
+
this.handleDayChange = (day, modifiers) => {
|
47
|
+
if (day) {
|
48
|
+
if (modifiers.selected) {
|
49
|
+
// Deselect day
|
50
|
+
this.props.onChange(undefined);
|
51
|
+
} else {
|
52
|
+
// Keep Time if set
|
53
|
+
if (this.props.enableTime && day !== undefined) {
|
54
|
+
if (this.props.value) {
|
55
|
+
day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
|
56
|
+
} else {
|
57
|
+
day.setHours(0, 0);
|
58
|
+
}
|
81
59
|
}
|
60
|
+
|
61
|
+
this.props.onChange(day);
|
82
62
|
}
|
83
63
|
|
84
|
-
this.props.
|
64
|
+
if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
|
65
|
+
// Hide overlay & remove focus on input
|
66
|
+
document.activeElement.blur();
|
67
|
+
} else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
|
68
|
+
// Open Time panel after date selection
|
69
|
+
this.openPanel('time');
|
70
|
+
}
|
85
71
|
}
|
72
|
+
};
|
86
73
|
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
this.openPanel('time');
|
74
|
+
this.handleChangeMobile = event => {
|
75
|
+
let date;
|
76
|
+
|
77
|
+
if (event.target.value) {
|
78
|
+
date = new Date(event.target.value);
|
93
79
|
}
|
94
|
-
}
|
95
|
-
}
|
96
80
|
|
97
|
-
|
98
|
-
|
99
|
-
}
|
81
|
+
this.props.onChange(date);
|
82
|
+
};
|
100
83
|
|
101
|
-
|
102
|
-
|
103
|
-
|
84
|
+
this.handleCalendarClick = () => {
|
85
|
+
this.openPanel('calendar');
|
86
|
+
};
|
104
87
|
|
105
|
-
|
106
|
-
|
107
|
-
|
88
|
+
this.handleClockClick = () => {
|
89
|
+
this.openPanel('time');
|
90
|
+
};
|
108
91
|
|
109
|
-
|
110
|
-
|
111
|
-
|
92
|
+
this.handleMonthClick = () => {
|
93
|
+
this.openPanel('months');
|
94
|
+
};
|
112
95
|
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
currentMonth: day < this.props.minimumDate ? this.props.minimumDate : day,
|
117
|
-
openedPanel: 'calendar'
|
118
|
-
});
|
119
|
-
}
|
96
|
+
this.handleYearClick = () => {
|
97
|
+
this.openPanel('years');
|
98
|
+
};
|
120
99
|
|
121
|
-
|
122
|
-
|
100
|
+
this.handleCurrentMonthChange = day => {
|
101
|
+
this.setState({
|
102
|
+
// Current Month can't be anterior to minimumDate
|
103
|
+
currentMonth: day < this.props.minimumDate ? this.props.minimumDate : day,
|
104
|
+
openedPanel: 'calendar'
|
105
|
+
});
|
106
|
+
};
|
123
107
|
|
124
|
-
|
125
|
-
|
126
|
-
}
|
127
|
-
}
|
108
|
+
this.handleTimeChange = (date, precision) => {
|
109
|
+
this.props.onChange(date);
|
128
110
|
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
}
|
133
|
-
}
|
111
|
+
if (date instanceof Date && precision === 'minute') {
|
112
|
+
document.activeElement.blur();
|
113
|
+
}
|
114
|
+
};
|
134
115
|
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
}
|
140
|
-
}
|
116
|
+
this.openPanel = panel => {
|
117
|
+
this.setState({
|
118
|
+
openedPanel: panel
|
119
|
+
});
|
120
|
+
};
|
141
121
|
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
122
|
+
this.renderCaption = propsCaption => {
|
123
|
+
return React.createElement(Caption, _extends({
|
124
|
+
onMonthClick: this.handleMonthClick,
|
125
|
+
onYearClick: this.handleYearClick
|
126
|
+
}, propsCaption));
|
127
|
+
};
|
146
128
|
|
147
|
-
|
148
|
-
|
129
|
+
this.renderOverlay = propsOverlay => {
|
130
|
+
switch (this.state.openedPanel) {
|
131
|
+
case 'time':
|
132
|
+
return this.renderTimePickerOverlay(propsOverlay);
|
149
133
|
|
150
|
-
|
151
|
-
|
134
|
+
case 'months':
|
135
|
+
return this.renderMonthPickerOverlay(propsOverlay);
|
152
136
|
|
153
|
-
|
154
|
-
|
155
|
-
return React.createElement(Overlay, propsOverlay);
|
156
|
-
}
|
157
|
-
}
|
137
|
+
case 'years':
|
138
|
+
return this.renderYearPickerOverlay(propsOverlay);
|
158
139
|
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
140
|
+
case 'calendar':
|
141
|
+
default:
|
142
|
+
return React.createElement(Overlay, propsOverlay);
|
143
|
+
}
|
163
144
|
};
|
164
|
-
return React.createElement(MonthPickerOverlay, _extends({
|
165
|
-
key: 'month-picker-overlay'
|
166
|
-
}, monthPickerProps, propsOverlay));
|
167
|
-
}
|
168
145
|
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
146
|
+
this.renderMonthPickerOverlay = propsOverlay => {
|
147
|
+
const monthPickerProps = {
|
148
|
+
value: this.state.currentMonth,
|
149
|
+
onChange: this.handleCurrentMonthChange
|
150
|
+
};
|
151
|
+
return React.createElement(MonthPickerOverlay, _extends({
|
152
|
+
key: 'month-picker-overlay'
|
153
|
+
}, monthPickerProps, propsOverlay));
|
174
154
|
};
|
175
|
-
return React.createElement(TimePickerOverlay, _extends({
|
176
|
-
key: 'time-picker-overlay'
|
177
|
-
}, timePickerProps, propsOverlay));
|
178
|
-
}
|
179
155
|
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
156
|
+
this.renderTimePickerOverlay = propsOverlay => {
|
157
|
+
const timePickerProps = {
|
158
|
+
value: this.props.value,
|
159
|
+
onChange: this.handleTimeChange,
|
160
|
+
onCalendarClick: this.handleCalendarClick
|
161
|
+
};
|
162
|
+
return React.createElement(TimePickerOverlay, _extends({
|
163
|
+
key: 'time-picker-overlay'
|
164
|
+
}, timePickerProps, propsOverlay));
|
165
|
+
};
|
166
|
+
|
167
|
+
this.renderYearPickerOverlay = propsOverlay => {
|
168
|
+
const yearPickerProps = {
|
169
|
+
value: this.state.currentMonth,
|
170
|
+
onChange: this.handleCurrentMonthChange,
|
171
|
+
disableFutureDays: this.props.disableFutureDays,
|
172
|
+
minimumDate: this.props.minimumDate
|
173
|
+
};
|
174
|
+
return React.createElement(YearPickerOverlay, _extends({
|
175
|
+
key: 'year-picker-overlay'
|
176
|
+
}, yearPickerProps, propsOverlay));
|
177
|
+
};
|
178
|
+
|
179
|
+
const _today = moment().tz(props.timezoneName);
|
180
|
+
|
181
|
+
this.state = {
|
182
|
+
openedPanel: 'calendar',
|
183
|
+
currentMonth: props.value ? props.value : new Date(_today.year(), _today.month(), _today.date(), _today.hours(), _today.minutes(), _today.seconds(), _today.milliseconds())
|
186
184
|
};
|
187
|
-
|
188
|
-
|
189
|
-
|
185
|
+
}
|
186
|
+
|
187
|
+
componentWillUnmount() {
|
188
|
+
clearTimeout(this.timeout);
|
190
189
|
}
|
191
190
|
|
192
191
|
render() {
|
@@ -264,7 +263,7 @@ class HiDatePicker extends React.Component {
|
|
264
263
|
return React.createElement("div", {
|
265
264
|
className: classes.root,
|
266
265
|
onKeyDown: this.handleKeyDown()
|
267
|
-
}, React.createElement(DayPickerInput, {
|
266
|
+
}, !isMobile ? React.createElement(DayPickerInput, {
|
268
267
|
ref: el => {
|
269
268
|
this.datePickerInput = el;
|
270
269
|
},
|
@@ -279,6 +278,23 @@ class HiDatePicker extends React.Component {
|
|
279
278
|
formatDate: MomentLocaleUtils.formatDate,
|
280
279
|
parseDate: MomentLocaleUtils.parseDate,
|
281
280
|
onDayChange: this.handleDayChange
|
281
|
+
}) : React.createElement(HiDatePickerMobile, {
|
282
|
+
id: this.props.id,
|
283
|
+
label: this.props.label,
|
284
|
+
required: this.props.required,
|
285
|
+
disabled: this.props.disabled,
|
286
|
+
error: this.props.error,
|
287
|
+
errorText: this.props.errorText,
|
288
|
+
helperText: this.props.helperText,
|
289
|
+
helperIcon: this.props.helperIcon,
|
290
|
+
enableTime: enableTime,
|
291
|
+
value: value,
|
292
|
+
onChange: this.handleChangeMobile,
|
293
|
+
disablePastDays: disablePastDays,
|
294
|
+
disableFutureDays: disableFutureDays,
|
295
|
+
today: today,
|
296
|
+
minimumDate: minimumDate,
|
297
|
+
format: enableTime ? `${format} HH:mm` : format
|
282
298
|
}));
|
283
299
|
}
|
284
300
|
|
@@ -0,0 +1,89 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread";
|
3
|
+
import React from 'react';
|
4
|
+
import PropTypes from 'prop-types';
|
5
|
+
import HiFormControl from '../HiForm/HiFormControl';
|
6
|
+
import moment from 'moment-timezone';
|
7
|
+
import styles from './stylesheet';
|
8
|
+
import classNames from 'classnames';
|
9
|
+
import withStyles from '../styles/withStyles';
|
10
|
+
import HiInput from '../HiForm/HiInput';
|
11
|
+
|
12
|
+
class HiDatePickerMobile extends React.Component {
|
13
|
+
render() {
|
14
|
+
const {
|
15
|
+
classes,
|
16
|
+
id,
|
17
|
+
label,
|
18
|
+
required,
|
19
|
+
disabled,
|
20
|
+
error,
|
21
|
+
errorText,
|
22
|
+
helperIcon,
|
23
|
+
helperText,
|
24
|
+
enableTime,
|
25
|
+
value,
|
26
|
+
disablePastDays,
|
27
|
+
disableFutureDays,
|
28
|
+
minimumDate,
|
29
|
+
today,
|
30
|
+
range,
|
31
|
+
format
|
32
|
+
} = this.props;
|
33
|
+
|
34
|
+
const addtionalProps = _objectSpread({}, this.props.disabled && {
|
35
|
+
disabled: "disabled"
|
36
|
+
});
|
37
|
+
|
38
|
+
return React.createElement(HiFormControl, {
|
39
|
+
id: id,
|
40
|
+
label: label,
|
41
|
+
required: required,
|
42
|
+
disabled: disabled,
|
43
|
+
error: error,
|
44
|
+
errorText: errorText,
|
45
|
+
helperText: helperText,
|
46
|
+
helperIcon: helperIcon
|
47
|
+
}, React.createElement(HiInput, {
|
48
|
+
inputId: id,
|
49
|
+
name: id,
|
50
|
+
type: "text",
|
51
|
+
placeholder: this.props.placeholder,
|
52
|
+
value: !value ? '' : moment(value).format(format),
|
53
|
+
disabled: disabled
|
54
|
+
}), React.createElement("input", _extends({
|
55
|
+
className: classNames(classes.root, classes.rootMobile, {
|
56
|
+
[classes.mobileRangeRoot]: range
|
57
|
+
}),
|
58
|
+
id: id,
|
59
|
+
type: enableTime ? "datetime-local" : "date",
|
60
|
+
value: !value ? '' : enableTime ? moment(value).format('YYYY-MM-DDTHH:mm') : moment(value).format('YYYY-MM-DD'),
|
61
|
+
onChange: this.props.onChange,
|
62
|
+
min: disablePastDays ? today.format('YYYY-MM-DD') : minimumDate ? moment(minimumDate).format('YYYY-MM-DD') : '',
|
63
|
+
max: disableFutureDays ? today.format('YYYY-MM-DD') : ''
|
64
|
+
}, addtionalProps)));
|
65
|
+
}
|
66
|
+
|
67
|
+
}
|
68
|
+
|
69
|
+
HiDatePickerMobile.propTypes = process.env.NODE_ENV !== "production" ? {
|
70
|
+
classes: PropTypes.object,
|
71
|
+
disabled: PropTypes.bool,
|
72
|
+
disableFutureDays: PropTypes.bool,
|
73
|
+
disablePastDays: PropTypes.bool,
|
74
|
+
enableTime: PropTypes.bool,
|
75
|
+
error: PropTypes.bool,
|
76
|
+
errorText: PropTypes.string,
|
77
|
+
format: PropTypes.string,
|
78
|
+
helperIcon: PropTypes.string,
|
79
|
+
helperText: PropTypes.string,
|
80
|
+
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
81
|
+
label: PropTypes.string,
|
82
|
+
minimumDate: PropTypes.any,
|
83
|
+
onChange: PropTypes.func,
|
84
|
+
range: PropTypes.bool,
|
85
|
+
required: PropTypes.bool,
|
86
|
+
today: PropTypes.any,
|
87
|
+
value: PropTypes.any
|
88
|
+
} : {};
|
89
|
+
export default withStyles(styles)(HiDatePickerMobile);
|