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

package/es/HiTable/BodyCells/CellStatus.js

@@ -60,7 +60,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'opérations financières
      */
-    nbOperations: PropTypes.number.isRequired,
+    nbOperations: PropTypes.number,
     /**
      * Statut courant de la transaction
      */

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/es/HiTopBar/HiTopBar.js

@@ -77,9 +77,8 @@ export const styles = theme => ({
         color: theme.palette.text.secondary,
         minWidth: 32
     },
-    beta: {
-        minWidth: 64,
-        maxWidth: 80
+    betaWithoutAccountSelector: {
+        marginLeft: 1.5 * theme.spacing.unit
     },
     searchInput: {
         backgroundColor: `${theme.palette.background1} !important`
@@ -264,7 +263,9 @@ class HiTopBar extends React.Component {
                                 accountSelectorContent
                             ),
                             beta && React.createElement(HiColoredLabel, {
-                                className: classes.beta,
+                                className: classNames({
+                                    [classes.betaWithoutAccountSelector]: !hasAccountSelector
+                                }),
                                 label: 'BETA',
                                 beta: true,
                                 color: theme.palette.neutral.dark

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.15
+/** @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.15
+/** @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.17",
+  "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": {
@@ -18,8 +18,8 @@
     "react-dom": "15.3.0 || 16.0.0"
   },
   "dependencies": {
-    "react": "16.2.0",
     "@types/jss": "9.3.0",
+    "@types/react-transition-group": "2.0.6",
     "babel-runtime": "6.26.0",
     "brcast": "3.0.1",
     "classnames": "2.2.5",
@@ -34,11 +34,11 @@
     "jss-props-sort": "6.0.0",
     "jss-vendor-prefixer": "7.0.0",
     "keycode": "2.1.9",
-    "lodash": "4.2.0",
+    "lodash": "4.17.4",
     "lz-string": "1.4.4",
     "material-ui": "1.0.0-beta.36",
     "mdi-material-ui": "2.0.0",
-    "moment": "2.19.1",
+    "moment": "2.20.1",
     "moment-timezone": "0.5.14",
     "normalize-scroll-left": "0.1.2",
     "prop-types": "15.6.0",
@@ -46,15 +46,15 @@
     "react-contextmenu": "2.9.2",
     "react-custom-scrollbars": "4.2.1",
     "react-day-picker": "7.1.9",
-    "react-event-listener": "0.5.1",
-    "react-jss": "8.1.0",
+    "react-event-listener": "0.5.3",
+    "react-jss": "8.2.1",
     "react-lifecycles-compat": "1.0.2",
-    "react-pdf": "3.0.4",
-    "react-popper": "0.8.0",
+    "react-pdf": "3.0.5",
+    "react-popper": "0.8.2",
     "react-proptype-conditional-require": "1.0.4",
     "react-scrollbar-size": "2.0.2",
     "react-sortable-hoc": "0.6.8",
-    "react-spinners": "0.2.5",
+    "react-spinners": "0.2.6",
     "react-transition-group": "2.2.1",
     "recompose": "0.26.0",
     "scroll": "2.0.3",