@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.3

package/es/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -1,31 +1,27 @@
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 // @inheritedComponent CellLayout
+
 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 { withStyles } from '../../styles';
 
-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.
  */
-class CellThirdPartySecurity extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+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; //
@@ -34,42 +30,33 @@ class CellThirdPartySecurity extends React.Component {
         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;
         }
 
         return React.createElement(
-            'div',
-            null,
-            icon
+            Tooltip,
+            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'div',
+                null,
+                icon
+            )
         );
     }
 }
@@ -79,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
@@ -101,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);

package/es/HiTable/BodyCells/index.js

@@ -1,6 +1,8 @@
 //flow
+
 export { default as CellThirdPartySecurity } from './CellThirdPartySecurity';
 export { default as CellAccount } from './CellAccount';
+export { default as CellAccountNumber } from './CellAccountNumber';
 export { default as CellAddress } from './CellAddress';
 export { default as CellDate } from './CellDate';
 export { default as CellIcon } from './CellIcon';

package/es/HiTable/BodyRow.js

@@ -1,6 +1,5 @@
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 
 // @inheritedComponent BodyCellBuilder
 import React from 'react';
@@ -9,15 +8,12 @@ import classNames from 'classnames';
 import { TableRow, TableCell } from 'material-ui/Table';
 import { fade } from 'material-ui/styles/colorManipulator';
 import BodyCellBuilder from './BodyCellBuilder';
-import { withStyles } from '../styles';
+import { withStyles, withTheme } from '../styles';
 import * as cst from './constants';
 
 export const styles = theme => ({
-    root: {
-        backgroundColor: theme.palette.background3
-    },
     rootSelected: {
-        backgroundColor: theme.palette.background1
+        backgroundColor: theme.palette.background3
     },
     hover: {
         '&:hover': {
@@ -49,21 +45,17 @@ export const styles = theme => ({
     }
 });
 
-class BodyRow extends React.Component {
+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: _extends({}, props.live && {
-                backgroundColor: fade(props.theme.palette.business.primary.normal, 0.08),
-                transition: 'background-color 2s'
-            })
+            style: {
+                backgroundColor: props.live ? fade(props.theme.palette.business.primary.normal, 0.08) : props.theme.palette.background3,
+                transition: props.live ? 'background-color 2s' : 'none'
+            }
         };
 
         this.handleClick = this.handleClick.bind(this);
@@ -71,16 +63,15 @@ class BodyRow extends React.Component {
         this.handleSelect = this.handleSelect.bind(this);
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
-
     componentDidMount() {
         // Live data animation
         if (this.state.live) {
             this.setState({
                 live: false,
-                style: {}
+                style: {
+                    backgroundColor: this.props.theme.palette.background3,
+                    transition: 'background-color 2s'
+                }
             });
         }
     }
@@ -90,7 +81,10 @@ class BodyRow extends React.Component {
         if (prevState.live === true && this.state.live === false) {
             setTimeout(() => {
                 this.setState({
-                    style: {}
+                    style: {
+                        backgroundColor: this.props.theme.palette.background3,
+                        transition: 'none'
+                    }
                 });
             }, 2500);
         }
@@ -103,6 +97,10 @@ class BodyRow extends React.Component {
         }
     }
 
+    handleOpenRowDetails() {
+        this.props.onOpenRowDetails(this.props.row.rowId);
+    }
+
     handleSelect() {
         this.props.onSelect(this.props.row);
     }
@@ -114,7 +112,6 @@ class BodyRow extends React.Component {
             theme,
             row,
             columns,
-            lookupColumns,
             orderedColumns,
             selectable,
             selected,
@@ -125,13 +122,13 @@ class BodyRow extends React.Component {
             numberLocale,
             sticky,
             innerRow,
-            isDetail,
-            detailRowsOptions
+            isDetail
         } = _props,
-              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail', 'detailRowsOptions']);
+              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', '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, {
@@ -146,23 +143,9 @@ class BodyRow extends React.Component {
         // 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,
             {
-                className: classes.root,
                 classes: { selected: classes.rootSelected, hover: classes.hover },
                 onClick: this.handleClick,
                 hover: true,
@@ -177,85 +160,65 @@ class BodyRow extends React.Component {
                 key: `${row.rowId}-left-cell`,
                 className: patchDivClass
             }),
-            orderedColumns.map((colRef, index) => {
-
-                // Dynamic column settings (from OrderColumns)
-                const {
-                    colId: colRefId,
-                    displayed,
-                    view: colView
-                } = colRef,
+            orderedColumns.map(colRef => {
+                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];
 
-                if (displayed === false) return null;
-
-                // the first column is sticky (except checkbox)
-                const first = index === 0;
-
-                // 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;
+                    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;
+                    // the first non fixed column is the only one not fixed
+                    const unfixed = unfixedCol && fixedWidth !== true;
+                    unfixedCol = unfixedCol && fixedWidth !== true ? 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);
+                    let lookedUp = false;
+                    if (this.props.lookupColumns && this.props.lookupColumns.includes(colId)) {
+                        lookedUp = true;
                     }
-                }
 
-                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));
+                    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));
+                }
+                return null;
             }),
             React.createElement(TableCell, {
                 style: {
@@ -278,9 +241,7 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: [],
-    fixedColumnWidth: true,
-    detailRowsOptions: {}
+    lookupColumns: []
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -291,15 +252,6 @@ 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
      */

package/es/HiTable/ChildRow.js

@@ -112,9 +112,9 @@ class ChildRow extends React.PureComponent {
             parentIndicatorColumn, parentLabel, parentLabelIcon,
             children, columns, orderedColumns,
             selectable, selected,
-            dateLocale, dense, sticky, view, row
+            dateLocale, dense, sticky, view
         } = _props,
-              other = _objectWithoutProperties(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view', 'row']);
+              other = _objectWithoutProperties(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view']);
 
         let indicator = '';
         if (parentIndicatorColumn && columns.hasOwnProperty(parentIndicatorColumn)) {
@@ -141,7 +141,10 @@ class ChildRow extends React.PureComponent {
                 TableBody,
                 null,
                 React.createElement(BodyRow, _extends({
-                    row: row,
+                    row: {
+                        rowId: parentRowId,
+                        datas: parentRowDatas
+                    },
                     selectable: selectable,
                     selected: selected,
                     columns: columns,
@@ -274,6 +277,10 @@ ChildRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Données de la ligne parente
      */
     parentRowDatas: PropTypes.object.isRequired,
+    /**
+     * Ligne des détails de la ligne parente
+     */
+    parentDetailRows: PropTypes.array,
     /**
      * Indicateur du sous-ensemble (en général la date)
      */

package/es/HiTable/ColumnFilter.js

@@ -1,4 +1,3 @@
-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';
@@ -30,6 +29,9 @@ export const styles = theme => ({
         padding: 10,
         color: theme.palette.neutral.normal
     },
+    menuItemSortable: {
+        paddingLeft: 8
+    },
     menuItemFilter: _extends({}, theme.typography.body1, {
         color: theme.palette.neutral.dark,
         fontWeight: theme.typography.fontWeightMedium,
@@ -70,7 +72,7 @@ export const styles = theme => ({
         fontSize: 14
     },
     button: {
-        minHeight: 40,
+        height: 40,
         fontSize: 14,
         width: '50%'
     },
@@ -140,20 +142,20 @@ class ColumnFilter extends React.Component {
      * Sélectionne tous les items filtrés
      */
     selectAllFilters() {
-        this.setState(prevState => ({
-            selectedIdList: [...new _Set([...prevState.selectedIdList, ...prevState.suggestions.map(item => item.id)])]
-        }));
+        this.setState({ selectedIdList: this.state.suggestions.map(item => item.id) });
     }
 
     /**
      * Désélectionne tous les items filtrés
      */
     deselectAllFilters() {
-        this.setState(prevState => {
-            return {
-                selectedIdList: prevState.selectedIdList.filter(item => prevState.suggestions.find(suggestion => suggestion.id === item) === undefined)
-            };
+        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({ selectedIdList });
     }
 
     handleSort(direction) {
@@ -197,7 +199,7 @@ class ColumnFilter extends React.Component {
             ),
             !!sortable && React.createElement(
                 'div',
-                null,
+                { className: classes.menuItemSortable },
                 React.createElement(
                     MenuItem,
                     {
@@ -251,11 +253,7 @@ class ColumnFilter extends React.Component {
             React.createElement(
                 'div',
                 { className: classes.menuItemFilter },
-                React.createElement(
-                    'span',
-                    { style: { marginRight: 4 } },
-                    translations.filter
-                ),
+                translations.filter,
                 React.createElement(
                     HiPins,
                     {
@@ -299,8 +297,7 @@ class ColumnFilter extends React.Component {
                 itemList: suggestions,
                 selectedIdList: selectedIdList,
                 onSelect: this.toggleSelectItem,
-                leftPadding: 28,
-                checkbox: type !== 'icon'
+                leftPadding: 28
             }),
             React.createElement(
                 'div',