@hipay/hipay-material-ui 1.0.0-beta.7 → 1.0.0-beta.8

package/es/HiTable/BodyCells/CellLayout.js

@@ -28,6 +28,10 @@ export const styles = theme => ({
     lookedUp: {
         background: `linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)`,
         borderRadius: '45%'
+    },
+    pins: {
+        position: 'relative',
+        top: 3
     }
 });
 
@@ -115,7 +119,7 @@ class CellLayout extends React.Component {
                     },
                     React.createElement(
                         HiPins,
-                        { color: theme.palette.business.primary.normal },
+                        { color: theme.palette.business.primary.normal, className: classes.pins },
                         childrenCount
                     )
                 )

package/es/HiTable/BodyCells/CellStatus.js

@@ -11,6 +11,10 @@ export const styles = theme => ({
         display: 'inline-flex',
         alignItems: 'baseline',
         maxWidth: 'calc(100% - 36px)'
+    },
+    pins: {
+        position: 'relative',
+        bottom: 1
     }
 });
 
@@ -33,7 +37,7 @@ class CellStatus extends React.PureComponent {
                     React.createElement(HiColoredLabel, { label: value, color: color }),
                     React.createElement(
                         HiPins,
-                        { color: color, onClick: onOpenDetails },
+                        { color: color, onClick: onOpenDetails, className: classes.pins },
                         nbOperations
                     )
                 ) : React.createElement(HiColoredLabel, { label: value, color: color })

package/es/HiTable/BodyCells/CellText.js

@@ -17,7 +17,8 @@ export const styles = theme => ({
         display: 'inline-block',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'pre'
+        whiteSpace: 'pre',
+        width: '100%'
     },
     noEllipsisSpan: {
         display: 'inline-block',

package/es/HiTable/ColumnFilter.js

@@ -253,7 +253,11 @@ class ColumnFilter extends React.Component {
             React.createElement(
                 'div',
                 { className: classes.menuItemFilter },
-                translations.filter,
+                React.createElement(
+                    'span',
+                    { style: { marginRight: 4 } },
+                    translations.filter
+                ),
                 React.createElement(
                     HiPins,
                     {

package/es/HiTable/HiTable.js

@@ -581,7 +581,8 @@ class HiTable extends React.Component {
             translations,
             view,
             groupBy,
-            lookupColumns
+            lookupColumns,
+            loading
         } = this.props;
 
         const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
@@ -652,7 +653,8 @@ class HiTable extends React.Component {
                         groupBy: groupBy,
                         onClickNext: this.handleNextStickyRow,
                         groupByIds: groupByIds,
-                        lookupColumns: lookupColumns
+                        lookupColumns: lookupColumns,
+                        loading: loading
                     }),
                     infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
@@ -717,7 +719,8 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: []
+    lookupColumns: [],
+    loading: false
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -748,6 +751,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: 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 +767,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 +878,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

@@ -191,7 +191,8 @@ class HiTableBody extends React.Component {
             numberLocale,
             groupByIds,
             sortedColumnId,
-            lookupColumns
+            lookupColumns,
+            loading
         } = this.props;
 
         const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -330,7 +331,11 @@ class HiTableBody extends React.Component {
             {
                 id: `${tabId}-body`,
                 className: classes.tbody,
-                style: { height },
+                style: _extends({
+                    height
+                }, loading && {
+                    opacity: 0.6
+                }),
                 onScroll: onScroll
             },
             tableRows.map(tableRow => {
@@ -349,7 +354,8 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l'
+    view: 'l',
+    loading: false
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -381,6 +387,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * 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/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'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {