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

package/HiDatePicker/HiDateRangeSelector.js

@@ -191,11 +191,11 @@ var HiDateRangeSelector = function (_React$Component) {
                     if (selectedOption) {
                         _this.props.onChange('from', selectedOption.from.toDate());
                         _this.props.onChange('to', selectedOption.to.toDate());
-                        if (_this.props.returnSelectValue === true) {
-                            _this.props.onChange('period', value);
-                        }
                     }
                 }
+                if (_this.props.returnSelectValue === true) {
+                    _this.props.onChange('period', value);
+                }
             };
         };
 
@@ -252,7 +252,8 @@ var HiDateRangeSelector = function (_React$Component) {
                 translations = _props.translations,
                 classes = _props.classes,
                 selectProps = _props.selectProps,
-                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps']);
+                staticPosition = _props.staticPosition,
+                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
             var selectedPreset = this.state.selectedPreset;
 
 
@@ -284,7 +285,8 @@ var HiDateRangeSelector = function (_React$Component) {
                         translations: translations,
                         value: selectedPreset,
                         containerWidth: this.state.containerWidth,
-                        classes: { root: classes.dateSelect }
+                        classes: { root: classes.dateSelect },
+                        staticPosition: staticPosition
                     }, selectProps))
                 ),
                 _react2.default.createElement(
@@ -299,7 +301,8 @@ var HiDateRangeSelector = function (_React$Component) {
                         onChange: onChange,
                         onReset: this.handleReset,
                         disabled: disabled || selectedPreset !== 'custom',
-                        translations: translations
+                        translations: translations,
+                        staticPosition: staticPosition
                     }, props))
                 )
             );
@@ -313,6 +316,7 @@ HiDateRangeSelector.defaultProps = {
     defaultPreset: 'cd',
     enableTime: false,
     returnSelectValue: false,
+    staticPosition: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
@@ -414,6 +418,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * Props passées au HiSelectField
      */
     selectProps: _propTypes2.default.object,
+    /**
+     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+     */
+    staticPosition: _propTypes2.default.bool,
     /**
      * Date de fin sélectionnée
      */

package/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -98,9 +98,11 @@ var CustomOverlayLayout = function CustomOverlayLayout(_ref) {
 
     var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
 
+    var paperProps = (0, _extends3.default)({}, props);
+
     return _react2.default.createElement(
         _Paper2.default,
-        { className: paperClass },
+        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
         _react2.default.createElement(
             'div',
             { className: classes.overlay },

package/HiDatePicker/Overlays/Overlay.js

@@ -5,10 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -34,10 +42,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles() {
     return {
         paper: {
-            position: 'absolute',
             width: '100%',
             zIndex: 10
         },
+        absolute: {
+            position: 'absolute'
+        },
+        relative: {
+            position: 'relative'
+        },
         left: {
             width: '200%',
             left: 0
@@ -57,13 +70,18 @@ var Overlay = function Overlay(_ref) {
 
     var classes = _ref.classes,
         children = _ref.children,
-        side = _ref.side;
+        side = _ref.side,
+        staticPosition = _ref.staticPosition,
+        props = (0, _objectWithoutProperties3.default)(_ref, ['classes', 'children', 'side', 'staticPosition']);
+
+
+    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty3.default)(_classNames, classes.relative, staticPosition === true), _classNames));
 
-    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
+    var paperProps = (0, _extends3.default)({}, props);
 
     return _react2.default.createElement(
         _Paper2.default,
-        { className: paperClass },
+        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
         _react2.default.createElement(
             'div',
             { className: classes.overlay },

package/HiDatePicker/stylesheet.js

@@ -31,6 +31,13 @@ exports.default = function (theme) {
             width: 'calc(50% - 4px)',
             marginLeft: 4
         },
+        absolute: {
+            position: 'absolute'
+        },
+        dayPickerMargin: {
+            top: -337,
+            width: 'calc(100% - 4px)'
+        },
         // The container element
         container: {
             width: '100%',

package/HiForm/HiInput.js

@@ -238,20 +238,29 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'handleFocus',
         value: function handleFocus(event) {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
-            }
-            if (this.props.onFocus) {
-                this.props.onFocus(event);
+            if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
+                event.stopPropagation();
+            } else {
+                if (!this.state.focused) {
+                    this.setState({ focused: true });
+                }
+                if (this.props.onFocus) {
+                    this.props.onFocus(event);
+                }
+                this.inputElement.focus();
             }
         }
     }, {
         key: 'handleDivClick',
-        value: function handleDivClick() {
-            if (!this.state.focused) {
-                this.setState({ focused: true });
+        value: function handleDivClick(event) {
+            if (this.endAdornmentNode && this.endAdornmentNode.contains(event.target)) {
+                event.stopPropagation();
+            } else {
+                if (!this.state.focused) {
+                    this.setState({ focused: true });
+                }
+                this.inputElement.focus();
             }
-            this.inputElement.focus();
         }
     }, {
         key: 'handleMouseEnter',
@@ -278,7 +287,9 @@ var HiInput = function (_React$PureComponent) {
     }, {
         key: 'render',
         value: function render() {
-            var _classNames, _classNames4;
+            var _classNames,
+                _this2 = this,
+                _classNames4;
 
             var _props = this.props,
                 value = _props.value,
@@ -369,7 +380,9 @@ var HiInput = function (_React$PureComponent) {
                     startAdornment: leftIcon,
                     endAdornment: _react2.default.createElement(
                         'div',
-                        { className: classes.endAdornment },
+                        { className: classes.endAdornment, ref: function ref(el) {
+                                return _this2.endAdornmentNode = el;
+                            } },
                         eraseIcon,
                         endAdornment
                     ),

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/HiSelect/HiSelect.js

@@ -485,7 +485,7 @@ HiSelect.defaultProps = {
 var _initialiseProps = function _initialiseProps() {
     var _this3 = this;
 
-    this.handleClick = function (event) {
+    this.handleClick = function () {
         if (_this3.state.open) {
             _this3.handleClose();
         } else {

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