@hipay/hipay-material-ui 2.3.0-rc.5 → 2.3.0-rc.PSYCHE-2530

package/es/HiForm/HiSlider.js

@@ -1,302 +1,281 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread";
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import HiFormControl from './HiFormControl';
-import PropTypes from 'prop-types';
-import HiIcon from '../HiIcon/HiIcon';
-import classNames from 'classnames';
-export const styles = theme => ({
-  barContainer: {
-    width: '100%',
-    position: 'relative',
-    margin: '0 7px'
-  },
-  barHidden: {
-    width: '100%',
-    opacity: 0,
-    position: 'absolute',
-    top: '7px',
-    zIndex: '2',
-    cursor: 'pointer'
-  },
-  mainContainer: _objectSpread({}, 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.primary.main,
-    position: 'absolute',
-    zIndex: '2'
-  },
-  arrow: {
-    position: 'absolute',
-    zIndex: '1',
-    transform: 'rotate(-90deg) translate(0%,-50%)',
-    transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-    transitionProperty: 'transform color',
-    fontSize: 20,
-    cursor: 'pointer'
-  },
-  leftLabel: {
-    color: theme.palette.primary.main,
-    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'
-  },
-  trackAfter: {
-    backgroundColor: 'gray',
-    opacity: 0.24
-  },
-  focused: {
-    fontSize: 24,
-    color: theme.palette.primary.dark
-  }
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-/**
- * HiSlider component
- */
+exports.default = exports.styles = void 0;
 
-class HiSlider extends React.Component {
-  constructor(props) {
-    super(props);
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
 
-    this.handleChange = event => {
-      this.props.onChange(parseFloat(event.target.value));
-      this.textValueWidth = this.textValue.offsetWidth;
-    };
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
 
-    this.handleFocus = isFocused => () => {
-      this.setState({
-        focused: isFocused
-      });
-    };
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
 
-    this.state = {
-      focused: false
-    };
-  }
-  /**
-   * Measures several components once they are mounted.
-   * If the value and a label (left or right) are hovered,
-   * we hide this label.
-   */
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
 
-  componentDidMount() {
-    this.leftLabelWidth = this.leftLabel.offsetWidth;
-    this.rightLabelWidth = this.rightLabel.offsetWidth;
-    this.textValueWidth = this.textValue.offsetWidth;
-    this.barContainerWidth = this.barContainer.offsetWidth;
-    const {
-      hoveringLeft,
-      hoveringRight
-    } = this.getHovering();
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
 
-    if (hoveringLeft || hoveringRight) {
-      this.forceUpdate();
-    }
-  }
-  /**
-   * Calculates if the labels are hovered.
-   */
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
 
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
 
-  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
-    };
-  }
+var _react = _interopRequireDefault(require("react"));
 
-  render() {
-    const {
-      classes,
-      className,
-      min,
-      max,
-      leftLabel,
-      rightLabel,
-      step,
-      suffix,
-      id,
-      label,
-      value,
-      theme
-    } = 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.primary.dark : theme.palette.primary.main;
-    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(HiIcon, {
-        className: classNames(classes.arrow, {
-          [classes.focused]: focused
-        }),
-        icon: 'play_arrow',
-        style: {
-          left: `${percentage}%`,
-          color: barColor
-        }
-      }))), React.createElement("div", null, max, suffix)))
-    );
-  }
+var _styles = require("@material-ui/core/styles");
 
-}
+var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
 
-HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
+var _HiIcon = _interopRequireDefault(require("../HiIcon/HiIcon"));
 
-  /**
-   * Classes CSS appliquées.
-   */
-  className: PropTypes.string,
+var _classnames = _interopRequireDefault(require("classnames"));
 
-  /**
-   * Id de l'élément input
-   */
-  id: PropTypes.string.isRequired,
+var styles = function styles(theme) {
+  return {
+    barContainer: {
+      width: '100%',
+      position: 'relative',
+      margin: '0 7px'
+    },
+    barHidden: {
+      width: '100%',
+      opacity: 0,
+      position: 'absolute',
+      top: '7px',
+      zIndex: '2',
+      cursor: 'pointer'
+    },
+    mainContainer: (0, _objectSpread2.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.primary.main,
+      position: 'absolute',
+      zIndex: '2'
+    },
+    arrow: {
+      position: 'absolute',
+      zIndex: '1',
+      transform: 'rotate(-90deg) translate(0%,-50%)',
+      transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+      transitionProperty: 'transform color',
+      fontSize: 20,
+      cursor: 'pointer'
+    },
+    leftLabel: {
+      color: theme.palette.primary.main,
+      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'
+    },
+    trackAfter: {
+      backgroundColor: 'gray',
+      opacity: 0.24
+    },
+    focused: {
+      fontSize: 24,
+      color: theme.palette.primary.dark
+    }
+  };
+};
+/**
+ * HiSlider component
+ */
 
-  /**
-   * Label du champ
-   */
-  label: PropTypes.string,
 
-  /**
-   * The label to show on the left.
-   */
-  leftLabel: PropTypes.string,
+exports.styles = styles;
 
-  /**
-   * The Maximum value for the slider.
-   */
-  max: PropTypes.number.isRequired,
+var HiSlider =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiSlider, _React$Component);
 
-  /**
-   * The Minimum value for the slider.
-   */
-  min: PropTypes.number.isRequired,
+  function HiSlider(props) {
+    var _this;
 
-  /**
-   * Fonction de callback appelée lorsqu'on change la valeur du slider.
-   */
-  onChange: PropTypes.func,
+    (0, _classCallCheck2.default)(this, HiSlider);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSlider).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event) {
+      _this.props.onChange(parseFloat(event.target.value));
 
+      _this.textValueWidth = _this.textValue.offsetWidth;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocus", function (isFocused) {
+      return function () {
+        _this.setState({
+          focused: isFocused
+        });
+      };
+    });
+    _this.state = {
+      focused: false
+    };
+    return _this;
+  }
   /**
-   * The label to show on the right
+   * Measures several components once they are mounted.
+   * If the value and a label (left or right) are hovered,
+   * we hide this label.
    */
-  rightLabel: PropTypes.string,
 
-  /**
-   * The step between two selectable values.
-   */
-  step: PropTypes.number,
 
-  /**
-   * The suffix to show after each number.
-   */
-  suffix: PropTypes.string,
+  (0, _createClass2.default)(HiSlider, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.leftLabelWidth = this.leftLabel.offsetWidth;
+      this.rightLabelWidth = this.rightLabel.offsetWidth;
+      this.textValueWidth = this.textValue.offsetWidth;
+      this.barContainerWidth = this.barContainer.offsetWidth;
 
-  /**
-   * @ignore
-   */
-  theme: PropTypes.object,
+      var _this$getHovering = this.getHovering(),
+          hoveringLeft = _this$getHovering.hoveringLeft,
+          hoveringRight = _this$getHovering.hoveringRight;
 
-  /**
-   * The
-   * value of the input.
-   */
-  value: PropTypes.number
-} : {};
-export default withStyles(styles, {
+      if (hoveringLeft || hoveringRight) {
+        this.forceUpdate();
+      }
+    }
+    /**
+     * Calculates if the labels are hovered.
+     */
+
+  }, {
+    key: "getHovering",
+    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 _this$props = this.props,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          min = _this$props.min,
+          max = _this$props.max,
+          leftLabel = _this$props.leftLabel,
+          rightLabel = _this$props.rightLabel,
+          step = _this$props.step,
+          suffix = _this$props.suffix,
+          id = _this$props.id,
+          label = _this$props.label,
+          value = _this$props.value,
+          theme = _this$props.theme;
+      var focused = this.state.focused;
+      var ratio = (value - min) / (max - min);
+      var percentage = ratio * 100;
+
+      var _this$getHovering2 = this.getHovering(),
+          hoveringLeft = _this$getHovering2.hoveringLeft,
+          hoveringRight = _this$getHovering2.hoveringRight;
+
+      var barColor = focused ? theme.palette.primary.dark : theme.palette.primary.main;
+      return (// HiFormControl pour l'affichage du label
+        _react.default.createElement(_HiFormControl.default, {
+          id: id,
+          label: label,
+          className: className,
+          onFocus: this.handleFocus(true),
+          onBlur: this.handleFocus(false)
+        }, _react.default.createElement("div", {
+          className: classes.mainContainer
+        }, _react.default.createElement("div", null, min, suffix), _react.default.createElement("div", {
+          className: classes.barContainer,
+          ref: function ref(div) {
+            _this2.barContainer = div;
+          }
+        }, _react.default.createElement("div", {
+          className: classes.topContainer
+        }, !hoveringLeft && _react.default.createElement("div", {
+          className: classes.leftLabel,
+          ref: function ref(div) {
+            _this2.leftLabel = div;
+          }
+        }, leftLabel), _react.default.createElement("div", {
+          className: classes.textValue,
+          style: {
+            left: "".concat(percentage, "%"),
+            transform: "translate(-".concat(percentage, "%)")
+          },
+          ref: function ref(div) {
+            _this2.textValue = div;
+          }
+        }, value, suffix), !hoveringRight && _react.default.createElement("div", {
+          className: classes.rightLabel,
+          ref: function ref(div) {
+            _this2.rightLabel = div;
+          }
+        }, rightLabel)), _react.default.createElement("div", {
+          className: classes.barValue,
+          style: {
+            background: "linear-gradient(to right, ".concat(barColor, ", ").concat(barColor, " ").concat(percentage, "%, #E0E0E0 ").concat(percentage, "%, #E0E0E0)")
+          }
+        }), _react.default.createElement("input", {
+          type: 'range',
+          min: min,
+          max: max,
+          value: value,
+          onChange: this.handleChange,
+          className: classes.barHidden,
+          step: step
+        }), _react.default.createElement("div", {
+          className: classes.bottomContainer
+        }, _react.default.createElement(_HiIcon.default, {
+          className: (0, _classnames.default)(classes.arrow, (0, _defineProperty2.default)({}, classes.focused, focused)),
+          icon: 'play_arrow',
+          style: {
+            left: "".concat(percentage, "%"),
+            color: barColor
+          }
+        }))), _react.default.createElement("div", null, max, suffix)))
+      );
+    }
+  }]);
+  return HiSlider;
+}(_react.default.Component);
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HiSlider',
   withTheme: true
-})(HiSlider);
+})(HiSlider);
+
+exports.default = _default;