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

package/HiTable/BodyCells/CellSentinel.js

@@ -9,22 +9,18 @@ var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
 var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
 var _createClass2 = require('babel-runtime/helpers/createClass');
 
 var _createClass3 = _interopRequireDefault(_createClass2);
 
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
 var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
@@ -37,6 +33,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 var _HiColoredLabel = require('../../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
@@ -51,36 +51,29 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = {
-    smartDecision: {
-        display: 'inline-block',
-        minWidth: 18
-    },
-    label: {
-        marginLeft: 2
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
-    }
+var styles = exports.styles = function styles(theme) {
+    return {
+        smartDecision: {
+            display: 'inline-block',
+            minWidth: 18
+        },
+        label: {
+            marginLeft: 2
+        }
+    };
 };
 
 /**
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
  */
 
-var CellSentinel = function (_React$Component) {
-    (0, _inherits3.default)(CellSentinel, _React$Component);
-    (0, _createClass3.default)(CellSentinel, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }]);
+var CellSentinel = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellSentinel, _React$PureComponent);
 
     function CellSentinel(props) {
         (0, _classCallCheck3.default)(this, CellSentinel);
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this, props));
+        var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this));
 
         _this.getColorFromFraudResult = _this.getColorFromFraudResult.bind(_this);
         return _this;
@@ -131,45 +124,66 @@ var CellSentinel = function (_React$Component) {
                 fraudResult = _props.fraudResult,
                 automaticFraudReviewResult = _props.automaticFraudReviewResult,
                 pendingManualAction = _props.pendingManualAction,
-                smartDecision = _props.smartDecision,
-                hideFraudResult = _props.hideFraudResult;
+                smartDecision = _props.smartDecision;
 
 
             var scoreLabel = score > 0 ? '+' + score : '' + score;
 
-            return _react2.default.createElement(
+            var tooltipContent = _react2.default.createElement(
                 'div',
-                { style: { textAlign: 'right' } },
-                _react2.default.createElement(_HiColoredLabel2.default, {
-                    label: scoreLabel,
-                    color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
-                    classes: { root: classes.label },
-                    active: pendingManualAction
-                }),
-                !hideFraudResult && _react2.default.createElement(_HiColoredLabel2.default, {
-                    label: fraudResult.toUpperCase().substr(0, 1),
-                    color: this.getColorFromFraudResult(fraudResult),
-                    classes: { root: classes.label },
-                    active: pendingManualAction
-                }),
-                !!smartDecision && _react2.default.createElement(
+                null,
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    scoreLabel
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    fraudResult
+                ),
+                !!smartDecision && automaticFraudReviewResult && _react2.default.createElement(
+                    'div',
+                    null,
+                    'SD: ',
+                    automaticFraudReviewResult
+                )
+            );
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
                     'div',
-                    { className: classes.smartDecision },
-                    automaticFraudReviewResult && _react2.default.createElement(_HiColoredLabel2.default, {
-                        label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
-                        color: this.getColorFromFraudResult(automaticFraudReviewResult),
+                    null,
+                    _react2.default.createElement(_HiColoredLabel2.default, {
+                        label: scoreLabel,
+                        color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
+                        classes: { root: classes.label },
+                        active: pendingManualAction
+                    }),
+                    _react2.default.createElement(_HiColoredLabel2.default, {
+                        label: fraudResult.toUpperCase().substr(0, 1),
+                        color: this.getColorFromFraudResult(fraudResult),
+                        classes: { root: classes.label },
                         active: pendingManualAction
-                    })
+                    }),
+                    !!smartDecision && _react2.default.createElement(
+                        'div',
+                        { className: classes.smartDecision },
+                        automaticFraudReviewResult && _react2.default.createElement(_HiColoredLabel2.default, {
+                            label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
+                            color: this.getColorFromFraudResult(automaticFraudReviewResult),
+                            active: pendingManualAction
+                        })
+                    )
                 )
             );
         }
     }]);
     return CellSentinel;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
-CellSentinel.defaultProps = {
-    hideFraudResult: false
-};
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
@@ -183,10 +197,6 @@ CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
      * Résultat de la fraude
      */
     fraudResult: _propTypes2.default.string.isRequired,
-    /**
-     * Si true le fraudResult ne sera pas affiché
-     */
-    hideFraudResult: _propTypes2.default.bool.isRequired,
     /**
      * Signal qu'il attend une réponse manuelle
      */

package/HiTable/BodyCells/CellStatus.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -47,6 +43,10 @@ var _HiPins2 = _interopRequireDefault(_HiPins);
 
 var _styles = require('../../styles');
 
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
@@ -55,16 +55,12 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-flex',
             alignItems: 'baseline',
             maxWidth: 'calc(100% - 36px)'
-        },
-        pins: {
-            position: 'relative',
-            bottom: 1
         }
     };
 };
 
-var CellStatus = function (_React$Component) {
-    (0, _inherits3.default)(CellStatus, _React$Component);
+var CellStatus = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellStatus, _React$PureComponent);
 
     function CellStatus() {
         (0, _classCallCheck3.default)(this, CellStatus);
@@ -72,11 +68,6 @@ var CellStatus = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellStatus, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,
@@ -91,23 +82,27 @@ var CellStatus = function (_React$Component) {
             var color = typeof theme.palette.status[code] !== 'undefined' ? theme.palette.status[code] : theme.palette.neutral.normal;
 
             return _react2.default.createElement(
-                'div',
-                null,
-                nbOperations > 0 ? _react2.default.createElement(
+                _Tooltip2.default,
+                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
                     'div',
-                    { className: classes.labelDiv },
-                    _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
-                    _react2.default.createElement(
-                        _HiPins2.default,
-                        { color: color, onClick: onOpenDetails, className: classes.pins },
-                        nbOperations
-                    )
-                ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
+                    null,
+                    nbOperations > 0 ? _react2.default.createElement(
+                        'div',
+                        { className: classes.labelDiv },
+                        _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
+                        _react2.default.createElement(
+                            _HiPins2.default,
+                            { color: color, onClick: onOpenDetails },
+                            nbOperations
+                        )
+                    ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
+                )
             );
         }
     }]);
     return CellStatus;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellStatus.defaultProps = {
     nbOperations: 0
@@ -124,15 +119,15 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'opérations financières
      */
-    nbOperations: _propTypes2.default.number,
+    nbOperations: _propTypes2.default.number.isRequired,
     /**
      * Statut courant de la transaction
      */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]).isRequired,
+    value: _propTypes2.default.string.isRequired,
     /**
      * Code du statut courant de la transaction (détermine la couleur du label)
      */
-    code: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]).isRequired,
+    code: _propTypes2.default.number.isRequired,
     /**
      * Fonction de callback appelée pour ouvrir les lignes de détails
      */

package/HiTable/BodyCells/CellText.js

@@ -9,10 +9,6 @@ var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
 
 var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -41,6 +37,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -49,39 +49,35 @@ var _constants = require('../constants');
 
 var cst = _interopRequireWildcard(_constants);
 
-var _HiColoredLabel = require('../../HiColoredLabel');
-
-var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
-
-var _colorManipulator = require('../../styles/colorManipulator');
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = {
-    leftEllipsisSpan: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        direction: 'rtl'
-    },
-    rightEllipsisSpan: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre'
-    },
-    noEllipsisSpan: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        whiteSpace: 'pre'
-    }
+var styles = exports.styles = function styles(theme) {
+    return {
+        leftEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            direction: 'rtl'
+        },
+        rightEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre'
+        },
+        noEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            whiteSpace: 'pre'
+        }
+    };
 };
 
-var CellText = function (_React$Component) {
-    (0, _inherits3.default)(CellText, _React$Component);
+var CellText = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellText, _React$PureComponent);
 
     function CellText(props) {
         (0, _classCallCheck3.default)(this, CellText);
@@ -105,11 +101,6 @@ var CellText = function (_React$Component) {
         value: function componentDidMount() {
             this.buildEllipsis();
         }
-    }, {
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
     }, {
         key: 'componentDidUpdate',
         value: function componentDidUpdate() {
@@ -122,7 +113,7 @@ var CellText = function (_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) {
                     var _cellText$getElements = this.cellText.getElementsByTagName('span'),
                         _cellText$getElements2 = (0, _slicedToArray3.default)(_cellText$getElements, 2),
@@ -142,9 +133,8 @@ var CellText = function (_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) {
@@ -174,8 +164,7 @@ var CellText = function (_React$Component) {
             var _props = this.props,
                 classes = _props.classes,
                 value = _props.value,
-                ellipsis = _props.ellipsis,
-                color = _props.color;
+                ellipsis = _props.ellipsis;
 
 
             var start = void 0,
@@ -185,7 +174,6 @@ var CellText = function (_React$Component) {
             var 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(' '));
@@ -196,15 +184,9 @@ var CellText = function (_React$Component) {
                     }
                     valueElement = _react2.default.createElement(
                         'div',
-                        {
-                            ref: function ref(div) {
+                        { ref: function ref(div) {
                                 _this2.cellText = div;
-                            },
-                            style: {
-                                backgroundColor: color || 'inherit',
-                                color: color ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : 'inherit'
-                            }
-                        },
+                            } },
                         _react2.default.createElement(
                             'span',
                             { className: classes.rightEllipsisSpan },
@@ -224,15 +206,9 @@ var CellText = function (_React$Component) {
                     end = valueString.substr(Math.round(valueString.length / 2));
                     valueElement = _react2.default.createElement(
                         'div',
-                        {
-                            ref: function ref(div) {
+                        { ref: function ref(div) {
                                 _this2.cellText = div;
-                            },
-                            style: {
-                                backgroundColor: color || 'inherit',
-                                color: color ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : 'inherit'
-                            }
-                        },
+                            } },
                         _react2.default.createElement(
                             'span',
                             { className: classes.noEllipsisSpan },
@@ -247,11 +223,7 @@ var CellText = function (_React$Component) {
                     break;
 
                 case cst.ELLIPSIS_LEFT:
-                    valueElement = color ? _react2.default.createElement(_HiColoredLabel2.default, {
-                        className: classes.leftEllipsisSpan,
-                        label: valueString,
-                        color: color
-                    }) : _react2.default.createElement(
+                    valueElement = _react2.default.createElement(
                         'div',
                         { className: classes.leftEllipsisSpan, style: { width: '100%' } },
                         valueString
@@ -260,11 +232,7 @@ var CellText = function (_React$Component) {
 
                 case cst.ELLIPSIS_RIGHT:
                 default:
-                    valueElement = color ? _react2.default.createElement(_HiColoredLabel2.default, {
-                        className: classes.rightEllipsisSpan,
-                        label: valueString,
-                        color: color
-                    }) : _react2.default.createElement(
+                    valueElement = _react2.default.createElement(
                         'div',
                         { className: classes.rightEllipsisSpan, style: { width: '100%' } },
                         valueString
@@ -272,11 +240,15 @@ var CellText = function (_React$Component) {
                     break;
             }
 
-            return valueElement;
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+                valueElement
+            );
         }
     }]);
     return CellText;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellText.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -284,16 +256,12 @@ CellText.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: _propTypes2.default.object,
     /**
-     * Couleur du text & du background
+     * Valeur à afficher
      */
-    color: _propTypes2.default.string,
+    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
     /**
      * Ellipsis
      */
-    ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
-    /**
-     * Valeur à afficher
-     */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
+    ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word'])
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellText' })(CellText);