@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/HiSelectableList/HiSelectableListItem.js

@@ -1,561 +1,471 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+exports.default = exports.styles = void 0;
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _react = require('react');
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react2 = _interopRequireDefault(_react);
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _propTypes = require('prop-types');
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classnames = require('classnames');
+var _react = _interopRequireDefault(require("react"));
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _warning = require('warning');
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _warning2 = _interopRequireDefault(_warning);
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
 
-var _mdiMaterialUi = require('mdi-material-ui');
+var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
 
-var _ListItem = require('material-ui/List/ListItem');
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
-var _ListItem2 = _interopRequireDefault(_ListItem);
+var _HiCheckbox = _interopRequireDefault(require("../HiCheckbox"));
 
-var _HiCheckbox = require('../HiCheckbox');
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
 
-var _HiCheckbox2 = _interopRequireDefault(_HiCheckbox);
+var _HiLoader = _interopRequireDefault(require("../HiLoader"));
 
-var _withStyles = require('../styles/withStyles');
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
-var _withStyles2 = _interopRequireDefault(_withStyles);
+var _helpers = require("../utils/helpers");
 
-var _hiHelpers = require('../utils/hiHelpers');
+var styles = function styles(theme) {
+  return {
+    root: {},
+    listItem: {
+      backgroundColor: theme.palette.background3,
+      padding: '5px 0',
+      fontWeight: theme.typography.fontWeightRegular,
+      maxHeight: 56,
+      display: 'inline-flex',
+      alignItems: 'center',
+      cursor: 'pointer',
+      '&$inline': {
+        maxHeight: 40,
+        alignItems: 'flex-start',
+        '& $secondaryLabel': {
+          display: 'inline-block'
+        }
+      },
+      '&:focus': {
+        backgroundColor: theme.palette.action.hover,
+        outline: 'none'
+      }
+    },
+    listItemHover: {
+      '&:hover:not($disabled):not($pinned)': {
+        backgroundColor: theme.palette.action.hover,
+        fontWeight: theme.typography.fontWeightMedium
+      }
+    },
+    centered: {
+      textAlign: 'center',
+      width: '100%'
+    },
+    disabled: {
+      color: theme.palette.action.disabled,
+      fontWeight: theme.typography.fontWeightLight,
+      cursor: 'default'
+    },
+    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: (0, _extends2.default)({
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }, theme.typography.b1, {
+      fontWeight: 'inherit',
+      width: '100%',
+      height: '-webkit-fill-available',
+      padding: '4px 0'
+    }),
+    label: {
+      display: 'inline-block',
+      margin: '1px 0 1px 8px'
+    },
+    coloredLabel: {
+      display: 'inline-flex',
+      marginTop: -4
+    },
+    primaryHighlight: {
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.palette.primary.main,
+      textTransform: 'uppercase'
+    },
+    secondaryLabel: (0, _extends2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: 11,
+      marginLeft: 8
+    }),
+    inline: {},
+    info: (0, _extends2.default)({}, theme.typography.b3, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: 12,
+      width: '-webkit-fill-available',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textAlign: 'right',
+      margin: '4px 12px 4px 8px',
+      alignSelf: 'center'
+    }),
+    checkbox: {
+      width: 20,
+      height: 20,
+      fontSize: 20,
+      margin: '5px 6px 5px 0'
+    },
+    img: {
+      width: 24,
+      height: 'auto',
+      margin: '2px 8px',
+      verticalAlign: 'middle'
+    },
+    icon: {
+      margin: '0 8px',
+      verticalAlign: 'middle'
+    }
+  };
+};
+/**
+ * Construit un élément de liste sélectionnable (avec checkbox)
+ */
 
-var _HiIconBuilder = require('../utils/HiIconBuilder');
 
-var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+exports.styles = styles;
 
-var _HiColoredLabel = require('../HiColoredLabel');
+var HiSelectableListItem =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiSelectableListItem, _React$Component);
 
-var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
+  function HiSelectableListItem(props) {
+    var _this;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    (0, _classCallCheck2.default)(this, HiSelectableListItem);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectableListItem).call(this, props));
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        listItem: {
-            padding: 9 + 'px 0px',
-            fontWeight: theme.typography.fontWeightRegular,
-            maxHeight: 40
-        },
-        listItemTitle: {
-            padding: 9 + 'px 0px',
-            fontWeight: theme.typography.fontWeightLight
-        },
-        listItemHover: {
-            '&:hover:not($disabled)': {
-                backgroundColor: theme.palette.hover,
-                fontWeight: theme.typography.fontWeightMedium
-            }
-        },
-        disabled: {
-            color: theme.palette.neutral.light,
-            fontWeight: theme.typography.fontWeightLight
-        },
-        centered: {
-            textAlign: 'center',
-            width: '100%'
-        },
-        selected: {
-            backgroundColor: theme.palette.selected
-        },
-        childListItem: {
-            paddingLeft: theme.spacing.unit * 2
-        },
-        listItemIconChecked: {
-            color: theme.palette.business.primary.normal
-        },
-        listItemContent: (0, _extends3.default)({
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        }, theme.typography.body1, {
-            fontWeight: 'inherit',
-            width: '100%'
-        }),
-        listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body5, {
-            fontWeight: theme.typography.fontWeightLight,
-            marginLeft: theme.spacing.unit,
-            color: theme.palette.neutral.normal
-        }),
-        listItemInfoText: (0, _extends3.default)({
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            color: theme.palette.neutral.normal
-        }, theme.typography.body4, {
-            fontWeight: theme.typography.fontWeightRegular,
-            textAlign: 'right',
-            margin: '0 8px',
-            width: '-webkit-fill-available'
-        }),
-        checkbox: {
-            width: 20,
-            height: 20,
-            fontSize: 20,
-            marginRight: 20,
-            marginLeft: 20
-        },
-        imgListItem: {
-            width: 24,
-            height: 'auto',
-            marginRight: 8,
-            verticalAlign: 'middle'
-        },
-        checkboxIcon: {
-            width: 20,
-            height: 20,
-            marginLeft: 2,
-            verticalAlign: 'middle',
-            color: theme.palette.text.icon
-        },
-        icon: {
-            width: 20,
-            height: 20,
-            marginRight: 8,
-            verticalAlign: 'middle',
-            color: theme.palette.text.icon
-        },
-        nbChildrenIndicator: (0, _extends3.default)({
-            position: 'absolute',
-            right: 10,
-            color: theme.palette.neutral.normal
-        }, theme.typography.body3),
-        labelHighlight: {
-            '&>strong': {
-                fontWeight: theme.typography.fontWeightMedium,
-                color: '#000000'
-            }
-        },
-        labelHighlightColored: {
-            '&>strong': {
-                fontWeight: theme.typography.fontWeightMedium
-            }
-        },
-        primaryHighlight: {
-            fontWeight: theme.typography.fontWeightMedium,
-            color: theme.palette.business.primary.normal,
-            textTransform: 'uppercase'
-        }
+    _this.setHover = function (hover) {
+      return function () {
+        _this.setState({
+          hover: hover
+        });
+      };
     };
-};
 
-/**
- * Construit un élément de liste sélectionnable (avec checkbox)
- */
+    _this.state = {
+      hover: false
+    };
+    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
 
-var HiSelectableListItem = function (_React$Component) {
-    (0, _inherits3.default)(HiSelectableListItem, _React$Component);
-
-    function HiSelectableListItem(props) {
-        (0, _classCallCheck3.default)(this, HiSelectableListItem);
-
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiSelectableListItem.__proto__ || (0, _getPrototypeOf2.default)(HiSelectableListItem)).call(this, props));
-
-        _this.buildListItem = function () {
-            var _this$props = _this.props,
-                classes = _this$props.classes,
-                type = _this$props.type,
-                item = _this$props.item,
-                nbChildren = _this$props.nbChildren,
-                translations = _this$props.translations,
-                checkbox = _this$props.checkbox;
-
-            var effectiveType = typeof item.type !== 'undefined' ? item.type : type;
-
-            var childrenIndicator = '';
-            if (nbChildren > 0) {
-                childrenIndicator = _react2.default.createElement(
-                    'span',
-                    { className: classes.nbChildrenIndicator },
-                    nbChildren < 2 ? translations.one_child.replace('%s', nbChildren) : translations.n_children.replace('%s', nbChildren)
-                );
-            }
-            switch (effectiveType) {
-                case 'icon':
-                    process.env.NODE_ENV !== "production" ? (0, _warning2.default)(typeof item.icon !== 'undefined', 'Hipay-Material-UI: item with type icon should have icon parameter') : void 0;
-
-                    var effectiveCheckbox = typeof item.checkbox !== 'undefined' ? item.checkbox : checkbox;
-                    return _react2.default.createElement(
-                        'div',
-                        { className: classes.listItemContent, 'data-id': item.id },
-                        !effectiveCheckbox && _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.icon }),
-                        _this.getItemLabel(item),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
-                        childrenIndicator
-                    );
-                case 'image':
-                    var img = '';
-                    if (typeof item.img !== 'undefined') {
-                        img = _react2.default.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
-                    }
-
-                    return _react2.default.createElement(
-                        'div',
-                        { className: classes.listItemContent, 'data-id': item.id },
-                        img,
-                        _this.getItemLabel(item),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
-                        childrenIndicator
-                    );
-                case 'primary-highlight':
-                    // used in DateRangeSelector for Custom item
-                    var itemPrimaryHighlightClass = (0, _classnames2.default)(classes.listItemContent, classes.primaryHighlight);
-
-                    return _react2.default.createElement(
-                        'div',
-                        { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        _this.getItemLabel(item)
-                    );
-                case 'text':
-                default:
-                    var itemTextClass = (0, _classnames2.default)(classes.listItemContent, (0, _defineProperty3.default)({}, classes.centered, item.centered));
-
-                    return _react2.default.createElement(
-                        'div',
-                        { className: itemTextClass, 'data-id': item.id },
-                        _this.getItemLabel(item),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
-                        childrenIndicator
-                    );
-            }
-        };
-
-        _this.state = {
-            hover: false
-        };
-
-        _this.buildListItem = _this.buildListItem.bind(_this);
-        _this.toggleHover = _this.toggleHover.bind(_this);
-        return _this;
-    }
+  (0, _createClass2.default)(HiSelectableListItem, [{
+    key: "buildItemLabel",
 
-    (0, _createClass3.default)(HiSelectableListItem, [{
-        key: 'toggleHover',
-        value: function toggleHover() {
-            this.setState({ hover: !this.state.hover });
-        }
-    }, {
-        key: 'getItemLabel',
-        value: function getItemLabel(item) {
-            var classes = this.props.classes;
-
-            if (!item.labelHighlight && item.color && this.props.selected) {
-                return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: item.label });
-            } else if (item.labelHighlight) {
-                var mLabel = _react2.default.createElement('span', {
-                    className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
-                    dangerouslySetInnerHTML: {
-                        __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
-                    }
-                });
-                if (item.color && this.props.selected) {
-                    return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: mLabel });
-                }
-                return mLabel;
-            }
-            return item.label;
+    /**
+     * 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, {
+            className: classes.coloredLabel,
+            color: color,
+            label: spanHighlight
+          });
         }
 
-        /**
-         * Build list item from type
-         */
-
-    }, {
-        key: 'render',
-        value: function render() {
-            var _classNames2;
-
-            var _props = this.props,
-                classes = _props.classes,
-                selected = _props.selected,
-                item = _props.item,
-                onSelect = _props.onSelect,
-                checkbox = _props.checkbox,
-                disabled = _props.disabled,
-                indeterminate = _props.indeterminate,
-                parentItemSelectable = _props.parentItemSelectable,
-                icon = _props.icon,
-                parentIcon = _props.parentIcon,
-                hoverIcon = _props.hoverIcon,
-                checkedIcon = _props.checkedIcon,
-                level = _props.level,
-                hierarchic = _props.hierarchic,
-                leftPadding = _props.leftPadding;
-
-            /**
-             * Item params override inherited props
-             */
-
-            var effectiveCheckbox = typeof item.checkbox !== 'undefined' ? item.checkbox : checkbox;
-            var effectiveDisabled = typeof item.disabled !== 'undefined' ? item.disabled : disabled;
-
-            // build class
-            var listItemClass = (0, _classnames2.default)(classes.listItem, classes.listItemHover, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.disabled, effectiveDisabled), (0, _defineProperty3.default)(_classNames2, classes.selected, selected), _classNames2));
-            if (item.hasChildren && parentItemSelectable === false) {
-                listItemClass = (0, _classnames2.default)(classes.listItemTitle);
-            }
-
-            // build props
-            var listItemProps = {
-                key: item.id,
-                className: listItemClass,
-                onMouseEnter: this.toggleHover,
-                onMouseLeave: this.toggleHover
-            };
-
-            if (!effectiveDisabled) {
-                listItemProps = (0, _extends3.default)({}, listItemProps, {
-                    button: true,
-                    component: 'li',
-                    onClick: function onClick(event) {
-                        return onSelect(event, item);
-                    }
-                });
-            }
-
-            var selectable = true;
-            if (item.hasChildren && parentItemSelectable === false) {
-                selectable = false;
-                listItemProps.onClick = function () {};
-                listItemProps.button = false;
-            }
-
-            var iconAll = void 0;
-            if (item.id === '_all' && item.icon) {
-                iconAll = _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.checkboxIcon });
-            }
-
-            // calcul du padding left
-            var paddingLeft = 0;
-
-            if (leftPadding) {
-                paddingLeft = leftPadding;
-            } else {
-                // Si pas de hiérarchie, padding de 8px
-                if (!hierarchic) {
-                    if (!effectiveCheckbox) {
-                        paddingLeft = 8;
-                    }
-                } else if (selectable) {
-                    // Si item selectionnable
-                    // Si parent selectionnable
-                    if (parentItemSelectable) {
-                        // Si l'item contient une checkbox
-                        if (effectiveCheckbox) {
-                            paddingLeft = 16 * level;
-                        } else {
-                            paddingLeft = 16 * (level + 1);
-                        }
-                    } else if (level > 0) {
-                        if (effectiveCheckbox) {
-                            paddingLeft = 16 * (level - 1);
-                        } else {
-                            paddingLeft = 16 * level;
-                        }
-                    } else if (!effectiveCheckbox) {
-                        if (item.id === '_all') {
-                            paddingLeft = 16;
-                        } else {
-                            paddingLeft = 16 * level;
-                        }
-                    }
-                } else {
-                    paddingLeft = 16; // Padding de 16 par défaut
-                    if (level > 0) {
-                        paddingLeft = 16 * level;
-                    }
-                }
-            }
-
-            listItemProps.style = { paddingLeft: paddingLeft + 'px' };
-
-            var iconDisplay = icon;
-            if (this.state.hover) {
-                iconDisplay = hoverIcon;
-            } else if (item.hasChildren) {
-                iconDisplay = parentIcon;
-            } else if (item.id === '_all') {
-                iconDisplay = iconAll;
-            }
-
-            return _react2.default.createElement(
-                _ListItem2.default,
-                listItemProps,
-                effectiveCheckbox && selectable && _react2.default.createElement(_HiCheckbox2.default, {
-                    checked: selected,
-                    icon: iconDisplay,
-                    checkedIcon: checkedIcon,
-                    indeterminate: indeterminate,
-                    classes: { checked: classes.listItemIconChecked },
-                    className: classes.checkbox
-                }),
-                this.buildListItem(),
-                !!item.info && _react2.default.createElement(
-                    'span',
-                    { className: classes.listItemInfoText },
-                    item.info
-                )
-            );
+        return _react.default.createElement("span", {
+          className: classes.label
+        }, spanHighlight);
+      }
+
+      if (color && selected) {
+        return _react.default.createElement(_HiColoredLabel.default, {
+          className: classes.coloredLabel,
+          color: color,
+          label: label
+        });
+      }
+
+      return _react.default.createElement("div", {
+        className: classes.label
+      }, label);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames, _classNames2;
+
+      var _this$props2 = this.props,
+          centered = _this$props2.centered,
+          classes = _this$props2.classes,
+          selected = _this$props2.selected,
+          disabled = _this$props2.disabled,
+          hideCheckbox = _this$props2.hideCheckbox,
+          onSelect = _this$props2.onSelect,
+          indeterminate = _this$props2.indeterminate,
+          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; // 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
+        }));
+      }
+
+      var displayedIcon;
+
+      if (!disabled && this.state.hover) {
+        displayedIcon = hoverIcon;
+      } else if (icon) {
+        displayedIcon = icon;
+      }
+
+      var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+      return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
+        id: id,
+        tabIndex: 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), _classNames)),
+        disabled: disabled
+      }, disabled || {
+        onClick: onSelect,
+        onMouseEnter: this.setHover(true),
+        onMouseLeave: this.setHover(false)
+      }, {
+        style: {
+          paddingLeft: "".concat(paddingLeft + level * 32, "px")
         }
-    }]);
-    return HiSelectableListItem;
-}(_react2.default.Component);
+      }), !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
+        checked: selected,
+        checkedIcon: checkedIcon,
+        className: classes.checkbox,
+        color: "primary" // TODO ?
+        ,
+        disabled: disabled,
+        icon: displayedIcon,
+        indeterminate: indeterminate
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.listItemContent, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.centered, centered), (0, _defineProperty2.default)(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
+        "data-id": id
+      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+        icon: icon,
+        className: classes.icon
+      }), type === 'image' && img && _react.default.createElement("img", {
+        src: img,
+        alt: img,
+        className: classes.img
+      }), this.buildItemLabel(), !!secondaryLabel && _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
+      }, secondaryLabel)), !!info && _react.default.createElement("span", {
+        className: classes.info
+      }, info));
+    }
+  }]);
+  return HiSelectableListItem;
+}(_react.default.Component);
 
 HiSelectableListItem.defaultProps = {
-    type: 'text',
-    checkbox: false,
-    parentItem: false,
-    selected: false,
-    indeterminate: false,
-    disabled: false,
-    parentItemSelectable: false,
-    nbChildren: 0,
-    icon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    parentIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    hoverIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    checkedIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxMarked, { style: { width: 20, height: 20 } }),
-    hierarchic: false,
-    translations: {
-        n_children: '%s items',
-        one_child: '%s item'
-    }
+  centered: false,
+  disabled: false,
+  hideCheckbox: false,
+  indeterminate: false,
+  level: 0,
+  paddingLeft: 16,
+  pinned: false,
+  secondaryInline: true,
+  selected: false,
+  thin: false
 };
 HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Affiche une checkbox
-     */
-    checkbox: _propTypes2.default.bool,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: _propTypes2.default.node,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * Applique le style et désactive le click
-     */
-    disabled: _propTypes2.default.bool,
-    /**
-     * Si "true", liste avec hierarchie
-     */
-    hierarchic: _propTypes2.default.bool,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    hoverIcon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    icon: _propTypes2.default.node,
-    /**
-     * Items sélectionné partiellement
-     */
-    indeterminate: _propTypes2.default.bool,
-    /**
-     * Élément dont la structure attendue dépend du type
-     * paramètres requis:
-     * - id: string/number
-     * - label: string
-     */
-    item: _propTypes2.default.object.isRequired,
-    /**
-     * Padding par défaut des éléments
-     */
-    leftPadding: _propTypes2.default.number,
-    /**
-     * Niveau de l'item
-     */
-    level: _propTypes2.default.number,
-    /**
-     * Nombre d'items enfants
-     */
-    nbChildren: _propTypes2.default.number,
-    /**
-     * Fonction de callback à la sélection de l'élément
-     */
-    onSelect: _propTypes2.default.func,
-    /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
-     */
-    parentIcon: _propTypes2.default.node,
-    /**
-     * Affiche l'item en tant qu'item parent d'un groupe
-     */
-    parentItem: _propTypes2.default.bool,
-    /**
-     * Les items parents sont sélectionnables
-     */
-    parentItemSelectable: _propTypes2.default.bool,
-    /**
-     * État de l'élément
-     */
-    selected: _propTypes2.default.bool,
-    /**
-     * Traductions (par défaut en anglais)
-     */
-    translations: _propTypes2.default.object,
-    /**
-     * Type de l'élément
-     */
-    type: _propTypes2.default.string
+  /**
+   * Centre le label de l'élément
+   */
+  centered: _propTypes.default.bool,
+
+  /**
+   * Icon affiché lorsque l'item est sélectionné
+   */
+  checkedIcon: _propTypes.default.string,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Display selected item as colored label
+   */
+  color: _propTypes.default.string,
+
+  /**
+   * Applique le style et désactive le click
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * N'affiche pas de checkboxes
+   */
+  hideCheckbox: _propTypes.default.bool,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+   */
+  hoverIcon: _propTypes.default.string,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné
+   */
+  icon: _propTypes.default.string,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
+  /**
+   * Path de l'image de l'élément de type image
+   */
+  img: _propTypes.default.string,
+
+  /**
+   * Items sélectionné partiellement
+   */
+  indeterminate: _propTypes.default.bool,
+
+  /**
+   * Text d'information affiché à droite de l'élément
+   */
+  info: _propTypes.default.string,
+
+  /**
+   * Label
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * Label highlight (autorise le highlight du label via la balise <strong>)
+   */
+  labelHighlight: _propTypes.default.string,
+
+  /**
+   * Niveau de l'item, ajoute un padding à gauche de 16px
+   */
+  level: _propTypes.default.number,
+
+  /**
+   * Fonction de callback à la sélection de l'élément
+   */
+  onSelect: _propTypes.default.func,
+
+  /**
+   * Padding par défaut des éléments
+   */
+  paddingLeft: _propTypes.default.number,
+
+  /**
+   * Item display as pinned item, with sticky behavior
+   */
+  pinned: _propTypes.default.bool,
+
+  /**
+   * Définit si le second label s'affiche sur la même ligne ou en dessous
+   */
+  secondaryInline: _propTypes.default.bool,
+
+  /**
+   * Second label affiché à droite du label
+   */
+  secondaryLabel: _propTypes.default.string,
+
+  /**
+   * État de l'élément
+   */
+  selected: _propTypes.default.bool,
+
+  /**
+   * Display label as thin text (used to display parent items)
+   */
+  thin: _propTypes.default.bool,
+
+  /**
+   * Type de l'élément
+   */
+  type: _propTypes.default.string
 } : {};
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelectableList'
+})(HiSelectableListItem);
+
+exports.default = _default;