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

package/HiTable/BodyCells/CellImage.js

@@ -52,37 +52,37 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles(theme) {
     return {
         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'
         }
     };
 };
@@ -108,13 +108,14 @@ var CellImage = function (_React$PureComponent) {
                 classes = _props.classes,
                 path = _props.path,
                 value = _props.value,
-                view = _props.view;
+                view = _props.view,
+                size = _props.size;
 
 
             var tooltipContent = _react2.default.createElement(
                 'div',
-                null,
-                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
+                { className: classes.tooltipContainer },
+                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
                 _react2.default.createElement(
                     'span',
                     { className: classes.tooltipLabel },
@@ -123,17 +124,29 @@ var CellImage = function (_React$PureComponent) {
             );
 
             var innerCellElement = null;
-            if (view === cst.VIEWS.SMALL) {
-                innerCellElement = _react2.default.createElement(
-                    'div',
-                    { className: classes.center },
-                    _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg })
-                );
+            if (path) {
+                if (view === cst.VIEWS.SMALL) {
+                    innerCellElement = _react2.default.createElement(
+                        'div',
+                        { className: classes.center },
+                        _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg, width: size })
+                    );
+                } else {
+                    innerCellElement = _react2.default.createElement(
+                        'div',
+                        { className: classes.wrapper },
+                        _react2.default.createElement('img', { src: path, alt: value, className: classes.img, width: size }),
+                        !!value && _react2.default.createElement(
+                            'span',
+                            { className: classes.label },
+                            value
+                        )
+                    );
+                }
             } else {
                 innerCellElement = _react2.default.createElement(
                     'div',
                     { className: classes.wrapper },
-                    _react2.default.createElement('img', { src: path, alt: value, className: classes.img }),
                     !!value && _react2.default.createElement(
                         'span',
                         { className: classes.label },
@@ -143,6 +156,7 @@ var CellImage = function (_React$PureComponent) {
             }
 
             if (view === cst.VIEWS.LARGE) {
+                // Don't add tooltip for large view
                 return innerCellElement;
             } else {
                 return _react2.default.createElement(
@@ -156,6 +170,9 @@ var CellImage = function (_React$PureComponent) {
     return CellImage;
 }(_react2.default.PureComponent);
 
+CellImage.defaultProps = {
+    size: 24
+};
 CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
@@ -164,9 +181,13 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Image path
      */
-    path: _propTypes2.default.string.isRequired,
+    path: _propTypes2.default.string,
+    /**
+     * Image path
+     */
+    size: _propTypes2.default.number.isRequired,
     /**
-     * Label
+     * Value
      */
     value: _propTypes2.default.string,
     /**

package/HiTable/BodyCells/CellLayout.js

@@ -83,6 +83,10 @@ var styles = exports.styles = function styles(theme) {
         lookedUp: {
             background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
             borderRadius: '45%'
+        },
+        pins: {
+            position: 'relative',
+            top: 3
         }
     };
 };
@@ -132,12 +136,14 @@ var CellLayout = function (_React$Component) {
                 dense = _props.dense,
                 _props$width = _props.width,
                 width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
-                fixedWidth = _props.fixedWidth,
+                fixedColumnWidth = _props.fixedColumnWidth,
                 sticky = _props.sticky,
                 selectable = _props.selectable,
                 selected = _props.selected,
                 onSelect = _props.onSelect,
                 childrenCount = _props.childrenCount,
+                detailInfos = _props.detailInfos,
+                onOpenDetails = _props.onOpenDetails,
                 theme = _props.theme,
                 padding = _props.padding,
                 lookedUp = _props.lookedUp;
@@ -150,22 +156,23 @@ var CellLayout = function (_React$Component) {
 
             var lookedUpClassName = (0, _classnames2.default)(classes.flexContent, (0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
 
+            var 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 _react2.default.createElement(
                 _TableCell2.default,
-                {
-                    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
-                    }
-                },
+                { className: classes.root, style: cellStyle },
                 !!selectable && _react2.default.createElement(_HiCheckbox2.default, {
                     classes: { root: classes.checkbox },
                     style: { margin: dense ? 6 : 10 },
@@ -196,9 +203,25 @@ var CellLayout = function (_React$Component) {
                         },
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: theme.palette.business.primary.normal },
+                            { color: theme.palette.business.primary.normal, className: classes.pins },
                             childrenCount
                         )
+                    ),
+                    detailInfos && _react2.default.createElement(
+                        'div',
+                        {
+                            style: {
+                                position: 'absolute',
+                                top: dense ? 2 : 6,
+                                right: 0
+                            },
+                            onClick: onOpenDetails
+                        },
+                        _react2.default.createElement(
+                            _HiPins2.default,
+                            { color: theme.palette.business.secondary.normal, className: classes.pins },
+                            detailInfos.total
+                        )
                     )
                 )
             );
@@ -212,9 +235,10 @@ CellLayout.defaultProps = {
     selectable: false,
     selected: false,
     dense: false,
-    fixedWidth: false,
+    fixedColumnWidth: true,
     sticky: false,
-    padding: 8
+    padding: 8,
+    detailInfos: null
 };
 CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -229,6 +253,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
+     */
+    detailInfos: _propTypes2.default.object,
     /**
      * Recherche lookup sur cette colonne
      */
@@ -244,11 +272,12 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: _propTypes2.default.number,
+    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
     /**
-     * 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: _propTypes2.default.bool,
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/HiTable/BodyCells/CellNumeric.js

@@ -79,7 +79,8 @@ var CellNumeric = function (_React$PureComponent) {
                 value = _props.value,
                 locale = _props.locale,
                 currency = _props.currency,
-                view = _props.view;
+                view = _props.view,
+                precision = _props.precision;
 
 
             var displayedValue = '';
@@ -93,7 +94,7 @@ var CellNumeric = function (_React$PureComponent) {
                     titleValue = (0, _hiHelpers.formatCurrencyAmount)(value, cst.VIEWS.LARGE, locale, currency);
                 }
             } else {
-                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale);
+                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale, precision);
             }
 
             return _react2.default.createElement(
@@ -127,6 +128,10 @@ CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
      * Code de la devise (ISO 4217)
      */
     currency: _propTypes2.default.string,
+    /**
+     * Nombre de chiffres après la virgule
+     */
+    precision: _propTypes2.default.number,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellSentinel.js

@@ -51,16 +51,17 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        smartDecision: {
-            display: 'inline-block',
-            minWidth: 18
-        },
-        label: {
-            marginLeft: 2
-        }
-    };
+var styles = exports.styles = {
+    smartDecision: {
+        display: 'inline-block',
+        minWidth: 18
+    },
+    label: {
+        marginLeft: 2
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
+    }
 };
 
 /**
@@ -73,7 +74,7 @@ var CellSentinel = function (_React$PureComponent) {
     function CellSentinel(props) {
         (0, _classCallCheck3.default)(this, CellSentinel);
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this));
+        var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this, props));
 
         _this.getColorFromFraudResult = _this.getColorFromFraudResult.bind(_this);
         return _this;
@@ -124,7 +125,8 @@ var CellSentinel = function (_React$PureComponent) {
                 fraudResult = _props.fraudResult,
                 automaticFraudReviewResult = _props.automaticFraudReviewResult,
                 pendingManualAction = _props.pendingManualAction,
-                smartDecision = _props.smartDecision;
+                smartDecision = _props.smartDecision,
+                hideFraudResult = _props.hideFraudResult;
 
 
             var scoreLabel = score > 0 ? '+' + score : '' + score;
@@ -134,17 +136,17 @@ var CellSentinel = function (_React$PureComponent) {
                 null,
                 _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     scoreLabel
                 ),
                 _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     fraudResult
                 ),
                 !!smartDecision && automaticFraudReviewResult && _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     'SD: ',
                     automaticFraudReviewResult
                 )
@@ -155,14 +157,14 @@ var CellSentinel = function (_React$PureComponent) {
                 { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
                 _react2.default.createElement(
                     'div',
-                    null,
+                    { style: { textAlign: 'right' } },
                     _react2.default.createElement(_HiColoredLabel2.default, {
                         label: scoreLabel,
                         color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
                         classes: { root: classes.label },
                         active: pendingManualAction
                     }),
-                    _react2.default.createElement(_HiColoredLabel2.default, {
+                    !hideFraudResult && _react2.default.createElement(_HiColoredLabel2.default, {
                         label: fraudResult.toUpperCase().substr(0, 1),
                         color: this.getColorFromFraudResult(fraudResult),
                         classes: { root: classes.label },
@@ -184,6 +186,9 @@ var CellSentinel = function (_React$PureComponent) {
     return CellSentinel;
 }(_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
@@ -197,6 +202,10 @@ 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

@@ -55,6 +55,10 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-flex',
             alignItems: 'baseline',
             maxWidth: 'calc(100% - 36px)'
+        },
+        pins: {
+            position: 'relative',
+            bottom: 1
         }
     };
 };
@@ -93,7 +97,7 @@ var CellStatus = function (_React$PureComponent) {
                         _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: color, onClick: onOpenDetails },
+                            { color: color, onClick: onOpenDetails, className: classes.pins },
                             nbOperations
                         )
                     ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
@@ -119,11 +123,11 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'opérations financières
      */
-    nbOperations: _propTypes2.default.number.isRequired,
+    nbOperations: _propTypes2.default.number,
     /**
      * Statut courant de la transaction
      */
-    value: _propTypes2.default.string.isRequired,
+    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]).isRequired,
     /**
      * Code du statut courant de la transaction (détermine la couleur du label)
      */

package/HiTable/BodyCells/CellText.js

@@ -66,7 +66,8 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-block',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'pre'
+            whiteSpace: 'pre',
+            width: '100%'
         },
         noEllipsisSpan: {
             display: 'inline-block',

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -33,23 +33,24 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _mdiMaterialUi = require('mdi-material-ui');
+
 var _Tooltip = require('../../Tooltip');
 
 var _Tooltip2 = _interopRequireDefault(_Tooltip);
 
 var _styles = require('../../styles');
 
-var _mdiMaterialUi = require('mdi-material-ui');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        icon: {
-            width: 18,
-            height: 18
-        }
-    };
+var styles = exports.styles = {
+    icon: {
+        width: 18,
+        height: 18
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
+    }
 };
 
 /**
@@ -71,10 +72,9 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var _props = this.props,
                 classes = _props.classes,
                 theme = _props.theme,
-                code = _props.code,
+                label = _props.label,
                 value = _props.value;
 
-
             var ECI_5 = 0; // authenticated
             var ECI_6 = 1; // cardholder not enrolled
             var ECI_7 = 2; //
@@ -83,28 +83,47 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var AUTH_2 = 5; // force 3DS
 
             var icon = null;
-            switch (code) {
+            switch (value) {
                 case ECI_5:
-                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
+                    icon = _react2.default.createElement(_mdiMaterialUi.Lock, {
+                        className: classes.icon,
+                        style: { color: theme.palette.positive.normal }
+                    });
                     break;
                 case ECI_6:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.middle.normal } });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, {
+                        className: classes.icon,
+                        style: { color: theme.palette.middle.normal }
+                    });
                     break;
                 case AUTH_1:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpenOutline, {
+                        className: classes.icon,
+                        style: { color: theme.palette.neutral.light }
+                    });
                     break;
                 case AUTH_2:
-                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                    icon = _react2.default.createElement(_mdiMaterialUi.LockOpen, {
+                        className: classes.icon,
+                        style: { color: theme.palette.neutral.light }
+                    });
                     break;
                 case ECI_7:
                 case AUTH_0:
+                default:
                     icon = null;
                     break;
             }
 
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                { className: classes.nowrap },
+                label
+            );
+
             return _react2.default.createElement(
                 _Tooltip2.default,
-                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
                 _react2.default.createElement(
                     'div',
                     null,
@@ -121,6 +140,14 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
+    /**
+     * Label
+     */
+    label: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+    /**
+     * True si la colonne est sticky
+     */
+    sticky: _propTypes2.default.bool,
     /**
      * Useful to extend the theme applied to components.
      * Used theme props positive.normal, middle.normal, neutral.light
@@ -135,10 +162,6 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    code: _propTypes2.default.number,
-    /**
-     * Label
-     */
-    value: _propTypes2.default.string
+    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);