@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.
- package/HiAlertModal/HiAlertModal.js +247 -0
- package/HiAlertModal/index.js +16 -0
- package/HiExpansionPanel/HiExpansionPanel.js +231 -0
- package/HiExpansionPanel/index.js +16 -0
- package/HiForm/HiFormControl.js +3 -0
- package/HiSelect/HiSelect.js +50 -31
- package/HiSelectableList/HiSelectableListItem.js +34 -9
- package/HiTable/BodyCells/CellCountry.js +1 -1
- package/es/HiAlertModal/HiAlertModal.js +189 -0
- package/es/HiAlertModal/index.js +1 -0
- package/es/HiExpansionPanel/HiExpansionPanel.js +170 -0
- package/es/HiExpansionPanel/index.js +1 -0
- package/es/HiForm/HiFormControl.js +3 -0
- package/es/HiSelect/HiSelect.js +49 -31
- package/es/HiSelectableList/HiSelectableListItem.js +30 -9
- package/es/HiTable/BodyCells/CellCountry.js +1 -1
- 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 +826 -775
- package/umd/hipay-material-ui.production.min.js +4 -4
@@ -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.
|
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
|
217
|
-
_react2.default.createElement(
|
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
|
232
|
-
_react2.default.createElement(
|
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
|
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
|
258
|
-
_react2.default.createElement(
|
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/
|
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';
|
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,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.
|
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
|
143
|
-
React.createElement(
|
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
|
158
|
-
React.createElement(
|
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
|
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
|
186
|
-
React.createElement(
|
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
|
*/
|