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

package/es/HiTable/BodyCellBuilder.js

@@ -1,3 +1,4 @@
+import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -18,55 +19,38 @@ export default class BodyCellBuilder extends React.PureComponent {
         this.collectContextMenuDatas = this.collectContextMenuDatas.bind(this);
     }
 
-    collectContextMenuDatas(props) {
-        let label = '';
-        let value = null;
+    /**
+     * 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;
+
         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(this.props.datas.value);
-                label = date.toLocaleString(this.props.dateLocale, options);
-                value = this.props.datas.value;
+                const date = new Date(value);
+                contextLabel = date.toLocaleString(this.props.dateLocale, options);
                 break;
+
             case cst.TYPE_RATE:
-                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;
+                contextLabel = formatRate(value, this.props.view, this.props.numberLocale);
                 break;
         }
-        if (value === null) {
-            value = label;
-        }
+
         return {
             id: this.props.checkboxValue,
             column: this.props.colId,
-            label,
+            label: contextLabel,
             value
         };
     }
@@ -76,10 +60,9 @@ export default class BodyCellBuilder extends React.PureComponent {
               {
             ukey,
             type,
-            datas,
+            data,
             view,
             width,
-            fixedWidth,
             padding,
             align,
             dense,
@@ -92,15 +75,17 @@ export default class BodyCellBuilder extends React.PureComponent {
             numberLocale,
             childrenCount,
             onOpenDetails,
-            lookedUp
+            lookedUp,
+            fixedColumnWidth,
+            disableContextMenu,
+            detailInfos
         } = _props,
-              props = _objectWithoutProperties(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
+              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos']);
 
         const layoutProps = {
             type,
             view,
             width,
-            fixedWidth,
             align,
             dense,
             onSelect,
@@ -109,37 +94,42 @@ export default class BodyCellBuilder extends React.PureComponent {
             selected,
             sticky,
             childrenCount,
-            lookedUp
+            lookedUp,
+            fixedColumnWidth,
+            detailInfos,
+            onOpenDetails
         };
 
-        let cellElement;
+        let cellContent;
+        if (typeof data !== 'undefined') {
+
+            let cellElement;
 
-        if (typeof datas !== 'undefined') {
             switch (type) {
                 case cst.TYPE_ACCOUNT:
-                    cellElement = React.createElement(CellAccount, { value: datas.value, color: datas.color, sticky: sticky });
+                    cellElement = React.createElement(CellAccount, { value: data.value, color: data.color, sticky: sticky });
                     break;
 
                 case cst.TYPE_ACCOUNT_NUMBER:
                     cellElement = React.createElement(CellAccountNumber, {
-                        value: datas.value,
-                        country: datas.country,
-                        expirationDate: datas.expirationDate,
-                        expirationDateLabel: datas.expirationDateLabel,
-                        statusColor: datas.statusColor,
-                        issuer: datas.issuer,
+                        value: data.value,
+                        country: data.country,
+                        expirationDate: data.expirationDate,
+                        expirationDateLabel: data.expirationDateLabel,
+                        statusColor: data.statusColor,
+                        issuer: data.issuer,
                         sticky: sticky
                     });
                     break;
 
                 case cst.TYPE_ADDRESS:
                     cellElement = React.createElement(CellAddress, {
-                        name: datas.name,
-                        streetAddress: datas.streetAddress,
-                        city: datas.city,
-                        postalCode: datas.postalCode,
-                        country: datas.country,
-                        isoCountry: datas.isoCountry,
+                        name: data.name,
+                        streetAddress: data.value,
+                        city: data.city,
+                        postalCode: data.postalCode,
+                        country: data.country,
+                        isoCountry: data.isoCountry,
                         view: view,
                         sticky: sticky
                     });
@@ -147,8 +137,9 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_COUNTRY:
                     cellElement = React.createElement(CellCountry, {
-                        value: datas.value,
-                        isoCode: datas.isoCode,
+                        label: data.label ? data.label : data.value,
+                        path: data.img,
+                        value: data.value,
                         view: view,
                         sticky: sticky
                     });
@@ -156,7 +147,7 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_DATE:
                     cellElement = React.createElement(CellDate, {
-                        value: datas.value,
+                        value: data.value,
                         locale: dateLocale,
                         view: view,
                         displayTime: props.displayTime,
@@ -165,10 +156,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: datas.value,
-                        icon: datas.icon,
+                        value: data.label ? data.label : data.value,
+                        icon: data.icon,
+                        color: data.color,
                         view: view,
                         sticky: sticky
                     });
@@ -176,8 +167,9 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_IMAGE:
                     cellElement = React.createElement(CellImage, {
-                        value: datas.value,
-                        path: datas.path,
+                        value: data.label ? data.label : data.value,
+                        path: data.img,
+                        size: this.props.size,
                         view: view,
                         sticky: sticky
                     });
@@ -185,8 +177,9 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_NUMERIC:
                     cellElement = React.createElement(CellNumeric, {
-                        value: datas.value,
-                        currency: datas.currency,
+                        value: data.value,
+                        currency: data.currency,
+                        precision: data.precision,
                         locale: numberLocale,
                         view: view,
                         sticky: sticky
@@ -195,10 +188,10 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_RATE:
                     cellElement = React.createElement(CellRate, {
-                        value: datas.value,
-                        isPositive: datas.isPositive,
-                        trendchip: datas.trendchip,
-                        indicator: datas.indicator,
+                        value: data.value,
+                        isPositive: data.isPositive,
+                        trendchip: data.trendchip,
+                        indicator: data.indicator,
                         locale: numberLocale,
                         view: view,
                         sticky: sticky
@@ -207,31 +200,33 @@ export default class BodyCellBuilder extends React.PureComponent {
 
                 case cst.TYPE_SENTINEL:
                     cellElement = React.createElement(CellSentinel, {
-                        score: datas.score,
-                        fraudResult: datas.fraudResult,
-                        automaticFraudReviewResult: datas.automaticFraudReviewResult,
-                        pendingManualAction: datas.pendingManualAction,
+                        score: data.score,
+                        fraudResult: data.value,
+                        automaticFraudReviewResult: data.automaticFraudReviewResult,
+                        pendingManualAction: data.pendingManualAction,
                         smartDecision: props.smartDecision,
                         sticky: sticky
                     });
                     break;
 
                 case cst.TYPE_STATUS:
-                    cellElement = React.createElement(CellStatus, {
-                        code: datas.code,
-                        nbOperations: datas.count_operations,
-                        value: datas.value,
-                        onOpenDetails: onOpenDetails,
+                    cellElement = React.createElement(CellStatus, _extends({
+                        code: data.value,
+                        value: data.label ? data.label : data.value,
                         sticky: sticky
-                    });
+                    }, detailInfos && {
+                        nbOperations: detailInfos.total,
+                        onOpenDetails: onOpenDetails
+                    }));
+                    delete layoutProps.detailInfos;
+                    delete layoutProps.onOpenDetails;
                     break;
 
                 case cst.TYPE_THIRD_PARTY_SECURITY:
                     layoutProps.align = 'center';
-                    layoutProps.fixedWidth = true;
                     cellElement = React.createElement(CellThirdPartySecurity, {
-                        value: datas.value,
-                        code: datas.code,
+                        value: data.value,
+                        label: data.label ? data.label : data.value,
                         sticky: sticky
                     });
                     break;
@@ -240,23 +235,23 @@ export default class BodyCellBuilder extends React.PureComponent {
                 default:
                     cellElement = React.createElement(CellText, {
                         ukey: ukey,
-                        value: datas.value,
+                        value: data.value,
                         ellipsis: ellipsis,
                         view: view,
                         sticky: sticky
                     });
                     break;
             }
-        }
 
-        const cellContent = cellElement ? React.createElement(
-            ContextMenuTrigger,
-            {
-                id: `hitable_context_menu_${this.props.tabId}`,
-                collect: this.collectContextMenuDatas
-            },
-            cellElement
-        ) : cellElement;
+            cellContent = disableContextMenu ? cellElement : React.createElement(
+                ContextMenuTrigger,
+                {
+                    id: `hitable_context_menu_${this.props.tabId}`,
+                    collect: this.collectContextMenuDatas
+                },
+                cellElement
+            );
+        }
 
         return React.createElement(
             CellLayout,
@@ -266,7 +261,9 @@ export default class BodyCellBuilder extends React.PureComponent {
     }
 }
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right'
+    ellipsis: 'right',
+    disableContextMenu: true,
+    detailInfos: null
 };
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -281,10 +278,14 @@ 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
      */
-    datas: PropTypes.object,
+    data: PropTypes.object,
     /**
      * Locale a utilisée pour l'affichage des dates
      */
@@ -293,14 +294,23 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: PropTypes.bool,
+    /**
+     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
+     */
+    detailInfos: PropTypes.object,
+    /**
+     * 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']),
     /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
      */
-    fixedWidth: PropTypes.bool,
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Recherche lookup sur cette colonne
      */
@@ -341,5 +351,5 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : {};

package/es/HiTable/BodyCells/CellCountry.js

@@ -47,41 +47,12 @@ export const styles = theme => ({
 class CellCountry extends React.PureComponent {
 
     render() {
-        const { classes, value, isoCode, view } = this.props;
-
-        let path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
-
-        let tooltipContent = React.createElement(
-            'div',
-            null,
-            React.createElement('img', { src: path, className: classes.tooltipImg }),
-            React.createElement(
-                'span',
-                { className: classes.tooltipLabel },
-                value
-            )
-        );
+        const { label, path, value, view } = this.props;
 
         if (view === cst.VIEWS.LARGE) {
-            return React.createElement(CellImage, { view: cst.VIEWS.LARGE, value: value, path: path });
+            return React.createElement(CellImage, { value: label ? label : value, path: path, view: view });
         } else {
-            let valueElement = value;
-            if (view === cst.VIEWS.SMALL) {
-                valueElement = isoCode.toUpperCase();
-            }
-            return React.createElement(
-                Tooltip,
-                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                React.createElement(
-                    'div',
-                    { className: classes.wrapper },
-                    React.createElement(
-                        'span',
-                        { className: classes.label },
-                        valueElement
-                    )
-                )
-            );
+            return React.createElement(CellImage, { value: value, path: path, view: view });
         }
     }
 }
@@ -94,11 +65,15 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label
      */
-    value: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    /**
+     * Flag's image path
+     */
+    path: PropTypes.string,
     /**
-     * Code ISO
+     * Value - code isoa2 (uppercase)
      */
-    isoCode: PropTypes.string.isRequired,
+    value: PropTypes.string,
     /**
      * View (L/M/S)
      */

package/es/HiTable/BodyCells/CellIcon.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
 import HiIconBuilder from '../../utils/HiIconBuilder';
 
-export const styles = theme => ({
+export const styles = {
     icon: {
         float: 'left'
     },
@@ -17,8 +16,11 @@ export const styles = theme => ({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis'
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
     }
-});
+};
 
 /**
  * Cette cellule permet d'afficher une icône et un label (optionnel).
@@ -27,13 +29,13 @@ export const styles = theme => ({
 class CellIcon extends React.PureComponent {
 
     render() {
-        const { classes, icon, value, view } = this.props;
+        const { classes, icon, value, view, color } = this.props;
 
-        const iconElement = React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 18 });
+        const iconElement = icon !== '' ? React.createElement(HiIconBuilder, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
 
         const tooltipContent = React.createElement(
             'div',
-            null,
+            { className: classes.nowrap },
             iconElement,
             React.createElement(
                 'span',
@@ -60,7 +62,9 @@ class CellIcon extends React.PureComponent {
 }
 
 CellIcon.defaultProps = {
-    view: 'l'
+    icon: '',
+    view: 'l',
+    color: '#000'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -68,9 +72,14 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: PropTypes.object,
     /**
-     * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     * Couleur de l'icône
+     */
+    color: PropTypes.string.isRequired,
+    /**
+     * Icon name [from material-design-icons](https://materialdesignicons.com/)
+     * used by HiIconBuilder
      */
-    icon: PropTypes.string.isRequired,
+    icon: PropTypes.string,
     /**
      * Label
      */

package/es/HiTable/BodyCells/CellImage.js

@@ -1,43 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
 
 export const styles = theme => ({
     img: {
-        width: 24,
         height: 'auto',
         float: 'left'
     },
     smallImg: {
-        width: 24,
         height: 'auto'
     },
     label: {
-        marginLeft: 5
+        marginLeft: 5,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
     },
     tooltipImg: {
         width: 24,
         height: 'auto',
-        float: 'left',
-        marginTop: 2
+        float: 'left'
     },
     tooltipLabel: {
         marginLeft: 5,
-        position: 'relative',
-        bottom: 2,
         verticalAlign: 'middle'
-
     },
     wrapper: {
-        whiteSpace: 'nowrap',
-        overflow: "hidden",
-        textOverflow: "ellipsis"
+        display: 'flex',
+        alignItems: 'center'
     },
     center: {
         textAlign: 'center'
+    },
+    tooltipContainer: {
+        display: 'flex',
+        alignItems: 'center'
     }
 });
 
@@ -49,12 +48,12 @@ export const styles = theme => ({
 class CellImage extends React.PureComponent {
 
     render() {
-        const { classes, path, value, view } = this.props;
+        const { classes, path, value, view, size } = this.props;
 
         const tooltipContent = React.createElement(
             'div',
-            null,
-            React.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
+            { className: classes.tooltipContainer },
+            React.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
             React.createElement(
                 'span',
                 { className: classes.tooltipLabel },
@@ -63,17 +62,29 @@ class CellImage extends React.PureComponent {
         );
 
         let innerCellElement = null;
-        if (view === cst.VIEWS.SMALL) {
-            innerCellElement = React.createElement(
-                'div',
-                { className: classes.center },
-                React.createElement('img', { src: path, alt: value, className: classes.smallImg })
-            );
+        if (path) {
+            if (view === cst.VIEWS.SMALL) {
+                innerCellElement = React.createElement(
+                    'div',
+                    { className: classes.center },
+                    React.createElement('img', { src: path, alt: value, className: classes.smallImg, width: size })
+                );
+            } else {
+                innerCellElement = React.createElement(
+                    'div',
+                    { className: classes.wrapper },
+                    React.createElement('img', { src: path, alt: value, className: classes.img, width: size }),
+                    !!value && React.createElement(
+                        'span',
+                        { className: classes.label },
+                        value
+                    )
+                );
+            }
         } else {
             innerCellElement = React.createElement(
                 'div',
                 { className: classes.wrapper },
-                React.createElement('img', { src: path, alt: value, className: classes.img }),
                 !!value && React.createElement(
                     'span',
                     { className: classes.label },
@@ -83,6 +94,7 @@ class CellImage extends React.PureComponent {
         }
 
         if (view === cst.VIEWS.LARGE) {
+            // Don't add tooltip for large view
             return innerCellElement;
         } else {
             return React.createElement(
@@ -94,6 +106,9 @@ class CellImage extends React.PureComponent {
     }
 }
 
+CellImage.defaultProps = {
+    size: 24
+};
 CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
@@ -102,9 +117,13 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Image path
      */
-    path: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    /**
+     * Image path
+     */
+    size: PropTypes.number.isRequired,
     /**
-     * Label
+     * Value
      */
     value: PropTypes.string,
     /**