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

package/es/HiTable/BodyCells/CellLayout.js

@@ -28,6 +28,10 @@ export const styles = theme => ({
     lookedUp: {
         background: `linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)`,
         borderRadius: '45%'
+    },
+    pins: {
+        position: 'relative',
+        top: 3
     }
 });
 
@@ -57,34 +61,35 @@ 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], fixedWidth, sticky,
-            selectable, selected, onSelect, childrenCount, theme, padding,
+            view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedColumnWidth, sticky,
+            selectable, selected, onSelect, childrenCount, detailInfos, onOpenDetails, theme, padding,
             lookedUp
         } = this.props;
 
-        let offset = selectable ? dense ? 32 : 40 : 0;
+        const offset = selectable ? dense ? 32 : 40 : 0;
 
         // Inclus le padding et/ou la checkbox dans la largeur de la cellule
-        let _width = width + offset + (selectable ? padding : 2 * padding);
+        const _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: {
-                    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 && React.createElement(HiCheckbox, {
                 classes: { root: classes.checkbox },
                 style: { margin: dense ? 6 : 10 },
@@ -115,9 +120,25 @@ class CellLayout extends React.Component {
                     },
                     React.createElement(
                         HiPins,
-                        { color: theme.palette.business.primary.normal },
+                        { color: theme.palette.business.primary.normal, className: classes.pins },
                         childrenCount
                     )
+                ),
+                detailInfos && React.createElement(
+                    'div',
+                    {
+                        style: {
+                            position: 'absolute',
+                            top: dense ? 2 : 6,
+                            right: 0
+                        },
+                        onClick: onOpenDetails
+                    },
+                    React.createElement(
+                        HiPins,
+                        { color: theme.palette.business.secondary.normal, className: classes.pins },
+                        detailInfos.total
+                    )
                 )
             )
         );
@@ -129,9 +150,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" ? {
     /**
@@ -146,6 +168,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: PropTypes.bool,
+    /**
+     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
+     */
+    detailInfos: PropTypes.object,
     /**
      * Recherche lookup sur cette colonne
      */
@@ -161,11 +187,12 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.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: PropTypes.bool,
+    fixedColumnWidth: 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 } = this.props;
+        const { classes, value, locale, currency, view, precision } = 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);
+            displayedValue = formatNumber(value, view, locale, precision);
         }
 
         return React.createElement(
@@ -63,6 +63,10 @@ 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,15 +5,18 @@ import HiColoredLabel from '../../HiColoredLabel';
 import { withStyles } from '../../styles';
 import * as cst from '../constants';
 
-export const styles = theme => ({
+export const styles = {
     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)
@@ -21,7 +24,7 @@ export const styles = theme => ({
 class CellSentinel extends React.PureComponent {
 
     constructor(props) {
-        super();
+        super(props);
 
         this.getColorFromFraudResult = this.getColorFromFraudResult.bind(this);
     }
@@ -66,7 +69,8 @@ class CellSentinel extends React.PureComponent {
             fraudResult,
             automaticFraudReviewResult,
             pendingManualAction,
-            smartDecision
+            smartDecision,
+            hideFraudResult
         } = this.props;
 
         const scoreLabel = score > 0 ? `+${score}` : `${score}`;
@@ -76,17 +80,17 @@ class CellSentinel extends React.PureComponent {
             null,
             React.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 scoreLabel
             ),
             React.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 fraudResult
             ),
             !!smartDecision && automaticFraudReviewResult && React.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 'SD: ',
                 automaticFraudReviewResult
             )
@@ -97,14 +101,14 @@ class CellSentinel extends React.PureComponent {
             { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
             React.createElement(
                 'div',
-                null,
+                { style: { textAlign: 'right' } },
                 React.createElement(HiColoredLabel, {
                     label: scoreLabel,
                     color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
                     classes: { root: classes.label },
                     active: pendingManualAction
                 }),
-                React.createElement(HiColoredLabel, {
+                !hideFraudResult && React.createElement(HiColoredLabel, {
                     label: fraudResult.toUpperCase().substr(0, 1),
                     color: this.getColorFromFraudResult(fraudResult),
                     classes: { root: classes.label },
@@ -124,6 +128,9 @@ 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
@@ -137,6 +144,10 @@ 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,6 +11,10 @@ export const styles = theme => ({
         display: 'inline-flex',
         alignItems: 'baseline',
         maxWidth: 'calc(100% - 36px)'
+    },
+    pins: {
+        position: 'relative',
+        bottom: 1
     }
 });
 
@@ -33,7 +37,7 @@ class CellStatus extends React.PureComponent {
                     React.createElement(HiColoredLabel, { label: value, color: color }),
                     React.createElement(
                         HiPins,
-                        { color: color, onClick: onOpenDetails },
+                        { color: color, onClick: onOpenDetails, className: classes.pins },
                         nbOperations
                     )
                 ) : React.createElement(HiColoredLabel, { label: value, color: color })
@@ -56,11 +60,11 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'opérations financières
      */
-    nbOperations: PropTypes.number.isRequired,
+    nbOperations: PropTypes.number,
     /**
      * Statut courant de la transaction
      */
-    value: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     /**
      * Code du statut courant de la transaction (détermine la couleur du label)
      */

package/es/HiTable/BodyCells/CellText.js

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

package/es/HiTable/BodyCells/CellThirdPartySecurity.js

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

package/es/HiTable/BodyRow.js

@@ -50,6 +50,10 @@ class BodyRow extends React.PureComponent {
     constructor(props) {
         super();
 
+        this.handleOpenRowDetails = type => () => {
+            this.props.onOpenRowDetails(this.props.row.rowId, type);
+        };
+
         this.state = {
             live: props.live,
             style: {
@@ -97,10 +101,6 @@ class BodyRow extends React.PureComponent {
         }
     }
 
-    handleOpenRowDetails() {
-        this.props.onOpenRowDetails(this.props.row.rowId);
-    }
-
     handleSelect() {
         this.props.onSelect(this.props.row);
     }
@@ -112,6 +112,7 @@ class BodyRow extends React.PureComponent {
             theme,
             row,
             columns,
+            lookupColumns,
             orderedColumns,
             selectable,
             selected,
@@ -122,13 +123,13 @@ class BodyRow extends React.PureComponent {
             numberLocale,
             sticky,
             innerRow,
-            isDetail
+            isDetail,
+            detailRowsOptions
         } = _props,
-              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
+              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail', 'detailRowsOptions']);
 
         const { style } = this.state;
 
-        let firstCol = true;
         let unfixedCol = true;
 
         const rowStyle = _extends({}, style, {
@@ -143,6 +144,19 @@ class BodyRow extends React.PureComponent {
         // If there is no datas don't display the row
         if (!row.hasOwnProperty('datas')) return false;
 
+        let detailsInfos = {};
+        if (row.details && row.details.length > 0) {
+            detailsInfos = row.details.reduce((memo, item) => {
+                if (item.rows.length > 0 && detailRowsOptions[item.type] && detailRowsOptions[item.type].anchor) {
+                    memo[detailRowsOptions[item.type].anchor] = _extends({
+                        type: item.type,
+                        total: item.rows.length
+                    }, detailRowsOptions[item.type]);
+                }
+                return memo;
+            }, {});
+        }
+
         return React.createElement(
             TableRow,
             {
@@ -160,65 +174,85 @@ class BodyRow extends React.PureComponent {
                 key: `${row.rowId}-left-cell`,
                 className: patchDivClass
             }),
-            orderedColumns.map(colRef => {
-                const { colId: colRefId, displayed, view: colView } = colRef,
+            orderedColumns.map((colRef, index) => {
+
+                // Dynamic column settings (from OrderColumns)
+                const {
+                    colId: colRefId,
+                    displayed,
+                    view: colView
+                } = colRef,
                       colRefProps = _objectWithoutProperties(colRef, ['colId', 'displayed', 'view']);
-                if (displayed !== false) {
-                    // the first column is sticky (except checkbox)
-                    const first = firstCol;
-                    firstCol = false;
-                    const _columns$colRef$colId = columns[colRef.colId],
-                          {
-                        colId,
-                        align,
-                        datas,
-                        ellipsis,
-                        fixedWidth,
-                        type,
-                        width
-                    } = _columns$colRef$colId,
-                          columnProps = _objectWithoutProperties(_columns$colRef$colId, ['colId', 'align', 'datas', 'ellipsis', 'fixedWidth', 'type', 'width']);
-                    const data = row.datas[colRef.colId];
 
-                    const effectiveView = colView || view;
-                    // add clickable badge in cell to open children
-                    const isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
+                if (displayed === false) return null;
 
-                    // the first non fixed column is the only one not fixed
-                    const unfixed = unfixedCol && fixedWidth !== true;
-                    unfixedCol = unfixedCol && fixedWidth !== true ? false : unfixedCol;
+                // the first column is sticky (except checkbox)
+                const first = index === 0;
 
-                    let lookedUp = false;
-                    if (this.props.lookupColumns && this.props.lookupColumns.includes(colId)) {
-                        lookedUp = true;
-                    }
+                // Static column settings
+                const _columns$colRefId = columns[colRefId],
+                      {
+                    colId,
+                    align,
+                    data: colData,
+                    ellipsis,
+                    fixedWidth,
+                    type,
+                    width
+                } = _columns$colRefId,
+                      columnProps = _objectWithoutProperties(_columns$colRefId, ['colId', 'align', 'data', 'ellipsis', 'fixedWidth', 'type', 'width']);
+
+                // view define in OrderColumn or table prop view by default
+                const effectiveView = colView || view;
 
-                    return React.createElement(BodyCellBuilder, _extends({}, other, {
-                        key: `${row.rowId}-${colId}-cell`,
-                        ukey: `${row.rowId}-${colId}-cell`,
-                        checkboxValue: row.rowId,
-                        type: type,
-                        datas: data,
-                        ellipsis: ellipsis,
-                        align: align,
-                        view: effectiveView,
-                        padding: cst.DEFAULT_PADDING[view],
-                        width: width,
-                        fixedWidth: !unfixed,
-                        sticky: sticky && first,
-                        selectable: selectable && first,
-                        dateLocale: dateLocale,
-                        numberLocale: numberLocale,
-                        dense: dense,
-                        selected: selected,
-                        onSelect: this.handleSelect,
-                        onOpenDetails: this.handleOpenRowDetails,
-                        childrenCount: isParentAnchor ? row.children.length : null,
-                        colId: colId,
-                        lookedUp: lookedUp
-                    }, columnProps, colRefProps));
+                // add clickable badge in cell to open children
+                const isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
+
+                // the first non fixed column is the only one not fixed
+                const unfixed = unfixedCol && fixedWidth !== true;
+                unfixedCol = unfixed ? false : unfixedCol;
+
+                // add lookedUp style
+                const lookedUp = Array.isArray(lookupColumns) && lookupColumns.includes(colId);
+
+                // Cell data
+                let data = row.datas[colRefId];
+                // Get object data for column based on reference datas
+                if (data !== undefined && colData !== undefined) {
+                    const colItem = colData.find(item => item.id === data.value);
+                    if (colItem) {
+                        // Hydrate data object with reference item
+                        data = _extends({}, colItem, data);
+                    }
                 }
-                return null;
+
+                return React.createElement(BodyCellBuilder, _extends({}, other, {
+                    key: `${row.rowId}-${colId}-cell`,
+                    ukey: `${row.rowId}-${colId}-cell`,
+                    checkboxValue: row.rowId,
+                    type: type,
+                    data: data,
+                    ellipsis: ellipsis,
+                    align: align,
+                    view: effectiveView,
+                    padding: cst.DEFAULT_PADDING[view],
+                    width: width,
+                    fixedWidth: !unfixed,
+                    sticky: sticky && first,
+                    selectable: selectable && first,
+                    dateLocale: dateLocale,
+                    numberLocale: numberLocale,
+                    dense: dense,
+                    selected: selected,
+                    onSelect: this.handleSelect
+                }, detailsInfos[colId] && {
+                    onOpenDetails: this.handleOpenRowDetails(detailsInfos[colId].type),
+                    detailInfos: detailsInfos[colId]
+                }, {
+                    childrenCount: isParentAnchor ? row.children.length : null,
+                    colId: colId,
+                    lookedUp: lookedUp
+                }, columnProps, colRefProps));
             }),
             React.createElement(TableCell, {
                 style: {
@@ -241,7 +275,9 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: []
+    lookupColumns: [],
+    fixedColumnWidth: true,
+    detailRowsOptions: {}
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -252,6 +288,15 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
+    /**
+     * Options utilisées pour décrire le comportement de lignes de détails
+     */
+    detailRowsOptions: PropTypes.object,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Applique le style d'une ligne intégrée a un sous-tableau
      */