@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.4

package/HiSelectableList/HiSelectableListItem.js

@@ -69,24 +69,13 @@ var _HiIconBuilder = require('../utils/HiIconBuilder');
 
 var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
 
-var _HiColoredLabel = require('../HiColoredLabel');
-
-var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
-
-var _HiLoader = require('../HiLoader');
-
-var _HiLoader2 = _interopRequireDefault(_HiLoader);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
     return {
         listItem: {
-            padding: '9px 0px',
-            fontWeight: theme.typography.fontWeightRegular,
-            maxHeight: 40,
-            display: 'flex',
-            alignItems: 'flex-start'
+            padding: 9 + 'px 0px',
+            fontWeight: theme.typography.fontWeightRegular
         },
         listItemTitle: {
             padding: 9 + 'px 0px',
@@ -106,13 +95,6 @@ var styles = exports.styles = function styles(theme) {
             textAlign: 'center',
             width: '100%'
         },
-        loader: {
-            textAlign: 'center',
-            width: 1,
-            height: 22,
-            padding: '8px 0',
-            margin: 'auto'
-        },
         selected: {
             backgroundColor: theme.palette.selected
         },
@@ -130,10 +112,9 @@ var styles = exports.styles = function styles(theme) {
             fontWeight: 'inherit',
             width: '100%'
         }),
-        listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body5, {
+        listItemSecondaryText: (0, _extends3.default)({}, theme.typography.body4, {
             fontWeight: theme.typography.fontWeightLight,
-            marginLeft: theme.spacing.unit,
-            color: theme.palette.neutral.normal
+            marginLeft: theme.spacing.unit
         }),
         listItemInfoText: (0, _extends3.default)({
             whiteSpace: 'nowrap',
@@ -184,11 +165,6 @@ var styles = exports.styles = function styles(theme) {
                 color: '#000000'
             }
         },
-        labelHighlightColored: {
-            '&>strong': {
-                fontWeight: theme.typography.fontWeightMedium
-            }
-        },
         primaryHighlight: {
             fontWeight: theme.typography.fontWeightMedium,
             color: theme.palette.business.primary.normal,
@@ -237,30 +213,22 @@ var HiSelectableListItem = function (_React$Component) {
                         '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
-                        ),
+                        item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
                 case 'image':
                     var img = '';
                     if (typeof item.img !== 'undefined') {
-                        img = _react2.default.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
+                        img = _react2.default.createElement('img', { src: 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
-                        ),
+                        item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
                 case 'primary-highlight':
@@ -270,11 +238,8 @@ var HiSelectableListItem = function (_React$Component) {
                     return _react2.default.createElement(
                         'div',
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        _this.getItemLabel(item)
+                        item.label
                     );
-                case 'loader':
-                    return _react2.default.createElement(_HiLoader2.default, { loading: true, className: classes.loader, size: 8 });
-                    break;
                 case 'text':
                 default:
                     var itemTextClass = (0, _classnames2.default)(classes.listItemContent, (0, _defineProperty3.default)({}, classes.centered, item.centered));
@@ -282,12 +247,14 @@ var HiSelectableListItem = function (_React$Component) {
                     return _react2.default.createElement(
                         'div',
                         { className: itemTextClass, 'data-id': item.id },
-                        _this.getItemLabel(item),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
+                        item.labelHighlight && _react2.default.createElement('span', {
+                            className: classes.labelHighlight,
+                            dangerouslySetInnerHTML: {
+                                __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
+                            }
+                        }),
+                        !item.labelHighlight && item.label,
+                        _react2.default.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
             }
@@ -307,27 +274,6 @@ var HiSelectableListItem = function (_React$Component) {
         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 list item from type
@@ -393,44 +339,51 @@ var HiSelectableListItem = function (_React$Component) {
                 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 if (!hierarchic && level === 0) {
-                // Si pas de hiérarchie et sans checkbox, padding de 8px
-                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 {
+                // Si pas de hiérarchie, padding de 8px
+                if (!hierarchic) {
+                    if (!effectiveCheckbox) {
+                        paddingLeft = 8;
                     }
-                } else if (level > 0) {
-                    if (effectiveCheckbox) {
-                        paddingLeft = 16 * level;
-                    } else {
-                        paddingLeft = 16 * (level + 1);
+                } 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 if (!effectiveCheckbox) {
-                    if (item.id === '_all') {
-                        paddingLeft = 16;
-                    } else {
+                } else {
+                    paddingLeft = 16; // Padding de 16 par défaut
+                    if (level > 0) {
                         paddingLeft = 16 * level;
                     }
                 }
-            } else {
-                paddingLeft = 16; // Padding de 16 par défaut
-                if (level > 0) {
-                    paddingLeft = 16 * level;
-                }
             }
 
             listItemProps.style = { paddingLeft: paddingLeft + 'px' };
@@ -440,8 +393,8 @@ var HiSelectableListItem = function (_React$Component) {
                 iconDisplay = hoverIcon;
             } else if (item.hasChildren) {
                 iconDisplay = parentIcon;
-            } else if (item.type === 'icon' && item.icon) {
-                iconDisplay = _react2.default.createElement(_HiIconBuilder2.default, { icon: item.icon, className: classes.checkboxIcon });
+            } else if (item.id === '_all') {
+                iconDisplay = iconAll;
             }
 
             return _react2.default.createElement(
@@ -453,8 +406,7 @@ var HiSelectableListItem = function (_React$Component) {
                     checkedIcon: checkedIcon,
                     indeterminate: indeterminate,
                     classes: { checked: classes.listItemIconChecked },
-                    className: classes.checkbox,
-                    disabled: effectiveDisabled
+                    className: classes.checkbox
                 }),
                 this.buildListItem(),
                 !!item.info && _react2.default.createElement(
@@ -488,38 +440,18 @@ HiSelectableListItem.defaultProps = {
     }
 };
 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é
+     * État de l'élément
      */
-    icon: _propTypes2.default.node,
+    selected: _propTypes2.default.bool,
     /**
-     * Items sélectionné partiellement
+     * Type de l'élément
      */
-    indeterminate: _propTypes2.default.bool,
+    type: _propTypes2.default.string,
     /**
      * Élément dont la structure attendue dépend du type
      * paramètres requis:
@@ -527,45 +459,65 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
      * - 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
+     * Affiche l'item en tant qu'item parent d'un groupe
      */
-    nbChildren: _propTypes2.default.number,
+    parentItem: _propTypes2.default.bool,
     /**
      * 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é
+     * Applique le style et désactive le click
      */
-    parentIcon: _propTypes2.default.node,
+    disabled: _propTypes2.default.bool,
     /**
-     * Affiche l'item en tant qu'item parent d'un groupe
+     * Items sélectionné partiellement
      */
-    parentItem: _propTypes2.default.bool,
+    indeterminate: _propTypes2.default.bool,
     /**
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: _propTypes2.default.bool,
     /**
-     * État de l'élément
+     * Nombre d'items enfants
      */
-    selected: _propTypes2.default.bool,
+    nbChildren: _propTypes2.default.number,
     /**
      * Traductions (par défaut en anglais)
      */
     translations: _propTypes2.default.object,
     /**
-     * Type de l'élément
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     */
+    parentIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: _propTypes2.default.node,
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: _propTypes2.default.bool,
+    /**
+     * Si "true", liste avec hierarchie
+     */
+    hierarchic: _propTypes2.default.bool,
+    /**
+     * Padding par défaut des éléments
      */
-    type: _propTypes2.default.string
+    leftPadding: _propTypes2.default.number
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);