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

package/es/HiTable/HeaderCell.js

@@ -141,7 +141,7 @@ class HeaderCell extends React.PureComponent {
             view,
             dense,
             width = cst.DEFAULT_WIDTHS[type][view],
-            fixedWidth,
+            fixedColumnWidth,
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             sticky,
             padding,
@@ -178,19 +178,22 @@ class HeaderCell extends React.PureComponent {
 
         const lookedUpClassName = classNames({ [classes.lookedUp]: lookedUp });
 
+        const 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 React.createElement(
             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 },
             React.createElement(
                 'div',
                 null,
@@ -279,7 +282,7 @@ HeaderCell.defaultProps = {
     sortDirection: 'asc',
     view: 'l',
     dense: false,
-    fixedWidth: false,
+    fixedColumnWidth: true,
     sticky: true,
     padding: 8
 };
@@ -359,7 +362,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedWidth: PropTypes.bool,
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/es/HiTable/HiTable.js

@@ -581,7 +581,9 @@ class HiTable extends React.Component {
             translations,
             view,
             groupBy,
-            lookupColumns
+            lookupColumns,
+            loading,
+            fixedColumnWidth
         } = this.props;
 
         const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
@@ -627,7 +629,8 @@ class HiTable extends React.Component {
                         sticky: sticky,
                         view: view,
                         translations: translations,
-                        lookupColumns: lookupColumns
+                        lookupColumns: lookupColumns,
+                        fixedColumnWidth: fixedColumnWidth
                     }),
                     React.createElement(HiTableBody, {
                         tabId: tabId,
@@ -652,7 +655,9 @@ class HiTable extends React.Component {
                         groupBy: groupBy,
                         onClickNext: this.handleNextStickyRow,
                         groupByIds: groupByIds,
-                        lookupColumns: lookupColumns
+                        lookupColumns: lookupColumns,
+                        loading: loading,
+                        fixedColumnWidth: fixedColumnWidth
                     }),
                     infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
@@ -674,7 +679,7 @@ class HiTable extends React.Component {
                     React.createElement(
                         HiButton,
                         {
-                            raised: true,
+                            variant: 'raised',
                             color: 'primary',
                             className: classes.backToTopButton,
                             onClick: () => this.scrollToTop()
@@ -717,7 +722,9 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: []
+    lookupColumns: [],
+    loading: false,
+    fixedColumnWidth: true
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -748,6 +755,15 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: PropTypes.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: PropTypes.string,
     /**
      * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
      */
@@ -760,6 +776,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Ajoute l'infinite scroll
      */
     infiniteScroll: PropTypes.bool,
+    /**
+     * État du tableau en cours de chargement des données
+     */
+    loading: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */
@@ -867,10 +887,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: PropTypes.oneOf(['l', 'm', 's']),
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: PropTypes.string
+    view: PropTypes.oneOf(['l', 'm', 's'])
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

package/es/HiTable/HiTableBody.js

@@ -2,23 +2,24 @@ import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableBody, TableRow } from 'material-ui/Table';
-import { withStyles, withTheme } from '../styles';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
 import BodyRow from './BodyRow';
 import ChildRow from './ChildRow';
 import HiStickyRow from './HiStickyRow';
 import * as cst from './constants';
-import { SORTED_COLUMN_ERROR_MESSAGE } from './HiTableHead';
-import isRequiredIf from 'react-proptype-conditional-require';
 
 export const styles = theme => ({
     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
     },
@@ -191,7 +192,9 @@ class HiTableBody extends React.Component {
             numberLocale,
             groupByIds,
             sortedColumnId,
-            lookupColumns
+            lookupColumns,
+            loading,
+            fixedColumnWidth
         } = this.props;
 
         const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -288,7 +291,8 @@ class HiTableBody extends React.Component {
                 row,
                 sticky,
                 tabId,
-                view
+                view,
+                fixedColumnWidth
             });
 
             if (hasChildren && openedParentRowId === row.rowId) {
@@ -317,7 +321,8 @@ class HiTableBody extends React.Component {
                         view,
                         dense,
                         sticky,
-                        isDetail: true
+                        isDetail: true,
+                        fixedColumnWidth
                     };
 
                     tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
@@ -325,12 +330,20 @@ class HiTableBody extends React.Component {
             }
         });
 
+        const tBodyClasses = classNames(classes.tbody, {
+            [classes.tbodyFixedWidth]: fixedColumnWidth
+        });
+
         return React.createElement(
             TableBody,
             {
                 id: `${tabId}-body`,
-                className: classes.tbody,
-                style: { height },
+                className: tBodyClasses,
+                style: _extends({
+                    height
+                }, loading && {
+                    opacity: 0.6
+                }),
                 onScroll: onScroll
             },
             tableRows.map(tableRow => {
@@ -349,7 +362,8 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l'
+    view: 'l',
+    loading: false
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -377,10 +391,19 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: PropTypes.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Hauteur du tableau (px)
      */
     height: PropTypes.number,
+    /**
+     * État du tableau en cours de chargement des données
+     */
+    loading: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/HiTableContextMenu.js

@@ -39,7 +39,8 @@ class HiTableContextMenu extends React.Component {
         super(props);
 
         this.state = {
-            value: ''
+            value: '',
+            label: ''
         };
 
         this.handleContextMenuOpen = this.handleContextMenuOpen.bind(this);
@@ -50,7 +51,10 @@ class HiTableContextMenu extends React.Component {
     }
 
     handleContextMenuOpen(event) {
-        this.setState({ value: event.detail.data.label });
+        this.setState({
+            value: event.detail.data.value,
+            label: event.detail.data.label
+        });
     }
 
     handleClickCopy(event, data) {
@@ -100,7 +104,7 @@ class HiTableContextMenu extends React.Component {
                     React.createElement(
                         'span',
                         { className: classes.title },
-                        menuItem.title.replace('%s', this.state.value)
+                        menuItem.title.replace('%s', this.state.label)
                     )
                 );
             })

package/es/HiTable/HiTableFooterScroll.js

@@ -84,7 +84,7 @@ class HiTableFooterScroll extends React.Component {
         ) : React.createElement(
             HiButton,
             {
-                raised: true,
+                variant: 'raised',
                 color: 'primary',
                 className: classes.loadMoreButton,
                 onClick: () => this.handleRequestNextDatas(true)

package/es/HiTable/HiTableHead.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import isRequiredIf from 'react-proptype-conditional-require';
+import classNames from 'classnames';
 
 import { TableHead, TableRow, TableCell } from 'material-ui/Table';
 import PlusCircleIcon from 'mdi-material-ui/PlusCircle';
@@ -18,11 +19,13 @@ import { MANDATORY_COLUMN_ERROR_MESSAGE } from './HiTable';
 export const styles = theme => ({
     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
@@ -148,13 +151,16 @@ class HiTableHead extends React.Component {
             sticky,
             translations,
             view,
-            lookupColumns
+            lookupColumns,
+            fixedColumnWidth
         } = this.props;
 
         const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
 
         let headerProps = _extends({
-            className: classes.thead
+            className: classNames(classes.thead, {
+                [classes.theadFixedWidth]: fixedColumnWidth
+            })
         }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
         let unfixedColumnIsSet = false,
@@ -201,8 +207,8 @@ class HiTableHead extends React.Component {
                         return React.createElement(HeaderCell, {
                             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,
@@ -221,7 +227,8 @@ class HiTableHead extends React.Component {
                             fixedWidth: fixed,
                             align: column['align'],
                             sticky: firstColumn && sticky,
-                            lookedUp: lookupColumns.includes(column.colId)
+                            lookedUp: lookupColumns.includes(column.colId),
+                            fixedColumnWidth: fixedColumnWidth
                         });
                     }
                 }),
@@ -329,6 +336,11 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: PropTypes.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: PropTypes.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiTable/OrderColumns.js

@@ -63,7 +63,8 @@ export const styles = theme => ({
     controlLabelRoot: {
         marginLeft: 6,
         marginBottom: 8,
-        fontSize: 15
+        fontSize: 15,
+        width: 160
     },
     switchLabelRoot: {
         marginLeft: 15,
@@ -72,7 +73,10 @@ export const styles = theme => ({
     columnLabel: {
         position: 'relative',
         top: 5,
-        left: 5
+        left: 5,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
     },
     label: {
         fontWeight: 'inherit'