@hipay/hipay-material-ui 1.0.0-beta.22 → 1.0.0-beta.25

package/es/HiSelectableList/HiSelectableList.js

@@ -51,59 +51,61 @@ class HiSelectableList extends React.PureComponent {
                 List,
                 { className: classes.root, onKeyDown: this.props.onKeyDown },
                 itemList.map(item => {
-                    /**
-                     * Calcul du level de l'item
-                     */
-                    if (hierarchic) {
-                        // On stocke l'id des parents dans un tableau
-                        if (item.parentId && !parents.includes(item.parentId)) {
-                            parents.push(item.parentId);
-                        } else if (item.parentId && parents.includes(item.parentId)) {
-                            // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
-                            // Et si le parentId n'est pas le dernier inseré
-                            if (item.parentId !== parents[parents.length - 1]) {
-                                // On est donc redescendu d'un niveau
-                                // donc on supprime le dernier parent
-                                parents.pop();
+                    if (item.displayed !== false) {
+                        /**
+                         * Calcul du level de l'item
+                         */
+                        if (hierarchic) {
+                            // On stocke l'id des parents dans un tableau
+                            if (item.parentId && !parents.includes(item.parentId)) {
+                                parents.push(item.parentId);
+                            } else if (item.parentId && parents.includes(item.parentId)) {
+                                // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
+                                // Et si le parentId n'est pas le dernier inseré
+                                if (item.parentId !== parents[parents.length - 1]) {
+                                    // On est donc redescendu d'un niveau
+                                    // donc on supprime le dernier parent
+                                    parents.pop();
+                                }
+                            } else if (!item.parentId && parents.length > 0) {
+                                // Si l'item n'a pas de parent et que le tableau des parent
+                                // n'est pas vide => on le réinitialise
+                                parents = [];
                             }
-                        } else if (!item.parentId && parents.length > 0) {
-                            // Si l'item n'a pas de parent et que le tableau des parent
-                            // n'est pas vide => on le réinitialise
-                            parents = [];
                         }
-                    }
 
-                    /**
-                     * L'élément est-il selectionné ?
-                     */
-                    let selected = false;
-                    if (item.id === '_all') {
-                        selected = allSelected;
-                    } else if (!item.hasChildren) {
-                        selected = selectedIdList.includes(item.id);
-                    } else if (hierarchic && parentItemSelectable) {
-                        selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
-                    }
+                        /**
+                         * L'élément est-il selectionné ?
+                         */
+                        let selected = false;
+                        if (item.id === '_all') {
+                            selected = allSelected;
+                        } else if (!item.hasChildren) {
+                            selected = selectedIdList.includes(item.id);
+                        } else if (hierarchic && parentItemSelectable) {
+                            selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
+                        }
 
-                    return React.createElement(HiSelectableListItem, _extends({
-                        key: item.id,
-                        item: item,
-                        selected: selected,
-                        indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
-                        onSelect: onSelect,
-                        hierarchySelected: hierarchySelected,
-                        parentItemSelectable: parentItemSelectable,
-                        nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
-                        hierarchic: hierarchic,
-                        translations: translations,
-                        icon: icon,
-                        parentIcon: parentIcon,
-                        hoverIcon: hoverIcon,
-                        checkedIcon: checkedIcon,
-                        checkbox: checkbox,
-                        level: parents.length,
-                        disabled: disabledIds ? disabledIds.includes(item.id) : false
-                    }, others));
+                        return React.createElement(HiSelectableListItem, _extends({
+                            key: item.id,
+                            item: item,
+                            selected: selected,
+                            indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
+                            onSelect: onSelect,
+                            hierarchySelected: hierarchySelected,
+                            parentItemSelectable: parentItemSelectable,
+                            nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
+                            hierarchic: hierarchic,
+                            translations: translations,
+                            icon: icon,
+                            parentIcon: parentIcon,
+                            hoverIcon: hoverIcon,
+                            checkedIcon: checkedIcon,
+                            checkbox: checkbox,
+                            level: parents.length,
+                            disabled: disabledIds ? disabledIds.includes(item.id) : false
+                        }, others));
+                    }
                 })
             )
         );

package/es/HiSelectableList/HiSelectableListItem.js

@@ -10,12 +10,15 @@ import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/hiHelpers';
 import HiIconBuilder from '../utils/HiIconBuilder';
 import HiColoredLabel from '../HiColoredLabel';
+import HiLoader from '../HiLoader';
 
 export const styles = theme => ({
     listItem: {
-        padding: `${9}px 0px`,
+        padding: '9px 0px',
         fontWeight: theme.typography.fontWeightRegular,
-        maxHeight: 40
+        maxHeight: 40,
+        display: 'flex',
+        alignItems: 'flex-start'
     },
     listItemTitle: {
         padding: `${9}px 0px`,
@@ -35,6 +38,13 @@ export const styles = theme => ({
         textAlign: 'center',
         width: '100%'
     },
+    loader: {
+        textAlign: 'center',
+        width: 1,
+        height: 22,
+        padding: '8px 0',
+        margin: 'auto'
+    },
     selected: {
         backgroundColor: theme.palette.selected
     },
@@ -182,6 +192,9 @@ class HiSelectableListItem extends React.Component {
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
                         this.getItemLabel(item)
                     );
+                case 'loader':
+                    return React.createElement(HiLoader, { loading: true, className: classes.loader, size: 8 });
+                    break;
                 case 'text':
                 default:
                     const itemTextClass = classNames(classes.listItemContent, {

package/es/HiTable/BodyCellBuilder.js

@@ -1,5 +1,6 @@
 import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ContextMenuTrigger } from 'react-contextmenu';
@@ -11,7 +12,7 @@ import { formatRate } from '../utils/hiHelpers';
 /**
  * Construit la cellule correspondante au type demandé
  */
-export default class BodyCellBuilder extends React.PureComponent {
+export default class BodyCellBuilder extends React.Component {
 
     constructor(props) {
         super(props);
@@ -19,6 +20,10 @@ export default class BodyCellBuilder extends React.PureComponent {
         this.collectContextMenuDatas = this.collectContextMenuDatas.bind(this);
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
+
     /**
      * CollecContextMenuDatas
      *
@@ -151,7 +156,8 @@ export default class BodyCellBuilder extends React.PureComponent {
                         locale: dateLocale,
                         view: view,
                         displayTime: props.displayTime,
-                        sticky: sticky
+                        sticky: sticky,
+                        formatShort: this.props.formatShort
                     });
                     break;
 

package/es/HiTable/BodyCells/CellAccount.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../Tooltip';
@@ -9,7 +10,11 @@ export const styles = theme => ({});
 /**
  * Cette cellule permet d'afficher le nom d'un compte sous la forme d'un label coloré.
  */
-class CellAccount extends React.PureComponent {
+class CellAccount extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { value, color } = this.props;
@@ -31,7 +36,7 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Couleur du compte
      */
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
     /**
      * Nom du compte
      */

package/es/HiTable/BodyCells/CellAccountNumber.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Circle } from 'mdi-material-ui';
@@ -44,7 +45,11 @@ export const styles = theme => ({
  * Cette cellule permet d'afficher un numéro de compte
  * Le tooltip affiche les informations complémentaires (country, expiration date..)
  */
-class CellAccountNumber extends React.PureComponent {
+class CellAccountNumber extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const {

package/es/HiTable/BodyCells/CellAddress.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 // @inheritedComponent CellLayout
 
 import React from 'react';
@@ -23,7 +24,11 @@ export const styles = theme => ({
  * - sinon on affiche la ville et le pays
  * - tous les champs définis sont affichés dans le tooltip
  */
-class CellAddress extends React.PureComponent {
+class CellAddress extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, streetAddress, name, city, postalCode, view, country, isoCountry } = this.props;

package/es/HiTable/BodyCells/CellCountry.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -44,7 +45,11 @@ export const styles = theme => ({
  * en vue small : Affiche la valeur courte (id),  tooltip = Image + Value
  *
  */
-class CellCountry extends React.PureComponent {
+class CellCountry extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { label, path, value, view } = this.props;

package/es/HiTable/BodyCells/CellDate.js

@@ -1,6 +1,8 @@
-import _extends from 'babel-runtime/helpers/extends';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
+import moment from 'moment';
+import 'moment/locale/fr';
 
 import withStyles from '../../styles/withStyles';
 import Tooltip from '../../Tooltip';
@@ -20,45 +22,28 @@ export const styles = theme => ({
  * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
  */
 class CellDate extends React.Component {
+    constructor(...args) {
+        var _temp;
+
+        return _temp = super(...args), this.formatLong = 'dddd DD MMMM YYYY HH:mm:ss', _temp;
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
-        const { classes, displayTime, value, locale, view } = this.props;
+        const { classes, displayTime, value, locale, view, formatShort } = this.props;
 
-        const date = new Date(value);
+        const date = moment(value);
+        moment.locale(locale);
 
-        let options = _extends({
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: '2-digit'
-        }, displayTime && {
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit'
-        });
-        const titleValue = date.toLocaleString(locale, options);
+        const titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace('HH:mm:ss', ''));
         let displayedValue = titleValue;
         if (view === cst.VIEWS.SMALL) {
-            options = _extends({
-                year: '2-digit',
-                month: '2-digit',
-                day: '2-digit'
-            }, displayTime && {
-                hour: '2-digit',
-                minute: '2-digit'
-            });
-            displayedValue = date.toLocaleString(locale, options);
+            displayedValue = displayTime ? date.format(formatShort.replace('YYYY', 'YY') + ' HH:mm:ss') : date.format(formatShort.replace('YYYY', 'YY'));
         } else if (view === cst.VIEWS.MEDIUM) {
-            options = _extends({
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit'
-            }, displayTime && {
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-            });
-            displayedValue = date.toLocaleString(locale, options);
+            displayedValue = displayTime ? date.format(formatShort + ' HH:mm:ss') : date.format(formatShort);
         }
 
         if (view === cst.VIEWS.LARGE) {
@@ -83,8 +68,9 @@ class CellDate extends React.Component {
 
 CellDate.defaultProps = {
     displayTime: false,
-    locale: 'en-EN',
-    view: 'l'
+    locale: 'en',
+    view: 'l',
+    formatShort: 'DD/MM/YYYY'
 };
 CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -96,11 +82,16 @@ CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     displayTime: PropTypes.bool,
     /**
-     * Locale BCP 47
+     * Format de la date en vue small (ex: DD/MM/YYYY)
+     * @see https://momentjs.com/docs/#/parsing/string-format/
+     */
+    formatShort: PropTypes.string.isRequired,
+    /**
+     * Locale moment
      */
     locale: PropTypes.string,
     /**
-     * Volume/Amount
+     * Date as string
      */
     value: PropTypes.string.isRequired,
     /**

package/es/HiTable/BodyCells/CellIcon.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../Tooltip';
@@ -26,7 +27,11 @@ export const styles = {
  * Cette cellule permet d'afficher une icône et un label (optionnel).
  * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
  */
-class CellIcon extends React.PureComponent {
+class CellIcon extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, icon, value, view, color } = this.props;

package/es/HiTable/BodyCells/CellImage.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../Tooltip';
@@ -45,7 +46,11 @@ export const styles = theme => ({
  * En vue large, aucun tooltip n'est affiché
  * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
  */
-class CellImage extends React.PureComponent {
+class CellImage extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, path, value, view, size } = this.props;

package/es/HiTable/BodyCells/CellNumeric.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -15,7 +16,11 @@ export const styles = theme => ({
 /**
  * Cette cellule permet d'afficher un volume ou un montant avec devise
  */
-class CellNumeric extends React.PureComponent {
+class CellNumeric extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, value, locale, currency, view, precision } = this.props;

package/es/HiTable/BodyCells/CellRate.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -45,7 +46,11 @@ export const styles = theme => ({
  * Cette cellule permet d'afficher un pourcentage
  * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
  */
-class CellRate extends React.PureComponent {
+class CellRate extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
 

package/es/HiTable/BodyCells/CellSentinel.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../Tooltip';
@@ -21,7 +22,11 @@ export const styles = {
 /**
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
  */
-class CellSentinel extends React.PureComponent {
+class CellSentinel extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     constructor(props) {
         super(props);

package/es/HiTable/BodyCells/CellStatus.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -18,7 +19,11 @@ export const styles = theme => ({
     }
 });
 
-class CellStatus extends React.PureComponent {
+class CellStatus extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, theme, nbOperations, value, code, onOpenDetails } = this.props;
@@ -68,7 +73,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Code du statut courant de la transaction (détermine la couleur du label)
      */
-    code: PropTypes.number.isRequired,
+    code: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     /**
      * Fonction de callback appelée pour ouvrir les lignes de détails
      */

package/es/HiTable/BodyCells/CellText.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -27,7 +28,11 @@ export const styles = theme => ({
     }
 });
 
-class CellText extends React.PureComponent {
+class CellText extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     constructor(props) {
         super(props);

package/es/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -1,3 +1,4 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 // @inheritedComponent CellLayout
 
 import React from 'react';
@@ -19,7 +20,11 @@ export const styles = {
 /**
  * Cette cellule permet d'afficher une icône représentant le statut du 3DS.
  */
-class CellThirdPartySecurity extends React.PureComponent {
+class CellThirdPartySecurity extends React.Component {
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
+    }
 
     render() {
         const { classes, theme, label, value } = this.props;

package/es/HiTable/BodyRow.js

@@ -1,5 +1,6 @@
 import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 
 // @inheritedComponent BodyCellBuilder
 import React from 'react';
@@ -8,7 +9,7 @@ import classNames from 'classnames';
 import { TableRow, TableCell } from 'material-ui/Table';
 import { fade } from 'material-ui/styles/colorManipulator';
 import BodyCellBuilder from './BodyCellBuilder';
-import { withStyles, withTheme } from '../styles';
+import { withStyles } from '../styles';
 import * as cst from './constants';
 
 export const styles = theme => ({
@@ -45,7 +46,7 @@ export const styles = theme => ({
     }
 });
 
-class BodyRow extends React.PureComponent {
+class BodyRow extends React.Component {
 
     constructor(props) {
         super();
@@ -67,6 +68,10 @@ class BodyRow extends React.PureComponent {
         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) {

package/es/HiTable/ColumnFilter.js

@@ -30,9 +30,6 @@ 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,
@@ -73,7 +70,7 @@ export const styles = theme => ({
         fontSize: 14
     },
     button: {
-        height: 40,
+        minHeight: 40,
         fontSize: 14,
         width: '50%'
     },
@@ -200,7 +197,7 @@ class ColumnFilter extends React.Component {
             ),
             !!sortable && React.createElement(
                 'div',
-                { className: classes.menuItemSortable },
+                null,
                 React.createElement(
                     MenuItem,
                     {