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

package/es/HiTable/BodyCells/CellLayout.js

@@ -28,10 +28,6 @@ export const styles = theme => ({
     lookedUp: {
         background: `linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)`,
         borderRadius: '45%'
-    },
-    pins: {
-        position: 'relative',
-        top: 3
     }
 });
 
@@ -61,35 +57,34 @@ class CellLayout extends React.Component {
         const {
             classes, type, children,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
-            view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedColumnWidth, sticky,
-            selectable, selected, onSelect, childrenCount, detailInfos, onOpenDetails, theme, padding,
-            lookedUp, title
+            view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedWidth, sticky,
+            selectable, selected, onSelect, childrenCount, theme, padding,
+            lookedUp
         } = this.props;
 
-        const offset = selectable ? dense ? 32 : 40 : 0;
+        let offset = selectable ? dense ? 32 : 40 : 0;
 
         // Inclus le padding et/ou la checkbox dans la largeur de la cellule
-        const _width = width + offset + (selectable ? padding : 2 * padding);
+        let _width = width + offset + (selectable ? padding : 2 * padding);
 
         const lookedUpClassName = classNames(classes.flexContent, { [classes.lookedUp]: lookedUp });
 
-        const cellStyle = {
-            zIndex: sticky ? 12 : 11,
-            textAlign: align,
-            position: sticky ? 'relative' : 'inherit',
-            border: 'none',
-            height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-        };
-
-        if (fixedColumnWidth) {
-            cellStyle.maxWidth = _width;
-            cellStyle.minWidth = _width;
-            cellStyle.width = _width;
-        }
-
         return React.createElement(
             TableCell,
-            { className: classes.root, style: cellStyle },
+            {
+                className: classes.root,
+                style: {
+                    maxWidth: _width,
+                    minWidth: _width,
+                    width: _width,
+                    // la cellule sticky doit être au dessus des autres cellules du body
+                    zIndex: sticky ? 12 : 11,
+                    textAlign: align,
+                    position: sticky ? 'relative' : 'inherit',
+                    border: 'none',
+                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+                }
+            },
             !!selectable && React.createElement(HiCheckbox, {
                 classes: { root: classes.checkbox },
                 style: { margin: dense ? 6 : 10 },
@@ -106,8 +101,7 @@ class CellLayout extends React.Component {
                         paddingLeft: selectable ? 0 : padding,
                         paddingRight: padding,
                         height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-                    },
-                    title: title
+                    }
                 },
                 children,
                 childrenCount && React.createElement(
@@ -121,25 +115,9 @@ class CellLayout extends React.Component {
                     },
                     React.createElement(
                         HiPins,
-                        { color: theme.palette.business.primary.normal, className: classes.pins },
+                        { color: theme.palette.business.primary.normal },
                         childrenCount
                     )
-                ),
-                detailInfos && React.createElement(
-                    'div',
-                    {
-                        style: {
-                            position: 'absolute',
-                            top: dense ? 2 : 6,
-                            right: 0
-                        },
-                        onClick: onOpenDetails
-                    },
-                    React.createElement(
-                        HiPins,
-                        { color: theme.palette.business.secondary.normal, className: classes.pins },
-                        detailInfos.total
-                    )
                 )
             )
         );
@@ -151,11 +129,9 @@ CellLayout.defaultProps = {
     selectable: false,
     selected: false,
     dense: false,
-    fixedColumnWidth: true,
+    fixedWidth: false,
     sticky: false,
-    padding: 8,
-    detailInfos: null,
-    title: null
+    padding: 8
 };
 CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -170,10 +146,6 @@ CellLayout.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,
     /**
      * Recherche lookup sur cette colonne
      */
@@ -189,12 +161,11 @@ CellLayout.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,
     /**
-     * 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,
     /**
      * Title alignement, est déduit de type par défaut
      */
@@ -222,10 +193,6 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'enfants
      */
-    childrenCount: PropTypes.number,
-    /**
-     * Html title attribute
-     */
-    title: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    childrenCount: PropTypes.number
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiCellLayout' })(CellLayout);

package/es/HiTable/BodyCells/CellNumeric.js

@@ -1,8 +1,10 @@
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import withStyles from '../../styles/withStyles';
 import { formatNumber, formatCurrencyAmount } from '../../utils/hiHelpers';
+import Tooltip from '../../Tooltip';
+import * as cst from '../constants';
 
 export const styles = theme => ({
     spanNumeric: {
@@ -13,27 +15,33 @@ export const styles = theme => ({
 /**
  * Cette cellule permet d'afficher un volume ou un montant avec devise
  */
-class CellNumeric extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellNumeric extends React.PureComponent {
 
     render() {
-        const { classes, value, locale, currency, view, precision } = this.props;
+        const { classes, value, locale, currency, view } = this.props;
 
         let displayedValue = '';
+        let titleValue = '';
 
         if (currency) {
             displayedValue = formatCurrencyAmount(value, view, locale, currency);
+            if (view === cst.VIEWS.LARGE) {
+                titleValue = displayedValue;
+            } else {
+                titleValue = formatCurrencyAmount(value, cst.VIEWS.LARGE, locale, currency);
+            }
         } else {
-            displayedValue = formatNumber(value, view, locale, precision);
+            displayedValue = formatNumber(value, view, locale);
         }
 
         return React.createElement(
-            'span',
-            { className: classes.spanNumeric },
-            displayedValue
+            Tooltip,
+            { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'span',
+                { className: classes.spanNumeric },
+                displayedValue
+            )
         );
     }
 }
@@ -55,10 +63,6 @@ CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
      * Code de la devise (ISO 4217)
      */
     currency: PropTypes.string,
-    /**
-     * Nombre de chiffres après la virgule
-     */
-    precision: PropTypes.number,
     /**
      * View (L/M/S)
      */

package/es/HiTable/BodyCells/CellRate.js

@@ -1,4 +1,3 @@
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -27,8 +26,8 @@ export const styles = theme => ({
     negative: {
         color: theme.palette.negative.normal
     },
-    neutral: {
-        color: theme.palette.neutral.normal
+    middle: {
+        color: theme.palette.middle.normal
     },
     spanIndicator: {
         fontSize: 11,
@@ -46,11 +45,7 @@ export const styles = theme => ({
  * Cette cellule permet d'afficher un pourcentage
  * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
  */
-class CellRate extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellRate extends React.PureComponent {
 
     render() {
 
@@ -61,7 +56,7 @@ class CellRate extends React.Component {
 
         switch (trendchip) {
             case cst.NO_EVOLUTION:
-                trendIcon = React.createElement(Equal, { className: classes.trendChipIcon + ' ' + classes.neutral });
+                trendIcon = React.createElement(Equal, { className: classes.trendChipIcon + ' ' + classes.middle });
                 break;
             case cst.EVOLUTION_UP:
                 trendIcon = React.createElement(ArrowTopRight, {

package/es/HiTable/BodyCells/CellSentinel.js

@@ -1,34 +1,27 @@
-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';
 import * as cst from '../constants';
 
-export const styles = {
+export const styles = theme => ({
     smartDecision: {
         display: 'inline-block',
         minWidth: 18
     },
     label: {
         marginLeft: 2
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
     }
-};
+});
 
 /**
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
  */
-class CellSentinel extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellSentinel extends React.PureComponent {
 
     constructor(props) {
-        super(props);
+        super();
 
         this.getColorFromFraudResult = this.getColorFromFraudResult.bind(this);
     }
@@ -73,43 +66,64 @@ class CellSentinel extends React.Component {
             fraudResult,
             automaticFraudReviewResult,
             pendingManualAction,
-            smartDecision,
-            hideFraudResult
+            smartDecision
         } = this.props;
 
         const scoreLabel = score > 0 ? `+${score}` : `${score}`;
 
-        return React.createElement(
+        const tooltipContent = React.createElement(
             'div',
-            { style: { textAlign: 'right' } },
-            React.createElement(HiColoredLabel, {
-                label: scoreLabel,
-                color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
-                classes: { root: classes.label },
-                active: pendingManualAction
-            }),
-            !hideFraudResult && React.createElement(HiColoredLabel, {
-                label: fraudResult.toUpperCase().substr(0, 1),
-                color: this.getColorFromFraudResult(fraudResult),
-                classes: { root: classes.label },
-                active: pendingManualAction
-            }),
-            !!smartDecision && React.createElement(
+            null,
+            React.createElement(
+                'div',
+                null,
+                scoreLabel
+            ),
+            React.createElement(
+                'div',
+                null,
+                fraudResult
+            ),
+            !!smartDecision && automaticFraudReviewResult && React.createElement(
+                'div',
+                null,
+                'SD: ',
+                automaticFraudReviewResult
+            )
+        );
+
+        return React.createElement(
+            Tooltip,
+            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
                 'div',
-                { className: classes.smartDecision },
-                automaticFraudReviewResult && React.createElement(HiColoredLabel, {
-                    label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
-                    color: this.getColorFromFraudResult(automaticFraudReviewResult),
+                null,
+                React.createElement(HiColoredLabel, {
+                    label: scoreLabel,
+                    color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
+                    classes: { root: classes.label },
                     active: pendingManualAction
-                })
+                }),
+                React.createElement(HiColoredLabel, {
+                    label: fraudResult.toUpperCase().substr(0, 1),
+                    color: this.getColorFromFraudResult(fraudResult),
+                    classes: { root: classes.label },
+                    active: pendingManualAction
+                }),
+                !!smartDecision && React.createElement(
+                    'div',
+                    { className: classes.smartDecision },
+                    automaticFraudReviewResult && React.createElement(HiColoredLabel, {
+                        label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
+                        color: this.getColorFromFraudResult(automaticFraudReviewResult),
+                        active: pendingManualAction
+                    })
+                )
             )
         );
     }
 }
 
-CellSentinel.defaultProps = {
-    hideFraudResult: false
-};
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
@@ -123,10 +137,6 @@ CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Résultat de la fraude
      */
     fraudResult: PropTypes.string.isRequired,
-    /**
-     * Si true le fraudResult ne sera pas affiché
-     */
-    hideFraudResult: PropTypes.bool.isRequired,
     /**
      * Signal qu'il attend une réponse manuelle
      */

package/es/HiTable/BodyCells/CellStatus.js

@@ -1,28 +1,20 @@
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 import HiColoredLabel from '../../HiColoredLabel';
 import HiPins from '../../HiPins';
 import { withStyles } from '../../styles';
+import Tooltip from '../../Tooltip';
 
 export const styles = theme => ({
     labelDiv: {
         display: 'inline-flex',
         alignItems: 'baseline',
         maxWidth: 'calc(100% - 36px)'
-    },
-    pins: {
-        position: 'relative',
-        bottom: 1
     }
 });
 
-class CellStatus extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellStatus extends React.PureComponent {
 
     render() {
         const { classes, theme, nbOperations, value, code, onOpenDetails } = this.props;
@@ -30,18 +22,22 @@ class CellStatus extends React.Component {
         const color = typeof theme.palette.status[code] !== 'undefined' ? theme.palette.status[code] : theme.palette.neutral.normal;
 
         return React.createElement(
-            'div',
-            null,
-            nbOperations > 0 ? React.createElement(
+            Tooltip,
+            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
                 'div',
-                { className: classes.labelDiv },
-                React.createElement(HiColoredLabel, { label: value, color: color }),
-                React.createElement(
-                    HiPins,
-                    { color: color, onClick: onOpenDetails, className: classes.pins },
-                    nbOperations
-                )
-            ) : React.createElement(HiColoredLabel, { label: value, color: color })
+                null,
+                nbOperations > 0 ? React.createElement(
+                    'div',
+                    { className: classes.labelDiv },
+                    React.createElement(HiColoredLabel, { label: value, color: color }),
+                    React.createElement(
+                        HiPins,
+                        { color: color, onClick: onOpenDetails },
+                        nbOperations
+                    )
+                ) : React.createElement(HiColoredLabel, { label: value, color: color })
+            )
         );
     }
 }
@@ -60,15 +56,15 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'opérations financières
      */
-    nbOperations: PropTypes.number,
+    nbOperations: PropTypes.number.isRequired,
     /**
      * Statut courant de la transaction
      */
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.string.isRequired,
     /**
      * Code du statut courant de la transaction (détermine la couleur du label)
      */
-    code: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    code: PropTypes.number.isRequired,
     /**
      * Fonction de callback appelée pour ouvrir les lignes de détails
      */

package/es/HiTable/BodyCells/CellText.js

@@ -1,12 +1,11 @@
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
+
+import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
-import HiColoredLabel from '../../HiColoredLabel';
-import { getContrastedTextColor } from '../../styles/colorManipulator';
 
-export const styles = {
+export const styles = theme => ({
     leftEllipsisSpan: {
         display: 'inline-block',
         overflow: 'hidden',
@@ -25,9 +24,9 @@ export const styles = {
         overflow: 'hidden',
         whiteSpace: 'pre'
     }
-};
+});
 
-class CellText extends React.Component {
+class CellText extends React.PureComponent {
 
     constructor(props) {
         super(props);
@@ -43,10 +42,6 @@ class CellText extends React.Component {
         this.buildEllipsis();
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
-
     componentDidUpdate() {
         this.buildEllipsis();
     }
@@ -56,7 +51,7 @@ class CellText extends React.Component {
          * Calcul l'espace disponible dans la cellule en plus du premier mot
          * si il reste de l'espace, définit la largeur du span pour le reste du texte
          */
-        if (this.props.ellipsis === cst.ELLIPSIS_AFTER_FIRST_WORD || this.props.ellipsis === cst.ELLIPSIS_NAME) {
+        if (this.props.ellipsis === cst.ELLIPSIS_AFTER_FIRST_WORD) {
             if (this.cellText !== null) {
                 const [startSpan, endSpan] = this.cellText.getElementsByTagName('span');
                 if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
@@ -72,9 +67,8 @@ class CellText extends React.Component {
 
         /**
          * Calcul l'espace pris par les 2 spans (les 2 moitiés du texte),
-         * si ils dépassent la largeur de la cellule :
-         * - diminue d'autant et proportionnellement chaque span
-         * - ajoute l'ellipse à gauche de la deuxième moitié du texte.
+         * si ils dépassent la largeur de la cellule, diminue d'autant et proportionnellement chaque span
+         * ajoute l'ellipse à gauche de la deuxième moitié du texte.
          */
         if (this.props.ellipsis === cst.ELLIPSIS_MIDDLE) {
             if (this.cellText !== null) {
@@ -94,16 +88,15 @@ class CellText extends React.Component {
     }
 
     render() {
-        const { classes, value, ellipsis, color } = this.props;
+        const { classes, value, ellipsis } = this.props;
 
         let start,
             end,
             valueElement = '';
 
-        const valueString = value.toString();
+        let valueString = value.toString();
 
         switch (ellipsis) {
-            case cst.ELLIPSIS_NAME:
             case cst.ELLIPSIS_AFTER_FIRST_WORD:
                 // Split value in 2 strings around first whitespace
                 start = valueString.substr(0, valueString.indexOf(' '));
@@ -114,19 +107,13 @@ class CellText extends React.Component {
                 }
                 valueElement = React.createElement(
                     'div',
-                    {
-                        ref: div => {
+                    { ref: div => {
                             this.cellText = div;
-                        },
-                        style: {
-                            backgroundColor: color || 'inherit',
-                            color: color ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : 'inherit'
-                        }
-                    },
+                        } },
                     React.createElement(
                         'span',
                         { className: classes.rightEllipsisSpan },
-                        `${start} `
+                        start + ' '
                     ),
                     React.createElement(
                         'span',
@@ -142,15 +129,9 @@ class CellText extends React.Component {
                 end = valueString.substr(Math.round(valueString.length / 2));
                 valueElement = React.createElement(
                     'div',
-                    {
-                        ref: div => {
+                    { ref: div => {
                             this.cellText = div;
-                        },
-                        style: {
-                            backgroundColor: color || 'inherit',
-                            color: color ? getContrastedTextColor(color, '#4C4C4C', '#FFF') : 'inherit'
-                        }
-                    },
+                        } },
                     React.createElement(
                         'span',
                         { className: classes.noEllipsisSpan },
@@ -165,11 +146,7 @@ class CellText extends React.Component {
                 break;
 
             case cst.ELLIPSIS_LEFT:
-                valueElement = color ? React.createElement(HiColoredLabel, {
-                    className: classes.leftEllipsisSpan,
-                    label: valueString,
-                    color: color
-                }) : React.createElement(
+                valueElement = React.createElement(
                     'div',
                     { className: classes.leftEllipsisSpan, style: { width: '100%' } },
                     valueString
@@ -178,11 +155,7 @@ class CellText extends React.Component {
 
             case cst.ELLIPSIS_RIGHT:
             default:
-                valueElement = color ? React.createElement(HiColoredLabel, {
-                    className: classes.rightEllipsisSpan,
-                    label: valueString,
-                    color: color
-                }) : React.createElement(
+                valueElement = React.createElement(
                     'div',
                     { className: classes.rightEllipsisSpan, style: { width: '100%' } },
                     valueString
@@ -190,7 +163,11 @@ class CellText extends React.Component {
                 break;
         }
 
-        return valueElement;
+        return React.createElement(
+            Tooltip,
+            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+            valueElement
+        );
     }
 }
 
@@ -200,16 +177,12 @@ CellText.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: PropTypes.object,
     /**
-     * Couleur du text & du background
+     * Valeur à afficher
      */
-    color: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     /**
      * Ellipsis
      */
-    ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
-    /**
-     * Valeur à afficher
-     */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word'])
 } : {};
 export default withStyles(styles, { name: 'HmuiCellText' })(CellText);