@hipay/hipay-material-ui 3.1.0 → 3.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/HiChip/HiChip.js +9 -1
  2. package/HiForm/HiPasswordField.js +1 -1
  3. package/HiSelectableList/HiSelectableListItem.js +178 -238
  4. package/es/HiChip/HiChip.js +9 -1
  5. package/es/HiForm/HiPasswordField.js +1 -1
  6. package/es/HiSelectableList/HiSelectableListItem.js +178 -238
  7. package/es/utils/helpers.js +2 -2
  8. package/package.json +1 -1
  9. package/utils/helpers.js +2 -2
package/HiChip/HiChip.js CHANGED
@@ -128,6 +128,7 @@ function HiChip(props) {
128
128
  id = props.id,
129
129
  img = props.img,
130
130
  label = props.label,
131
+ labelIcon = props.labelIcon,
131
132
  onClick = props.onClick,
132
133
  onKeyDown = props.onKeyDown,
133
134
  onPrevious = props.onPrevious,
@@ -169,7 +170,7 @@ function HiChip(props) {
169
170
  className: classes.badge,
170
171
  id: "".concat(id, "-badge"),
171
172
  src: img,
172
- alt: img,
173
+ alt: label,
173
174
  onError: function onError(e) {
174
175
  if (fallbackImage) {
175
176
  e.target.src = "".concat(fallbackImage);
@@ -178,6 +179,13 @@ function HiChip(props) {
178
179
  }
179
180
  },
180
181
  title: titleImg
182
+ }), labelIcon && _react.default.createElement(_HiIcon.default, {
183
+ className: (0, _classnames.default)(classes.icon),
184
+ id: "".concat(id, "-labelIcon"),
185
+ icon: labelIcon,
186
+ size: iconSize,
187
+ title: titleIcon,
188
+ tabIndex: -1
181
189
  }), onPrevious && _react.default.createElement(_HiIcon.default, {
182
190
  className: (0, _classnames.default)(classes.navigate),
183
191
  id: "".concat(id, "-previous"),
package/HiForm/HiPasswordField.js CHANGED
@@ -97,7 +97,7 @@ function (_React$Component) {
97
97
  }, HiInputProps, {
98
98
  endAdornment: endAdornment,
99
99
  inputClassName: inputClassName,
100
- autocomplete: 'on'
100
+ autocomplete: "new-password"
101
101
  })
102
102
  }));
103
103
  }
package/HiSelectableList/HiSelectableListItem.js CHANGED
@@ -1,31 +1,19 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
3
5
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
6
 
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
- exports.default = exports.styles = void 0;
9
-
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
10
+ exports.default = exports.useStyles = exports.useItemLabelStyles = void 0;
11
11
 
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
13
13
 
14
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
15
-
16
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
17
-
18
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
19
-
20
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
21
-
22
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
23
-
24
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
25
-
26
14
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
27
15
 
28
- var _react = _interopRequireDefault(require("react"));
16
+ var _react = _interopRequireWildcard(require("react"));
29
17
 
30
18
  var _classnames = _interopRequireDefault(require("classnames"));
31
19
 
@@ -49,10 +37,64 @@ var _pure = _interopRequireDefault(require("recompose/pure"));
49
37
 
50
38
  var _keycode = _interopRequireDefault(require("keycode"));
51
39
 
52
- var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
53
- var PureListItem = (0, _pure.default)(_ListItem.default);
40
+ var _reactUse = require("react-use");
54
41
 
55
- var styles = function styles(theme) {
42
+ var useItemLabelStyles = (0, _styles.makeStyles)(function (theme) {
43
+ return {
44
+ label: {
45
+ maxWidth: '100%',
46
+ whiteSpace: 'nowrap',
47
+ overflow: 'hidden',
48
+ textOverflow: 'ellipsis',
49
+ display: 'inline-block',
50
+ margin: '1px 0'
51
+ }
52
+ };
53
+ });
54
+ exports.useItemLabelStyles = useItemLabelStyles;
55
+
56
+ function ItemLabel(props) {
57
+ var color = props.color,
58
+ label = props.label,
59
+ labelHighlight = props.labelHighlight,
60
+ selected = props.selected;
61
+ var classes = useItemLabelStyles(props);
62
+
63
+ if (labelHighlight) {
64
+ var spanHighlight = _react.default.createElement("span", {
65
+ // eslint-disable-next-line react/no-danger
66
+ dangerouslySetInnerHTML: {
67
+ __html: (0, _helpers.escapeHTML)(labelHighlight)
68
+ }
69
+ });
70
+
71
+ if (color && selected) {
72
+ return _react.default.createElement(_HiColoredLabel.default, {
73
+ color: color,
74
+ label: spanHighlight
75
+ });
76
+ }
77
+
78
+ return _react.default.createElement("span", {
79
+ className: classes.label
80
+ }, spanHighlight);
81
+ }
82
+
83
+ if (color && selected) {
84
+ return _react.default.createElement(_HiColoredLabel.default, {
85
+ className: classes.coloredLabel,
86
+ color: color,
87
+ label: label
88
+ });
89
+ }
90
+
91
+ return _react.default.createElement("div", {
92
+ className: classes.label,
93
+ title: label
94
+ }, label);
95
+ }
96
+
97
+ var useStyles = (0, _styles.makeStyles)(function (theme) {
56
98
  return {
57
99
  root: {
58
100
  paddingLeft: theme.spacing(1)
@@ -137,14 +179,6 @@ var styles = function styles(theme) {
137
179
  display: 'contents'
138
180
  }),
139
181
  listItemContentSelected: {},
140
- label: {
141
- maxWidth: '100%',
142
- whiteSpace: 'nowrap',
143
- overflow: 'hidden',
144
- textOverflow: 'ellipsis',
145
- display: 'inline-block',
146
- margin: '1px 0'
147
- },
148
182
  highlight: {
149
183
  fontWeight: theme.typography.fontWeightMedium,
150
184
  color: theme.palette.neutral.main,
@@ -177,6 +211,7 @@ var styles = function styles(theme) {
177
211
  verticalAlign: 'middle'
178
212
  },
179
213
  icon: {
214
+ marginLeft: theme.spacing(1),
180
215
  marginRight: theme.spacing(1),
181
216
  verticalAlign: 'middle'
182
217
  },
@@ -204,227 +239,137 @@ var styles = function styles(theme) {
204
239
  infosWithSecondaryInline: {},
205
240
  infosWithoutSecondaryInline: {}
206
241
  };
207
- };
242
+ });
208
243
  /**
209
244
  * Construit un élément de liste sélectionnable (avec checkbox)
210
245
  * - la sélection/déséclection d'un item est géré avec KeyDown
211
246
  */
212
247
 
213
-
214
- exports.styles = styles;
215
-
216
- var HiSelectableListItem =
217
- /*#__PURE__*/
218
- function (_React$PureComponent) {
219
- (0, _inherits2.default)(HiSelectableListItem, _React$PureComponent);
220
-
221
- function HiSelectableListItem(props) {
222
- var _this;
223
-
224
- (0, _classCallCheck2.default)(this, HiSelectableListItem);
225
- _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectableListItem).call(this, props));
226
-
227
- _this.setHover = function (hover) {
228
- return function () {
229
- _this.setState({
230
- hover: hover
231
- });
232
- };
233
- };
234
-
235
- _this.handleKeyDown = function (item) {
236
- return function (event) {
237
- var key = (0, _keycode.default)(event);
238
-
239
- if (key === 'space' || key === 'enter') {
240
- event.preventDefault();
241
- event.stopPropagation();
242
-
243
- if (item) {
244
- _this.props.onSelect(null, item);
245
- }
246
- }
247
- };
248
- };
249
-
250
- _this.state = {
251
- hover: false
252
- };
253
- _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
254
- _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
255
- return _this;
248
+ exports.useStyles = useStyles;
249
+
250
+ function HiSelectableListItem(props) {
251
+ var _classNames, _classNames3, _classNames4;
252
+
253
+ var centered = props.centered,
254
+ selected = props.selected,
255
+ disabled = props.disabled,
256
+ fallbackImage = props.fallbackImage,
257
+ hideCheckbox = props.hideCheckbox,
258
+ onSelect = props.onSelect,
259
+ indeterminate = props.indeterminate,
260
+ indeterminateIcon = props.indeterminateIcon,
261
+ icon = props.icon,
262
+ id = props.id,
263
+ img = props.img,
264
+ info = props.info,
265
+ hoverIcon = props.hoverIcon,
266
+ checkedIcon = props.checkedIcon,
267
+ level = props.level,
268
+ label = props.label,
269
+ labelHighlight = props.labelHighlight,
270
+ paddingLeft = props.paddingLeft,
271
+ pinned = props.pinned,
272
+ secondaryInline = props.secondaryInline,
273
+ secondaryLabel = props.secondaryLabel,
274
+ thin = props.thin,
275
+ type = props.type,
276
+ color = props.color,
277
+ item = props.item;
278
+ var classes = useStyles(props);
279
+ var ref = (0, _react.useRef)(null);
280
+ var isHovering = (0, _reactUse.useHoverDirty)(ref);
281
+ var onKeyDown = (0, _react.useCallback)(function (_ref) {
282
+ var key = _ref.key;
283
+
284
+ if (key === 'space' || key === 'enter') {
285
+ event.preventDefault();
286
+ event.stopPropagation();
287
+ if (item) onSelect(null, item);
288
+ }
289
+ }, [item]);
290
+ (0, _reactUse.useEvent)('keydown', onKeyDown); // Return simple loader list item
291
+
292
+ if (type === 'loader') {
293
+ return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
294
+ className: classes.loader,
295
+ loading: true,
296
+ size: 8
297
+ }));
256
298
  }
257
299
 
258
- (0, _createClass2.default)(HiSelectableListItem, [{
259
- key: "buildItemLabel",
260
-
261
- /**
262
- * Build item label with highlight and/or colored label
263
- *
264
- * @returns {*}
265
- */
266
- value: function buildItemLabel() {
267
- var _this$props = this.props,
268
- classes = _this$props.classes,
269
- color = _this$props.color,
270
- label = _this$props.label,
271
- labelHighlight = _this$props.labelHighlight,
272
- selected = _this$props.selected;
273
-
274
- if (labelHighlight) {
275
- var spanHighlight = _react.default.createElement("span", {
276
- // eslint-disable-next-line react/no-danger
277
- dangerouslySetInnerHTML: {
278
- __html: (0, _helpers.escapeHTML)(labelHighlight)
279
- }
280
- });
281
-
282
- if (color && selected) {
283
- return _react.default.createElement(_HiColoredLabel.default, {
284
- color: color,
285
- label: spanHighlight
286
- });
287
- }
300
+ var displayedIcon;
288
301
 
289
- return _react.default.createElement("span", {
290
- className: classes.label
291
- }, spanHighlight);
292
- }
293
-
294
- if (color && selected) {
295
- return _react.default.createElement(_HiColoredLabel.default, {
296
- className: classes.coloredLabel,
297
- color: color,
298
- label: label
299
- });
300
- }
302
+ if (!disabled && isHovering && hoverIcon) {
303
+ displayedIcon = hoverIcon;
304
+ } else if (icon) {
305
+ displayedIcon = icon;
306
+ }
301
307
 
302
- return _react.default.createElement("div", {
303
- className: classes.label,
304
- title: label
305
- }, label);
308
+ var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
309
+ return _react.default.createElement(ListItemComponentName, {
310
+ ref: ref,
311
+ id: id,
312
+ tabIndex: disabled || pinned ? '-1' : 0,
313
+ key: "li-".concat(id),
314
+ classes: {
315
+ root: classes.root
316
+ },
317
+ className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
318
+ disabled: disabled,
319
+ onClick: onSelect,
320
+ style: {
321
+ paddingLeft: "".concat(paddingLeft + level * 32, "px")
306
322
  }
307
- }, {
308
- key: "render",
309
- value: function render() {
310
- var _classNames, _classNames3, _classNames4;
311
-
312
- var _this$props2 = this.props,
313
- centered = _this$props2.centered,
314
- classes = _this$props2.classes,
315
- selected = _this$props2.selected,
316
- disabled = _this$props2.disabled,
317
- fallbackImage = _this$props2.fallbackImage,
318
- hideCheckbox = _this$props2.hideCheckbox,
319
- onSelect = _this$props2.onSelect,
320
- indeterminate = _this$props2.indeterminate,
321
- indeterminateIcon = _this$props2.indeterminateIcon,
322
- icon = _this$props2.icon,
323
- id = _this$props2.id,
324
- img = _this$props2.img,
325
- info = _this$props2.info,
326
- hoverIcon = _this$props2.hoverIcon,
327
- checkedIcon = _this$props2.checkedIcon,
328
- level = _this$props2.level,
329
- paddingLeft = _this$props2.paddingLeft,
330
- pinned = _this$props2.pinned,
331
- secondaryInline = _this$props2.secondaryInline,
332
- secondaryLabel = _this$props2.secondaryLabel,
333
- thin = _this$props2.thin,
334
- type = _this$props2.type,
335
- color = _this$props2.color,
336
- item = _this$props2.item; // Return simple loader list item
337
-
338
- if (type === 'loader') {
339
- return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
340
- loading: true,
341
- className: classes.loader,
342
- size: 8
343
- }));
344
- }
345
-
346
- var displayedIcon;
347
-
348
- if (!disabled && this.state.hover) {
349
- displayedIcon = hoverIcon;
350
- } else if (icon) {
351
- displayedIcon = icon;
352
- }
353
-
354
- var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
355
- var listItemListenerProps = {};
356
-
357
- if (!disabled && !pinned) {
358
- listItemListenerProps = {
359
- onClick: onSelect,
360
- onMouseEnter: this.setHover(true),
361
- onMouseLeave: this.setHover(false),
362
- onKeyDown: this.handleKeyDown(item)
363
- };
323
+ }, _react.default.createElement("div", {
324
+ className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
325
+ }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
326
+ tabIndex: 0,
327
+ classes: {
328
+ root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
329
+ },
330
+ checked: selected,
331
+ checkedIcon: checkedIcon // color={disabled ? 'inherit' : 'primary'}
332
+ ,
333
+ disabled: disabled,
334
+ icon: displayedIcon,
335
+ indeterminate: indeterminate,
336
+ indeterminateIcon: indeterminateIcon
337
+ }), type === 'image' && img && _react.default.createElement("img", {
338
+ src: img,
339
+ alt: '',
340
+ onError: function onError(e) {
341
+ if (fallbackImage) {
342
+ e.target.src = "".concat(fallbackImage);
343
+ } else {
344
+ e.target.style.display = 'none';
364
345
  }
365
-
366
- return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
367
- id: id,
368
- tabIndex: disabled || pinned ? '-1' : 0,
369
- key: "li-".concat(id),
370
- classes: {
371
- root: classes.root
372
- },
373
- className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
374
- disabled: disabled
375
- }, listItemListenerProps, {
376
- style: {
377
- paddingLeft: "".concat(paddingLeft + level * 32, "px")
378
- }
379
- }), _react.default.createElement("div", {
380
- className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
381
- }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
382
- tabIndex: 0,
383
- classes: {
384
- root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
385
- },
386
- checked: selected,
387
- checkedIcon: checkedIcon,
388
- color: disabled ? 'inherit' : 'primary',
389
- disabled: disabled,
390
- icon: displayedIcon,
391
- indeterminate: indeterminate,
392
- indeterminateIcon: indeterminateIcon
393
- }), type === 'image' && img && _react.default.createElement("img", {
394
- src: img,
395
- alt: '',
396
- onError: function onError(e) {
397
- if (fallbackImage) {
398
- e.target.src = "".concat(fallbackImage);
399
- } else {
400
- e.target.style.display = 'none';
401
- }
402
- },
403
- className: classes.img
404
- }), _react.default.createElement("div", {
405
- className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
406
- "data-id": id
407
- }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
408
- icon: icon,
409
- className: classes.icon,
410
- color: "inherit"
411
- }), this.buildItemLabel())), _react.default.createElement("div", {
412
- className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
413
- }, !!secondaryLabel && _react.default.createElement("div", {
414
- className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
415
- }, secondaryLabel), !!info && _react.default.createElement("span", {
416
- className: (0, _classnames.default)(classes.info)
417
- }, info)));
418
- }
419
- }]);
420
- return HiSelectableListItem;
421
- }(_react.default.PureComponent);
346
+ },
347
+ className: classes.img
348
+ }), _react.default.createElement("div", {
349
+ className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
350
+ "data-id": id
351
+ }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
352
+ icon: icon,
353
+ className: classes.icon,
354
+ color: selected && color ? color : 'inherit'
355
+ }), _react.default.createElement(ItemLabel, {
356
+ color: color,
357
+ label: label,
358
+ labelHighlight: labelHighlight,
359
+ selected: selected
360
+ }))), _react.default.createElement("div", {
361
+ className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
362
+ }, !!secondaryLabel && _react.default.createElement("div", {
363
+ className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
364
+ }, secondaryLabel), !!info && _react.default.createElement("span", {
365
+ className: (0, _classnames.default)(classes.info)
366
+ }, info)));
367
+ }
422
368
 
423
369
  HiSelectableListItem.defaultProps = {
424
370
  centered: false,
425
371
  disabled: false,
426
372
  hideCheckbox: false,
427
- hoverIcon: 'check_box_outline_blank',
428
373
  checkedIcon: 'check_box',
429
374
  indeterminateIcon: 'indeterminate_check_box',
430
375
  indeterminate: false,
@@ -435,10 +380,5 @@ HiSelectableListItem.defaultProps = {
435
380
  selected: false,
436
381
  thin: false
437
382
  };
438
-
439
- var _default = (0, _styles.withStyles)(styles, {
440
- hiComponent: true,
441
- name: 'HmuiHiSelectableListItem'
442
- })(HiSelectableListItem);
443
-
383
+ var _default = HiSelectableListItem;
444
384
  exports.default = _default;
package/es/HiChip/HiChip.js CHANGED
@@ -128,6 +128,7 @@ function HiChip(props) {
128
128
  id = props.id,
129
129
  img = props.img,
130
130
  label = props.label,
131
+ labelIcon = props.labelIcon,
131
132
  onClick = props.onClick,
132
133
  onKeyDown = props.onKeyDown,
133
134
  onPrevious = props.onPrevious,
@@ -169,7 +170,7 @@ function HiChip(props) {
169
170
  className: classes.badge,
170
171
  id: "".concat(id, "-badge"),
171
172
  src: img,
172
- alt: img,
173
+ alt: label,
173
174
  onError: function onError(e) {
174
175
  if (fallbackImage) {
175
176
  e.target.src = "".concat(fallbackImage);
@@ -178,6 +179,13 @@ function HiChip(props) {
178
179
  }
179
180
  },
180
181
  title: titleImg
182
+ }), labelIcon && _react.default.createElement(_HiIcon.default, {
183
+ className: (0, _classnames.default)(classes.icon),
184
+ id: "".concat(id, "-labelIcon"),
185
+ icon: labelIcon,
186
+ size: iconSize,
187
+ title: titleIcon,
188
+ tabIndex: -1
181
189
  }), onPrevious && _react.default.createElement(_HiIcon.default, {
182
190
  className: (0, _classnames.default)(classes.navigate),
183
191
  id: "".concat(id, "-previous"),
package/es/HiForm/HiPasswordField.js CHANGED
@@ -97,7 +97,7 @@ function (_React$Component) {
97
97
  }, HiInputProps, {
98
98
  endAdornment: endAdornment,
99
99
  inputClassName: inputClassName,
100
- autocomplete: 'on'
100
+ autocomplete: "new-password"
101
101
  })
102
102
  }));
103
103
  }
package/es/HiSelectableList/HiSelectableListItem.js CHANGED
@@ -1,31 +1,19 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
3
5
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
6
 
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
- exports.default = exports.styles = void 0;
9
-
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
10
+ exports.default = exports.useStyles = exports.useItemLabelStyles = void 0;
11
11
 
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
13
13
 
14
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
15
-
16
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
17
-
18
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
19
-
20
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
21
-
22
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
23
-
24
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
25
-
26
14
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
27
15
 
28
- var _react = _interopRequireDefault(require("react"));
16
+ var _react = _interopRequireWildcard(require("react"));
29
17
 
30
18
  var _classnames = _interopRequireDefault(require("classnames"));
31
19
 
@@ -49,10 +37,64 @@ var _pure = _interopRequireDefault(require("recompose/pure"));
49
37
 
50
38
  var _keycode = _interopRequireDefault(require("keycode"));
51
39
 
52
- var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
53
- var PureListItem = (0, _pure.default)(_ListItem.default);
40
+ var _reactUse = require("react-use");
54
41
 
55
- var styles = function styles(theme) {
42
+ var useItemLabelStyles = (0, _styles.makeStyles)(function (theme) {
43
+ return {
44
+ label: {
45
+ maxWidth: '100%',
46
+ whiteSpace: 'nowrap',
47
+ overflow: 'hidden',
48
+ textOverflow: 'ellipsis',
49
+ display: 'inline-block',
50
+ margin: '1px 0'
51
+ }
52
+ };
53
+ });
54
+ exports.useItemLabelStyles = useItemLabelStyles;
55
+
56
+ function ItemLabel(props) {
57
+ var color = props.color,
58
+ label = props.label,
59
+ labelHighlight = props.labelHighlight,
60
+ selected = props.selected;
61
+ var classes = useItemLabelStyles(props);
62
+
63
+ if (labelHighlight) {
64
+ var spanHighlight = _react.default.createElement("span", {
65
+ // eslint-disable-next-line react/no-danger
66
+ dangerouslySetInnerHTML: {
67
+ __html: (0, _helpers.escapeHTML)(labelHighlight)
68
+ }
69
+ });
70
+
71
+ if (color && selected) {
72
+ return _react.default.createElement(_HiColoredLabel.default, {
73
+ color: color,
74
+ label: spanHighlight
75
+ });
76
+ }
77
+
78
+ return _react.default.createElement("span", {
79
+ className: classes.label
80
+ }, spanHighlight);
81
+ }
82
+
83
+ if (color && selected) {
84
+ return _react.default.createElement(_HiColoredLabel.default, {
85
+ className: classes.coloredLabel,
86
+ color: color,
87
+ label: label
88
+ });
89
+ }
90
+
91
+ return _react.default.createElement("div", {
92
+ className: classes.label,
93
+ title: label
94
+ }, label);
95
+ }
96
+
97
+ var useStyles = (0, _styles.makeStyles)(function (theme) {
56
98
  return {
57
99
  root: {
58
100
  paddingLeft: theme.spacing(1)
@@ -137,14 +179,6 @@ var styles = function styles(theme) {
137
179
  display: 'contents'
138
180
  }),
139
181
  listItemContentSelected: {},
140
- label: {
141
- maxWidth: '100%',
142
- whiteSpace: 'nowrap',
143
- overflow: 'hidden',
144
- textOverflow: 'ellipsis',
145
- display: 'inline-block',
146
- margin: '1px 0'
147
- },
148
182
  highlight: {
149
183
  fontWeight: theme.typography.fontWeightMedium,
150
184
  color: theme.palette.neutral.main,
@@ -177,6 +211,7 @@ var styles = function styles(theme) {
177
211
  verticalAlign: 'middle'
178
212
  },
179
213
  icon: {
214
+ marginLeft: theme.spacing(1),
180
215
  marginRight: theme.spacing(1),
181
216
  verticalAlign: 'middle'
182
217
  },
@@ -204,227 +239,137 @@ var styles = function styles(theme) {
204
239
  infosWithSecondaryInline: {},
205
240
  infosWithoutSecondaryInline: {}
206
241
  };
207
- };
242
+ });
208
243
  /**
209
244
  * Construit un élément de liste sélectionnable (avec checkbox)
210
245
  * - la sélection/déséclection d'un item est géré avec KeyDown
211
246
  */
212
247
 
213
-
214
- exports.styles = styles;
215
-
216
- var HiSelectableListItem =
217
- /*#__PURE__*/
218
- function (_React$PureComponent) {
219
- (0, _inherits2.default)(HiSelectableListItem, _React$PureComponent);
220
-
221
- function HiSelectableListItem(props) {
222
- var _this;
223
-
224
- (0, _classCallCheck2.default)(this, HiSelectableListItem);
225
- _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectableListItem).call(this, props));
226
-
227
- _this.setHover = function (hover) {
228
- return function () {
229
- _this.setState({
230
- hover: hover
231
- });
232
- };
233
- };
234
-
235
- _this.handleKeyDown = function (item) {
236
- return function (event) {
237
- var key = (0, _keycode.default)(event);
238
-
239
- if (key === 'space' || key === 'enter') {
240
- event.preventDefault();
241
- event.stopPropagation();
242
-
243
- if (item) {
244
- _this.props.onSelect(null, item);
245
- }
246
- }
247
- };
248
- };
249
-
250
- _this.state = {
251
- hover: false
252
- };
253
- _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
254
- _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
255
- return _this;
248
+ exports.useStyles = useStyles;
249
+
250
+ function HiSelectableListItem(props) {
251
+ var _classNames, _classNames3, _classNames4;
252
+
253
+ var centered = props.centered,
254
+ selected = props.selected,
255
+ disabled = props.disabled,
256
+ fallbackImage = props.fallbackImage,
257
+ hideCheckbox = props.hideCheckbox,
258
+ onSelect = props.onSelect,
259
+ indeterminate = props.indeterminate,
260
+ indeterminateIcon = props.indeterminateIcon,
261
+ icon = props.icon,
262
+ id = props.id,
263
+ img = props.img,
264
+ info = props.info,
265
+ hoverIcon = props.hoverIcon,
266
+ checkedIcon = props.checkedIcon,
267
+ level = props.level,
268
+ label = props.label,
269
+ labelHighlight = props.labelHighlight,
270
+ paddingLeft = props.paddingLeft,
271
+ pinned = props.pinned,
272
+ secondaryInline = props.secondaryInline,
273
+ secondaryLabel = props.secondaryLabel,
274
+ thin = props.thin,
275
+ type = props.type,
276
+ color = props.color,
277
+ item = props.item;
278
+ var classes = useStyles(props);
279
+ var ref = (0, _react.useRef)(null);
280
+ var isHovering = (0, _reactUse.useHoverDirty)(ref);
281
+ var onKeyDown = (0, _react.useCallback)(function (_ref) {
282
+ var key = _ref.key;
283
+
284
+ if (key === 'space' || key === 'enter') {
285
+ event.preventDefault();
286
+ event.stopPropagation();
287
+ if (item) onSelect(null, item);
288
+ }
289
+ }, [item]);
290
+ (0, _reactUse.useEvent)('keydown', onKeyDown); // Return simple loader list item
291
+
292
+ if (type === 'loader') {
293
+ return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
294
+ className: classes.loader,
295
+ loading: true,
296
+ size: 8
297
+ }));
256
298
  }
257
299
 
258
- (0, _createClass2.default)(HiSelectableListItem, [{
259
- key: "buildItemLabel",
260
-
261
- /**
262
- * Build item label with highlight and/or colored label
263
- *
264
- * @returns {*}
265
- */
266
- value: function buildItemLabel() {
267
- var _this$props = this.props,
268
- classes = _this$props.classes,
269
- color = _this$props.color,
270
- label = _this$props.label,
271
- labelHighlight = _this$props.labelHighlight,
272
- selected = _this$props.selected;
273
-
274
- if (labelHighlight) {
275
- var spanHighlight = _react.default.createElement("span", {
276
- // eslint-disable-next-line react/no-danger
277
- dangerouslySetInnerHTML: {
278
- __html: (0, _helpers.escapeHTML)(labelHighlight)
279
- }
280
- });
281
-
282
- if (color && selected) {
283
- return _react.default.createElement(_HiColoredLabel.default, {
284
- color: color,
285
- label: spanHighlight
286
- });
287
- }
300
+ var displayedIcon;
288
301
 
289
- return _react.default.createElement("span", {
290
- className: classes.label
291
- }, spanHighlight);
292
- }
293
-
294
- if (color && selected) {
295
- return _react.default.createElement(_HiColoredLabel.default, {
296
- className: classes.coloredLabel,
297
- color: color,
298
- label: label
299
- });
300
- }
302
+ if (!disabled && isHovering && hoverIcon) {
303
+ displayedIcon = hoverIcon;
304
+ } else if (icon) {
305
+ displayedIcon = icon;
306
+ }
301
307
 
302
- return _react.default.createElement("div", {
303
- className: classes.label,
304
- title: label
305
- }, label);
308
+ var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
309
+ return _react.default.createElement(ListItemComponentName, {
310
+ ref: ref,
311
+ id: id,
312
+ tabIndex: disabled || pinned ? '-1' : 0,
313
+ key: "li-".concat(id),
314
+ classes: {
315
+ root: classes.root
316
+ },
317
+ className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
318
+ disabled: disabled,
319
+ onClick: onSelect,
320
+ style: {
321
+ paddingLeft: "".concat(paddingLeft + level * 32, "px")
306
322
  }
307
- }, {
308
- key: "render",
309
- value: function render() {
310
- var _classNames, _classNames3, _classNames4;
311
-
312
- var _this$props2 = this.props,
313
- centered = _this$props2.centered,
314
- classes = _this$props2.classes,
315
- selected = _this$props2.selected,
316
- disabled = _this$props2.disabled,
317
- fallbackImage = _this$props2.fallbackImage,
318
- hideCheckbox = _this$props2.hideCheckbox,
319
- onSelect = _this$props2.onSelect,
320
- indeterminate = _this$props2.indeterminate,
321
- indeterminateIcon = _this$props2.indeterminateIcon,
322
- icon = _this$props2.icon,
323
- id = _this$props2.id,
324
- img = _this$props2.img,
325
- info = _this$props2.info,
326
- hoverIcon = _this$props2.hoverIcon,
327
- checkedIcon = _this$props2.checkedIcon,
328
- level = _this$props2.level,
329
- paddingLeft = _this$props2.paddingLeft,
330
- pinned = _this$props2.pinned,
331
- secondaryInline = _this$props2.secondaryInline,
332
- secondaryLabel = _this$props2.secondaryLabel,
333
- thin = _this$props2.thin,
334
- type = _this$props2.type,
335
- color = _this$props2.color,
336
- item = _this$props2.item; // Return simple loader list item
337
-
338
- if (type === 'loader') {
339
- return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
340
- loading: true,
341
- className: classes.loader,
342
- size: 8
343
- }));
344
- }
345
-
346
- var displayedIcon;
347
-
348
- if (!disabled && this.state.hover) {
349
- displayedIcon = hoverIcon;
350
- } else if (icon) {
351
- displayedIcon = icon;
352
- }
353
-
354
- var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
355
- var listItemListenerProps = {};
356
-
357
- if (!disabled && !pinned) {
358
- listItemListenerProps = {
359
- onClick: onSelect,
360
- onMouseEnter: this.setHover(true),
361
- onMouseLeave: this.setHover(false),
362
- onKeyDown: this.handleKeyDown(item)
363
- };
323
+ }, _react.default.createElement("div", {
324
+ className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
325
+ }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
326
+ tabIndex: 0,
327
+ classes: {
328
+ root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
329
+ },
330
+ checked: selected,
331
+ checkedIcon: checkedIcon // color={disabled ? 'inherit' : 'primary'}
332
+ ,
333
+ disabled: disabled,
334
+ icon: displayedIcon,
335
+ indeterminate: indeterminate,
336
+ indeterminateIcon: indeterminateIcon
337
+ }), type === 'image' && img && _react.default.createElement("img", {
338
+ src: img,
339
+ alt: '',
340
+ onError: function onError(e) {
341
+ if (fallbackImage) {
342
+ e.target.src = "".concat(fallbackImage);
343
+ } else {
344
+ e.target.style.display = 'none';
364
345
  }
365
-
366
- return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
367
- id: id,
368
- tabIndex: disabled || pinned ? '-1' : 0,
369
- key: "li-".concat(id),
370
- classes: {
371
- root: classes.root
372
- },
373
- className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
374
- disabled: disabled
375
- }, listItemListenerProps, {
376
- style: {
377
- paddingLeft: "".concat(paddingLeft + level * 32, "px")
378
- }
379
- }), _react.default.createElement("div", {
380
- className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
381
- }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
382
- tabIndex: 0,
383
- classes: {
384
- root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
385
- },
386
- checked: selected,
387
- checkedIcon: checkedIcon,
388
- color: disabled ? 'inherit' : 'primary',
389
- disabled: disabled,
390
- icon: displayedIcon,
391
- indeterminate: indeterminate,
392
- indeterminateIcon: indeterminateIcon
393
- }), type === 'image' && img && _react.default.createElement("img", {
394
- src: img,
395
- alt: '',
396
- onError: function onError(e) {
397
- if (fallbackImage) {
398
- e.target.src = "".concat(fallbackImage);
399
- } else {
400
- e.target.style.display = 'none';
401
- }
402
- },
403
- className: classes.img
404
- }), _react.default.createElement("div", {
405
- className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
406
- "data-id": id
407
- }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
408
- icon: icon,
409
- className: classes.icon,
410
- color: "inherit"
411
- }), this.buildItemLabel())), _react.default.createElement("div", {
412
- className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
413
- }, !!secondaryLabel && _react.default.createElement("div", {
414
- className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
415
- }, secondaryLabel), !!info && _react.default.createElement("span", {
416
- className: (0, _classnames.default)(classes.info)
417
- }, info)));
418
- }
419
- }]);
420
- return HiSelectableListItem;
421
- }(_react.default.PureComponent);
346
+ },
347
+ className: classes.img
348
+ }), _react.default.createElement("div", {
349
+ className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
350
+ "data-id": id
351
+ }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
352
+ icon: icon,
353
+ className: classes.icon,
354
+ color: selected && color ? color : 'inherit'
355
+ }), _react.default.createElement(ItemLabel, {
356
+ color: color,
357
+ label: label,
358
+ labelHighlight: labelHighlight,
359
+ selected: selected
360
+ }))), _react.default.createElement("div", {
361
+ className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
362
+ }, !!secondaryLabel && _react.default.createElement("div", {
363
+ className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
364
+ }, secondaryLabel), !!info && _react.default.createElement("span", {
365
+ className: (0, _classnames.default)(classes.info)
366
+ }, info)));
367
+ }
422
368
 
423
369
  HiSelectableListItem.defaultProps = {
424
370
  centered: false,
425
371
  disabled: false,
426
372
  hideCheckbox: false,
427
- hoverIcon: 'check_box_outline_blank',
428
373
  checkedIcon: 'check_box',
429
374
  indeterminateIcon: 'indeterminate_check_box',
430
375
  indeterminate: false,
@@ -435,10 +380,5 @@ HiSelectableListItem.defaultProps = {
435
380
  selected: false,
436
381
  thin: false
437
382
  };
438
-
439
- var _default = (0, _styles.withStyles)(styles, {
440
- hiComponent: true,
441
- name: 'HmuiHiSelectableListItem'
442
- })(HiSelectableListItem);
443
-
383
+ var _default = HiSelectableListItem;
444
384
  exports.default = _default;
package/es/utils/helpers.js CHANGED
@@ -52,7 +52,7 @@ function contains(obj, pred) {
52
52
  }
53
53
  /**
54
54
  * Echappe les caractères HTML d'une chaîne de catactères
55
- * Sauf la balise strong
55
+ * Sauf la balise <strong>, <br>, and <a>
56
56
  *
57
57
  * @param unsafeStr
58
58
  * @returns {*}
@@ -60,7 +60,7 @@ function contains(obj, pred) {
60
60
 
61
61
 
62
62
  function escapeHTML(unsafeStr) {
63
- return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br>');
63
+ return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/<a (.*?)>(.*?)<\/a>/g, '[a:$1]$2[a]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[a:(.*?)\](.*?)\[a\]/g, '<a $1>$2</a>').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br>');
64
64
  }
65
65
 
66
66
  function findIndex(arr, pred) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
- "version": "3.1.0",
4
+ "version": "3.2.0",
5
5
  "description": "React components that implement Google's Material Design.",
6
6
  "repository": {
7
7
  "type": "git",
package/utils/helpers.js CHANGED
@@ -52,7 +52,7 @@ function contains(obj, pred) {
52
52
  }
53
53
  /**
54
54
  * Echappe les caractères HTML d'une chaîne de catactères
55
- * Sauf la balise strong
55
+ * Sauf la balise <strong>, <br>, and <a>
56
56
  *
57
57
  * @param unsafeStr
58
58
  * @returns {*}
@@ -60,7 +60,7 @@ function contains(obj, pred) {
60
60
 
61
61
 
62
62
  function escapeHTML(unsafeStr) {
63
- return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br>');
63
+ return unsafeStr.replace(/<br\/?>/g, '[br]').replace(/<strong>/g, '[[').replace(/<\/?strong>/g, ']]').replace(/<a (.*?)>(.*?)<\/a>/g, '[a:$1]$2[a]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/\[a:(.*?)\](.*?)\[a\]/g, '<a $1>$2</a>').replace(/\[\[/g, '<strong>').replace(/\]\]/g, '</strong>').replace(/\[br\]/g, '<br>');
64
64
  }
65
65
 
66
66
  function findIndex(arr, pred) {