@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.4

package/es/HiTable/BodyCells/CellAddress.js

@@ -1,9 +1,11 @@
-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: {
@@ -21,11 +23,7 @@ export const styles = theme => ({
  * - sinon on affiche la ville et le pays
  * - tous les champs définis sont affichés dans le tooltip
  */
-class CellAddress extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellAddress extends React.PureComponent {
 
     render() {
         const { classes, streetAddress, name, city, postalCode, view, country, isoCountry } = this.props;
@@ -45,10 +43,48 @@ class CellAddress extends React.Component {
             label += isoCountry;
         }
 
-        return React.createElement(
+        let tooltipContent = React.createElement(
             'div',
-            { className: classes.rightEllipsisSpan },
-            label
+            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
+            )
         );
     }
 }

package/es/HiTable/BodyCells/CellCountry.js

@@ -1,7 +1,8 @@
-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';
 
@@ -43,19 +44,44 @@ export const styles = theme => ({
  * en vue small : Affiche la valeur courte (id),  tooltip = Image + Value
  *
  */
-class CellCountry extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellCountry extends React.PureComponent {
 
     render() {
-        const { label, path, value, view } = this.props;
+        const { classes, value, isoCode, view } = this.props;
+
+        let path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
+
+        let tooltipContent = React.createElement(
+            'div',
+            null,
+            React.createElement('img', { src: path, className: classes.tooltipImg }),
+            React.createElement(
+                'span',
+                { className: classes.tooltipLabel },
+                value
+            )
+        );
 
         if (view === cst.VIEWS.LARGE) {
-            return React.createElement(CellImage, { value: label ? label : value, path: path, view: view });
+            return React.createElement(CellImage, { view: cst.VIEWS.LARGE, value: value, path: path });
         } else {
-            return React.createElement(CellImage, { value: value, path: path, view: view });
+            let valueElement = value;
+            if (view === cst.VIEWS.SMALL) {
+                valueElement = isoCode.toUpperCase();
+            }
+            return React.createElement(
+                Tooltip,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                React.createElement(
+                    'div',
+                    { className: classes.wrapper },
+                    React.createElement(
+                        'span',
+                        { className: classes.label },
+                        valueElement
+                    )
+                )
+            );
         }
     }
 }
@@ -68,15 +94,11 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label
      */
-    label: PropTypes.string,
-    /**
-     * Flag's image path
-     */
-    path: PropTypes.string,
+    value: PropTypes.string.isRequired,
     /**
-     * Value - code isoa2 (uppercase)
+     * Code ISO
      */
-    value: PropTypes.string,
+    isoCode: PropTypes.string.isRequired,
     /**
      * View (L/M/S)
      */

package/es/HiTable/BodyCells/CellDate.js

@@ -1,12 +1,12 @@
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
+import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 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 = {
+export const styles = theme => ({
     rightEllipsisSpan: {
         display: 'inline-block',
         overflow: 'hidden',
@@ -14,33 +14,51 @@ export const styles = {
         whiteSpace: 'pre',
         width: '100%'
     }
-};
+});
 
 /**
  * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
  */
 class CellDate extends React.Component {
-    constructor(...args) {
-        var _temp;
-
-        return _temp = super(...args), this.formatLong = 'dddd DD MMMM YYYY HH:mm:ss', _temp;
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
 
     render() {
-        const { classes, displayTime, value, locale, view, formatShort } = this.props;
+        const { classes, displayTime, value, locale, view } = this.props;
 
-        const date = moment(value);
-        date.locale(locale);
+        const date = new Date(value);
 
-        let displayedValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
+        let options = _extends({
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: '2-digit'
+        }, displayTime && {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+        const titleValue = date.toLocaleString(locale, options);
+        let displayedValue = titleValue;
         if (view === cst.VIEWS.SMALL) {
-            displayedValue = displayTime ? date.format(`${formatShort.replace('YYYY', 'YY')} HH:mm:ss`) : date.format(formatShort.replace('YYYY', 'YY'));
+            options = _extends({
+                year: '2-digit',
+                month: '2-digit',
+                day: '2-digit'
+            }, displayTime && {
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            displayedValue = date.toLocaleString(locale, options);
         } else if (view === cst.VIEWS.MEDIUM) {
-            displayedValue = displayTime ? date.format(`${formatShort} HH:mm:ss`) : date.format(formatShort);
+            options = _extends({
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit'
+            }, displayTime && {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            displayedValue = date.toLocaleString(locale, options);
         }
 
         if (view === cst.VIEWS.LARGE) {
@@ -52,18 +70,21 @@ class CellDate extends React.Component {
         }
 
         return React.createElement(
-            'div',
-            { className: classes.rightEllipsisSpan },
-            displayedValue
+            Tooltip,
+            { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'div',
+                { className: classes.rightEllipsisSpan },
+                displayedValue
+            )
         );
     }
 }
 
 CellDate.defaultProps = {
     displayTime: false,
-    locale: 'en',
-    view: 'l',
-    formatShort: 'DD/MM/YYYY'
+    locale: 'en-EN',
+    view: 'l'
 };
 CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -75,21 +96,11 @@ CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     displayTime: PropTypes.bool,
     /**
-     * Format de la date en vue small (ex: DD/MM/YYYY)
-     * @see https://momentjs.com/docs/#/parsing/string-format/
-     */
-    formatShort: PropTypes.string.isRequired,
-    /**
-     * Locale moment
+     * Locale BCP 47
      */
     locale: PropTypes.string,
     /**
-     * True si la colonne est la première colonne et
-     * doit avoir un comportement "sticky" lors du scroll horizontal
-     */
-    sticky: PropTypes.bool,
-    /**
-     * Date as string
+     * Volume/Amount
      */
     value: PropTypes.string.isRequired,
     /**

package/es/HiTable/BodyCells/CellIcon.js

@@ -1,61 +1,66 @@
-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';
 
-export const styles = {
+export const styles = theme => ({
     icon: {
         float: 'left'
     },
     label: {
-        margin: '4px 0',
+        margin: 5
+    },
+    wrapper: {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis'
-    },
-    wrapper: {
-        maxWidth: '100%',
-        display: 'inline-flex'
-    },
-    nowrap: {
-        whiteSpace: 'nowrap'
     }
-};
+});
 
 /**
  * Cette cellule permet d'afficher une icône et un label (optionnel).
  * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
  */
-class CellIcon extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellIcon extends React.PureComponent {
 
     render() {
-        const { classes, icon, value, view, color } = this.props;
+        const { classes, icon, value, view } = this.props;
 
-        const iconElement = icon !== '' ? React.createElement(HiIconBuilder, { color: color, className: classes.icon, icon: icon, width: 40, height: 24 }) : '';
+        const iconElement = React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 18 });
 
-        return React.createElement(
+        const tooltipContent = React.createElement(
             'div',
-            { className: classes.wrapper },
+            null,
             iconElement,
-            view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && React.createElement(
+            React.createElement(
                 'span',
-                { className: classes.label },
+                null,
                 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
+                )
+            )
+        );
     }
 }
 
 CellIcon.defaultProps = {
-    icon: '',
-    view: 'l',
-    color: '#000'
+    view: 'l'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -63,14 +68,9 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: PropTypes.object,
     /**
-     * Couleur de l'icône
-     */
-    color: PropTypes.string.isRequired,
-    /**
-     * Icon name [from material-design-icons](https://materialdesignicons.com/)
-     * used by HiIconBuilder
+     * Icône name [from material-design-icons](https://materialdesignicons.com/)
      */
-    icon: PropTypes.string,
+    icon: PropTypes.string.isRequired,
     /**
      * Label
      */

package/es/HiTable/BodyCells/CellImage.js

@@ -1,43 +1,43 @@
-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';
 
 export const styles = theme => ({
     img: {
+        width: 24,
         height: 'auto',
         float: 'left'
     },
     smallImg: {
+        width: 24,
         height: 'auto'
     },
     label: {
-        marginLeft: 5,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
+        marginLeft: 5
     },
     tooltipImg: {
         width: 24,
         height: 'auto',
-        float: 'left'
+        float: 'left',
+        marginTop: 2
     },
     tooltipLabel: {
         marginLeft: 5,
+        position: 'relative',
+        bottom: 2,
         verticalAlign: 'middle'
+
     },
     wrapper: {
-        display: 'flex',
-        alignItems: 'center'
+        whiteSpace: 'nowrap',
+        overflow: "hidden",
+        textOverflow: "ellipsis"
     },
     center: {
         textAlign: 'center'
-    },
-    tooltipContainer: {
-        display: 'flex',
-        alignItems: 'center'
     }
 });
 
@@ -46,39 +46,34 @@ export const styles = theme => ({
  * En vue large, aucun tooltip n'est affiché
  * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
  */
-class CellImage extends React.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
+class CellImage extends React.PureComponent {
 
     render() {
-        const { classes, path, value, view, size } = this.props;
+        const { classes, path, value, view } = this.props;
+
+        const tooltipContent = React.createElement(
+            'div',
+            null,
+            React.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
+            React.createElement(
+                'span',
+                { className: classes.tooltipLabel },
+                value
+            )
+        );
 
         let innerCellElement = null;
-        if (path) {
-            if (view === cst.VIEWS.SMALL) {
-                innerCellElement = React.createElement(
-                    'div',
-                    { className: classes.center },
-                    React.createElement('img', { src: path, alt: value, className: classes.smallImg, width: size })
-                );
-            } else {
-                innerCellElement = React.createElement(
-                    'div',
-                    { className: classes.wrapper },
-                    React.createElement('img', { src: path, alt: value, className: classes.img, width: size }),
-                    !!value && React.createElement(
-                        'span',
-                        { className: classes.label },
-                        value
-                    )
-                );
-            }
+        if (view === cst.VIEWS.SMALL) {
+            innerCellElement = React.createElement(
+                'div',
+                { className: classes.center },
+                React.createElement('img', { src: path, alt: value, className: classes.smallImg })
+            );
         } else {
             innerCellElement = React.createElement(
                 'div',
                 { className: classes.wrapper },
+                React.createElement('img', { src: path, alt: value, className: classes.img }),
                 !!value && React.createElement(
                     'span',
                     { className: classes.label },
@@ -87,13 +82,18 @@ class CellImage extends React.Component {
             );
         }
 
-        return innerCellElement;
+        if (view === cst.VIEWS.LARGE) {
+            return innerCellElement;
+        } else {
+            return React.createElement(
+                Tooltip,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                innerCellElement
+            );
+        }
     }
 }
 
-CellImage.defaultProps = {
-    size: 24
-};
 CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
@@ -102,13 +102,9 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Image path
      */
-    path: PropTypes.string,
-    /**
-     * Image path
-     */
-    size: PropTypes.number.isRequired,
+    path: PropTypes.string.isRequired,
     /**
-     * Value
+     * Label
      */
     value: PropTypes.string,
     /**