@hipay/hipay-material-ui 2.3.0-rc.4 → 2.3.0-rc.PSYCHE-2530

package/es/HiSelectableList/HiSelectableListItem.js

@@ -1,373 +1,409 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectSpread from "@babel/runtime/helpers/objectSpread";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ListItem from '@material-ui/core/ListItem';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import HiIcon from '../HiIcon';
-import HiCheckbox from '../HiCheckbox';
-import HiColoredLabel from '../HiColoredLabel';
-import HiLoader from '../HiLoader';
-import { withStyles } from '@material-ui/core/styles';
-import { escapeHTML } from '../utils/helpers';
-import pure from 'recompose/pure';
-import keycode from 'keycode';
-const PureListSubheader = pure(ListSubheader);
-const PureListItem = pure(ListItem);
-export const styles = theme => ({
-  root: {
-    paddingLeft: 4
-  },
-  listItem: {
-    backgroundColor: theme.palette.background3,
-    color: theme.palette.neutral.dark,
-    padding: '5px 12px 5px 0px',
-    fontWeight: theme.typography.fontWeightRegular,
-    maxHeight: 56,
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    '&$listItemInlineWithInfoWithoutSecondary': {
-      justifyContent: 'space-between'
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiCheckbox = _interopRequireDefault(require("../HiCheckbox"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _HiLoader = _interopRequireDefault(require("../HiLoader"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _helpers = require("../utils/helpers");
+
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
+var PureListItem = (0, _pure.default)(_ListItem.default);
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      paddingLeft: 4
     },
-    '&$listItemWithoutSecondaryInline': {
-      display: 'block'
+    listItem: {
+      backgroundColor: theme.palette.background3,
+      color: theme.palette.neutral.dark,
+      padding: '5px 12px 5px 0px',
+      fontWeight: theme.typography.fontWeightRegular,
+      maxHeight: 56,
+      display: 'inline-flex',
+      alignItems: 'center',
+      cursor: 'pointer',
+      '&$listItemInlineWithInfoWithoutSecondary': {
+        justifyContent: 'space-between'
+      },
+      '&$listItemWithoutSecondaryInline': {
+        display: 'block'
+      },
+      '&$inline': {
+        minHeight: 40,
+        '& $secondaryLabel': {
+          display: 'inline-block'
+        }
+      },
+      '&:focus': {
+        backgroundColor: theme.palette.action.hover,
+        outline: 'none'
+      }
     },
-    '&$inline': {
-      minHeight: 40,
-      '& $secondaryLabel': {
-        display: 'inline-block'
+    listItemWithoutSecondaryInline: {},
+    listItemInlineWithInfoWithoutSecondary: {},
+    listItemHover: {
+      '&:hover:not($disabled):not($pinned)': {
+        backgroundColor: theme.palette.action.hover,
+        fontWeight: theme.typography.fontWeightMedium
       }
     },
-    '&:focus': {
-      backgroundColor: theme.palette.action.hover,
-      outline: 'none'
-    }
-  },
-  listItemWithoutSecondaryInline: {},
-  listItemInlineWithInfoWithoutSecondary: {},
-  listItemHover: {
-    '&:hover:not($disabled):not($pinned)': {
-      backgroundColor: theme.palette.action.hover,
-      fontWeight: theme.typography.fontWeightMedium
-    }
-  },
-  centered: {
-    textAlign: 'center',
-    width: '100%'
-  },
-  disabled: {
-    fontWeight: theme.typography.fontWeightLight,
-    cursor: 'default',
-    opacity: 'inherit'
-  },
-  selected: {
-    backgroundColor: theme.palette.action.selected
-  },
-  pinned: {
-    display: 'inherit',
-    marginRight: 8,
-    backgroundColor: theme.palette.background3
-  },
-  thin: {
-    fontWeight: theme.typography.fontWeightLight
-  },
-  loader: {
-    textAlign: 'center',
-    width: 1,
-    height: 22,
-    padding: '8px 0',
-    margin: 'auto'
-  },
-  listItemContent: _objectSpread({}, theme.typography.b1, {
-    fontWeight: 'inherit',
-    width: '100%',
-    minWidth: '50%',
-    padding: '5px 0',
-    '&$listItemContentSelected': {
-      marginBottom: 1,
-      marginLeft: -4
+    centered: {
+      textAlign: 'center',
+      width: '100%'
     },
-    '& strong': {
-      fontWeight: theme.typography.fontWeightMedium
+    disabled: {
+      fontWeight: theme.typography.fontWeightLight,
+      cursor: 'default',
+      opacity: 'inherit'
     },
-    display: 'contents'
-  }),
-  listItemContentSelected: {},
-  label: {
-    maxWidth: '100%',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    display: 'inline-block',
-    margin: '1px 0',
-    paddingLeft: 4
-  },
-  primaryHighlight: {
-    fontWeight: theme.typography.fontWeightMedium,
-    color: theme.palette.primary.main,
-    textTransform: 'uppercase'
-  },
-  secondaryLabel: _objectSpread({}, theme.typography.b3, {
-    color: theme.palette.neutral.main,
-    fontWeight: theme.typography.fontWeightLight,
-    fontSize: 11,
-    marginLeft: 4
-  }),
-  inline: {},
-  info: _objectSpread({}, theme.typography.b3, {
-    color: theme.palette.neutral.main,
-    fontWeight: theme.typography.fontWeightLight,
-    fontSize: 12,
-    textOverflow: 'ellipsis',
-    textAlign: 'right',
-    alignSelf: 'center'
-  }),
-  img: {
-    width: 24,
-    height: 'auto',
-    margin: '1px 4px 3px 4px',
-    verticalAlign: 'middle'
-  },
-  icon: {
-    margin: '0 4px',
-    verticalAlign: 'middle'
-  },
-  labelContent: {
-    display: '-webkit-flex',
-    alignItems: 'center',
-    maxWidth: '85%',
-    '&$labelWithoutSecondaryInline': {
-      maxWidth: '100%'
-    }
-  },
-  labelWithoutSecondaryInline: {},
-  infosContent: {
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    justifyContent: 'space-between',
-    '&$infosInlineWithoutSecondary': {
-      width: 'auto'
+    selected: {
+      backgroundColor: theme.palette.action.selected
     },
-    '&$infosWithoutSecondaryInline': {
-      paddingLeft: 28
-    }
-  },
-  infosInlineWithoutSecondary: {},
-  infosWithSecondaryInline: {},
-  infosWithoutSecondaryInline: {}
-});
+    pinned: {
+      display: 'inherit',
+      marginRight: 8,
+      backgroundColor: theme.palette.background3
+    },
+    thin: {
+      fontWeight: theme.typography.fontWeightLight
+    },
+    loader: {
+      textAlign: 'center',
+      width: 1,
+      height: 22,
+      padding: '8px 0',
+      margin: 'auto'
+    },
+    listItemContent: (0, _objectSpread2.default)({}, theme.typography.b1, {
+      fontWeight: 'inherit',
+      width: '100%',
+      minWidth: '50%',
+      padding: '5px 0',
+      '&$listItemContentSelected': {
+        marginBottom: 1,
+        marginLeft: -4
+      },
+      '& strong': {
+        fontWeight: theme.typography.fontWeightMedium
+      },
+      display: 'contents'
+    }),
+    listItemContentSelected: {},
+    label: {
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: 'inline-block',
+      margin: '1px 0',
+      paddingLeft: 4
+    },
+    primaryHighlight: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette.primary.main,
+      textTransform: 'uppercase'
+    },
+    secondaryLabel: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: 11,
+      marginLeft: 4
+    }),
+    inline: {},
+    info: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: 12,
+      textOverflow: 'ellipsis',
+      textAlign: 'right',
+      alignSelf: 'center'
+    }),
+    img: {
+      width: 24,
+      height: 'auto',
+      margin: '1px 4px 3px 4px',
+      verticalAlign: 'middle'
+    },
+    icon: {
+      margin: '0 4px',
+      verticalAlign: 'middle'
+    },
+    labelContent: {
+      display: '-webkit-flex',
+      alignItems: 'center',
+      maxWidth: '85%',
+      '&$labelWithoutSecondaryInline': {
+        maxWidth: '100%'
+      }
+    },
+    labelWithoutSecondaryInline: {},
+    infosContent: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      justifyContent: 'space-between',
+      '&$infosInlineWithoutSecondary': {
+        width: 'auto'
+      },
+      '&$infosWithoutSecondaryInline': {
+        paddingLeft: 28
+      }
+    },
+    infosInlineWithoutSecondary: {},
+    infosWithSecondaryInline: {},
+    infosWithoutSecondaryInline: {}
+  };
+};
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
  * - la sélection/déséclection d'un item est géré avec KeyDown
  */
 
-class HiSelectableListItem extends React.PureComponent {
-  constructor(props) {
-    super(props);
 
-    this.setHover = hover => () => {
-      this.setState({
-        hover
-      });
-    };
+exports.styles = styles;
 
-    this.handleKeyDown = item => event => {
-      const key = keycode(event);
+var HiSelectableListItem =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelectableListItem, _React$PureComponent);
 
-      if (key === 'space' || key === 'enter') {
-        event.preventDefault();
-        event.stopPropagation();
+  function HiSelectableListItem(props) {
+    var _this;
 
-        if (item) {
-          this.props.onSelect(null, item);
+    (0, _classCallCheck2.default)(this, HiSelectableListItem);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectableListItem).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setHover", function (hover) {
+      return function () {
+        _this.setState({
+          hover: hover
+        });
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (item) {
+      return function (event) {
+        var key = (0, _keycode.default)(event);
+
+        if (key === 'space' || key === 'enter') {
+          event.preventDefault();
+          event.stopPropagation();
+
+          if (item) {
+            _this.props.onSelect(null, item);
+          }
         }
-      }
-    };
-
-    this.state = {
+      };
+    });
+    _this.state = {
       hover: false
     };
-    this.buildItemLabel = this.buildItemLabel.bind(this);
-    this.setHover = this.setHover.bind(this);
+    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
+    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
   }
 
-  /**
-   * Build item label with highlight and/or colored label
-   *
-   * @returns {*}
-   */
-  buildItemLabel() {
-    const {
-      classes,
-      color,
-      label,
-      labelHighlight,
-      selected
-    } = this.props;
-
-    if (labelHighlight) {
-      const spanHighlight = React.createElement("span", {
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: {
-          __html: escapeHTML(labelHighlight)
+  (0, _createClass2.default)(HiSelectableListItem, [{
+    key: "buildItemLabel",
+
+    /**
+     * Build item label with highlight and/or colored label
+     *
+     * @returns {*}
+     */
+    value: function buildItemLabel() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          color = _this$props.color,
+          label = _this$props.label,
+          labelHighlight = _this$props.labelHighlight,
+          selected = _this$props.selected;
+
+      if (labelHighlight) {
+        var spanHighlight = _react.default.createElement("span", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: (0, _helpers.escapeHTML)(labelHighlight)
+          }
+        });
+
+        if (color && selected) {
+          return _react.default.createElement(_HiColoredLabel.default, {
+            color: color,
+            label: spanHighlight
+          });
         }
-      });
+
+        return _react.default.createElement("span", {
+          className: classes.label
+        }, spanHighlight);
+      }
 
       if (color && selected) {
-        return React.createElement(HiColoredLabel, {
+        return _react.default.createElement(_HiColoredLabel.default, {
+          className: classes.coloredLabel,
           color: color,
-          label: spanHighlight
+          label: label
         });
       }
 
-      return React.createElement("span", {
-        className: classes.label
-      }, spanHighlight);
-    }
-
-    if (color && selected) {
-      return React.createElement(HiColoredLabel, {
-        className: classes.coloredLabel,
-        color: color,
-        label: label
-      });
-    }
-
-    return React.createElement("div", {
-      className: classes.label,
-      title: label
-    }, label);
-  }
-
-  render() {
-    const {
-      centered,
-      classes,
-      selected,
-      disabled,
-      fallbackImage,
-      hideCheckbox,
-      onSelect,
-      indeterminate,
-      indeterminateIcon,
-      icon,
-      id,
-      img,
-      info,
-      hoverIcon,
-      checkedIcon,
-      level,
-      paddingLeft,
-      pinned,
-      secondaryInline,
-      secondaryLabel,
-      thin,
-      type,
-      color,
-      item
-    } = this.props; // Return simple loader list item
-
-    if (type === 'loader') {
-      return React.createElement(ListItem, null, React.createElement(HiLoader, {
-        loading: true,
-        className: classes.loader,
-        size: 8
-      }));
+      return _react.default.createElement("div", {
+        className: classes.label,
+        title: label
+      }, label);
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames, _classNames3, _classNames4;
+
+      var _this$props2 = this.props,
+          centered = _this$props2.centered,
+          classes = _this$props2.classes,
+          selected = _this$props2.selected,
+          disabled = _this$props2.disabled,
+          fallbackImage = _this$props2.fallbackImage,
+          hideCheckbox = _this$props2.hideCheckbox,
+          onSelect = _this$props2.onSelect,
+          indeterminate = _this$props2.indeterminate,
+          indeterminateIcon = _this$props2.indeterminateIcon,
+          icon = _this$props2.icon,
+          id = _this$props2.id,
+          img = _this$props2.img,
+          info = _this$props2.info,
+          hoverIcon = _this$props2.hoverIcon,
+          checkedIcon = _this$props2.checkedIcon,
+          level = _this$props2.level,
+          paddingLeft = _this$props2.paddingLeft,
+          pinned = _this$props2.pinned,
+          secondaryInline = _this$props2.secondaryInline,
+          secondaryLabel = _this$props2.secondaryLabel,
+          thin = _this$props2.thin,
+          type = _this$props2.type,
+          color = _this$props2.color,
+          item = _this$props2.item; // Return simple loader list item
+
+      if (type === 'loader') {
+        return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
+          loading: true,
+          className: classes.loader,
+          size: 8
+        }));
+      }
 
-    let displayedIcon;
+      var displayedIcon;
 
-    if (!disabled && this.state.hover) {
-      displayedIcon = hoverIcon;
-    } else if (icon) {
-      displayedIcon = icon;
-    }
-
-    const ListItemComponentName = pinned ? PureListSubheader : PureListItem;
-    return React.createElement(ListItemComponentName, _extends({
-      id: id,
-      tabIndex: disabled ? '-1' : 0,
-      key: `li-${id}`,
-      classes: {
-        root: classes.root
-      },
-      className: classNames(classes.listItem, classes.listItemHover, {
-        [classes.disabled]: disabled,
-        [classes.selected]: selected,
-        [classes.thin]: thin,
-        [classes.pinned]: pinned,
-        [classes.inline]: secondaryInline,
-        [classes.listItemWithoutSecondaryInline]: !secondaryInline,
-        [classes.listItemInlineWithInfoWithoutSecondary]: secondaryInline && info && !secondaryLabel
-      }),
-      disabled: disabled
-    }, disabled || {
-      onClick: onSelect,
-      onMouseEnter: this.setHover(true),
-      onMouseLeave: this.setHover(false),
-      onKeyDown: this.handleKeyDown(item)
-    }, {
-      style: {
-        paddingLeft: `${paddingLeft + level * 32}px`
+      if (!disabled && this.state.hover) {
+        displayedIcon = hoverIcon;
+      } else if (icon) {
+        displayedIcon = icon;
       }
-    }), React.createElement("div", {
-      className: classNames(classes.labelContent, {
-        [classes.labelWithoutSecondaryInline]: !secondaryInline || !secondaryLabel && !info
-      })
-    }, !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
-      tabIndex: 0,
-      classes: {
-        root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
-      },
-      checked: selected,
-      checkedIcon: checkedIcon,
-      color: disabled ? 'inherit' : 'primary',
-      disabled: disabled,
-      icon: displayedIcon,
-      indeterminate: indeterminate,
-      indeterminateIcon: indeterminateIcon
-    }), type === 'image' && img && React.createElement("img", {
-      src: img,
-      alt: '',
-      onError: e => {
-        if (fallbackImage) {
-          e.target.src = `${fallbackImage}`;
-        } else {
-          e.target.style.display = 'none';
-        }
-      },
-      className: classes.img
-    }), React.createElement("div", {
-      className: classNames(classes.listItemContent, {
-        [classes.centered]: centered,
-        [classes.primaryHighlight]: type === 'primary-highlight',
-        [classes.listItemContentSelected]: selected && color
-      }),
-      "data-id": id
-    }, type === 'icon' && icon && hideCheckbox && React.createElement(HiIcon, {
-      icon: icon,
-      className: classes.icon
-    }), this.buildItemLabel())), React.createElement("div", {
-      className: classNames(classes.infosContent, {
-        [classes.infosWithoutSecondaryInline]: !secondaryInline,
-        [classes.infosWithSecondaryInline]: !secondaryInline,
-        [classes.infosInlineWithoutSecondary]: secondaryInline && !secondaryLabel
-      })
-    }, !!secondaryLabel && React.createElement("div", {
-      className: classNames(classes.secondaryLabel, {
-        [classes.inline]: secondaryInline
-      })
-    }, secondaryLabel), !!info && React.createElement("span", {
-      className: classNames(classes.info)
-    }, info)));
-  }
 
-}
+      var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
+      return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
+        id: id,
+        tabIndex: disabled ? '-1' : 0,
+        key: "li-".concat(id),
+        classes: {
+          root: classes.root
+        },
+        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)),
+        disabled: disabled
+      }, disabled || {
+        onClick: onSelect,
+        onMouseEnter: this.setHover(true),
+        onMouseLeave: this.setHover(false),
+        onKeyDown: this.handleKeyDown(item)
+      }, {
+        style: {
+          paddingLeft: "".concat(paddingLeft + level * 32, "px")
+        }
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
+      }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
+        tabIndex: 0,
+        classes: {
+          root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
+        },
+        checked: selected,
+        checkedIcon: checkedIcon,
+        color: disabled ? 'inherit' : 'primary',
+        disabled: disabled,
+        icon: displayedIcon,
+        indeterminate: indeterminate,
+        indeterminateIcon: indeterminateIcon
+      }), type === 'image' && img && _react.default.createElement("img", {
+        src: img,
+        alt: '',
+        onError: function onError(e) {
+          if (fallbackImage) {
+            e.target.src = "".concat(fallbackImage);
+          } else {
+            e.target.style.display = 'none';
+          }
+        },
+        className: classes.img
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+        "data-id": id
+      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+        icon: icon,
+        className: classes.icon
+      }), this.buildItemLabel())), _react.default.createElement("div", {
+        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))
+      }, !!secondaryLabel && _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
+      }, secondaryLabel), !!info && _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.info)
+      }, info)));
+    }
+  }]);
+  return HiSelectableListItem;
+}(_react.default.PureComponent);
 
-HiSelectableListItem.defaultProps = {
+(0, _defineProperty2.default)(HiSelectableListItem, "defaultProps", {
   centered: false,
   disabled: false,
   hideCheckbox: false,
@@ -381,144 +417,11 @@ HiSelectableListItem.defaultProps = {
   secondaryInline: true,
   selected: false,
   thin: false
-};
-HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Centre le label de l'élément
-   */
-  centered: PropTypes.bool,
-
-  /**
-   * Icon affiché lorsque l'item est sélectionné
-   */
-  checkedIcon: PropTypes.string,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Display selected item as colored label
-   */
-  color: PropTypes.string,
-
-  /**
-   * Applique le style et désactive le click
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
-   */
-  fallbackImage: PropTypes.string,
-
-  /**
-   * N'affiche pas de checkboxes
-   */
-  hideCheckbox: PropTypes.bool,
-
-  /**
-   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-   */
-  hoverIcon: PropTypes.node,
-
-  /**
-   * Icon affiché lorsque l'item n'est pas sélectionné
-   */
-  icon: PropTypes.string,
-
-  /**
-   * Icon affiché lorsque l'item n'est pas sélectionné
-   */
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Path de l'image de l'élément de type image
-   */
-  img: PropTypes.string,
-
-  /**
-   * Items sélectionné partiellement
-   */
-  indeterminate: PropTypes.bool,
-
-  /**
-   * icon à afficher quand le composant a la prop indeterminate.
-   */
-  indeterminateIcon: PropTypes.string,
-
-  /**
-   * Text d'information affiché à droite de l'élément
-   */
-  info: PropTypes.string,
-
-  /**
-   * Label
-   */
-  label: PropTypes.string,
-
-  /**
-   * Label highlight (autorise le highlight du label via la balise <strong>)
-   */
-  labelHighlight: PropTypes.string,
-
-  /**
-   * Niveau de l'item, ajoute un padding à gauche de 16px
-   */
-  level: PropTypes.number,
-
-  /**
-   * Fonction de callback à la sélection de l'élément
-   */
-  onKeyDown: PropTypes.func,
-
-  /**
-   * Fonction de callback à la sélection de l'élément
-   */
-  onKeyUp: PropTypes.func,
-
-  /**
-   * Fonction de callback à la sélection de l'élément
-   */
-  onSelect: PropTypes.func,
-
-  /**
-   * Padding par défaut des éléments
-   */
-  paddingLeft: PropTypes.number,
-
-  /**
-   * Item display as pinned item, with sticky behavior
-   */
-  pinned: PropTypes.bool,
-
-  /**
-   * Définit si le second label s'affiche sur la même ligne ou en dessous
-   */
-  secondaryInline: PropTypes.bool,
-
-  /**
-   * Second label affiché à droite du label
-   */
-  secondaryLabel: PropTypes.string,
-
-  /**
-   * État de l'élément
-   */
-  selected: PropTypes.bool,
-
-  /**
-   * Display label as thin text (used to display parent items)
-   */
-  thin: PropTypes.bool,
-
-  /**
-   * Type de l'élément
-   */
-  type: PropTypes.string
-} : {};
-export default withStyles(styles, {
+});
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectableListItem'
-})(HiSelectableListItem);
+})(HiSelectableListItem);
+
+exports.default = _default;