@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/HiForm/HiAddressField.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiSuggestSelectField = _interopRequireDefault(require("../HiSelect/HiSuggestSelectField"));
+
+// @inheritedComponent HiSuggestSelectField
+// OpenStreeMap API url
+var API_URL = 'https://nominatim.openstreetmap.org/search?q=';
+/**
+ * Champs input adresse pour formulaire
+ */
+
+var HiAddressField =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiAddressField, _React$Component);
+
+  function HiAddressField(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiAddressField);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiAddressField).call(this, props));
+
+    _this.displaySuggestions = function (predictions) {
+      var options = [];
+      var isExact = false;
+      predictions.forEach(function (prediction) {
+        // Si le texte saisi est identique à une des propositions, on estime que la valeur de l'adresse est exacte.
+        isExact = prediction.display_name === _this.state.inputValue ? true : isExact;
+        options.push({
+          id: prediction.place_id,
+          label: prediction.display_name,
+          labelHighlight: prediction.display_name.replace(new RegExp(_this.value, 'gi'), '<strong>$&</strong>'),
+          // Liste des types d'adresse : https://github.com/openstreetmap/Nominatim/blob/80df4d3b560f5b1fd550dcf8cdc09a992b69fee0/settings/partitionedtags.def
+          icon: ['amenity', 'building'].includes(prediction.category) ? 'domain' : 'place',
+          type: 'icon',
+          key: prediction.id
+        });
+      }, (0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+
+      _this.setState({
+        options: options,
+        isExact: isExact
+      });
+    };
+
+    _this.state = {
+      inputValue: null,
+      options: [],
+      isExact: false
+    };
+    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.displaySuggestions = _this.displaySuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiAddressField, [{
+    key: "handleSearch",
+    value: function handleSearch(event) {
+      var _this2 = this;
+
+      if (event.target.value) {
+        this.setState({
+          inputValue: event.target.value
+        });
+        fetch("".concat(API_URL, " + ").concat(this.state.inputValue, " + &format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1")).then(function (result) {
+          return result.json();
+        }).then(function (data) {
+          _this2.displaySuggestions(data, 'OK');
+        });
+      } else {
+        this.setState({
+          options: []
+        });
+      }
+
+      this.props.onSearch(event);
+    }
+  }, {
+    key: "handleReset",
+    value: function handleReset() {
+      this.props.onReset();
+      this.setState({
+        options: [],
+        isExact: false
+      });
+    }
+  }, {
+    key: "handleSelect",
+    value: function handleSelect(event, value) {
+      // Mise à jour de la valeur du champ + la valeur de l'adresse est exacte
+      this.setState({
+        options: [],
+        isExact: true
+      });
+      this.props.onSelect(event, value.label);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          exactOnly = _this$props.exactOnly,
+          onSearch = _this$props.onSearch,
+          onReset = _this$props.onReset,
+          onSelect = _this$props.onSelect,
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["exactOnly", "onSearch", "onReset", "onSelect"]);
+      var _this$state = this.state,
+          options = _this$state.options,
+          isExact = _this$state.isExact; // On met le champ en erreur si une adresse exacte est éxigée
+      // et si l'adresse courante n'est pas complète
+
+      var showError = exactOnly && !isExact;
+      return _react.default.createElement(_HiSuggestSelectField.default, (0, _extends2.default)({
+        error: showError,
+        options: options,
+        onSearch: this.handleSearch,
+        onSelect: this.handleSelect,
+        onReset: this.handleReset,
+        isExact: isExact
+      }, otherProps));
+    }
+  }]);
+  return HiAddressField;
+}(_react.default.Component);
+
+HiAddressField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
+   */
+  exactOnly: _propTypes.default.bool,
+
+  /**
+   *  Callback function called to empty the field.
+   */
+  onReset: _propTypes.default.func,
+
+  /**
+   *  Callback function called when we write in the input.
+   */
+  onSearch: _propTypes.default.func,
+
+  /**
+   *  Callback function called when a suggestion is selected.
+   */
+  onSelect: _propTypes.default.func
+} : {};
+var _default = HiAddressField;
+exports.default = _default;

package/HiForm/HiFormControl.js

@@ -64,6 +64,8 @@ var styles = function styles(theme) {
       cursor: 'pointer',
       zIndex: 1,
       top: '-5px',
+      height: 24,
+      width: 24,
       '&$iconButtonError': {
         color: theme.palette.negative.main
       },

package/HiForm/HiInput.js

@@ -121,10 +121,10 @@ var styles = function styles(theme) {
       padding: 0
     }),
     inputText: {
-      height: 39
+      height: 40
     },
     inputTextArea: {
-      minHeight: 39,
+      minHeight: 40,
       paddingTop: 8
     },
     iconPointer: {
@@ -132,7 +132,7 @@ var styles = function styles(theme) {
       cursor: 'pointer'
     },
     eraseButton: {
-      height: 39,
+      height: 40,
       width: 40,
       display: 'inline-block'
     },

package/HiForm/HiSlider.js

@@ -0,0 +1,352 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon/HiIcon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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, _extends2.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
+ */
+
+
+exports.styles = styles;
+
+var HiSlider =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiSlider, _React$Component);
+
+  function HiSlider(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiSlider);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSlider).call(this, props));
+
+    _this.handleChange = function (event) {
+      _this.props.onChange(parseFloat(event.target.value));
+
+      _this.textValueWidth = _this.textValue.offsetWidth;
+    };
+
+    _this.handleFocus = function (isFocused) {
+      return function () {
+        _this.setState({
+          focused: isFocused
+        });
+      };
+    };
+
+    _this.state = {
+      focused: false
+    };
+    return _this;
+  }
+  /**
+   * Measures several components once they are mounted.
+   * If the value and a label (left or right) are hovered,
+   * we hide this label.
+   */
+
+
+  (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;
+
+      var _this$getHovering = this.getHovering(),
+          hoveringLeft = _this$getHovering.hoveringLeft,
+          hoveringRight = _this$getHovering.hoveringRight;
+
+      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);
+
+HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Classes CSS appliquées.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Id de l'élément input
+   */
+  id: _propTypes.default.string.isRequired,
+
+  /**
+   * Label du champ
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * The label to show on the left.
+   */
+  leftLabel: _propTypes.default.string,
+
+  /**
+   * The Maximum value for the slider.
+   */
+  max: _propTypes.default.number.isRequired,
+
+  /**
+   * The Minimum value for the slider.
+   */
+  min: _propTypes.default.number.isRequired,
+
+  /**
+   * Fonction de callback appelée lorsqu'on change la valeur du slider.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * The label to show on the right
+   */
+  rightLabel: _propTypes.default.string,
+
+  /**
+   * The step between two selectable values.
+   */
+  step: _propTypes.default.number,
+
+  /**
+   * The suffix to show after each number.
+   */
+  suffix: _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  theme: _propTypes.default.object,
+
+  /**
+   * The
+   * value of the input.
+   */
+  value: _propTypes.default.number
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HiSlider',
+  withTheme: true
+})(HiSlider);
+
+exports.default = _default;