@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta2 → 2.3.0-rcstyleguide-beta4

package/es/old_components/HiIconButton/HiIconButton.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+// @inheritedComponent IconButton
+var styles = function styles(theme) {
+  return {
+    label: {},
+    positive: {
+      color: theme.palette.positive.main,
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    negative: {
+      color: theme.palette.negative.main,
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    middle: {
+      color: theme.palette.middle.main,
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    neutral: {
+      color: theme.palette.neutral.main,
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+function HiIconButton(props) {
+  var _classNames;
+
+  var children = props.children,
+      classes = props.classes,
+      className = props.className,
+      color = props.color,
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color"]);
+  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+  var buttonClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.negative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.middle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.neutral, color === 'neutral'), _classNames));
+  return _react.default.createElement(_IconButton.default, (0, _extends2.default)({
+    className: className,
+    classes: {
+      root: buttonClassNames,
+      label: classes.label
+    },
+    color: hcolor
+  }, other), children);
+}
+
+HiIconButton.defaultProps = {
+  color: 'default'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiIconButton'
+})(HiIconButton);
+
+exports.default = _default;

package/es/old_components/HiIconButton/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@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/es/old_components/HiLoader/HiLoader.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@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/es/old_components/HiLoader/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@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/es/old_components/HiMap/HiMap.js

@@ -0,0 +1,317 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+
+(0, _defineProperty2.default)(HiMap, "defaultProps", {
+  translations: {
+    notFound: 'Address not found'
+  }
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiHiMap'
+})(HiMap);
+
+exports.default = _default;