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

package/es/HiTable/HiTable.js

@@ -1,883 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Table from 'material-ui/Table';
-import ArrowUp from 'mdi-material-ui/ArrowUp';
-import isRequiredIf from 'react-proptype-conditional-require';
-import HiButton from '../HiButton';
-
-import { withStyles, withTheme } from '../styles';
-import HiTableHead from './HiTableHead';
-import HiTableBody from './HiTableBody';
-import HiTableFooterScroll from './HiTableFooterScroll';
-import * as cst from './constants';
-import HiTableContextMenu from './HiTableContextMenu';
-
-export const styles = theme => ({
-    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
-    }
-});
-
-export const MANDATORY_COLUMN_ERROR_MESSAGE = 'Vous devez saisir la propriété "mandatoryColumnId" pour les tableaux "orderable"';
-export const 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 = React.createElement('div', null);
-
-var _ref2 = React.createElement('div', null);
-
-var _ref3 = React.createElement('div', null);
-
-var _ref4 = React.createElement('div', null);
-
-var _ref5 = React.createElement('div', null);
-
-var _ref6 = React.createElement('div', null);
-
-var _ref7 = React.createElement('div', null);
-
-var _ref8 = React.createElement('div', null);
-
-class HiTable extends React.Component {
-
-    constructor(props) {
-        super(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 = () => {
-            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 = () => {
-            // delayed refs getting to let time at new rows to build up
-            setTimeout(() => {
-                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(row => {
-                let value = row.datas[props.groupBy].value;
-                let 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);
-    }
-
-    /**
-     * DOM references
-     * use to replace element on horizontal & vertical scroll
-     */
-
-
-    /** Lifecycle methods */
-
-    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();
-    }
-
-    componentDidUpdate(prevProps, prevState, prevContext) {
-        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
-            let groupByIds = {};
-            this.props.dataSource.map(row => {
-                let value = row.datas[this.props.groupBy].value;
-                let 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   */
-
-    updateStickyRowsPosition() {
-        const rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
-        this.groupByRowsPositions = [];
-        // Initialize new stickyRows position
-        const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
-        if (stickyRows.length > 0) {
-            Array.prototype.filter.call(stickyRows, stickyRow => {
-                this.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
-            });
-        }
-    }
-
-    isScrollToBottom(value) {
-        if (this.state.isScrollToBottom !== value) {
-            this.setState({
-                isScrollToBottom: value
-            });
-        }
-    }
-
-    /**
-     * Ajoute / Supprime l'id de l'item du selectedIdList
-     * @param item
-     */
-    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([...this.props.selectedIdList, item.rowId]);
-        }
-    }
-
-    /**
-     * Sélectionne / Déselectionne tous les éléments en fonction de l'état de la liste
-     */
-    toggleAll() {
-        if (this.props.selectedIdList.length === this.props.dataSource.length) {
-            this.deselectAll();
-        } else {
-            this.selectAll();
-        }
-    }
-
-    /**
-     * Sélectionne tous les items
-     */
-    selectAll() {
-        this.props.onSelect(this.props.dataSource.map(item => item.rowId));
-    }
-
-    /**
-     * Désélectionne tous les items
-     */
-    deselectAll() {
-        this.props.onSelect([]);
-    }
-
-    /**
-     * Handle horizontal scroll (wrapperDiv)
-     * - replace each first cells body & header & add right shadows
-     */
-    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
-     */
-    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;
-
-        const scrollingUp = this.scrollTop > event.target.scrollTop;
-
-        this.scrollTop = event.target.scrollTop;
-
-        // Add bottom shadow to header row
-        const shadowBottom = '0px 0px 2px 0px rgba(128, 128, 128, 0.32)';
-        this.tHead.style['box-shadow'] = this.scrollTop > 0 ? shadowBottom : 'none';
-        const 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);
-    }
-
-    handleStickyRowPositions() {
-        const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
-        const rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
-        if (stickyRows.length > 0) {
-            Array.prototype.filter.call(stickyRows, (stickyRow, index) => {
-                const fakeTr = stickyRow.nextSibling;
-                if (tableBody.scrollTop > this.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 this.groupByRowsPositions[index + 1] !== 'undefined' && this.groupByRowsPositions[index + 1] - tableBody.scrollTop < rowHeight - 10) {
-                            stickyRow.style.top = `${tableBody.scrollTop + this.groupByRowsPositions[index + 1] - tableBody.scrollTop - rowHeight}
-                                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 = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 8}px` : `${cst.CELL_HEIGHT - 8}px`;
-                            stickyRow.querySelector('button').style.maxHeight = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 16}px` : `${cst.CELL_HEIGHT - 16}px`;
-                            stickyRow.querySelector('button').style.minHeight = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 16}px` : `${cst.CELL_HEIGHT - 16}px`;
-                            stickyRow.querySelector('button').style.top = '-3px';
-                            stickyRow.querySelector('#stickyRowContent').style.top = !this.props.dense ? '4px' : '-3px';
-                            stickyRow.querySelector('td').style.height = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 8}px` : `${cst.CELL_HEIGHT - 8}px`;
-                            if (this.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 = this.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 = this.props.dense ? `${cst.CELL_HEIGHT_DENSE}px` : `${cst.CELL_HEIGHT}px`;
-                    stickyRow.querySelector('button').style.maxHeight = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 2}px` : `${cst.CELL_HEIGHT - 8}px`;
-                    stickyRow.querySelector('button').style.minHeight = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 2}px` : `${cst.CELL_HEIGHT - 8}px`;
-                    if (this.props.dense) {
-                        stickyRow.querySelector('button span').style.top = '0px';
-                    }
-                }
-            });
-        }
-    }
-
-    /**
-     * Some element must be replace "manually"
-     */
-    placeHorizontalFloatingElement() {
-        // live datas notification
-        if (this.liveDataSpan) {
-            this.liveDataSpan.style.left = this.wrapperDiv.clientWidth / 2 - 100 + this.scrollLeft + 'px';
-        }
-
-        // Replace left padding cells
-        [...this.tBodyLeftPaddingElements, this.tHeadLeftPadding].forEach(element => {
-            element.style.left = this.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
-        [...this.tBodyRightPaddingElements, this.tHeadRightPadding].forEach(element => {
-            element.style.right = Math.max(0, this.wrapperScrollOffset - this.scrollLeft - this.tBodyScrollbarWidth) + 'px';
-        });
-
-        // Replace first cells & add right shadows
-        if (this.props.sticky) {
-            const shadowRight = '1px 0px 0px 0px rgba(128, 128, 128, 0.32)';
-            [...this.tBodyFirstElements, this.tHeadFirst].forEach(element => {
-                element.style.left = this.scrollLeft + 'px';
-                element.style['box-shadow'] = this.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
-        const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        const stickyRowContentDiv = tableBody.getElementsByClassName('stickyRowContent');
-        if (stickyRowContentDiv.length > 0) {
-            Array.prototype.filter.call(stickyRowContentDiv, div => {
-                div.style.left = `${this.wrapperDiv.scrollLeft + (this.props.selectable ? 25 : 0)}px`;
-            });
-        }
-    }
-
-    handleRequestLiveDatas() {
-        this.scrollToTop();
-        this.props.requestLiveDatas();
-    }
-
-    /**
-     * Scroll back to table top
-     */
-    scrollToTop() {
-        // Hide back to top button
-        this.backToTopButton['style'].top = -99999 + 'px';
-
-        // Set scroll top to 0
-        this.tBody.scrollTop = 0;
-        this.scrollTop = 0;
-    }
-
-    openOrderColumnsMenu(event) {
-        this.setState({
-            orderColumnsAnchor: event.currentTarget,
-            orderColumnsMenuOpen: true
-        });
-    }
-
-    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
-     **/
-
-
-    /**
-     * Scroll jusqu'au prochain stickRow
-     *
-     * @param stickyRowIndex
-     */
-    handleNextStickyRow(stickyRowIndex) {
-        if (this.groupByRowsPositions.length - 1 > stickyRowIndex) {
-            const tableBody = document.getElementById(`${this.props.tabId}-body`);
-            tableBody.scrollTop = this.groupByRowsPositions[stickyRowIndex + 1];
-        }
-    }
-
-    render() {
-        const {
-            classes,
-            tabId,
-            columns,
-            orderedColumns,
-            dataSource,
-            orderable,
-            onColumnsOrderUpdate,
-            mandatoryColumnId,
-            selectable,
-            selectedIdList,
-            onRowClick,
-            sortable,
-            sortedColumnId,
-            sortDirection,
-            onSort,
-            filterable,
-            onFilterChange,
-            infiniteScroll,
-            hasNextDatas,
-            requestNextDatas,
-            countLiveDatas,
-            dateLocale,
-            numberLocale,
-            dense,
-            height,
-            sticky,
-            translations,
-            view,
-            groupBy,
-            lookupColumns,
-            loading
-        } = this.props;
-
-        const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
-
-        const headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
-
-        return React.createElement(
-            'div',
-            { className: classes.root },
-            React.createElement(
-                'div',
-                {
-                    id: tabId,
-                    className: classes.tableWrapper,
-                    ref: div => this.wrapperDiv = div,
-                    onScroll: this.handleHorizontalScroll
-                },
-                React.createElement(
-                    Table,
-                    { className: classes.table, style: { height: height } },
-                    React.createElement(HiTableHead, {
-                        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
-                    }),
-                    React.createElement(HiTableBody, {
-                        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
-                    }),
-                    infiniteScroll && React.createElement(HiTableFooterScroll, {
-                        tabId: tabId,
-                        hasNextDatas: hasNextDatas,
-                        requestNextDatas: requestNextDatas,
-                        maxAutoRequest: 3,
-                        isScrollToBottom: isScrollToBottom,
-                        translations: translations
-                    })
-                ),
-                React.createElement(HiTableContextMenu, {
-                    tabId: tabId,
-                    onSearch: this.props.onSearch,
-                    onRedirect: this.props.onRedirect
-                }),
-                React.createElement(
-                    'div',
-                    { className: `back-to-top-button ${classes.backToTopButtonContainer}` },
-                    React.createElement(
-                        HiButton,
-                        {
-                            variant: 'raised',
-                            color: 'primary',
-                            className: classes.backToTopButton,
-                            onClick: () => this.scrollToTop()
-                        },
-                        React.createElement(ArrowUp, { className: classes.backToTopButtonArrow }),
-                        translations.back_to_top,
-                        React.createElement(ArrowUp, { className: classes.backToTopButtonArrow })
-                    )
-                )
-            )
-        );
-    }
-}
-
-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
-};
-HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Colonnes du tableau (label, largeur, données, ... )
-     */
-    columns: PropTypes.object.isRequired,
-    /**
-     * Nombre de nouvelles données disponibles (live)
-     */
-    countLiveDatas: PropTypes.number,
-    /**
-     * Tableau des données
-     */
-    dataSource: PropTypes.array.isRequired,
-    /**
-     * Locale utilisé pour le format des dates
-     */
-    dateLocale: PropTypes.string,
-    /**
-     * Densité d'affichage (joue sur la hauteur des lignes)
-     */
-    dense: PropTypes.bool,
-    /**
-     * Active le filtre sur les colonnes filtrables
-     */
-    filterable: PropTypes.bool,
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: PropTypes.string,
-    /**
-     * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
-     */
-    hasNextDatas: PropTypes.bool,
-    /**
-     * Hauteur du tableau (px)
-     */
-    height: PropTypes.number,
-    /**
-     * Ajoute l'infinite scroll
-     */
-    infiniteScroll: PropTypes.bool,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: PropTypes.bool,
-    /**
-     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
-     */
-    lookupColumns: PropTypes.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: isRequiredIf(PropTypes.string, props => props.hasOwnProperty('orderable') && props.orderable === true, MANDATORY_COLUMN_ERROR_MESSAGE),
-    /**
-     * Locale utilisé pour le format des nombres
-     */
-    numberLocale: PropTypes.string,
-    /**
-     * Fonction de callback qui prend en paramètre le tableau des colonnes mis à jour.
-     */
-    onColumnsOrderUpdate: PropTypes.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: PropTypes.func,
-    /**
-     * Fonction de callback appelée au clic sur l'item redirection
-     * du menu contextuel ouvert au clic droit
-     *
-     * @param {int} id
-     */
-    onRedirect: PropTypes.func,
-    /**
-     * Fonction de callback au click sur une ligne
-     * Passe l'element (row)
-     */
-    onRowClick: PropTypes.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: PropTypes.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: PropTypes.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: PropTypes.func,
-    /**
-     * L'utilisateur peut changer l'ordre des colonnes,
-     * les afficher ou non, et changer la vue de chaque colonne (small, medium, large).
-     */
-    orderable: PropTypes.bool,
-    /**
-     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
-     */
-    orderedColumns: PropTypes.array.isRequired,
-    /**
-     * Fonction de callback requérant l'affichage des nouvelles données (live)
-     */
-    requestLiveDatas: PropTypes.func,
-    /**
-     * Fonction de callback requérant l'affichage des données suivantes
-     */
-    requestNextDatas: PropTypes.func,
-    /**
-     * [v2 - à venir] Les lignes sont sélectionnables (affichage d'une checkbox)
-     */
-    selectable: PropTypes.bool,
-    /**
-     * Liste des id des lignes sélectionnées
-     */
-    selectedIdList: PropTypes.array,
-    /**
-     * Active le tri sur les colonnes
-     */
-    sortable: PropTypes.bool,
-    /**
-     * Sens du tri
-     */
-    sortDirection: PropTypes.oneOf(['asc', 'desc']),
-    /**
-     * Id de la colonne trié
-     */
-    sortedColumnId: isRequiredIf(PropTypes.string, props => props.hasOwnProperty('sortable') && props.sortable === true, SORTED_COLUMN_ERROR_MESSAGE),
-    /**
-     * Fixe la première colonne
-     */
-    sticky: PropTypes.bool,
-    /**
-     * Identifiant unique à spécifier si on utilise plusieurs composants HiTable
-     */
-    tabId: PropTypes.string.isRequired,
-    /**
-     * Traduction des chaînes affichées
-     */
-    translations: PropTypes.object,
-    /**
-     * Taille du tableau (L/M/S),
-     * définit l'espace entre les cellules et leurs tailles par default
-     */
-    view: PropTypes.oneOf(['l', 'm', 's'])
-} : {};
-export default withStyles(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);