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

package/HiTable/HiTable.js

@@ -67,10 +67,6 @@ var _HiTableFooterScroll = require('./HiTableFooterScroll');
 
 var _HiTableFooterScroll2 = _interopRequireDefault(_HiTableFooterScroll);
 
-var _HiTableFooter = require('./HiTableFooter');
-
-var _HiTableFooter2 = _interopRequireDefault(_HiTableFooter);
-
 var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -709,12 +705,7 @@ var HiTable = function (_React$Component) {
                 translations = _props.translations,
                 view = _props.view,
                 groupBy = _props.groupBy,
-                lookupColumns = _props.lookupColumns,
-                loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth,
-                disableContextMenu = _props.disableContextMenu,
-                footerContent = _props.footerContent,
-                detailRowsOptions = _props.detailRowsOptions;
+                lookupColumns = _props.lookupColumns;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
                 isScrollToBottom = _state.isScrollToBottom,
@@ -723,13 +714,6 @@ var HiTable = function (_React$Component) {
 
             var headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
 
-            var nbColumnsDisplayed = 0;
-            orderedColumns.forEach(function (column) {
-                if (column.displayed !== false) {
-                    nbColumnsDisplayed += 1;
-                }
-            });
-
             return _react2.default.createElement(
                 'div',
                 { className: classes.root },
@@ -771,8 +755,7 @@ var HiTable = function (_React$Component) {
                             sticky: sticky,
                             view: view,
                             translations: translations,
-                            lookupColumns: lookupColumns,
-                            fixedColumnWidth: fixedColumnWidth
+                            lookupColumns: lookupColumns
                         }),
                         _react2.default.createElement(_HiTableBody2.default, {
                             tabId: tabId,
@@ -797,11 +780,7 @@ var HiTable = function (_React$Component) {
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
                             groupByIds: groupByIds,
-                            lookupColumns: lookupColumns,
-                            loading: loading,
-                            fixedColumnWidth: fixedColumnWidth,
-                            disableContextMenu: disableContextMenu,
-                            detailRowsOptions: detailRowsOptions
+                            lookupColumns: lookupColumns
                         }),
                         infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
@@ -810,15 +789,7 @@ var HiTable = function (_React$Component) {
                             maxAutoRequest: 3,
                             isScrollToBottom: isScrollToBottom,
                             translations: translations
-                        }),
-                        !infiniteScroll && footerContent && _react2.default.createElement(
-                            _HiTableFooter2.default,
-                            {
-                                nbColumnsDisplayed: nbColumnsDisplayed,
-                                view: view
-                            },
-                            footerContent
-                        )
+                        })
                     ),
                     _react2.default.createElement(_HiTableContextMenu2.default, {
                         tabId: tabId,
@@ -831,7 +802,7 @@ var HiTable = function (_React$Component) {
                         _react2.default.createElement(
                             _HiButton2.default,
                             {
-                                variant: 'raised',
+                                raised: true,
                                 color: 'primary',
                                 className: classes.backToTopButton,
                                 onClick: function onClick() {
@@ -862,7 +833,6 @@ HiTable.defaultProps = {
     dateLocale: 'en-EN',
     numberLocale: 'en-EN',
     dense: false,
-    detailRowsOptions: {},
     height: 450,
     sticky: true,
     translations: {
@@ -879,10 +849,7 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: [],
-    loading: false,
-    fixedColumnWidth: true,
-    disableContextMenu: true
+    lookupColumns: []
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -905,42 +872,14 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Locale utilisé pour le format des dates
      */
     dateLocale: _propTypes2.default.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: _propTypes2.default.object,
     /**
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
-    /**
-     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
-     */
-    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Active le filtre sur les colonnes filtrables
      */
     filterable: _propTypes2.default.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
-    /**
-     * Ajoute un footer avec le contenu footerContent à l'intérieur
-     */
-    footerContent: _propTypes2.default.node,
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: _propTypes2.default.string,
     /**
      * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
      */
@@ -953,10 +892,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Ajoute l'infinite scroll
      */
     infiniteScroll: _propTypes2.default.bool,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */
@@ -1011,9 +946,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: _propTypes2.default.func,
     /**
@@ -1071,6 +1003,10 @@ 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: _propTypes2.default.oneOf(['l', 'm', 's'])
+    view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: _propTypes2.default.string
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

package/HiTable/HiTableBody.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -47,10 +43,6 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _Table = require('material-ui/Table');
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _styles = require('../styles');
 
 var _BodyRow = require('./BodyRow');
@@ -69,6 +61,12 @@ var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
 
+var _HiTableHead = require('./HiTableHead');
+
+var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
+
+var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -77,14 +75,12 @@ var styles = exports.styles = function styles(theme) {
     return {
         tbody: {
             position: 'relative',
-            width: '100%',
+            display: 'block' /* seperates the tbody from the header */
+            , width: '100%',
             overflowX: 'hidden',
             overflowY: 'auto',
             zIndex: 11
         },
-        tbodyFixedWidth: {
-            display: 'block' /* seperates the tbody from the header */
-        },
         tbodyRows: {
             backgroundColor: theme.palette.background3
         },
@@ -235,22 +231,18 @@ var HiTableBody = function (_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
          */
 
     }, {
         key: 'toggleOpenedDetailsRowId',
-        value: function toggleOpenedDetailsRowId(rowId, type) {
+        value: function toggleOpenedDetailsRowId(rowId) {
             this.setState(function (prevState) {
                 return {
-                    openedDetailsRowIdList: prevState.openedDetailsRowIdList.find(function (item) {
-                        return item.id === rowId && item.type === type;
-                    }) ? prevState.openedDetailsRowIdList.filter(function (item) {
-                        return item.id !== rowId || item.type !== type;
-                    }) : [].concat((0, _toConsumableArray3.default)(prevState.openedDetailsRowIdList), [{ id: rowId, type: type }])
+                    openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(function (id) {
+                        return id !== rowId;
+                    }) : [].concat((0, _toConsumableArray3.default)(prevState.openedDetailsRowIdList), [rowId])
                 };
             });
             this.props.addNewRowRefs();
@@ -289,11 +281,7 @@ var HiTableBody = function (_React$Component) {
                 numberLocale = _props.numberLocale,
                 groupByIds = _props.groupByIds,
                 sortedColumnId = _props.sortedColumnId,
-                lookupColumns = _props.lookupColumns,
-                loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth,
-                disableContextMenu = _props.disableContextMenu,
-                detailRowsOptions = _props.detailRowsOptions;
+                lookupColumns = _props.lookupColumns;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
                 openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -365,6 +353,9 @@ var HiTableBody = function (_React$Component) {
                 // has children
                 var hasChildren = row.hasOwnProperty('children') && row.children.length > 0;
 
+                // has detail rows
+                var hasDetailRows = row.hasOwnProperty('detailRows') && row.detailRows.length > 0;
+
                 var BodyRowProps = (0, _extends3.default)({
                     columns: columns,
                     dateLocale: dateLocale,
@@ -376,9 +367,9 @@ var HiTableBody = function (_React$Component) {
                 }, hasChildren && {
                     openedAsParent: openedParentRowId === row.rowId,
                     onClick: _this3.setOpenedParentRowId // if row has children, onClick display the children
+                }, hasDetailRows && {
+                    onOpenRowDetails: _this3.toggleOpenedDetailsRowId
                 }, {
-                    onOpenRowDetails: _this3.toggleOpenedDetailsRowId,
-                    detailRowsOptions: detailRowsOptions,
                     orderedColumns: orderedColumns
                 }, selectable && {
                     selectable: selectable,
@@ -388,9 +379,7 @@ var HiTableBody = function (_React$Component) {
                     row: row,
                     sticky: sticky,
                     tabId: tabId,
-                    view: view,
-                    fixedColumnWidth: fixedColumnWidth,
-                    disableContextMenu: disableContextMenu
+                    view: view
                 });
 
                 if (hasChildren && openedParentRowId === row.rowId) {
@@ -401,6 +390,7 @@ var HiTableBody = function (_React$Component) {
                         parentIndicatorColumn: row.parentIndicatorColumn,
                         parentLabel: row.parentLabel,
                         parentLabelIcon: row.parentLabelIcon,
+                        parentDetailRows: row.detailRows,
                         children: row.children,
                         onClose: _this3.setOpenedParentRowId
                     }, BodyRowProps)));
@@ -409,43 +399,29 @@ var HiTableBody = function (_React$Component) {
                 }
 
                 // add opened detail rows
-                if (row.details && row.details.length > 0) {
-                    row.details.forEach(function (detail) {
-                        if (detail.rows.length > 0 && openedDetailsRowIdList.find(function (item) {
-                            return item.id === row.rowId && item.type === detail.type;
-                        })) {
-                            detail.rows.forEach(function (detailRow) {
-                                var detailRowProps = {
-                                    row: detailRow,
-                                    columns: columns,
-                                    orderedColumns: orderedColumns,
-                                    view: view,
-                                    dense: dense,
-                                    sticky: sticky,
-                                    isDetail: true,
-                                    fixedColumnWidth: fixedColumnWidth,
-                                    disableContextMenu: disableContextMenu
-                                };
-
-                                tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
-                            });
-                        }
+                if (hasDetailRows && openedDetailsRowIdList.includes(row.rowId)) {
+                    row.detailRows.forEach(function (detailRow) {
+                        var detailRowProps = {
+                            row: detailRow,
+                            columns: columns,
+                            orderedColumns: orderedColumns,
+                            view: view,
+                            dense: dense,
+                            sticky: sticky,
+                            isDetail: true
+                        };
+
+                        tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
                     });
                 }
             });
 
-            var tBodyClasses = (0, _classnames2.default)(classes.tbody, (0, _defineProperty3.default)({}, classes.tbodyFixedWidth, fixedColumnWidth));
-
             return _react2.default.createElement(
                 _Table.TableBody,
                 {
                     id: tabId + '-body',
-                    className: tBodyClasses,
-                    style: (0, _extends3.default)({
-                        height: height
-                    }, loading && {
-                        opacity: 0.6
-                    }),
+                    className: classes.tbody,
+                    style: { height: height },
                     onScroll: onScroll
                 },
                 tableRows.map(function (tableRow) {
@@ -466,10 +442,7 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l',
-    loading: false,
-    disableContextMenu: true,
-    detailRowsOptions: {}
+    view: 'l'
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -497,27 +470,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
-    /**
-     * Options utilisées pour décrire le comportement de lignes de détails
-     */
-    detailRowsOptions: _propTypes2.default.object,
-    /**
-     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
-     */
-    disableContextMenu: _propTypes2.default.bool.isRequired,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Hauteur du tableau (px)
      */
     height: _propTypes2.default.number,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/HiTable/HiTableContextMenu.js

@@ -87,8 +87,7 @@ var HiTableContextMenu = function (_React$Component) {
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableContextMenu.__proto__ || (0, _getPrototypeOf2.default)(HiTableContextMenu)).call(this, props));
 
         _this.state = {
-            value: '',
-            label: ''
+            value: ''
         };
 
         _this.handleContextMenuOpen = _this.handleContextMenuOpen.bind(_this);
@@ -102,10 +101,7 @@ var HiTableContextMenu = function (_React$Component) {
     (0, _createClass3.default)(HiTableContextMenu, [{
         key: 'handleContextMenuOpen',
         value: function handleContextMenuOpen(event) {
-            this.setState({
-                value: event.detail.data.value,
-                label: event.detail.data.label
-            });
+            this.setState({ value: event.detail.data.label });
         }
     }, {
         key: 'handleClickCopy',
@@ -166,7 +162,7 @@ var HiTableContextMenu = function (_React$Component) {
                         _react2.default.createElement(
                             'span',
                             { className: classes.title },
-                            menuItem.title.replace('%s', _this2.state.label)
+                            menuItem.title.replace('%s', _this2.state.value)
                         )
                     );
                 })

package/HiTable/HiTableFooterScroll.js

@@ -138,7 +138,7 @@ var HiTableFooterScroll = function (_React$Component) {
             ) : _react2.default.createElement(
                 _HiButton2.default,
                 {
-                    variant: 'raised',
+                    raised: true,
                     color: 'primary',
                     className: classes.loadMoreButton,
                     onClick: function onClick() {

package/HiTable/HiTableHead.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SORTED_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
 
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -47,10 +43,6 @@ var _reactProptypeConditionalRequire = require('react-proptype-conditional-requi
 
 var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _Table = require('material-ui/Table');
 
 var _PlusCircle = require('mdi-material-ui/PlusCircle');
@@ -87,13 +79,11 @@ var styles = exports.styles = function styles(theme) {
     return {
         thead: {
             position: 'relative',
-            width: '100%',
+            display: 'block' /*seperates the header from the body allowing it to be positioned*/
+            , 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
@@ -236,8 +226,7 @@ var HiTableHead = function (_React$Component) {
                 sticky = _props.sticky,
                 translations = _props.translations,
                 view = _props.view,
-                lookupColumns = _props.lookupColumns,
-                fixedColumnWidth = _props.fixedColumnWidth;
+                lookupColumns = _props.lookupColumns;
             var _state = this.state,
                 hovered = _state.hovered,
                 openedOrderColumns = _state.openedOrderColumns,
@@ -245,7 +234,7 @@ var HiTableHead = function (_React$Component) {
 
 
             var headerProps = (0, _extends3.default)({
-                className: (0, _classnames2.default)(classes.thead, (0, _defineProperty3.default)({}, classes.theadFixedWidth, fixedColumnWidth))
+                className: classes.thead
             }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
             var unfixedColumnIsSet = false,
@@ -292,8 +281,8 @@ var HiTableHead = function (_React$Component) {
                             return _react2.default.createElement(_HeaderCell2.default, {
                                 key: 'header-' + column.colId,
                                 colId: column.colId,
-                                type: column['formType'] || column['type'] // define select items
-                                , title: column['label'],
+                                type: column['type'],
+                                title: column['label'],
                                 smallTitle: column['reducedLabel'],
                                 selectable: firstColumn && selectable,
                                 selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
@@ -312,8 +301,7 @@ var HiTableHead = function (_React$Component) {
                                 fixedWidth: fixed,
                                 align: column['align'],
                                 sticky: firstColumn && sticky,
-                                lookedUp: lookupColumns.includes(column.colId),
-                                fixedColumnWidth: fixedColumnWidth
+                                lookedUp: lookupColumns.includes(column.colId)
                             });
                         }
                     }),
@@ -423,11 +411,6 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: _propTypes2.default.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/HiTable/OrderColumns.js

@@ -141,8 +141,7 @@ var styles = exports.styles = function styles(theme) {
         controlLabelRoot: {
             marginLeft: 6,
             marginBottom: 8,
-            fontSize: 15,
-            width: 160
+            fontSize: 15
         },
         switchLabelRoot: {
             marginLeft: 15,
@@ -151,10 +150,7 @@ var styles = exports.styles = function styles(theme) {
         columnLabel: {
             position: 'relative',
             top: 5,
-            left: 5,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
+            left: 5
         },
         label: {
             fontWeight: 'inherit'