@hipay/hipay-material-ui 1.0.0-beta.1 → 1.0.0-beta.10

package/HiTable/HeaderCell.js

@@ -227,7 +227,7 @@ var HeaderCell = function (_React$PureComponent) {
                 dense = _props.dense,
                 _props$width = _props.width,
                 width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
-                fixedWidth = _props.fixedWidth,
+                fixedColumnWidth = _props.fixedColumnWidth,
                 _props$align = _props.align,
                 align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
                 sticky = _props.sticky,
@@ -263,19 +263,22 @@ var HeaderCell = function (_React$PureComponent) {
 
             var lookedUpClassName = (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
 
+            var 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;
+            }
+
             return _react2.default.createElement(
                 _Table.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 },
                 _react2.default.createElement(
                     'div',
                     null,
@@ -366,7 +369,7 @@ HeaderCell.defaultProps = {
     sortDirection: 'asc',
     view: 'l',
     dense: false,
-    fixedWidth: false,
+    fixedColumnWidth: true,
     sticky: true,
     padding: 8
 };
@@ -446,7 +449,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedWidth: _propTypes2.default.bool,
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/HiTable/HiTable.js

@@ -705,7 +705,9 @@ var HiTable = function (_React$Component) {
                 translations = _props.translations,
                 view = _props.view,
                 groupBy = _props.groupBy,
-                lookupColumns = _props.lookupColumns;
+                lookupColumns = _props.lookupColumns,
+                loading = _props.loading,
+                fixedColumnWidth = _props.fixedColumnWidth;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
                 isScrollToBottom = _state.isScrollToBottom,
@@ -755,7 +757,8 @@ var HiTable = function (_React$Component) {
                             sticky: sticky,
                             view: view,
                             translations: translations,
-                            lookupColumns: lookupColumns
+                            lookupColumns: lookupColumns,
+                            fixedColumnWidth: fixedColumnWidth
                         }),
                         _react2.default.createElement(_HiTableBody2.default, {
                             tabId: tabId,
@@ -780,7 +783,9 @@ var HiTable = function (_React$Component) {
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
                             groupByIds: groupByIds,
-                            lookupColumns: lookupColumns
+                            lookupColumns: lookupColumns,
+                            loading: loading,
+                            fixedColumnWidth: fixedColumnWidth
                         }),
                         infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
@@ -802,7 +807,7 @@ var HiTable = function (_React$Component) {
                         _react2.default.createElement(
                             _HiButton2.default,
                             {
-                                raised: true,
+                                variant: 'raised',
                                 color: 'primary',
                                 className: classes.backToTopButton,
                                 onClick: function onClick() {
@@ -849,7 +854,9 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: []
+    lookupColumns: [],
+    loading: false,
+    fixedColumnWidth: true
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -880,6 +887,15 @@ HiTable.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,
+    /**
+     * 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é)
      */
@@ -892,6 +908,10 @@ 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
      */
@@ -1003,10 +1023,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: _propTypes2.default.oneOf(['l', 'm', 's']),
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: _propTypes2.default.string
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

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
         },
@@ -281,7 +285,9 @@ 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;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
                 openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -379,7 +385,8 @@ var HiTableBody = function (_React$Component) {
                     row: row,
                     sticky: sticky,
                     tabId: tabId,
-                    view: view
+                    view: view,
+                    fixedColumnWidth: fixedColumnWidth
                 });
 
                 if (hasChildren && openedParentRowId === row.rowId) {
@@ -408,7 +415,8 @@ var HiTableBody = function (_React$Component) {
                             view: view,
                             dense: dense,
                             sticky: sticky,
-                            isDetail: true
+                            isDetail: true,
+                            fixedColumnWidth: fixedColumnWidth
                         };
 
                         tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
@@ -416,12 +424,18 @@ var HiTableBody = function (_React$Component) {
                 }
             });
 
+            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 +456,8 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l'
+    view: 'l',
+    loading: false
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -470,10 +485,19 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _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,
     /**
      * 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/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'