@hipay/hipay-material-ui 1.0.0-beta.28 → 1.0.0-beta.3

package/es/HiSelectableList/HiSelectableList.js

@@ -37,10 +37,9 @@ class HiSelectableList extends React.PureComponent {
             checkedIcon,
             allSelected,
             checkbox,
-            hierarchic,
-            disabledIds
+            hierarchic
         } = _props,
-              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
+              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
 
         let parents = [];
 
@@ -51,61 +50,58 @@ class HiSelectableList extends React.PureComponent {
                 List,
                 { className: classes.root, onKeyDown: this.props.onKeyDown },
                 itemList.map(item => {
-                    if (item.displayed !== false) {
-                        /**
-                         * Calcul du level de l'item
-                         */
-                        if (hierarchic) {
-                            // On stocke l'id des parents dans un tableau
-                            if (item.parentId && !parents.includes(item.parentId)) {
-                                parents.push(item.parentId);
-                            } else if (item.parentId && parents.includes(item.parentId)) {
-                                // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
-                                // Et si le parentId n'est pas le dernier inseré
-                                if (item.parentId !== parents[parents.length - 1]) {
-                                    // On est donc redescendu d'un niveau
-                                    // donc on supprime le dernier parent
-                                    parents.pop();
-                                }
-                            } else if (!item.parentId && parents.length > 0) {
-                                // Si l'item n'a pas de parent et que le tableau des parent
-                                // n'est pas vide => on le réinitialise
-                                parents = [];
+                    /**
+                     * Calcul du level de l'item
+                     */
+                    if (hierarchic) {
+                        // On stocke l'id des parents dans un tableau
+                        if (item.parentId && !parents.includes(item.parentId)) {
+                            parents.push(item.parentId);
+                        } else if (item.parentId && parents.includes(item.parentId)) {
+                            // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
+                            // Et si le parentId n'est pas le dernier inseré
+                            if (item.parentId !== parents[parents.length - 1]) {
+                                // On est donc redescendu d'un niveau
+                                // donc on supprime le dernier parent
+                                parents.pop();
                             }
+                        } else if (!item.parentId && parents.length > 0) {
+                            // Si l'item n'a pas de parent et que le tableau des parent
+                            // n'est pas vide => on le réinitialise
+                            parents = [];
                         }
+                    }
 
-                        /**
-                         * L'élément est-il selectionné ?
-                         */
-                        let selected = false;
-                        if (item.id === '_all') {
-                            selected = allSelected;
-                        } else if (!item.hasChildren) {
-                            selected = selectedIdList.includes(item.id);
-                        } else if (hierarchic && parentItemSelectable) {
-                            selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
-                        }
-
-                        return React.createElement(HiSelectableListItem, _extends({
-                            key: item.id,
-                            item: item,
-                            selected: selected,
-                            indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
-                            onSelect: onSelect,
-                            hierarchySelected: hierarchySelected,
-                            parentItemSelectable: parentItemSelectable,
-                            nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
-                            hierarchic: hierarchic,
-                            translations: translations,
-                            icon: icon,
-                            parentIcon: parentIcon,
-                            hoverIcon: hoverIcon,
-                            checkedIcon: checkedIcon,
-                            checkbox: checkbox,
-                            level: item.level ? item.level : parents.length,
-                            disabled: disabledIds ? disabledIds.includes(item.id) : false
-                        }, others));
+                    /**
+                     * L'élément est-il selectionné ?
+                     */
+                    let selected = false;
+                    if (item.id === '_all') {
+                        selected = allSelected;
+                    } else if (!item.hasChildren) {
+                        selected = selectedIdList.includes(item.id);
+                    } else if (hierarchic && parentItemSelectable) {
+                        selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
                     }
+
+                    return React.createElement(HiSelectableListItem, _extends({
+                        key: item.id,
+                        item: item,
+                        selected: selected,
+                        indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
+                        onSelect: onSelect,
+                        hierarchySelected: hierarchySelected,
+                        parentItemSelectable: parentItemSelectable,
+                        nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
+                        hierarchic: hierarchic,
+                        translations: translations,
+                        icon: icon,
+                        parentIcon: parentIcon,
+                        hoverIcon: hoverIcon,
+                        checkedIcon: checkedIcon,
+                        checkbox: checkbox,
+                        level: parents.length
+                    }, others));
                 })
             )
         );
@@ -144,10 +140,6 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
-    /**
-     * Liste des ids des items disabled
-     */
-    disabledIds: PropTypes.array,
     /**
      * Tableau associatif : parentId => [children objects]
      */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -9,16 +9,11 @@ import HiCheckbox from '../HiCheckbox';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/hiHelpers';
 import HiIconBuilder from '../utils/HiIconBuilder';
-import HiColoredLabel from '../HiColoredLabel';
-import HiLoader from '../HiLoader';
 
 export const styles = theme => ({
     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`,
@@ -38,13 +33,6 @@ export const styles = theme => ({
         textAlign: 'center',
         width: '100%'
     },
-    loader: {
-        textAlign: 'center',
-        width: 1,
-        height: 22,
-        padding: '8px 0',
-        margin: 'auto'
-    },
     selected: {
         backgroundColor: theme.palette.selected
     },
@@ -62,15 +50,11 @@ export const styles = theme => ({
         fontWeight: 'inherit',
         width: '100%'
     }),
-    listItemSecondaryText: _extends({}, theme.typography.body5, {
+    listItemSecondaryText: _extends({}, theme.typography.body4, {
         fontWeight: theme.typography.fontWeightLight,
-        marginLeft: theme.spacing.unit,
-        color: theme.palette.neutral.normal
+        marginLeft: theme.spacing.unit
     }),
     listItemInfoText: _extends({
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
         color: theme.palette.neutral.normal
     }, theme.typography.body4, {
         fontWeight: theme.typography.fontWeightRegular,
@@ -116,11 +100,6 @@ export const styles = theme => ({
             color: '#000000'
         }
     },
-    labelHighlightColored: {
-        '&>strong': {
-            fontWeight: theme.typography.fontWeightMedium
-        }
-    },
     primaryHighlight: {
         fontWeight: theme.typography.fontWeightMedium,
         color: theme.palette.business.primary.normal,
@@ -157,30 +136,22 @@ class HiSelectableListItem extends React.Component {
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         !effectiveCheckbox && React.createElement(HiIconBuilder, { icon: item.icon, className: classes.icon }),
-                        this.getItemLabel(item),
-                        React.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
+                        item.label,
+                        React.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
                 case 'image':
                     let img = '';
                     if (typeof item.img !== 'undefined') {
-                        img = React.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
+                        img = React.createElement('img', { src: item.img, className: classes.imgListItem });
                     }
 
                     return React.createElement(
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         img,
-                        this.getItemLabel(item),
-                        React.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
+                        item.label,
+                        React.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
                 case 'primary-highlight':
@@ -190,11 +161,8 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        this.getItemLabel(item)
+                        item.label
                     );
-                case 'loader':
-                    return React.createElement(HiLoader, { loading: true, className: classes.loader, size: 8 });
-                    break;
                 case 'text':
                 default:
                     const itemTextClass = classNames(classes.listItemContent, {
@@ -204,12 +172,14 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemTextClass, 'data-id': item.id },
-                        this.getItemLabel(item),
-                        React.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
+                        item.labelHighlight && React.createElement('span', {
+                            className: classes.labelHighlight,
+                            dangerouslySetInnerHTML: {
+                                __html: escapeHTML(item.labelHighlight)
+                            }
+                        }),
+                        !item.labelHighlight && item.label,
+                        React.createElement('span', { className: classes.listItemSecondaryText }),
                         childrenIndicator
                     );
             }
@@ -227,25 +197,6 @@ class HiSelectableListItem extends React.Component {
         this.setState({ hover: !this.state.hover });
     }
 
-    getItemLabel(item) {
-        const { classes } = this.props;
-        if (!item.labelHighlight && item.color && this.props.selected) {
-            return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
-        } else if (item.labelHighlight) {
-            const mLabel = React.createElement('span', {
-                className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
-                dangerouslySetInnerHTML: {
-                    __html: escapeHTML(item.labelHighlight)
-                }
-            });
-            if (item.color && this.props.selected) {
-                return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
-            }
-            return mLabel;
-        }
-        return item.label;
-    }
-
     /**
      * Build list item from type
      */
@@ -308,44 +259,51 @@ class HiSelectableListItem extends React.Component {
             listItemProps.button = false;
         }
 
+        let iconAll;
+        if (item.id === '_all' && item.icon) {
+            iconAll = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
+        }
+
         // calcul du padding left
         let 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` };
@@ -355,8 +313,8 @@ class HiSelectableListItem extends React.Component {
             iconDisplay = hoverIcon;
         } else if (item.hasChildren) {
             iconDisplay = parentIcon;
-        } else if (item.type === 'icon' && item.icon) {
-            iconDisplay = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
+        } else if (item.id === '_all') {
+            iconDisplay = iconAll;
         }
 
         return React.createElement(
@@ -368,8 +326,7 @@ class HiSelectableListItem extends React.Component {
                 checkedIcon: checkedIcon,
                 indeterminate: indeterminate,
                 classes: { checked: classes.listItemIconChecked },
-                className: classes.checkbox,
-                disabled: effectiveDisabled
+                className: classes.checkbox
             }),
             this.buildListItem(),
             !!item.info && React.createElement(
@@ -401,38 +358,18 @@ HiSelectableListItem.defaultProps = {
     }
 };
 HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Affiche une checkbox
-     */
-    checkbox: PropTypes.bool,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: PropTypes.node,
     /**
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
     /**
-     * Applique le style et désactive le click
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Si "true", liste avec hierarchie
-     */
-    hierarchic: 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é
+     * État de l'élément
      */
-    icon: PropTypes.node,
+    selected: PropTypes.bool,
     /**
-     * Items sélectionné partiellement
+     * Type de l'élément
      */
-    indeterminate: PropTypes.bool,
+    type: PropTypes.string,
     /**
      * Élément dont la structure attendue dépend du type
      * paramètres requis:
@@ -440,45 +377,65 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
      * - label: string
      */
     item: PropTypes.object.isRequired,
-    /**
-     * Padding par défaut des éléments
-     */
-    leftPadding: PropTypes.number,
     /**
      * Niveau de l'item
      */
     level: PropTypes.number,
     /**
-     * Nombre d'items enfants
+     * Affiche l'item en tant qu'item parent d'un groupe
      */
-    nbChildren: PropTypes.number,
+    parentItem: PropTypes.bool,
     /**
      * Fonction de callback à la sélection de l'élément
      */
     onSelect: PropTypes.func,
     /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     * Applique le style et désactive le click
      */
-    parentIcon: PropTypes.node,
+    disabled: PropTypes.bool,
     /**
-     * Affiche l'item en tant qu'item parent d'un groupe
+     * Items sélectionné partiellement
      */
-    parentItem: PropTypes.bool,
+    indeterminate: PropTypes.bool,
     /**
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: PropTypes.bool,
     /**
-     * État de l'élément
+     * Nombre d'items enfants
      */
-    selected: PropTypes.bool,
+    nbChildren: PropTypes.number,
     /**
      * Traductions (par défaut en anglais)
      */
     translations: PropTypes.object,
     /**
-     * Type de l'élément
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: PropTypes.node,
+    /**
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     */
+    parentIcon: PropTypes.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: PropTypes.node,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: PropTypes.node,
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: PropTypes.bool,
+    /**
+     * Si "true", liste avec hierarchie
+     */
+    hierarchic: PropTypes.bool,
+    /**
+     * Padding par défaut des éléments
      */
-    type: PropTypes.string
+    leftPadding: PropTypes.number
 } : {};
 export default withStyles(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);