@hipay/hipay-material-ui 2.0.0-beta.42 → 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.
@@ -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
- /* Styles applied to the root element if `color="primary"`. */
21
- colorPrimary: {
22
- color: theme.palette.primary.main
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 "../styles/withStyles";
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 items',
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 => ({
@@ -20,11 +20,11 @@ export const styles = theme => ({
20
20
  backgroundColor: theme.palette.background2,
21
21
  maxWidth: 500,
22
22
  width: '100%',
23
- position: 'relative',
24
- zIndex: 1
23
+ position: 'relative'
25
24
  },
26
25
  popper: {
27
- width: '100%'
26
+ width: '100% !important',
27
+ zIndex: 1200
28
28
  },
29
29
  paper: {
30
30
  borderRadius: '0px 2px',
@@ -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)] : [...options])];
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)
@@ -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,
@@ -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
  }
package/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.42
1
+ /** @license HiPay-Material-UI v2.0.0-beta.43
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.42
1
+ /** @license HiPay-Material-UI v2.0.0-beta.43
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
4
  "author": "HiPay PSYCHE Team",
5
- "version": "2.0.0-beta.42",
5
+ "version": "2.0.0-beta.43",
6
6
  "description": "React components that implement Google's Material Design.",
7
7
  "keywords": [
8
8
  "react",
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.42
1
+ /** @license HiPay-Material-UI v2.0.0-beta.43
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
@@ -13289,15 +13289,13 @@
13289
13289
 
13290
13290
  var styles = function styles(theme) {
13291
13291
  return {
13292
- root: {
13292
+ root: {},
13293
+ flatNeutral: {
13294
+ color: theme.palette.neutral.main,
13293
13295
  '&$disabled': {
13294
- color: theme.palette.neutral.contrastText,
13295
- backgroundColor: theme.palette.neutral.main
13296
+ color: theme.palette.action.disabled
13296
13297
  }
13297
13298
  },
13298
- flatNeutral: {
13299
- color: theme.palette.neutral.main
13300
- },
13301
13299
  flatPositive: {
13302
13300
  color: theme.palette.positive.main,
13303
13301
  '&:hover': {
@@ -13306,6 +13304,9 @@
13306
13304
  '@media (hover: none)': {
13307
13305
  backgroundColor: 'transparent'
13308
13306
  }
13307
+ },
13308
+ '&$disabled': {
13309
+ color: theme.palette.action.disabled
13309
13310
  }
13310
13311
  },
13311
13312
  flatNegative: {
@@ -13316,6 +13317,9 @@
13316
13317
  '@media (hover: none)': {
13317
13318
  backgroundColor: 'transparent'
13318
13319
  }
13320
+ },
13321
+ '&$disabled': {
13322
+ color: theme.palette.action.disabled
13319
13323
  }
13320
13324
  },
13321
13325
  flatMiddle: {
@@ -13326,6 +13330,9 @@
13326
13330
  '@media (hover: none)': {
13327
13331
  backgroundColor: 'transparent'
13328
13332
  }
13333
+ },
13334
+ '&$disabled': {
13335
+ color: theme.palette.action.disabled
13329
13336
  }
13330
13337
  },
13331
13338
 
@@ -13339,6 +13346,10 @@
13339
13346
  '@media (hover: none)': {
13340
13347
  backgroundColor: theme.palette.positive.main
13341
13348
  }
13349
+ },
13350
+ '&$disabled': {
13351
+ color: theme.palette.neutral.contrastText,
13352
+ backgroundColor: theme.palette.neutral.main
13342
13353
  }
13343
13354
  },
13344
13355
 
@@ -13352,6 +13363,10 @@
13352
13363
  '@media (hover: none)': {
13353
13364
  backgroundColor: theme.palette.negative.main
13354
13365
  }
13366
+ },
13367
+ '&$disabled': {
13368
+ color: theme.palette.neutral.contrastText,
13369
+ backgroundColor: theme.palette.neutral.main
13355
13370
  }
13356
13371
  },
13357
13372
 
@@ -13365,6 +13380,10 @@
13365
13380
  '@media (hover: none)': {
13366
13381
  backgroundColor: theme.palette.middle.main
13367
13382
  }
13383
+ },
13384
+ '&$disabled': {
13385
+ color: theme.palette.neutral.contrastText,
13386
+ backgroundColor: theme.palette.neutral.main
13368
13387
  }
13369
13388
  },
13370
13389
 
@@ -13378,6 +13397,10 @@
13378
13397
  '@media (hover: none)': {
13379
13398
  backgroundColor: theme.palette.neutral.main
13380
13399
  }
13400
+ },
13401
+ '&$disabled': {
13402
+ color: theme.palette.neutral.contrastText,
13403
+ backgroundColor: theme.palette.neutral.main
13381
13404
  }
13382
13405
  },
13383
13406
 
@@ -65851,42 +65874,48 @@
65851
65874
  var styles$2 = function styles(theme) {
65852
65875
  return {
65853
65876
  /* Styles applied to the root element. */
65854
- root: {},
65877
+ root: {
65878
+ /* Styles applied to the root element if `color="primary"`. */
65879
+ '&$colorPrimary': {
65880
+ color: theme.palette.primary.main
65881
+ },
65855
65882
 
65856
- /* Styles applied to the root element. */
65857
- faIcon: {
65858
- fontSize: 20
65859
- },
65883
+ /* Styles applied to the root element if `color="secondary"`. */
65884
+ '&$colorSecondary': {
65885
+ color: theme.palette.secondary.main
65886
+ },
65860
65887
 
65861
- /* Styles applied to the root element if `color="primary"`. */
65862
- colorPrimary: {
65863
- color: theme.palette.primary.main
65864
- },
65888
+ /* Styles applied to the root element if `color="positive"`. */
65889
+ '&$colorPositive': {
65890
+ color: theme.palette.positive.main
65891
+ },
65865
65892
 
65866
- /* Styles applied to the root element if `color="secondary"`. */
65867
- colorSecondary: {
65868
- color: theme.palette.secondary.main
65869
- },
65893
+ /* Styles applied to the root element if `color="negative"`. */
65894
+ '&$colorNegative': {
65895
+ color: theme.palette.negative.main
65896
+ },
65870
65897
 
65871
- /* Styles applied to the root element if `color="positive"`. */
65872
- colorPositive: {
65873
- color: theme.palette.positive.main
65874
- },
65898
+ /* Styles applied to the root element if `color="middle"`. */
65899
+ '&$colorMiddle': {
65900
+ color: theme.palette.middle.main
65901
+ },
65875
65902
 
65876
- /* Styles applied to the root element if `color="negative"`. */
65877
- colorNegative: {
65878
- color: theme.palette.negative.main
65903
+ /* Styles applied to the root element if `color="neutral"`. */
65904
+ '&$colorNeutral': {
65905
+ color: theme.palette.neutral.main
65906
+ }
65879
65907
  },
65880
65908
 
65881
- /* Styles applied to the root element if `color="middle"`. */
65882
- colorMiddle: {
65883
- color: theme.palette.middle.main
65909
+ /* Styles applied to the root element. */
65910
+ faIcon: {
65911
+ fontSize: 20
65884
65912
  },
65885
-
65886
- /* Styles applied to the root element if `color="neutral"`. */
65887
- colorNeutral: {
65888
- color: theme.palette.neutral.main
65889
- }
65913
+ colorPrimary: {},
65914
+ colorSecondary: {},
65915
+ colorPositive: {},
65916
+ colorNegative: {},
65917
+ colorMiddle: {},
65918
+ colorNeutral: {}
65890
65919
  };
65891
65920
  };
65892
65921
 
@@ -68702,6 +68731,10 @@
68702
68731
  // Si on click sur un élément de HiInput, on garde le focus
68703
68732
  // Par exemple sur l'icone reset
68704
68733
  if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
68734
+ if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
68735
+ this.props.onBlur(event);
68736
+ }
68737
+
68705
68738
  event.stopPropagation();
68706
68739
  } else {
68707
68740
  this.setState({
@@ -86241,8 +86274,6 @@
86241
86274
 
86242
86275
  var inputProps = _extends_1({}, onReset && {
86243
86276
  onReset: this.handleReset
86244
- }, {
86245
- onBlur: this.handleBlur
86246
86277
  }, props, {
86247
86278
  onChange: this.handleInputChange
86248
86279
  });
@@ -91543,7 +91574,7 @@
91543
91574
 
91544
91575
  var styles$l = function styles(theme) {
91545
91576
  return {
91546
- root: _extends_1({}, theme.typography.b3, {
91577
+ root: _extends_1({}, theme.typography.b1, {
91547
91578
  display: 'inline-block',
91548
91579
  alignItems: 'baseline',
91549
91580
  maxWidth: '100%',
@@ -91661,7 +91692,12 @@
91661
91692
  }, fontWeight && {
91662
91693
  fontWeight: fontWeight
91663
91694
  })
91664
- }, other), label);
91695
+ }, other, {
91696
+ // eslint-disable-next-line react/no-danger
91697
+ dangerouslySetInnerHTML: {
91698
+ __html: escapeHTML(label)
91699
+ }
91700
+ }));
91665
91701
  }
91666
91702
 
91667
91703
  HiColoredLabel.propTypes = {
@@ -95614,7 +95650,10 @@
95614
95650
  }, theme.typography.b1, {
95615
95651
  fontWeight: 'inherit',
95616
95652
  width: '100%',
95617
- padding: '5px 0'
95653
+ padding: '5px 0',
95654
+ '& strong': {
95655
+ fontWeight: theme.typography.fontWeightMedium
95656
+ }
95618
95657
  }),
95619
95658
  label: {
95620
95659
  display: 'inline-block',
@@ -95760,6 +95799,7 @@
95760
95799
  hideCheckbox = _this$props2.hideCheckbox,
95761
95800
  onSelect = _this$props2.onSelect,
95762
95801
  indeterminate = _this$props2.indeterminate,
95802
+ indeterminateIcon = _this$props2.indeterminateIcon,
95763
95803
  icon = _this$props2.icon,
95764
95804
  id = _this$props2.id,
95765
95805
  img = _this$props2.img,
@@ -95818,7 +95858,8 @@
95818
95858
  ,
95819
95859
  disabled: disabled,
95820
95860
  icon: displayedIcon,
95821
- indeterminate: indeterminate
95861
+ indeterminate: indeterminate,
95862
+ indeterminateIcon: indeterminateIcon
95822
95863
  }), React__default.createElement("div", {
95823
95864
  className: classnames(classes.listItemContent, (_classNames2 = {}, defineProperty(_classNames2, classes.centered, centered), defineProperty(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
95824
95865
  "data-id": id
@@ -95853,6 +95894,7 @@
95853
95894
  hideCheckbox: false,
95854
95895
  hoverIcon: 'check_box_outline_blank',
95855
95896
  checkedIcon: 'check_box',
95897
+ indeterminateIcon: 'indeterminate_check_box',
95856
95898
  indeterminate: false,
95857
95899
  level: 0,
95858
95900
  paddingLeft: 4,