@hipay/hipay-material-ui 1.0.0-beta.28 → 1.0.0-beta.3

package/es/HiTable/HiTable.js

@@ -5,11 +5,10 @@ import ArrowUp from 'mdi-material-ui/ArrowUp';
 import isRequiredIf from 'react-proptype-conditional-require';
 import HiButton from '../HiButton';
 
-import { withStyles } from '../styles';
+import { withStyles, withTheme } from '../styles';
 import HiTableHead from './HiTableHead';
 import HiTableBody from './HiTableBody';
 import HiTableFooterScroll from './HiTableFooterScroll';
-import HiTableFooter from './HiTableFooter';
 import * as cst from './constants';
 import HiTableContextMenu from './HiTableContextMenu';
 
@@ -124,18 +123,16 @@ class HiTable extends React.Component {
         this.groupByRowsPositions = [];
 
         this.updateFloatingBodyElementRefs = () => {
-            if (this.tBody) {
-                this.tBodyScrollbarWidth = this.tBody.offsetWidth - this.tBody.clientWidth;
+            this.tBodyScrollbarWidth = this.tBody.offsetWidth - this.tBody.clientWidth;
 
-                if (this.tHead && this.tBodyScrollbarWidth > 0) {
-                    this.tHead.style.width = 'calc(100% - ' + this.tBodyScrollbarWidth + 'px)';
-                }
+            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.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.tBodyFirstElements = this.tBody.querySelectorAll('tr td:nth-child(2)');
         };
 
         this.addNewRowRefs = () => {
@@ -148,9 +145,27 @@ class HiTable extends React.Component {
 
         this.state = {
             dateUpdate: Date.now(),
-            isScrollToBottom: false
+            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);
@@ -243,14 +258,31 @@ class HiTable extends 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.tBody) {
-            this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
+        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();
     }
 
@@ -261,13 +293,11 @@ class HiTable extends React.Component {
         this.groupByRowsPositions = [];
         // Initialize new stickyRows position
         const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        if (tableBody) {
-            const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
-            if (stickyRows.length > 0) {
-                Array.prototype.filter.call(stickyRows, stickyRow => {
-                    this.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
-                });
-            }
+        const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+        if (stickyRows.length > 0) {
+            Array.prototype.filter.call(stickyRows, stickyRow => {
+                this.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
+            });
         }
     }
 
@@ -364,14 +394,13 @@ class HiTable extends React.Component {
         }
 
         this.handleStickyRowPositions();
-        if (this.tBody) {
-            this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
-        }
+
+        this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
     }
 
     handleStickyRowPositions() {
         const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        const stickyRows = tableBody ? tableBody.getElementsByClassName('stickyGroupBy') : [];
+        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) => {
@@ -464,7 +493,7 @@ class HiTable extends React.Component {
 
         // Replace stickyRowContent
         const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        const stickyRowContentDiv = tableBody ? tableBody.getElementsByClassName('stickyRowContent') : [];
+        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`;
@@ -485,9 +514,7 @@ class HiTable extends React.Component {
         this.backToTopButton['style'].top = -99999 + 'px';
 
         // Set scroll top to 0
-        if (this.tBody) {
-            this.tBody.scrollTop = 0;
-        }
+        this.tBody.scrollTop = 0;
         this.scrollTop = 0;
     }
 
@@ -554,26 +581,13 @@ class HiTable extends React.Component {
             translations,
             view,
             groupBy,
-            lookupColumns,
-            loading,
-            fixedColumnWidth,
-            disableContextMenu,
-            footerContent,
-            detailRowsOptions,
-            noResultsContent
+            lookupColumns
         } = this.props;
 
-        const { dateUpdate, isScrollToBottom } = this.state;
+        const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
 
         const headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
 
-        let nbColumnsDisplayed = 0;
-        orderedColumns.forEach(column => {
-            if (column.displayed !== false) {
-                nbColumnsDisplayed += 1;
-            }
-        });
-
         return React.createElement(
             'div',
             { className: classes.root },
@@ -612,11 +626,10 @@ class HiTable extends React.Component {
                         height: headerHeight,
                         sticky: sticky,
                         view: view,
-                        translations: translations.tableHead,
-                        lookupColumns: lookupColumns,
-                        fixedColumnWidth: fixedColumnWidth
+                        translations: translations,
+                        lookupColumns: lookupColumns
                     }),
-                    dataSource.length > 0 && React.createElement(HiTableBody, {
+                    React.createElement(HiTableBody, {
                         tabId: tabId,
                         columns: columns,
                         orderedColumns: orderedColumns,
@@ -635,35 +648,23 @@ class HiTable extends React.Component {
                         onRowClick: onRowClick,
                         onScroll: this.handleVerticalScroll,
                         addNewRowRefs: this.addNewRowRefs,
-                        translations: translations.tableBody,
+                        translations: translations,
                         groupBy: groupBy,
                         onClickNext: this.handleNextStickyRow,
-                        lookupColumns: lookupColumns,
-                        loading: loading,
-                        fixedColumnWidth: fixedColumnWidth,
-                        disableContextMenu: disableContextMenu,
-                        detailRowsOptions: detailRowsOptions
+                        groupByIds: groupByIds,
+                        lookupColumns: lookupColumns
                     }),
-                    dataSource.length > 0 && infiniteScroll && React.createElement(HiTableFooterScroll, {
+                    infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
                         hasNextDatas: hasNextDatas,
                         requestNextDatas: requestNextDatas,
                         maxAutoRequest: 3,
                         isScrollToBottom: isScrollToBottom,
-                        translations: translations.tableFooterScroll
-                    }),
-                    dataSource.length > 0 && !infiniteScroll && footerContent && React.createElement(
-                        HiTableFooter,
-                        {
-                            nbColumnsDisplayed: nbColumnsDisplayed,
-                            view: view
-                        },
-                        footerContent
-                    )
+                        translations: translations
+                    })
                 ),
                 React.createElement(HiTableContextMenu, {
                     tabId: tabId,
-                    columns: columns,
                     onSearch: this.props.onSearch,
                     onRedirect: this.props.onRedirect
                 }),
@@ -673,7 +674,7 @@ class HiTable extends React.Component {
                     React.createElement(
                         HiButton,
                         {
-                            variant: 'raised',
+                            raised: true,
                             color: 'primary',
                             className: classes.backToTopButton,
                             onClick: () => this.scrollToTop()
@@ -683,8 +684,7 @@ class HiTable extends React.Component {
                         React.createElement(ArrowUp, { className: classes.backToTopButtonArrow })
                     )
                 )
-            ),
-            dataSource.length === 0 && noResultsContent && noResultsContent
+            )
         );
     }
 }
@@ -701,18 +701,23 @@ HiTable.defaultProps = {
     dateLocale: 'en-EN',
     numberLocale: 'en-EN',
     dense: false,
-    detailRowsOptions: {},
     height: 450,
     sticky: true,
     translations: {
-        back_to_top: 'Back to top'
+        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,
-    disableContextMenu: true,
-    noResultsContent: null
+    lookupColumns: []
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -735,42 +740,14 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Locale utilisé pour le format des dates
      */
     dateLocale: PropTypes.string,
-    /**
-     * Options utilisées pour décrire le comportement de lignes de détails
-     * ex: {
-     *     payment_operation: {
-     *         anchor: 'transaction_id'
-     *     }
-     * }
-     * dans cet exemple, on veut que les lignes de détails de type payment_operation
-     * soient affichable à partir d'un chip button dans les cellules transaction_id
-     */
-    detailRowsOptions: PropTypes.object,
     /**
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
-    /**
-     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
-     */
-    disableContextMenu: PropTypes.bool.isRequired,
     /**
      * Active le filtre sur les colonnes filtrables
      */
     filterable: PropTypes.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: PropTypes.bool,
-    /**
-     * Ajoute un footer avec le contenu footerContent à l'intérieur
-     */
-    footerContent: PropTypes.node,
-    /**
-     * 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é)
      */
@@ -783,10 +760,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * 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
      */
@@ -839,9 +812,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * 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)
-     *
-     * @param {string} column id
-     * @param {string} direction
      */
     onSort: PropTypes.func,
     /**
@@ -899,8 +869,8 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     view: PropTypes.oneOf(['l', 'm', 's']),
     /**
-     * No results content.
+     * Id de la colonne par laquelle sont regroupé les éléments
      */
-    noResultsContent: PropTypes.object
+    groupBy: PropTypes.string
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);