@hipay/hipay-material-ui 1.0.0-beta.6 → 1.0.0-beta.7

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.
@@ -69,6 +69,10 @@ var _HiIconBuilder = require('../utils/HiIconBuilder');
69
69
 
70
70
  var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
71
71
 
72
+ var _HiColoredLabel = require('../HiColoredLabel');
73
+
74
+ var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
75
+
72
76
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
73
77
 
74
78
  var styles = exports.styles = function styles(theme) {
@@ -112,9 +116,10 @@ var styles = exports.styles = function styles(theme) {
112
116
  fontWeight: 'inherit',
113
117
  width: '100%'
114
118
  }),
115
- listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body4, {
119
+ listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body5, {
116
120
  fontWeight: theme.typography.fontWeightLight,
117
- marginLeft: theme.spacing.unit
121
+ marginLeft: theme.spacing.unit,
122
+ color: theme.palette.neutral.normal
118
123
  }),
119
124
  listItemInfoText: (0, _extends3.default)({
120
125
  whiteSpace: 'nowrap',
@@ -213,8 +218,12 @@ var HiSelectableListItem = function (_React$Component) {
213
218
  'div',
214
219
  { className: classes.listItemContent, 'data-id': item.id },
215
220
  !effectiveCheckbox && _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.icon }),
216
- item.label,
217
- _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
221
+ _this.getItemLabel(item),
222
+ _react2.default.createElement(
223
+ 'span',
224
+ { className: classes.listItemSecondaryText },
225
+ item.secondaryLabel
226
+ ),
218
227
  childrenIndicator
219
228
  );
220
229
  case 'image':
@@ -228,8 +237,12 @@ var HiSelectableListItem = function (_React$Component) {
228
237
  'div',
229
238
  { className: classes.listItemContent, 'data-id': item.id },
230
239
  img,
231
- item.label,
232
- _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
240
+ _this.getItemLabel(item),
241
+ _react2.default.createElement(
242
+ 'span',
243
+ { className: classes.listItemSecondaryText },
244
+ item.secondaryLabel
245
+ ),
233
246
  childrenIndicator
234
247
  );
235
248
  case 'primary-highlight':
@@ -239,7 +252,7 @@ var HiSelectableListItem = function (_React$Component) {
239
252
  return _react2.default.createElement(
240
253
  'div',
241
254
  { className: itemPrimaryHighlightClass, 'data-id': item.id },
242
- item.label
255
+ _this.getItemLabel(item)
243
256
  );
244
257
  case 'text':
245
258
  default:
@@ -254,8 +267,12 @@ var HiSelectableListItem = function (_React$Component) {
254
267
  __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
255
268
  }
256
269
  }),
257
- !item.labelHighlight && item.label,
258
- _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
270
+ !item.labelHighlight && _this.getItemLabel(item),
271
+ _react2.default.createElement(
272
+ 'span',
273
+ { className: classes.listItemSecondaryText },
274
+ item.secondaryLabel
275
+ ),
259
276
  childrenIndicator
260
277
  );
261
278
  }
@@ -275,6 +292,14 @@ var HiSelectableListItem = function (_React$Component) {
275
292
  value: function toggleHover() {
276
293
  this.setState({ hover: !this.state.hover });
277
294
  }
295
+ }, {
296
+ key: 'getItemLabel',
297
+ value: function getItemLabel(item) {
298
+ if (item.color) {
299
+ return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: item.label });
300
+ }
301
+ return item.label;
302
+ }
278
303
 
279
304
  /**
280
305
  * Build list item from type
@@ -112,7 +112,7 @@ var CellCountry = function (_React$PureComponent) {
112
112
  view = _props.view;
113
113
 
114
114
 
115
- var path = '/static/hmus/images/countries/' + isoCode.toLowerCase() + '.svg';
115
+ var path = '/static/hmu/images/countries/' + isoCode.toLowerCase() + '.svg';
116
116
 
117
117
  var tooltipContent = _react2.default.createElement(
118
118
  'div',
@@ -0,0 +1,189 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3
+ // @inheritedComponent Dialog
4
+
5
+ import React from 'react';
6
+ import PropTypes from 'prop-types';
7
+ import Dialog, { DialogActions, DialogContent, DialogContentText, DialogTitle } from 'material-ui/Dialog';
8
+ import { withStyles } from '../styles';
9
+ import HiButton from '../HiButton';
10
+
11
+ export const styles = theme => ({
12
+ classContent: {
13
+ fontSize: 14,
14
+ lineHeight: '24px',
15
+ color: '#484848'
16
+ },
17
+ classPaper: {
18
+ maxWidth: 300
19
+ },
20
+ classCancelButton: {
21
+ float: 'right'
22
+ },
23
+ classTitle: {
24
+ fontSize: 20,
25
+ fontFamily: theme.typography.fontFamily,
26
+ fontWeight: theme.typography.fontWeightLight,
27
+ lineHeight: '24px'
28
+ },
29
+ classAction: {
30
+ display: 'inline-block'
31
+ },
32
+ classDialogRoot: {
33
+ backgroundColor: 'rgba(0, 0, 0, 0.28)'
34
+ }
35
+ });
36
+
37
+ /**
38
+ * Pop up d'alert
39
+ */
40
+ class HiAlertModal extends React.PureComponent {
41
+
42
+ constructor(props) {
43
+ super(props);
44
+
45
+ this.handleClickCancel = () => {
46
+ if (this.props.onCancelClick) {
47
+ this.props.onCancelClick();
48
+ }
49
+ };
50
+
51
+ this.handleClickSubmit = () => {
52
+ if (this.props.onSubmitClick) {
53
+ this.props.onSubmitClick();
54
+ }
55
+ };
56
+
57
+ this.handleOnClose = () => {
58
+ if (this.props.onClose) {
59
+ this.props.onClose();
60
+ }
61
+ };
62
+
63
+ this.handleOnClose = this.handleOnClose.bind(this);
64
+ this.handleClickCancel = this.handleClickCancel.bind(this);
65
+ this.handleClickSubmit = this.handleClickSubmit.bind(this);
66
+ }
67
+
68
+ // Appelé au clic du bouton d'annulation
69
+
70
+
71
+ // Appelé au clic du bouton de soumission
72
+
73
+
74
+ // Appelé si clic en dehors de la pop up
75
+
76
+
77
+ // Render
78
+ render() {
79
+ const _props = this.props,
80
+ {
81
+ labelSubmitButton,
82
+ labelCancelButton,
83
+ content,
84
+ title,
85
+ positive,
86
+ negative,
87
+ open,
88
+ onCancelClick,
89
+ onSubmitClick,
90
+ classes
91
+ } = _props,
92
+ props = _objectWithoutProperties(_props, ['labelSubmitButton', 'labelCancelButton', 'content', 'title', 'positive', 'negative', 'open', 'onCancelClick', 'onSubmitClick', 'classes']);
93
+ return React.createElement(
94
+ Dialog,
95
+ _extends({
96
+ open: open,
97
+ onClose: this.handleOnClose,
98
+ classes: { paper: classes.classPaper, root: classes.classDialogRoot }
99
+ }, props),
100
+ React.createElement(
101
+ DialogTitle,
102
+ { disableTypography: true, classes: { root: classes.classTitle } },
103
+ title
104
+ ),
105
+ React.createElement(
106
+ DialogContent,
107
+ null,
108
+ React.createElement(
109
+ DialogContentText,
110
+ { classes: { root: classes.classContent } },
111
+ content
112
+ )
113
+ ),
114
+ React.createElement(
115
+ DialogActions,
116
+ { classes: { root: classes.classAction } },
117
+ React.createElement(
118
+ HiButton,
119
+ {
120
+ onClick: this.handleClickSubmit,
121
+ positive: positive,
122
+ negative: negative
123
+ },
124
+ labelSubmitButton
125
+ ),
126
+ React.createElement(
127
+ HiButton,
128
+ {
129
+ classes: { root: classes.classCancelButton },
130
+ onClick: this.handleClickCancel
131
+ },
132
+ labelCancelButton
133
+ )
134
+ )
135
+ );
136
+ }
137
+ }
138
+
139
+ HiAlertModal.defaultProps = {
140
+ negative: false,
141
+ positive: false
142
+ };
143
+ HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
144
+ /**
145
+ * Surcharge les classes du composant
146
+ */
147
+ classes: PropTypes.object,
148
+ /**
149
+ * Texte contenu dans la modal
150
+ */
151
+ content: PropTypes.string,
152
+ /**
153
+ * Texte sur le bouton d'annulation
154
+ */
155
+ labelCancelButton: PropTypes.string,
156
+ /**
157
+ * Texte sur le bouton de soumission
158
+ */
159
+ labelSubmitButton: PropTypes.string,
160
+ /**
161
+ * Colore le bouton de soumission en rouge
162
+ */
163
+ negative: PropTypes.bool,
164
+ /**
165
+ * Fonction de callback appelée au clic sur le bouton d'annulation
166
+ */
167
+ onCancelClick: PropTypes.func,
168
+ /**
169
+ * Fonction de callback appelée au clic en dehors de la pop up
170
+ */
171
+ onClose: PropTypes.func,
172
+ /**
173
+ * Fonction de callback appelée au clic sur le bouton de soumission
174
+ */
175
+ onSubmitClick: PropTypes.func,
176
+ /**
177
+ * pop up ouverte ou pas
178
+ */
179
+ open: PropTypes.bool.isRequired,
180
+ /**
181
+ * Colore le bouton de soumission en vert
182
+ */
183
+ positive: PropTypes.bool,
184
+ /**
185
+ * Titre de la modal
186
+ */
187
+ title: PropTypes.string
188
+ } : {};
189
+ export default withStyles(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);
@@ -0,0 +1 @@
1
+ export { default } from './HiAlertModal';
@@ -0,0 +1,170 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3
+ // @inheritedComponent ExpansionPanel
4
+
5
+ import React from 'react';
6
+ import PropTypes from 'prop-types';
7
+ import ExpansionPanel, { ExpansionPanelSummary, ExpansionPanelDetails } from 'material-ui/ExpansionPanel';
8
+ import Typography from 'material-ui/Typography';
9
+ import MenuDownIcon from 'mdi-material-ui/MenuDown';
10
+ import { withStyles } from '../styles';
11
+
12
+ export const styles = theme => ({
13
+ heading: {
14
+ fontSize: 20,
15
+ lineHeight: '24px',
16
+ fontWeight: theme.typography.fontWeightLight
17
+ },
18
+ secondaryHeading: {
19
+ fontSize: 11,
20
+ color: '#737373',
21
+ textAlign: 'right',
22
+ lineHeight: '24px',
23
+ fontWeight: theme.typography.fontWeightRegular,
24
+ verticalAlign: 'middle',
25
+ '&>svg': {
26
+ fontSize: 18,
27
+ marginLeft: 3,
28
+ marginBottom: -5
29
+ }
30
+ },
31
+ column: {
32
+ flexBasis: '100%'
33
+ },
34
+ panelSummary: {
35
+ '&>div:first-child': {
36
+ margin: '12px 0',
37
+ '&>div:last-child': {
38
+ paddingRight: 8
39
+ }
40
+ },
41
+ '&>div:last-child': {
42
+ width: 16,
43
+ height: 16
44
+ }
45
+ },
46
+ panelSummaryExpanded: {
47
+ borderBottom: '1px solid #E3E6E7',
48
+ minHeight: 0
49
+ },
50
+ expandMoreIcon: {
51
+ margin: 0,
52
+ fontSize: 18,
53
+ width: 20
54
+ },
55
+ panel: {
56
+ boxShadow: 'none',
57
+ border: 'none'
58
+ },
59
+ panelDetails: {
60
+ padding: '8px 24px 8px'
61
+ },
62
+ disabledPanel: {
63
+ backgroundColor: '#ffffff',
64
+ opacity: 1
65
+ },
66
+ expandIconExpanded: {
67
+ transform: 'translateY(-50%) rotate(-90deg)'
68
+ }
69
+ });
70
+
71
+ class HiExpansionPanel extends React.PureComponent {
72
+
73
+ render() {
74
+ const _props = this.props,
75
+ {
76
+ disabled,
77
+ heading,
78
+ secondaryHeading,
79
+ secondaryHeadingDisabled,
80
+ secondaryHeadingIcon,
81
+ children,
82
+ classes
83
+ } = _props,
84
+ props = _objectWithoutProperties(_props, ['disabled', 'heading', 'secondaryHeading', 'secondaryHeadingDisabled', 'secondaryHeadingIcon', 'children', 'classes']);
85
+
86
+ const effectiveDisabled = disabled || !children;
87
+
88
+ return React.createElement(
89
+ ExpansionPanel,
90
+ _extends({
91
+ disabled: effectiveDisabled,
92
+ classes: { root: classes.panel, disabled: classes.disabledPanel }
93
+ }, props),
94
+ React.createElement(
95
+ ExpansionPanelSummary,
96
+ {
97
+ classes: {
98
+ root: classes.panelSummary,
99
+ disabled: classes.disabledPanel,
100
+ expanded: classes.panelSummaryExpanded,
101
+ expandIconExpanded: classes.expandIconExpanded
102
+ },
103
+ expandIcon: React.createElement(MenuDownIcon, { classes: { root: classes.expandMoreIcon } })
104
+ },
105
+ React.createElement(
106
+ 'div',
107
+ { className: classes.column },
108
+ React.createElement(
109
+ Typography,
110
+ { classes: { root: classes.heading } },
111
+ heading
112
+ )
113
+ ),
114
+ React.createElement(
115
+ 'div',
116
+ { className: classes.column },
117
+ React.createElement(
118
+ Typography,
119
+ { classes: { root: classes.secondaryHeading } },
120
+ !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled,
121
+ secondaryHeadingIcon
122
+ )
123
+ )
124
+ ),
125
+ !!children && React.createElement(
126
+ ExpansionPanelDetails,
127
+ { classes: { root: classes.panelDetails } },
128
+ children
129
+ )
130
+ );
131
+ }
132
+ }
133
+
134
+ HiExpansionPanel.defaultProps = {
135
+ disabled: false,
136
+ secondaryHeading: '',
137
+ secondaryHeadingIcon: '',
138
+ secondaryHeadingDisabled: 'PAS ENCORE COMPLETE'
139
+ };
140
+ HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
141
+ /**
142
+ * Contenu du panel
143
+ */
144
+ children: PropTypes.any,
145
+ /**
146
+ * Surcharge les classes du composant
147
+ */
148
+ classes: PropTypes.object,
149
+ /**
150
+ * Désactivé
151
+ */
152
+ disabled: PropTypes.bool,
153
+ /**
154
+ * Titre principal du panel
155
+ */
156
+ heading: PropTypes.string.isRequired,
157
+ /**
158
+ * Titre secondaire du panel
159
+ */
160
+ secondaryHeading: PropTypes.string,
161
+ /**
162
+ * Titre secondaire si désactivé
163
+ */
164
+ secondaryHeadingDisabled: PropTypes.string,
165
+ /**
166
+ * Icone dans le titre secondaire du panel
167
+ */
168
+ secondaryHeadingIcon: PropTypes.any
169
+ } : {};
170
+ export default withStyles(styles, { name: 'HmuiHiExpansionPanel' })(HiExpansionPanel);
@@ -0,0 +1 @@
1
+ export { default } from './HiExpansionPanel';
@@ -107,6 +107,9 @@ class HiFormControl extends React.PureComponent {
107
107
 
108
108
  handleFocus(value) {
109
109
  this.setState({ focused: value });
110
+ if (value === false && this.state.hovered) {
111
+ this.setState({ hovered: false });
112
+ }
110
113
  }
111
114
 
112
115
  handleHover(value) {
@@ -83,43 +83,28 @@ class HiSelect extends React.PureComponent {
83
83
 
84
84
  // Check if value is in options
85
85
  let valueInOptions = false;
86
- const val = this.props.value;
86
+ const val = props.value;
87
87
  // No options provided.
88
- if (!this.props.options.length || !val.length) {
88
+ if (!props.options.length || !val || !val.length) {
89
89
  valueInOptions = true;
90
+ } else {
91
+ // Check if an option match value prop.
92
+ props.options.forEach(item => {
93
+ if (!valueInOptions && val.indexOf(item.id) !== -1) {
94
+ valueInOptions = true;
95
+ }
96
+ });
90
97
  }
91
- // Check if an option match value prop.
92
- this.props.options.forEach(item => {
93
- if (!valueInOptions && val.indexOf(item.id) !== -1) {
94
- valueInOptions = true;
95
- }
96
- });
98
+
97
99
  if (!valueInOptions) {
98
100
  throw new Error('prop value provided does not match any option.');
99
101
  }
100
102
 
101
103
  if (props.hierarchic === true && props.options.length > 1) {
102
- // Construct two associative arrays
103
- // hierarchy[parentId] => children
104
- // hierarchySelected[parentId] => selected children
105
- const hierarchy = {};
106
- const hierarchySelected = {};
107
- let value = props.value || [];
108
- if (!Array.isArray(value)) value = [props.value];
109
- props.options.forEach(option => {
110
- if (option.hasChildren === true && !hierarchy.hasOwnProperty(option.id)) {
111
- hierarchy[option.id] = [];
112
- hierarchySelected[option.id] = [];
113
- } else if (option.hasOwnProperty('parentId')) {
114
- hierarchy[option.parentId].push(option.id);
115
- if (value.includes(option.id)) {
116
- hierarchySelected[option.parentId].push(option.id);
117
- }
118
- }
119
- });
104
+ const hierarchyTrees = this.buildHierarchyTrees(props);
120
105
 
121
- this.state.hierarchy = hierarchy;
122
- this.state.hierarchySelected = hierarchySelected;
106
+ this.state.hierarchy = hierarchyTrees.hierarchy;
107
+ this.state.hierarchySelected = hierarchyTrees.hierarchySelected;
123
108
  }
124
109
 
125
110
  if (props.options.length > 0) {
@@ -155,6 +140,33 @@ class HiSelect extends React.PureComponent {
155
140
  });
156
141
  this.setState({ nbOptions: optionsLength });
157
142
  }
143
+
144
+ if (nextProps.hierarchic === true && nextProps.options.length > 1) {
145
+ const hierarchyTrees = this.buildHierarchyTrees(nextProps);
146
+ this.setState({ hierarchy: hierarchyTrees.hierarchy, hierarchySelected: hierarchyTrees.hierarchySelected });
147
+ }
148
+ }
149
+
150
+ buildHierarchyTrees(props) {
151
+ // Construct two associative arrays
152
+ // hierarchy[parentId] => children
153
+ // hierarchySelected[parentId] => selected children
154
+ const hierarchy = {};
155
+ const hierarchySelected = {};
156
+ let value = props.value || [];
157
+ if (!Array.isArray(value)) value = [props.value];
158
+ props.options.forEach(option => {
159
+ if (option.hasChildren === true && !hierarchy.hasOwnProperty(option.id)) {
160
+ hierarchy[option.id] = [];
161
+ hierarchySelected[option.id] = [];
162
+ } else if (option.hasOwnProperty('parentId')) {
163
+ hierarchy[option.parentId].push(option.id);
164
+ if (value.includes(option.id)) {
165
+ hierarchySelected[option.parentId].push(option.id);
166
+ }
167
+ }
168
+ });
169
+ return { hierarchy, hierarchySelected };
158
170
  }
159
171
 
160
172
  // Key down on list items
@@ -201,7 +213,8 @@ class HiSelect extends React.PureComponent {
201
213
  hoverIcon,
202
214
  checkedIcon,
203
215
  hierarchic,
204
- id
216
+ id,
217
+ placeholder
205
218
  } = this.props;
206
219
 
207
220
  const { open, suggestions, focused } = this.state;
@@ -230,7 +243,7 @@ class HiSelect extends React.PureComponent {
230
243
  }
231
244
 
232
245
  if (displayAsChip) {
233
- const chipFilter = React.createElement(HiChip, { label: display, onDelete: this.handleRequestDelete });
246
+ const chipFilter = React.createElement(HiChip, { label: placeholder || display, onDelete: this.handleRequestDelete });
234
247
  if (display) {
235
248
  display = chipFilter;
236
249
  }
@@ -266,7 +279,7 @@ class HiSelect extends React.PureComponent {
266
279
  null,
267
280
  React.createElement(SelectInput, {
268
281
  id: id,
269
- value: display,
282
+ value: placeholder || display,
270
283
  open: open,
271
284
  focused: focused,
272
285
  type: type,
@@ -696,6 +709,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
696
709
  * Les items parents sont sélectionnables
697
710
  */
698
711
  parentItemSelectable: PropTypes.bool,
712
+ /**
713
+ * Placeholder affiché lorsque le select est fermé
714
+ * Surcharge le placeholder par défaut
715
+ */
716
+ placeholder: PropTypes.string,
699
717
  /**
700
718
  * Affiche un input de recherche permettant de filtrer les options
701
719
  */
@@ -9,6 +9,7 @@ import HiCheckbox from '../HiCheckbox';
9
9
  import withStyles from '../styles/withStyles';
10
10
  import { escapeHTML } from '../utils/hiHelpers';
11
11
  import HiIconBuilder from '../utils/HiIconBuilder';
12
+ import HiColoredLabel from '../HiColoredLabel';
12
13
 
13
14
  export const styles = theme => ({
14
15
  listItem: {
@@ -50,9 +51,10 @@ export const styles = theme => ({
50
51
  fontWeight: 'inherit',
51
52
  width: '100%'
52
53
  }),
53
- listItemSecondaryText: _extends({}, theme.typography.body4, {
54
+ listItemSecondaryText: _extends({}, theme.typography.body5, {
54
55
  fontWeight: theme.typography.fontWeightLight,
55
- marginLeft: theme.spacing.unit
56
+ marginLeft: theme.spacing.unit,
57
+ color: theme.palette.neutral.normal
56
58
  }),
57
59
  listItemInfoText: _extends({
58
60
  whiteSpace: 'nowrap',
@@ -139,8 +141,12 @@ class HiSelectableListItem extends React.Component {
139
141
  'div',
140
142
  { className: classes.listItemContent, 'data-id': item.id },
141
143
  !effectiveCheckbox && React.createElement(HiIconBuilder, { icon: item.icon, className: classes.icon }),
142
- item.label,
143
- React.createElement('span', { className: classes.listItemSecondaryText }),
144
+ this.getItemLabel(item),
145
+ React.createElement(
146
+ 'span',
147
+ { className: classes.listItemSecondaryText },
148
+ item.secondaryLabel
149
+ ),
144
150
  childrenIndicator
145
151
  );
146
152
  case 'image':
@@ -154,8 +160,12 @@ class HiSelectableListItem extends React.Component {
154
160
  'div',
155
161
  { className: classes.listItemContent, 'data-id': item.id },
156
162
  img,
157
- item.label,
158
- React.createElement('span', { className: classes.listItemSecondaryText }),
163
+ this.getItemLabel(item),
164
+ React.createElement(
165
+ 'span',
166
+ { className: classes.listItemSecondaryText },
167
+ item.secondaryLabel
168
+ ),
159
169
  childrenIndicator
160
170
  );
161
171
  case 'primary-highlight':
@@ -165,7 +175,7 @@ class HiSelectableListItem extends React.Component {
165
175
  return React.createElement(
166
176
  'div',
167
177
  { className: itemPrimaryHighlightClass, 'data-id': item.id },
168
- item.label
178
+ this.getItemLabel(item)
169
179
  );
170
180
  case 'text':
171
181
  default:
@@ -182,8 +192,12 @@ class HiSelectableListItem extends React.Component {
182
192
  __html: escapeHTML(item.labelHighlight)
183
193
  }
184
194
  }),
185
- !item.labelHighlight && item.label,
186
- React.createElement('span', { className: classes.listItemSecondaryText }),
195
+ !item.labelHighlight && this.getItemLabel(item),
196
+ React.createElement(
197
+ 'span',
198
+ { className: classes.listItemSecondaryText },
199
+ item.secondaryLabel
200
+ ),
187
201
  childrenIndicator
188
202
  );
189
203
  }
@@ -201,6 +215,13 @@ class HiSelectableListItem extends React.Component {
201
215
  this.setState({ hover: !this.state.hover });
202
216
  }
203
217
 
218
+ getItemLabel(item) {
219
+ if (item.color) {
220
+ return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
221
+ }
222
+ return item.label;
223
+ }
224
+
204
225
  /**
205
226
  * Build list item from type
206
227
  */