@hipay/hipay-material-ui 1.0.0-beta.13 → 1.0.0-beta.15

package/es/HiTable/BodyCellBuilder.js

@@ -155,6 +155,7 @@ export default class BodyCellBuilder extends React.PureComponent {
                     cellElement = React.createElement(CellIcon, {
                         value: data.label ? data.label : data.value,
                         icon: data.icon,
+                        color: data.color,
                         view: view,
                         sticky: sticky
                     });
@@ -164,6 +165,7 @@ export default class BodyCellBuilder extends React.PureComponent {
                     cellElement = React.createElement(CellImage, {
                         value: data.label ? data.label : data.value,
                         path: data.img,
+                        size: this.props.size,
                         view: view,
                         sticky: sticky
                     });
@@ -173,6 +175,7 @@ export default class BodyCellBuilder extends React.PureComponent {
                     cellElement = React.createElement(CellNumeric, {
                         value: data.value,
                         currency: data.currency,
+                        precision: data.precision,
                         locale: numberLocale,
                         view: view,
                         sticky: sticky

package/es/HiTable/BodyCells/CellIcon.js

@@ -1,12 +1,11 @@
 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 = theme => ({
+export const styles = {
     icon: {
         float: 'left'
     },
@@ -17,8 +16,11 @@ export const styles = theme => ({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis'
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
     }
-});
+};
 
 /**
  * Cette cellule permet d'afficher une icône et un label (optionnel).
@@ -27,13 +29,13 @@ export const styles = theme => ({
 class CellIcon extends React.PureComponent {
 
     render() {
-        const { classes, icon, value, view } = this.props;
+        const { classes, icon, value, view, color } = this.props;
 
-        const iconElement = icon !== '' ? React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 18 }) : '';
+        const iconElement = icon !== '' ? React.createElement(HiIconBuilder, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
 
         const tooltipContent = React.createElement(
             'div',
-            null,
+            { className: classes.nowrap },
             iconElement,
             React.createElement(
                 'span',
@@ -61,7 +63,8 @@ class CellIcon extends React.PureComponent {
 
 CellIcon.defaultProps = {
     icon: '',
-    view: 'l'
+    view: 'l',
+    color: '#000'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -69,7 +72,11 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: PropTypes.object,
     /**
-     * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     * Couleur de l'icône
+     */
+    color: PropTypes.string.isRequired,
+    /**
+     * Icon name [from material-design-icons](https://materialdesignicons.com/)
      * used by HiIconBuilder
      */
     icon: PropTypes.string,

package/es/HiTable/BodyCells/CellImage.js

@@ -1,18 +1,15 @@
 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: {
@@ -21,20 +18,18 @@ export const styles = theme => ({
     tooltipImg: {
         width: 24,
         height: 'auto',
-        float: 'left',
-        marginTop: 2
+        float: 'left'
     },
     tooltipLabel: {
         marginLeft: 5,
-        position: 'relative',
-        bottom: 2,
         verticalAlign: 'middle'
-
     },
     wrapper: {
+        display: 'flex',
+        alignItems: 'center',
         whiteSpace: 'nowrap',
-        overflow: "hidden",
-        textOverflow: "ellipsis"
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
     },
     center: {
         textAlign: 'center'
@@ -53,12 +48,12 @@ export const styles = theme => ({
 class CellImage extends React.PureComponent {
 
     render() {
-        const { classes, path, value, view } = this.props;
+        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 }),
+            React.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
             React.createElement(
                 'span',
                 { className: classes.tooltipLabel },
@@ -72,13 +67,13 @@ class CellImage extends React.PureComponent {
                 innerCellElement = React.createElement(
                     'div',
                     { className: classes.center },
-                    React.createElement('img', { src: path, alt: value, className: classes.smallImg })
+                    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 }),
+                    React.createElement('img', { src: path, alt: value, className: classes.img, width: size }),
                     !!value && React.createElement(
                         'span',
                         { className: classes.label },
@@ -111,6 +106,9 @@ class CellImage extends React.PureComponent {
     }
 }
 
+CellImage.defaultProps = {
+    size: 24
+};
 CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
@@ -120,6 +118,10 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
      * Image path
      */
     path: PropTypes.string,
+    /**
+     * Image path
+     */
+    size: PropTypes.number.isRequired,
     /**
      * Value
      */

package/es/HiTable/BodyCells/CellNumeric.js

@@ -18,7 +18,7 @@ export const styles = theme => ({
 class CellNumeric extends React.PureComponent {
 
     render() {
-        const { classes, value, locale, currency, view } = this.props;
+        const { classes, value, locale, currency, view, precision } = this.props;
 
         let displayedValue = '';
         let titleValue = '';
@@ -31,7 +31,7 @@ class CellNumeric extends React.PureComponent {
                 titleValue = formatCurrencyAmount(value, cst.VIEWS.LARGE, locale, currency);
             }
         } else {
-            displayedValue = formatNumber(value, view, locale);
+            displayedValue = formatNumber(value, view, locale, precision);
         }
 
         return React.createElement(
@@ -63,6 +63,10 @@ CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
      * Code de la devise (ISO 4217)
      */
     currency: PropTypes.string,
+    /**
+     * Nombre de chiffres après la virgule
+     */
+    precision: PropTypes.number,
     /**
      * View (L/M/S)
      */

package/es/HiTable/BodyCells/CellSentinel.js

@@ -5,15 +5,18 @@ import HiColoredLabel from '../../HiColoredLabel';
 import { withStyles } from '../../styles';
 import * as cst from '../constants';
 
-export const styles = theme => ({
+export const styles = {
     smartDecision: {
         display: 'inline-block',
         minWidth: 18
     },
     label: {
         marginLeft: 2
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
     }
-});
+};
 
 /**
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
@@ -77,17 +80,17 @@ class CellSentinel extends React.PureComponent {
             null,
             React.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 scoreLabel
             ),
             React.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 fraudResult
             ),
             !!smartDecision && automaticFraudReviewResult && React.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 'SD: ',
                 automaticFraudReviewResult
             )

package/es/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -2,17 +2,19 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import Tooltip from '../../Tooltip';
-import { withStyles, withTheme } from '../../styles';
 import { Lock, LockOpen, LockOpenOutline } from 'mdi-material-ui';
+import Tooltip from '../../Tooltip';
+import { withStyles } from '../../styles';
 
-export const styles = theme => ({
+export const styles = {
     icon: {
         width: 18,
         height: 18
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
     }
-});
+};
 
 /**
  * Cette cellule permet d'afficher une icône représentant le statut du 3DS.
@@ -31,26 +33,45 @@ class CellThirdPartySecurity extends React.PureComponent {
         let icon = null;
         switch (value) {
             case ECI_5:
-                icon = React.createElement(Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
+                icon = React.createElement(Lock, {
+                    className: classes.icon,
+                    style: { color: theme.palette.positive.normal }
+                });
                 break;
             case ECI_6:
-                icon = React.createElement(LockOpen, { className: classes.icon, style: { color: theme.palette.middle.normal } });
+                icon = React.createElement(LockOpen, {
+                    className: classes.icon,
+                    style: { color: theme.palette.middle.normal }
+                });
                 break;
             case AUTH_1:
-                icon = React.createElement(LockOpenOutline, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                icon = React.createElement(LockOpenOutline, {
+                    className: classes.icon,
+                    style: { color: theme.palette.neutral.light }
+                });
                 break;
             case AUTH_2:
-                icon = React.createElement(LockOpen, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                icon = React.createElement(LockOpen, {
+                    className: classes.icon,
+                    style: { color: theme.palette.neutral.light }
+                });
                 break;
             case ECI_7:
             case AUTH_0:
+            default:
                 icon = null;
                 break;
         }
 
+        const tooltipContent = React.createElement(
+            'div',
+            { className: classes.nowrap },
+            label
+        );
+
         return React.createElement(
             Tooltip,
-            { title: label, placement: this.props.sticky ? 'right' : 'bottom' },
+            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
             React.createElement(
                 'div',
                 null,
@@ -65,6 +86,14 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
+    /**
+     * Label
+     */
+    label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /**
+     * True si la colonne est sticky
+     */
+    sticky: PropTypes.bool,
     /**
      * Useful to extend the theme applied to components.
      * Used theme props positive.normal, middle.normal, neutral.light
@@ -79,10 +108,6 @@ CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
      * AUTH_1 = 4; // ask for 3DS
      * AUTH_2 = 5; // force 3DS
      */
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /**
-     * Label
-     */
-    label: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);

package/es/HiTable/HeaderCell.js

@@ -130,6 +130,7 @@ class HeaderCell extends React.PureComponent {
             classes,
             type,
             title,
+            smallTitle,
             selectable,
             selected,
             onSelect,
@@ -236,7 +237,7 @@ class HeaderCell extends React.PureComponent {
                             {
                                 className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                             },
-                            title
+                            view !== 's' ? title : smallTitle ? smallTitle : title
                         ),
                         align !== 'right' && _icons
                     ) : React.createElement(
@@ -253,7 +254,7 @@ class HeaderCell extends React.PureComponent {
                         React.createElement(
                             'span',
                             { className: classes.labelContainer, style: { width: '100%' } },
-                            title
+                            view !== 's' ? title : smallTitle ? smallTitle : title
                         )
                     )
                 ),

package/es/utils/hiHelpers.js

@@ -16,8 +16,9 @@ export function camelize(string) {
  * @param number
  * @param size
  * @param locale
+ * @param precision
  */
-export function formatNumber(number, size = 'l', locale = 'en-EN') {
+export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
     // Round number
     switch (size) {
         case 'l':
@@ -33,8 +34,8 @@ export function formatNumber(number, size = 'l', locale = 'en-EN') {
 
     // To locale
     const options = {
-        minimumFractionDigits: size === 'l' ? 2 : 0,
-        maximumFractionDigits: size === 'l' ? 2 : 0,
+        minimumFractionDigits: typeof precision !== 'undefined' ? precision : size === 'l' ? 2 : 0,
+        maximumFractionDigits: typeof precision !== 'undefined' ? precision : size === 'l' ? 2 : 0,
         useGrouping: true
     };
 

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.13
+/** @license Material-UI v1.0.0-beta.15
  *
  * 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.13
+/** @license Material-UI v1.0.0-beta.15
  *
  * 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.13",
+  "version": "1.0.0-beta.15",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {
@@ -15,51 +15,51 @@
   "homepage": "http://material-ui.com/",
   "peerDependencies": {
     "react": "16.2.0",
-    "react-dom": "^15.3.0 || ^16.0.0"
+    "react-dom": "15.3.0 || 16.0.0"
   },
   "dependencies": {
-    "@types/jss": "^9.3.0",
-    "@types/react-transition-group": "^2.0.6",
-    "babel-runtime": "^6.26.0",
-    "brcast": "^3.0.1",
-    "classnames": "^2.2.5",
-    "deepmerge": "^2.0.1",
-    "dom-helpers": "^3.2.1",
-    "hoist-non-react-statics": "^2.5.0",
-    "jss": "^9.3.3",
-    "jss-camel-case": "^6.0.0",
-    "jss-default-unit": "^8.0.2",
-    "jss-global": "^3.0.0",
-    "jss-nested": "^6.0.1",
-    "jss-props-sort": "^6.0.0",
-    "jss-vendor-prefixer": "^7.0.0",
-    "keycode": "^2.1.9",
-    "lodash": "^4.2.0",
-    "lz-string": "^1.4.4",
+    "@types/jss": "9.3.0",
+    "@types/react-transition-group": "2.0.6",
+    "babel-runtime": "6.26.0",
+    "brcast": "3.0.1",
+    "classnames": "2.2.5",
+    "deepmerge": "2.0.1",
+    "dom-helpers": "3.2.1",
+    "hoist-non-react-statics": "2.5.0",
+    "jss": "9.3.3",
+    "jss-camel-case": "6.0.0",
+    "jss-default-unit": "8.0.2",
+    "jss-global": "3.0.0",
+    "jss-nested": "6.0.1",
+    "jss-props-sort": "6.0.0",
+    "jss-vendor-prefixer": "7.0.0",
+    "keycode": "2.1.9",
+    "lodash": "4.2.0",
+    "lz-string": "1.4.4",
     "material-ui": "1.0.0-beta.36",
-    "mdi-material-ui": "^2.0.0",
-    "moment": "^2.19.1",
-    "moment-timezone": "^0.5.14",
-    "normalize-scroll-left": "^0.1.2",
-    "prop-types": "^15.6.0",
-    "react-addons-update": "^15.6.2",
-    "react-contextmenu": "^2.9.2",
-    "react-custom-scrollbars": "^4.2.1",
-    "react-day-picker": "^7.0.7",
-    "react-event-listener": "^0.5.1",
-    "react-jss": "^8.1.0",
-    "react-lifecycles-compat": "^1.0.2",
-    "react-pdf": "^3.0.4",
-    "react-popper": "^0.8.0",
-    "react-proptype-conditional-require": "^1.0.4",
-    "react-scrollbar-size": "^2.0.2",
-    "react-sortable-hoc": "^0.6.8",
-    "react-spinners": "^0.2.5",
-    "react-transition-group": "^2.2.1",
-    "recompose": "^0.26.0",
-    "scroll": "^2.0.3",
-    "validator": "^9.4.0",
-    "warning": "^3.0.0"
+    "mdi-material-ui": "2.0.0",
+    "moment": "2.19.1",
+    "moment-timezone": "0.5.14",
+    "normalize-scroll-left": "0.1.2",
+    "prop-types": "15.6.0",
+    "react-addons-update": "15.6.2",
+    "react-contextmenu": "2.9.2",
+    "react-custom-scrollbars": "4.2.1",
+    "react-day-picker": "7.1.9",
+    "react-event-listener": "0.5.1",
+    "react-jss": "8.1.0",
+    "react-lifecycles-compat": "1.0.2",
+    "react-pdf": "3.0.4",
+    "react-popper": "0.8.0",
+    "react-proptype-conditional-require": "1.0.4",
+    "react-scrollbar-size": "2.0.2",
+    "react-sortable-hoc": "0.6.8",
+    "react-spinners": "0.2.5",
+    "react-transition-group": "2.2.1",
+    "recompose": "0.26.0",
+    "scroll": "2.0.3",
+    "validator": "9.4.0",
+    "warning": ".0.0"
   },
   "resolutions": {
     "@types/react": "16.0.38"