@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.20

package/es/HiTable/HiTable.js

@@ -5,10 +5,11 @@ import ArrowUp from 'mdi-material-ui/ArrowUp';
 import isRequiredIf from 'react-proptype-conditional-require';
 import HiButton from '../HiButton';
 
-import { withStyles, withTheme } from '../styles';
+import { withStyles } 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';
 
@@ -581,13 +582,25 @@ class HiTable extends React.Component {
             translations,
             view,
             groupBy,
-            lookupColumns
+            lookupColumns,
+            loading,
+            fixedColumnWidth,
+            disableContextMenu,
+            footerContent,
+            detailRowsOptions
         } = this.props;
 
         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 },
@@ -627,7 +640,8 @@ class HiTable extends React.Component {
                         sticky: sticky,
                         view: view,
                         translations: translations,
-                        lookupColumns: lookupColumns
+                        lookupColumns: lookupColumns,
+                        fixedColumnWidth: fixedColumnWidth
                     }),
                     React.createElement(HiTableBody, {
                         tabId: tabId,
@@ -652,7 +666,11 @@ class HiTable extends React.Component {
                         groupBy: groupBy,
                         onClickNext: this.handleNextStickyRow,
                         groupByIds: groupByIds,
-                        lookupColumns: lookupColumns
+                        lookupColumns: lookupColumns,
+                        loading: loading,
+                        fixedColumnWidth: fixedColumnWidth,
+                        disableContextMenu: disableContextMenu,
+                        detailRowsOptions: detailRowsOptions
                     }),
                     infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
@@ -661,7 +679,15 @@ class HiTable extends React.Component {
                         maxAutoRequest: 3,
                         isScrollToBottom: isScrollToBottom,
                         translations: translations
-                    })
+                    }),
+                    !infiniteScroll && footerContent && React.createElement(
+                        HiTableFooter,
+                        {
+                            nbColumnsDisplayed: nbColumnsDisplayed,
+                            view: view
+                        },
+                        footerContent
+                    )
                 ),
                 React.createElement(HiTableContextMenu, {
                     tabId: tabId,
@@ -674,7 +700,7 @@ class HiTable extends React.Component {
                     React.createElement(
                         HiButton,
                         {
-                            raised: true,
+                            variant: 'raised',
                             color: 'primary',
                             className: classes.backToTopButton,
                             onClick: () => this.scrollToTop()
@@ -701,6 +727,7 @@ HiTable.defaultProps = {
     dateLocale: 'en-EN',
     numberLocale: 'en-EN',
     dense: false,
+    detailRowsOptions: {},
     height: 450,
     sticky: true,
     translations: {
@@ -717,7 +744,10 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: []
+    lookupColumns: [],
+    loading: false,
+    fixedColumnWidth: true,
+    disableContextMenu: true
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -740,14 +770,42 @@ 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é)
      */
@@ -760,6 +818,10 @@ 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
      */
@@ -812,6 +874,9 @@ 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,
     /**
@@ -867,10 +932,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default
      */
-    view: PropTypes.oneOf(['l', 'm', 's']),
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: PropTypes.string
+    view: PropTypes.oneOf(['l', 'm', 's'])
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

package/es/HiTable/HiTableBody.js

@@ -2,23 +2,24 @@ import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableBody, TableRow } from 'material-ui/Table';
-import { withStyles, withTheme } from '../styles';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
 import BodyRow from './BodyRow';
 import ChildRow from './ChildRow';
 import HiStickyRow from './HiStickyRow';
 import * as cst from './constants';
-import { SORTED_COLUMN_ERROR_MESSAGE } from './HiTableHead';
-import isRequiredIf from 'react-proptype-conditional-require';
 
 export const styles = theme => ({
     tbody: {
         position: 'relative',
-        display: 'block' /* seperates the tbody from the header */
-        , width: '100%',
+        width: '100%',
         overflowX: 'hidden',
         overflowY: 'auto',
         zIndex: 11
     },
+    tbodyFixedWidth: {
+        display: 'block' /* seperates the tbody from the header */
+    },
     tbodyRows: {
         backgroundColor: theme.palette.background3
     },
@@ -149,14 +150,16 @@ class HiTableBody extends React.Component {
     /**
      * Définit les id des lignes dont les détails sont affichés ou null
      * (ajoute une ligne pour chaque détails)
+     * vérifie aussi le type du détail
      *
      * @param rowId
+     * @param type
      */
-    toggleOpenedDetailsRowId(rowId) {
+    toggleOpenedDetailsRowId(rowId, type) {
         this.setState(prevState => ({
-            openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(id => {
-                return id !== rowId;
-            }) : [...prevState.openedDetailsRowIdList, rowId]
+            openedDetailsRowIdList: prevState.openedDetailsRowIdList.find(item => item.id === rowId && item.type === type) ? prevState.openedDetailsRowIdList.filter(item => {
+                return item.id !== rowId || item.type !== type;
+            }) : [...prevState.openedDetailsRowIdList, { id: rowId, type: type }]
         }));
         this.props.addNewRowRefs();
     }
@@ -191,7 +194,11 @@ class HiTableBody extends React.Component {
             numberLocale,
             groupByIds,
             sortedColumnId,
-            lookupColumns
+            lookupColumns,
+            loading,
+            fixedColumnWidth,
+            disableContextMenu,
+            detailRowsOptions
         } = this.props;
 
         const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -262,9 +269,6 @@ class HiTableBody extends React.Component {
             // has children
             const hasChildren = row.hasOwnProperty('children') && row.children.length > 0;
 
-            // has detail rows
-            const hasDetailRows = row.hasOwnProperty('detailRows') && row.detailRows.length > 0;
-
             const BodyRowProps = _extends({
                 columns,
                 dateLocale,
@@ -276,9 +280,9 @@ class HiTableBody extends React.Component {
             }, hasChildren && {
                 openedAsParent: openedParentRowId === row.rowId,
                 onClick: this.setOpenedParentRowId // if row has children, onClick display the children
-            }, hasDetailRows && {
-                onOpenRowDetails: this.toggleOpenedDetailsRowId
             }, {
+                onOpenRowDetails: this.toggleOpenedDetailsRowId,
+                detailRowsOptions,
                 orderedColumns
             }, selectable && {
                 selectable,
@@ -288,7 +292,9 @@ class HiTableBody extends React.Component {
                 row,
                 sticky,
                 tabId,
-                view
+                view,
+                fixedColumnWidth,
+                disableContextMenu
             });
 
             if (hasChildren && openedParentRowId === row.rowId) {
@@ -299,7 +305,6 @@ class HiTableBody extends React.Component {
                     parentIndicatorColumn: row.parentIndicatorColumn,
                     parentLabel: row.parentLabel,
                     parentLabelIcon: row.parentLabelIcon,
-                    parentDetailRows: row.detailRows,
                     children: row.children,
                     onClose: this.setOpenedParentRowId
                 }, BodyRowProps)));
@@ -308,29 +313,43 @@ class HiTableBody extends React.Component {
             }
 
             // add opened detail rows
-            if (hasDetailRows && openedDetailsRowIdList.includes(row.rowId)) {
-                row.detailRows.forEach(detailRow => {
-                    const detailRowProps = {
-                        row: detailRow,
-                        columns,
-                        orderedColumns,
-                        view,
-                        dense,
-                        sticky,
-                        isDetail: true
-                    };
+            if (row.details && row.details.length > 0) {
+                row.details.forEach(detail => {
+                    if (detail.rows.length > 0 && openedDetailsRowIdList.find(item => item.id === row.rowId && item.type === detail.type)) {
+                        detail.rows.forEach(detailRow => {
+                            const detailRowProps = {
+                                row: detailRow,
+                                columns,
+                                orderedColumns,
+                                view,
+                                dense,
+                                sticky,
+                                isDetail: true,
+                                fixedColumnWidth,
+                                disableContextMenu
+                            };
 
-                    tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
+                            tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
+                        });
+                    }
                 });
             }
         });
 
+        const tBodyClasses = classNames(classes.tbody, {
+            [classes.tbodyFixedWidth]: fixedColumnWidth
+        });
+
         return React.createElement(
             TableBody,
             {
                 id: `${tabId}-body`,
-                className: classes.tbody,
-                style: { height },
+                className: tBodyClasses,
+                style: _extends({
+                    height
+                }, loading && {
+                    opacity: 0.6
+                }),
                 onScroll: onScroll
             },
             tableRows.map(tableRow => {
@@ -349,7 +368,10 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l'
+    view: 'l',
+    loading: false,
+    disableContextMenu: true,
+    detailRowsOptions: {}
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -377,10 +399,27 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
+    /**
+     * Options utilisées pour décrire le comportement de lignes de détails
+     */
+    detailRowsOptions: PropTypes.object,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: PropTypes.bool.isRequired,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Hauteur du tableau (px)
      */
     height: PropTypes.number,
+    /**
+     * É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
      */

package/es/HiTable/HiTableContextMenu.js

@@ -39,7 +39,8 @@ class HiTableContextMenu extends React.Component {
         super(props);
 
         this.state = {
-            value: ''
+            value: '',
+            label: ''
         };
 
         this.handleContextMenuOpen = this.handleContextMenuOpen.bind(this);
@@ -50,7 +51,10 @@ class HiTableContextMenu extends React.Component {
     }
 
     handleContextMenuOpen(event) {
-        this.setState({ value: event.detail.data.label });
+        this.setState({
+            value: event.detail.data.value,
+            label: event.detail.data.label
+        });
     }
 
     handleClickCopy(event, data) {
@@ -100,7 +104,7 @@ class HiTableContextMenu extends React.Component {
                     React.createElement(
                         'span',
                         { className: classes.title },
-                        menuItem.title.replace('%s', this.state.value)
+                        menuItem.title.replace('%s', this.state.label)
                     )
                 );
             })

package/es/HiTable/HiTableFooter.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { TableCell, TableFooter, TableRow } from 'material-ui/Table';
+import { withStyles } from '../styles';
+import PropTypes from 'prop-types';
+import * as cst from "./constants";
+
+export const styles = theme => ({
+    tfoot: {
+        zIndex: 13
+    },
+    tfootCell: {
+        borderTop: '1px solid',
+        borderTopColor: theme.palette.line.stepper,
+        padding: 0
+    },
+    patchDiv: {
+        position: 'relative',
+        border: 'none',
+        width: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        height: '100%',
+        zIndex: 12,
+        backgroundColor: 'inherit'
+    }
+});
+
+class HiTableFooter extends React.Component {
+
+    render() {
+        const { classes, nbColumnsDisplayed, view } = this.props;
+
+        return React.createElement(
+            TableFooter,
+            { className: classes.tfoot },
+            React.createElement(
+                TableRow,
+                null,
+                React.createElement(TableCell, {
+                    style: {
+                        paddingLeft: cst.DEFAULT_PADDING[view]
+                    },
+                    key: `footer-left-cell`,
+                    className: classes.patchDiv
+                }),
+                React.createElement(
+                    TableCell,
+                    { colSpan: nbColumnsDisplayed, classes: { root: classes.tfootCell } },
+                    this.props.children
+                ),
+                React.createElement(TableCell, {
+                    style: {
+                        paddingLeft: cst.DEFAULT_PADDING[view]
+                    },
+                    key: `footer-right-cell`,
+                    className: classes.patchDiv
+                })
+            )
+        );
+    }
+}
+
+HiTableFooter.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Nombre de colonnes affichées
+     */
+    nbColumnsDisplayed: PropTypes.number.isRequired,
+    /**
+     * 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, { name: 'HmuiHiTableFooter' })(HiTableFooter);

package/es/HiTable/HiTableFooterScroll.js

@@ -84,7 +84,7 @@ class HiTableFooterScroll extends React.Component {
         ) : React.createElement(
             HiButton,
             {
-                raised: true,
+                variant: 'raised',
                 color: 'primary',
                 className: classes.loadMoreButton,
                 onClick: () => this.handleRequestNextDatas(true)

package/es/HiTable/HiTableHead.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import isRequiredIf from 'react-proptype-conditional-require';
+import classNames from 'classnames';
 
 import { TableHead, TableRow, TableCell } from 'material-ui/Table';
 import PlusCircleIcon from 'mdi-material-ui/PlusCircle';
@@ -18,11 +19,13 @@ import { MANDATORY_COLUMN_ERROR_MESSAGE } from './HiTable';
 export const styles = theme => ({
     thead: {
         position: 'relative',
-        display: 'block' /*seperates the header from the body allowing it to be positioned*/
-        , width: '100%',
+        width: '100%',
         overflow: 'visible',
         zIndex: 12
     },
+    theadFixedWidth: {
+        display: 'block' /*seperates the header from the body allowing it to be positioned*/
+    },
     theadRow: {
         backgroundColor: theme.palette.background3,
         zIndex: 12
@@ -148,13 +151,16 @@ class HiTableHead extends React.Component {
             sticky,
             translations,
             view,
-            lookupColumns
+            lookupColumns,
+            fixedColumnWidth
         } = this.props;
 
         const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
 
         let headerProps = _extends({
-            className: classes.thead
+            className: classNames(classes.thead, {
+                [classes.theadFixedWidth]: fixedColumnWidth
+            })
         }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
         let unfixedColumnIsSet = false,
@@ -201,8 +207,8 @@ class HiTableHead extends React.Component {
                         return React.createElement(HeaderCell, {
                             key: 'header-' + column.colId,
                             colId: column.colId,
-                            type: column['type'],
-                            title: column['label'],
+                            type: column['formType'] || column['type'] // define select items
+                            , title: column['label'],
                             smallTitle: column['reducedLabel'],
                             selectable: firstColumn && selectable,
                             selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
@@ -221,7 +227,8 @@ class HiTableHead extends React.Component {
                             fixedWidth: fixed,
                             align: column['align'],
                             sticky: firstColumn && sticky,
-                            lookedUp: lookupColumns.includes(column.colId)
+                            lookedUp: lookupColumns.includes(column.colId),
+                            fixedColumnWidth: fixedColumnWidth
                         });
                     }
                 }),
@@ -329,6 +336,11 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * 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,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/OrderColumns.js

@@ -63,7 +63,8 @@ export const styles = theme => ({
     controlLabelRoot: {
         marginLeft: 6,
         marginBottom: 8,
-        fontSize: 15
+        fontSize: 15,
+        width: 160
     },
     switchLabelRoot: {
         marginLeft: 15,
@@ -72,7 +73,10 @@ export const styles = theme => ({
     columnLabel: {
         position: 'relative',
         top: 5,
-        left: 5
+        left: 5,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
     },
     label: {
         fontWeight: 'inherit'