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

package/es/HiSelectableList/HiSelectableListItem.js

@@ -9,13 +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';
 
 export const styles = theme => ({
     listItem: {
         padding: `${9}px 0px`,
-        fontWeight: theme.typography.fontWeightRegular,
-        maxHeight: 40
+        fontWeight: theme.typography.fontWeightRegular
     },
     listItemTitle: {
         padding: `${9}px 0px`,
@@ -52,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,
@@ -106,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,
@@ -147,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':
@@ -180,7 +161,7 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        this.getItemLabel(item)
+                        item.label
                     );
                 case 'text':
                 default:
@@ -191,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
                     );
             }
@@ -214,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
      */
@@ -394,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:
@@ -433,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);

package/es/HiSwitch/HiSwitchState.js

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

package/es/HiSwitch/index.js

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

package/es/HiTable/BodyCellBuilder.js

@@ -18,38 +18,55 @@ export default class BodyCellBuilder extends React.PureComponent {
         this.collectContextMenuDatas = this.collectContextMenuDatas.bind(this);
     }
 
-    /**
-     * CollecContextMenuDatas
-     *
-     * définit les données utilisées par le context menu (lookup, exclude, copy, redirect)
-     * - value : valeur sur laquelle on filtre
-     * - label : label de la value (traduite)
-     */
-    collectContextMenuDatas() {
-
-        const _props$data = this.props.data,
-              { value } = _props$data,
-              data = _objectWithoutProperties(_props$data, ['value']);
-
-        let contextLabel = data.label ? data.label : value;
-
+    collectContextMenuDatas(props) {
+        let label = '';
+        let value = null;
         switch (this.props.type) {
-
+            case cst.TYPE_ADDRESS:
+                label = `${this.props.datas.name} ${this.props.datas.streetAddress} ${this.props.datas.city} ${this.props.datas.postalCode} ${this.props.datas.isoCountry}`;
+                break;
+            case cst.TYPE_SENTINEL:
+                label = `${this.props.datas.score}|${this.props.datas.fraudResult}`;
+                if (this.props.smartDecision && typeof this.props.datas.automaticFraudReviewResult !== 'undefined') {
+                    label += `|${this.props.datas.automaticFraudReviewResult}`;
+                }
+                break;
+            case cst.TYPE_ACCOUNT:
+            case cst.TYPE_ACCOUNT_NUMBER:
+            case cst.TYPE_ICON:
+            case cst.TYPE_IMAGE:
+            case cst.TYPE_NUMERIC:
+            case cst.TYPE_TEXT:
+            default:
+                label = this.props.datas.value;
+                break;
             case cst.TYPE_DATE:
                 const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
-                const date = new Date(value);
-                contextLabel = date.toLocaleString(this.props.dateLocale, options);
+                const date = new Date(this.props.datas.value);
+                label = date.toLocaleString(this.props.dateLocale, options);
+                value = this.props.datas.value;
                 break;
-
             case cst.TYPE_RATE:
-                contextLabel = formatRate(value, this.props.view, this.props.numberLocale);
+                label = formatRate(this.props.datas.value, this.props.view, this.props.numberLocale);
+                value = this.props.datas.value;
+                break;
+            case cst.TYPE_THIRD_PARTY_SECURITY:
+            case cst.TYPE_STATUS:
+                label = this.props.datas.value;
+                value = this.props.datas.code;
+                break;
+            case cst.TYPE_COUNTRY:
+                label = this.props.datas.value;
+                value = this.props.datas.isoCode;
                 break;
         }
-
+        if (value === null) {
+            value = label;
+        }
         return {
             id: this.props.checkboxValue,
             column: this.props.colId,
-            label: contextLabel,
+            label,
             value
         };
     }
@@ -59,9 +76,10 @@ export default class BodyCellBuilder extends React.PureComponent {
               {
             ukey,
             type,
-            data,
+            datas,
             view,
             width,
+            fixedWidth,
             padding,
             align,
             dense,
@@ -74,16 +92,15 @@ export default class BodyCellBuilder extends React.PureComponent {
             numberLocale,
             childrenCount,
             onOpenDetails,
-            lookedUp,
-            fixedColumnWidth,
-            disableContextMenu
+            lookedUp
         } = _props,
-              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu']);
+              props = _objectWithoutProperties(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
 
         const layoutProps = {
             type,
             view,
             width,
+            fixedWidth,
             align,
             dense,
             onSelect,
@@ -92,40 +109,37 @@ export default class BodyCellBuilder extends React.PureComponent {
             selected,
             sticky,
             childrenCount,
-            lookedUp,
-            fixedColumnWidth
+            lookedUp
         };
 
-        let cellContent;
-        if (typeof data !== 'undefined') {
-
-            let cellElement;
+        let cellElement;
 
+        if (typeof datas !== 'undefined') {
             switch (type) {
                 case cst.TYPE_ACCOUNT:
-                    cellElement = React.createElement(CellAccount, { value: data.value, color: data.color, sticky: sticky });
+                    cellElement = React.createElement(CellAccount, { value: datas.value, color: datas.color, sticky: sticky });
                     break;
 
                 case cst.TYPE_ACCOUNT_NUMBER:
                     cellElement = React.createElement(CellAccountNumber, {
-                        value: data.value,
-                        country: data.country,
-                        expirationDate: data.expirationDate,
-                        expirationDateLabel: data.expirationDateLabel,
-                        statusColor: data.statusColor,
-                        issuer: data.issuer,
+                        value: datas.value,
+                        country: datas.country,
+                        expirationDate: datas.expirationDate,
+                        expirationDateLabel: datas.expirationDateLabel,
+                        statusColor: datas.statusColor,
+                        issuer: datas.issuer,
                         sticky: sticky
                     });
                     break;
 
                 case cst.TYPE_ADDRESS:
                     cellElement = React.createElement(CellAddress, {
-                        name: data.name,
-                        streetAddress: data.value,
-                        city: data.city,
-                        postalCode: data.postalCode,
-                        country: data.country,
-                        isoCountry: data.isoCountry,
+                        name: datas.name,
+                        streetAddress: datas.streetAddress,
+                        city: datas.city,
+                        postalCode: datas.postalCode,
+                        country: datas.country,
+                        isoCountry: datas.isoCountry,
                         view: view,
                         sticky: sticky
                     });
@@ -133,9 +147,8 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_COUNTRY:
                     cellElement = React.createElement(CellCountry, {
-                        label: data.label ? data.label : data.value,
-                        path: data.img,
-                        value: data.value,
+                        value: datas.value,
+                        isoCode: datas.isoCode,
                         view: view,
                         sticky: sticky
                     });
@@ -143,7 +156,7 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_DATE:
                     cellElement = React.createElement(CellDate, {
-                        value: data.value,
+                        value: datas.value,
                         locale: dateLocale,
                         view: view,
                         displayTime: props.displayTime,
@@ -152,10 +165,10 @@ export default class BodyCellBuilder extends React.PureComponent {
                     break;
 
                 case cst.TYPE_ICON:
+                    if (view === cst.VIEWS.SMALL) layoutProps.fixedWidth = true;
                     cellElement = React.createElement(CellIcon, {
-                        value: data.label ? data.label : data.value,
-                        icon: data.icon,
-                        color: data.color,
+                        value: datas.value,
+                        icon: datas.icon,
                         view: view,
                         sticky: sticky
                     });
@@ -163,9 +176,8 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_IMAGE:
                     cellElement = React.createElement(CellImage, {
-                        value: data.label ? data.label : data.value,
-                        path: data.img,
-                        size: this.props.size,
+                        value: datas.value,
+                        path: datas.path,
                         view: view,
                         sticky: sticky
                     });
@@ -173,9 +185,8 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_NUMERIC:
                     cellElement = React.createElement(CellNumeric, {
-                        value: data.value,
-                        currency: data.currency,
-                        precision: data.precision,
+                        value: datas.value,
+                        currency: datas.currency,
                         locale: numberLocale,
                         view: view,
                         sticky: sticky
@@ -184,10 +195,10 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_RATE:
                     cellElement = React.createElement(CellRate, {
-                        value: data.value,
-                        isPositive: data.isPositive,
-                        trendchip: data.trendchip,
-                        indicator: data.indicator,
+                        value: datas.value,
+                        isPositive: datas.isPositive,
+                        trendchip: datas.trendchip,
+                        indicator: datas.indicator,
                         locale: numberLocale,
                         view: view,
                         sticky: sticky
@@ -196,10 +207,10 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_SENTINEL:
                     cellElement = React.createElement(CellSentinel, {
-                        score: data.score,
-                        fraudResult: data.value,
-                        automaticFraudReviewResult: data.automaticFraudReviewResult,
-                        pendingManualAction: data.pendingManualAction,
+                        score: datas.score,
+                        fraudResult: datas.fraudResult,
+                        automaticFraudReviewResult: datas.automaticFraudReviewResult,
+                        pendingManualAction: datas.pendingManualAction,
                         smartDecision: props.smartDecision,
                         sticky: sticky
                     });
@@ -207,9 +218,9 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_STATUS:
                     cellElement = React.createElement(CellStatus, {
-                        code: data.value,
-                        nbOperations: data.count_operations,
-                        value: data.label ? data.label : data.value,
+                        code: datas.code,
+                        nbOperations: datas.count_operations,
+                        value: datas.value,
                         onOpenDetails: onOpenDetails,
                         sticky: sticky
                     });
@@ -217,9 +228,10 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_THIRD_PARTY_SECURITY:
                     layoutProps.align = 'center';
+                    layoutProps.fixedWidth = true;
                     cellElement = React.createElement(CellThirdPartySecurity, {
-                        value: data.value,
-                        label: data.label ? data.label : data.value,
+                        value: datas.value,
+                        code: datas.code,
                         sticky: sticky
                     });
                     break;
@@ -228,24 +240,24 @@ export default class BodyCellBuilder extends React.PureComponent {
                 default:
                     cellElement = React.createElement(CellText, {
                         ukey: ukey,
-                        value: data.value,
+                        value: datas.value,
                         ellipsis: ellipsis,
                         view: view,
                         sticky: sticky
                     });
                     break;
             }
-
-            cellContent = disableContextMenu ? cellElement : React.createElement(
-                ContextMenuTrigger,
-                {
-                    id: `hitable_context_menu_${this.props.tabId}`,
-                    collect: this.collectContextMenuDatas
-                },
-                cellElement
-            );
         }
 
+        const cellContent = cellElement ? React.createElement(
+            ContextMenuTrigger,
+            {
+                id: `hitable_context_menu_${this.props.tabId}`,
+                collect: this.collectContextMenuDatas
+            },
+            cellElement
+        ) : cellElement;
+
         return React.createElement(
             CellLayout,
             layoutProps,
@@ -254,8 +266,7 @@ export default class BodyCellBuilder extends React.PureComponent {
     }
 }
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right',
-    disableContextMenu: true
+    ellipsis: 'right'
 };
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -270,14 +281,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Identifiant de la colonne
      */
     colId: PropTypes.string,
-    /**
-     * Données de références
-     */
-    columnDatas: PropTypes.array,
     /**
      * Données relatives au type de la cellule
      */
-    data: PropTypes.object,
+    datas: PropTypes.object,
     /**
      * Locale a utilisée pour l'affichage des dates
      */
@@ -286,19 +293,14 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: PropTypes.bool,
-    /**
-     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
-     */
-    disableContextMenu: PropTypes.bool.isRequired,
     /**
      * Ellipsis
      */
     ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
     /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedColumnWidth: PropTypes.bool,
+    fixedWidth: PropTypes.bool,
     /**
      * Recherche lookup sur cette colonne
      */