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

package/HiForm/HiSlider.js

@@ -0,0 +1,399 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+var _HiFormControl = require('../HiForm/HiFormControl');
+
+var _HiFormControl2 = _interopRequireDefault(_HiFormControl);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        barContainer: {
+            width: '100%',
+            position: 'relative',
+            margin: '0 7px'
+        },
+        barHidden: {
+            width: '100%',
+            opacity: 0,
+            position: 'absolute',
+            top: '7px',
+            zIndex: '2'
+        },
+        mainContainer: (0, _extends3.default)({}, 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
+ */
+
+var HiSlider = function (_React$Component) {
+    (0, _inherits3.default)(HiSlider, _React$Component);
+
+    function HiSlider(props) {
+        (0, _classCallCheck3.default)(this, HiSlider);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiSlider.__proto__ || (0, _getPrototypeOf2.default)(HiSlider)).call(this, props));
+
+        _this.leftLabelWidth = 0;
+        _this.rightLabelWidth = 0;
+        _this.textValueWidth = 0;
+        _this.barContainerWidth = 0;
+
+        _this.handleFocus = function (isFocused) {
+            return function () {
+                _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);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiSlider, [{
+        key: 'componentDidMount',
+
+
+        /**
+         * Measures several components once they are mounted.
+         * If the value and a label (left or right) are hovered,
+         * we hide this label.
+         */
+        value: function componentDidMount() {
+            this.leftLabelWidth = this.leftLabel.offsetWidth;
+            this.rightLabelWidth = this.rightLabel.offsetWidth;
+            this.textValueWidth = this.textValue.offsetWidth;
+            this.barContainerWidth = this.barContainer.offsetWidth;
+
+            var _getHovering = this.getHovering(),
+                hoveringLeft = _getHovering.hoveringLeft,
+                hoveringRight = _getHovering.hoveringRight;
+
+            if (hoveringLeft || hoveringRight) {
+                this.forceUpdate();
+            }
+        }
+    }, {
+        key: 'handleChange',
+        value: function handleChange(event) {
+            this.props.onChange(parseFloat(event.target.value));
+            this.textValueWidth = this.textValue.offsetWidth;
+        }
+    }, {
+        key: 'getHovering',
+
+
+        /**
+         * Calculates if the labels are hovered.
+         */
+        value: function getHovering() {
+            var ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+            var hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
+            var hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
+            return { hoveringLeft: hoveringLeft, hoveringRight: hoveringRight };
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
+                min = _props.min,
+                max = _props.max,
+                leftLabel = _props.leftLabel,
+                rightLabel = _props.rightLabel,
+                step = _props.step,
+                suffix = _props.suffix,
+                id = _props.id,
+                label = _props.label,
+                theme = _props.theme,
+                value = _props.value;
+            var focused = this.state.focused;
+
+            var ratio = (value - min) / (max - min);
+            var percentage = ratio * 100;
+
+            var _getHovering2 = this.getHovering(),
+                hoveringLeft = _getHovering2.hoveringLeft,
+                hoveringRight = _getHovering2.hoveringRight;
+
+            var barColor = focused ? theme.palette.business.primary.dark : theme.palette.business.primary.normal;
+            return (
+                // HiFormControl pour l'affichage du label
+                _react2.default.createElement(
+                    _HiFormControl2.default,
+                    {
+                        id: id,
+                        label: label,
+                        className: className,
+                        onFocus: this.handleFocus(true),
+                        onBlur: this.handleFocus(false)
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.mainContainer },
+                        _react2.default.createElement(
+                            'div',
+                            null,
+                            min,
+                            suffix
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            { className: classes.barContainer, ref: function ref(div) {
+                                    return _this2.barContainer = div;
+                                } },
+                            _react2.default.createElement(
+                                'div',
+                                { className: classes.topContainer },
+                                !hoveringLeft && _react2.default.createElement(
+                                    'div',
+                                    {
+                                        className: classes.leftLabel,
+                                        ref: function ref(div) {
+                                            return _this2.leftLabel = div;
+                                        }
+                                    },
+                                    leftLabel
+                                ),
+                                _react2.default.createElement(
+                                    'div',
+                                    {
+                                        className: classes.textValue,
+                                        style: {
+                                            left: percentage + '%',
+                                            transform: 'translate(-' + percentage + '%)'
+                                        },
+                                        ref: function ref(div) {
+                                            return _this2.textValue = div;
+                                        }
+                                    },
+                                    value,
+                                    suffix
+                                ),
+                                !hoveringRight && _react2.default.createElement(
+                                    'div',
+                                    {
+                                        className: classes.rightLabel,
+                                        ref: function ref(div) {
+                                            return _this2.rightLabel = div;
+                                        }
+                                    },
+                                    rightLabel
+                                )
+                            ),
+                            _react2.default.createElement('div', {
+                                className: classes.barValue,
+                                style: {
+                                    background: 'linear-gradient(to right, ' + barColor + ', ' + barColor + ' ' + percentage + '%, #E0E0E0 ' + percentage + '%, #E0E0E0)'
+                                }
+                            }),
+                            _react2.default.createElement('input', {
+                                type: 'range',
+                                min: min,
+                                max: max,
+                                value: value,
+                                onChange: this.handleChange,
+                                className: classes.barHidden,
+                                step: step
+                            }),
+                            _react2.default.createElement(
+                                'div',
+                                { className: classes.bottomContainer },
+                                _react2.default.createElement(_HiIconBuilder2.default, {
+                                    className: (0, _classnames2.default)(classes.arrow, (0, _defineProperty3.default)({}, classes.focused, focused)),
+                                    icon: 'menu_up',
+                                    size: 24,
+                                    style: { left: percentage + '%' }
+                                })
+                            )
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            null,
+                            max,
+                            suffix
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return HiSlider;
+}(_react2.default.Component);
+
+HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Classes CSS appliquées.
+     */
+    className: _propTypes2.default.string,
+    /**
+     * Id de l'élément input
+     */
+    id: _propTypes2.default.string.isRequired,
+    /**
+     * Label du champ
+     */
+    label: _propTypes2.default.string,
+    /**
+     * The label to show on the left.
+     */
+    leftLabel: _propTypes2.default.string,
+    /**
+     * The Maximum value for the slider.
+     */
+    max: _propTypes2.default.number.isRequired,
+    /**
+     * The Minimum value for the slider.
+     */
+    min: _propTypes2.default.number.isRequired,
+    /**
+     * Fonction de callback appelée lorsqu'on change la valeur du slider.
+     */
+    onChange: _propTypes2.default.func,
+    /**
+     * The label to show on the right
+     */
+    rightLabel: _propTypes2.default.string,
+    /**
+     * The step between two selectable values.
+     */
+    step: _propTypes2.default.number,
+    /**
+     * The suffix to show after each number.
+     */
+    suffix: _propTypes2.default.string,
+    /**
+     * @ignore
+     */
+    theme: _propTypes2.default.object,
+    /**
+     * The
+     * value of the input.
+     */
+    value: _propTypes2.default.number
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSlider', withTheme: true })(HiSlider);

package/HiForm/index.js

@@ -67,6 +67,15 @@ Object.defineProperty(exports, 'HiSearchField', {
   }
 });
 
+var _HiSlider = require('./HiSlider');
+
+Object.defineProperty(exports, 'HiSlider', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiSlider).default;
+  }
+});
+
 var _HiAddressField = require('./HiAddressField');
 
 Object.defineProperty(exports, 'HiAddressField', {

package/HiTable/BodyCellBuilder.js

@@ -206,6 +206,7 @@ var BodyCellBuilder = function (_React$PureComponent) {
                         cellElement = _react2.default.createElement(_BodyCells.CellIcon, {
                             value: data.label ? data.label : data.value,
                             icon: data.icon,
+                            color: data.color,
                             view: view,
                             sticky: sticky
                         });
@@ -215,6 +216,7 @@ var BodyCellBuilder = function (_React$PureComponent) {
                         cellElement = _react2.default.createElement(_BodyCells.CellImage, {
                             value: data.label ? data.label : data.value,
                             path: data.img,
+                            size: this.props.size,
                             view: view,
                             sticky: sticky
                         });
@@ -224,6 +226,7 @@ var BodyCellBuilder = function (_React$PureComponent) {
                         cellElement = _react2.default.createElement(_BodyCells.CellNumeric, {
                             value: data.value,
                             currency: data.currency,
+                            precision: data.precision,
                             locale: numberLocale,
                             view: view,
                             sticky: sticky

package/HiTable/BodyCells/CellIcon.js

@@ -53,20 +53,21 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        icon: {
-            float: 'left'
-        },
-        label: {
-            margin: 5
-        },
-        wrapper: {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        }
-    };
+var styles = exports.styles = {
+    icon: {
+        float: 'left'
+    },
+    label: {
+        margin: 5
+    },
+    wrapper: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
+    }
 };
 
 /**
@@ -89,14 +90,15 @@ var CellIcon = function (_React$PureComponent) {
                 classes = _props.classes,
                 icon = _props.icon,
                 value = _props.value,
-                view = _props.view;
+                view = _props.view,
+                color = _props.color;
 
 
-            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 18 }) : '';
+            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
 
             var tooltipContent = _react2.default.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 iconElement,
                 _react2.default.createElement(
                     'span',
@@ -126,7 +128,8 @@ var CellIcon = function (_React$PureComponent) {
 
 CellIcon.defaultProps = {
     icon: '',
-    view: 'l'
+    view: 'l',
+    color: '#000'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -134,7 +137,11 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: _propTypes2.default.object,
     /**
-     * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     * Couleur de l'icône
+     */
+    color: _propTypes2.default.string.isRequired,
+    /**
+     * Icon name [from material-design-icons](https://materialdesignicons.com/)
      * used by HiIconBuilder
      */
     icon: _propTypes2.default.string,

package/HiTable/BodyCells/CellImage.js

@@ -52,12 +52,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles(theme) {
     return {
         img: {
-            width: 24,
             height: 'auto',
             float: 'left'
         },
         smallImg: {
-            width: 24,
             height: 'auto'
         },
         label: {
@@ -66,20 +64,18 @@ var styles = exports.styles = function 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'
@@ -112,13 +108,14 @@ var CellImage = function (_React$PureComponent) {
                 classes = _props.classes,
                 path = _props.path,
                 value = _props.value,
-                view = _props.view;
+                view = _props.view,
+                size = _props.size;
 
 
             var tooltipContent = _react2.default.createElement(
                 'div',
                 { className: classes.tooltipContainer },
-                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
+                _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg, width: size }),
                 _react2.default.createElement(
                     'span',
                     { className: classes.tooltipLabel },
@@ -132,13 +129,13 @@ var CellImage = function (_React$PureComponent) {
                     innerCellElement = _react2.default.createElement(
                         'div',
                         { className: classes.center },
-                        _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg })
+                        _react2.default.createElement('img', { src: path, alt: value, className: classes.smallImg, width: size })
                     );
                 } else {
                     innerCellElement = _react2.default.createElement(
                         'div',
                         { className: classes.wrapper },
-                        _react2.default.createElement('img', { src: path, alt: value, className: classes.img }),
+                        _react2.default.createElement('img', { src: path, alt: value, className: classes.img, width: size }),
                         !!value && _react2.default.createElement(
                             'span',
                             { className: classes.label },
@@ -173,6 +170,9 @@ var CellImage = function (_React$PureComponent) {
     return CellImage;
 }(_react2.default.PureComponent);
 
+CellImage.defaultProps = {
+    size: 24
+};
 CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Useful to extend the style applied to components.
@@ -182,6 +182,10 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
      * Image path
      */
     path: _propTypes2.default.string,
+    /**
+     * Image path
+     */
+    size: _propTypes2.default.number.isRequired,
     /**
      * Value
      */

package/HiTable/BodyCells/CellNumeric.js

@@ -79,7 +79,8 @@ var CellNumeric = function (_React$PureComponent) {
                 value = _props.value,
                 locale = _props.locale,
                 currency = _props.currency,
-                view = _props.view;
+                view = _props.view,
+                precision = _props.precision;
 
 
             var displayedValue = '';
@@ -93,7 +94,7 @@ var CellNumeric = function (_React$PureComponent) {
                     titleValue = (0, _hiHelpers.formatCurrencyAmount)(value, cst.VIEWS.LARGE, locale, currency);
                 }
             } else {
-                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale);
+                displayedValue = (0, _hiHelpers.formatNumber)(value, view, locale, precision);
             }
 
             return _react2.default.createElement(
@@ -127,6 +128,10 @@ CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
      * Code de la devise (ISO 4217)
      */
     currency: _propTypes2.default.string,
+    /**
+     * Nombre de chiffres après la virgule
+     */
+    precision: _propTypes2.default.number,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellSentinel.js

@@ -51,16 +51,17 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        smartDecision: {
-            display: 'inline-block',
-            minWidth: 18
-        },
-        label: {
-            marginLeft: 2
-        }
-    };
+var styles = exports.styles = {
+    smartDecision: {
+        display: 'inline-block',
+        minWidth: 18
+    },
+    label: {
+        marginLeft: 2
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
+    }
 };
 
 /**
@@ -135,17 +136,17 @@ var CellSentinel = function (_React$PureComponent) {
                 null,
                 _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     scoreLabel
                 ),
                 _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     fraudResult
                 ),
                 !!smartDecision && automaticFraudReviewResult && _react2.default.createElement(
                     'div',
-                    null,
+                    { className: classes.nowrap },
                     'SD: ',
                     automaticFraudReviewResult
                 )