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

package/es/HiTable/BodyCellBuilder.js

@@ -4,9 +4,9 @@ import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ContextMenuTrigger } from 'react-contextmenu';
-
+import moment from 'moment';
 import * as cst from './constants';
-import { CellLayout, CellAccount, CellAccountNumber, CellAddress, CellDate, CellIcon, CellImage, CellNumeric, CellRate, CellSentinel, CellStatus, CellText, CellThirdPartySecurity, CellCountry } from './BodyCells';
+import { CellLayout, CellAccount, CellAddress, CellDate, CellIcon, CellImage, CellNumeric, CellRate, CellSentinel, CellStatus, CellText, CellThirdPartySecurity, CellCountry } from './BodyCells';
 import { formatRate } from '../utils/hiHelpers';
 
 /**
@@ -72,6 +72,7 @@ export default class BodyCellBuilder extends React.Component {
             align,
             dense,
             ellipsis,
+            formatShort,
             onSelect,
             selectable,
             selected,
@@ -83,9 +84,11 @@ export default class BodyCellBuilder extends React.Component {
             lookedUp,
             fixedColumnWidth,
             disableContextMenu,
-            detailInfos
+            detailInfos,
+            size,
+            tabId
         } = _props,
-              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos']);
+              props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'formatShort', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos', 'size', 'tabId']);
 
         const layoutProps = {
             type,
@@ -112,22 +115,12 @@ export default class BodyCellBuilder extends React.Component {
 
             switch (type) {
                 case cst.TYPE_ACCOUNT:
+                    layoutProps.title = data.value;
                     cellElement = React.createElement(CellAccount, { value: data.value, color: data.color, sticky: sticky });
                     break;
 
-                case cst.TYPE_ACCOUNT_NUMBER:
-                    cellElement = React.createElement(CellAccountNumber, {
-                        value: data.value,
-                        country: data.country,
-                        expirationDate: data.expirationDate,
-                        expirationDateLabel: data.expirationDateLabel,
-                        statusColor: data.statusColor,
-                        issuer: data.issuer,
-                        sticky: sticky
-                    });
-                    break;
-
                 case cst.TYPE_ADDRESS:
+                    layoutProps.title = `${data.name}, ${data.value}, ${data.city}`;
                     cellElement = React.createElement(CellAddress, {
                         name: data.name,
                         streetAddress: data.value,
@@ -141,6 +134,7 @@ export default class BodyCellBuilder extends React.Component {
                     break;
 
                 case cst.TYPE_COUNTRY:
+                    layoutProps.title = data.label ? data.label : data.value;
                     cellElement = React.createElement(CellCountry, {
                         label: data.label ? data.label : data.value,
                         path: data.img,
@@ -151,17 +145,19 @@ export default class BodyCellBuilder extends React.Component {
                     break;
 
                 case cst.TYPE_DATE:
+                    if (!props.displayTime) layoutProps.title = moment(data.value).format('dddd DD MMMM YYYY HH:mm:ss');
                     cellElement = React.createElement(CellDate, {
                         value: data.value,
                         locale: dateLocale,
                         view: view,
                         displayTime: props.displayTime,
                         sticky: sticky,
-                        formatShort: this.props.formatShort
+                        formatShort: formatShort
                     });
                     break;
 
                 case cst.TYPE_ICON:
+                    if (view === cst.VIEWS.SMALL) layoutProps.title = data.label ? data.label : data.value;
                     cellElement = React.createElement(CellIcon, {
                         value: data.label ? data.label : data.value,
                         icon: data.icon,
@@ -172,16 +168,18 @@ export default class BodyCellBuilder extends React.Component {
                     break;
 
                 case cst.TYPE_IMAGE:
+                    if (view === cst.VIEWS.SMALL) layoutProps.title = data.label ? data.label : data.value;
                     cellElement = React.createElement(CellImage, {
                         value: data.label ? data.label : data.value,
                         path: data.img,
-                        size: this.props.size,
+                        size: size,
                         view: view,
                         sticky: sticky
                     });
                     break;
 
                 case cst.TYPE_NUMERIC:
+                    if (view !== cst.VIEWS.LARGE) layoutProps.title = data.label ? data.label : data.value;
                     cellElement = React.createElement(CellNumeric, {
                         value: data.value,
                         currency: data.currency,
@@ -216,6 +214,7 @@ export default class BodyCellBuilder extends React.Component {
                     break;
 
                 case cst.TYPE_STATUS:
+                    layoutProps.title = data.label ? data.label : data.value;
                     cellElement = React.createElement(CellStatus, _extends({
                         code: data.value,
                         value: data.label ? data.label : data.value,
@@ -229,6 +228,7 @@ export default class BodyCellBuilder extends React.Component {
                     break;
 
                 case cst.TYPE_THIRD_PARTY_SECURITY:
+                    layoutProps.title = data.label ? data.label : data.value;
                     layoutProps.align = 'center';
                     cellElement = React.createElement(CellThirdPartySecurity, {
                         value: data.value,
@@ -237,8 +237,10 @@ export default class BodyCellBuilder extends React.Component {
                     });
                     break;
 
+                case cst.TYPE_ACCOUNT_NUMBER:
                 case cst.TYPE_TEXT:
                 default:
+                    layoutProps.title = data.label ? data.label : data.value;
                     cellElement = React.createElement(CellText, {
                         ukey: ukey,
                         value: data.label ? data.label : data.value,
@@ -253,7 +255,7 @@ export default class BodyCellBuilder extends React.Component {
             cellContent = disableContextMenu ? cellElement : React.createElement(
                 ContextMenuTrigger,
                 {
-                    id: `hitable_context_menu_${this.props.tabId}`,
+                    id: `hitable_context_menu_${tabId}`,
                     collect: this.collectContextMenuDatas
                 },
                 cellElement

package/es/HiTable/BodyCells/CellAccount.js

@@ -16,11 +16,7 @@ class CellAccount extends React.Component {
     render() {
         const { value, color } = this.props;
 
-        return React.createElement(
-            Tooltip,
-            { title: value, placement: 'bottom' },
-            React.createElement(HiColoredLabel, { label: value, color: color })
-        );
+        return React.createElement(HiColoredLabel, { label: value, color: color });
     }
 }
 

package/es/HiTable/BodyCells/CellAddress.js

@@ -1,12 +1,9 @@
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 // @inheritedComponent CellLayout
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tooltip from '../../Tooltip';
 import * as cst from '../constants';
 import withStyles from '../../styles/withStyles';
-import CellLayout from './CellLayout';
 
 export const styles = theme => ({
     rightEllipsisSpan: {
@@ -48,48 +45,10 @@ class CellAddress extends React.Component {
             label += isoCountry;
         }
 
-        let tooltipContent = React.createElement(
-            'div',
-            null,
-            React.createElement(
-                'div',
-                null,
-                name
-            ),
-            React.createElement(
-                'div',
-                null,
-                streetAddress
-            ),
-            React.createElement(
-                'div',
-                null,
-                React.createElement(
-                    'span',
-                    null,
-                    city + ', '
-                ),
-                React.createElement(
-                    'span',
-                    null,
-                    postalCode
-                )
-            ),
-            React.createElement(
-                'div',
-                null,
-                country
-            )
-        );
-
         return React.createElement(
-            Tooltip,
-            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
-                'div',
-                { className: classes.rightEllipsisSpan },
-                label
-            )
+            'div',
+            { className: classes.rightEllipsisSpan },
+            label
         );
     }
 }

package/es/HiTable/BodyCells/CellCountry.js

@@ -1,9 +1,7 @@
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import CellImage from './CellImage';
-import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
 

package/es/HiTable/BodyCells/CellDate.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import 'moment/locale/fr';
 import withStyles from '../../styles/withStyles';
-import Tooltip from '../../Tooltip';
 import * as cst from '../constants';
 
 export const styles = {
@@ -37,8 +36,7 @@ class CellDate extends React.Component {
         const date = moment(value);
         date.locale(locale);
 
-        const titleValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
-        let displayedValue = titleValue;
+        let displayedValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
         if (view === cst.VIEWS.SMALL) {
             displayedValue = displayTime ? date.format(`${formatShort.replace('YYYY', 'YY')} HH:mm:ss`) : date.format(formatShort.replace('YYYY', 'YY'));
         } else if (view === cst.VIEWS.MEDIUM) {
@@ -54,13 +52,9 @@ class CellDate extends React.Component {
         }
 
         return React.createElement(
-            Tooltip,
-            { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
-                'div',
-                { className: classes.rightEllipsisSpan },
-                displayedValue
-            )
+            'div',
+            { className: classes.rightEllipsisSpan },
+            displayedValue
         );
     }
 }

package/es/HiTable/BodyCells/CellIcon.js

@@ -1,7 +1,6 @@
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
 import HiIconBuilder from '../../utils/HiIconBuilder';
@@ -11,13 +10,15 @@ export const styles = {
         float: 'left'
     },
     label: {
-        margin: 5
-    },
-    wrapper: {
+        margin: '4px 0',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis'
     },
+    wrapper: {
+        maxWidth: '100%',
+        display: 'inline-flex'
+    },
     nowrap: {
         whiteSpace: 'nowrap'
     }
@@ -36,33 +37,18 @@ class CellIcon extends React.Component {
     render() {
         const { classes, icon, value, view, color } = this.props;
 
-        const iconElement = icon !== '' ? React.createElement(HiIconBuilder, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
+        const iconElement = icon !== '' ? React.createElement(HiIconBuilder, { color: color, className: classes.icon, icon: icon, width: 40, height: 24 }) : '';
 
-        const tooltipContent = React.createElement(
+        return React.createElement(
             'div',
-            { className: classes.nowrap },
+            { className: classes.wrapper },
             iconElement,
-            React.createElement(
+            view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && React.createElement(
                 'span',
-                null,
+                { className: classes.label },
                 value
             )
         );
-
-        return React.createElement(
-            Tooltip,
-            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
-                'div',
-                { className: classes.wrapper },
-                iconElement,
-                view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && React.createElement(
-                    'span',
-                    { className: classes.label },
-                    value
-                )
-            )
-        );
     }
 }
 

package/es/HiTable/BodyCells/CellImage.js

@@ -55,17 +55,6 @@ class CellImage extends React.Component {
     render() {
         const { classes, path, value, view, size } = this.props;
 
-        const tooltipContent = React.createElement(
-            'div',
-            { className: classes.tooltipContainer },
-            React.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
-            React.createElement(
-                'span',
-                { className: classes.tooltipLabel },
-                value
-            )
-        );
-
         let innerCellElement = null;
         if (path) {
             if (view === cst.VIEWS.SMALL) {
@@ -98,16 +87,7 @@ class CellImage extends React.Component {
             );
         }
 
-        if (view === cst.VIEWS.LARGE) {
-            // Don't add tooltip for large view
-            return innerCellElement;
-        } else {
-            return React.createElement(
-                Tooltip,
-                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                innerCellElement
-            );
-        }
+        return innerCellElement;
     }
 }
 

package/es/HiTable/BodyCells/CellLayout.js

@@ -63,7 +63,7 @@ class CellLayout extends React.Component {
             align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
             view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedColumnWidth, sticky,
             selectable, selected, onSelect, childrenCount, detailInfos, onOpenDetails, theme, padding,
-            lookedUp
+            lookedUp, title
         } = this.props;
 
         const offset = selectable ? dense ? 32 : 40 : 0;
@@ -106,7 +106,8 @@ class CellLayout extends React.Component {
                         paddingLeft: selectable ? 0 : padding,
                         paddingRight: padding,
                         height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-                    }
+                    },
+                    title: title
                 },
                 children,
                 childrenCount && React.createElement(
@@ -153,7 +154,8 @@ CellLayout.defaultProps = {
     fixedColumnWidth: true,
     sticky: false,
     padding: 8,
-    detailInfos: null
+    detailInfos: null,
+    title: null
 };
 CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -220,6 +222,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Nombre d'enfants
      */
-    childrenCount: PropTypes.number
+    childrenCount: PropTypes.number,
+    /**
+     * Html title attribute
+     */
+    title: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiCellLayout' })(CellLayout);

package/es/HiTable/BodyCells/CellNumeric.js

@@ -1,11 +1,8 @@
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import withStyles from '../../styles/withStyles';
 import { formatNumber, formatCurrencyAmount } from '../../utils/hiHelpers';
-import Tooltip from '../../Tooltip';
-import * as cst from '../constants';
 
 export const styles = theme => ({
     spanNumeric: {
@@ -26,27 +23,17 @@ class CellNumeric extends React.Component {
         const { classes, value, locale, currency, view, precision } = this.props;
 
         let displayedValue = '';
-        let titleValue = '';
 
         if (currency) {
             displayedValue = formatCurrencyAmount(value, view, locale, currency);
-            if (view === cst.VIEWS.LARGE) {
-                titleValue = displayedValue;
-            } else {
-                titleValue = formatCurrencyAmount(value, cst.VIEWS.LARGE, locale, currency);
-            }
         } else {
             displayedValue = formatNumber(value, view, locale, precision);
         }
 
         return React.createElement(
-            Tooltip,
-            { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
-                'span',
-                { className: classes.spanNumeric },
-                displayedValue
-            )
+            'span',
+            { className: classes.spanNumeric },
+            displayedValue
         );
     }
 }

package/es/HiTable/BodyCells/CellSentinel.js

@@ -1,7 +1,6 @@
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tooltip from '../../Tooltip';
 import HiColoredLabel from '../../HiColoredLabel';
 import { withStyles } from '../../styles';
 import * as cst from '../constants';
@@ -80,54 +79,29 @@ class CellSentinel extends React.Component {
 
         const scoreLabel = score > 0 ? `+${score}` : `${score}`;
 
-        const tooltipContent = React.createElement(
-            'div',
-            null,
-            React.createElement(
-                'div',
-                { className: classes.nowrap },
-                scoreLabel
-            ),
-            React.createElement(
-                'div',
-                { className: classes.nowrap },
-                fraudResult
-            ),
-            !!smartDecision && automaticFraudReviewResult && React.createElement(
-                'div',
-                { className: classes.nowrap },
-                'SD: ',
-                automaticFraudReviewResult
-            )
-        );
-
         return React.createElement(
-            Tooltip,
-            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
+            'div',
+            { style: { textAlign: 'right' } },
+            React.createElement(HiColoredLabel, {
+                label: scoreLabel,
+                color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
+                classes: { root: classes.label },
+                active: pendingManualAction
+            }),
+            !hideFraudResult && React.createElement(HiColoredLabel, {
+                label: fraudResult.toUpperCase().substr(0, 1),
+                color: this.getColorFromFraudResult(fraudResult),
+                classes: { root: classes.label },
+                active: pendingManualAction
+            }),
+            !!smartDecision && React.createElement(
                 'div',
-                { style: { textAlign: 'right' } },
-                React.createElement(HiColoredLabel, {
-                    label: scoreLabel,
-                    color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
-                    classes: { root: classes.label },
-                    active: pendingManualAction
-                }),
-                !hideFraudResult && React.createElement(HiColoredLabel, {
-                    label: fraudResult.toUpperCase().substr(0, 1),
-                    color: this.getColorFromFraudResult(fraudResult),
-                    classes: { root: classes.label },
+                { className: classes.smartDecision },
+                automaticFraudReviewResult && React.createElement(HiColoredLabel, {
+                    label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
+                    color: this.getColorFromFraudResult(automaticFraudReviewResult),
                     active: pendingManualAction
-                }),
-                !!smartDecision && React.createElement(
-                    'div',
-                    { className: classes.smartDecision },
-                    automaticFraudReviewResult && React.createElement(HiColoredLabel, {
-                        label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
-                        color: this.getColorFromFraudResult(automaticFraudReviewResult),
-                        active: pendingManualAction
-                    })
-                )
+                })
             )
         );
     }

package/es/HiTable/BodyCells/CellStatus.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import HiColoredLabel from '../../HiColoredLabel';
 import HiPins from '../../HiPins';
 import { withStyles } from '../../styles';
-import Tooltip from '../../Tooltip';
 
 export const styles = theme => ({
     labelDiv: {
@@ -31,22 +30,18 @@ class CellStatus extends React.Component {
         const color = typeof theme.palette.status[code] !== 'undefined' ? theme.palette.status[code] : theme.palette.neutral.normal;
 
         return React.createElement(
-            Tooltip,
-            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
+            'div',
+            null,
+            nbOperations > 0 ? React.createElement(
                 'div',
-                null,
-                nbOperations > 0 ? React.createElement(
-                    'div',
-                    { className: classes.labelDiv },
-                    React.createElement(HiColoredLabel, { label: value, color: color }),
-                    React.createElement(
-                        HiPins,
-                        { color: color, onClick: onOpenDetails, className: classes.pins },
-                        nbOperations
-                    )
-                ) : React.createElement(HiColoredLabel, { label: value, color: color })
-            )
+                { className: classes.labelDiv },
+                React.createElement(HiColoredLabel, { label: value, color: color }),
+                React.createElement(
+                    HiPins,
+                    { color: color, onClick: onOpenDetails, className: classes.pins },
+                    nbOperations
+                )
+            ) : React.createElement(HiColoredLabel, { label: value, color: color })
         );
     }
 }

package/es/HiTable/BodyCells/CellText.js

@@ -1,7 +1,6 @@
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tooltip from '../../Tooltip';
 import withStyles from '../../styles/withStyles';
 import * as cst from '../constants';
 import HiColoredLabel from '../../HiColoredLabel';
@@ -57,7 +56,7 @@ class CellText extends React.Component {
          * Calcul l'espace disponible dans la cellule en plus du premier mot
          * si il reste de l'espace, définit la largeur du span pour le reste du texte
          */
-        if (this.props.ellipsis === cst.ELLIPSIS_AFTER_FIRST_WORD) {
+        if (this.props.ellipsis === cst.ELLIPSIS_AFTER_FIRST_WORD || this.props.ellipsis === cst.ELLIPSIS_NAME) {
             if (this.cellText !== null) {
                 const [startSpan, endSpan] = this.cellText.getElementsByTagName('span');
                 if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
@@ -104,6 +103,7 @@ class CellText extends React.Component {
         const valueString = value.toString();
 
         switch (ellipsis) {
+            case cst.ELLIPSIS_NAME:
             case cst.ELLIPSIS_AFTER_FIRST_WORD:
                 // Split value in 2 strings around first whitespace
                 start = valueString.substr(0, valueString.indexOf(' '));
@@ -190,11 +190,7 @@ class CellText extends React.Component {
                 break;
         }
 
-        return React.createElement(
-            Tooltip,
-            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
-            valueElement
-        );
+        return valueElement;
     }
 }
 

package/es/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -1,10 +1,8 @@
 import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
 // @inheritedComponent CellLayout
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Lock, LockOpen, LockOpenOutline } from 'mdi-material-ui';
-import Tooltip from '../../Tooltip';
 import { withStyles } from '../../styles';
 
 export const styles = {
@@ -68,20 +66,10 @@ class CellThirdPartySecurity extends React.Component {
                 break;
         }
 
-        const tooltipContent = React.createElement(
-            'div',
-            { className: classes.nowrap },
-            label
-        );
-
         return React.createElement(
-            Tooltip,
-            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
-                'div',
-                null,
-                icon
-            )
+            'div',
+            null,
+            icon
         );
     }
 }

package/es/HiTable/BodyCells/index.js

@@ -1,8 +1,6 @@
 //flow
-
 export { default as CellThirdPartySecurity } from './CellThirdPartySecurity';
 export { default as CellAccount } from './CellAccount';
-export { default as CellAccountNumber } from './CellAccountNumber';
 export { default as CellAddress } from './CellAddress';
 export { default as CellDate } from './CellDate';
 export { default as CellIcon } from './CellIcon';