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

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

package/HiSelectableList/HiSelectableListItem.js

@@ -82,9 +82,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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',
@@ -396,7 +398,7 @@ var HiSelectableListItem = function (_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;
@@ -413,9 +415,9 @@ var HiSelectableListItem = function (_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/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;
 
@@ -289,10 +299,11 @@ var BodyCellBuilder = function (_React$PureComponent) {
                     default:
                         cellElement = _react2.default.createElement(_BodyCells.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;
                 }
@@ -315,7 +326,7 @@ var BodyCellBuilder = function (_React$PureComponent) {
         }
     }]);
     return BodyCellBuilder;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 BodyCellBuilder.defaultProps = {
     ellipsis: 'right',

package/HiTable/BodyCells/CellAccount.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-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');
 
@@ -41,23 +44,13 @@ var _HiColoredLabel = require('../../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
 
-var _withStyles = require('../../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {};
-};
-
 /**
  * Cette cellule permet d'afficher le nom d'un compte sous la forme d'un label coloré.
  */
-
-
-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 +58,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 +78,7 @@ var CellAccount = function (_React$PureComponent) {
         }
     }]);
     return CellAccount;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellAccount.defaultProps = {};
 CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -97,4 +95,4 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     value: _propTypes2.default.string.isRequired
 } : {};
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellAccount' })(CellAccount);
+exports.default = CellAccount;

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" ? {
     /**

package/HiTable/BodyCells/CellAddress.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);
@@ -74,8 +78,8 @@ var styles = exports.styles = function styles(theme) {
  * - tous les champs définis sont affichés dans le tooltip
  */
 
-var CellAddress = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellAddress, _React$PureComponent);
+var CellAddress = function (_React$Component) {
+    (0, _inherits3.default)(CellAddress, _React$Component);
 
     function CellAddress() {
         (0, _classCallCheck3.default)(this, CellAddress);
@@ -83,6 +87,11 @@ var CellAddress = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellAddress, [{
+        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,
@@ -157,7 +166,7 @@ var CellAddress = function (_React$PureComponent) {
         }
     }]);
     return CellAddress;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellAddress.defaultProps = {
     view: 'l'

package/HiTable/BodyCells/CellCountry.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);
@@ -94,8 +98,8 @@ var styles = exports.styles = function styles(theme) {
  *
  */
 
-var CellCountry = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellCountry, _React$PureComponent);
+var CellCountry = function (_React$Component) {
+    (0, _inherits3.default)(CellCountry, _React$Component);
 
     function CellCountry() {
         (0, _classCallCheck3.default)(this, CellCountry);
@@ -103,6 +107,11 @@ var CellCountry = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellCountry, [{
+        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,
@@ -120,7 +129,7 @@ var CellCountry = function (_React$PureComponent) {
         }
     }]);
     return CellCountry;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/HiTable/BodyCells/CellDate.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _stringify = require('babel-runtime/core-js/json/stringify');
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _stringify2 = _interopRequireDefault(_stringify);
 
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
@@ -37,6 +37,12 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+require('moment/locale/fr');
+
 var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -53,16 +59,14 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        rightEllipsisSpan: {
-            display: 'inline-block',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'pre',
-            width: '100%'
-        }
-    };
+var styles = exports.styles = {
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        width: '100%'
+    }
 };
 
 /**
@@ -73,11 +77,25 @@ var CellDate = function (_React$Component) {
     (0, _inherits3.default)(CellDate, _React$Component);
 
     function CellDate() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
         (0, _classCallCheck3.default)(this, CellDate);
-        return (0, _possibleConstructorReturn3.default)(this, (CellDate.__proto__ || (0, _getPrototypeOf2.default)(CellDate)).apply(this, arguments));
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = CellDate.__proto__ || (0, _getPrototypeOf2.default)(CellDate)).call.apply(_ref, [this].concat(args))), _this), _this.formatLong = 'dddd DD MMMM YYYY HH:mm:ss', _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
     }
 
     (0, _createClass3.default)(CellDate, [{
+        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,
@@ -85,44 +103,19 @@ var CellDate = function (_React$Component) {
                 displayTime = _props.displayTime,
                 value = _props.value,
                 locale = _props.locale,
-                view = _props.view;
-
-
-            var date = new Date(value);
-
-            var options = (0, _extends3.default)({
-                weekday: 'long',
-                year: 'numeric',
-                month: 'long',
-                day: '2-digit'
-            }, displayTime && {
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-            });
-            var titleValue = date.toLocaleString(locale, options);
+                view = _props.view,
+                formatShort = _props.formatShort;
+
+
+            var date = (0, _moment2.default)(value);
+            date.locale(locale);
+
+            var titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
             var displayedValue = titleValue;
             if (view === cst.VIEWS.SMALL) {
-                options = (0, _extends3.default)({
-                    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 = (0, _extends3.default)({
-                    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) {
@@ -149,8 +142,9 @@ var CellDate = function (_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" ? {
     /**
@@ -162,11 +156,21 @@ CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     displayTime: _propTypes2.default.bool,
     /**
-     * Locale BCP 47
+     * Format de la date en vue small (ex: DD/MM/YYYY)
+     * @see https://momentjs.com/docs/#/parsing/string-format/
+     */
+    formatShort: _propTypes2.default.string.isRequired,
+    /**
+     * Locale moment
      */
     locale: _propTypes2.default.string,
     /**
-     * Volume/Amount
+     * True si la colonne est la première colonne et
+     * doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * Date as string
      */
     value: _propTypes2.default.string.isRequired,
     /**

package/HiTable/BodyCells/CellIcon.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);
@@ -75,8 +79,8 @@ var styles = exports.styles = {
  * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
  */
 
-var CellIcon = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellIcon, _React$PureComponent);
+var CellIcon = function (_React$Component) {
+    (0, _inherits3.default)(CellIcon, _React$Component);
 
     function CellIcon() {
         (0, _classCallCheck3.default)(this, CellIcon);
@@ -84,6 +88,11 @@ var CellIcon = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellIcon, [{
+        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,
@@ -124,7 +133,7 @@ var CellIcon = function (_React$PureComponent) {
         }
     }]);
     return CellIcon;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellIcon.defaultProps = {
     icon: '',