@hipay/hipay-material-ui 2.0.0-beta.76 → 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);
package/README.md CHANGED
@@ -240,8 +240,8 @@ npm install -g cz-conventional-changelog
240
240
 
241
241
  1. Changer la version dans package.json et dans packages/hipay-material-ui/package.json
242
242
  2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
243
- 3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
244
- 4. Build : ```npm run build```
243
+ 3. Commiter la release : ```git ci -am "chore(release): VERSION DATE (YYYY-mm-dd)```
244
+ 4. Build : ```cd packages/hipay-material-ui/ && npm run build```
245
245
  5. Publish :
246
246
 
247
247
  ```sh
@@ -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,11 @@ 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'
20
+ },
21
+ rootDisable: {
22
+ cursor: 'default'
19
23
  },
20
24
  error: {
21
25
  boxShadow: '0px 2px 4px 0px rgba(213, 0, 0, 0.24)',
@@ -109,21 +113,22 @@ class HiKPI extends React.Component {
109
113
  [classes.error]: color === 'error' && !disable,
110
114
  [classes.positive]: color === 'positive' && !disable,
111
115
  [classes.active]: active,
112
- [classes.minify]: minify
116
+ [classes.minify]: minify,
117
+ [classes.rootDisable]: disable
113
118
  });
114
- return React.createElement(Collapse, {
115
- in: !minify,
116
- timeout: "auto",
117
- collapsedHeight: "88px"
118
- }, React.createElement(ButtonBase, {
119
+ return React.createElement(ButtonBase, {
119
120
  className: rootclass,
120
121
  onClick: !disable ? this.handleClick(id) : undefined,
121
- title: tooltip
122
+ title: tooltip,
123
+ disableRipple: disable
122
124
  }, title && React.createElement("h3", {
123
125
  className: classes.title
124
126
  }, title), React.createElement("div", {
125
127
  className: classes.body
126
- }, 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", {
127
132
  className: classes.subtitle
128
133
  }, subtitle)));
129
134
  }
@@ -276,7 +276,8 @@ class HiPaymentMeans extends React.Component {
276
276
  theme,
277
277
  translations,
278
278
  type,
279
- yearMember
279
+ yearMember,
280
+ fallbackImage
280
281
  } = this.props;
281
282
  let formatNumber;
282
283
 
@@ -308,7 +309,27 @@ class HiPaymentMeans extends React.Component {
308
309
  username = `${translations.gender_male} ${cardUser}`;
309
310
  }
310
311
 
311
- const creditDebit = translations.credit && translations.debit && (credit ? translations.credit : translations.debit).toUpperCase();
312
+ let creditDebit = null;
313
+
314
+ if (translations.credit && translations.debit) {
315
+ creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
316
+ }
317
+
318
+ const imgComponent = React.createElement("img", {
319
+ src: brandLogo,
320
+ alt: '',
321
+ className: classNames(classes.logo, {
322
+ [classes.logoLeft]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0,
323
+ [classes.logoRight]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0
324
+ }),
325
+ onError: e => {
326
+ if (fallbackImage) {
327
+ e.target.src = `${fallbackImage}`;
328
+ } else {
329
+ e.target.style.display = 'none';
330
+ }
331
+ }
332
+ });
312
333
  let cardLayout;
313
334
 
314
335
  switch (type) {
@@ -328,11 +349,7 @@ class HiPaymentMeans extends React.Component {
328
349
  className: classNames(classes.labelLarge, classes.userNameWallet)
329
350
  }, username), React.createElement("span", {
330
351
  className: classNames(classes.stripe, classes.stripeBottomLeft)
331
- }, React.createElement("img", {
332
- src: brandLogo,
333
- alt: '',
334
- className: classNames(classes.logo, classes.logoLeft)
335
- })), React.createElement("span", {
352
+ }, imgComponent), React.createElement("span", {
336
353
  className: classNames(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
337
354
  })));
338
355
  break;
@@ -346,11 +363,7 @@ class HiPaymentMeans extends React.Component {
346
363
  }
347
364
  }, React.createElement("span", {
348
365
  className: classNames(classes.stripe, classes.stripeTopRight)
349
- }, React.createElement("img", {
350
- src: brandLogo,
351
- alt: '',
352
- className: classNames(classes.logo, classes.logoRight)
353
- })), React.createElement("span", {
366
+ }, imgComponent), React.createElement("span", {
354
367
  className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
355
368
  }), React.createElement("div", {
356
369
  className: classNames(classes.number, classes.cardNumber)
@@ -373,11 +386,7 @@ class HiPaymentMeans extends React.Component {
373
386
  }
374
387
  }, React.createElement("span", {
375
388
  className: classNames(classes.stripe, classes.stripeTopRight)
376
- }, React.createElement("img", {
377
- src: brandLogo,
378
- alt: '',
379
- className: classNames(classes.logo, classes.logoRight)
380
- })), React.createElement("span", {
389
+ }, imgComponent), React.createElement("span", {
381
390
  className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
382
391
  }, React.createElement("div", {
383
392
  className: classes.corporateLabel,
@@ -414,11 +423,7 @@ class HiPaymentMeans extends React.Component {
414
423
  }
415
424
  }, React.createElement("span", {
416
425
  className: classNames(classes.stripe, classes.stripeTopLeft)
417
- }, React.createElement("img", {
418
- src: brandLogo,
419
- alt: '',
420
- className: classNames(classes.logo, classes.logoLeft)
421
- })), React.createElement("span", {
426
+ }, imgComponent), React.createElement("span", {
422
427
  className: classNames(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
423
428
  }), cardNumber && React.createElement("div", {
424
429
  className: classNames(classes.labelMedium, classes.ibanLabel)
@@ -440,11 +445,7 @@ class HiPaymentMeans extends React.Component {
440
445
  }
441
446
  }, React.createElement("span", {
442
447
  className: classNames(classes.stripe, classes.stripeTopRight)
443
- }, React.createElement("img", {
444
- src: brandLogo,
445
- alt: '',
446
- className: classNames(classes.logo, classes.logoRight)
447
- })), React.createElement("span", {
448
+ }, imgComponent), React.createElement("span", {
448
449
  className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
449
450
  }, React.createElement("img", {
450
451
  src: logoMerchant,
@@ -467,11 +468,7 @@ class HiPaymentMeans extends React.Component {
467
468
  }
468
469
  }, React.createElement("span", {
469
470
  className: classNames(classes.stripe, classes.stripeTopRight)
470
- }, React.createElement("img", {
471
- src: brandLogo,
472
- alt: '',
473
- className: classNames(classes.logo, classes.logoRight)
474
- })), React.createElement("span", {
471
+ }, imgComponent), React.createElement("span", {
475
472
  className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
476
473
  }), React.createElement("div", {
477
474
  className: classNames(classes.number, classes.cardNumber)
@@ -579,6 +576,11 @@ HiPaymentMeans.propTypes = process.env.NODE_ENV !== "production" ? {
579
576
  */
580
577
  credit: PropTypes.bool,
581
578
 
579
+ /**
580
+ * Chemin vers l'image à afficher par défaut si le logo n'est pas trouvé
581
+ */
582
+ fallbackImage: PropTypes.string,
583
+
582
584
  /**
583
585
  * Logo du moyen de paiement
584
586
  */
@@ -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
  */