@hipay/hipay-material-ui 1.0.0-beta.14 → 1.0.0-beta.16

package/es/HiForm/HiSlider.js

@@ -0,0 +1,309 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import HiIconBuilder from '../utils/HiIconBuilder';
+import HiFormControl from '../HiForm/HiFormControl';
+
+export const styles = theme => ({
+    barContainer: {
+        width: '100%',
+        position: 'relative',
+        margin: '0 7px'
+    },
+    barHidden: {
+        width: '100%',
+        opacity: 0,
+        position: 'absolute',
+        top: '7px',
+        zIndex: '2'
+    },
+    mainContainer: _extends({}, theme.typography.body1, {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center'
+    }),
+    topContainer: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        height: '18px'
+    },
+    bottomContainer: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        height: '18px'
+    },
+    barValue: {
+        display: 'flex',
+        width: '100%',
+        height: '4px',
+        borderRadius: '2px',
+        backgroundColor: theme.palette.business.primary.normal,
+        position: 'absolute',
+        zIndex: '2'
+    },
+    arrow: {
+        position: 'absolute',
+        zIndex: '1',
+        color: theme.palette.business.primary.normal,
+        transform: 'translate(-50%,-25%)',
+        transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionProperty: 'transform color'
+    },
+    focused: {
+        transform: 'scale(1.7) translate(-29%, -11%)',
+        color: theme.palette.business.primary.dark
+    },
+    leftLabel: {
+        color: theme.palette.business.primary.normal,
+        left: '0px',
+        position: 'absolute',
+        fontSize: '11px',
+        alignSelf: 'flex-end'
+    },
+    rightLabel: {
+        color: '#737373',
+        right: '0px',
+        position: 'absolute',
+        fontSize: '11px',
+        alignSelf: 'flex-end'
+    },
+    textValue: {
+        position: 'absolute',
+        zIndex: '2'
+    }
+});
+
+/**
+ * HiSlider component
+ */
+class HiSlider extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.leftLabelWidth = 0;
+        this.rightLabelWidth = 0;
+        this.textValueWidth = 0;
+        this.barContainerWidth = 0;
+
+        this.handleFocus = isFocused => () => {
+            this.setState({ focused: isFocused });
+        };
+
+        this.state = {
+            focused: false
+        };
+
+        this.leftLabel;
+        this.rightLabel;
+        this.textValue;
+        this.barContainer;
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+    }
+
+    /**
+     * Measures several components once they are mounted.
+     * If the value and a label (left or right) are hovered,
+     * we hide this label.
+     */
+    componentDidMount() {
+        this.leftLabelWidth = this.leftLabel.offsetWidth;
+        this.rightLabelWidth = this.rightLabel.offsetWidth;
+        this.textValueWidth = this.textValue.offsetWidth;
+        this.barContainerWidth = this.barContainer.offsetWidth;
+        let { hoveringLeft, hoveringRight } = this.getHovering();
+        if (hoveringLeft || hoveringRight) {
+            this.forceUpdate();
+        }
+    }
+
+    handleChange(event) {
+        this.props.onChange(parseFloat(event.target.value));
+        this.textValueWidth = this.textValue.offsetWidth;
+    }
+
+    /**
+     * Calculates if the labels are hovered.
+     */
+    getHovering() {
+        const ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+        const hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
+        const hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
+        return { hoveringLeft, hoveringRight };
+    }
+
+    render() {
+        const {
+            classes,
+            className,
+            min,
+            max,
+            leftLabel,
+            rightLabel,
+            step,
+            suffix,
+            id,
+            label,
+            theme,
+            value
+        } = this.props;
+        const { focused } = this.state;
+        const ratio = (value - min) / (max - min);
+        const percentage = ratio * 100;
+        const { hoveringLeft, hoveringRight } = this.getHovering();
+        const barColor = focused ? theme.palette.business.primary.dark : theme.palette.business.primary.normal;
+        return (
+            // HiFormControl pour l'affichage du label
+            React.createElement(
+                HiFormControl,
+                {
+                    id: id,
+                    label: label,
+                    className: className,
+                    onFocus: this.handleFocus(true),
+                    onBlur: this.handleFocus(false)
+                },
+                React.createElement(
+                    'div',
+                    { className: classes.mainContainer },
+                    React.createElement(
+                        'div',
+                        null,
+                        min,
+                        suffix
+                    ),
+                    React.createElement(
+                        'div',
+                        { className: classes.barContainer, ref: div => this.barContainer = div },
+                        React.createElement(
+                            'div',
+                            { className: classes.topContainer },
+                            !hoveringLeft && React.createElement(
+                                'div',
+                                {
+                                    className: classes.leftLabel,
+                                    ref: div => this.leftLabel = div
+                                },
+                                leftLabel
+                            ),
+                            React.createElement(
+                                'div',
+                                {
+                                    className: classes.textValue,
+                                    style: {
+                                        left: `${percentage}%`,
+                                        transform: `translate(-${percentage}%)`
+                                    },
+                                    ref: div => this.textValue = div
+                                },
+                                value,
+                                suffix
+                            ),
+                            !hoveringRight && React.createElement(
+                                'div',
+                                {
+                                    className: classes.rightLabel,
+                                    ref: div => this.rightLabel = div
+                                },
+                                rightLabel
+                            )
+                        ),
+                        React.createElement('div', {
+                            className: classes.barValue,
+                            style: {
+                                background: `linear-gradient(to right, ${barColor}, ${barColor} ${percentage}%, #E0E0E0 ${percentage}%, #E0E0E0)`
+                            }
+                        }),
+                        React.createElement('input', {
+                            type: 'range',
+                            min: min,
+                            max: max,
+                            value: value,
+                            onChange: this.handleChange,
+                            className: classes.barHidden,
+                            step: step
+                        }),
+                        React.createElement(
+                            'div',
+                            { className: classes.bottomContainer },
+                            React.createElement(HiIconBuilder, {
+                                className: classNames(classes.arrow, {
+                                    [classes.focused]: focused
+                                }),
+                                icon: 'menu_up',
+                                size: 24,
+                                style: { left: `${percentage}%` }
+                            })
+                        )
+                    ),
+                    React.createElement(
+                        'div',
+                        null,
+                        max,
+                        suffix
+                    )
+                )
+            )
+        );
+    }
+}
+
+HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Classes CSS appliquées.
+     */
+    className: PropTypes.string,
+    /**
+     * Id de l'élément input
+     */
+    id: PropTypes.string.isRequired,
+    /**
+     * Label du champ
+     */
+    label: PropTypes.string,
+    /**
+     * The label to show on the left.
+     */
+    leftLabel: PropTypes.string,
+    /**
+     * The Maximum value for the slider.
+     */
+    max: PropTypes.number.isRequired,
+    /**
+     * The Minimum value for the slider.
+     */
+    min: PropTypes.number.isRequired,
+    /**
+     * Fonction de callback appelée lorsqu'on change la valeur du slider.
+     */
+    onChange: PropTypes.func,
+    /**
+     * The label to show on the right
+     */
+    rightLabel: PropTypes.string,
+    /**
+     * The step between two selectable values.
+     */
+    step: PropTypes.number,
+    /**
+     * The suffix to show after each number.
+     */
+    suffix: PropTypes.string,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object,
+    /**
+     * The
+     * value of the input.
+     */
+    value: PropTypes.number
+} : {};
+export default withStyles(styles, { name: 'HmuiHiSlider', withTheme: true })(HiSlider);

package/es/HiForm/index.js

@@ -5,4 +5,5 @@ export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiTextField } from './HiTextField';
 export { default as HiSearchField } from './HiSearchField';
+export { default as HiSlider } from './HiSlider';
 export { default as HiAddressField } from './HiAddressField';

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);