@hipay/hipay-material-ui 1.0.0-beta.1 → 1.0.0-beta.11

package/es/HiTable/BodyCells/CellCountry.js

@@ -47,41 +47,12 @@ export const styles = theme => ({
 class CellCountry extends React.PureComponent {
 
     render() {
-        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
-            )
-        );
+        const { label, path, value, view } = this.props;
 
         if (view === cst.VIEWS.LARGE) {
-            return React.createElement(CellImage, { view: cst.VIEWS.LARGE, value: value, path: path });
+            return React.createElement(CellImage, { value: label ? label : value, path: path, view: view });
         } else {
-            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
-                    )
-                )
-            );
+            return React.createElement(CellImage, { value: value, path: path, view: view });
         }
     }
 }
@@ -94,11 +65,15 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label
      */
-    value: PropTypes.string.isRequired,
+    label: PropTypes.string,
     /**
-     * Code ISO
+     * Flag's image path
      */
-    isoCode: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    /**
+     * Value - code isoa2 (uppercase)
+     */
+    value: PropTypes.string.isRequired,
     /**
      * View (L/M/S)
      */

package/es/HiTable/BodyCells/CellIcon.js

@@ -29,7 +29,7 @@ class CellIcon extends React.PureComponent {
     render() {
         const { classes, icon, value, view } = this.props;
 
-        const iconElement = React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 18 });
+        const iconElement = icon !== '' ? React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 18 }) : '';
 
         const tooltipContent = React.createElement(
             'div',
@@ -60,6 +60,7 @@ class CellIcon extends React.PureComponent {
 }
 
 CellIcon.defaultProps = {
+    icon: '',
     view: 'l'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -69,8 +70,9 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     classes: PropTypes.object,
     /**
      * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     * used by HiIconBuilder
      */
-    icon: PropTypes.string.isRequired,
+    icon: PropTypes.string,
     /**
      * Label
      */

package/es/HiTable/BodyCells/CellImage.js

@@ -63,17 +63,29 @@ class CellImage extends React.PureComponent {
         );
 
         let innerCellElement = null;
-        if (view === cst.VIEWS.SMALL) {
-            innerCellElement = React.createElement(
-                'div',
-                { className: classes.center },
-                React.createElement('img', { src: path, alt: value, className: classes.smallImg })
-            );
+        if (path) {
+            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 },
+                        value
+                    )
+                );
+            }
         } 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 },
@@ -83,6 +95,7 @@ class CellImage extends React.PureComponent {
         }
 
         if (view === cst.VIEWS.LARGE) {
+            // Don't add tooltip for large view
             return innerCellElement;
         } else {
             return React.createElement(
@@ -102,11 +115,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Image path
      */
-    path: PropTypes.string.isRequired,
+    path: PropTypes.string,
     /**
-     * Label
+     * Value
      */
-    value: PropTypes.string,
+    value: PropTypes.string.isRequired,
     /**
      * View (L/M/S)
      */

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

@@ -21,7 +21,7 @@ export const styles = theme => ({
 class CellSentinel extends React.PureComponent {
 
     constructor(props) {
-        super();
+        super(props);
 
         this.getColorFromFraudResult = this.getColorFromFraudResult.bind(this);
     }
@@ -66,7 +66,8 @@ class CellSentinel extends React.PureComponent {
             fraudResult,
             automaticFraudReviewResult,
             pendingManualAction,
-            smartDecision
+            smartDecision,
+            hideFraudResult
         } = this.props;
 
         const scoreLabel = score > 0 ? `+${score}` : `${score}`;
@@ -97,14 +98,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 +125,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 +141,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 })
@@ -60,7 +64,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * 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

@@ -20,8 +20,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,7 +29,7 @@ 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 } });
                 break;
@@ -51,7 +50,7 @@ class CellThirdPartySecurity extends React.PureComponent {
 
         return React.createElement(
             Tooltip,
-            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+            { title: label, placement: this.props.sticky ? 'right' : 'bottom' },
             React.createElement(
                 'div',
                 null,
@@ -80,10 +79,10 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    code: PropTypes.number,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     /**
      * Label
      */
-    value: PropTypes.string
+    label: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);

package/es/HiTable/BodyRow.js

@@ -112,6 +112,7 @@ class BodyRow extends React.PureComponent {
             theme,
             row,
             columns,
+            lookupColumns,
             orderedColumns,
             selectable,
             selected,
@@ -124,11 +125,10 @@ class BodyRow extends React.PureComponent {
             innerRow,
             isDetail
         } = _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']);
 
         const { style } = this.state;
 
-        let firstCol = true;
         let unfixedCol = true;
 
         const rowStyle = _extends({}, style, {
@@ -160,65 +160,82 @@ 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;
+
+                // 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;
 
-                    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 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,
+                    onOpenDetails: this.handleOpenRowDetails,
+                    childrenCount: isParentAnchor ? row.children.length : null,
+                    colId: colId,
+                    lookedUp: lookedUp
+                }, columnProps, colRefProps));
             }),
             React.createElement(TableCell, {
                 style: {
@@ -241,7 +258,8 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: []
+    lookupColumns: [],
+    fixedColumnWidth: true
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -252,6 +270,11 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
+    /**
+     * 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
      */

package/es/HiTable/ColumnFilter.js

@@ -1,3 +1,4 @@
+import _Set from 'babel-runtime/core-js/set';
 import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import Popover from 'material-ui/Popover';
@@ -142,20 +143,20 @@ class ColumnFilter extends React.Component {
      * Sélectionne tous les items filtrés
      */
     selectAllFilters() {
-        this.setState({ selectedIdList: this.state.suggestions.map(item => item.id) });
+        this.setState(prevState => ({
+            selectedIdList: [...new _Set([...prevState.selectedIdList, ...prevState.suggestions.map(item => item.id)])]
+        }));
     }
 
     /**
      * Désélectionne tous les items filtrés
      */
     deselectAllFilters() {
-        const selectedIdList = this.state.selectedIdList;
-        this.state.suggestions.map(item => {
-            if (this.state.selectedIdList.includes(item.id)) {
-                selectedIdList.splice(this.state.selectedIdList.indexOf(item.id), 1);
-            }
+        this.setState(prevState => {
+            return {
+                selectedIdList: prevState.selectedIdList.filter(item => prevState.suggestions.find(suggestion => suggestion.id === item) === undefined)
+            };
         });
-        this.setState({ selectedIdList });
     }
 
     handleSort(direction) {
@@ -253,7 +254,11 @@ class ColumnFilter extends React.Component {
             React.createElement(
                 'div',
                 { className: classes.menuItemFilter },
-                translations.filter,
+                React.createElement(
+                    'span',
+                    { style: { marginRight: 4 } },
+                    translations.filter
+                ),
                 React.createElement(
                     HiPins,
                     {
@@ -297,7 +302,8 @@ class ColumnFilter extends React.Component {
                 itemList: suggestions,
                 selectedIdList: selectedIdList,
                 onSelect: this.toggleSelectItem,
-                leftPadding: 28
+                leftPadding: 28,
+                checkbox: type !== 'icon'
             }),
             React.createElement(
                 'div',