@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/HiTable/HiTable.js

@@ -1,1028 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.SORTED_COLUMN_ERROR_MESSAGE = exports.MANDATORY_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
-
-var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
-
-var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _Table = require('material-ui/Table');
-
-var _Table2 = _interopRequireDefault(_Table);
-
-var _ArrowUp = require('mdi-material-ui/ArrowUp');
-
-var _ArrowUp2 = _interopRequireDefault(_ArrowUp);
-
-var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
-
-var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
-
-var _HiButton = require('../HiButton');
-
-var _HiButton2 = _interopRequireDefault(_HiButton);
-
-var _styles = require('../styles');
-
-var _HiTableHead = require('./HiTableHead');
-
-var _HiTableHead2 = _interopRequireDefault(_HiTableHead);
-
-var _HiTableBody = require('./HiTableBody');
-
-var _HiTableBody2 = _interopRequireDefault(_HiTableBody);
-
-var _HiTableFooterScroll = require('./HiTableFooterScroll');
-
-var _HiTableFooterScroll2 = _interopRequireDefault(_HiTableFooterScroll);
-
-var _constants = require('./constants');
-
-var cst = _interopRequireWildcard(_constants);
-
-var _HiTableContextMenu = require('./HiTableContextMenu');
-
-var _HiTableContextMenu2 = _interopRequireDefault(_HiTableContextMenu);
-
-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 }; }
-
-var styles = exports.styles = function styles(theme) {
-    return {
-        root: {
-            position: 'relative',
-            backgroundColor: theme.palette.background3
-        },
-        tableWrapper: {
-            overflowX: 'auto',
-            overflowY: 'hidden'
-        },
-        filter: {
-            position: 'relative',
-            top: 2,
-            left: 2,
-            cursor: 'pointer'
-        },
-        table: {
-            position: 'relative',
-            width: '100%',
-            overflow: 'hidden',
-            borderCollapse: 'collapse',
-            backgroundColor: theme.palette.background3,
-            zIndex: 10
-        },
-        backToTopButtonContainer: {
-            position: 'absolute',
-            width: '100%',
-            textAlign: 'center',
-            height: 48,
-            top: -99999
-        },
-        backToTopButton: {
-            zIndex: 11
-        },
-        backToTopButtonArrow: {
-            height: 18,
-            width: 18,
-            position: 'relative',
-            top: -2,
-            margin: 2
-        }
-    };
-};
-
-var MANDATORY_COLUMN_ERROR_MESSAGE = exports.MANDATORY_COLUMN_ERROR_MESSAGE = 'Vous devez saisir la propriété "mandatoryColumnId" pour les tableaux "orderable"';
-var SORTED_COLUMN_ERROR_MESSAGE = exports.SORTED_COLUMN_ERROR_MESSAGE = 'Vous devez saisir la propriété "sortedColumnId" pour les tableaux "sortable"';
-
-/**
- * Display a list of elements in a table
- * The click on FilterVariant opens a menu that allows the user
- * to filter by value or to order by a specific column
- *
- * Renderer behaviors:
- * - Widths:
- *      - all cells types have default width size (px) for each kind of view (L/M/S).
- *      - if view isn't set we use the largest one (large).
- *      - cell width can be overriden by column's props.
- *      - if there is not enough space to render all cells,
- *        we use horizontal scroll and cells width are fixed
- *      - if there is enough space, no scroll and only the first cell (column),
- *      which is not explicitly set as unfixed (fixedWidth = false),
- *      has not fixed width and may enlarge his width to fit available space.
- *
- * - Fixed Header:
- *      - header rows should be fixed and always be visible on body scroll.
- *      - vertical scrollbar should be hidden
- *      - if nbRows * cellHeight > tableHeight,
- *        we virtually enlarge the table then crop arbitrary width to hide the scrollbar.
- *      as each browsers may have different scrollbar widths,
- *      it may trouble column header alignment.
- */
-
-var _ref = _react2.default.createElement('div', null);
-
-var _ref2 = _react2.default.createElement('div', null);
-
-var _ref3 = _react2.default.createElement('div', null);
-
-var _ref4 = _react2.default.createElement('div', null);
-
-var _ref5 = _react2.default.createElement('div', null);
-
-var _ref6 = _react2.default.createElement('div', null);
-
-var _ref7 = _react2.default.createElement('div', null);
-
-var _ref8 = _react2.default.createElement('div', null);
-
-var HiTable = function (_React$Component) {
-    (0, _inherits3.default)(HiTable, _React$Component);
-
-    function HiTable(props) {
-        (0, _classCallCheck3.default)(this, HiTable);
-
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTable.__proto__ || (0, _getPrototypeOf2.default)(HiTable)).call(this, props));
-
-        _this.wrapperDiv = _ref;
-        _this.wrapperWidth = 0;
-        _this.tHead = _ref2;
-        _this.tHeadLeftPadding = _ref3;
-        _this.tHeadRightPadding = _ref4;
-        _this.tHeadFirst = _ref5;
-        _this.tBody = _ref6;
-        _this.tBodyScrollbarWidth = 0;
-        _this.tBodyLeftPaddingElements = [];
-        _this.tBodyRightPaddingElements = [];
-        _this.tBodyFirstElements = [];
-        _this.tFoot = _ref7;
-        _this.tFootCenteredDiv = _ref8;
-        _this.backToTopButton = null;
-        _this.liveDataSpan = null;
-        _this.scrollTop = 0;
-        _this.scrollLeft = 0;
-        _this.groupByRowsPositions = [];
-
-        _this.updateFloatingBodyElementRefs = function () {
-            _this.tBodyScrollbarWidth = _this.tBody.offsetWidth - _this.tBody.clientWidth;
-
-            if (_this.tHead && _this.tBodyScrollbarWidth > 0) {
-                _this.tHead.style.width = 'calc(100% - ' + _this.tBodyScrollbarWidth + 'px)';
-            }
-
-            _this.tBodyLeftPaddingElements = _this.tBody.querySelectorAll('tr td:nth-child(1), .floating-parent-row-label');
-            _this.tBodyRightPaddingElements = _this.tBody.querySelectorAll('tr td:nth-last-child(1), .floating-parent-row-indicator');
-
-            _this.tBodyFirstElements = _this.tBody.querySelectorAll('tr td:nth-child(2)');
-        };
-
-        _this.addNewRowRefs = function () {
-            // delayed refs getting to let time at new rows to build up
-            setTimeout(function () {
-                _this.updateFloatingBodyElementRefs();
-                _this.placeHorizontalFloatingElement();
-            }, 10);
-        };
-
-        _this.state = {
-            dateUpdate: Date.now(),
-            isScrollToBottom: false,
-            groupByIds: {}
-        };
-
-        // 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);
-
-        // Selectable
-        _this.toggleItem = _this.toggleItem.bind(_this);
-        _this.toggleAll = _this.toggleAll.bind(_this);
-        _this.selectAll = _this.selectAll.bind(_this);
-        _this.deselectAll = _this.deselectAll.bind(_this);
-
-        // Manage scrolling
-        _this.handleHorizontalScroll = _this.handleHorizontalScroll.bind(_this);
-        _this.handleVerticalScroll = _this.handleVerticalScroll.bind(_this);
-        _this.placeHorizontalFloatingElement = _this.placeHorizontalFloatingElement.bind(_this);
-        _this.scrollToTop = _this.scrollToTop.bind(_this);
-
-        _this.isScrollToBottom = _this.isScrollToBottom.bind(_this);
-        _this.handleRequestLiveDatas = _this.handleRequestLiveDatas.bind(_this);
-        _this.handleNextStickyRow = _this.handleNextStickyRow.bind(_this);
-        _this.handleStickyRowPositions = _this.handleStickyRowPositions.bind(_this);
-        return _this;
-    }
-
-    /**
-     * DOM references
-     * use to replace element on horizontal & vertical scroll
-     */
-
-
-    (0, _createClass3.default)(HiTable, [{
-        key: 'componentDidMount',
-
-
-        /** Lifecycle methods */
-
-        value: function componentDidMount() {
-            this.wrapperScrollOffset = this.wrapperDiv.scrollWidth - this.wrapperDiv.offsetWidth;
-
-            // Set DOM references
-            this.tHead = this.wrapperDiv.querySelector('table thead');
-            this.tHeadLeftPadding = this.tHead.querySelector('tr th:nth-child(1)');
-            this.tHeadRightPadding = this.tHead.querySelector('tr th:nth-last-child(1)');
-            this.tHeadFirst = this.tHead.querySelector('tr th:nth-child(2)');
-            this.tBody = this.wrapperDiv.querySelector('table tbody');
-            this.tFoot = this.wrapperDiv.querySelector('table tfoot');
-            this.tFootCenteredDiv = this.wrapperDiv.querySelector('table tfoot tr td div');
-            this.backToTopButton = this.wrapperDiv.querySelector('.back-to-top-button');
-
-            this.updateFloatingBodyElementRefs();
-
-            // Detect if root has horizontal scroll bar
-            if (this.wrapperDiv.scrollWidth > this.wrapperDiv.offsetWidth) {
-                // adapt first column to fixed width
-                if (this.tHeadFirst && this.tHeadFirst.style) {
-                    this.tHeadFirst.style.width = 'auto';
-                }
-                // fixed footer width
-                if (this.tFootCenteredDiv && this.tFootCenteredDiv.style) {
-                    this.tFootCenteredDiv.style.width = Math.round(this.wrapperDiv.offsetWidth / 2) + 'px';
-                    this.tFootCenteredDiv.style.position = 'absolute';
-                    this.tFootCenteredDiv.style.bottom = '0px';
-                }
-            }
-
-            this.updateStickyRowsPosition();
-
-            this.placeHorizontalFloatingElement();
-        }
-    }, {
-        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
-            if (this.props.orderedColumns[0].colId !== prevProps.orderedColumns[0].colId) {
-                this.tHeadFirst = this.tHead.querySelector('tr th:nth-child(2)');
-                this.tBodyFirstElements = this.wrapperDiv.querySelectorAll('table tbody tr td:nth-child(2)');
-            }
-
-            // If there is new rows, update tbody first element list and left padding cells
-            if (this.props.dataSource.length > prevProps.dataSource.length) {
-                this.updateFloatingBodyElementRefs();
-            }
-
-            if (this.props.countLiveDatas > 0) {
-                this.liveDataSpan = this.tHead.querySelector('tr:nth-child(2) th span');
-                this.backToTopButton.style.top = '-99999px';
-            }
-
-            if (prevProps.countLiveDatas > this.props.countLiveDatas) {
-                this.setState({
-                    dateUpdate: Date.now()
-                });
-            }
-
-            // 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) {
-                    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);
-
-            this.placeHorizontalFloatingElement();
-        }
-
-        /**    END Lifecycle methods   */
-
-    }, {
-        key: 'updateStickyRowsPosition',
-        value: function updateStickyRowsPosition() {
-            var _this3 = this;
-
-            var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
-            this.groupByRowsPositions = [];
-            // Initialize new stickyRows position
-            var tableBody = document.getElementById(this.props.tabId + '-body');
-            var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
-            if (stickyRows.length > 0) {
-                Array.prototype.filter.call(stickyRows, function (stickyRow) {
-                    _this3.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
-                });
-            }
-        }
-    }, {
-        key: 'isScrollToBottom',
-        value: function isScrollToBottom(value) {
-            if (this.state.isScrollToBottom !== value) {
-                this.setState({
-                    isScrollToBottom: value
-                });
-            }
-        }
-
-        /**
-         * Ajoute / Supprime l'id de l'item du selectedIdList
-         * @param item
-         */
-
-    }, {
-        key: 'toggleItem',
-        value: function toggleItem(item) {
-            if (this.props.selectedIdList.includes(item.rowId)) {
-                this.props.onSelect(this.props.selectedIdList.filter(function (itemId) {
-                    return itemId !== item.rowId;
-                }));
-            } else {
-                this.props.onSelect([].concat((0, _toConsumableArray3.default)(this.props.selectedIdList), [item.rowId]));
-            }
-        }
-
-        /**
-         * Sélectionne / Déselectionne tous les éléments en fonction de l'état de la liste
-         */
-
-    }, {
-        key: 'toggleAll',
-        value: function toggleAll() {
-            if (this.props.selectedIdList.length === this.props.dataSource.length) {
-                this.deselectAll();
-            } else {
-                this.selectAll();
-            }
-        }
-
-        /**
-         * Sélectionne tous les items
-         */
-
-    }, {
-        key: 'selectAll',
-        value: function selectAll() {
-            this.props.onSelect(this.props.dataSource.map(function (item) {
-                return item.rowId;
-            }));
-        }
-
-        /**
-         * Désélectionne tous les items
-         */
-
-    }, {
-        key: 'deselectAll',
-        value: function deselectAll() {
-            this.props.onSelect([]);
-        }
-
-        /**
-         * Handle horizontal scroll (wrapperDiv)
-         * - replace each first cells body & header & add right shadows
-         */
-
-    }, {
-        key: 'handleHorizontalScroll',
-        value: function handleHorizontalScroll(event) {
-            // cancel if scroll is from tbody OR it didn't change
-            if (event.target.nodeName === 'TBODY' || this.scrollLeft === event.target.scrollLeft) {
-                return;
-            }
-
-            this.scrollLeft = event.target.scrollLeft;
-
-            // Replace live datas notification
-            this.placeHorizontalFloatingElement();
-        }
-
-        /**
-         * Handle vertical scroll (tbody)
-         * - add bottom shadow
-         * - place back to top button
-         * - request next datas if reach bottom
-         */
-
-    }, {
-        key: 'handleVerticalScroll',
-        value: function handleVerticalScroll(event) {
-            // cancel if scroll is not from tbody OR it didn't change
-            if (event.target.nodeName !== 'TBODY' || this.scrollTop === event.target.scrollTop) return;
-
-            var scrollingUp = this.scrollTop > event.target.scrollTop;
-
-            this.scrollTop = event.target.scrollTop;
-
-            // Add bottom shadow to header row
-            var shadowBottom = '0px 0px 2px 0px rgba(128, 128, 128, 0.32)';
-            this.tHead.style['box-shadow'] = this.scrollTop > 0 ? shadowBottom : 'none';
-            var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
-
-            // Add back to top button when scrolling up from constant defined scroll point
-            // if there not live data notification
-            if (this.props.countLiveDatas === 0) {
-                if (scrollingUp && this.scrollTop >= cst.NB_ROWS_BACK_TO_TOP * rowHeight) {
-                    this.backToTopButton.style.top = rowHeight * 1.5 + ' px';
-                } else {
-                    this.backToTopButton.style.top = -99999 + 'px';
-                }
-            }
-
-            this.handleStickyRowPositions();
-
-            this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
-        }
-    }, {
-        key: 'handleStickyRowPositions',
-        value: function handleStickyRowPositions() {
-            var _this4 = this;
-
-            var tableBody = document.getElementById(this.props.tabId + '-body');
-            var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
-            var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
-            if (stickyRows.length > 0) {
-                Array.prototype.filter.call(stickyRows, function (stickyRow, index) {
-                    var fakeTr = stickyRow.nextSibling;
-                    if (tableBody.scrollTop > _this4.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';
-                            } else {
-                                stickyRow.style.top = tableBody.scrollTop + 'px';
-                            }
-
-                            if (stickyRow.style.position !== 'absolute') {
-                                // 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.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('button').style.top = '0px';
-                                    stickyRow.querySelector('button span').style.position = 'relative';
-                                    stickyRow.querySelector('button span').style.top = '-4px';
-                                }
-                            }
-                        }
-                    } else if (stickyRow.style.position !== 'relative') {
-                        // Repositionnement normal
-                        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.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('button span').style.top = '0px';
-                        }
-                    }
-                });
-            }
-        }
-
-        /**
-         * Some element must be replace "manually"
-         */
-
-    }, {
-        key: 'placeHorizontalFloatingElement',
-        value: function placeHorizontalFloatingElement() {
-            var _this5 = this;
-
-            // live datas notification
-            if (this.liveDataSpan) {
-                this.liveDataSpan.style.left = this.wrapperDiv.clientWidth / 2 - 100 + this.scrollLeft + 'px';
-            }
-
-            // Replace left padding cells
-            [].concat((0, _toConsumableArray3.default)(this.tBodyLeftPaddingElements), [this.tHeadLeftPadding]).forEach(function (element) {
-                element.style.left = _this5.scrollLeft + 'px';
-            });
-
-            // TODO - FIX
-            // Les éléments de droite sont décalés de 22px lorsque de nouvelles lignes sont
-            // visible (children ou details)
-
-            // 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';
-            });
-
-            // 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';
-                });
-            }
-
-            // Replace centered elements (elements width should be 50% of wrapper)
-            if (this.tFootCenteredDiv) {
-                this.tFootCenteredDiv.style.left = Math.round(this.wrapperDiv.offsetWidth / 4) + this.scrollLeft + 'px';
-            }
-
-            // Replace stickyRowContent
-            var tableBody = document.getElementById(this.props.tabId + '-body');
-            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';
-                });
-            }
-        }
-    }, {
-        key: 'handleRequestLiveDatas',
-        value: function handleRequestLiveDatas() {
-            this.scrollToTop();
-            this.props.requestLiveDatas();
-        }
-
-        /**
-         * Scroll back to table top
-         */
-
-    }, {
-        key: 'scrollToTop',
-        value: function scrollToTop() {
-            // Hide back to top button
-            this.backToTopButton['style'].top = -99999 + 'px';
-
-            // Set scroll top to 0
-            this.tBody.scrollTop = 0;
-            this.scrollTop = 0;
-        }
-    }, {
-        key: 'openOrderColumnsMenu',
-        value: function openOrderColumnsMenu(event) {
-            this.setState({
-                orderColumnsAnchor: event.currentTarget,
-                orderColumnsMenuOpen: true
-            });
-        }
-    }, {
-        key: 'closeOrderColumnsMenu',
-        value: function closeOrderColumnsMenu() {
-            this.setState({
-                orderColumnsAnchor: null,
-                orderColumnsMenuOpen: false
-            });
-        }
-
-        /**
-         * This function is pass to table body to be advised when new rows are dynamically added (ex detail rows)
-         * we can then update our list of floating body elements refs
-         **/
-
-    }, {
-        key: 'handleNextStickyRow',
-
-
-        /**
-         * Scroll jusqu'au prochain stickRow
-         *
-         * @param stickyRowIndex
-         */
-        value: function handleNextStickyRow(stickyRowIndex) {
-            if (this.groupByRowsPositions.length - 1 > stickyRowIndex) {
-                var tableBody = document.getElementById(this.props.tabId + '-body');
-                tableBody.scrollTop = this.groupByRowsPositions[stickyRowIndex + 1];
-            }
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this6 = this;
-
-            var _props = this.props,
-                classes = _props.classes,
-                tabId = _props.tabId,
-                columns = _props.columns,
-                orderedColumns = _props.orderedColumns,
-                dataSource = _props.dataSource,
-                orderable = _props.orderable,
-                onColumnsOrderUpdate = _props.onColumnsOrderUpdate,
-                mandatoryColumnId = _props.mandatoryColumnId,
-                selectable = _props.selectable,
-                selectedIdList = _props.selectedIdList,
-                onRowClick = _props.onRowClick,
-                sortable = _props.sortable,
-                sortedColumnId = _props.sortedColumnId,
-                sortDirection = _props.sortDirection,
-                onSort = _props.onSort,
-                filterable = _props.filterable,
-                onFilterChange = _props.onFilterChange,
-                infiniteScroll = _props.infiniteScroll,
-                hasNextDatas = _props.hasNextDatas,
-                requestNextDatas = _props.requestNextDatas,
-                countLiveDatas = _props.countLiveDatas,
-                dateLocale = _props.dateLocale,
-                numberLocale = _props.numberLocale,
-                dense = _props.dense,
-                height = _props.height,
-                sticky = _props.sticky,
-                translations = _props.translations,
-                view = _props.view,
-                groupBy = _props.groupBy,
-                lookupColumns = _props.lookupColumns,
-                loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth;
-            var _state = this.state,
-                dateUpdate = _state.dateUpdate,
-                isScrollToBottom = _state.isScrollToBottom,
-                groupByIds = _state.groupByIds;
-
-
-            var headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
-
-            return _react2.default.createElement(
-                'div',
-                { className: classes.root },
-                _react2.default.createElement(
-                    'div',
-                    {
-                        id: tabId,
-                        className: classes.tableWrapper,
-                        ref: function ref(div) {
-                            return _this6.wrapperDiv = div;
-                        },
-                        onScroll: this.handleHorizontalScroll
-                    },
-                    _react2.default.createElement(
-                        _Table2.default,
-                        { className: classes.table, style: { height: height } },
-                        _react2.default.createElement(_HiTableHead2.default, {
-                            columns: columns,
-                            orderedColumns: orderedColumns,
-                            dataSource: dataSource,
-                            selectable: selectable,
-                            selectedIdList: selectedIdList,
-                            onSelect: this.toggleAll,
-                            sortable: sortable,
-                            sortedColumnId: sortedColumnId,
-                            sortDirection: sortDirection,
-                            onSort: onSort,
-                            filterable: filterable,
-                            onFilterChange: onFilterChange,
-                            orderable: orderable,
-                            onColumnsOrderUpdate: onColumnsOrderUpdate,
-                            mandatoryColumnId: mandatoryColumnId,
-                            onRequestLiveDatas: this.handleRequestLiveDatas,
-                            countLiveDatas: countLiveDatas,
-                            dateLocale: dateLocale,
-                            numberLocale: numberLocale,
-                            dense: dense,
-                            height: headerHeight,
-                            sticky: sticky,
-                            view: view,
-                            translations: translations,
-                            lookupColumns: lookupColumns,
-                            fixedColumnWidth: fixedColumnWidth
-                        }),
-                        _react2.default.createElement(_HiTableBody2.default, {
-                            tabId: tabId,
-                            columns: columns,
-                            orderedColumns: orderedColumns,
-                            dataSource: dataSource,
-                            selectable: selectable,
-                            selectedIdList: selectedIdList,
-                            sortedColumnId: sortedColumnId,
-                            onSelect: this.toggleItem,
-                            dateUpdate: dateUpdate,
-                            dateLocale: dateLocale,
-                            numberLocale: numberLocale,
-                            dense: dense,
-                            height: height - headerHeight,
-                            sticky: sticky,
-                            view: view,
-                            onRowClick: onRowClick,
-                            onScroll: this.handleVerticalScroll,
-                            addNewRowRefs: this.addNewRowRefs,
-                            translations: translations,
-                            groupBy: groupBy,
-                            onClickNext: this.handleNextStickyRow,
-                            groupByIds: groupByIds,
-                            lookupColumns: lookupColumns,
-                            loading: loading,
-                            fixedColumnWidth: fixedColumnWidth
-                        }),
-                        infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
-                            tabId: tabId,
-                            hasNextDatas: hasNextDatas,
-                            requestNextDatas: requestNextDatas,
-                            maxAutoRequest: 3,
-                            isScrollToBottom: isScrollToBottom,
-                            translations: translations
-                        })
-                    ),
-                    _react2.default.createElement(_HiTableContextMenu2.default, {
-                        tabId: tabId,
-                        onSearch: this.props.onSearch,
-                        onRedirect: this.props.onRedirect
-                    }),
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'back-to-top-button ' + classes.backToTopButtonContainer },
-                        _react2.default.createElement(
-                            _HiButton2.default,
-                            {
-                                variant: 'raised',
-                                color: 'primary',
-                                className: classes.backToTopButton,
-                                onClick: function onClick() {
-                                    return _this6.scrollToTop();
-                                }
-                            },
-                            _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow }),
-                            translations.back_to_top,
-                            _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow })
-                        )
-                    )
-                )
-            );
-        }
-    }]);
-    return HiTable;
-}(_react2.default.Component);
-
-HiTable.defaultProps = {
-    orderable: false,
-    selectable: false,
-    sortable: true,
-    sortDirection: 'asc',
-    filterable: true,
-    infiniteScroll: false,
-    hasNextDatas: false,
-    countLiveDatas: 0,
-    dateLocale: 'en-EN',
-    numberLocale: 'en-EN',
-    dense: false,
-    height: 450,
-    sticky: true,
-    translations: {
-        load_more: 'Load More',
-        back_to_top: 'Back to top',
-        get_the_n_new_items: 'See %s new items',
-        choose_and_organize_columns: 'Choose & organize columns',
-        search: 'Search',
-        time: 'Time',
-        stickyRow: {
-            button: {
-                next: 'Next day'
-            }
-        }
-    },
-    view: 'l',
-    lookupColumns: [],
-    loading: false,
-    fixedColumnWidth: true
-};
-HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * Colonnes du tableau (label, largeur, données, ... )
-     */
-    columns: _propTypes2.default.object.isRequired,
-    /**
-     * Nombre de nouvelles données disponibles (live)
-     */
-    countLiveDatas: _propTypes2.default.number,
-    /**
-     * Tableau des données
-     */
-    dataSource: _propTypes2.default.array.isRequired,
-    /**
-     * Locale utilisé pour le format des dates
-     */
-    dateLocale: _propTypes2.default.string,
-    /**
-     * Densité d'affichage (joue sur la hauteur des lignes)
-     */
-    dense: _propTypes2.default.bool,
-    /**
-     * Active le filtre sur les colonnes filtrables
-     */
-    filterable: _propTypes2.default.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: _propTypes2.default.string,
-    /**
-     * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
-     */
-    hasNextDatas: _propTypes2.default.bool,
-    /**
-     * Hauteur du tableau (px)
-     */
-    height: _propTypes2.default.number,
-    /**
-     * Ajoute l'infinite scroll
-     */
-    infiniteScroll: _propTypes2.default.bool,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: _propTypes2.default.bool,
-    /**
-     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
-     */
-    lookupColumns: _propTypes2.default.array,
-    /**
-     * Pour les tableaux "orderable" uniquement : Id de la colonne obligatoire,
-     * elle sera toujours affichée dans le tableau et ne pourra pas être cachée.
-     */
-    mandatoryColumnId: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
-        return props.hasOwnProperty('orderable') && props.orderable === true;
-    }, MANDATORY_COLUMN_ERROR_MESSAGE),
-    /**
-     * Locale utilisé pour le format des nombres
-     */
-    numberLocale: _propTypes2.default.string,
-    /**
-     * Fonction de callback qui prend en paramètre le tableau des colonnes mis à jour.
-     */
-    onColumnsOrderUpdate: _propTypes2.default.func,
-    /**
-     * Fonction de callback sur le filtre d'une colonne
-     * Passe l'id de la colonne et la liste des id des éléments inclus
-     */
-    onFilterChange: _propTypes2.default.func,
-    /**
-     * Fonction de callback appelée au clic sur l'item redirection
-     * du menu contextuel ouvert au clic droit
-     *
-     * @param {int} id
-     */
-    onRedirect: _propTypes2.default.func,
-    /**
-     * Fonction de callback au click sur une ligne
-     * Passe l'element (row)
-     */
-    onRowClick: _propTypes2.default.func,
-    /**
-     * Fonction de callback appelée au clic sur les items de recherche
-     * du menu contextuel ouvert au clic droit
-     *
-     * @param {string} searched field
-     * @param {string} searched value
-     * @param {string} search type (lookup, exclude)
-     */
-    onSearch: _propTypes2.default.func,
-    /**
-     * Fonction de callback sur la sélection d'une ligne
-     * (ou sélection/déselection de tous dans le header)
-     * Passe la liste des id des lignes sélectionnées (selectedIdList)
-     */
-    onSelect: _propTypes2.default.func,
-    /**
-     * Fonction de callback sur le tri d'une colonne
-     * Passe l'id de la colonne et la direction du tri (ou false si tri par défaut)
-     */
-    onSort: _propTypes2.default.func,
-    /**
-     * L'utilisateur peut changer l'ordre des colonnes,
-     * les afficher ou non, et changer la vue de chaque colonne (small, medium, large).
-     */
-    orderable: _propTypes2.default.bool,
-    /**
-     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
-     */
-    orderedColumns: _propTypes2.default.array.isRequired,
-    /**
-     * Fonction de callback requérant l'affichage des nouvelles données (live)
-     */
-    requestLiveDatas: _propTypes2.default.func,
-    /**
-     * Fonction de callback requérant l'affichage des données suivantes
-     */
-    requestNextDatas: _propTypes2.default.func,
-    /**
-     * [v2 - à venir] Les lignes sont sélectionnables (affichage d'une checkbox)
-     */
-    selectable: _propTypes2.default.bool,
-    /**
-     * Liste des id des lignes sélectionnées
-     */
-    selectedIdList: _propTypes2.default.array,
-    /**
-     * Active le tri sur les colonnes
-     */
-    sortable: _propTypes2.default.bool,
-    /**
-     * Sens du tri
-     */
-    sortDirection: _propTypes2.default.oneOf(['asc', 'desc']),
-    /**
-     * Id de la colonne trié
-     */
-    sortedColumnId: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
-        return props.hasOwnProperty('sortable') && props.sortable === true;
-    }, SORTED_COLUMN_ERROR_MESSAGE),
-    /**
-     * Fixe la première colonne
-     */
-    sticky: _propTypes2.default.bool,
-    /**
-     * Identifiant unique à spécifier si on utilise plusieurs composants HiTable
-     */
-    tabId: _propTypes2.default.string.isRequired,
-    /**
-     * Traduction des chaînes affichées
-     */
-    translations: _propTypes2.default.object,
-    /**
-     * Taille du tableau (L/M/S),
-     * définit l'espace entre les cellules et leurs tailles par default
-     */
-    view: _propTypes2.default.oneOf(['l', 'm', 's'])
-} : {};
-exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);