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

package/HiTable/BodyCells/CellCountry.js

@@ -106,16 +106,45 @@ var CellCountry = function (_React$PureComponent) {
         key: 'render',
         value: function render() {
             var _props = this.props,
-                label = _props.label,
-                path = _props.path,
+                classes = _props.classes,
                 value = _props.value,
+                isoCode = _props.isoCode,
                 view = _props.view;
 
 
+            var path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
+
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement('img', { src: path, className: classes.tooltipImg }),
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.tooltipLabel },
+                    value
+                )
+            );
+
             if (view === cst.VIEWS.LARGE) {
-                return _react2.default.createElement(_CellImage2.default, { value: label ? label : value, path: path, view: view });
+                return _react2.default.createElement(_CellImage2.default, { view: cst.VIEWS.LARGE, value: value, path: path });
             } else {
-                return _react2.default.createElement(_CellImage2.default, { value: value, path: path, view: view });
+                var valueElement = value;
+                if (view === cst.VIEWS.SMALL) {
+                    valueElement = isoCode.toUpperCase();
+                }
+                return _react2.default.createElement(
+                    _Tooltip2.default,
+                    { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.wrapper },
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.label },
+                            valueElement
+                        )
+                    )
+                );
             }
         }
     }]);
@@ -130,15 +159,11 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label
      */
-    label: _propTypes2.default.string,
-    /**
-     * Flag's image path
-     */
-    path: _propTypes2.default.string,
+    value: _propTypes2.default.string.isRequired,
     /**
-     * Value - code isoa2 (uppercase)
+     * Code ISO
      */
-    value: _propTypes2.default.string.isRequired,
+    isoCode: _propTypes2.default.string.isRequired,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellIcon.js

@@ -53,21 +53,20 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = {
-    icon: {
-        float: 'left'
-    },
-    label: {
-        margin: 5
-    },
-    wrapper: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
-    }
+var styles = exports.styles = function styles(theme) {
+    return {
+        icon: {
+            float: 'left'
+        },
+        label: {
+            margin: 5
+        },
+        wrapper: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }
+    };
 };
 
 /**
@@ -90,15 +89,14 @@ var CellIcon = function (_React$PureComponent) {
                 classes = _props.classes,
                 icon = _props.icon,
                 value = _props.value,
-                view = _props.view,
-                color = _props.color;
+                view = _props.view;
 
 
-            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
+            var iconElement = _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 18 });
 
             var tooltipContent = _react2.default.createElement(
                 'div',
-                { className: classes.nowrap },
+                null,
                 iconElement,
                 _react2.default.createElement(
                     'span',
@@ -127,9 +125,7 @@ var CellIcon = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 CellIcon.defaultProps = {
-    icon: '',
-    view: 'l',
-    color: '#000'
+    view: 'l'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -137,14 +133,9 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: _propTypes2.default.object,
     /**
-     * Couleur de l'icône
-     */
-    color: _propTypes2.default.string.isRequired,
-    /**
-     * Icon name [from material-design-icons](https://materialdesignicons.com/)
-     * used by HiIconBuilder
+     * Icône name [from material-design-icons](https://materialdesignicons.com/)
      */
-    icon: _propTypes2.default.string,
+    icon: _propTypes2.default.string.isRequired,
     /**
      * Label
      */

package/HiTable/BodyCells/CellImage.js

@@ -52,10 +52,12 @@ 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: {
@@ -64,25 +66,23 @@ var styles = exports.styles = function styles(theme) {
         tooltipImg: {
             width: 24,
             height: 'auto',
-            float: 'left'
+            float: 'left',
+            marginTop: 2
         },
         tooltipLabel: {
             marginLeft: 5,
+            position: 'relative',
+            bottom: 2,
             verticalAlign: 'middle'
+
         },
         wrapper: {
-            display: 'flex',
-            alignItems: 'center',
             whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
+            overflow: "hidden",
+            textOverflow: "ellipsis"
         },
         center: {
             textAlign: 'center'
-        },
-        tooltipContainer: {
-            display: 'flex',
-            alignItems: 'center'
         }
     };
 };
@@ -108,14 +108,13 @@ var CellImage = function (_React$PureComponent) {
                 classes = _props.classes,
                 path = _props.path,
                 value = _props.value,
-                view = _props.view,
-                size = _props.size;
+                view = _props.view;
 
 
             var tooltipContent = _react2.default.createElement(
                 'div',
-                { className: classes.tooltipContainer },
-                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
+                null,
+                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
                 _react2.default.createElement(
                     'span',
                     { className: classes.tooltipLabel },
@@ -124,29 +123,17 @@ var CellImage = function (_React$PureComponent) {
             );
 
             var innerCellElement = null;
-            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
-                        )
-                    );
-                }
+            if (view === cst.VIEWS.SMALL) {
+                innerCellElement = _react2.default.createElement(
+                    'div',
+                    { className: classes.center },
+                    _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg })
+                );
             } 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 },
@@ -156,7 +143,6 @@ var CellImage = function (_React$PureComponent) {
             }
 
             if (view === cst.VIEWS.LARGE) {
-                // Don't add tooltip for large view
                 return innerCellElement;
             } else {
                 return _react2.default.createElement(
@@ -170,9 +156,6 @@ 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.
@@ -181,15 +164,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Image path
      */
-    path: _propTypes2.default.string,
-    /**
-     * Image path
-     */
-    size: _propTypes2.default.number.isRequired,
+    path: _propTypes2.default.string.isRequired,
     /**
-     * Value
+     * Label
      */
-    value: _propTypes2.default.string.isRequired,
+    value: _propTypes2.default.string,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellLayout.js

@@ -83,10 +83,6 @@ 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
         }
     };
 };
@@ -136,7 +132,7 @@ var CellLayout = function (_React$Component) {
                 dense = _props.dense,
                 _props$width = _props.width,
                 width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
-                fixedColumnWidth = _props.fixedColumnWidth,
+                fixedWidth = _props.fixedWidth,
                 sticky = _props.sticky,
                 selectable = _props.selectable,
                 selected = _props.selected,
@@ -154,23 +150,22 @@ 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: 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 && _react2.default.createElement(_HiCheckbox2.default, {
                     classes: { root: classes.checkbox },
                     style: { margin: dense ? 6 : 10 },
@@ -201,7 +196,7 @@ var CellLayout = function (_React$Component) {
                         },
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: theme.palette.business.primary.normal, className: classes.pins },
+                            { color: theme.palette.business.primary.normal },
                             childrenCount
                         )
                     )
@@ -217,7 +212,7 @@ CellLayout.defaultProps = {
     selectable: false,
     selected: false,
     dense: false,
-    fixedColumnWidth: true,
+    fixedWidth: false,
     sticky: false,
     padding: 8
 };
@@ -251,10 +246,9 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     width: _propTypes2.default.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: _propTypes2.default.bool,
+    fixedWidth: _propTypes2.default.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/HiTable/BodyCells/CellNumeric.js

@@ -79,8 +79,7 @@ var CellNumeric = function (_React$PureComponent) {
                 value = _props.value,
                 locale = _props.locale,
                 currency = _props.currency,
-                view = _props.view,
-                precision = _props.precision;
+                view = _props.view;
 
 
             var displayedValue = '';
@@ -94,7 +93,7 @@ var CellNumeric = function (_React$PureComponent) {
                     titleValue = (0, _hiHelpers.formatCurrencyAmount)(value, cst.VIEWS.LARGE, locale, currency);
                 }
             } else {
-                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale, precision);
+                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale);
             }
 
             return _react2.default.createElement(
@@ -128,10 +127,6 @@ 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,17 +51,16 @@ 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
+        }
+    };
 };
 
 /**
@@ -74,7 +73,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, props));
+        var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this));
 
         _this.getColorFromFraudResult = _this.getColorFromFraudResult.bind(_this);
         return _this;
@@ -125,8 +124,7 @@ var CellSentinel = function (_React$PureComponent) {
                 fraudResult = _props.fraudResult,
                 automaticFraudReviewResult = _props.automaticFraudReviewResult,
                 pendingManualAction = _props.pendingManualAction,
-                smartDecision = _props.smartDecision,
-                hideFraudResult = _props.hideFraudResult;
+                smartDecision = _props.smartDecision;
 
 
             var scoreLabel = score > 0 ? '+' + score : '' + score;
@@ -136,17 +134,17 @@ var CellSentinel = function (_React$PureComponent) {
                 null,
                 _react2.default.createElement(
                     'div',
-                    { className: classes.nowrap },
+                    null,
                     scoreLabel
                 ),
                 _react2.default.createElement(
                     'div',
-                    { className: classes.nowrap },
+                    null,
                     fraudResult
                 ),
                 !!smartDecision && automaticFraudReviewResult && _react2.default.createElement(
                     'div',
-                    { className: classes.nowrap },
+                    null,
                     'SD: ',
                     automaticFraudReviewResult
                 )
@@ -157,14 +155,14 @@ var CellSentinel = function (_React$PureComponent) {
                 { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
                 _react2.default.createElement(
                     'div',
-                    { style: { textAlign: 'right' } },
+                    null,
                     _react2.default.createElement(_HiColoredLabel2.default, {
                         label: scoreLabel,
                         color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
                         classes: { root: classes.label },
                         active: pendingManualAction
                     }),
-                    !hideFraudResult && _react2.default.createElement(_HiColoredLabel2.default, {
+                    _react2.default.createElement(_HiColoredLabel2.default, {
                         label: fraudResult.toUpperCase().substr(0, 1),
                         color: this.getColorFromFraudResult(fraudResult),
                         classes: { root: classes.label },
@@ -186,9 +184,6 @@ 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
@@ -202,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

@@ -55,10 +55,6 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-flex',
             alignItems: 'baseline',
             maxWidth: 'calc(100% - 36px)'
-        },
-        pins: {
-            position: 'relative',
-            bottom: 1
         }
     };
 };
@@ -97,7 +93,7 @@ var CellStatus = function (_React$PureComponent) {
                         _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
                         _react2.default.createElement(
                             _HiPins2.default,
-                            { color: color, onClick: onOpenDetails, className: classes.pins },
+                            { color: color, onClick: onOpenDetails },
                             nbOperations
                         )
                     ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
@@ -127,7 +123,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * 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)
      */

package/HiTable/BodyCells/CellText.js

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

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -33,24 +33,23 @@ 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 = {
-    icon: {
-        width: 18,
-        height: 18
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
-    }
+var styles = exports.styles = function styles(theme) {
+    return {
+        icon: {
+            width: 18,
+            height: 18
+        }
+    };
 };
 
 /**
@@ -72,9 +71,10 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var _props = this.props,
                 classes = _props.classes,
                 theme = _props.theme,
-                label = _props.label,
+                code = _props.code,
                 value = _props.value;
 
+
             var ECI_5 = 0; // authenticated
             var ECI_6 = 1; // cardholder not enrolled
             var ECI_7 = 2; //
@@ -83,47 +83,28 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
             var AUTH_2 = 5; // force 3DS
 
             var icon = null;
-            switch (value) {
+            switch (code) {
                 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: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
                 _react2.default.createElement(
                     'div',
                     null,
@@ -140,14 +121,6 @@ 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
@@ -162,6 +135,10 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+    code: _propTypes2.default.number,
+    /**
+     * Label
+     */
+    value: _propTypes2.default.string
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);