@hipay/hipay-material-ui 2.0.0-beta.41 → 2.0.0-beta.43
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/HiAppBar/HiAppBar.js +3 -20
- package/HiButton/HiButton.js +39 -15
- package/HiColoredLabel/HiColoredLabel.js +7 -2
- package/HiDatePicker/HiDatePicker.js +0 -2
- package/HiForm/HiInput.js +19 -0
- package/HiIcon/HiIcon.js +37 -31
- package/HiSelectNew/HiNestedSelect.js +44 -4
- package/HiSelectNew/HiSelect.js +12 -4
- package/HiSelectNew/HiSelectInput.js +50 -15
- package/HiSelectableList/HiSelectableListItem.js +8 -2
- package/es/HiAppBar/HiAppBar.js +3 -18
- package/es/HiButton/HiButton.js +43 -18
- package/es/HiColoredLabel/HiColoredLabel.js +8 -3
- package/es/HiDatePicker/HiDatePicker.js +0 -2
- package/es/HiForm/HiInput.js +18 -0
- package/es/HiIcon/HiIcon.js +37 -31
- package/es/HiSelectNew/HiNestedSelect.js +44 -6
- package/es/HiSelectNew/HiSelect.js +11 -4
- package/es/HiSelectNew/HiSelectInput.js +49 -15
- package/es/HiSelectableList/HiSelectableListItem.js +8 -2
- package/es/utils/helpers.js +22 -0
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/umd/hipay-material-ui.development.js +108 -50
- package/umd/hipay-material-ui.production.min.js +2 -2
- package/utils/helpers.js +24 -0
package/es/HiAppBar/HiAppBar.js
CHANGED
@@ -37,10 +37,6 @@ var _ref = React.createElement(HiIcon, {
|
|
37
37
|
icon: "keyboard_arrow_up"
|
38
38
|
});
|
39
39
|
|
40
|
-
var _ref2 = React.createElement(HiIcon, {
|
41
|
-
icon: "keyboard_arrow_down"
|
42
|
-
});
|
43
|
-
|
44
40
|
class HiAppBar extends React.Component {
|
45
41
|
constructor(props) {
|
46
42
|
super(props);
|
@@ -51,13 +47,7 @@ class HiAppBar extends React.Component {
|
|
51
47
|
}
|
52
48
|
|
53
49
|
handleCollapse() {
|
54
|
-
|
55
|
-
this.props.onCollapse();
|
56
|
-
} else {
|
57
|
-
this.setState(prevState => ({
|
58
|
-
collapsed: !prevState.collapsed
|
59
|
-
}));
|
60
|
-
}
|
50
|
+
this.props.onCollapse(!this.state.collapsed);
|
61
51
|
}
|
62
52
|
|
63
53
|
render() {
|
@@ -66,8 +56,7 @@ class HiAppBar extends React.Component {
|
|
66
56
|
children,
|
67
57
|
classes,
|
68
58
|
className,
|
69
|
-
collapsed
|
70
|
-
// enable controlled & uncontrolled prop
|
59
|
+
collapsed,
|
71
60
|
focused,
|
72
61
|
hideable,
|
73
62
|
position
|
@@ -93,11 +82,7 @@ class HiAppBar extends React.Component {
|
|
93
82
|
onClick: this.handleCollapse,
|
94
83
|
color: "inherit",
|
95
84
|
className: classes.iconButton
|
96
|
-
}, _ref))))
|
97
|
-
onClick: this.handleCollapse,
|
98
|
-
color: "inherit",
|
99
|
-
className: classes.collapseButton
|
100
|
-
}, _ref2));
|
85
|
+
}, _ref)))));
|
101
86
|
}
|
102
87
|
|
103
88
|
}
|
package/es/HiButton/HiButton.js
CHANGED
@@ -9,6 +9,12 @@ import { fade } from '../styles/colorManipulator';
|
|
9
9
|
import Button from '@material-ui/core/Button';
|
10
10
|
export const styles = theme => ({
|
11
11
|
root: {},
|
12
|
+
flatNeutral: {
|
13
|
+
color: theme.palette.neutral.main,
|
14
|
+
'&$disabled': {
|
15
|
+
color: theme.palette.action.disabled
|
16
|
+
}
|
17
|
+
},
|
12
18
|
flatPositive: {
|
13
19
|
color: theme.palette.positive.main,
|
14
20
|
'&:hover': {
|
@@ -17,6 +23,9 @@ export const styles = theme => ({
|
|
17
23
|
'@media (hover: none)': {
|
18
24
|
backgroundColor: 'transparent'
|
19
25
|
}
|
26
|
+
},
|
27
|
+
'&$disabled': {
|
28
|
+
color: theme.palette.action.disabled
|
20
29
|
}
|
21
30
|
},
|
22
31
|
flatNegative: {
|
@@ -27,6 +36,9 @@ export const styles = theme => ({
|
|
27
36
|
'@media (hover: none)': {
|
28
37
|
backgroundColor: 'transparent'
|
29
38
|
}
|
39
|
+
},
|
40
|
+
'&$disabled': {
|
41
|
+
color: theme.palette.action.disabled
|
30
42
|
}
|
31
43
|
},
|
32
44
|
flatMiddle: {
|
@@ -37,16 +49,9 @@ export const styles = theme => ({
|
|
37
49
|
'@media (hover: none)': {
|
38
50
|
backgroundColor: 'transparent'
|
39
51
|
}
|
40
|
-
}
|
41
|
-
|
42
|
-
|
43
|
-
color: theme.palette.neutral.main,
|
44
|
-
'&:hover': {
|
45
|
-
backgroundColor: fade(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
|
46
|
-
// Reset on touch devices, it doesn't add specificity
|
47
|
-
'@media (hover: none)': {
|
48
|
-
backgroundColor: 'transparent'
|
49
|
-
}
|
52
|
+
},
|
53
|
+
'&$disabled': {
|
54
|
+
color: theme.palette.action.disabled
|
50
55
|
}
|
51
56
|
},
|
52
57
|
|
@@ -60,6 +65,10 @@ export const styles = theme => ({
|
|
60
65
|
'@media (hover: none)': {
|
61
66
|
backgroundColor: theme.palette.positive.main
|
62
67
|
}
|
68
|
+
},
|
69
|
+
'&$disabled': {
|
70
|
+
color: theme.palette.neutral.contrastText,
|
71
|
+
backgroundColor: theme.palette.neutral.main
|
63
72
|
}
|
64
73
|
},
|
65
74
|
|
@@ -73,6 +82,10 @@ export const styles = theme => ({
|
|
73
82
|
'@media (hover: none)': {
|
74
83
|
backgroundColor: theme.palette.negative.main
|
75
84
|
}
|
85
|
+
},
|
86
|
+
'&$disabled': {
|
87
|
+
color: theme.palette.neutral.contrastText,
|
88
|
+
backgroundColor: theme.palette.neutral.main
|
76
89
|
}
|
77
90
|
},
|
78
91
|
|
@@ -86,6 +99,10 @@ export const styles = theme => ({
|
|
86
99
|
'@media (hover: none)': {
|
87
100
|
backgroundColor: theme.palette.middle.main
|
88
101
|
}
|
102
|
+
},
|
103
|
+
'&$disabled': {
|
104
|
+
color: theme.palette.neutral.contrastText,
|
105
|
+
backgroundColor: theme.palette.neutral.main
|
89
106
|
}
|
90
107
|
},
|
91
108
|
|
@@ -99,6 +116,10 @@ export const styles = theme => ({
|
|
99
116
|
'@media (hover: none)': {
|
100
117
|
backgroundColor: theme.palette.neutral.main
|
101
118
|
}
|
119
|
+
},
|
120
|
+
'&$disabled': {
|
121
|
+
color: theme.palette.neutral.contrastText,
|
122
|
+
backgroundColor: theme.palette.neutral.main
|
102
123
|
}
|
103
124
|
},
|
104
125
|
|
@@ -132,7 +153,8 @@ export const styles = theme => ({
|
|
132
153
|
'&:hover': {
|
133
154
|
border: `1px solid ${theme.palette.neutral.main}`
|
134
155
|
}
|
135
|
-
}
|
156
|
+
},
|
157
|
+
disabled: {}
|
136
158
|
});
|
137
159
|
|
138
160
|
function HiButton(props) {
|
@@ -141,9 +163,10 @@ function HiButton(props) {
|
|
141
163
|
classes,
|
142
164
|
className,
|
143
165
|
color,
|
144
|
-
variant
|
166
|
+
variant,
|
167
|
+
disabled
|
145
168
|
} = props,
|
146
|
-
other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant"]);
|
169
|
+
other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant", "disabled"]);
|
147
170
|
|
148
171
|
const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
|
149
172
|
const fab = variant === 'fab' || variant === 'extendedFab';
|
@@ -152,15 +175,16 @@ function HiButton(props) {
|
|
152
175
|
[classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
|
153
176
|
[classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
|
154
177
|
[classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
|
155
|
-
[classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral',
|
178
|
+
[classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
|
156
179
|
[classes.containedPositive]: (contained || fab) && color === 'positive',
|
157
180
|
[classes.containedNegative]: (contained || fab) && color === 'negative',
|
158
181
|
[classes.containedMiddle]: (contained || fab) && color === 'middle',
|
159
|
-
[classes.containedNeutral]: (contained || fab) && color === 'neutral',
|
182
|
+
[classes.containedNeutral]: (contained || fab) && (color === 'default' || color === 'neutral'),
|
160
183
|
[classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
|
161
184
|
[classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
|
162
185
|
[classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
|
163
|
-
[classes.outlinedNeutral]: variant === 'outlined' && color === 'neutral'
|
186
|
+
[classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
|
187
|
+
[classes.disabled]: disabled
|
164
188
|
});
|
165
189
|
return React.createElement(Button, _extends({
|
166
190
|
className: className,
|
@@ -168,7 +192,8 @@ function HiButton(props) {
|
|
168
192
|
root: buttonClassNames
|
169
193
|
},
|
170
194
|
color: hcolor,
|
171
|
-
variant: variant
|
195
|
+
variant: variant,
|
196
|
+
disabled: disabled
|
172
197
|
}, other), children);
|
173
198
|
}
|
174
199
|
|
@@ -194,7 +219,7 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
194
219
|
variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
|
195
220
|
} : {};
|
196
221
|
HiButton.defaultProps = {
|
197
|
-
color: '
|
222
|
+
color: 'neutral',
|
198
223
|
variant: 'text'
|
199
224
|
};
|
200
225
|
export default withStyles(styles, {
|
@@ -5,10 +5,10 @@ import React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
6
6
|
import classNames from 'classnames';
|
7
7
|
import withStyles from '../styles/withStyles';
|
8
|
-
import { capitalize } from '../utils/helpers';
|
8
|
+
import { capitalize, escapeHTML } from '../utils/helpers';
|
9
9
|
import { fade } from '../styles/colorManipulator';
|
10
10
|
export const styles = theme => ({
|
11
|
-
root: _objectSpread({}, theme.typography.
|
11
|
+
root: _objectSpread({}, theme.typography.b1, {
|
12
12
|
display: 'inline-block',
|
13
13
|
alignItems: 'baseline',
|
14
14
|
maxWidth: '100%',
|
@@ -130,7 +130,12 @@ function HiColoredLabel(props) {
|
|
130
130
|
}, fontWeight && {
|
131
131
|
fontWeight
|
132
132
|
})
|
133
|
-
}, other
|
133
|
+
}, other, {
|
134
|
+
// eslint-disable-next-line react/no-danger
|
135
|
+
dangerouslySetInnerHTML: {
|
136
|
+
__html: escapeHTML(label)
|
137
|
+
}
|
138
|
+
}));
|
134
139
|
}
|
135
140
|
|
136
141
|
HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
|
package/es/HiForm/HiInput.js
CHANGED
@@ -141,6 +141,14 @@ class HiInput extends React.PureComponent {
|
|
141
141
|
this.handleOverlayRef = this.handleOverlayRef.bind(this);
|
142
142
|
}
|
143
143
|
|
144
|
+
static getDerivedStateFromProps(nextProps, prevState) {
|
145
|
+
if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
|
146
|
+
return {
|
147
|
+
focused: nextProps.focused
|
148
|
+
};
|
149
|
+
}
|
150
|
+
}
|
151
|
+
|
144
152
|
getInputElement(el) {
|
145
153
|
this.inputElement = el;
|
146
154
|
|
@@ -171,6 +179,10 @@ class HiInput extends React.PureComponent {
|
|
171
179
|
// Si on click sur un élément de HiInput, on garde le focus
|
172
180
|
// Par exemple sur l'icone reset
|
173
181
|
if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
|
182
|
+
if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
|
183
|
+
this.props.onBlur(event);
|
184
|
+
}
|
185
|
+
|
174
186
|
event.stopPropagation();
|
175
187
|
} else {
|
176
188
|
this.setState({
|
@@ -403,6 +415,12 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
403
415
|
*/
|
404
416
|
error: PropTypes.bool,
|
405
417
|
|
418
|
+
/**
|
419
|
+
* Force le focus de l'input et surcharge le comportement par défaut
|
420
|
+
* où le focus est géré dans le state.
|
421
|
+
*/
|
422
|
+
focused: PropTypes.bool,
|
423
|
+
|
406
424
|
/**
|
407
425
|
* Utile pour surcharger les classes de l'input
|
408
426
|
*/
|
package/es/HiIcon/HiIcon.js
CHANGED
@@ -10,42 +10,48 @@ import * as hiSvgIcons from '../hi-svg-icons';
|
|
10
10
|
import * as mdi from 'mdi-material-ui';
|
11
11
|
export const styles = theme => ({
|
12
12
|
/* Styles applied to the root element. */
|
13
|
-
root: {
|
13
|
+
root: {
|
14
|
+
/* Styles applied to the root element if `color="primary"`. */
|
15
|
+
'&$colorPrimary': {
|
16
|
+
color: theme.palette.primary.main
|
17
|
+
},
|
18
|
+
|
19
|
+
/* Styles applied to the root element if `color="secondary"`. */
|
20
|
+
'&$colorSecondary': {
|
21
|
+
color: theme.palette.secondary.main
|
22
|
+
},
|
23
|
+
|
24
|
+
/* Styles applied to the root element if `color="positive"`. */
|
25
|
+
'&$colorPositive': {
|
26
|
+
color: theme.palette.positive.main
|
27
|
+
},
|
28
|
+
|
29
|
+
/* Styles applied to the root element if `color="negative"`. */
|
30
|
+
'&$colorNegative': {
|
31
|
+
color: theme.palette.negative.main
|
32
|
+
},
|
33
|
+
|
34
|
+
/* Styles applied to the root element if `color="middle"`. */
|
35
|
+
'&$colorMiddle': {
|
36
|
+
color: theme.palette.middle.main
|
37
|
+
},
|
38
|
+
|
39
|
+
/* Styles applied to the root element if `color="neutral"`. */
|
40
|
+
'&$colorNeutral': {
|
41
|
+
color: theme.palette.neutral.main
|
42
|
+
}
|
43
|
+
},
|
14
44
|
|
15
45
|
/* Styles applied to the root element. */
|
16
46
|
faIcon: {
|
17
47
|
fontSize: 20
|
18
48
|
},
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
},
|
24
|
-
|
25
|
-
/* Styles applied to the root element if `color="secondary"`. */
|
26
|
-
colorSecondary: {
|
27
|
-
color: theme.palette.secondary.main
|
28
|
-
},
|
29
|
-
|
30
|
-
/* Styles applied to the root element if `color="positive"`. */
|
31
|
-
colorPositive: {
|
32
|
-
color: theme.palette.positive.main
|
33
|
-
},
|
34
|
-
|
35
|
-
/* Styles applied to the root element if `color="negative"`. */
|
36
|
-
colorNegative: {
|
37
|
-
color: theme.palette.negative.main
|
38
|
-
},
|
39
|
-
|
40
|
-
/* Styles applied to the root element if `color="middle"`. */
|
41
|
-
colorMiddle: {
|
42
|
-
color: theme.palette.middle.main
|
43
|
-
},
|
44
|
-
|
45
|
-
/* Styles applied to the root element if `color="neutral"`. */
|
46
|
-
colorNeutral: {
|
47
|
-
color: theme.palette.neutral.main
|
48
|
-
}
|
49
|
+
colorPrimary: {},
|
50
|
+
colorSecondary: {},
|
51
|
+
colorPositive: {},
|
52
|
+
colorNegative: {},
|
53
|
+
colorMiddle: {},
|
54
|
+
colorNeutral: {}
|
49
55
|
});
|
50
56
|
|
51
57
|
function HiIcon(props) {
|
@@ -6,7 +6,8 @@ import React from 'react';
|
|
6
6
|
import PropTypes from 'prop-types';
|
7
7
|
import HiSelect from './HiSelect';
|
8
8
|
import HiIcon from '../HiIcon';
|
9
|
-
import withStyles from
|
9
|
+
import withStyles from '../styles/withStyles';
|
10
|
+
import { foldAccents } from '../utils/helpers';
|
10
11
|
/**
|
11
12
|
* Return array of final item id in nested list (via props chlidren)
|
12
13
|
* @param itemList
|
@@ -56,18 +57,20 @@ function findFinalItemRecursively(itemList, searchId) {
|
|
56
57
|
* @param visibleParent - visibility of the list parent item (default false)
|
57
58
|
* @param pinnedParent - parent will be displayed as pinned items
|
58
59
|
* @param disabledParent - parent will not be selectable
|
60
|
+
* @param nbChildrenAsInfo - Show children number as info
|
61
|
+
* @param translations - Translations
|
59
62
|
* @returns {*}
|
60
63
|
*/
|
61
64
|
|
62
65
|
|
63
|
-
function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false) {
|
66
|
+
function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations) {
|
64
67
|
return itemList.reduce(({
|
65
68
|
l: memoItemList,
|
66
69
|
s: memoSelected,
|
67
70
|
u: memoUnselected,
|
68
71
|
v: memoVisible
|
69
72
|
}, item) => {
|
70
|
-
const itemVisible = searchValue === '' || item.label.toString().toLowerCase().search(searchValue.toLowerCase()) !== -1; // Parent item
|
73
|
+
const itemVisible = searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1; // Parent item
|
71
74
|
|
72
75
|
if (item.children) {
|
73
76
|
const {
|
@@ -76,6 +79,11 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
|
|
76
79
|
u: unselected,
|
77
80
|
v: visible
|
78
81
|
} = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent);
|
82
|
+
|
83
|
+
if (nbChildrenAsInfo) {
|
84
|
+
item.info = translations.n_children.replace('%s', item.children.length);
|
85
|
+
}
|
86
|
+
|
79
87
|
return {
|
80
88
|
l: [...memoItemList, _objectSpread({}, item, disabledParent && {
|
81
89
|
disabled: true,
|
@@ -126,7 +134,31 @@ export const styles = theme => ({
|
|
126
134
|
borderRadius: '0px 2px',
|
127
135
|
maxHeight: 480,
|
128
136
|
transition: 'none !important'
|
129
|
-
}
|
137
|
+
},
|
138
|
+
labelImg: {
|
139
|
+
height: 18,
|
140
|
+
width: 'auto',
|
141
|
+
margin: '0 4px',
|
142
|
+
verticalAlign: 'middle'
|
143
|
+
},
|
144
|
+
selectIconLabel: _objectSpread({
|
145
|
+
whiteSpace: 'nowrap',
|
146
|
+
overflow: 'hidden',
|
147
|
+
textOverflow: 'ellipsis',
|
148
|
+
paddingRight: 16
|
149
|
+
}, theme.typography.b1, {
|
150
|
+
display: 'inline-flex',
|
151
|
+
width: '100%'
|
152
|
+
}),
|
153
|
+
selectImgLabel: _objectSpread({
|
154
|
+
whiteSpace: 'nowrap',
|
155
|
+
overflow: 'hidden',
|
156
|
+
textOverflow: 'ellipsis',
|
157
|
+
paddingRight: 16
|
158
|
+
}, theme.typography.b1, {
|
159
|
+
display: 'inline-flex',
|
160
|
+
width: '100%'
|
161
|
+
})
|
130
162
|
});
|
131
163
|
/**
|
132
164
|
* HiNestedSelect hérite du composant HiSelect
|
@@ -193,6 +225,7 @@ class HiNestedSelect extends React.PureComponent {
|
|
193
225
|
hasAll,
|
194
226
|
iconAll,
|
195
227
|
multiple,
|
228
|
+
nbChildrenAsInfo,
|
196
229
|
pinnedParent,
|
197
230
|
translations
|
198
231
|
} = this.props; // build item list
|
@@ -202,7 +235,7 @@ class HiNestedSelect extends React.PureComponent {
|
|
202
235
|
s: allSelected,
|
203
236
|
u: allUnselected,
|
204
237
|
v: visible
|
205
|
-
} = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple);
|
238
|
+
} = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations);
|
206
239
|
const itemList = !visible ? [...(loading ? [{
|
207
240
|
id: '_loading',
|
208
241
|
type: 'loader',
|
@@ -332,7 +365,7 @@ HiNestedSelect.defaultProps = {
|
|
332
365
|
search: 'Search',
|
333
366
|
n_items_selected: '%s items selected',
|
334
367
|
one_item_selected: '%s item selected',
|
335
|
-
n_children: '%s
|
368
|
+
n_children: '%s',
|
336
369
|
one_child: '%s item'
|
337
370
|
}
|
338
371
|
};
|
@@ -377,6 +410,11 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
377
410
|
*/
|
378
411
|
name: PropTypes.string.isRequired,
|
379
412
|
|
413
|
+
/**
|
414
|
+
* Définit si l'on doit afficher le nombre d'enfants du parent dans son champ info
|
415
|
+
*/
|
416
|
+
nbChildrenAsInfo: PropTypes.bool,
|
417
|
+
|
380
418
|
/**
|
381
419
|
* Fonction de callback qui renvoit la/les valeurs sélectionnées
|
382
420
|
*
|
@@ -12,7 +12,7 @@ import HiSelectableList from '../HiSelectableList';
|
|
12
12
|
import HiInput from '../HiForm/HiInput';
|
13
13
|
import HiSelectInput from './HiSelectInput';
|
14
14
|
import withStyles from '../styles/withStyles';
|
15
|
-
import { getNextItemSelectable } from '../utils/helpers';
|
15
|
+
import { getNextItemSelectable, foldAccents } from '../utils/helpers';
|
16
16
|
import HiIcon from '../HiIcon';
|
17
17
|
import keycode from 'keycode';
|
18
18
|
export const styles = theme => ({
|
@@ -23,7 +23,7 @@ export const styles = theme => ({
|
|
23
23
|
position: 'relative'
|
24
24
|
},
|
25
25
|
popper: {
|
26
|
-
width: '100%',
|
26
|
+
width: '100% !important',
|
27
27
|
zIndex: 1200
|
28
28
|
},
|
29
29
|
paper: {
|
@@ -136,7 +136,8 @@ class HiSelect extends React.PureComponent {
|
|
136
136
|
|
137
137
|
if (this.overlay && (key === 'down' || key === 'up')) {
|
138
138
|
this.focusOnFirstItem();
|
139
|
-
} else if (this.overlay && key === 'esc') {
|
139
|
+
} else if (this.overlay && key === 'esc' || key === 'enter') {
|
140
|
+
event.preventDefault();
|
140
141
|
this.handleClose();
|
141
142
|
}
|
142
143
|
};
|
@@ -272,7 +273,13 @@ class HiSelect extends React.PureComponent {
|
|
272
273
|
hideCheckbox: true,
|
273
274
|
label: 'loading'
|
274
275
|
}] : []), // simple one level filter on label
|
275
|
-
...(search !== '' ? [...options.filter(item => item.label && item.label.toString().toLowerCase().search(search.toLowerCase()) !== -1)] : [...
|
276
|
+
...(search !== '' ? [...options.filter(item => item.label && foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1)] : [...(this.props.hasAll ? [_objectSpread({
|
277
|
+
id: '_all',
|
278
|
+
label: this.props.translations.all
|
279
|
+
}, this.props.iconAll && {
|
280
|
+
type: 'icon',
|
281
|
+
icon: this.props.iconAll
|
282
|
+
})] : []), ...options])];
|
276
283
|
return {
|
277
284
|
itemList,
|
278
285
|
inputValue: this.buildInputValue(options, value, loading)
|
@@ -135,14 +135,53 @@ class HiSelectInput extends React.PureComponent {
|
|
135
135
|
}
|
136
136
|
};
|
137
137
|
|
138
|
+
this.handleKeyDownReset = event => {
|
139
|
+
const key = keycode(event);
|
140
|
+
|
141
|
+
if (key === 'enter' || key === 'space') {
|
142
|
+
this.handleReset(event);
|
143
|
+
event.stopPropagation();
|
144
|
+
event.preventDefault();
|
145
|
+
}
|
146
|
+
};
|
147
|
+
|
138
148
|
this.handleClick = event => {
|
139
149
|
if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
|
140
150
|
this.props.onClick(event);
|
141
151
|
}
|
142
152
|
};
|
143
153
|
|
154
|
+
this.handleReset = event => {
|
155
|
+
this.props.onReset(event);
|
156
|
+
|
157
|
+
if (this.input) {
|
158
|
+
this.input.focus();
|
159
|
+
}
|
160
|
+
};
|
161
|
+
|
162
|
+
this.handleBlur = event => {
|
163
|
+
if ((!this.input || !this.input.contains(event.relatedTarget)) && this.props.onBlur) {
|
164
|
+
this.props.onBlur(event);
|
165
|
+
} else {
|
166
|
+
if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
|
167
|
+
this.input.focus();
|
168
|
+
}
|
169
|
+
}
|
170
|
+
};
|
171
|
+
|
172
|
+
this.handleRef = el => {
|
173
|
+
this.input = el;
|
174
|
+
|
175
|
+
if (this.props.refElement) {
|
176
|
+
this.props.refElement(el);
|
177
|
+
}
|
178
|
+
};
|
179
|
+
|
144
180
|
this.handleKeyDown = this.handleKeyDown.bind(this);
|
145
181
|
this.handleClick = this.handleClick.bind(this);
|
182
|
+
this.handleBlur = this.handleBlur.bind(this);
|
183
|
+
this.handleRef = this.handleRef.bind(this);
|
184
|
+
this.handleReset = this.handleReset.bind(this);
|
146
185
|
}
|
147
186
|
|
148
187
|
render() {
|
@@ -157,9 +196,7 @@ class HiSelectInput extends React.PureComponent {
|
|
157
196
|
focused,
|
158
197
|
error,
|
159
198
|
id,
|
160
|
-
placeholder
|
161
|
-
refElement,
|
162
|
-
theme
|
199
|
+
placeholder
|
163
200
|
} = this.props; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
|
164
201
|
|
165
202
|
const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
|
@@ -182,9 +219,7 @@ class HiSelectInput extends React.PureComponent {
|
|
182
219
|
onBlur: this.props.onBlur,
|
183
220
|
role: "button",
|
184
221
|
tabIndex: "0",
|
185
|
-
ref:
|
186
|
-
if (refElement) refElement(el);
|
187
|
-
}
|
222
|
+
ref: this.handleRef
|
188
223
|
}, React.createElement("span", {
|
189
224
|
className: classNames(classes.label, {
|
190
225
|
[classes.placeholder]: value === undefined
|
@@ -200,10 +235,8 @@ class HiSelectInput extends React.PureComponent {
|
|
200
235
|
onMouseLeave: this.props.onMouseLeave,
|
201
236
|
onKeyDown: this.handleKeyDown,
|
202
237
|
onFocus: this.props.onFocus,
|
203
|
-
onBlur: this.
|
204
|
-
buttonRef:
|
205
|
-
if (refElement) refElement(el);
|
206
|
-
}
|
238
|
+
onBlur: this.handleBlur,
|
239
|
+
buttonRef: this.handleRef
|
207
240
|
}, React.createElement("span", {
|
208
241
|
className: classNames(classes.label, {
|
209
242
|
[classes.placeholder]: value === undefined
|
@@ -214,9 +247,11 @@ class HiSelectInput extends React.PureComponent {
|
|
214
247
|
}
|
215
248
|
}, React.createElement(HiIcon, {
|
216
249
|
icon: "close",
|
217
|
-
size:
|
218
|
-
color:
|
219
|
-
onClick:
|
250
|
+
size: 20,
|
251
|
+
color: "neutral",
|
252
|
+
onClick: this.handleReset,
|
253
|
+
onKeyDown: this.handleKeyDownReset,
|
254
|
+
tabIndex: 0
|
220
255
|
})), React.createElement(Icon, {
|
221
256
|
classes: {
|
222
257
|
root: iconClass
|
@@ -327,6 +362,5 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
327
362
|
} : {};
|
328
363
|
export default withStyles(styles, {
|
329
364
|
hiComponent: true,
|
330
|
-
name: 'HmuiHiSelectInput'
|
331
|
-
withTheme: true
|
365
|
+
name: 'HmuiHiSelectInput'
|
332
366
|
})(HiSelectInput);
|
@@ -76,7 +76,10 @@ export const styles = theme => ({
|
|
76
76
|
}, theme.typography.b1, {
|
77
77
|
fontWeight: 'inherit',
|
78
78
|
width: '100%',
|
79
|
-
padding: '5px 0'
|
79
|
+
padding: '5px 0',
|
80
|
+
'& strong': {
|
81
|
+
fontWeight: theme.typography.fontWeightMedium
|
82
|
+
}
|
80
83
|
}),
|
81
84
|
label: {
|
82
85
|
display: 'inline-block',
|
@@ -205,6 +208,7 @@ class HiSelectableListItem extends React.Component {
|
|
205
208
|
hideCheckbox,
|
206
209
|
onSelect,
|
207
210
|
indeterminate,
|
211
|
+
indeterminateIcon,
|
208
212
|
icon,
|
209
213
|
id,
|
210
214
|
img,
|
@@ -270,7 +274,8 @@ class HiSelectableListItem extends React.Component {
|
|
270
274
|
,
|
271
275
|
disabled: disabled,
|
272
276
|
icon: displayedIcon,
|
273
|
-
indeterminate: indeterminate
|
277
|
+
indeterminate: indeterminate,
|
278
|
+
indeterminateIcon: indeterminateIcon
|
274
279
|
}), React.createElement("div", {
|
275
280
|
className: classNames(classes.listItemContent, {
|
276
281
|
[classes.centered]: centered,
|
@@ -308,6 +313,7 @@ HiSelectableListItem.defaultProps = {
|
|
308
313
|
hideCheckbox: false,
|
309
314
|
hoverIcon: 'check_box_outline_blank',
|
310
315
|
checkedIcon: 'check_box',
|
316
|
+
indeterminateIcon: 'indeterminate_check_box',
|
311
317
|
indeterminate: false,
|
312
318
|
level: 0,
|
313
319
|
paddingLeft: 4,
|
package/es/utils/helpers.js
CHANGED
@@ -241,4 +241,26 @@ export function getNextItemSelectable(node, direction) {
|
|
241
241
|
}
|
242
242
|
|
243
243
|
return node.previousSibling;
|
244
|
+
}
|
245
|
+
/**
|
246
|
+
* Retourne la chaîne de caractères passée en entrée sans les accents
|
247
|
+
* @param toFold
|
248
|
+
* @returns {*}
|
249
|
+
*/
|
250
|
+
|
251
|
+
export function foldAccents(toFold) {
|
252
|
+
return toFold.replace(/([àáâãäå])|([ç])|([èéêë])|([ìíîï])|([ñ])|([òóôõöø])|([ß])|([ùúûü])|([ÿ])|([æ])|([œ])/g, (str, a, c, e, i, n, o, s, u, y, ae, oe) => {
|
253
|
+
if (a) return 'a';
|
254
|
+
if (c) return 'c';
|
255
|
+
if (e) return 'e';
|
256
|
+
if (i) return 'i';
|
257
|
+
if (n) return 'n';
|
258
|
+
if (o) return 'o';
|
259
|
+
if (s) return 's';
|
260
|
+
if (u) return 'u';
|
261
|
+
if (y) return 'y';
|
262
|
+
if (ae) return 'ae';
|
263
|
+
if (oe) return 'oe';
|
264
|
+
return str;
|
265
|
+
});
|
244
266
|
}
|