@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/es/HiSelectableList/HiSelectableListItem.js

@@ -9,11 +9,13 @@ import HiCheckbox from '../HiCheckbox';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/hiHelpers';
 import HiIconBuilder from '../utils/HiIconBuilder';
+import HiColoredLabel from '../HiColoredLabel';
 
 export const styles = theme => ({
     listItem: {
         padding: `${9}px 0px`,
-        fontWeight: theme.typography.fontWeightRegular
+        fontWeight: theme.typography.fontWeightRegular,
+        maxHeight: 40
     },
     listItemTitle: {
         padding: `${9}px 0px`,
@@ -50,11 +52,15 @@ export const styles = theme => ({
         fontWeight: 'inherit',
         width: '100%'
     }),
-    listItemSecondaryText: _extends({}, theme.typography.body4, {
+    listItemSecondaryText: _extends({}, theme.typography.body5, {
         fontWeight: theme.typography.fontWeightLight,
-        marginLeft: theme.spacing.unit
+        marginLeft: theme.spacing.unit,
+        color: theme.palette.neutral.normal
     }),
     listItemInfoText: _extends({
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
         color: theme.palette.neutral.normal
     }, theme.typography.body4, {
         fontWeight: theme.typography.fontWeightRegular,
@@ -100,6 +106,11 @@ export const styles = theme => ({
             color: '#000000'
         }
     },
+    labelHighlightColored: {
+        '&>strong': {
+            fontWeight: theme.typography.fontWeightMedium
+        }
+    },
     primaryHighlight: {
         fontWeight: theme.typography.fontWeightMedium,
         color: theme.palette.business.primary.normal,
@@ -136,22 +147,30 @@ class HiSelectableListItem extends React.Component {
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         !effectiveCheckbox && React.createElement(HiIconBuilder, { icon: item.icon, className: classes.icon }),
-                        item.label,
-                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        this.getItemLabel(item),
+                        React.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
                 case 'image':
                     let img = '';
                     if (typeof item.img !== 'undefined') {
-                        img = React.createElement('img', { src: item.img, className: classes.imgListItem });
+                        img = React.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
                     }
 
                     return React.createElement(
                         'div',
                         { className: classes.listItemContent, 'data-id': item.id },
                         img,
-                        item.label,
-                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        this.getItemLabel(item),
+                        React.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
                 case 'primary-highlight':
@@ -161,7 +180,7 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        item.label
+                        this.getItemLabel(item)
                     );
                 case 'text':
                 default:
@@ -172,14 +191,12 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemTextClass, 'data-id': item.id },
-                        item.labelHighlight && React.createElement('span', {
-                            className: classes.labelHighlight,
-                            dangerouslySetInnerHTML: {
-                                __html: escapeHTML(item.labelHighlight)
-                            }
-                        }),
-                        !item.labelHighlight && item.label,
-                        React.createElement('span', { className: classes.listItemSecondaryText }),
+                        this.getItemLabel(item),
+                        React.createElement(
+                            'span',
+                            { className: classes.listItemSecondaryText },
+                            item.secondaryLabel
+                        ),
                         childrenIndicator
                     );
             }
@@ -197,6 +214,25 @@ 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
      */
@@ -259,51 +295,44 @@ 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 {
-            // Si pas de hiérarchie, padding de 8px
-            if (!hierarchic) {
-                if (!effectiveCheckbox) {
-                    paddingLeft = 8;
+        } else if (!hierarchic) {
+            // 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 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 (level > 0) {
+                if (effectiveCheckbox) {
+                    paddingLeft = 16 * (level - 1);
+                } else {
+                    paddingLeft = 16 * level;
                 }
-            } else {
-                paddingLeft = 16; // Padding de 16 par défaut
-                if (level > 0) {
+            } 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` };
@@ -313,8 +342,8 @@ class HiSelectableListItem extends React.Component {
             iconDisplay = hoverIcon;
         } else if (item.hasChildren) {
             iconDisplay = parentIcon;
-        } else if (item.id === '_all') {
-            iconDisplay = iconAll;
+        } else if (item.type === 'icon' && item.icon) {
+            iconDisplay = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
         }
 
         return React.createElement(
@@ -358,18 +387,38 @@ 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,
     /**
-     * État de l'élément
+     * Applique le style et désactive le click
      */
-    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
     /**
-     * Type de l'élément
+     * Si "true", liste avec hierarchie
+     */
+    hierarchic: PropTypes.bool,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
      */
-    type: PropTypes.string,
+    hoverIcon: PropTypes.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: PropTypes.node,
+    /**
+     * Items sélectionné partiellement
+     */
+    indeterminate: PropTypes.bool,
     /**
      * Élément dont la structure attendue dépend du type
      * paramètres requis:
@@ -377,65 +426,45 @@ 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,
     /**
-     * Affiche l'item en tant qu'item parent d'un groupe
+     * Nombre d'items enfants
      */
-    parentItem: PropTypes.bool,
+    nbChildren: PropTypes.number,
     /**
      * Fonction de callback à la sélection de l'élément
      */
     onSelect: PropTypes.func,
     /**
-     * Applique le style et désactive le click
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
      */
-    disabled: PropTypes.bool,
+    parentIcon: PropTypes.node,
     /**
-     * Items sélectionné partiellement
+     * Affiche l'item en tant qu'item parent d'un groupe
      */
-    indeterminate: PropTypes.bool,
+    parentItem: PropTypes.bool,
     /**
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: PropTypes.bool,
     /**
-     * Nombre d'items enfants
+     * État de l'élément
      */
-    nbChildren: PropTypes.number,
+    selected: PropTypes.bool,
     /**
      * Traductions (par défaut en anglais)
      */
     translations: PropTypes.object,
     /**
-     * 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 de l'élément
      */
-    leftPadding: PropTypes.number
+    type: PropTypes.string
 } : {};
 export default withStyles(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);

package/es/HiSwitch/HiSwitchState.js

@@ -12,7 +12,7 @@ export const styles = theme => ({
         maxHeight: 40,
         marginRight: 12,
         padding: 4,
-        backgroundColor: theme.palette.background1,
+        backgroundColor: theme.palette.background2,
         borderRadius: '2px 2px 0 0',
         width: '100%',
         maxWidth: 200,

package/es/HiSwitch/index.js

@@ -1,2 +1,3 @@
 export { default } from './HiSwitch';
+export { default as HiSwitch } from './HiSwitch';
 export { default as HiSwitchState } from './HiSwitchState';