@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

package/HiMap/HiMap.js

@@ -0,0 +1,345 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+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 _styles = require("../styles");
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiLoader = _interopRequireDefault(require("../HiLoader"));
+
+var apiUrl = 'https://nominatim.openstreetmap.org/search?q='; // The original CSS can be found here : https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
+
+var styles = function styles(theme) {
+  return {
+    map: {
+      height: '100%',
+      overflow: 'hidden',
+      // eslint-disable-next-line max-len
+      '& .leaflet-pane, & .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow, & .leaflet-tile-container, & .leaflet-pane > svg, & .leaflet-pane > canvas, & .leaflet-zoom-box, & .leaflet-image-layer, & .leaflet-layer': {
+        position: 'absolute',
+        left: 0,
+        top: 0
+      },
+      '& .leaflet-container': {
+        overflow: 'hidden',
+        height: '100%'
+      },
+      '& .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow': {
+        '-webkit-user-select': 'none',
+        '-moz-user-select': 'none',
+        userSelect: 'none',
+        '-webkit-user-drag': 'none'
+      },
+      '& .leaflet-control': {
+        display: 'none'
+      },
+      '& .map_marker': {
+        fill: theme.palette.primary.light
+      }
+    },
+    controlButtons: {
+      position: 'absolute',
+      bottom: 16,
+      right: 16
+    },
+    centerIcon: {
+      fontSize: 14
+    },
+    centerButtonContainer: {
+      backgroundColor: theme.palette.global.background1,
+      borderRadius: 3,
+      padding: 3,
+      fontFamily: theme.typography.fontFamily,
+      boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+      color: theme.palette.neutral.normal,
+      '&>button:first-child': {
+        borderBottom: "1px solid ".concat(theme.palette.neutral.normal)
+      }
+    },
+    centerButton: {
+      color: theme.palette.neutral.normal,
+      padding: '1px !important',
+      height: 26,
+      minHeight: 26,
+      width: 26,
+      minWidth: 26
+    },
+    zoomButtons: {
+      backgroundColor: theme.palette.global.background1,
+      borderRadius: 3,
+      padding: 3,
+      fontFamily: theme.typography.fontFamily,
+      boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+      color: theme.palette.neutral.normal,
+      '&>button:first-child': {
+        borderBottom: "1px solid ".concat(theme.palette.neutral.normal)
+      }
+    },
+    zoomButton: {
+      paddingTop: '0px !important',
+      paddingBottom: 0,
+      paddingRight: 6,
+      paddingLeft: 6,
+      minWidth: 0,
+      minHeight: 0,
+      borderRadius: 0,
+      display: 'block',
+      fontSize: 24,
+      fontWeight: 'bold',
+      lineHeight: '26px',
+      '&>span': {
+        width: 14
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+var L;
+var Map;
+var TileLayer;
+var Marker;
+
+var _ref = _react.default.createElement(TileLayer, {
+  url: "http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png"
+});
+
+var _ref2 = _react.default.createElement(_HiLoader.default, {
+  loading: true
+});
+
+var HiMap =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiMap, _React$PureComponent);
+
+  function HiMap(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiMap);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiMap).call(this, props));
+    _this.mounted = false;
+    _this.state = {
+      lat: 0,
+      lng: 0,
+      notFound: false,
+      loaded: false,
+      zoom: 16
+    };
+    _this.handleClickZoomIn = _this.handleClickZoomIn.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleScrollZoom = _this.handleScrollZoom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClickZoomOut = _this.handleClickZoomOut.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleCenter = _this.handleCenter.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  } // Loads the libraries once the component mounted to avoid error caused by server-cli rendering.
+
+
+  (0, _createClass2.default)(HiMap, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.mounted = true;
+      this.findCoords();
+      /* eslint-disable */
+
+      L = require('leaflet');
+      Map = require('react-leaflet').Map;
+      Marker = require('react-leaflet').Marker;
+      TileLayer = require('react-leaflet').TileLayer;
+      /* eslint-enable */
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mounted = false;
+    }
+  }, {
+    key: "handleScrollZoom",
+    value: function handleScrollZoom(event) {
+      this.setState({
+        zoom: event.zoom
+      });
+    }
+  }, {
+    key: "handleClickZoomIn",
+    value: function handleClickZoomIn() {
+      this.setState(function (prevState) {
+        return {
+          zoom: prevState.zoom + 1
+        };
+      });
+    }
+  }, {
+    key: "handleClickZoomOut",
+    value: function handleClickZoomOut() {
+      this.setState(function (prevState) {
+        return {
+          zoom: prevState.zoom - 1
+        };
+      });
+    }
+  }, {
+    key: "handleCenter",
+    value: function handleCenter() {
+      // trick to center the map.
+      this.setState(function (prevState) {
+        return {
+          lat: prevState.lat + 0.0000000001
+        };
+      });
+    } // Call to the geocoding API.
+
+  }, {
+    key: "findCoords",
+    value: function findCoords() {
+      var _this2 = this;
+
+      fetch("".concat(apiUrl).concat(this.props.address, "&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1")).then(function (result) {
+        return result.json();
+      }).then(function (response) {
+        if (_this2.mounted) {
+          if (response.length !== 0) {
+            _this2.setState({
+              lat: parseFloat(response[0].lat),
+              lng: parseFloat(response[0].lon),
+              notFound: false,
+              loaded: true
+            });
+          } else {
+            _this2.setState({
+              notFound: true
+            });
+
+            _this2.props.onAddressNotFound();
+          }
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          zoom = _this$state.zoom,
+          lng = _this$state.lng,
+          lat = _this$state.lat,
+          notFound = _this$state.notFound,
+          loaded = _this$state.loaded;
+      var _this$props = this.props,
+          translations = _this$props.translations,
+          classes = _this$props.classes;
+      var position = [lat, lng];
+      var element;
+      var myIcon;
+      if (notFound) element = translations.notFound;
+
+      if (loaded) {
+        myIcon = L.divIcon({
+          html: '<svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">\n' + '<path class="map_marker" ' + 'd="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 ' + 'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z' + ' M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 ' + 'c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>\n' + '</svg>',
+          iconSize: [24, 36],
+          iconAnchor: [11, 36]
+        });
+        element = _react.default.createElement(Map, {
+          zoom: zoom,
+          center: position,
+          className: classes.map,
+          onViewportChange: this.handleScrollZoom
+        }, _ref, _react.default.createElement(Marker, {
+          position: position,
+          icon: myIcon
+        }), _react.default.createElement("div", {
+          className: classes.controlButtons
+        }, _react.default.createElement("div", {
+          className: classes.centerButtonContainer
+        }, _react.default.createElement(_HiButton.default, {
+          className: classes.centerButton,
+          onClick: this.handleCenter
+        }, _react.default.createElement(_HiIcon.default, {
+          className: classes.centerIcon,
+          icon: 'my_location',
+          size: 24
+        }))), _react.default.createElement("div", {
+          className: classes.zoomButtons
+        }, _react.default.createElement(_HiButton.default, {
+          onClick: this.handleClickZoomIn,
+          className: classes.zoomButton
+        }, "+"), _react.default.createElement(_HiButton.default, {
+          onClick: this.handleClickZoomOut,
+          className: classes.zoomButton
+        }, "-"))));
+      } else {
+        element = _react.default.createElement("div", {
+          style: {
+            top: '50%',
+            left: '50%',
+            position: 'absolute'
+          }
+        }, _ref2);
+      }
+
+      return _react.default.createElement("div", {
+        style: {
+          height: '352px',
+          width: '100%',
+          position: 'relative'
+        }
+      }, element);
+    }
+  }]);
+  return HiMap;
+}(_react.default.PureComponent);
+
+HiMap.defaultProps = {
+  translations: {
+    notFound: 'Address not found'
+  }
+};
+HiMap.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The address to see in the Map component.
+   */
+  address: _propTypes.default.string.isRequired,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object.isRequired,
+
+  /**
+   * Function to tell the parent composant that the address was not found by the API.
+   */
+  onAddressNotFound: _propTypes.default.func,
+
+  /**
+   * Traductions
+   */
+  translations: _propTypes.default.object
+} : {};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiHiMap'
+})(HiMap);
+
+exports.default = _default;

package/HiMap/HiMapExpand.js

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
+
+var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
+
+var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+
+var _styles = require("../styles");
+
+var _HiMap = _interopRequireDefault(require("./HiMap"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon/HiIcon"));
+
+var styles = function styles(theme) {
+  return {
+    column: {
+      flexBasis: '33.33%'
+    },
+    root: {
+      flexGrow: 1,
+      boxShadow: 'none'
+    },
+    imgListItem: {
+      width: 24,
+      height: 'auto',
+      marginRight: 8,
+      verticalAlign: 'middle'
+    },
+    expandMoreIcon: {},
+    disabledIcon: {
+      color: theme.palette.action.disabled
+    },
+    panelSummaryExpanded: {
+      minHeight: 0
+    },
+    panelSummary: {
+      '&>div:first-child': {
+        margin: '12px 0'
+      }
+    },
+    expanded: {
+      '& $expandMoreIcon': {
+        transform: 'translateY(-50%) rotate(0) !important',
+        color: theme.palette.primary.light
+      },
+      minHeight: '0 !important'
+    },
+    heading: (0, _extends2.default)({}, theme.typography.b1, {
+      margin: 0,
+      fontSize: 15,
+      lineHeight: '24px'
+    }),
+    secondaryHeading: (0, _extends2.default)({}, theme.typography.b3, {
+      margin: 0,
+      fontSize: 15,
+      lineHeight: '24px',
+      float: 'left',
+      '&>svg': {
+        fontSize: 18,
+        marginLeft: 3,
+        marginBottom: -5
+      }
+    })
+  };
+};
+
+var HiMapExpand =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiMapExpand, _React$PureComponent);
+
+  function HiMapExpand(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiMapExpand);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiMapExpand).call(this, props));
+    _this.state = {
+      addressNotFound: false,
+      expanded: false
+    };
+    _this.handleAddressNotFound = _this.handleAddressNotFound.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleExpand = _this.handleExpand.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiMapExpand, [{
+    key: "handleExpand",
+    value: function handleExpand() {
+      this.setState(function (prevState) {
+        return {
+          expanded: !prevState.addressNotFound && !prevState.expanded
+        };
+      });
+    }
+  }, {
+    key: "handleAddressNotFound",
+    value: function handleAddressNotFound() {
+      this.setState({
+        addressNotFound: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          address = _this$props.address,
+          countryFlagPath = _this$props.countryFlagPath;
+      var _this$state = this.state,
+          addressNotFound = _this$state.addressNotFound,
+          expanded = _this$state.expanded;
+      var flag = countryFlagPath ? _react.default.createElement("img", {
+        src: countryFlagPath,
+        className: classes.imgListItem,
+        alt: 'country flag'
+      }) : '';
+      return _react.default.createElement(_ExpansionPanel.default, {
+        className: classes.root,
+        defaultExpanded: false,
+        expanded: expanded,
+        onChange: this.handleExpand
+      }, _react.default.createElement(_ExpansionPanelSummary.default, {
+        classes: {
+          root: classes.panelSummary,
+          expanded: classes.expanded,
+          expandIcon: classes.expandMoreIcon
+        },
+        expandIcon: _react.default.createElement(_HiIcon.default, {
+          icon: 'place',
+          style: {
+            position: 'relative',
+            top: 2,
+            marginRight: 5
+          },
+          className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.disabledIcon, addressNotFound))
+        })
+      }, _react.default.createElement("div", {
+        className: classes.column
+      }, _react.default.createElement("p", {
+        className: classes.secondaryHeading
+      }, "Adresse")), _react.default.createElement("div", null, _react.default.createElement("p", {
+        className: classes.heading
+      }, flag, address))), _react.default.createElement(_ExpansionPanelDetails.default, {
+        style: {
+          padding: 0
+        }
+      }, _react.default.createElement(_HiMap.default, {
+        address: address,
+        onAddressNotFound: this.handleAddressNotFound
+      })));
+    }
+  }]);
+  return HiMapExpand;
+}(_react.default.PureComponent);
+
+HiMapExpand.defaultProps = {
+  countryFlagPath: ''
+};
+HiMapExpand.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The address to see in the Map component.
+   */
+  address: _propTypes.default.string.isRequired,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object.isRequired,
+
+  /**
+   * The path to the country flag image.
+   */
+  countryFlagPath: _propTypes.default.string
+} : {};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiHiMapExpand'
+})(HiMapExpand);
+
+exports.default = _default;

package/HiMap/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiMap.default;
+  }
+});
+Object.defineProperty(exports, "HiMapExpand", {
+  enumerable: true,
+  get: function get() {
+    return _HiMapExpand.default;
+  }
+});
+
+var _HiMap = _interopRequireDefault(require("./HiMap"));
+
+var _HiMapExpand = _interopRequireDefault(require("./HiMapExpand"));