@hipay/hipay-material-ui 1.0.0-beta.27 → 1.0.0-beta.28

package/es/HiTable/BodyRow.js

@@ -1,6 +1,6 @@
-import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
+import _extends from 'babel-runtime/helpers/extends';
 
 // @inheritedComponent BodyCellBuilder
 import React from 'react';
@@ -13,9 +13,12 @@ import { withStyles } from '../styles';
 import * as cst from './constants';
 
 export const styles = theme => ({
-    rootSelected: {
+    root: {
         backgroundColor: theme.palette.background3
     },
+    rootSelected: {
+        backgroundColor: theme.palette.background1
+    },
     hover: {
         '&:hover': {
             backgroundColor: theme.palette.hover,
@@ -57,10 +60,10 @@ class BodyRow extends React.Component {
 
         this.state = {
             live: props.live,
-            style: {
-                backgroundColor: props.live ? fade(props.theme.palette.business.primary.normal, 0.08) : props.theme.palette.background3,
-                transition: props.live ? 'background-color 2s' : 'none'
-            }
+            style: _extends({}, props.live && {
+                backgroundColor: fade(props.theme.palette.business.primary.normal, 0.08),
+                transition: 'background-color 2s'
+            })
         };
 
         this.handleClick = this.handleClick.bind(this);
@@ -77,10 +80,7 @@ class BodyRow extends React.Component {
         if (this.state.live) {
             this.setState({
                 live: false,
-                style: {
-                    backgroundColor: this.props.theme.palette.background3,
-                    transition: 'background-color 2s'
-                }
+                style: {}
             });
         }
     }
@@ -90,10 +90,7 @@ class BodyRow extends React.Component {
         if (prevState.live === true && this.state.live === false) {
             setTimeout(() => {
                 this.setState({
-                    style: {
-                        backgroundColor: this.props.theme.palette.background3,
-                        transition: 'none'
-                    }
+                    style: {}
                 });
             }, 2500);
         }
@@ -165,6 +162,7 @@ class BodyRow extends React.Component {
         return React.createElement(
             TableRow,
             {
+                className: classes.root,
                 classes: { selected: classes.rootSelected, hover: classes.hover },
                 onClick: this.handleClick,
                 hover: true,

package/es/HiTable/HiTable.js

@@ -124,16 +124,18 @@ class HiTable extends React.Component {
         this.groupByRowsPositions = [];
 
         this.updateFloatingBodyElementRefs = () => {
-            this.tBodyScrollbarWidth = this.tBody.offsetWidth - this.tBody.clientWidth;
+            if (this.tBody) {
+                this.tBodyScrollbarWidth = this.tBody.offsetWidth - this.tBody.clientWidth;
 
-            if (this.tHead && this.tBodyScrollbarWidth > 0) {
-                this.tHead.style.width = 'calc(100% - ' + this.tBodyScrollbarWidth + 'px)';
-            }
+                if (this.tHead && this.tBodyScrollbarWidth > 0) {
+                    this.tHead.style.width = 'calc(100% - ' + this.tBodyScrollbarWidth + 'px)';
+                }
 
-            this.tBodyLeftPaddingElements = this.tBody.querySelectorAll('tr td:nth-child(1), .floating-parent-row-label');
-            this.tBodyRightPaddingElements = this.tBody.querySelectorAll('tr td:nth-last-child(1), .floating-parent-row-indicator');
+                this.tBodyLeftPaddingElements = this.tBody.querySelectorAll('tr td:nth-child(1), .floating-parent-row-label');
+                this.tBodyRightPaddingElements = this.tBody.querySelectorAll('tr td:nth-last-child(1), .floating-parent-row-indicator');
 
-            this.tBodyFirstElements = this.tBody.querySelectorAll('tr td:nth-child(2)');
+                this.tBodyFirstElements = this.tBody.querySelectorAll('tr td:nth-child(2)');
+            }
         };
 
         this.addNewRowRefs = () => {
@@ -245,8 +247,9 @@ class HiTable extends React.Component {
                 this.handleStickyRowPositions();
             }
         }
-
-        this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
+        if (this.tBody) {
+            this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
+        }
 
         this.placeHorizontalFloatingElement();
     }
@@ -258,11 +261,13 @@ class HiTable extends React.Component {
         this.groupByRowsPositions = [];
         // Initialize new stickyRows position
         const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
-        if (stickyRows.length > 0) {
-            Array.prototype.filter.call(stickyRows, stickyRow => {
-                this.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
-            });
+        if (tableBody) {
+            const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+            if (stickyRows.length > 0) {
+                Array.prototype.filter.call(stickyRows, stickyRow => {
+                    this.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
+                });
+            }
         }
     }
 
@@ -359,13 +364,14 @@ class HiTable extends React.Component {
         }
 
         this.handleStickyRowPositions();
-
-        this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
+        if (this.tBody) {
+            this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
+        }
     }
 
     handleStickyRowPositions() {
         const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+        const stickyRows = tableBody ? tableBody.getElementsByClassName('stickyGroupBy') : [];
         const rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
         if (stickyRows.length > 0) {
             Array.prototype.filter.call(stickyRows, (stickyRow, index) => {
@@ -458,7 +464,7 @@ class HiTable extends React.Component {
 
         // Replace stickyRowContent
         const tableBody = document.getElementById(`${this.props.tabId}-body`);
-        const stickyRowContentDiv = tableBody.getElementsByClassName('stickyRowContent');
+        const stickyRowContentDiv = tableBody ? tableBody.getElementsByClassName('stickyRowContent') : [];
         if (stickyRowContentDiv.length > 0) {
             Array.prototype.filter.call(stickyRowContentDiv, div => {
                 div.style.left = `${this.wrapperDiv.scrollLeft + (this.props.selectable ? 25 : 0)}px`;
@@ -479,7 +485,9 @@ class HiTable extends React.Component {
         this.backToTopButton['style'].top = -99999 + 'px';
 
         // Set scroll top to 0
-        this.tBody.scrollTop = 0;
+        if (this.tBody) {
+            this.tBody.scrollTop = 0;
+        }
         this.scrollTop = 0;
     }
 
@@ -551,7 +559,8 @@ class HiTable extends React.Component {
             fixedColumnWidth,
             disableContextMenu,
             footerContent,
-            detailRowsOptions
+            detailRowsOptions,
+            noResultsContent
         } = this.props;
 
         const { dateUpdate, isScrollToBottom } = this.state;
@@ -607,7 +616,7 @@ class HiTable extends React.Component {
                         lookupColumns: lookupColumns,
                         fixedColumnWidth: fixedColumnWidth
                     }),
-                    React.createElement(HiTableBody, {
+                    dataSource.length > 0 && React.createElement(HiTableBody, {
                         tabId: tabId,
                         columns: columns,
                         orderedColumns: orderedColumns,
@@ -635,7 +644,7 @@ class HiTable extends React.Component {
                         disableContextMenu: disableContextMenu,
                         detailRowsOptions: detailRowsOptions
                     }),
-                    infiniteScroll && React.createElement(HiTableFooterScroll, {
+                    dataSource.length > 0 && infiniteScroll && React.createElement(HiTableFooterScroll, {
                         tabId: tabId,
                         hasNextDatas: hasNextDatas,
                         requestNextDatas: requestNextDatas,
@@ -643,7 +652,7 @@ class HiTable extends React.Component {
                         isScrollToBottom: isScrollToBottom,
                         translations: translations.tableFooterScroll
                     }),
-                    !infiniteScroll && footerContent && React.createElement(
+                    dataSource.length > 0 && !infiniteScroll && footerContent && React.createElement(
                         HiTableFooter,
                         {
                             nbColumnsDisplayed: nbColumnsDisplayed,
@@ -674,7 +683,8 @@ class HiTable extends React.Component {
                         React.createElement(ArrowUp, { className: classes.backToTopButtonArrow })
                     )
                 )
-            )
+            ),
+            dataSource.length === 0 && noResultsContent && noResultsContent
         );
     }
 }
@@ -701,7 +711,8 @@ HiTable.defaultProps = {
     lookupColumns: [],
     loading: false,
     fixedColumnWidth: true,
-    disableContextMenu: true
+    disableContextMenu: true,
+    noResultsContent: null
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -886,6 +897,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: PropTypes.oneOf(['l', 'm', 's'])
+    view: PropTypes.oneOf(['l', 'm', 's']),
+    /**
+     * No results content.
+     */
+    noResultsContent: PropTypes.object
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);

package/es/HiTable/HiTableBody.js

@@ -423,7 +423,8 @@ HiTableBody.defaultProps = {
     view: 'l',
     loading: false,
     disableContextMenu: true,
-    detailRowsOptions: {}
+    detailRowsOptions: {},
+    noResultsContent: null
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/es/HiTable/HiTableContextMenu.js

@@ -10,13 +10,14 @@ export const styles = theme => ({
     contextMenu: {
         zIndex: 9999,
         backgroundColor: theme.palette.background3,
-        boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)'
+        boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)',
+        textAlign: 'left'
     },
     contextMenuItem: _extends({}, theme.typography.body1, {
         height: 40,
         width: 300,
         cursor: 'pointer',
-        padding: '10px 10px 10px 28px',
+        padding: 10,
         color: theme.palette.neutral.dark,
         '&:hover': {
             backgroundColor: theme.palette.hover,
@@ -125,7 +126,7 @@ HiTableContextMenu.defaultProps = {
         copy: 'Copy',
         exclude: 'Exclude "%s"',
         lookUp: 'Look up "%s"',
-        openInNewTab: 'Open the transaction in a new tab'
+        openInNewTab: 'Open in new tab'
     }
 };
 HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {

package/es/HiTable/constants.js

@@ -102,12 +102,12 @@ export const DEFAULT_WIDTHS = {
         [VIEWS.SMALL]: 120
     },
     [TYPE_ICON]: {
-        [VIEWS.LARGE]: 120,
+        [VIEWS.LARGE]: 140,
         [VIEWS.MEDIUM]: 100,
-        [VIEWS.SMALL]: 40
+        [VIEWS.SMALL]: 60
     },
     [TYPE_IMAGE]: {
-        [VIEWS.LARGE]: 120,
+        [VIEWS.LARGE]: 140,
         [VIEWS.MEDIUM]: 100,
         [VIEWS.SMALL]: 60
     },
@@ -132,8 +132,8 @@ export const DEFAULT_WIDTHS = {
         [VIEWS.SMALL]: 80
     },
     [TYPE_TEXT]: {
-        [VIEWS.LARGE]: 120,
-        [VIEWS.MEDIUM]: 100,
+        [VIEWS.LARGE]: 200,
+        [VIEWS.MEDIUM]: 120,
         [VIEWS.SMALL]: 80
     },
     [TYPE_THIRD_PARTY_SECURITY]: {
@@ -168,8 +168,8 @@ export const DEFAULT_VIEWS = {
  * @type {{}}
  */
 export const DEFAULT_PADDING = {
-    [VIEWS.LARGE]: 12,
-    [VIEWS.MEDIUM]: 10,
+    [VIEWS.LARGE]: 8,
+    [VIEWS.MEDIUM]: 8,
     [VIEWS.SMALL]: 8
 };
 

package/es/utils/HiIconBuilder.js

@@ -30,8 +30,8 @@ class HiIconBuilder extends PureComponent {
 
     render() {
         const _props = this.props,
-              { icon, size, className, style, onClick, color, backgroundColor } = _props,
-              others = _objectWithoutProperties(_props, ['icon', 'size', 'className', 'style', 'onClick', 'color', 'backgroundColor']);
+              { icon, size, width, height, className, style, onClick, color, backgroundColor } = _props,
+              others = _objectWithoutProperties(_props, ['icon', 'size', 'width', 'height', 'className', 'style', 'onClick', 'color', 'backgroundColor']);
 
         let props = {};
         if (onClick) {
@@ -63,8 +63,8 @@ class HiIconBuilder extends PureComponent {
         return React.createElement(IconName, _extends({
             className: className,
             style: _extends({
-                height: size,
-                width: size
+                height: height ? height : size,
+                width: width ? width : size
             }, color && { color, fill: color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
             onClick: onClick
         }, props, others));
@@ -99,6 +99,14 @@ HiIconBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Taile de la police
      */
     size: PropTypes.number,
+    /**
+     * Largeur de l'icone (px)
+     */
+    width: PropTypes.number,
+    /**
+     * Hauteur de l'icone (px)
+     */
+    height: PropTypes.number,
     /**
      * Style surchargé
      */

package/es/utils/hiHelpers.js

@@ -162,7 +162,7 @@ export function getNextItemSelectable(node, direction) {
         if (node.nextSibling === null) {
             return null;
         } else if (node.nextSibling.tabIndex === -1) {
-            return this.getNextItemSelectable(node.nextSibling, direction);
+            return getNextItemSelectable(node.nextSibling, direction);
         }
         return node.nextSibling;
     } else if (node.previousSibling === null) {

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.27
+/** @license Material-UI v1.0.0-beta.28
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.27
+/** @license Material-UI v1.0.0-beta.28
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

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