@hipay/hipay-material-ui 1.0.0-beta.18 → 1.0.0-beta.19

package/es/HiTable/BodyRow.js

@@ -50,6 +50,10 @@ class BodyRow extends React.PureComponent {
     constructor(props) {
         super();
 
+        this.handleOpenRowDetails = type => () => {
+            this.props.onOpenRowDetails(this.props.row.rowId, type);
+        };
+
         this.state = {
             live: props.live,
             style: {
@@ -97,10 +101,6 @@ class BodyRow extends React.PureComponent {
         }
     }
 
-    handleOpenRowDetails() {
-        this.props.onOpenRowDetails(this.props.row.rowId);
-    }
-
     handleSelect() {
         this.props.onSelect(this.props.row);
     }
@@ -123,9 +123,10 @@ class BodyRow extends React.PureComponent {
             numberLocale,
             sticky,
             innerRow,
-            isDetail
+            isDetail,
+            detailRowsOptions
         } = _props,
-              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
+              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail', 'detailRowsOptions']);
 
         const { style } = this.state;
 
@@ -143,6 +144,19 @@ class BodyRow extends React.PureComponent {
         // If there is no datas don't display the row
         if (!row.hasOwnProperty('datas')) return false;
 
+        let detailsInfos = {};
+        if (row.details && row.details.length > 0) {
+            detailsInfos = row.details.reduce((memo, item) => {
+                if (item.rows.length > 0 && detailRowsOptions[item.type] && detailRowsOptions[item.type].anchor) {
+                    memo[detailRowsOptions[item.type].anchor] = _extends({
+                        type: item.type,
+                        total: item.rows.length
+                    }, detailRowsOptions[item.type]);
+                }
+                return memo;
+            }, {});
+        }
+
         return React.createElement(
             TableRow,
             {
@@ -230,8 +244,11 @@ class BodyRow extends React.PureComponent {
                     numberLocale: numberLocale,
                     dense: dense,
                     selected: selected,
-                    onSelect: this.handleSelect,
-                    onOpenDetails: this.handleOpenRowDetails,
+                    onSelect: this.handleSelect
+                }, detailsInfos[colId] && {
+                    onOpenDetails: this.handleOpenRowDetails(detailsInfos[colId].type),
+                    detailInfos: detailsInfos[colId]
+                }, {
                     childrenCount: isParentAnchor ? row.children.length : null,
                     colId: colId,
                     lookedUp: lookedUp
@@ -259,7 +276,8 @@ BodyRow.defaultProps = {
     live: false,
     innerRow: false,
     lookupColumns: [],
-    fixedColumnWidth: true
+    fixedColumnWidth: true,
+    detailRowsOptions: {}
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -270,6 +288,10 @@ BodyRow.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,
     /**
      * Fixe la taille des colonnes selon le type de vue
      * Sinon les colonnes s'adaptent à l'espace disponible

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/HiTable.js

@@ -586,7 +586,8 @@ class HiTable extends React.Component {
             loading,
             fixedColumnWidth,
             disableContextMenu,
-            footerContent
+            footerContent,
+            detailRowsOptions
         } = this.props;
 
         const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
@@ -668,7 +669,8 @@ class HiTable extends React.Component {
                         lookupColumns: lookupColumns,
                         loading: loading,
                         fixedColumnWidth: fixedColumnWidth,
-                        disableContextMenu: disableContextMenu
+                        disableContextMenu: disableContextMenu,
+                        detailRowsOptions: detailRowsOptions
                     }),
                     infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
@@ -725,6 +727,7 @@ HiTable.defaultProps = {
     dateLocale: 'en-EN',
     numberLocale: 'en-EN',
     dense: false,
+    detailRowsOptions: {},
     height: 450,
     sticky: true,
     translations: {
@@ -767,6 +770,17 @@ 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)
      */

package/es/HiTable/HiTableBody.js

@@ -150,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();
     }
@@ -195,7 +197,8 @@ class HiTableBody extends React.Component {
             lookupColumns,
             loading,
             fixedColumnWidth,
-            disableContextMenu
+            disableContextMenu,
+            detailRowsOptions
         } = this.props;
 
         const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -266,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,
@@ -280,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,
@@ -305,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)));
@@ -314,21 +313,25 @@ 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,
-                        fixedColumnWidth,
-                        disableContextMenu
-                    };
+            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)));
+                        });
+                    }
                 });
             }
         });
@@ -367,7 +370,8 @@ HiTableBody.defaultProps = {
     sticky: true,
     view: 'l',
     loading: false,
-    disableContextMenu: true
+    disableContextMenu: true,
+    detailRowsOptions: {}
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -395,6 +399,10 @@ 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
      */

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.18
+/** @license Material-UI v1.0.0-beta.19
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.18
+/** @license Material-UI v1.0.0-beta.19
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "1.0.0-beta.18",
+  "version": "1.0.0-beta.19",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {