@hipay/hipay-material-ui 2.1.0-RC1 → 2.1.0
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 +154 -0
- package/HiDatePicker/HiDatePicker.js +0 -4
- package/HiExpansionPanel/HiExpansionPanel.js +19 -10
- package/HiForm/index.js +17 -1
- package/HiNotice/HiKPI.js +7 -7
- package/HiSelect/HiSelect.js +49 -51
- package/HiSelect/HiSuggestSelect.js +62 -54
- package/HiSelectableList/HiSelectableList.js +28 -9
- package/HiSelectableList/HiSelectableListItem.js +1 -1
- package/es/HiDatePicker/HiDatePicker.js +0 -2
- package/es/HiExpansionPanel/HiExpansionPanel.js +19 -10
- package/es/HiForm/index.js +3 -1
- package/es/HiNotice/HiKPI.js +7 -7
- package/es/HiSelect/HiSelect.js +30 -27
- package/es/HiSelect/HiSuggestSelect.js +61 -52
- package/es/HiSelectableList/HiSelectableList.js +26 -8
- package/es/HiSelectableList/HiSelectableListItem.js +1 -1
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
@@ -19,8 +19,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
19
19
|
|
20
20
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
21
21
|
|
22
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
23
|
-
|
24
22
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
25
23
|
|
26
24
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
@@ -87,7 +85,8 @@ function (_React$PureComponent) {
|
|
87
85
|
value: function getDerivedStateFromProps(props, state) {
|
88
86
|
if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
|
89
87
|
return {
|
90
|
-
options: props.options
|
88
|
+
options: props.options,
|
89
|
+
suggestionFocusIndex: -1
|
91
90
|
};
|
92
91
|
}
|
93
92
|
|
@@ -101,6 +100,14 @@ function (_React$PureComponent) {
|
|
101
100
|
(0, _classCallCheck2.default)(this, HiSuggestSelect);
|
102
101
|
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSuggestSelect).call(this, props));
|
103
102
|
|
103
|
+
_this.getInputElement = function (el) {
|
104
|
+
_this.textInput = el;
|
105
|
+
|
106
|
+
if (_this.props.inputRef) {
|
107
|
+
_this.props.inputRef(_this.textInput);
|
108
|
+
}
|
109
|
+
};
|
110
|
+
|
104
111
|
_this.handleSelect = function (event, value) {
|
105
112
|
document.body.style.overflow = 'auto';
|
106
113
|
|
@@ -144,74 +151,73 @@ function (_React$PureComponent) {
|
|
144
151
|
};
|
145
152
|
|
146
153
|
_this.handleKeyDownSearch = function (event) {
|
147
|
-
if (event.key === 'ArrowDown'
|
148
|
-
|
154
|
+
if (event.key === 'ArrowDown') {
|
155
|
+
event.preventDefault();
|
149
156
|
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
157
|
+
if (_this.state.suggestionFocusIndex < _this.props.options.length - 1) {
|
158
|
+
_this.setState(function (prevState) {
|
159
|
+
return {
|
160
|
+
suggestionFocusIndex: prevState.suggestionFocusIndex + 1
|
161
|
+
};
|
162
|
+
});
|
163
|
+
}
|
164
|
+
} else if (event.key === 'ArrowUp') {
|
165
|
+
event.preventDefault();
|
154
166
|
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
167
|
+
if (_this.state.suggestionFocusIndex >= 0) {
|
168
|
+
_this.setState(function (prevState) {
|
169
|
+
return {
|
170
|
+
suggestionFocusIndex: prevState.suggestionFocusIndex - 1
|
171
|
+
};
|
172
|
+
});
|
173
|
+
}
|
174
|
+
} else if (event.key === 'Enter' && _this.state.suggestionFocusIndex >= 0) {
|
175
|
+
event.preventDefault(); // Suggestion focused
|
176
|
+
|
177
|
+
_this.handleSelect(event, _this.state.options[_this.state.suggestionFocusIndex]);
|
160
178
|
} else if (event.key === 'Escape') {
|
161
179
|
_this.setState({
|
162
|
-
options: []
|
180
|
+
options: [],
|
181
|
+
suggestionFocusIndex: -1
|
163
182
|
});
|
164
183
|
}
|
165
184
|
};
|
166
185
|
|
167
|
-
_this.
|
168
|
-
|
169
|
-
options: props.options
|
170
|
-
};
|
171
|
-
_this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
|
172
|
-
_this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
|
173
|
-
_this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
|
174
|
-
_this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)(_this));
|
175
|
-
return _this;
|
176
|
-
}
|
177
|
-
|
178
|
-
(0, _createClass2.default)(HiSuggestSelect, [{
|
179
|
-
key: "getInputElement",
|
180
|
-
value: function getInputElement(el) {
|
181
|
-
this.textInput = el;
|
182
|
-
|
183
|
-
if (this.props.inputRef) {
|
184
|
-
this.props.inputRef(this.textInput);
|
185
|
-
}
|
186
|
-
}
|
187
|
-
}, {
|
188
|
-
key: "handleFocus",
|
189
|
-
value: function handleFocus(event) {
|
190
|
-
this.setState({
|
186
|
+
_this.handleFocus = function (event) {
|
187
|
+
_this.setState({
|
191
188
|
focused: true
|
192
189
|
});
|
193
190
|
|
194
|
-
if (
|
195
|
-
|
191
|
+
if (_this.props.onFocusInput) {
|
192
|
+
_this.props.onFocusInput(event);
|
196
193
|
}
|
197
|
-
}
|
198
|
-
|
199
|
-
|
200
|
-
value: function handleBlur(event) {
|
194
|
+
};
|
195
|
+
|
196
|
+
_this.handleBlur = function (event) {
|
201
197
|
// Si on click sur un élément de HiInput, on garde le focus
|
202
198
|
// Par exemple sur l'icone reset
|
203
|
-
if (!event.relatedTarget || !
|
204
|
-
|
199
|
+
if (!event.relatedTarget || !_this.overlay || !_this.overlay.contains(event.relatedTarget)) {
|
200
|
+
_this.setState({
|
205
201
|
options: [],
|
206
|
-
focused: false
|
202
|
+
focused: false,
|
203
|
+
suggestionFocusIndex: -1
|
207
204
|
});
|
208
205
|
|
209
|
-
if (
|
210
|
-
|
206
|
+
if (_this.props.onBlurInput) {
|
207
|
+
_this.props.onBlurInput(event);
|
211
208
|
}
|
212
209
|
}
|
213
|
-
}
|
214
|
-
|
210
|
+
};
|
211
|
+
|
212
|
+
_this.state = {
|
213
|
+
focused: false,
|
214
|
+
options: props.options,
|
215
|
+
suggestionFocusIndex: -1
|
216
|
+
};
|
217
|
+
return _this;
|
218
|
+
}
|
219
|
+
|
220
|
+
(0, _createClass2.default)(HiSuggestSelect, [{
|
215
221
|
key: "render",
|
216
222
|
value: function render() {
|
217
223
|
var _this2 = this;
|
@@ -229,7 +235,8 @@ function (_React$PureComponent) {
|
|
229
235
|
otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align", "inputClasses"]);
|
230
236
|
var _this$state = this.state,
|
231
237
|
focused = _this$state.focused,
|
232
|
-
options = _this$state.options
|
238
|
+
options = _this$state.options,
|
239
|
+
suggestionFocusIndex = _this$state.suggestionFocusIndex;
|
233
240
|
var optionsShown = options; // If loading
|
234
241
|
|
235
242
|
if (loading) {
|
@@ -288,7 +295,8 @@ function (_React$PureComponent) {
|
|
288
295
|
hideCheckbox: true,
|
289
296
|
onSelect: this.handleSelect,
|
290
297
|
translations: translations,
|
291
|
-
onKeyDown: this.handleKeyDown
|
298
|
+
onKeyDown: this.handleKeyDown,
|
299
|
+
suggestionFocusIndex: suggestionFocusIndex
|
292
300
|
})))));
|
293
301
|
}
|
294
302
|
}]);
|
@@ -11,6 +11,8 @@ exports.default = exports.styles = void 0;
|
|
11
11
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
13
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
|
+
|
14
16
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15
17
|
|
16
18
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
@@ -39,10 +41,16 @@ var _keycode = _interopRequireDefault(require("keycode"));
|
|
39
41
|
|
40
42
|
var _reactLazyload = _interopRequireWildcard(require("react-lazyload"));
|
41
43
|
|
42
|
-
var
|
44
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
45
|
+
|
46
|
+
var styles = function styles(theme) {
|
43
47
|
return {
|
44
48
|
root: {
|
45
49
|
padding: 0
|
50
|
+
},
|
51
|
+
suggestionFocus: {
|
52
|
+
backgroundColor: theme.palette.action.hover,
|
53
|
+
fontWeight: theme.typography.fontWeightMedium
|
46
54
|
}
|
47
55
|
};
|
48
56
|
};
|
@@ -96,8 +104,8 @@ function (_React$PureComponent) {
|
|
96
104
|
}
|
97
105
|
};
|
98
106
|
|
99
|
-
_this.buildRecursiveListItem = function (item) {
|
100
|
-
var level = arguments.length >
|
107
|
+
_this.buildRecursiveListItem = function (item, index) {
|
108
|
+
var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
101
109
|
var _this$props = _this.props,
|
102
110
|
checkedIcon = _this$props.checkedIcon,
|
103
111
|
disabled = _this$props.disabled,
|
@@ -110,7 +118,9 @@ function (_React$PureComponent) {
|
|
110
118
|
sort = _this$props.sort,
|
111
119
|
onKeyDown = _this$props.onKeyDown,
|
112
120
|
onKeyUp = _this$props.onKeyUp,
|
113
|
-
|
121
|
+
suggestionFocusIndex = _this$props.suggestionFocusIndex,
|
122
|
+
classes = _this$props.classes,
|
123
|
+
others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
|
114
124
|
|
115
125
|
if (sort && item.children) {
|
116
126
|
item.children.sort(_this.compareItem);
|
@@ -147,11 +157,14 @@ function (_React$PureComponent) {
|
|
147
157
|
onKeyUp: onKeyUp,
|
148
158
|
selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
|
149
159
|
,
|
150
|
-
item: item
|
160
|
+
item: item,
|
161
|
+
classes: {
|
162
|
+
listItem: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.suggestionFocus, index === suggestionFocusIndex))
|
163
|
+
}
|
151
164
|
}, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
|
152
165
|
return !(subItem.displayed === false);
|
153
166
|
}).map(function (subItem) {
|
154
|
-
return _this.buildRecursiveListItem(subItem, level + 1);
|
167
|
+
return _this.buildRecursiveListItem(subItem, index, level + 1);
|
155
168
|
}));
|
156
169
|
|
157
170
|
if (lazy) {
|
@@ -255,8 +268,8 @@ function (_React$PureComponent) {
|
|
255
268
|
}, itemList.filter(function (item) {
|
256
269
|
return !(item.displayed === false);
|
257
270
|
}) // don't remove if undefined
|
258
|
-
.map(function (item) {
|
259
|
-
return _this3.buildRecursiveListItem(item);
|
271
|
+
.map(function (item, index) {
|
272
|
+
return _this3.buildRecursiveListItem(item, index);
|
260
273
|
}));
|
261
274
|
}
|
262
275
|
}]);
|
@@ -347,6 +360,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
347
360
|
*/
|
348
361
|
selectedItemIdList: _propTypes.default.array,
|
349
362
|
|
363
|
+
/**
|
364
|
+
* Index de l'item "focus"
|
365
|
+
*/
|
366
|
+
suggestionFocusIndex: _propTypes.default.number,
|
367
|
+
|
350
368
|
/**
|
351
369
|
* Tri des éléments selon leur label
|
352
370
|
*/
|
@@ -365,7 +383,8 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
365
383
|
|
366
384
|
var _default = (0, _withStyles.default)(styles, {
|
367
385
|
hiComponent: true,
|
368
|
-
name: 'HmuiHiSelectableList'
|
386
|
+
name: 'HmuiHiSelectableList',
|
387
|
+
index: 51
|
369
388
|
})(HiSelectableList);
|
370
389
|
|
371
390
|
exports.default = _default;
|
@@ -378,7 +378,7 @@ function (_React$PureComponent) {
|
|
378
378
|
indeterminateIcon: indeterminateIcon
|
379
379
|
}), type === 'image' && img && _react.default.createElement("img", {
|
380
380
|
src: img,
|
381
|
-
alt:
|
381
|
+
alt: '',
|
382
382
|
onError: function onError(e) {
|
383
383
|
if (fallbackImage) {
|
384
384
|
e.target.src = "".concat(fallbackImage);
|
@@ -18,8 +18,6 @@ import Weekday from './Weekday';
|
|
18
18
|
import HiTextField from '../HiForm/HiTextField';
|
19
19
|
import styles from './stylesheet';
|
20
20
|
import { isMobile } from 'react-device-detect';
|
21
|
-
import classNames from 'classnames';
|
22
|
-
import HiFormControl from '../HiForm/HiFormControl';
|
23
21
|
import HiDatePickerMobile from './HiDatePickerMobile';
|
24
22
|
|
25
23
|
class HiDatePicker extends React.Component {
|
@@ -12,11 +12,14 @@ import withStyles from '../styles/withStyles';
|
|
12
12
|
import classNames from 'classnames';
|
13
13
|
export const styles = theme => ({
|
14
14
|
summaryContent: {
|
15
|
-
display: '
|
15
|
+
display: 'flex',
|
16
|
+
alignItems: 'baseline',
|
17
|
+
justifyContent: 'space-between',
|
16
18
|
border: 'none',
|
17
19
|
'&$expanded': {
|
18
20
|
margin: 'initial'
|
19
|
-
}
|
21
|
+
},
|
22
|
+
maxWidth: '100%'
|
20
23
|
},
|
21
24
|
summaryRoot: {
|
22
25
|
borderBottom: '1px solid #E3E6E7',
|
@@ -46,17 +49,21 @@ export const styles = theme => ({
|
|
46
49
|
display: 'flex',
|
47
50
|
alignItems: 'center',
|
48
51
|
fontSize: 11,
|
49
|
-
lineHeight: '24px',
|
50
|
-
float: 'right',
|
51
|
-
marginRight: 32,
|
52
52
|
'&>svg': {
|
53
53
|
fontSize: 18,
|
54
54
|
marginLeft: 3
|
55
55
|
},
|
56
|
-
|
56
|
+
'&>button': {
|
57
57
|
marginRight: -12
|
58
|
-
}
|
58
|
+
},
|
59
|
+
marginLeft: 24,
|
60
|
+
overflow: 'hidden'
|
59
61
|
}),
|
62
|
+
secondaryHeadingSpan: {
|
63
|
+
overflow: 'hidden',
|
64
|
+
whiteSpace: 'nowrap',
|
65
|
+
textOverflow: 'ellipsis'
|
66
|
+
},
|
60
67
|
panel: {
|
61
68
|
boxShadow: 'none',
|
62
69
|
border: 'none'
|
@@ -116,10 +123,12 @@ class HiExpansionPanel extends React.PureComponent {
|
|
116
123
|
}),
|
117
124
|
expandIcon: !collapseDisable && _ref
|
118
125
|
}, React.createElement("div", {
|
119
|
-
className: classes.secondaryHeading
|
120
|
-
}, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled, secondaryHeadingIcon), React.createElement("div", {
|
121
126
|
className: classes.heading
|
122
|
-
}, heading)
|
127
|
+
}, heading), React.createElement("div", {
|
128
|
+
className: classes.secondaryHeading
|
129
|
+
}, React.createElement("span", {
|
130
|
+
className: classes.secondaryHeadingSpan
|
131
|
+
}, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && React.createElement(ExpansionPanelDetails, {
|
123
132
|
className: classes.panelDetails
|
124
133
|
}, children));
|
125
134
|
}
|
package/es/HiForm/index.js
CHANGED
@@ -6,4 +6,6 @@ export { default as HiInput } from './HiInput';
|
|
6
6
|
export { default as HiPasswordField } from './HiPasswordField';
|
7
7
|
export { default as HiSearchField } from './HiSearchField';
|
8
8
|
export { default as HiSlider } from './HiSlider';
|
9
|
-
export { default as HiTextField } from './HiTextField';
|
9
|
+
export { default as HiTextField } from './HiTextField';
|
10
|
+
export { default as HiUpload } from './HiUpload';
|
11
|
+
export { default as HiUploadField } from './HiUploadField';
|
package/es/HiNotice/HiKPI.js
CHANGED
@@ -15,7 +15,8 @@ export const styles = theme => ({
|
|
15
15
|
textAlign: 'center',
|
16
16
|
flexDirection: 'column',
|
17
17
|
alignItems: 'center',
|
18
|
-
fontFamily: theme.typography.fontFamily
|
18
|
+
fontFamily: theme.typography.fontFamily,
|
19
|
+
transition: 'height .5s ease-out'
|
19
20
|
},
|
20
21
|
rootDisable: {
|
21
22
|
cursor: 'default'
|
@@ -115,11 +116,7 @@ class HiKPI extends React.Component {
|
|
115
116
|
[classes.minify]: minify,
|
116
117
|
[classes.rootDisable]: disable
|
117
118
|
});
|
118
|
-
return React.createElement(
|
119
|
-
in: !minify,
|
120
|
-
timeout: "auto",
|
121
|
-
collapsedHeight: "88px"
|
122
|
-
}, React.createElement(ButtonBase, {
|
119
|
+
return React.createElement(ButtonBase, {
|
123
120
|
className: rootclass,
|
124
121
|
onClick: !disable ? this.handleClick(id) : undefined,
|
125
122
|
title: tooltip,
|
@@ -128,7 +125,10 @@ class HiKPI extends React.Component {
|
|
128
125
|
className: classes.title
|
129
126
|
}, title), React.createElement("div", {
|
130
127
|
className: classes.body
|
131
|
-
}, minify && bodyMinify ? bodyMinify : body),
|
128
|
+
}, minify && bodyMinify ? bodyMinify : body), React.createElement(Collapse, {
|
129
|
+
in: !minify,
|
130
|
+
timeout: 'auto'
|
131
|
+
}, React.createElement("div", {
|
132
132
|
className: classes.subtitle
|
133
133
|
}, subtitle)));
|
134
134
|
}
|
package/es/HiSelect/HiSelect.js
CHANGED
@@ -148,6 +148,7 @@ class HiSelect extends React.PureComponent {
|
|
148
148
|
className: classes.selectIconLabel
|
149
149
|
}, React.createElement(HiIcon, {
|
150
150
|
className: classes.labelIcon,
|
151
|
+
color: item.color,
|
151
152
|
icon: item.icon
|
152
153
|
}), item.label);
|
153
154
|
} else if (type === 'image' || item.type === 'image') {
|
@@ -435,6 +436,20 @@ class HiSelect extends React.PureComponent {
|
|
435
436
|
}, '');
|
436
437
|
};
|
437
438
|
|
439
|
+
this.getLengthItemList = itemList => {
|
440
|
+
let itemListLength = 0;
|
441
|
+
itemList.forEach(parent => {
|
442
|
+
if (parent.displayed !== false) {
|
443
|
+
itemListLength += 1;
|
444
|
+
|
445
|
+
if (parent.children) {
|
446
|
+
itemListLength += this.getLengthItemList(parent.children);
|
447
|
+
}
|
448
|
+
}
|
449
|
+
});
|
450
|
+
return itemListLength;
|
451
|
+
};
|
452
|
+
|
438
453
|
this.state = {
|
439
454
|
alertOpen: false,
|
440
455
|
open: false,
|
@@ -444,16 +459,6 @@ class HiSelect extends React.PureComponent {
|
|
444
459
|
openDown: true,
|
445
460
|
overlayWidth: 0
|
446
461
|
};
|
447
|
-
this.handleBlur = this.handleBlur.bind(this);
|
448
|
-
this.handleClick = this.handleClick.bind(this);
|
449
|
-
this.handleClose = this.handleClose.bind(this);
|
450
|
-
this.handleClickAway = this.handleClickAway.bind(this);
|
451
|
-
this.handleFocus = this.handleFocus.bind(this);
|
452
|
-
this.handleSearch = this.handleSearch.bind(this);
|
453
|
-
this.handleSearchReset = this.handleSearchReset.bind(this);
|
454
|
-
this.handleSelect = this.handleSelect.bind(this);
|
455
|
-
this.handleSuggestions = this.handleSuggestions.bind(this);
|
456
|
-
this.getInputElement = this.getInputElement.bind(this);
|
457
462
|
}
|
458
463
|
|
459
464
|
componentDidMount() {
|
@@ -487,20 +492,6 @@ class HiSelect extends React.PureComponent {
|
|
487
492
|
*/
|
488
493
|
|
489
494
|
|
490
|
-
getLengthItemList(itemList) {
|
491
|
-
let itemListLength = 0;
|
492
|
-
itemList.forEach(parent => {
|
493
|
-
if (parent.displayed !== false) {
|
494
|
-
itemListLength += 1;
|
495
|
-
|
496
|
-
if (parent.children) {
|
497
|
-
itemListLength += this.getLengthItemList(parent.children);
|
498
|
-
}
|
499
|
-
}
|
500
|
-
});
|
501
|
-
return itemListLength;
|
502
|
-
}
|
503
|
-
|
504
495
|
render() {
|
505
496
|
const {
|
506
497
|
alert,
|
@@ -525,6 +516,7 @@ class HiSelect extends React.PureComponent {
|
|
525
516
|
searchValue = this.state.searchValue,
|
526
517
|
startAdornment,
|
527
518
|
staticPosition,
|
519
|
+
maxOptionsDisplayed,
|
528
520
|
buildSelectProps = this.buildSelectProps // use parent builder if defined
|
529
521
|
|
530
522
|
} = this.props;
|
@@ -593,7 +585,7 @@ class HiSelect extends React.PureComponent {
|
|
593
585
|
// In case we have a nested list
|
594
586
|
const itemListLength = this.getLengthItemList(itemList); // +1 for search input
|
595
587
|
|
596
|
-
const nbItems = itemListLength <=
|
588
|
+
const nbItems = itemListLength <= maxOptionsDisplayed - 2 ? itemListLength + 1 : maxOptionsDisplayed - 1;
|
597
589
|
popperStyle.transform = `translate3d(-1px, -${nbItems * 40 + 2}px, 0px)`;
|
598
590
|
} else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
|
599
591
|
popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
|
@@ -606,6 +598,8 @@ class HiSelect extends React.PureComponent {
|
|
606
598
|
this.placement = placement;
|
607
599
|
}
|
608
600
|
|
601
|
+
const nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
|
602
|
+
const autoHeightMax = nbItemsDisplayed * 40 - 10;
|
609
603
|
return React.createElement(ClickAwayListener, {
|
610
604
|
onClickAway: this.handleClickAway
|
611
605
|
}, React.createElement(Grow, {
|
@@ -615,13 +609,16 @@ class HiSelect extends React.PureComponent {
|
|
615
609
|
transformOrigin: '0 0 0'
|
616
610
|
}
|
617
611
|
}, React.createElement(Paper, {
|
612
|
+
style: maxOptionsDisplayed < 12 ? {
|
613
|
+
maxHeight: 40 * maxOptionsDisplayed
|
614
|
+
} : {},
|
618
615
|
className: classes.paper
|
619
616
|
}, (this.placement && this.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends({
|
620
617
|
ref: contentEl => {
|
621
618
|
this.optionsContent = contentEl;
|
622
619
|
},
|
623
620
|
autoHeight: true,
|
624
|
-
autoHeightMax:
|
621
|
+
autoHeightMax: autoHeightMax
|
625
622
|
}, onScrollReachBottom && {
|
626
623
|
onScroll: this.handleScroll
|
627
624
|
}), React.createElement(HiSelectableList, _extends({
|
@@ -742,7 +739,8 @@ HiSelect.defaultProps = {
|
|
742
739
|
one_child: '%s item'
|
743
740
|
},
|
744
741
|
type: 'text',
|
745
|
-
filterFunc: filterValue
|
742
|
+
filterFunc: filterValue,
|
743
|
+
maxOptionsDisplayed: 12
|
746
744
|
};
|
747
745
|
HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
748
746
|
/**
|
@@ -826,6 +824,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
826
824
|
*/
|
827
825
|
loading: PropTypes.bool,
|
828
826
|
|
827
|
+
/**
|
828
|
+
* Nombre max d'items affichés
|
829
|
+
*/
|
830
|
+
maxOptionsDisplayed: PropTypes.number,
|
831
|
+
|
829
832
|
/**
|
830
833
|
* Autorise la sélection de plusieurs valeurs
|
831
834
|
*/
|
@@ -41,7 +41,8 @@ class HiSuggestSelect extends React.PureComponent {
|
|
41
41
|
static getDerivedStateFromProps(props, state) {
|
42
42
|
if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
|
43
43
|
return {
|
44
|
-
options: props.options
|
44
|
+
options: props.options,
|
45
|
+
suggestionFocusIndex: -1
|
45
46
|
};
|
46
47
|
}
|
47
48
|
|
@@ -51,6 +52,14 @@ class HiSuggestSelect extends React.PureComponent {
|
|
51
52
|
constructor(props) {
|
52
53
|
super(props);
|
53
54
|
|
55
|
+
this.getInputElement = el => {
|
56
|
+
this.textInput = el;
|
57
|
+
|
58
|
+
if (this.props.inputRef) {
|
59
|
+
this.props.inputRef(this.textInput);
|
60
|
+
}
|
61
|
+
};
|
62
|
+
|
54
63
|
this.handleSelect = (event, value) => {
|
55
64
|
document.body.style.overflow = 'auto';
|
56
65
|
this.props.onSelect(event, value);
|
@@ -88,67 +97,65 @@ class HiSuggestSelect extends React.PureComponent {
|
|
88
97
|
};
|
89
98
|
|
90
99
|
this.handleKeyDownSearch = event => {
|
91
|
-
if (event.key === 'ArrowDown'
|
92
|
-
|
100
|
+
if (event.key === 'ArrowDown') {
|
101
|
+
event.preventDefault();
|
93
102
|
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
103
|
+
if (this.state.suggestionFocusIndex < this.props.options.length - 1) {
|
104
|
+
this.setState(prevState => ({
|
105
|
+
suggestionFocusIndex: prevState.suggestionFocusIndex + 1
|
106
|
+
}));
|
107
|
+
}
|
108
|
+
} else if (event.key === 'ArrowUp') {
|
109
|
+
event.preventDefault();
|
98
110
|
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
}
|
103
|
-
}
|
111
|
+
if (this.state.suggestionFocusIndex >= 0) {
|
112
|
+
this.setState(prevState => ({
|
113
|
+
suggestionFocusIndex: prevState.suggestionFocusIndex - 1
|
114
|
+
}));
|
115
|
+
}
|
116
|
+
} else if (event.key === 'Enter' && this.state.suggestionFocusIndex >= 0) {
|
117
|
+
event.preventDefault(); // Suggestion focused
|
118
|
+
|
119
|
+
this.handleSelect(event, this.state.options[this.state.suggestionFocusIndex]);
|
104
120
|
} else if (event.key === 'Escape') {
|
105
121
|
this.setState({
|
106
|
-
options: []
|
122
|
+
options: [],
|
123
|
+
suggestionFocusIndex: -1
|
107
124
|
});
|
108
125
|
}
|
109
126
|
};
|
110
127
|
|
111
|
-
this.
|
112
|
-
focused: false,
|
113
|
-
options: props.options
|
114
|
-
};
|
115
|
-
this.handleSelect = this.handleSelect.bind(this);
|
116
|
-
this.handleBlur = this.handleBlur.bind(this);
|
117
|
-
this.handleFocus = this.handleFocus.bind(this);
|
118
|
-
this.getInputElement = this.getInputElement.bind(this);
|
119
|
-
}
|
120
|
-
|
121
|
-
getInputElement(el) {
|
122
|
-
this.textInput = el;
|
123
|
-
|
124
|
-
if (this.props.inputRef) {
|
125
|
-
this.props.inputRef(this.textInput);
|
126
|
-
}
|
127
|
-
}
|
128
|
-
|
129
|
-
handleFocus(event) {
|
130
|
-
this.setState({
|
131
|
-
focused: true
|
132
|
-
});
|
133
|
-
|
134
|
-
if (this.props.onFocusInput) {
|
135
|
-
this.props.onFocusInput(event);
|
136
|
-
}
|
137
|
-
}
|
138
|
-
|
139
|
-
handleBlur(event) {
|
140
|
-
// Si on click sur un élément de HiInput, on garde le focus
|
141
|
-
// Par exemple sur l'icone reset
|
142
|
-
if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
|
128
|
+
this.handleFocus = event => {
|
143
129
|
this.setState({
|
144
|
-
|
145
|
-
focused: false
|
130
|
+
focused: true
|
146
131
|
});
|
147
132
|
|
148
|
-
if (this.props.
|
149
|
-
this.props.
|
133
|
+
if (this.props.onFocusInput) {
|
134
|
+
this.props.onFocusInput(event);
|
150
135
|
}
|
151
|
-
}
|
136
|
+
};
|
137
|
+
|
138
|
+
this.handleBlur = event => {
|
139
|
+
// Si on click sur un élément de HiInput, on garde le focus
|
140
|
+
// Par exemple sur l'icone reset
|
141
|
+
if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
|
142
|
+
this.setState({
|
143
|
+
options: [],
|
144
|
+
focused: false,
|
145
|
+
suggestionFocusIndex: -1
|
146
|
+
});
|
147
|
+
|
148
|
+
if (this.props.onBlurInput) {
|
149
|
+
this.props.onBlurInput(event);
|
150
|
+
}
|
151
|
+
}
|
152
|
+
};
|
153
|
+
|
154
|
+
this.state = {
|
155
|
+
focused: false,
|
156
|
+
options: props.options,
|
157
|
+
suggestionFocusIndex: -1
|
158
|
+
};
|
152
159
|
}
|
153
160
|
|
154
161
|
render() {
|
@@ -168,7 +175,8 @@ class HiSuggestSelect extends React.PureComponent {
|
|
168
175
|
|
169
176
|
const {
|
170
177
|
focused,
|
171
|
-
options
|
178
|
+
options,
|
179
|
+
suggestionFocusIndex
|
172
180
|
} = this.state;
|
173
181
|
let optionsShown = options; // If loading
|
174
182
|
|
@@ -230,7 +238,8 @@ class HiSuggestSelect extends React.PureComponent {
|
|
230
238
|
hideCheckbox: true,
|
231
239
|
onSelect: this.handleSelect,
|
232
240
|
translations: translations,
|
233
|
-
onKeyDown: this.handleKeyDown
|
241
|
+
onKeyDown: this.handleKeyDown,
|
242
|
+
suggestionFocusIndex: suggestionFocusIndex
|
234
243
|
})))));
|
235
244
|
}
|
236
245
|
|