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

package/HiDatePicker/HiDateRangeSelector.js

@@ -100,13 +100,13 @@ function buildDateRangeOptionByKey(key, t, format) {
             label = t.current_week;
             from = (0, _moment2.default)().startOf('week');
             to = (0, _moment2.default)();
-            info = t.week + ' ' + from.format('w') + ', \n ' + from.format(format) + ' ' + t.to_now;
+            info = '' + t.short_week + from.format('w') + ', \n ' + from.format(format) + ' ' + t.to_now;
             break;
         case 'pw':
             label = t.previous_week;
             from = (0, _moment2.default)().subtract(1, 'week').startOf('week');
             to = (0, _moment2.default)().subtract(1, 'week').endOf('week');
-            info = t.week + ' ' + from.format('w') + ', ' + from.format(format) + ' ' + t.to + ' ' + to.format(format);
+            info = '' + t.short_week + from.format('w') + ', ' + from.format(format) + ' ' + t.to + ' ' + to.format(format);
             break;
         case 'cm':
             label = t.current_month;
@@ -308,6 +308,16 @@ var HiDateRangeSelector = function (_React$Component) {
                 )
             );
         }
+    }], [{
+        key: 'getDerivedStateFromProps',
+        value: function getDerivedStateFromProps(props, state) {
+            if (props.defaultPreset && props.returnSelectValue) {
+                return {
+                    selectedPreset: props.defaultPreset
+                };
+            }
+            return null;
+        }
     }]);
     return HiDateRangeSelector;
 }(_react2.default.Component);
@@ -327,6 +337,7 @@ HiDateRangeSelector.defaultProps = {
         month: 'Month',
         quarter: 'Quarter',
         week: 'Week',
+        short_week: 'W',
         year: 'Year',
         days: 'days',
         custom_period: 'Custom Period',
@@ -378,7 +389,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: _propTypes2.default.instanceOf(Date),
+    from: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
     /**
      * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
      */
@@ -426,7 +437,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de fin sélectionnée
      */
-    to: _propTypes2.default.instanceOf(Date),
+    to: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
     /**
      * Traductions
      */

package/HiDatePicker/Overlays/Overlay.js

@@ -113,7 +113,7 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
      * ReactDayPicker prop
      * The currently selected day or selected days
      */
-    selectedDay: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array]),
+    selectedDay: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array, _propTypes2.default.string]),
     /**
      * Définit comment construire le Paper dans le cas d'un double input
      */

package/HiDatePicker/stylesheet.js

@@ -34,6 +34,9 @@ exports.default = function (theme) {
         absolute: {
             position: 'absolute'
         },
+        right4: {
+            right: 4
+        },
         dayPickerMargin: {
             top: -337,
             width: 'calc(100% - 4px)'

package/HiForm/HiInput.js

@@ -219,6 +219,7 @@ var HiInput = function (_React$PureComponent) {
             if (this.props.onReset) {
                 this.props.onReset();
             }
+            this.inputElement.focus();
         }
     }, {
         key: 'handleBlur',
@@ -307,7 +308,8 @@ var HiInput = function (_React$PureComponent) {
                 rows = _props.rows,
                 inputClassName = _props.inputClassName,
                 onReset = _props.onReset,
-                theme = _props.theme;
+                theme = _props.theme,
+                startAdornmentColor = _props.startAdornmentColor;
             var focused = this.state.focused;
 
 
@@ -322,13 +324,17 @@ var HiInput = function (_React$PureComponent) {
             });
 
             var leftIcon = void 0;
+            var startAdornmentStyle = { padding: 8 };
+            if (startAdornmentColor) {
+                startAdornmentStyle.color = startAdornmentColor;
+            }
             if (startAdornment) {
                 var _classNames2;
 
                 leftIcon = _react2.default.createElement(_HiIconBuilder2.default, {
                     icon: startAdornment,
                     size: 36,
-                    style: { padding: '8px' },
+                    style: startAdornmentStyle,
                     onClick: this.props.onLeftIconClick,
                     className: (0, _classnames2.default)(classes.startAdornment, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.startAdornmentFocus, focused), (0, _defineProperty3.default)(_classNames2, classes.startAdornmentDisabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.iconPointer, this.props.onLeftIconClick), _classNames2))
                 });
@@ -521,6 +527,10 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icône à afficher à gauche de l'input
      */
     startAdornment: _propTypes2.default.string,
+    /**
+     * Couleur de l'icône à afficher à gauche de l'input
+     */
+    startAdornmentColor: _propTypes2.default.string,
     /**
      * @ignore
      */

package/HiForm/HiPasswordField.js

@@ -63,9 +63,9 @@ var styles = exports.styles = function styles(theme) {
     return {
         inputPassword: {
             fontWeight: 'bolder',
-            fontFamily: 'Verdana, sans-serif',
+            fontFamily: 'inherit',
             letterSpacing: '4px',
-            fontSize: 25
+            fontSize: '1.6rem'
         }
     };
 };
@@ -114,7 +114,12 @@ var HiPasswordField = function (_React$Component) {
             return _react2.default.createElement(_HiTextField2.default, (0, _extends3.default)({}, otherProps, {
                 type: type,
                 onRightIconClick: this.handlePasswordToggle,
-                HiInputProps: (0, _extends3.default)({}, HiInputProps, { endAdornment: endAdornment, placeholder: '', inputClassName: inputClassName })
+                HiInputProps: (0, _extends3.default)({}, HiInputProps, {
+                    endAdornment: endAdornment,
+                    placeholder: '',
+                    inputClassName: inputClassName,
+                    autocomplete: 'on'
+                })
             }));
         }
     }]);

package/HiLoader/HiLoader.js

@@ -26,16 +26,19 @@ var styles = exports.styles = function styles() {
 };
 
 function HiLoader(props) {
-    var theme = props.theme,
-        loading = props.loading;
+    var className = props.className,
+        theme = props.theme,
+        loading = props.loading,
+        _props$size = props.size,
+        size = _props$size === undefined ? 12 : _props$size;
 
 
     return _react2.default.createElement(
         'div',
-        { id: 'hi-loader' },
+        { id: 'hi-loader', className: className },
         _react2.default.createElement(_reactSpinners.PropagateLoader, {
             loading: loading,
-            size: 12,
+            size: size,
             color: theme.palette.business.primary.normal
         })
     );

package/HiPins/HiPins.js

@@ -37,7 +37,7 @@ var styles = exports.styles = function styles(theme) {
             display: 'inline-block',
             padding: '0 9px',
             height: 16,
-            lineHeight: '16px',
+            lineHeight: '18px',
             minWidth: 25,
             textAlign: 'center',
             borderRadius: '45px',
@@ -64,13 +64,15 @@ var styles = exports.styles = function styles(theme) {
 
 function HiPins(props) {
     var classes = props.classes,
+        theme = props.theme,
         children = props.children,
-        color = props.color,
+        _props$color = props.color,
+        color = _props$color === undefined ? props.theme.palette.business.primary.normal : _props$color,
         onClick = props.onClick,
         className = props.className;
 
 
-    var textColor = (0, _colorManipulator.getContrastedTextColor)(color, props.theme.palette.neutral.dark, '#FFF');
+    var textColor = (0, _colorManipulator.getContrastedTextColor)(color, theme.palette.neutral.dark, '#FFF');
 
     var divProps = {
         style: { backgroundColor: color, color: textColor }
@@ -92,7 +94,7 @@ HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
     children: _propTypes2.default.node.isRequired,
     classes: _propTypes2.default.object.isRequired,
     className: _propTypes2.default.string,
-    color: _propTypes2.default.string.isRequired,
+    color: _propTypes2.default.string,
     onClick: _propTypes2.default.func
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);

package/HiSelect/HiSelect.js

@@ -297,6 +297,7 @@ var HiSelect = function (_React$PureComponent) {
                 classes = _props.classes,
                 disabled = _props.disabled,
                 error = _props.error,
+                loading = _props.loading,
                 options = _props.options,
                 checkbox = _props.checkbox,
                 searchable = _props.searchable,
@@ -313,26 +314,41 @@ var HiSelect = function (_React$PureComponent) {
                 id = _props.id,
                 placeholder = _props.placeholder,
                 staticPosition = _props.staticPosition,
-                pinnedItem = _props.pinnedItem;
+                pinnedItem = _props.pinnedItem,
+                hasAll = _props.hasAll;
             var _state = this.state,
                 open = _state.open,
                 suggestions = _state.suggestions,
-                focused = _state.focused;
+                focused = _state.focused,
+                dynamic = _state.dynamic;
 
 
             var display = '';
             var selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
             var _suggestions = [].concat((0, _toConsumableArray3.default)(suggestions));
+
             if (pinnedItem) {
-                _suggestions = [pinnedItem].concat((0, _toConsumableArray3.default)(suggestions));
+                _suggestions.unshift(pinnedItem);
+            }
+
+            // If loading
+            if (loading) {
+                _suggestions.unshift({
+                    id: '_loading',
+                    type: 'loader',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: 'loading'
+                });
             }
 
-            if (this.state.dynamic && selectedIdList.length === 1) {
+            if ((dynamic || loading) && selectedIdList.length === 1) {
                 display = translations.one_item_selected.replace('%s', selectedIdList.length);
-            } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
+            } else if ((this.state.nbOptions !== selectedIdList.length || !hasAll) && selectedIdList.length > 1) {
                 display = translations.n_items_selected.replace('%s', selectedIdList.length);
-            } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions >= 1) {
+            } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
                 display = translations.all;
             } else if (selectedIdList.length === 1) {
                 if (type !== 'icon') {
@@ -832,6 +848,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id du select
      */
     id: _propTypes2.default.string,
+    /**
+     * Ajoute un loader
+     */
+    loading: _propTypes2.default.bool,
     /**
      * Autorise la sélection de plusieurs valeurs
      */

package/HiSelect/HiSuggestSelect.js

@@ -210,6 +210,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
                     label: showNoResults ? translations.no_result_match : translations.min_length
                 }];
             }
+
             var open = !!optionsShown.length && focused;
 
             return _react2.default.createElement(
@@ -274,7 +275,7 @@ HiSuggestSelect.defaultProps = {
     showMinLength: false,
     showNoResults: false,
     translations: {
-        no_result_match: 'No result match',
+        no_result_match: 'Aucun résultat correspondant',
         min_length: 'Veuillez saisir 3 caractères minimum'
     },
     options: []

package/HiSelect/SelectInput.js

@@ -67,7 +67,8 @@ var styles = exports.styles = function styles(theme) {
             width: '100%',
             height: 40,
             maxWidth: 500,
-            justifyContent: 'flex-start',
+            display: 'flex',
+            justifyContent: 'center',
             padding: 8,
             cursor: 'pointer'
         },
@@ -142,18 +143,12 @@ var styles = exports.styles = function styles(theme) {
         label: (0, _extends3.default)({
             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/HiSelectableList/HiSelectableList.js

@@ -112,59 +112,61 @@ var HiSelectableList = function (_React$PureComponent) {
                     _List2.default,
                     { className: classes.root, onKeyDown: this.props.onKeyDown },
                     itemList.map(function (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é ?
-                         */
-                        var 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é ?
+                             */
+                            var 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 _react2.default.createElement(_HiSelectableListItem2.default, (0, _extends3.default)({
-                            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 _react2.default.createElement(_HiSelectableListItem2.default, (0, _extends3.default)({
+                                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/HiSelectableList/HiSelectableListItem.js

@@ -73,14 +73,20 @@ var _HiColoredLabel = require('../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
 
+var _HiLoader = require('../HiLoader');
+
+var _HiLoader2 = _interopRequireDefault(_HiLoader);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
     return {
         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',
@@ -100,6 +106,13 @@ var styles = exports.styles = function styles(theme) {
             textAlign: 'center',
             width: '100%'
         },
+        loader: {
+            textAlign: 'center',
+            width: 1,
+            height: 22,
+            padding: '8px 0',
+            margin: 'auto'
+        },
         selected: {
             backgroundColor: theme.palette.selected
         },
@@ -259,6 +272,9 @@ var HiSelectableListItem = function (_React$Component) {
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
                         _this.getItemLabel(item)
                     );
+                case 'loader':
+                    return _react2.default.createElement(_HiLoader2.default, { loading: true, className: classes.loader, size: 8 });
+                    break;
                 case 'text':
                 default:
                     var itemTextClass = (0, _classnames2.default)(classes.listItemContent, (0, _defineProperty3.default)({}, classes.centered, item.centered));

package/HiTable/BodyCellBuilder.js

@@ -12,6 +12,10 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -57,8 +61,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * Construit la cellule correspondante au type demandé
  */
-var BodyCellBuilder = function (_React$PureComponent) {
-    (0, _inherits3.default)(BodyCellBuilder, _React$PureComponent);
+var BodyCellBuilder = function (_React$Component) {
+    (0, _inherits3.default)(BodyCellBuilder, _React$Component);
 
     function BodyCellBuilder(props) {
         (0, _classCallCheck3.default)(this, BodyCellBuilder);
@@ -69,16 +73,21 @@ var BodyCellBuilder = function (_React$PureComponent) {
         return _this;
     }
 
-    /**
-     * CollecContextMenuDatas
-     *
-     * définit les données utilisées par le context menu (lookup, exclude, copy, redirect)
-     * - value : valeur sur laquelle on filtre
-     * - label : label de la value (traduite)
-     */
+    (0, _createClass3.default)(BodyCellBuilder, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
 
+        /**
+         * CollecContextMenuDatas
+         *
+         * définit les données utilisées par le context menu (lookup, exclude, copy, redirect)
+         * - value : valeur sur laquelle on filtre
+         * - label : label de la value (traduite)
+         */
 
-    (0, _createClass3.default)(BodyCellBuilder, [{
+    }, {
         key: 'collectContextMenuDatas',
         value: function collectContextMenuDatas() {
             var _props$data = this.props.data,
@@ -205,7 +214,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
                             locale: dateLocale,
                             view: view,
                             displayTime: props.displayTime,
-                            sticky: sticky
+                            sticky: sticky,
+                            formatShort: this.props.formatShort
                         });
                         break;
 
@@ -315,7 +325,7 @@ var BodyCellBuilder = function (_React$PureComponent) {
         }
     }]);
     return BodyCellBuilder;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 BodyCellBuilder.defaultProps = {
     ellipsis: 'right',

package/HiTable/BodyCells/CellAccount.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -56,8 +60,8 @@ var styles = exports.styles = function styles(theme) {
  */
 
 
-var CellAccount = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellAccount, _React$PureComponent);
+var CellAccount = function (_React$Component) {
+    (0, _inherits3.default)(CellAccount, _React$Component);
 
     function CellAccount() {
         (0, _classCallCheck3.default)(this, CellAccount);
@@ -65,6 +69,11 @@ var CellAccount = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellAccount, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,
@@ -80,7 +89,7 @@ var CellAccount = function (_React$PureComponent) {
         }
     }]);
     return CellAccount;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellAccount.defaultProps = {};
 CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -91,7 +100,7 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Couleur du compte
      */
-    color: _propTypes2.default.string.isRequired,
+    color: _propTypes2.default.string,
     /**
      * Nom du compte
      */

package/HiTable/BodyCells/CellAccountNumber.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -86,8 +90,8 @@ var styles = exports.styles = function styles(theme) {
  * Le tooltip affiche les informations complémentaires (country, expiration date..)
  */
 
-var CellAccountNumber = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellAccountNumber, _React$PureComponent);
+var CellAccountNumber = function (_React$Component) {
+    (0, _inherits3.default)(CellAccountNumber, _React$Component);
 
     function CellAccountNumber() {
         (0, _classCallCheck3.default)(this, CellAccountNumber);
@@ -95,6 +99,11 @@ var CellAccountNumber = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellAccountNumber, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'render',
         value: function render() {
             var _this2 = this;
@@ -180,7 +189,7 @@ var CellAccountNumber = function (_React$PureComponent) {
         }
     }]);
     return CellAccountNumber;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellAccountNumber.propTypes = process.env.NODE_ENV !== "production" ? {
     /**