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

package/es/HiTable/ChildRow.js

@@ -112,9 +112,9 @@ class ChildRow extends React.PureComponent {
             parentIndicatorColumn, parentLabel, parentLabelIcon,
             children, columns, orderedColumns,
             selectable, selected,
-            dateLocale, dense, sticky, view
+            dateLocale, dense, sticky, view, row
         } = _props,
-              other = _objectWithoutProperties(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view']);
+              other = _objectWithoutProperties(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view', 'row']);
 
         let indicator = '';
         if (parentIndicatorColumn && columns.hasOwnProperty(parentIndicatorColumn)) {
@@ -141,10 +141,7 @@ class ChildRow extends React.PureComponent {
                 TableBody,
                 null,
                 React.createElement(BodyRow, _extends({
-                    row: {
-                        rowId: parentRowId,
-                        datas: parentRowDatas
-                    },
+                    row: row,
                     selectable: selectable,
                     selected: selected,
                     columns: columns,
@@ -277,10 +274,6 @@ ChildRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Données de la ligne parente
      */
     parentRowDatas: PropTypes.object.isRequired,
-    /**
-     * Ligne des détails de la ligne parente
-     */
-    parentDetailRows: PropTypes.array,
     /**
      * Indicateur du sous-ensemble (en général la date)
      */

package/es/HiTable/ColumnFilter.js

@@ -1,3 +1,4 @@
+import _Set from 'babel-runtime/core-js/set';
 import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import Popover from 'material-ui/Popover';
@@ -142,20 +143,20 @@ class ColumnFilter extends React.Component {
      * Sélectionne tous les items filtrés
      */
     selectAllFilters() {
-        this.setState({ selectedIdList: this.state.suggestions.map(item => item.id) });
+        this.setState(prevState => ({
+            selectedIdList: [...new _Set([...prevState.selectedIdList, ...prevState.suggestions.map(item => item.id)])]
+        }));
     }
 
     /**
      * Désélectionne tous les items filtrés
      */
     deselectAllFilters() {
-        const selectedIdList = this.state.selectedIdList;
-        this.state.suggestions.map(item => {
-            if (this.state.selectedIdList.includes(item.id)) {
-                selectedIdList.splice(this.state.selectedIdList.indexOf(item.id), 1);
-            }
+        this.setState(prevState => {
+            return {
+                selectedIdList: prevState.selectedIdList.filter(item => prevState.suggestions.find(suggestion => suggestion.id === item) === undefined)
+            };
         });
-        this.setState({ selectedIdList });
     }
 
     handleSort(direction) {
@@ -253,7 +254,11 @@ class ColumnFilter extends React.Component {
             React.createElement(
                 'div',
                 { className: classes.menuItemFilter },
-                translations.filter,
+                React.createElement(
+                    'span',
+                    { style: { marginRight: 4 } },
+                    translations.filter
+                ),
                 React.createElement(
                     HiPins,
                     {
@@ -297,7 +302,8 @@ class ColumnFilter extends React.Component {
                 itemList: suggestions,
                 selectedIdList: selectedIdList,
                 onSelect: this.toggleSelectItem,
-                leftPadding: 28
+                leftPadding: 28,
+                checkbox: type !== 'icon'
             }),
             React.createElement(
                 'div',

package/es/HiTable/HeaderCell.js

@@ -130,6 +130,7 @@ class HeaderCell extends React.PureComponent {
             classes,
             type,
             title,
+            smallTitle,
             selectable,
             selected,
             onSelect,
@@ -140,8 +141,8 @@ class HeaderCell extends React.PureComponent {
             filterSource,
             view,
             dense,
-            width = cst.DEFAULT_WIDTHS[type][view],
-            fixedWidth,
+            width,
+            fixedColumnWidth,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             sticky,
             padding,
@@ -153,7 +154,7 @@ class HeaderCell extends React.PureComponent {
         let offset = selectable ? dense ? 32 : 40 : padding;
 
         // Inclue le padding et/ou la checkbox dans la largeur de la cellule
-        let _width = width + offset + padding;
+        let _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
         // N'affiche pas le tri si il est désactivé.
         let _sorted = sortable && sorted;
         // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
@@ -178,19 +179,24 @@ class HeaderCell extends React.PureComponent {
 
         const lookedUpClassName = classNames({ [classes.lookedUp]: lookedUp });
 
+        const cellStyle = {
+            padding: 0,
+            zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
+            backgroundColor: 'inherit',
+            textAlign: align
+        };
+
+        if (fixedColumnWidth) {
+            cellStyle.maxWidth = _width;
+            cellStyle.minWidth = _width;
+            cellStyle.width = _width;
+        } else if (width) {
+            cellStyle.width = width;
+        }
+
         return React.createElement(
             TableCell,
-            {
-                style: {
-                    maxWidth: _width,
-                    minWidth: _width,
-                    width: _width,
-                    padding: 0,
-                    zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
-                    backgroundColor: 'inherit',
-                    textAlign: align
-                }
-            },
+            { style: cellStyle },
             React.createElement(
                 'div',
                 null,
@@ -233,7 +239,7 @@ class HeaderCell extends React.PureComponent {
                             {
                                 className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                             },
-                            title
+                            view !== 's' ? title : smallTitle ? smallTitle : title
                         ),
                         align !== 'right' && _icons
                     ) : React.createElement(
@@ -250,7 +256,7 @@ class HeaderCell extends React.PureComponent {
                         React.createElement(
                             'span',
                             { className: classes.labelContainer, style: { width: '100%' } },
-                            title
+                            view !== 's' ? title : smallTitle ? smallTitle : title
                         )
                     )
                 ),
@@ -279,7 +285,7 @@ HeaderCell.defaultProps = {
     sortDirection: 'asc',
     view: 'l',
     dense: false,
-    fixedWidth: false,
+    fixedColumnWidth: true,
     sticky: true,
     padding: 8
 };
@@ -355,11 +361,11 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     /**
      * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedWidth: PropTypes.bool,
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

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);