@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/HiIconButton/index.js

@@ -0,0 +1,15 @@
+"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 _HiIconButton.default;
+  }
+});
+
+var _HiIconButton = _interopRequireDefault(require("./HiIconButton"));

package/HiListItemLink/HiListItemLink.js

@@ -0,0 +1,106 @@
+"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/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: function root(props) {
+      return {
+        color: props.disabled ? theme.palette.neutral.light : "initial",
+        display: "flex",
+        height: 48,
+        padding: 12,
+        "&:hover": {
+          backgroundColor: props.disabled ? "none" : "#E6F9FD",
+          cursor: props.disabled ? "cursor" : "pointer"
+        },
+        "&:not(:last-child)": {
+          borderBottom: "1px solid #E0E0E0"
+        },
+        // margin between children (unless last span for ripple effect)
+        "& > :not(span)": {
+          marginLeft: 12
+        },
+        "& > div": {
+          display: "block",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          alignSelf: "center",
+          minWidth: "5%"
+        }
+      };
+    },
+    primary: function primary(props) {
+      return {
+        fontSize: "14px",
+        textTransform: "uppercase",
+        flex: props.secondary ? "initial" : 1 // expand primary text unless there is secondary
+
+      };
+    },
+    secondary: {
+      alignSelf: "center",
+      color: theme.palette.neutral.light,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 11,
+      flex: 1
+    },
+    info: {
+      color: theme.palette.neutral.light,
+      fontFamily: theme.typography.fontFamily
+    }
+  };
+});
+
+var _ref = _react.default.createElement(_ArrowRight.default, null);
+
+var HiListItemLink = _react.default.forwardRef(function (props, ref) {
+  var disabled = props.disabled,
+      info = props.info,
+      primary = props.primary,
+      secondary = props.secondary,
+      icon = props.icon,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "info", "primary", "secondary", "icon"]);
+  var classes = useStyles(props);
+  return _react.default.createElement(_ListItem.default, (0, _extends2.default)({
+    ref: ref,
+    className: classes.root,
+    button: true,
+    disableGutters: true,
+    disabled: disabled
+  }, others), _react.default.createElement("div", {
+    className: classes.primary
+  }, primary), secondary && _react.default.createElement("div", {
+    className: classes.secondary
+  }, secondary), info && _react.default.createElement("div", {
+    className: classes.info
+  }, info), icon, _ref);
+});
+
+HiListItemLink.defaultProps = {
+  disabled: false,
+  info: null,
+  onClick: null,
+  secondary: null,
+  icon: null
+};
+var _default = HiListItemLink;
+exports.default = _default;

package/HiListItemLink/index.js

@@ -0,0 +1,15 @@
+"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 _HiListItemLink.default;
+  }
+});
+
+var _HiListItemLink = _interopRequireDefault(require("./HiListItemLink"));

package/HiLoader/HiLoader.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PropagateLoader = _interopRequireDefault(require("react-spinners/PropagateLoader"));
+
+var _styles = require("@material-ui/core/styles");
+
+function HiLoader(props) {
+  var className = props.className,
+      color = props.color,
+      size = props.size,
+      theme = props.theme,
+      style = props.style;
+  return _react.default.createElement("div", {
+    id: "hi-loader",
+    className: className,
+    style: (0, _objectSpread2.default)({}, style, {
+      display: 'block',
+      width: 1,
+      height: 12
+    })
+  }, _react.default.createElement(_PropagateLoader.default, {
+    size: size,
+    color: theme.palette[color].main
+  }));
+}
+
+HiLoader.defaultProps = {
+  size: 12,
+  color: 'primary'
+};
+
+var _default = (0, _styles.withStyles)({}, {
+  hiComponent: true,
+  withTheme: true,
+  name: 'HmuiHiLoader'
+})(HiLoader);
+
+exports.default = _default;

package/HiLoader/index.js

@@ -0,0 +1,15 @@
+"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 _HiLoader.default;
+  }
+});
+
+var _HiLoader = _interopRequireDefault(require("./HiLoader"));

package/HiMap/HiMap.js

@@ -0,0 +1,315 @@
+"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/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiLoader = _interopRequireDefault(require("../HiLoader"));
+
+var _leaflet = _interopRequireDefault(require("leaflet"));
+
+var _reactLeaflet = require("react-leaflet");
+
+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.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.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 _ref = _react.default.createElement(_reactLeaflet.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)(_this));
+    _this.handleScrollZoom = _this.handleScrollZoom.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleClickZoomOut = _this.handleClickZoomOut.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleCenter = _this.handleCenter.bind((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();
+    }
+  }, {
+    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 && _leaflet.default && _reactLeaflet.Map) {
+        myIcon = _leaflet.default.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(_reactLeaflet.Map, {
+          zoom: zoom,
+          center: position,
+          className: classes.map,
+          onViewportChange: this.handleScrollZoom
+        }, _ref, _react.default.createElement(_reactLeaflet.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'
+  }
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiHiMap'
+})(HiMap);
+
+exports.default = _default;