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

package/es/HiTable/BodyCells/CellCountry.js

@@ -47,12 +47,41 @@ export const styles = theme => ({
 class CellCountry extends React.PureComponent {
 
     render() {
-        const { label, path, value, view } = this.props;
+        const { classes, value, isoCode, view } = this.props;
+
+        let path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
+
+        let tooltipContent = React.createElement(
+            'div',
+            null,
+            React.createElement('img', { src: path, className: classes.tooltipImg }),
+            React.createElement(
+                'span',
+                { className: classes.tooltipLabel },
+                value
+            )
+        );
 
         if (view === cst.VIEWS.LARGE) {
-            return React.createElement(CellImage, { value: label ? label : value, path: path, view: view });
+            return React.createElement(CellImage, { view: cst.VIEWS.LARGE, value: value, path: path });
         } else {
-            return React.createElement(CellImage, { value: value, path: path, view: view });
+            let valueElement = value;
+            if (view === cst.VIEWS.SMALL) {
+                valueElement = isoCode.toUpperCase();
+            }
+            return React.createElement(
+                Tooltip,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                React.createElement(
+                    'div',
+                    { className: classes.wrapper },
+                    React.createElement(
+                        'span',
+                        { className: classes.label },
+                        valueElement
+                    )
+                )
+            );
         }
     }
 }
@@ -65,15 +94,11 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label
      */
-    label: PropTypes.string,
-    /**
-     * Flag's image path
-     */
-    path: PropTypes.string,
+    value: PropTypes.string.isRequired,
     /**
-     * Value - code isoa2 (uppercase)
+     * Code ISO
      */
-    value: PropTypes.string.isRequired,
+    isoCode: PropTypes.string.isRequired,
     /**
      * View (L/M/S)
      */

package/es/HiTable/BodyCells/CellIcon.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
 import HiIconBuilder from '../../utils/HiIconBuilder';
 
-export const styles = {
+export const styles = theme => ({
     icon: {
         float: 'left'
     },
@@ -16,11 +17,8 @@ export const styles = {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis'
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
     }
-};
+});
 
 /**
  * Cette cellule permet d'afficher une icône et un label (optionnel).
@@ -29,13 +27,13 @@ export const styles = {
 class CellIcon extends React.PureComponent {
 
     render() {
-        const { classes, icon, value, view, color } = this.props;
+        const { classes, icon, value, view } = this.props;
 
-        const iconElement = icon !== '' ? React.createElement(HiIconBuilder, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
+        const iconElement = React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 18 });
 
         const tooltipContent = React.createElement(
             'div',
-            { className: classes.nowrap },
+            null,
             iconElement,
             React.createElement(
                 'span',
@@ -62,9 +60,7 @@ class CellIcon extends React.PureComponent {
 }
 
 CellIcon.defaultProps = {
-    icon: '',
-    view: 'l',
-    color: '#000'
+    view: 'l'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -72,14 +68,9 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: PropTypes.object,
     /**
-     * Couleur de l'icône
-     */
-    color: PropTypes.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: PropTypes.string,
+    icon: PropTypes.string.isRequired,
     /**
      * Label
      */

package/es/HiTable/BodyCells/CellImage.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
 
 export const styles = theme => ({
     img: {
+        width: 24,
         height: 'auto',
         float: 'left'
     },
     smallImg: {
+        width: 24,
         height: 'auto'
     },
     label: {
@@ -18,25 +21,23 @@ export const 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'
     }
 });
 
@@ -48,12 +49,12 @@ export const styles = theme => ({
 class CellImage extends React.PureComponent {
 
     render() {
-        const { classes, path, value, view, size } = this.props;
+        const { classes, path, value, view } = this.props;
 
         const tooltipContent = React.createElement(
             'div',
-            { className: classes.tooltipContainer },
-            React.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
+            null,
+            React.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
             React.createElement(
                 'span',
                 { className: classes.tooltipLabel },
@@ -62,29 +63,17 @@ class CellImage extends React.PureComponent {
         );
 
         let innerCellElement = null;
-        if (path) {
-            if (view === cst.VIEWS.SMALL) {
-                innerCellElement = React.createElement(
-                    'div',
-                    { className: classes.center },
-                    React.createElement('img', { src: path, alt: value, className: classes.smallImg, width: size })
-                );
-            } else {
-                innerCellElement = React.createElement(
-                    'div',
-                    { className: classes.wrapper },
-                    React.createElement('img', { src: path, alt: value, className: classes.img, width: size }),
-                    !!value && React.createElement(
-                        'span',
-                        { className: classes.label },
-                        value
-                    )
-                );
-            }
+        if (view === cst.VIEWS.SMALL) {
+            innerCellElement = React.createElement(
+                'div',
+                { className: classes.center },
+                React.createElement('img', { src: path, alt: value, className: classes.smallImg })
+            );
         } else {
             innerCellElement = React.createElement(
                 'div',
                 { className: classes.wrapper },
+                React.createElement('img', { src: path, alt: value, className: classes.img }),
                 !!value && React.createElement(
                     'span',
                     { className: classes.label },
@@ -94,7 +83,6 @@ class CellImage extends React.PureComponent {
         }
 
         if (view === cst.VIEWS.LARGE) {
-            // Don't add tooltip for large view
             return innerCellElement;
         } else {
             return React.createElement(
@@ -106,9 +94,6 @@ class CellImage extends React.PureComponent {
     }
 }
 
-CellImage.defaultProps = {
-    size: 24
-};
 CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
@@ -117,15 +102,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Image path
      */
-    path: PropTypes.string,
-    /**
-     * Image path
-     */
-    size: PropTypes.number.isRequired,
+    path: PropTypes.string.isRequired,
     /**
-     * Value
+     * Label
      */
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     /**
      * View (L/M/S)
      */

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,
+            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 },
@@ -120,7 +115,7 @@ class CellLayout extends React.Component {
                     },
                     React.createElement(
                         HiPins,
-                        { color: theme.palette.business.primary.normal, className: classes.pins },
+                        { color: theme.palette.business.primary.normal },
                         childrenCount
                     )
                 )
@@ -134,7 +129,7 @@ CellLayout.defaultProps = {
     selectable: false,
     selected: false,
     dense: false,
-    fixedColumnWidth: true,
+    fixedWidth: false,
     sticky: false,
     padding: 8
 };
@@ -168,10 +163,9 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     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
      */

package/es/HiTable/BodyCells/CellNumeric.js

@@ -18,7 +18,7 @@ export const styles = theme => ({
 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 = '';
@@ -31,7 +31,7 @@ class CellNumeric extends React.PureComponent {
                 titleValue = formatCurrencyAmount(value, cst.VIEWS.LARGE, locale, currency);
             }
         } else {
-            displayedValue = formatNumber(value, view, locale, precision);
+            displayedValue = formatNumber(value, view, locale);
         }
 
         return React.createElement(
@@ -63,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/CellSentinel.js

@@ -5,18 +5,15 @@ 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)
@@ -24,7 +21,7 @@ export const styles = {
 class CellSentinel extends React.PureComponent {
 
     constructor(props) {
-        super(props);
+        super();
 
         this.getColorFromFraudResult = this.getColorFromFraudResult.bind(this);
     }
@@ -69,8 +66,7 @@ class CellSentinel extends React.PureComponent {
             fraudResult,
             automaticFraudReviewResult,
             pendingManualAction,
-            smartDecision,
-            hideFraudResult
+            smartDecision
         } = this.props;
 
         const scoreLabel = score > 0 ? `+${score}` : `${score}`;
@@ -80,17 +76,17 @@ class CellSentinel extends React.PureComponent {
             null,
             React.createElement(
                 'div',
-                { className: classes.nowrap },
+                null,
                 scoreLabel
             ),
             React.createElement(
                 'div',
-                { className: classes.nowrap },
+                null,
                 fraudResult
             ),
             !!smartDecision && automaticFraudReviewResult && React.createElement(
                 'div',
-                { className: classes.nowrap },
+                null,
                 'SD: ',
                 automaticFraudReviewResult
             )
@@ -101,14 +97,14 @@ class CellSentinel extends React.PureComponent {
             { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
             React.createElement(
                 'div',
-                { style: { textAlign: 'right' } },
+                null,
                 React.createElement(HiColoredLabel, {
                     label: scoreLabel,
                     color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
                     classes: { root: classes.label },
                     active: pendingManualAction
                 }),
-                !hideFraudResult && React.createElement(HiColoredLabel, {
+                React.createElement(HiColoredLabel, {
                     label: fraudResult.toUpperCase().substr(0, 1),
                     color: this.getColorFromFraudResult(fraudResult),
                     classes: { root: classes.label },
@@ -128,9 +124,6 @@ class CellSentinel extends React.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
@@ -144,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

@@ -11,10 +11,6 @@ export const styles = theme => ({
         display: 'inline-flex',
         alignItems: 'baseline',
         maxWidth: 'calc(100% - 36px)'
-    },
-    pins: {
-        position: 'relative',
-        bottom: 1
     }
 });
 
@@ -37,7 +33,7 @@ class CellStatus extends React.PureComponent {
                     React.createElement(HiColoredLabel, { label: value, color: color }),
                     React.createElement(
                         HiPins,
-                        { color: color, onClick: onOpenDetails, className: classes.pins },
+                        { color: color, onClick: onOpenDetails },
                         nbOperations
                     )
                 ) : React.createElement(HiColoredLabel, { label: value, color: color })
@@ -64,7 +60,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * 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)
      */

package/es/HiTable/BodyCells/CellText.js

@@ -17,8 +17,7 @@ export const styles = theme => ({
         display: 'inline-block',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        width: '100%'
+        whiteSpace: 'pre'
     },
     noEllipsisSpan: {
         display: 'inline-block',

package/es/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -2,19 +2,17 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Lock, LockOpen, LockOpenOutline } from 'mdi-material-ui';
+
 import Tooltip from '../../Tooltip';
-import { withStyles } from '../../styles';
+import { withStyles, withTheme } from '../../styles';
+import { Lock, LockOpen, LockOpenOutline } from 'mdi-material-ui';
 
-export const styles = {
+export const styles = theme => ({
     icon: {
         width: 18,
         height: 18
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
     }
-};
+});
 
 /**
  * Cette cellule permet d'afficher une icône représentant le statut du 3DS.
@@ -22,7 +20,8 @@ export const styles = {
 class CellThirdPartySecurity extends React.PureComponent {
 
     render() {
-        const { classes, theme, label, value } = this.props;
+        const { classes, theme, code, value } = this.props;
+
         const ECI_5 = 0; // authenticated
         const ECI_6 = 1; // cardholder not enrolled
         const ECI_7 = 2; //
@@ -31,47 +30,28 @@ class CellThirdPartySecurity extends React.PureComponent {
         const AUTH_2 = 5; // force 3DS
 
         let icon = null;
-        switch (value) {
+        switch (code) {
             case ECI_5:
-                icon = React.createElement(Lock, {
-                    className: classes.icon,
-                    style: { color: theme.palette.positive.normal }
-                });
+                icon = React.createElement(Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
                 break;
             case ECI_6:
-                icon = React.createElement(LockOpen, {
-                    className: classes.icon,
-                    style: { color: theme.palette.middle.normal }
-                });
+                icon = React.createElement(LockOpen, { className: classes.icon, style: { color: theme.palette.middle.normal } });
                 break;
             case AUTH_1:
-                icon = React.createElement(LockOpenOutline, {
-                    className: classes.icon,
-                    style: { color: theme.palette.neutral.light }
-                });
+                icon = React.createElement(LockOpenOutline, { className: classes.icon, style: { color: theme.palette.neutral.light } });
                 break;
             case AUTH_2:
-                icon = React.createElement(LockOpen, {
-                    className: classes.icon,
-                    style: { color: theme.palette.neutral.light }
-                });
+                icon = React.createElement(LockOpen, { className: classes.icon, style: { color: theme.palette.neutral.light } });
                 break;
             case ECI_7:
             case AUTH_0:
-            default:
                 icon = null;
                 break;
         }
 
-        const tooltipContent = React.createElement(
-            'div',
-            { className: classes.nowrap },
-            label
-        );
-
         return React.createElement(
             Tooltip,
-            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
             React.createElement(
                 'div',
                 null,
@@ -86,14 +66,6 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
-    /**
-     * Label
-     */
-    label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /**
-     * True si la colonne est sticky
-     */
-    sticky: PropTypes.bool,
     /**
      * Useful to extend the theme applied to components.
      * Used theme props positive.normal, middle.normal, neutral.light
@@ -108,6 +80,10 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    code: PropTypes.number,
+    /**
+     * Label
+     */
+    value: PropTypes.string
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);