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

package/HiTable/HiStickyRow.js

@@ -9,6 +9,10 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+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);
@@ -129,8 +133,8 @@ var styles = exports.styles = function styles(theme) {
 
 var ONCHANGE_ERROR_MESSAGE = exports.ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChange" pour les lignes "selectable"';
 
-var HiStickyRow = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiStickyRow, _React$PureComponent);
+var HiStickyRow = function (_React$Component) {
+    (0, _inherits3.default)(HiStickyRow, _React$Component);
 
     function HiStickyRow() {
         (0, _classCallCheck3.default)(this, HiStickyRow);
@@ -138,6 +142,11 @@ var HiStickyRow = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(HiStickyRow, [{
+        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;
@@ -189,18 +198,24 @@ var HiStickyRow = function (_React$PureComponent) {
                             className: 'stickyRowContent',
                             style: {
                                 position: 'relative',
-                                top: dense ? 3 : 2
+                                top: dense ? 3 : 2,
+                                display: 'flex',
+                                alignItems: 'center'
                             }
                         },
                         _react2.default.createElement(
-                            'span',
-                            { id: 'sticky-label', className: classes.label },
-                            label
-                        ),
-                        _react2.default.createElement(
-                            'span',
-                            { id: 'sticky-badge', style: { position: 'relative' } },
-                            _react2.default.createElement(_HiChip2.default, { label: length, classes: { root: classes.badgeRoot } })
+                            'div',
+                            null,
+                            _react2.default.createElement(
+                                'span',
+                                { id: 'sticky-label', className: classes.label },
+                                label
+                            ),
+                            _react2.default.createElement(
+                                'span',
+                                { id: 'sticky-badge', style: { position: 'relative' } },
+                                _react2.default.createElement(_HiChip2.default, { label: length, classes: { root: classes.badgeRoot } })
+                            )
                         ),
                         _react2.default.createElement(
                             _Button2.default,
@@ -226,7 +241,7 @@ var HiStickyRow = function (_React$PureComponent) {
         }
     }]);
     return HiStickyRow;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 HiStickyRow.defaultProps = {
     dense: false,
@@ -287,10 +302,6 @@ HiStickyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Objet contenant les éléments textuels du composant
      */
     translations: _propTypes2.default.object.isRequired,
-    /**
-     * Valeur de la ligne
-     */
-    value: _propTypes2.default.string,
     /**
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default

package/HiTable/HiTable.js

@@ -221,27 +221,9 @@ var HiTable = function (_React$Component) {
 
         _this.state = {
             dateUpdate: Date.now(),
-            isScrollToBottom: false,
-            groupByIds: {}
+            isScrollToBottom: false
         };
 
-        // create associative array (object) with sticky row key & its values
-        // => used for sticky row badges
-        if (props.groupBy) {
-            props.dataSource.map(function (row) {
-                var value = row.datas[props.groupBy].value;
-                var date = new Date(value);
-
-                if (date instanceof Date && isFinite(date)) {
-                    value = value.substr(0, 10);
-                }
-                if (!_this.state.groupByIds.hasOwnProperty(value)) {
-                    _this.state.groupByIds[value] = [];
-                }
-                _this.state.groupByIds[value].push(row.datas);
-            });
-        }
-
         // Orderable
         _this.openOrderColumnsMenu = _this.openOrderColumnsMenu.bind(_this);
         _this.closeOrderColumnsMenu = _this.closeOrderColumnsMenu.bind(_this);
@@ -313,8 +295,6 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'componentDidUpdate',
         value: function componentDidUpdate(prevProps, prevState, prevContext) {
-            var _this2 = this;
-
             this.wrapperScrollOffset = this.wrapperDiv.scrollWidth - this.wrapperDiv.offsetWidth;
 
             // If orderedColumns has change, possibly the sticky cells has changed too
@@ -342,28 +322,10 @@ var HiTable = function (_React$Component) {
             // Only if needed
             if (this.props.dataSource.length > prevProps.dataSource.length || this.props.dense !== prevProps.dense || this.props.sortedColumnId !== prevProps.sortedColumnId || this.props.sortDirection !== prevProps.sortDirection) {
                 this.updateStickyRowsPosition();
-                if (this.props.dataSource.length > prevProps.dataSource.length) {
+                if (this.props.dataSource.length !== prevProps.dataSource.length) {
                     this.handleStickyRowPositions();
                 }
             }
-            if (this.props.dataSource.length > prevProps.dataSource.length && this.props.groupBy) {
-                // create associative array (object) with sticky row key & its values
-                // => used for sticky row badges
-                var groupByIds = {};
-                this.props.dataSource.map(function (row) {
-                    var value = row.datas[_this2.props.groupBy].value;
-                    var date = new Date(value);
-
-                    if (date instanceof Date && isFinite(date)) {
-                        value = value.substr(0, 10);
-                    }
-                    if (!groupByIds.hasOwnProperty(value)) {
-                        groupByIds[value] = [];
-                    }
-                    groupByIds[value].push(row.datas);
-                });
-                this.setState({ groupByIds: groupByIds });
-            }
 
             this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
 
@@ -375,7 +337,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'updateStickyRowsPosition',
         value: function updateStickyRowsPosition() {
-            var _this3 = this;
+            var _this2 = this;
 
             var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
             this.groupByRowsPositions = [];
@@ -384,7 +346,7 @@ var HiTable = function (_React$Component) {
             var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
             if (stickyRows.length > 0) {
                 Array.prototype.filter.call(stickyRows, function (stickyRow) {
-                    _this3.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
+                    _this2.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
                 });
             }
         }
@@ -509,7 +471,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'handleStickyRowPositions',
         value: function handleStickyRowPositions() {
-            var _this4 = this;
+            var _this3 = this;
 
             var tableBody = document.getElementById(this.props.tabId + '-body');
             var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
@@ -517,14 +479,14 @@ var HiTable = function (_React$Component) {
             if (stickyRows.length > 0) {
                 Array.prototype.filter.call(stickyRows, function (stickyRow, index) {
                     var fakeTr = stickyRow.nextSibling;
-                    if (tableBody.scrollTop > _this4.groupByRowsPositions[index]) {
+                    if (tableBody.scrollTop > _this3.groupByRowsPositions[index]) {
                         // Calcul de la position du 'pinned' item
                         // positionnement juste en dessous du header
                         if (typeof stickyRows[index + 1] === 'undefined' || tableBody.scrollTop < stickyRows[index + 1].offsetTop) {
                             // Si la prochaine ligne est aussi un 'pinned' item,
                             // il pousse le précédent vers le haut
-                            if (typeof _this4.groupByRowsPositions[index + 1] !== 'undefined' && _this4.groupByRowsPositions[index + 1] - tableBody.scrollTop < rowHeight - 10) {
-                                stickyRow.style.top = tableBody.scrollTop + _this4.groupByRowsPositions[index + 1] - tableBody.scrollTop - rowHeight + '\n                                px';
+                            if (typeof _this3.groupByRowsPositions[index + 1] !== 'undefined' && _this3.groupByRowsPositions[index + 1] - tableBody.scrollTop < rowHeight - 10) {
+                                stickyRow.style.top = tableBody.scrollTop + _this3.groupByRowsPositions[index + 1] - tableBody.scrollTop - rowHeight + '\n                                px';
                             } else {
                                 stickyRow.style.top = tableBody.scrollTop + 'px';
                             }
@@ -533,13 +495,13 @@ var HiTable = function (_React$Component) {
                                 // Repositionnement des éléments dans une row en position absolute
                                 stickyRow.style.position = 'absolute';
                                 fakeTr.style.display = 'inline-block';
-                                stickyRow.style.height = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                                stickyRow.querySelector('button').style.maxHeight = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
-                                stickyRow.querySelector('button').style.minHeight = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
+                                stickyRow.style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                                stickyRow.querySelector('button').style.maxHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
+                                stickyRow.querySelector('button').style.minHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
                                 stickyRow.querySelector('button').style.top = '-3px';
-                                stickyRow.querySelector('#stickyRowContent').style.top = !_this4.props.dense ? '4px' : '-3px';
-                                stickyRow.querySelector('td').style.height = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                                if (_this4.props.dense) {
+                                stickyRow.querySelector('#stickyRowContent').style.top = !_this3.props.dense ? '4px' : '-3px';
+                                stickyRow.querySelector('td').style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                                if (_this3.props.dense) {
                                     stickyRow.querySelector('button').style.top = '0px';
                                     stickyRow.querySelector('button span').style.position = 'relative';
                                     stickyRow.querySelector('button span').style.top = '-4px';
@@ -551,13 +513,13 @@ var HiTable = function (_React$Component) {
                         stickyRow.style.position = 'relative';
                         stickyRow.style.top = '0px';
                         fakeTr.style.display = 'none';
-                        stickyRow.style.height = _this4.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
+                        stickyRow.style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
                         stickyRow.querySelector('#sticky-badge').style.top = '0px';
                         stickyRow.querySelector('#stickyRowContent').style.top = '2px';
-                        stickyRow.querySelector('td').style.height = _this4.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
-                        stickyRow.querySelector('button').style.maxHeight = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                        stickyRow.querySelector('button').style.minHeight = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                        if (_this4.props.dense) {
+                        stickyRow.querySelector('td').style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
+                        stickyRow.querySelector('button').style.maxHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                        stickyRow.querySelector('button').style.minHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                        if (_this3.props.dense) {
                             stickyRow.querySelector('button span').style.top = '0px';
                         }
                     }
@@ -572,7 +534,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'placeHorizontalFloatingElement',
         value: function placeHorizontalFloatingElement() {
-            var _this5 = this;
+            var _this4 = this;
 
             // live datas notification
             if (this.liveDataSpan) {
@@ -581,7 +543,7 @@ var HiTable = function (_React$Component) {
 
             // Replace left padding cells
             [].concat((0, _toConsumableArray3.default)(this.tBodyLeftPaddingElements), [this.tHeadLeftPadding]).forEach(function (element) {
-                element.style.left = _this5.scrollLeft + 'px';
+                element.style.left = _this4.scrollLeft + 'px';
             });
 
             // TODO - FIX
@@ -590,15 +552,15 @@ var HiTable = function (_React$Component) {
 
             // Replace right padding cells
             [].concat((0, _toConsumableArray3.default)(this.tBodyRightPaddingElements), [this.tHeadRightPadding]).forEach(function (element) {
-                element.style.right = Math.max(0, _this5.wrapperScrollOffset - _this5.scrollLeft - _this5.tBodyScrollbarWidth) + 'px';
+                element.style.right = Math.max(0, _this4.wrapperScrollOffset - _this4.scrollLeft - _this4.tBodyScrollbarWidth) + 'px';
             });
 
             // Replace first cells & add right shadows
             if (this.props.sticky) {
                 var shadowRight = '1px 0px 0px 0px rgba(128, 128, 128, 0.32)';
                 [].concat((0, _toConsumableArray3.default)(this.tBodyFirstElements), [this.tHeadFirst]).forEach(function (element) {
-                    element.style.left = _this5.scrollLeft + 'px';
-                    element.style['box-shadow'] = _this5.scrollLeft > 0 ? shadowRight : 'none';
+                    element.style.left = _this4.scrollLeft + 'px';
+                    element.style['box-shadow'] = _this4.scrollLeft > 0 ? shadowRight : 'none';
                 });
             }
 
@@ -612,7 +574,7 @@ var HiTable = function (_React$Component) {
             var stickyRowContentDiv = tableBody.getElementsByClassName('stickyRowContent');
             if (stickyRowContentDiv.length > 0) {
                 Array.prototype.filter.call(stickyRowContentDiv, function (div) {
-                    div.style.left = _this5.wrapperDiv.scrollLeft + (_this5.props.selectable ? 25 : 0) + 'px';
+                    div.style.left = _this4.wrapperDiv.scrollLeft + (_this4.props.selectable ? 25 : 0) + 'px';
                 });
             }
         }
@@ -677,7 +639,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this6 = this;
+            var _this5 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -717,8 +679,7 @@ var HiTable = function (_React$Component) {
                 detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
-                isScrollToBottom = _state.isScrollToBottom,
-                groupByIds = _state.groupByIds;
+                isScrollToBottom = _state.isScrollToBottom;
 
 
             var headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
@@ -739,7 +700,7 @@ var HiTable = function (_React$Component) {
                         id: tabId,
                         className: classes.tableWrapper,
                         ref: function ref(div) {
-                            return _this6.wrapperDiv = div;
+                            return _this5.wrapperDiv = div;
                         },
                         onScroll: this.handleHorizontalScroll
                     },
@@ -796,7 +757,6 @@ var HiTable = function (_React$Component) {
                             translations: translations.tableBody,
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
-                            groupByIds: groupByIds,
                             lookupColumns: lookupColumns,
                             loading: loading,
                             fixedColumnWidth: fixedColumnWidth,
@@ -822,6 +782,7 @@ var HiTable = function (_React$Component) {
                     ),
                     _react2.default.createElement(_HiTableContextMenu2.default, {
                         tabId: tabId,
+                        columns: columns,
                         onSearch: this.props.onSearch,
                         onRedirect: this.props.onRedirect
                     }),
@@ -835,7 +796,7 @@ var HiTable = function (_React$Component) {
                                 color: 'primary',
                                 className: classes.backToTopButton,
                                 onClick: function onClick() {
-                                    return _this6.scrollToTop();
+                                    return _this5.scrollToTop();
                                 }
                             },
                             _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow }),

package/HiTable/HiTableBody.js

@@ -5,6 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _values = require('babel-runtime/core-js/object/values');
+
+var _values2 = _interopRequireDefault(_values);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
@@ -51,6 +59,12 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+require('moment/locale/fr');
+
 var _styles = require('../styles');
 
 var _BodyRow = require('./BodyRow');
@@ -69,6 +83,10 @@ var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
 
+var _lodash = require('lodash');
+
+var _ = _interopRequireWildcard(_lodash);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -132,7 +150,7 @@ var HiTableBody = function (_React$Component) {
     function HiTableBody(props) {
         (0, _classCallCheck3.default)(this, HiTableBody);
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this));
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this, props));
 
         _this.buildIndicator = function (row) {
             var _this$props = _this.props,
@@ -165,17 +183,52 @@ var HiTableBody = function (_React$Component) {
 
         _this.state = {
             openedParentRowId: null,
-            openedDetailsRowIdList: []
+            openedDetailsRowIdList: [],
+            dataSource: props.dataSource,
+            groupByIds: {}
         };
 
+        if (props.groupBy && props.dataSource) {
+            var groupByIds = {};
+            props.dataSource.map(function (row) {
+                var value = row.datas[props.groupBy].value;
+                if (!groupByIds.hasOwnProperty(value)) {
+                    groupByIds[value] = [];
+                }
+                groupByIds[value].push(row.datas);
+            });
+            _this.state.groupByIds = groupByIds;
+        }
+
         _this.buildIndicator = _this.buildIndicator.bind(_this);
         _this.setOpenedParentRowId = _this.setOpenedParentRowId.bind(_this);
         _this.toggleOpenedDetailsRowId = _this.toggleOpenedDetailsRowId.bind(_this);
         _this.positionStickyRowNextButton = _this.positionStickyRowNextButton.bind(_this);
+
+        //Monkeypatch TableRow
+        /*var that = this;
+        TableRow.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState){
+          return (this.state.hovered !== nextState.hovered || this.props.selected !== nextProps.selected) && true;
+        }*/
         return _this;
     }
 
     (0, _createClass3.default)(HiTableBody, [{
+        key: 'deepCompare',
+        value: function deepCompare(object, base) {
+            var that = this;
+            return _.transform(object, function (result, value, key) {
+                if (!_.isEqual(value, base[key])) {
+                    result[key] = _.isObject(value) && _.isObject(base[key]) ? that.deepCompare(value, base[key]) : value;
+                }
+            }).length > 0;
+        }
+
+        /*shouldComponentUpdate(nextProps, nextState){
+          this.deepCompare(this.props,nextProps) || this.deepCompare(this.state,nextState);
+        }*/
+
+    }, {
         key: 'componentDidMount',
         value: function componentDidMount() {
             this.positionStickyRowNextButton();
@@ -185,6 +238,9 @@ var HiTableBody = function (_React$Component) {
         value: function componentDidUpdate(prevProps, prevState, prevContext) {
             this.positionStickyRowNextButton();
         }
+    }, {
+        key: 'setOpenedParentRowId',
+
 
         /**
          * Définit l'id de la ligne parente "ouverte" ou null
@@ -193,9 +249,6 @@ var HiTableBody = function (_React$Component) {
          *
          * @param row
          */
-
-    }, {
-        key: 'setOpenedParentRowId',
         value: function setOpenedParentRowId(row) {
             this.setState(function (prevState) {
                 return {
@@ -225,7 +278,7 @@ var HiTableBody = function (_React$Component) {
                             }
                             button.parentElement.style.top = '4px';
                         }
-                        var label = button.previousSibling.previousSibling;
+                        var label = button.previousSibling;
                         button.style.left = tableContainer.offsetWidth - label.offsetWidth - 48 - 160 + 'px';
                     }
                 });
@@ -272,7 +325,6 @@ var HiTableBody = function (_React$Component) {
                 tabId = _props.tabId,
                 columns = _props.columns,
                 orderedColumns = _props.orderedColumns,
-                dataSource = _props.dataSource,
                 onRowClick = _props.onRowClick,
                 selectable = _props.selectable,
                 onSelect = _props.onSelect,
@@ -287,7 +339,6 @@ var HiTableBody = function (_React$Component) {
                 translations = _props.translations,
                 dateLocale = _props.dateLocale,
                 numberLocale = _props.numberLocale,
-                groupByIds = _props.groupByIds,
                 sortedColumnId = _props.sortedColumnId,
                 lookupColumns = _props.lookupColumns,
                 loading = _props.loading,
@@ -296,7 +347,9 @@ var HiTableBody = function (_React$Component) {
                 detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
-                openedDetailsRowIdList = _state.openedDetailsRowIdList;
+                openedDetailsRowIdList = _state.openedDetailsRowIdList,
+                groupByIds = _state.groupByIds,
+                dataSource = _state.dataSource;
 
 
             var nbColumnsDisplayed = 0;
@@ -315,31 +368,21 @@ var HiTableBody = function (_React$Component) {
                 // Gestion du sticky group by
                 if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
                     var currentGroupByValue = row.datas[groupBy].value;
-                    var date = new Date(currentGroupByValue);
-                    if (date instanceof Date && isFinite(date)) {
-                        currentGroupByValue = currentGroupByValue.substr(0, 10);
-                    }
+
                     // TODO => condition for other columns type
                     if (columns[groupBy].type === cst.TYPE_DATE) {
-                        if (index === 0 || currentGroupByValue !== stickyRowValue) {
-                            stickyRowValue = currentGroupByValue;
-                            var label = stickyRowValue;
-                            if (date instanceof Date && isFinite(date)) {
-                                label = new Date(label);
-                                var options = {
-                                    year: 'numeric',
-                                    month: 'long',
-                                    weekday: 'long',
-                                    day: 'numeric'
-                                };
-                                label = label.toLocaleString(dateLocale, options);
-                                label = label.charAt(0).toUpperCase() + label.substr(1);
-                            }
+
+                        _moment2.default.locale(dateLocale);
+                        var date = (0, _moment2.default)(currentGroupByValue);
+                        var label = date.format('dddd D MMMM YYYY');
+
+                        if (index === 0 || label !== stickyRowValue) {
+
+                            stickyRowValue = label;
 
                             tableRows.push(_react2.default.createElement(_HiStickyRow2.default, {
                                 key: 'sticky_row_' + row.rowId,
                                 dense: dense,
-                                value: stickyRowValue,
                                 label: label,
                                 length: groupByIds[currentGroupByValue].length,
                                 colSpan: nbColumnsDisplayed,
@@ -424,7 +467,9 @@ var HiTableBody = function (_React$Component) {
                                     sticky: sticky,
                                     isDetail: true,
                                     fixedColumnWidth: fixedColumnWidth,
-                                    disableContextMenu: disableContextMenu
+                                    disableContextMenu: disableContextMenu,
+                                    dateLocale: dateLocale,
+                                    numberLocale: numberLocale
                                 };
 
                                 tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
@@ -453,6 +498,31 @@ var HiTableBody = function (_React$Component) {
                 })
             );
         }
+    }], [{
+        key: 'getDerivedStateFromProps',
+        value: function getDerivedStateFromProps(props, state) {
+            var nextState = {};
+            if (props.groupBy && props.dataSource && props.dataSource.length > 0) {
+                if ((0, _stringify2.default)(props.dataSource) !== (0, _stringify2.default)(state.dataSource)) {
+                    var groupByIds = {};
+                    props.dataSource.map(function (row) {
+                        var value = row.datas[props.groupBy].value;
+                        if (!groupByIds.hasOwnProperty(value)) {
+                            groupByIds[value] = [];
+                        }
+                        groupByIds[value].push(row.datas);
+                    });
+                    nextState.groupByIds = groupByIds;
+                }
+            }
+            if ((0, _stringify2.default)(props.dataSource) !== (0, _stringify2.default)(state.dataSource)) {
+                nextState.dataSource = props.dataSource;
+            }
+            if ((0, _values2.default)(nextState).length > 0) {
+                return nextState;
+            }
+            return null;
+        }
     }]);
     return HiTableBody;
 }(_react2.default.Component);

package/HiTable/HiTableContextMenu.js

@@ -88,7 +88,9 @@ var HiTableContextMenu = function (_React$Component) {
 
         _this.state = {
             value: '',
-            label: ''
+            label: '',
+            lookup: true,
+            exclude: true
         };
 
         _this.handleContextMenuOpen = _this.handleContextMenuOpen.bind(_this);
@@ -102,9 +104,13 @@ var HiTableContextMenu = function (_React$Component) {
     (0, _createClass3.default)(HiTableContextMenu, [{
         key: 'handleContextMenuOpen',
         value: function handleContextMenuOpen(event) {
+            var columns = this.props.columns;
+
             this.setState({
                 value: event.detail.data.value,
-                label: event.detail.data.label
+                label: event.detail.data.label,
+                lookup: columns[event.detail.data.column].lookup !== false,
+                exclude: columns[event.detail.data.column].exclude !== false
             });
         }
     }, {
@@ -144,9 +150,12 @@ var HiTableContextMenu = function (_React$Component) {
                 classes = _props.classes,
                 tabId = _props.tabId,
                 translations = _props.translations;
+            var _state = this.state,
+                lookup = _state.lookup,
+                exclude = _state.exclude;
 
 
-            var contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
+            var contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', displayed: lookup, icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', displayed: exclude, icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
 
             return _react2.default.createElement(
                 _reactContextmenu.ContextMenu,
@@ -156,19 +165,21 @@ var HiTableContextMenu = function (_React$Component) {
                     onShow: this.handleContextMenuOpen
                 },
                 contextMenuItems.map(function (menuItem) {
-                    return _react2.default.createElement(
-                        _reactContextmenu.MenuItem,
-                        {
-                            attributes: { className: classes.contextMenuItem },
-                            key: 'hitable_context_menu_' + tabId + '_' + menuItem.id,
-                            onClick: menuItem.action },
-                        _react2.default.createElement(_HiIconBuilder2.default, { icon: menuItem.icon }),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.title },
-                            menuItem.title.replace('%s', _this2.state.label)
-                        )
-                    );
+                    if (menuItem.displayed !== false) {
+                        return _react2.default.createElement(
+                            _reactContextmenu.MenuItem,
+                            {
+                                attributes: { className: classes.contextMenuItem },
+                                key: 'hitable_context_menu_' + tabId + '_' + menuItem.id,
+                                onClick: menuItem.action },
+                            _react2.default.createElement(_HiIconBuilder2.default, { icon: menuItem.icon }),
+                            _react2.default.createElement(
+                                'span',
+                                { className: classes.title },
+                                menuItem.title.replace('%s', _this2.state.label)
+                            )
+                        );
+                    }
                 })
             );
         }
@@ -189,6 +200,10 @@ HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge le style du composant
      */
     classes: _propTypes2.default.object,
+    /**
+     * Liste des objets colonnes utilisé pour savoir quels items du context menu sont affichés
+     */
+    columns: _propTypes2.default.object.isRequired,
     /**
      * Fonction de callback appelée au clic sur l'item redirection
      * du menu contextuel ouvert au clic droit