@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.
- package/HiAlertModal/HiAlertModal.js +247 -0
- package/HiAlertModal/index.js +16 -0
- package/HiBreadcrumb/HiBreadcrumb.js +143 -0
- package/HiBreadcrumb/HiStep.js +123 -0
- package/HiBreadcrumb/HiStepConnector.js +142 -0
- package/HiBreadcrumb/HiStepIcon.js +134 -0
- package/HiBreadcrumb/HiStepLabel.js +182 -0
- package/HiBreadcrumb/HiStepper.js +125 -0
- package/HiBreadcrumb/index.js +16 -0
- package/HiDatePicker/HiDateRangeSelector.js +1 -1
- package/HiExpansionPanel/HiExpansionPanel.js +231 -0
- package/HiExpansionPanel/index.js +16 -0
- package/HiForm/HiFormControl.js +19 -24
- package/HiForm/HiSearchField.js +1 -1
- package/HiPins/HiPins.js +0 -1
- package/HiSelect/HiSelect.js +50 -31
- package/HiSelectableList/HiSelectableListItem.js +54 -16
- package/HiTable/BodyCells/CellCountry.js +1 -1
- package/HiTable/BodyCells/CellLayout.js +5 -1
- package/HiTable/BodyCells/CellStatus.js +5 -1
- package/HiTable/BodyCells/CellText.js +2 -1
- package/HiTable/ColumnFilter.js +5 -1
- package/HiTable/HiTable.js +15 -8
- package/HiTable/HiTableBody.js +13 -3
- package/HiTable/OrderColumns.js +6 -2
- package/es/HiAlertModal/HiAlertModal.js +189 -0
- package/es/HiAlertModal/index.js +1 -0
- package/es/HiBreadcrumb/HiBreadcrumb.js +73 -0
- package/es/HiBreadcrumb/HiStep.js +93 -0
- package/es/HiBreadcrumb/HiStepConnector.js +83 -0
- package/es/HiBreadcrumb/HiStepIcon.js +81 -0
- package/es/HiBreadcrumb/HiStepLabel.js +154 -0
- package/es/HiBreadcrumb/HiStepper.js +62 -0
- package/es/HiBreadcrumb/index.js +1 -0
- package/es/HiDatePicker/HiDateRangeSelector.js +1 -1
- package/es/HiExpansionPanel/HiExpansionPanel.js +170 -0
- package/es/HiExpansionPanel/index.js +1 -0
- package/es/HiForm/HiFormControl.js +15 -12
- package/es/HiForm/HiSearchField.js +1 -1
- package/es/HiPins/HiPins.js +0 -1
- package/es/HiSelect/HiSelect.js +49 -31
- package/es/HiSelectableList/HiSelectableListItem.js +49 -16
- package/es/HiTable/BodyCells/CellCountry.js +1 -1
- package/es/HiTable/BodyCells/CellLayout.js +5 -1
- package/es/HiTable/BodyCells/CellStatus.js +5 -1
- package/es/HiTable/BodyCells/CellText.js +2 -1
- package/es/HiTable/ColumnFilter.js +5 -1
- package/es/HiTable/HiTable.js +15 -8
- package/es/HiTable/HiTableBody.js +13 -3
- package/es/HiTable/OrderColumns.js +6 -2
- package/es/styles/createHiMuiTheme.js +4 -0
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/styles/createHiMuiTheme.js +4 -0
- package/umd/hipay-material-ui.development.js +923 -834
- 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';
|
@@ -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:
|
196
|
-
onMouseLeave:
|
197
|
-
onFocus:
|
198
|
-
onBlur:
|
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
|
),
|
package/es/HiPins/HiPins.js
CHANGED
package/es/HiSelect/HiSelect.js
CHANGED
@@ -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 =
|
86
|
+
const val = props.value;
|
87
87
|
// No options provided.
|
88
|
-
if (!
|
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
|
-
|
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
|
-
|
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.
|
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
|
143
|
-
React.createElement(
|
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
|
158
|
-
React.createElement(
|
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
|
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
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
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/
|
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 })
|
@@ -253,7 +253,11 @@ class ColumnFilter extends React.Component {
|
|
253
253
|
React.createElement(
|
254
254
|
'div',
|
255
255
|
{ className: classes.menuItemFilter },
|
256
|
-
|
256
|
+
React.createElement(
|
257
|
+
'span',
|
258
|
+
{ style: { marginRight: 4 } },
|
259
|
+
translations.filter
|
260
|
+
),
|
257
261
|
React.createElement(
|
258
262
|
HiPins,
|
259
263
|
{
|