@hipay/hipay-material-ui 1.0.0-beta.23 → 1.0.0-beta.26

package/es/HiSelect/SelectInput.js

@@ -14,7 +14,8 @@ export const styles = theme => ({
         width: '100%',
         height: 40,
         maxWidth: 500,
-        justifyContent: 'flex-start',
+        display: 'flex',
+        justifyContent: 'center',
         padding: 8,
         cursor: 'pointer'
     },
@@ -89,18 +90,12 @@ export const styles = theme => ({
     label: _extends({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        paddingRight: 16
+        textOverflow: 'ellipsis'
     }, theme.typography.body1, {
         display: 'inline-flex',
         width: '100%'
     }),
     icon: {
-        position: 'absolute',
-        display: 'flex',
-        alignItems: 'center',
-        right: 0,
-        height: 40,
         transition: theme.transitions.create(['opacity', 'transform'], {
             duration: theme.transitions.duration.shorter
         })

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: item.level ? item.level : parents.length,
+                            disabled: disabledIds ? disabledIds.includes(item.id) : false
+                        }, others));
+                    }
                 })
             )
         );

package/es/HiSelectableList/HiSelectableListItem.js

@@ -14,9 +14,11 @@ 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`,
@@ -311,7 +313,7 @@ class HiSelectableListItem extends React.Component {
 
         if (leftPadding) {
             paddingLeft = leftPadding;
-        } else if (!hierarchic) {
+        } else if (!hierarchic && level === 0) {
             // Si pas de hiérarchie et sans checkbox, padding de 8px
             if (!effectiveCheckbox) {
                 paddingLeft = 8;
@@ -328,9 +330,9 @@ class HiSelectableListItem extends React.Component {
                 }
             } else if (level > 0) {
                 if (effectiveCheckbox) {
-                    paddingLeft = 16 * (level - 1);
-                } else {
                     paddingLeft = 16 * level;
+                } else {
+                    paddingLeft = 16 * (level + 1);
                 }
             } else if (!effectiveCheckbox) {
                 if (item.id === '_all') {

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;
 
@@ -235,10 +241,11 @@ export default class BodyCellBuilder extends React.PureComponent {
                 default:
                     cellElement = React.createElement(CellText, {
                         ukey: ukey,
-                        value: data.value,
+                        value: data.label ? data.label : data.value,
                         ellipsis: ellipsis,
                         view: view,
-                        sticky: sticky
+                        sticky: sticky,
+                        color: data.color
                     });
                     break;
             }

package/es/HiTable/BodyCells/CellAccount.js

@@ -1,15 +1,17 @@
+import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../Tooltip';
 import HiColoredLabel from '../../HiColoredLabel';
-import withStyles from '../../styles/withStyles';
-
-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;
@@ -37,4 +39,4 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: PropTypes.string.isRequired
 } : {};
-export default withStyles(styles, { name: 'HmuiCellAccount' })(CellAccount);
+export default CellAccount;

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,12 +1,13 @@
-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';
 import * as cst from '../constants';
 
-export const styles = theme => ({
+export const styles = {
     rightEllipsisSpan: {
         display: 'inline-block',
         overflow: 'hidden',
@@ -14,51 +15,34 @@ export const styles = theme => ({
         whiteSpace: 'pre',
         width: '100%'
     }
-});
+};
 
 /**
  * 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);
+        date.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 +67,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 +81,21 @@ 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
+     * True si la colonne est la première colonne et
+     * doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: PropTypes.bool,
+    /**
+     * 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;