@hipay/hipay-material-ui 2.0.0-beta.59 → 2.0.0-beta.61
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +118 -0
- package/HiCell/CellNumeric.js +1 -1
- package/HiDatePicker/HiDatePicker.js +48 -14
- package/HiDatePicker/HiDateRangePicker.js +119 -64
- package/HiDatePicker/HiDateRangeSelector.js +70 -47
- package/HiDatePicker/Overlays/YearPickerOverlay.js +8 -3
- package/HiDatePicker/stylesheet.js +32 -17
- package/HiForm/HiFormControl.js +26 -11
- package/HiForm/HiFormLabel.js +3 -1
- package/HiForm/HiInput.js +20 -1
- package/HiForm/HiUpload.js +290 -45
- package/HiForm/HiUploadField.js +19 -51
- package/HiForm/HiUploadInput.js +18 -7
- package/HiSelectNew/HiSelect.js +15 -16
- package/HiSelectableList/HiSelectableList.js +9 -0
- package/HiSelectableList/HiSelectableListItem.js +3 -7
- package/README.md +1 -1
- package/es/HiCell/CellNumeric.js +1 -1
- package/es/HiDatePicker/HiDatePicker.js +41 -12
- package/es/HiDatePicker/HiDateRangePicker.js +79 -28
- package/es/HiDatePicker/HiDateRangeSelector.js +59 -37
- package/es/HiDatePicker/Overlays/YearPickerOverlay.js +8 -3
- package/es/HiDatePicker/stylesheet.js +32 -17
- package/es/HiForm/HiFormControl.js +27 -11
- package/es/HiForm/HiFormLabel.js +3 -1
- package/es/HiForm/HiInput.js +19 -1
- package/es/HiForm/HiUpload.js +276 -35
- package/es/HiForm/HiUploadField.js +19 -43
- package/es/HiForm/HiUploadInput.js +16 -7
- package/es/HiSelectNew/HiSelect.js +15 -16
- package/es/HiSelectableList/HiSelectableList.js +9 -0
- package/es/HiSelectableList/HiSelectableListItem.js +3 -7
- package/es/styles/createPalette.js +1 -1
- package/es/utils/helpers.js +15 -6
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +4 -4
- package/styles/createPalette.js +1 -1
- package/umd/hipay-material-ui.development.js +6301 -383
- package/umd/hipay-material-ui.production.min.js +2 -2
- package/utils/helpers.js +15 -5
package/HiForm/HiUpload.js
CHANGED
@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
});
|
8
8
|
exports.default = exports.styles = void 0;
|
9
9
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
|
-
|
12
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13
11
|
|
14
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15
13
|
|
14
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
15
|
+
|
16
16
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
17
17
|
|
18
18
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
@@ -29,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
29
29
|
|
30
30
|
var _classnames = _interopRequireDefault(require("classnames"));
|
31
31
|
|
32
|
+
var _index = _interopRequireDefault(require("keycode/index"));
|
33
|
+
|
32
34
|
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
33
35
|
|
34
36
|
var _HiUploadInput = _interopRequireDefault(require("./HiUploadInput"));
|
@@ -38,7 +40,7 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
|
|
38
40
|
var styles = function styles(theme) {
|
39
41
|
return {
|
40
42
|
flexContainer: {
|
41
|
-
display: '
|
43
|
+
display: 'flex',
|
42
44
|
alignItems: 'center'
|
43
45
|
},
|
44
46
|
statusIcon: {
|
@@ -52,8 +54,10 @@ var styles = function styles(theme) {
|
|
52
54
|
color: "".concat(theme.palette.middle.main, " !important"),
|
53
55
|
fontSize: '80px'
|
54
56
|
},
|
57
|
+
dragOver: {},
|
55
58
|
inputContainer: {
|
56
|
-
flex: '1'
|
59
|
+
flex: '1',
|
60
|
+
width: 'calc(100% - 88px)'
|
57
61
|
},
|
58
62
|
empty: {
|
59
63
|
border: "1px solid ".concat(theme.palette.input.bottomLine),
|
@@ -67,7 +71,18 @@ var styles = function styles(theme) {
|
|
67
71
|
error: {
|
68
72
|
border: "1px solid ".concat(theme.palette.negative.main),
|
69
73
|
color: "".concat(theme.palette.negative.main, " !important")
|
70
|
-
}
|
74
|
+
},
|
75
|
+
fileButton: {
|
76
|
+
marginRight: 8,
|
77
|
+
'&$focusable': {
|
78
|
+
cursor: 'pointer',
|
79
|
+
'&:hover, &:focus, &$dragOver': {
|
80
|
+
border: "1px solid ".concat(theme.palette.primary.main),
|
81
|
+
color: "".concat(theme.palette.primary.main, " !important")
|
82
|
+
}
|
83
|
+
}
|
84
|
+
},
|
85
|
+
focusable: {}
|
71
86
|
};
|
72
87
|
};
|
73
88
|
|
@@ -79,38 +94,248 @@ function (_React$PureComponent) {
|
|
79
94
|
(0, _inherits2.default)(HiUpload, _React$PureComponent);
|
80
95
|
|
81
96
|
function HiUpload() {
|
97
|
+
var _this;
|
98
|
+
|
82
99
|
(0, _classCallCheck2.default)(this, HiUpload);
|
83
|
-
|
84
|
-
|
100
|
+
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiUpload).call(this));
|
101
|
+
|
102
|
+
_this.handleDrop = function (event) {
|
103
|
+
if (event.path[0].id === _this.uploadIconRef.props.id) {
|
104
|
+
event.preventDefault();
|
105
|
+
event.stopPropagation();
|
106
|
+
|
107
|
+
if (_this.state.droppable) {
|
108
|
+
var index = _this.getNextInputIndex();
|
109
|
+
|
110
|
+
var param = _this.handleFile(event.dataTransfer.files, index);
|
111
|
+
|
112
|
+
_this.setState({
|
113
|
+
dragOver: false
|
114
|
+
});
|
115
|
+
|
116
|
+
_this.props.onChange(param, 0);
|
117
|
+
} else {
|
118
|
+
_this.setState({
|
119
|
+
dragOver: false
|
120
|
+
});
|
121
|
+
}
|
122
|
+
}
|
123
|
+
};
|
124
|
+
|
125
|
+
_this.handleDragEnter = function (event) {
|
126
|
+
event.preventDefault();
|
127
|
+
event.stopPropagation();
|
128
|
+
|
129
|
+
if (event.path[0].id === _this.uploadIconRef.props.id) {
|
130
|
+
if (event.dataTransfer.items.length !== 1) {
|
131
|
+
event.dataTransfer.dropEffect = 'none';
|
132
|
+
|
133
|
+
_this.props.onChange({
|
134
|
+
errorMessage: _this.props.translations.errorDragEnter,
|
135
|
+
value: null
|
136
|
+
}, 0);
|
137
|
+
|
138
|
+
_this.setState({
|
139
|
+
dragOver: true
|
140
|
+
});
|
141
|
+
} else {
|
142
|
+
_this.setState({
|
143
|
+
droppable: true,
|
144
|
+
dragOver: true
|
145
|
+
});
|
146
|
+
}
|
147
|
+
}
|
148
|
+
};
|
149
|
+
|
150
|
+
_this.handleDragLeave = function (event) {
|
151
|
+
event.preventDefault();
|
152
|
+
event.stopPropagation();
|
153
|
+
|
154
|
+
if (event.path[0].id === _this.uploadIconRef.props.id && event.relatedTarget.parentElement !== _this.uploadFieldRef) {
|
155
|
+
_this.props.onChange({
|
156
|
+
errorMessage: '',
|
157
|
+
value: null
|
158
|
+
}, 0);
|
159
|
+
|
160
|
+
_this.setState({
|
161
|
+
droppable: false,
|
162
|
+
dragOver: false
|
163
|
+
});
|
164
|
+
}
|
165
|
+
};
|
166
|
+
|
167
|
+
_this.handleChange = function (event) {
|
168
|
+
var index = _this.getNextInputIndex();
|
169
|
+
|
170
|
+
var param = _this.handleFile(event.target.files, index);
|
171
|
+
|
172
|
+
_this.props.onChange(param, index);
|
173
|
+
};
|
174
|
+
|
175
|
+
_this.handleEmptyField = function (event) {
|
176
|
+
event.target.value = '';
|
177
|
+
};
|
178
|
+
|
179
|
+
_this.handleKeyPress = function (event) {
|
180
|
+
var key = (0, _index.default)(event);
|
181
|
+
|
182
|
+
if (key === 'enter' || key === 'space') {
|
183
|
+
event.preventDefault();
|
184
|
+
|
185
|
+
_this.uploadInput.click();
|
186
|
+
}
|
187
|
+
};
|
188
|
+
|
189
|
+
_this.handleFile = function (files, index) {
|
190
|
+
var error = false;
|
191
|
+
var errorMessage = '';
|
192
|
+
var file = null;
|
193
|
+
|
194
|
+
if (files.length === 1) {
|
195
|
+
file = files[0];
|
196
|
+
|
197
|
+
if (_this.props.inputs[index] && file.size > _this.props.inputs[index].maxSize) {
|
198
|
+
errorMessage += _this.props.translations.errorSize.replace('maxSize', _this.props.inputs[index].maxSize / 1000000);
|
199
|
+
error = true;
|
200
|
+
}
|
201
|
+
|
202
|
+
if (_this.props.inputs[index] && _this.props.inputs[index].acceptedTypes && _this.props.inputs[index].acceptedTypes.length !== 0 && _this.props.inputs[index].acceptedTypes.indexOf(file.type) === -1) {
|
203
|
+
errorMessage += _this.props.translations.errorType;
|
204
|
+
error = true;
|
205
|
+
}
|
206
|
+
} else {
|
207
|
+
errorMessage = _this.props.translations.errorDropMultiple;
|
208
|
+
}
|
209
|
+
|
210
|
+
return {
|
211
|
+
errorMessage: errorMessage,
|
212
|
+
error: error,
|
213
|
+
value: file
|
214
|
+
};
|
215
|
+
};
|
216
|
+
|
217
|
+
_this.createInputs = function (others) {
|
218
|
+
var _this$props = _this.props,
|
219
|
+
inputs = _this$props.inputs,
|
220
|
+
values = _this$props.values;
|
221
|
+
var files = inputs; // unlimited number of files
|
222
|
+
|
223
|
+
if (inputs.length === 0) {
|
224
|
+
files = values;
|
225
|
+
}
|
226
|
+
|
227
|
+
var inputComponents = [];
|
228
|
+
|
229
|
+
for (var i = 0; i < files.length; i += 1) {
|
230
|
+
if (files.length > 1 || values[i] && values[i].value) {
|
231
|
+
inputComponents.push(_react.default.createElement(_HiUploadInput.default, (0, _extends2.default)({
|
232
|
+
maxSize: inputs[i] ? inputs[i].maxSize : undefined,
|
233
|
+
acceptedTypes: inputs[i] ? inputs[i].acceptedTypes : undefined,
|
234
|
+
placeholder: inputs[i] ? inputs[i].placeholder : undefined,
|
235
|
+
value: values[i] ? values[i].value : null,
|
236
|
+
error: values[i] ? values[i].error : null,
|
237
|
+
errorMessage: values[i] ? values[i].errorMessage : null,
|
238
|
+
onSeeFile: _this.handleSeeFile,
|
239
|
+
onDeleteFile: _this.props.onDeleteFile,
|
240
|
+
onChange: _this.props.onChange,
|
241
|
+
index: i,
|
242
|
+
key: inputs[i] ? inputs[i].id : "doc-".concat(i)
|
243
|
+
}, others)));
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
247
|
+
return inputComponents;
|
248
|
+
};
|
249
|
+
|
250
|
+
_this.uploadFieldRef = void 0;
|
251
|
+
_this.state = {
|
252
|
+
dragOver: false,
|
253
|
+
droppable: false
|
254
|
+
};
|
255
|
+
return _this;
|
256
|
+
} // When component mounts, we add eventListeners to handle the file drag and drop
|
257
|
+
|
85
258
|
|
86
259
|
(0, _createClass2.default)(HiUpload, [{
|
260
|
+
key: "componentDidMount",
|
261
|
+
value: function componentDidMount() {
|
262
|
+
this.uploadFieldRef.addEventListener('dragenter', this.handleDragEnter, false);
|
263
|
+
this.uploadFieldRef.addEventListener('dragleave', this.handleDragLeave, false);
|
264
|
+
this.uploadFieldRef.addEventListener('dragover', function (event) {
|
265
|
+
event.preventDefault();
|
266
|
+
}, false);
|
267
|
+
this.uploadFieldRef.addEventListener('drop', this.handleDrop, false);
|
268
|
+
}
|
269
|
+
}, {
|
270
|
+
key: "componentWillUnmount",
|
271
|
+
value: function componentWillUnmount() {
|
272
|
+
this.uploadFieldRef.removeEventListener('dragenter', this.handleDragEnter, false);
|
273
|
+
this.uploadFieldRef.removeEventListener('dragleave', this.handleDragLeave, false);
|
274
|
+
this.uploadFieldRef.removeEventListener('dragover', function (event) {
|
275
|
+
event.preventDefault();
|
276
|
+
}, false);
|
277
|
+
this.uploadFieldRef.removeEventListener('drop', this.handleDrop, false);
|
278
|
+
}
|
279
|
+
}, {
|
280
|
+
key: "getNextInputIndex",
|
281
|
+
value: function getNextInputIndex() {
|
282
|
+
var index = 0; // Add an input at the end
|
283
|
+
|
284
|
+
if (!this.props.inputs.length) {
|
285
|
+
index = this.props.values.length + 1;
|
286
|
+
} else {
|
287
|
+
// First empty input
|
288
|
+
for (var i = 0; i < this.props.values.length; i += 1) {
|
289
|
+
if (!this.props.values[i] || this.props.values[i].error || !this.props.values[i].value) {
|
290
|
+
index = i;
|
291
|
+
break;
|
292
|
+
}
|
293
|
+
}
|
294
|
+
}
|
295
|
+
|
296
|
+
return index;
|
297
|
+
} // Action when files are dropped on the field
|
298
|
+
|
299
|
+
}, {
|
87
300
|
key: "render",
|
88
301
|
value: function render() {
|
89
302
|
var _classNames,
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
303
|
+
_classNames2,
|
304
|
+
_this2 = this;
|
305
|
+
|
306
|
+
var _this$props2 = this.props,
|
307
|
+
id = _this$props2.id,
|
308
|
+
inputs = _this$props2.inputs,
|
309
|
+
classes = _this$props2.classes,
|
310
|
+
values = _this$props2.values,
|
311
|
+
focused = _this$props2.focused,
|
312
|
+
others = (0, _objectWithoutProperties2.default)(_this$props2, ["id", "inputs", "classes", "values", "focused"]);
|
313
|
+
var _this$state = this.state,
|
314
|
+
dragOver = _this$state.dragOver,
|
315
|
+
droppable = _this$state.droppable;
|
97
316
|
var complete = true;
|
98
317
|
var empty = true;
|
99
|
-
var error = false;
|
100
|
-
|
101
|
-
for (var i = 0, len = values.length; i < len; i += 1) {
|
102
|
-
var value = values[i];
|
318
|
+
var error = false; // For unlimited inputs: always grey
|
103
319
|
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
320
|
+
if (!inputs.length) {
|
321
|
+
complete = false;
|
322
|
+
} else if (values.length === 0 || inputs.length > 0 && inputs.length !== values.length) {
|
323
|
+
complete = false;
|
324
|
+
} else {
|
325
|
+
for (var i = 0, len = values.length; i < len; i += 1) {
|
326
|
+
var value = values[i];
|
327
|
+
|
328
|
+
if (value !== undefined) {
|
329
|
+
complete = value.value === null || value.error ? false : complete;
|
330
|
+
empty = value.value !== null && !value.error ? false : empty;
|
331
|
+
error = value.error || error;
|
332
|
+
} else {
|
333
|
+
complete = false;
|
334
|
+
}
|
110
335
|
}
|
111
336
|
}
|
112
337
|
|
113
|
-
var statusClass = (0, _classnames.default)(classes.statusIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.empty, empty), (0, _defineProperty2.default)(_classNames, classes.complete, complete),
|
338
|
+
var statusClass = (0, _classnames.default)(classes.statusIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.empty, empty), (0, _defineProperty2.default)(_classNames, classes.complete, complete), _classNames));
|
114
339
|
var icon;
|
115
340
|
|
116
341
|
if (error) {
|
@@ -121,29 +346,43 @@ function (_React$PureComponent) {
|
|
121
346
|
icon = 'file_upload';
|
122
347
|
}
|
123
348
|
|
349
|
+
var focusable = true;
|
350
|
+
|
351
|
+
if (complete && values.length > 1) {
|
352
|
+
focusable = false;
|
353
|
+
}
|
354
|
+
|
355
|
+
var iconClass = (0, _classnames.default)(statusClass, classes.fileButton, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.dragOver, dragOver), (0, _defineProperty2.default)(_classNames2, classes.droppable, droppable), (0, _defineProperty2.default)(_classNames2, classes.focused, focused), (0, _defineProperty2.default)(_classNames2, classes.error, error && !focused), (0, _defineProperty2.default)(_classNames2, classes.focusable, focusable), _classNames2));
|
124
356
|
return _react.default.createElement("div", {
|
125
357
|
className: classes.flexContainer
|
126
|
-
}, _react.default.createElement(
|
127
|
-
|
358
|
+
}, _react.default.createElement("label", {
|
359
|
+
htmlFor: "flat-button-file",
|
360
|
+
ref: function ref(label) {
|
361
|
+
_this2.uploadFieldRef = label;
|
362
|
+
},
|
363
|
+
tabIndex: "-1"
|
364
|
+
}, _react.default.createElement("input", {
|
365
|
+
hidden: true,
|
366
|
+
id: "flat-button-file",
|
367
|
+
type: !complete || values.length === 1 ? 'file' : 'hidden',
|
368
|
+
onChange: this.handleChange,
|
369
|
+
onClick: focusable ? this.handleEmptyField : undefined,
|
370
|
+
ref: function ref(el) {
|
371
|
+
_this2.uploadInput = el;
|
372
|
+
}
|
373
|
+
}), _react.default.createElement(_HiIcon.default, {
|
374
|
+
ref: function ref(uploadIcon) {
|
375
|
+
_this2.uploadIconRef = uploadIcon;
|
376
|
+
},
|
377
|
+
id: "iconUpload-".concat(id),
|
378
|
+
className: iconClass,
|
128
379
|
icon: icon,
|
129
|
-
size: 32
|
130
|
-
|
380
|
+
size: 32,
|
381
|
+
tabIndex: focusable ? '0' : '-1',
|
382
|
+
onKeyPress: this.handleKeyPress
|
383
|
+
})), _react.default.createElement("div", {
|
131
384
|
className: classes.inputContainer
|
132
|
-
},
|
133
|
-
return _react.default.createElement(_HiUploadInput.default, (0, _extends2.default)({
|
134
|
-
maxSize: item.maxSize,
|
135
|
-
acceptedTypes: item.acceptedTypes,
|
136
|
-
placeholder: item.placeholder,
|
137
|
-
value: values[index] ? values[index].value : null,
|
138
|
-
error: values[index] ? values[index].error : null,
|
139
|
-
errorMessage: values[index] ? values[index].errorMessage : null,
|
140
|
-
onSeeFile: _this.handleSeeFile,
|
141
|
-
onDeleteFile: _this.props.onDeleteFile,
|
142
|
-
onChange: _this.props.onChange,
|
143
|
-
index: index,
|
144
|
-
key: item.id
|
145
|
-
}, others));
|
146
|
-
})));
|
385
|
+
}, this.createInputs(others)));
|
147
386
|
}
|
148
387
|
}]);
|
149
388
|
return HiUpload;
|
@@ -170,8 +409,14 @@ HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
170
409
|
*/
|
171
410
|
helperText: _propTypes.default.string,
|
172
411
|
|
412
|
+
/**
|
413
|
+
* id du composant
|
414
|
+
*/
|
415
|
+
id: _propTypes.default.string.isRequired,
|
416
|
+
|
173
417
|
/**
|
174
418
|
* Array containing each of the inputs the component has to show (represented by an object).
|
419
|
+
* If empty => unlimited number of files accepted
|
175
420
|
*/
|
176
421
|
inputs: _propTypes.default.array.isRequired,
|
177
422
|
|
@@ -191,7 +436,7 @@ HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
191
436
|
onSeeFile: _propTypes.default.func,
|
192
437
|
|
193
438
|
/**
|
194
|
-
*
|
439
|
+
* True if can upload an unlimited number of files
|
195
440
|
*/
|
196
441
|
values: _propTypes.default.array
|
197
442
|
} : {};
|
package/HiForm/HiUploadField.js
CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.default =
|
8
|
+
exports.default = void 0;
|
9
9
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
11
|
|
@@ -25,51 +25,10 @@ var _react = _interopRequireDefault(require("react"));
|
|
25
25
|
|
26
26
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
27
27
|
|
28
|
-
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
29
|
-
|
30
28
|
var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
|
31
29
|
|
32
30
|
var _HiUpload = _interopRequireDefault(require("./HiUpload"));
|
33
31
|
|
34
|
-
var styles = function styles(theme) {
|
35
|
-
return {
|
36
|
-
flexContainer: {
|
37
|
-
display: ' flex',
|
38
|
-
alignItems: 'center'
|
39
|
-
},
|
40
|
-
statusIcon: {
|
41
|
-
height: '80px',
|
42
|
-
width: '80px',
|
43
|
-
marginRight: '8px',
|
44
|
-
padding: '24px',
|
45
|
-
borderRadius: '2px',
|
46
|
-
backgroundColor: theme.palette.local.background2,
|
47
|
-
border: "1px solid ".concat(theme.palette.middle.main),
|
48
|
-
color: "".concat(theme.palette.middle.main, " !important"),
|
49
|
-
fontSize: '80px'
|
50
|
-
},
|
51
|
-
inputContainer: {
|
52
|
-
flex: '1',
|
53
|
-
width: 'calc(100% - 88px)'
|
54
|
-
},
|
55
|
-
empty: {
|
56
|
-
border: "1px solid ".concat(theme.palette.input.bottomLine),
|
57
|
-
color: "".concat(theme.palette.neutral.main, " !important")
|
58
|
-
},
|
59
|
-
complete: {
|
60
|
-
border: "1px solid ".concat(theme.palette.positive.main),
|
61
|
-
color: "".concat(theme.palette.positive.main, " !important"),
|
62
|
-
fontSize: '32px'
|
63
|
-
},
|
64
|
-
error: {
|
65
|
-
border: "1px solid ".concat(theme.palette.negative.main),
|
66
|
-
color: "".concat(theme.palette.negative.main, " !important")
|
67
|
-
}
|
68
|
-
};
|
69
|
-
};
|
70
|
-
|
71
|
-
exports.styles = styles;
|
72
|
-
|
73
32
|
var HiUploadField =
|
74
33
|
/*#__PURE__*/
|
75
34
|
function (_React$PureComponent) {
|
@@ -89,7 +48,8 @@ function (_React$PureComponent) {
|
|
89
48
|
helperIcon = _this$props.helperIcon,
|
90
49
|
helperText = _this$props.helperText,
|
91
50
|
values = _this$props.values,
|
92
|
-
|
51
|
+
fullWidth = _this$props.fullWidth,
|
52
|
+
others = (0, _objectWithoutProperties2.default)(_this$props, ["className", "label", "helperIcon", "helperText", "values", "fullWidth"]);
|
93
53
|
var empty = true;
|
94
54
|
var error = false;
|
95
55
|
var errorText = '';
|
@@ -110,7 +70,8 @@ function (_React$PureComponent) {
|
|
110
70
|
errorText: errorText,
|
111
71
|
error: error,
|
112
72
|
helperIcon: helperIcon,
|
113
|
-
helperText: helperText
|
73
|
+
helperText: helperText,
|
74
|
+
fullWidth: fullWidth
|
114
75
|
}, _react.default.createElement(_HiUpload.default, (0, _extends2.default)({
|
115
76
|
values: values
|
116
77
|
}, others)));
|
@@ -121,7 +82,9 @@ function (_React$PureComponent) {
|
|
121
82
|
|
122
83
|
HiUploadField.defaultProps = {
|
123
84
|
helperText: '',
|
124
|
-
helperIcon: false
|
85
|
+
helperIcon: false,
|
86
|
+
seeFile: true,
|
87
|
+
fullWidth: false
|
125
88
|
};
|
126
89
|
HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
|
127
90
|
/**
|
@@ -134,6 +97,11 @@ HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
134
97
|
*/
|
135
98
|
className: _propTypes.default.string,
|
136
99
|
|
100
|
+
/**
|
101
|
+
* Si "true", applique l'attribut css correspondant
|
102
|
+
*/
|
103
|
+
fullWidth: _propTypes.default.bool,
|
104
|
+
|
137
105
|
/**
|
138
106
|
* Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
|
139
107
|
*/
|
@@ -169,15 +137,15 @@ HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
169
137
|
*/
|
170
138
|
onSeeFile: _propTypes.default.func,
|
171
139
|
|
140
|
+
/**
|
141
|
+
* set to false to hide the eye button
|
142
|
+
*/
|
143
|
+
seeFile: _propTypes.default.bool,
|
144
|
+
|
172
145
|
/**
|
173
146
|
* Valeurs des inputs
|
174
147
|
*/
|
175
148
|
values: _propTypes.default.array
|
176
149
|
} : {};
|
177
|
-
|
178
|
-
var _default = (0, _withStyles.default)(styles, {
|
179
|
-
hiComponent: true,
|
180
|
-
name: 'HmuiHiUploadField'
|
181
|
-
})(HiUploadField);
|
182
|
-
|
150
|
+
var _default = HiUploadField;
|
183
151
|
exports.default = _default;
|
package/HiForm/HiUploadInput.js
CHANGED
@@ -46,6 +46,7 @@ var styles = function styles(theme) {
|
|
46
46
|
height: 40,
|
47
47
|
display: 'inline-flex',
|
48
48
|
justifyContent: 'flex-start',
|
49
|
+
cursor: 'pointer',
|
49
50
|
'&$focused, &$dragOver': {
|
50
51
|
backgroundColor: theme.palette.global.background1
|
51
52
|
},
|
@@ -112,7 +113,7 @@ var styles = function styles(theme) {
|
|
112
113
|
transform: 'scaleX(1)'
|
113
114
|
},
|
114
115
|
'&$error': {
|
115
|
-
borderBottom: "1px solid ".concat(theme.palette.negative.
|
116
|
+
borderBottom: "1px solid ".concat(theme.palette.negative.main)
|
116
117
|
}
|
117
118
|
}
|
118
119
|
},
|
@@ -120,7 +121,8 @@ var styles = function styles(theme) {
|
|
120
121
|
color: "".concat(theme.palette.action.disabled),
|
121
122
|
'&:before': {
|
122
123
|
display: 'none'
|
123
|
-
}
|
124
|
+
},
|
125
|
+
cursor: 'default'
|
124
126
|
},
|
125
127
|
focused: {
|
126
128
|
backgroundColor: theme.palette.background3
|
@@ -137,6 +139,7 @@ var styles = function styles(theme) {
|
|
137
139
|
height: 39,
|
138
140
|
display: 'inline-flex',
|
139
141
|
width: '100%',
|
142
|
+
cursor: 'pointer',
|
140
143
|
'&$empty': {
|
141
144
|
opacity: 0.42
|
142
145
|
}
|
@@ -160,7 +163,7 @@ var styles = function styles(theme) {
|
|
160
163
|
}),
|
161
164
|
'&:hover': {
|
162
165
|
color: 'inherit',
|
163
|
-
|
166
|
+
background: 'none'
|
164
167
|
}
|
165
168
|
}
|
166
169
|
};
|
@@ -344,6 +347,12 @@ function (_React$Component) {
|
|
344
347
|
droppable = _this$state.droppable; // On utilise classNames pour variabiliser les styles et merger les classes appliquées
|
345
348
|
|
346
349
|
var rootClass = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), (0, _defineProperty2.default)(_classNames, classes.dragOver, dragOver), (0, _defineProperty2.default)(_classNames, classes.droppable, droppable), _classNames));
|
350
|
+
|
351
|
+
var eyeButton = _react.default.createElement(_HiIconButton.default, {
|
352
|
+
className: classes.icon,
|
353
|
+
onClick: this.handleSeeFile
|
354
|
+
}, _ref);
|
355
|
+
|
347
356
|
return _react.default.createElement("div", {
|
348
357
|
className: rootClass
|
349
358
|
}, _react.default.createElement("label", {
|
@@ -358,10 +367,7 @@ function (_React$Component) {
|
|
358
367
|
onChange: this.handleChange
|
359
368
|
})), value === null || _react.default.createElement("div", {
|
360
369
|
className: classes.endAdornment
|
361
|
-
}, _react.default.createElement(_HiIconButton.default, {
|
362
|
-
className: classes.icon,
|
363
|
-
onClick: this.handleSeeFile
|
364
|
-
}, _ref), _react.default.createElement(_HiIconButton.default, {
|
370
|
+
}, this.props.seeFile && eyeButton, _react.default.createElement(_HiIconButton.default, {
|
365
371
|
className: classes.icon,
|
366
372
|
onClick: this.handleDeleteFile
|
367
373
|
}, _ref2)));
|
@@ -440,6 +446,11 @@ HiUploadInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
440
446
|
*/
|
441
447
|
placeholder: _propTypes.default.string,
|
442
448
|
|
449
|
+
/**
|
450
|
+
* set to false to hide the eye button
|
451
|
+
*/
|
452
|
+
seeFile: _propTypes.default.bool,
|
453
|
+
|
443
454
|
/**
|
444
455
|
* The translations of the error messages.
|
445
456
|
*/
|
package/HiSelectNew/HiSelect.js
CHANGED
@@ -271,22 +271,20 @@ function (_React$PureComponent) {
|
|
271
271
|
};
|
272
272
|
|
273
273
|
_this.focusOnSelectedItem = function (selectedValue) {
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
}
|
274
|
+
setTimeout(function () {
|
275
|
+
// On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
|
276
|
+
var item = _this.overlay.getElementsByTagName('li')[0];
|
277
|
+
|
278
|
+
if (selectedValue && typeof selectedValue === 'string') {
|
279
|
+
item = _this.overlay.getElementsByTagName('li')[selectedValue];
|
280
|
+
} else if (selectedValue && typeof selectedValue === 'number') {
|
281
|
+
item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
|
282
|
+
}
|
284
283
|
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
}
|
284
|
+
if (item) {
|
285
|
+
item.focus();
|
286
|
+
}
|
287
|
+
}, 1);
|
290
288
|
};
|
291
289
|
|
292
290
|
_this.handleClickAway = function (event) {
|
@@ -528,11 +526,12 @@ function (_React$PureComponent) {
|
|
528
526
|
suggestions: props.options,
|
529
527
|
openDown: true
|
530
528
|
};
|
529
|
+
_this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
531
530
|
_this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
532
531
|
_this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
533
532
|
_this.handleClickAway = _this.handleClickAway.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
534
533
|
_this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
535
|
-
_this.
|
534
|
+
_this.handleKeyDownInput = _this.handleKeyDownInput.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
536
535
|
_this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
537
536
|
_this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
538
537
|
_this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|