@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.
@@ -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' || event.key === 'ArrowUp') {
148
- document.body.style.overflow = 'hidden'; // On récupère la div parent "overlay"
154
+ if (event.key === 'ArrowDown') {
155
+ event.preventDefault();
149
156
 
150
- var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
151
- setTimeout(function () {
152
- // On recupère tous les items
153
- var items = overlay.getElementsByTagName('li');
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
- if (items.length) {
156
- // On focus sur le premier
157
- items[0].focus();
158
- }
159
- }, 1);
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.state = {
168
- focused: false,
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 (this.props.onFocusInput) {
195
- this.props.onFocusInput(event);
191
+ if (_this.props.onFocusInput) {
192
+ _this.props.onFocusInput(event);
196
193
  }
197
- }
198
- }, {
199
- key: "handleBlur",
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 || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
204
- this.setState({
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 (this.props.onBlurInput) {
210
- this.props.onBlurInput(event);
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 styles = function styles() {
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 > 1 && arguments[1] !== undefined ? arguments[1] : 0;
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
- others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
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: img,
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: 'inline-block',
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
- "&>button": {
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)), !!children && React.createElement(ExpansionPanelDetails, {
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
  }
@@ -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';
@@ -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(Collapse, {
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), subtitle && minify === false && React.createElement("div", {
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
  }
@@ -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 <= 10 ? itemListLength + 1 : 11;
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: 430
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' || event.key === 'ArrowUp') {
92
- document.body.style.overflow = 'hidden'; // On récupère la div parent "overlay"
100
+ if (event.key === 'ArrowDown') {
101
+ event.preventDefault();
93
102
 
94
- const overlay = findDOMNode(this.overlay);
95
- setTimeout(() => {
96
- // On recupère tous les items
97
- const items = overlay.getElementsByTagName('li');
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
- if (items.length) {
100
- // On focus sur le premier
101
- items[0].focus();
102
- }
103
- }, 1);
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.state = {
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
- options: [],
145
- focused: false
130
+ focused: true
146
131
  });
147
132
 
148
- if (this.props.onBlurInput) {
149
- this.props.onBlurInput(event);
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