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

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.
Files changed (57) hide show
  1. package/HiAlertModal/HiAlertModal.js +247 -0
  2. package/HiAlertModal/index.js +16 -0
  3. package/HiBreadcrumb/HiBreadcrumb.js +143 -0
  4. package/HiBreadcrumb/HiStep.js +123 -0
  5. package/HiBreadcrumb/HiStepConnector.js +142 -0
  6. package/HiBreadcrumb/HiStepIcon.js +134 -0
  7. package/HiBreadcrumb/HiStepLabel.js +182 -0
  8. package/HiBreadcrumb/HiStepper.js +125 -0
  9. package/HiBreadcrumb/index.js +16 -0
  10. package/HiDatePicker/HiDateRangeSelector.js +1 -1
  11. package/HiExpansionPanel/HiExpansionPanel.js +231 -0
  12. package/HiExpansionPanel/index.js +16 -0
  13. package/HiForm/HiFormControl.js +19 -24
  14. package/HiForm/HiSearchField.js +1 -1
  15. package/HiPins/HiPins.js +0 -1
  16. package/HiSelect/HiSelect.js +50 -31
  17. package/HiSelectableList/HiSelectableListItem.js +54 -16
  18. package/HiTable/BodyCells/CellCountry.js +1 -1
  19. package/HiTable/BodyCells/CellLayout.js +5 -1
  20. package/HiTable/BodyCells/CellStatus.js +5 -1
  21. package/HiTable/BodyCells/CellText.js +2 -1
  22. package/HiTable/ColumnFilter.js +5 -1
  23. package/HiTable/HiTable.js +15 -8
  24. package/HiTable/HiTableBody.js +13 -3
  25. package/HiTable/OrderColumns.js +6 -2
  26. package/es/HiAlertModal/HiAlertModal.js +189 -0
  27. package/es/HiAlertModal/index.js +1 -0
  28. package/es/HiBreadcrumb/HiBreadcrumb.js +73 -0
  29. package/es/HiBreadcrumb/HiStep.js +93 -0
  30. package/es/HiBreadcrumb/HiStepConnector.js +83 -0
  31. package/es/HiBreadcrumb/HiStepIcon.js +81 -0
  32. package/es/HiBreadcrumb/HiStepLabel.js +154 -0
  33. package/es/HiBreadcrumb/HiStepper.js +62 -0
  34. package/es/HiBreadcrumb/index.js +1 -0
  35. package/es/HiDatePicker/HiDateRangeSelector.js +1 -1
  36. package/es/HiExpansionPanel/HiExpansionPanel.js +170 -0
  37. package/es/HiExpansionPanel/index.js +1 -0
  38. package/es/HiForm/HiFormControl.js +15 -12
  39. package/es/HiForm/HiSearchField.js +1 -1
  40. package/es/HiPins/HiPins.js +0 -1
  41. package/es/HiSelect/HiSelect.js +49 -31
  42. package/es/HiSelectableList/HiSelectableListItem.js +49 -16
  43. package/es/HiTable/BodyCells/CellCountry.js +1 -1
  44. package/es/HiTable/BodyCells/CellLayout.js +5 -1
  45. package/es/HiTable/BodyCells/CellStatus.js +5 -1
  46. package/es/HiTable/BodyCells/CellText.js +2 -1
  47. package/es/HiTable/ColumnFilter.js +5 -1
  48. package/es/HiTable/HiTable.js +15 -8
  49. package/es/HiTable/HiTableBody.js +13 -3
  50. package/es/HiTable/OrderColumns.js +6 -2
  51. package/es/styles/createHiMuiTheme.js +4 -0
  52. package/index.es.js +1 -1
  53. package/index.js +1 -1
  54. package/package.json +1 -1
  55. package/styles/createHiMuiTheme.js +4 -0
  56. package/umd/hipay-material-ui.development.js +923 -834
  57. package/umd/hipay-material-ui.production.min.js +4 -4
@@ -0,0 +1,62 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import classNames from 'classnames';
6
+ import { withStyles } from '../styles';
7
+ import Paper from '../Paper';
8
+
9
+ export const styles = theme => ({
10
+ root: {
11
+ display: 'flex',
12
+ padding: theme.spacing.unit * 3,
13
+ maxWidth: 160,
14
+ flexDirection: 'column'
15
+ }
16
+ });
17
+
18
+ class HiStepper extends React.PureComponent {
19
+
20
+ render() {
21
+ const _props = this.props,
22
+ { activeStep, children, classes, className: classNameProp } = _props,
23
+ other = _objectWithoutProperties(_props, ['activeStep', 'children', 'classes', 'className']);
24
+
25
+ const className = classNames(classes.root, classNameProp);
26
+
27
+ const childrenArray = React.Children.toArray(children.props.children);
28
+
29
+ const steps = childrenArray.map((step, index) => {
30
+ return React.cloneElement(step, _extends({ index, active: activeStep === index }, step.props));
31
+ });
32
+
33
+ return React.createElement(
34
+ Paper,
35
+ _extends({ square: true, elevation: 0, className: className }, other),
36
+ steps
37
+ );
38
+ }
39
+ }
40
+
41
+ HiStepper.defaultProps = {
42
+ activeStep: 0
43
+ };
44
+ HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
45
+ /**
46
+ * Set the active step (zero based index).
47
+ */
48
+ activeStep: PropTypes.number,
49
+ /**
50
+ * Two or more `<Step />` components.
51
+ */
52
+ children: PropTypes.node.isRequired,
53
+ /**
54
+ * Useful to extend the style applied to components.
55
+ */
56
+ classes: PropTypes.object.isRequired,
57
+ /**
58
+ * @ignore
59
+ */
60
+ className: PropTypes.string
61
+ } : {};
62
+ export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);
@@ -0,0 +1 @@
1
+ export { default } from './HiBreadcrumb';
@@ -27,7 +27,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
27
27
  type = 'primary-highlight';
28
28
  break;
29
29
  case 'cd':
30
- label = t.last_24h;
30
+ label = t.today;
31
31
  from = moment().subtract(1, 'day');
32
32
  to = moment();
33
33
  info = `${from.calendar()} ${t.to_now}`;
@@ -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';
@@ -87,6 +87,17 @@ class HiFormControl extends React.PureComponent {
87
87
  constructor(props) {
88
88
  super(props);
89
89
 
90
+ this.handleFocus = value => () => {
91
+ this.setState({ focused: value });
92
+ if (value === false && this.state.hovered) {
93
+ this.setState({ hovered: false });
94
+ }
95
+ };
96
+
97
+ this.handleHover = value => () => {
98
+ this.setState({ hovered: value });
99
+ };
100
+
90
101
  this.state = {
91
102
  helperOpen: false,
92
103
  focused: false,
@@ -105,14 +116,6 @@ class HiFormControl extends React.PureComponent {
105
116
  }
106
117
  }
107
118
 
108
- handleFocus(value) {
109
- this.setState({ focused: value });
110
- }
111
-
112
- handleHover(value) {
113
- this.setState({ hovered: value });
114
- }
115
-
116
119
  render() {
117
120
  const _props = this.props,
118
121
  {
@@ -192,10 +195,10 @@ class HiFormControl extends React.PureComponent {
192
195
  React.createElement(
193
196
  'div',
194
197
  {
195
- onMouseEnter: () => this.handleHover(true),
196
- onMouseLeave: () => this.handleHover(false),
197
- onFocus: () => this.handleFocus(true),
198
- onBlur: () => this.handleFocus(false)
198
+ onMouseEnter: this.handleHover(true),
199
+ onMouseLeave: this.handleHover(false),
200
+ onFocus: this.handleFocus(true),
201
+ onBlur: this.handleFocus(false)
199
202
  },
200
203
  children
201
204
  ),
@@ -85,7 +85,7 @@ class HiSearchField extends React.Component {
85
85
  if (typeof this.props.onSearch === 'undefined') {
86
86
  this.props.callbackFilteredList(this.props.itemList);
87
87
  } else {
88
- this.props.onSearch('');
88
+ this.props.onSearch(undefined, '');
89
89
  }
90
90
  }
91
91
 
@@ -15,7 +15,6 @@ export const styles = theme => ({
15
15
  textAlign: 'center',
16
16
  borderRadius: '45px',
17
17
  verticalAlign: 'middle',
18
- margin: 0.5 * theme.spacing.unit,
19
18
  fontSize: 11,
20
19
  fontWeight: theme.typography.fontWeightMedium,
21
20
  fontFamily: theme.typography.fontFamily
@@ -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,11 +9,13 @@ 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: {
15
16
  padding: `${9}px 0px`,
16
- fontWeight: theme.typography.fontWeightRegular
17
+ fontWeight: theme.typography.fontWeightRegular,
18
+ maxHeight: 40
17
19
  },
18
20
  listItemTitle: {
19
21
  padding: `${9}px 0px`,
@@ -50,9 +52,10 @@ export const styles = theme => ({
50
52
  fontWeight: 'inherit',
51
53
  width: '100%'
52
54
  }),
53
- listItemSecondaryText: _extends({}, theme.typography.body4, {
55
+ listItemSecondaryText: _extends({}, theme.typography.body5, {
54
56
  fontWeight: theme.typography.fontWeightLight,
55
- marginLeft: theme.spacing.unit
57
+ marginLeft: theme.spacing.unit,
58
+ color: theme.palette.neutral.normal
56
59
  }),
57
60
  listItemInfoText: _extends({
58
61
  whiteSpace: 'nowrap',
@@ -103,6 +106,11 @@ export const styles = theme => ({
103
106
  color: '#000000'
104
107
  }
105
108
  },
109
+ labelHighlightColored: {
110
+ '&>strong': {
111
+ fontWeight: theme.typography.fontWeightMedium
112
+ }
113
+ },
106
114
  primaryHighlight: {
107
115
  fontWeight: theme.typography.fontWeightMedium,
108
116
  color: theme.palette.business.primary.normal,
@@ -139,8 +147,12 @@ class HiSelectableListItem extends React.Component {
139
147
  'div',
140
148
  { className: classes.listItemContent, 'data-id': item.id },
141
149
  !effectiveCheckbox && React.createElement(HiIconBuilder, { icon: item.icon, className: classes.icon }),
142
- item.label,
143
- React.createElement('span', { className: classes.listItemSecondaryText }),
150
+ this.getItemLabel(item),
151
+ React.createElement(
152
+ 'span',
153
+ { className: classes.listItemSecondaryText },
154
+ item.secondaryLabel
155
+ ),
144
156
  childrenIndicator
145
157
  );
146
158
  case 'image':
@@ -154,8 +166,12 @@ class HiSelectableListItem extends React.Component {
154
166
  'div',
155
167
  { className: classes.listItemContent, 'data-id': item.id },
156
168
  img,
157
- item.label,
158
- React.createElement('span', { className: classes.listItemSecondaryText }),
169
+ this.getItemLabel(item),
170
+ React.createElement(
171
+ 'span',
172
+ { className: classes.listItemSecondaryText },
173
+ item.secondaryLabel
174
+ ),
159
175
  childrenIndicator
160
176
  );
161
177
  case 'primary-highlight':
@@ -165,7 +181,7 @@ class HiSelectableListItem extends React.Component {
165
181
  return React.createElement(
166
182
  'div',
167
183
  { className: itemPrimaryHighlightClass, 'data-id': item.id },
168
- item.label
184
+ this.getItemLabel(item)
169
185
  );
170
186
  case 'text':
171
187
  default:
@@ -176,14 +192,12 @@ class HiSelectableListItem extends React.Component {
176
192
  return React.createElement(
177
193
  'div',
178
194
  { className: itemTextClass, 'data-id': item.id },
179
- item.labelHighlight && React.createElement('span', {
180
- className: classes.labelHighlight,
181
- dangerouslySetInnerHTML: {
182
- __html: escapeHTML(item.labelHighlight)
183
- }
184
- }),
185
- !item.labelHighlight && item.label,
186
- React.createElement('span', { className: classes.listItemSecondaryText }),
195
+ 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,25 @@ class HiSelectableListItem extends React.Component {
201
215
  this.setState({ hover: !this.state.hover });
202
216
  }
203
217
 
218
+ getItemLabel(item) {
219
+ const { classes } = this.props;
220
+ if (!item.labelHighlight && item.color && this.props.selected) {
221
+ return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
222
+ } else if (item.labelHighlight) {
223
+ const mLabel = React.createElement('span', {
224
+ className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
225
+ dangerouslySetInnerHTML: {
226
+ __html: escapeHTML(item.labelHighlight)
227
+ }
228
+ });
229
+ if (item.color && this.props.selected) {
230
+ return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
231
+ }
232
+ return mLabel;
233
+ }
234
+ return item.label;
235
+ }
236
+
204
237
  /**
205
238
  * Build list item from type
206
239
  */
@@ -49,7 +49,7 @@ class CellCountry extends React.PureComponent {
49
49
  render() {
50
50
  const { classes, value, isoCode, view } = this.props;
51
51
 
52
- let path = '/static/hmus/images/countries/' + isoCode.toLowerCase() + '.svg';
52
+ let path = '/static/hmu/images/countries/' + isoCode.toLowerCase() + '.svg';
53
53
 
54
54
  let tooltipContent = React.createElement(
55
55
  'div',
@@ -28,6 +28,10 @@ export const styles = theme => ({
28
28
  lookedUp: {
29
29
  background: `linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)`,
30
30
  borderRadius: '45%'
31
+ },
32
+ pins: {
33
+ position: 'relative',
34
+ top: 3
31
35
  }
32
36
  });
33
37
 
@@ -115,7 +119,7 @@ class CellLayout extends React.Component {
115
119
  },
116
120
  React.createElement(
117
121
  HiPins,
118
- { color: theme.palette.business.primary.normal },
122
+ { color: theme.palette.business.primary.normal, className: classes.pins },
119
123
  childrenCount
120
124
  )
121
125
  )
@@ -11,6 +11,10 @@ export const styles = theme => ({
11
11
  display: 'inline-flex',
12
12
  alignItems: 'baseline',
13
13
  maxWidth: 'calc(100% - 36px)'
14
+ },
15
+ pins: {
16
+ position: 'relative',
17
+ bottom: 1
14
18
  }
15
19
  });
16
20
 
@@ -33,7 +37,7 @@ class CellStatus extends React.PureComponent {
33
37
  React.createElement(HiColoredLabel, { label: value, color: color }),
34
38
  React.createElement(
35
39
  HiPins,
36
- { color: color, onClick: onOpenDetails },
40
+ { color: color, onClick: onOpenDetails, className: classes.pins },
37
41
  nbOperations
38
42
  )
39
43
  ) : React.createElement(HiColoredLabel, { label: value, color: color })
@@ -17,7 +17,8 @@ export const styles = theme => ({
17
17
  display: 'inline-block',
18
18
  overflow: 'hidden',
19
19
  textOverflow: 'ellipsis',
20
- whiteSpace: 'pre'
20
+ whiteSpace: 'pre',
21
+ width: '100%'
21
22
  },
22
23
  noEllipsisSpan: {
23
24
  display: 'inline-block',
@@ -253,7 +253,11 @@ class ColumnFilter extends React.Component {
253
253
  React.createElement(
254
254
  'div',
255
255
  { className: classes.menuItemFilter },
256
- translations.filter,
256
+ React.createElement(
257
+ 'span',
258
+ { style: { marginRight: 4 } },
259
+ translations.filter
260
+ ),
257
261
  React.createElement(
258
262
  HiPins,
259
263
  {