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

package/es/HiTable/BodyCellBuilder.js

@@ -1,18 +1,16 @@
-import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ContextMenuTrigger } from 'react-contextmenu';
-import moment from 'moment';
+
 import * as cst from './constants';
-import { CellLayout, CellAccount, CellAddress, CellDate, CellIcon, CellImage, CellNumeric, CellRate, CellSentinel, CellStatus, CellText, CellThirdPartySecurity, CellCountry } from './BodyCells';
+import { CellLayout, CellAccount, CellAccountNumber, CellAddress, CellDate, CellIcon, CellImage, CellNumeric, CellRate, CellSentinel, CellStatus, CellText, CellThirdPartySecurity, CellCountry } from './BodyCells';
 import { formatRate } from '../utils/hiHelpers';
 
 /**
  * Construit la cellule correspondante au type demandé
  */
-export default class BodyCellBuilder extends React.Component {
+export default class BodyCellBuilder extends React.PureComponent {
 
     constructor(props) {
         super(props);
@@ -20,42 +18,55 @@ export default class BodyCellBuilder extends React.Component {
         this.collectContextMenuDatas = this.collectContextMenuDatas.bind(this);
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
-
-    /**
-     * 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
         };
     }
@@ -65,14 +76,14 @@ export default class BodyCellBuilder extends React.Component {
               {
             ukey,
             type,
-            data,
+            datas,
             view,
             width,
+            fixedWidth,
             padding,
             align,
             dense,
             ellipsis,
-            formatShort,
             onSelect,
             selectable,
             selected,
@@ -81,19 +92,15 @@ export default class BodyCellBuilder extends React.Component {
             numberLocale,
             childrenCount,
             onOpenDetails,
-            lookedUp,
-            fixedColumnWidth,
-            disableContextMenu,
-            detailInfos,
-            size,
-            tabId
+            lookedUp
         } = _props,
-              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'formatShort', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos', 'size', 'tabId']);
+              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,
@@ -102,88 +109,84 @@ export default class BodyCellBuilder extends React.Component {
             selected,
             sticky,
             childrenCount,
-            lookedUp,
-            fixedColumnWidth,
-            detailInfos,
-            onOpenDetails
+            lookedUp
         };
 
-        let cellContent;
-        if (typeof data !== 'undefined') {
-
-            let cellElement;
+        let cellElement;
 
+        if (typeof datas !== 'undefined') {
             switch (type) {
                 case cst.TYPE_ACCOUNT:
-                    layoutProps.title = data.value;
-                    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: datas.value,
+                        country: datas.country,
+                        expirationDate: datas.expirationDate,
+                        expirationDateLabel: datas.expirationDateLabel,
+                        statusColor: datas.statusColor,
+                        issuer: datas.issuer,
+                        sticky: sticky
+                    });
                     break;
 
                 case cst.TYPE_ADDRESS:
-                    layoutProps.title = `${data.name}, ${data.value}, ${data.city}`;
                     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
                     });
                     break;
 
                 case cst.TYPE_COUNTRY:
-                    layoutProps.title = data.label ? data.label : data.value;
                     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
                     });
                     break;
 
                 case cst.TYPE_DATE:
-                    if (!props.displayTime) layoutProps.title = moment(data.value).format('dddd DD MMMM YYYY HH:mm:ss');
                     cellElement = React.createElement(CellDate, {
-                        value: data.value,
+                        value: datas.value,
                         locale: dateLocale,
                         view: view,
                         displayTime: props.displayTime,
-                        sticky: sticky,
-                        formatShort: formatShort
+                        sticky: sticky
                     });
                     break;
 
                 case cst.TYPE_ICON:
-                    if (view === cst.VIEWS.SMALL) layoutProps.title = data.label ? data.label : data.value;
+                    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
                     });
                     break;
 
                 case cst.TYPE_IMAGE:
-                    if (view === cst.VIEWS.SMALL) layoutProps.title = data.label ? data.label : data.value;
                     cellElement = React.createElement(CellImage, {
-                        value: data.label ? data.label : data.value,
-                        path: data.img,
-                        size: size,
+                        value: datas.value,
+                        path: datas.path,
                         view: view,
                         sticky: sticky
                     });
                     break;
 
                 case cst.TYPE_NUMERIC:
-                    if (view !== cst.VIEWS.LARGE) layoutProps.title = data.label ? data.label : data.value;
                     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
@@ -192,10 +195,10 @@ export default class BodyCellBuilder extends React.Component {
 
                 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
@@ -204,64 +207,57 @@ export default class BodyCellBuilder extends React.Component {
 
                 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
                     });
                     break;
 
                 case cst.TYPE_STATUS:
-                    layoutProps.title = data.label ? data.label : data.value;
-                    cellElement = React.createElement(CellStatus, _extends({
-                        code: data.value,
-                        value: data.label ? data.label : data.value,
+                    cellElement = React.createElement(CellStatus, {
+                        code: datas.code,
+                        nbOperations: datas.count_operations,
+                        value: datas.value,
+                        onOpenDetails: onOpenDetails,
                         sticky: sticky
-                    }, detailInfos && {
-                        nbOperations: detailInfos.total,
-                        onOpenDetails: onOpenDetails
-                    }));
-                    delete layoutProps.detailInfos;
-                    delete layoutProps.onOpenDetails;
+                    });
                     break;
 
                 case cst.TYPE_THIRD_PARTY_SECURITY:
-                    layoutProps.title = data.label ? data.label : data.value;
                     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;
 
-                case cst.TYPE_ACCOUNT_NUMBER:
                 case cst.TYPE_TEXT:
                 default:
-                    layoutProps.title = data.label ? data.label : data.value;
                     cellElement = React.createElement(CellText, {
                         ukey: ukey,
-                        value: data.label ? data.label : data.value,
+                        value: datas.value,
                         ellipsis: ellipsis,
                         view: view,
-                        sticky: sticky,
-                        color: data.color
+                        sticky: sticky
                     });
                     break;
             }
-
-            cellContent = disableContextMenu ? cellElement : React.createElement(
-                ContextMenuTrigger,
-                {
-                    id: `hitable_context_menu_${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,
@@ -270,9 +266,7 @@ export default class BodyCellBuilder extends React.Component {
     }
 }
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right',
-    disableContextMenu: true,
-    detailInfos: null
+    ellipsis: 'right'
 };
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -287,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
      */
@@ -303,23 +293,14 @@ 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']),
     /**
-     * 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
      */
@@ -360,5 +341,5 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    width: PropTypes.number
 } : {};

package/es/HiTable/BodyCells/CellAccount.js

@@ -1,22 +1,24 @@
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../Tooltip';
 import HiColoredLabel from '../../HiColoredLabel';
+import withStyles from '../../styles/withStyles';
+
+export const styles = theme => ({});
 
 /**
  * Cette cellule permet d'afficher le nom d'un compte sous la forme d'un label coloré.
  */
-class CellAccount extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellAccount extends React.PureComponent {
 
     render() {
         const { value, color } = this.props;
 
-        return React.createElement(HiColoredLabel, { label: value, color: color });
+        return React.createElement(
+            Tooltip,
+            { title: value, placement: 'bottom' },
+            React.createElement(HiColoredLabel, { label: value, color: color })
+        );
     }
 }
 
@@ -29,10 +31,10 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Couleur du compte
      */
-    color: PropTypes.string,
+    color: PropTypes.string.isRequired,
     /**
      * Nom du compte
      */
     value: PropTypes.string.isRequired
 } : {};
-export default CellAccount;
+export default withStyles(styles, { name: 'HmuiCellAccount' })(CellAccount);

package/es/HiTable/BodyCells/CellAccountNumber.js

@@ -0,0 +1,166 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Circle } from 'mdi-material-ui';
+import Tooltip from '../../Tooltip';
+import { withStyles, withTheme } from '../../styles';
+
+export const styles = theme => ({
+    tooltipWrapper: {
+        textAlign: 'center'
+    },
+    coloredIndicator: {
+        backgroundColor: '#ffffff',
+        borderRadius: '50%',
+        float: 'left',
+        width: 12,
+        height: 'auto',
+        position: 'relative',
+        top: 5,
+        right: 3
+    },
+    leftEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        direction: 'rtl',
+        width: '49%'
+    },
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre'
+    },
+    noEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        whiteSpace: 'pre',
+        maxWidth: '50%'
+    }
+});
+
+/**
+ * Cette cellule permet d'afficher un numéro de compte
+ * Le tooltip affiche les informations complémentaires (country, expiration date..)
+ */
+class CellAccountNumber extends React.PureComponent {
+
+    render() {
+        const {
+            classes,
+            value,
+            country,
+            expirationDate,
+            expirationDateLabel,
+            statusColor,
+            issuer
+        } = this.props;
+
+        let dateDisplayed = new Date(expirationDate);
+
+        if (isNaN(dateDisplayed.getMonth()) || isNaN(dateDisplayed.getFullYear())) {
+            dateDisplayed = '';
+        } else {
+            dateDisplayed = `${dateDisplayed.getMonth() + 1 < 10 ? `${dateDisplayed.getMonth()}${1}` : dateDisplayed.getMonth() + 1}/${dateDisplayed.getFullYear()}`;
+        }
+
+        const tooltipContent = React.createElement(
+            'div',
+            { className: classes.tooltipWrapper },
+            React.createElement(
+                'div',
+                null,
+                issuer
+            ),
+            React.createElement(
+                'div',
+                null,
+                value || 'N/A'
+            ),
+            expirationDate && React.createElement(
+                'div',
+                null,
+                statusColor ? React.createElement(Circle, {
+                    style: { color: statusColor },
+                    className: classes.coloredIndicator
+                }) : '',
+                expirationDateLabel && `${expirationDateLabel} : `,
+                dateDisplayed
+            ),
+            React.createElement(
+                'div',
+                null,
+                country
+            )
+        );
+
+        const start = value ? value.substr(0, Math.round(value.length / 2)) : '';
+        // reverse string for rtl display
+        const end = value ? value.substr(Math.round(value.length / 2)).split('').reverse().join('') : '';
+
+        return React.createElement(
+            Tooltip,
+            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'div',
+                { className: classes.rightEllipsisSpan, style: { width: '100%' } },
+                React.createElement(
+                    'div',
+                    {
+                        ref: div => {
+                            this.cellText = div;
+                        }
+                    },
+                    React.createElement(
+                        'span',
+                        { className: classes.noEllipsisSpan },
+                        start
+                    ),
+                    React.createElement(
+                        'span',
+                        { className: classes.leftEllipsisSpan },
+                        end
+                    )
+                )
+            )
+        );
+    }
+}
+
+CellAccountNumber.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Pays du compte
+     */
+    country: PropTypes.string,
+    /**
+     * Date d'expiration
+     */
+    expirationDate: PropTypes.string,
+    /**
+     * Label de la date d'expiration
+     */
+    expirationDateLabel: PropTypes.string,
+    /**
+     * Banque issuer
+     */
+    issuer: PropTypes.string,
+    /**
+     * Couleur représentant le statut du compte (utilisé pour caractériser la date d'expiration)
+     */
+    statusColor: PropTypes.string,
+    /**
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky"
+     * lors du scroll horizontal
+     */
+    sticky: PropTypes.bool,
+    /**
+     * Numéro du compte
+     */
+    value: PropTypes.string
+} : {};
+export default withStyles(styles, { withTheme: true, name: 'HmuiCellAccountNumber' })(CellAccountNumber);