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

package/HiTable/HiTableBody.js

@@ -5,6 +5,10 @@ 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);
@@ -43,6 +47,10 @@ 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');
@@ -61,12 +69,6 @@ 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 }; }
@@ -75,12 +77,14 @@ var styles = exports.styles = function styles(theme) {
     return {
         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
         },
@@ -231,18 +235,22 @@ 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) {
+        value: function toggleOpenedDetailsRowId(rowId, type) {
             this.setState(function (prevState) {
                 return {
-                    openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(function (id) {
-                        return id !== rowId;
-                    }) : [].concat((0, _toConsumableArray3.default)(prevState.openedDetailsRowIdList), [rowId])
+                    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 }])
                 };
             });
             this.props.addNewRowRefs();
@@ -281,7 +289,11 @@ var HiTableBody = function (_React$Component) {
                 numberLocale = _props.numberLocale,
                 groupByIds = _props.groupByIds,
                 sortedColumnId = _props.sortedColumnId,
-                lookupColumns = _props.lookupColumns;
+                lookupColumns = _props.lookupColumns,
+                loading = _props.loading,
+                fixedColumnWidth = _props.fixedColumnWidth,
+                disableContextMenu = _props.disableContextMenu,
+                detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
                 openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -353,9 +365,6 @@ 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,
@@ -367,9 +376,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,
@@ -379,7 +388,9 @@ var HiTableBody = function (_React$Component) {
                     row: row,
                     sticky: sticky,
                     tabId: tabId,
-                    view: view
+                    view: view,
+                    fixedColumnWidth: fixedColumnWidth,
+                    disableContextMenu: disableContextMenu
                 });
 
                 if (hasChildren && openedParentRowId === row.rowId) {
@@ -390,7 +401,6 @@ var HiTableBody = function (_React$Component) {
                         parentIndicatorColumn: row.parentIndicatorColumn,
                         parentLabel: row.parentLabel,
                         parentLabelIcon: row.parentLabelIcon,
-                        parentDetailRows: row.detailRows,
                         children: row.children,
                         onClose: _this3.setOpenedParentRowId
                     }, BodyRowProps)));
@@ -399,29 +409,43 @@ var HiTableBody = function (_React$Component) {
                 }
 
                 // add opened detail rows
-                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)));
+                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)));
+                            });
+                        }
                     });
                 }
             });
 
+            var tBodyClasses = (0, _classnames2.default)(classes.tbody, (0, _defineProperty3.default)({}, classes.tbodyFixedWidth, fixedColumnWidth));
+
             return _react2.default.createElement(
                 _Table.TableBody,
                 {
                     id: tabId + '-body',
-                    className: classes.tbody,
-                    style: { height: height },
+                    className: tBodyClasses,
+                    style: (0, _extends3.default)({
+                        height: height
+                    }, loading && {
+                        opacity: 0.6
+                    }),
                     onScroll: onScroll
                 },
                 tableRows.map(function (tableRow) {
@@ -442,7 +466,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" ? {
     /**
@@ -470,10 +497,27 @@ 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,7 +87,8 @@ var HiTableContextMenu = function (_React$Component) {
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableContextMenu.__proto__ || (0, _getPrototypeOf2.default)(HiTableContextMenu)).call(this, props));
 
         _this.state = {
-            value: ''
+            value: '',
+            label: ''
         };
 
         _this.handleContextMenuOpen = _this.handleContextMenuOpen.bind(_this);
@@ -101,7 +102,10 @@ var HiTableContextMenu = function (_React$Component) {
     (0, _createClass3.default)(HiTableContextMenu, [{
         key: 'handleContextMenuOpen',
         value: function handleContextMenuOpen(event) {
-            this.setState({ value: event.detail.data.label });
+            this.setState({
+                value: event.detail.data.value,
+                label: event.detail.data.label
+            });
         }
     }, {
         key: 'handleClickCopy',
@@ -162,7 +166,7 @@ var HiTableContextMenu = function (_React$Component) {
                         _react2.default.createElement(
                             'span',
                             { className: classes.title },
-                            menuItem.title.replace('%s', _this2.state.value)
+                            menuItem.title.replace('%s', _this2.state.label)
                         )
                     );
                 })

package/HiTable/HiTableFooter.js

@@ -0,0 +1,132 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Table = require('material-ui/Table');
+
+var _styles = require('../styles');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _constants = require('./constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+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 }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        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'
+        }
+    };
+};
+
+var HiTableFooter = function (_React$Component) {
+    (0, _inherits3.default)(HiTableFooter, _React$Component);
+
+    function HiTableFooter() {
+        (0, _classCallCheck3.default)(this, HiTableFooter);
+        return (0, _possibleConstructorReturn3.default)(this, (HiTableFooter.__proto__ || (0, _getPrototypeOf2.default)(HiTableFooter)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiTableFooter, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                nbColumnsDisplayed = _props.nbColumnsDisplayed,
+                view = _props.view;
+
+
+            return _react2.default.createElement(
+                _Table.TableFooter,
+                { className: classes.tfoot },
+                _react2.default.createElement(
+                    _Table.TableRow,
+                    null,
+                    _react2.default.createElement(_Table.TableCell, {
+                        style: {
+                            paddingLeft: cst.DEFAULT_PADDING[view]
+                        },
+                        key: 'footer-left-cell',
+                        className: classes.patchDiv
+                    }),
+                    _react2.default.createElement(
+                        _Table.TableCell,
+                        { colSpan: nbColumnsDisplayed, classes: { root: classes.tfootCell } },
+                        this.props.children
+                    ),
+                    _react2.default.createElement(_Table.TableCell, {
+                        style: {
+                            paddingLeft: cst.DEFAULT_PADDING[view]
+                        },
+                        key: 'footer-right-cell',
+                        className: classes.patchDiv
+                    })
+                )
+            );
+        }
+    }]);
+    return HiTableFooter;
+}(_react2.default.Component);
+
+HiTableFooter.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Nombre de colonnes affichées
+     */
+    nbColumnsDisplayed: _propTypes2.default.number.isRequired,
+    /**
+     * 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'])
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiTableFooter' })(HiTableFooter);

package/HiTable/HiTableFooterScroll.js

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

package/HiTable/HiTableHead.js

@@ -5,6 +5,10 @@ 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);
@@ -43,6 +47,10 @@ 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');
@@ -79,11 +87,13 @@ var styles = exports.styles = function styles(theme) {
     return {
         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
@@ -226,7 +236,8 @@ var HiTableHead = function (_React$Component) {
                 sticky = _props.sticky,
                 translations = _props.translations,
                 view = _props.view,
-                lookupColumns = _props.lookupColumns;
+                lookupColumns = _props.lookupColumns,
+                fixedColumnWidth = _props.fixedColumnWidth;
             var _state = this.state,
                 hovered = _state.hovered,
                 openedOrderColumns = _state.openedOrderColumns,
@@ -234,7 +245,7 @@ var HiTableHead = function (_React$Component) {
 
 
             var headerProps = (0, _extends3.default)({
-                className: classes.thead
+                className: (0, _classnames2.default)(classes.thead, (0, _defineProperty3.default)({}, classes.theadFixedWidth, fixedColumnWidth))
             }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
             var unfixedColumnIsSet = false,
@@ -281,8 +292,8 @@ var HiTableHead = function (_React$Component) {
                             return _react2.default.createElement(_HeaderCell2.default, {
                                 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,
@@ -301,7 +312,8 @@ var HiTableHead = function (_React$Component) {
                                 fixedWidth: fixed,
                                 align: column['align'],
                                 sticky: firstColumn && sticky,
-                                lookedUp: lookupColumns.includes(column.colId)
+                                lookedUp: lookupColumns.includes(column.colId),
+                                fixedColumnWidth: fixedColumnWidth
                             });
                         }
                     }),
@@ -411,6 +423,11 @@ 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,7 +141,8 @@ var styles = exports.styles = function styles(theme) {
         controlLabelRoot: {
             marginLeft: 6,
             marginBottom: 8,
-            fontSize: 15
+            fontSize: 15,
+            width: 160
         },
         switchLabelRoot: {
             marginLeft: 15,
@@ -150,7 +151,10 @@ var styles = exports.styles = function styles(theme) {
         columnLabel: {
             position: 'relative',
             top: 5,
-            left: 5
+            left: 5,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
         },
         label: {
             fontWeight: 'inherit'