@janiscommerce/ui-web 0.30.0 → 0.32.0

package/dist/index.umd.js

@@ -5647,7 +5647,7 @@
   });
 
   var _templateObject$4;
-  var styles = {
+  var styles$2 = {
     Svg: styled__default["default"].svg.withConfig({
       displayName: "styles__Svg",
       componentId: "sc-jf3e5i-0"
@@ -5671,7 +5671,7 @@
     Item: styled__default["default"].div.withConfig({
       displayName: "styles__Item",
       componentId: "sc-jf3e5i-3"
-    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), palette.blue, styles.Svg, palette.blue),
+    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles$2.Svg, mixins.transition('fill'), palette.blue, styles$2.Svg, palette.blue),
     SearchInput: styled__default["default"].input.withConfig({
       displayName: "styles__SearchInput",
       componentId: "sc-jf3e5i-4"
@@ -7098,7 +7098,7 @@
     var color = _ref.color,
         name = _ref.name,
         sizeProp = _ref.size,
-        styles$1 = _ref.styles,
+        styles = _ref.styles,
         pathStyles = _ref.pathStyles,
         width = _ref.width,
         height = _ref.height,
@@ -7111,14 +7111,14 @@
         defaultSize = _icons$name.size;
     var size = sizeProp || defaultSize;
     if (!path) return null;
-    return /*#__PURE__*/React__default["default"].createElement(styles.Svg, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styles$2.Svg, _extends$1({
       width: width || size,
       height: height || size,
-      styles: styles$1,
+      styles: styles,
       color: color,
       viewBox: viewBox,
       size: size
-    }, props), /*#__PURE__*/React__default["default"].createElement(styles.Path, {
+    }, props), /*#__PURE__*/React__default["default"].createElement(styles$2.Path, {
       d: path,
       styles: pathStyles
     }));
@@ -11256,7 +11256,7 @@
           instance.setZIndex(zIndex);
       },
   };
-  class Marker$1 extends React__namespace.PureComponent {
+  class Marker$2 extends React__namespace.PureComponent {
       constructor() {
           super(...arguments);
           this.registeredEvents = [];
@@ -11323,7 +11323,7 @@
           return children || null;
       }
   }
-  Marker$1.contextType = MapContext;
+  Marker$2.contextType = MapContext;
 
   var ClusterIcon = /** @class */ (function () {
       function ClusterIcon(cluster, styles) {
@@ -15964,15 +15964,26 @@
   };
 
   var Marker = function Marker(_ref) {
-    var markerData = _ref.markerData,
-        readOnly = _ref.readOnly,
-        _ref$setMarkerCallbac = _ref.setMarkerCallback,
-        setMarkerCallback = _ref$setMarkerCallbac === void 0 ? function () {} : _ref$setMarkerCallbac,
-        markerIdx = _ref.markerIdx,
-        schemaMarkerProps = _ref.markerProps;
-
-    var _ref2 = schemaMarkerProps || {},
-        _onClick = _ref2.onClick;
+    var _ref$markerData = _ref.markerData,
+        markerData = _ref$markerData === void 0 ? {} : _ref$markerData,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
+        _ref$readOnly = _ref.readOnly,
+        readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly;
+
+    var _ref2 = markerData || {},
+        icon = _ref2.icon,
+        position = _ref2.position,
+        overlay = _ref2.overlay,
+        infoWindowChildren = _ref2.infoWindowChildren,
+        isDraggable = _ref2.isDraggable;
+
+    var _markerOptions$onClic = markerOptions.onClick,
+        _onClick = _markerOptions$onClic === void 0 ? function () {} : _markerOptions$onClic,
+        _markerOptions$onDrag = markerOptions.onDragStart,
+        _onDragStart = _markerOptions$onDrag === void 0 ? function () {} : _markerOptions$onDrag,
+        _markerOptions$onDrag2 = markerOptions.onDragEnd,
+        _onDragEnd = _markerOptions$onDrag2 === void 0 ? function () {} : _markerOptions$onDrag2;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -15995,31 +16006,26 @@
     var delayedInfoWindowHover = debounce(function () {
       if (!mouseOverInfoWindow) closeInfoWindow();
     }, 100);
-
-    var markerHandles = _objectSpread2(_objectSpread2({}, _onClick && {
-      onClick: function onClick() {
-        return _onClick(markerData);
-      }
-    }), {}, {
+    var markerProps = {
+      position: position,
+      draggable: isDraggable || !readOnly,
+      icon: icon,
+      onClick: function onClick(eventData) {
+        return _onClick(markerData, eventData);
+      },
+      onDragEnd: function onDragEnd(eventData) {
+        return _onDragEnd(markerData, eventData);
+      },
+      onDragStart: function onDragStart(eventData) {
+        return _onDragStart(markerData, eventData);
+      },
       onMouseOver: function onMouseOver() {
         return openInfoWindow();
       },
       onMouseOut: function onMouseOut() {
         return delayedInfoWindowHover();
       }
-    });
-
-    var markerProps = _objectSpread2(_objectSpread2({
-      position: markerData.position,
-      draggable: !readOnly,
-      onDragEnd: function onDragEnd(_ref3) {
-        var latLng = _ref3.latLng;
-        return setMarkerCallback(latLng, markerIdx, markerData);
-      }
-    }, _objectSpread2({}, markerHandles)), {}, {
-      icon: markerData.icon
-    });
-
+    };
     var infoWindowHandles = {
       onMouseEnter: function onMouseEnter() {
         delayedInfoWindowHover.cancel();
@@ -16038,35 +16044,37 @@
       };
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Marker$1, markerProps), markerData.overlay && /*#__PURE__*/React__default["default"].createElement(OverlayView, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Marker$2, markerProps), overlay && /*#__PURE__*/React__default["default"].createElement(OverlayView, {
       className: "google-map-component__overlay-view",
-      position: markerData.position,
+      position: position,
       mapPaneName: OverlayView.OVERLAY_MOUSE_TARGET,
       getPixelPositionOffset: function getPixelPositionOffset(width) {
         return _getPixelPositionOffset(width);
       }
-    }, markerData.overlay()), infoWindowOpen && markerData.infoWindowChildren && /*#__PURE__*/React__default["default"].createElement(InfoWindow, {
+    }, overlay()), infoWindowOpen && infoWindowChildren && /*#__PURE__*/React__default["default"].createElement(InfoWindow, {
       className: "google-map-component__info-window",
-      data: markerData.position,
+      data: position,
       infoWindowHandles: infoWindowHandles
-    }, markerData.infoWindowChildren()));
+    }, infoWindowChildren()));
   };
 
+  var Marker$1 = /*#__PURE__*/React__default["default"].memo(Marker);
+
   var Markers = function Markers(_ref) {
     var _ref$readOnly = _ref.readOnly,
-        readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-        _ref$setMarker = _ref.setMarker,
-        setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker,
+        readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
         _ref$markers = _ref.markers,
-        markers = _ref$markers === void 0 ? [] : _ref$markers;
+        markers = _ref$markers === void 0 ? [] : _ref$markers,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions;
     if (!markers.length) return null;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, markers.map(function (marker, idx) {
-      return /*#__PURE__*/React__default["default"].createElement(Marker, {
+      return /*#__PURE__*/React__default["default"].createElement(Marker$1, {
         markerData: _objectSpread2({}, marker),
+        markerOptions: markerOptions,
         key: idx,
         readOnly: readOnly,
-        markerIdx: idx,
-        setMarkerCallback: setMarker
+        markerIdx: idx
       });
     }));
   };
@@ -16074,16 +16082,16 @@
   var Route = function Route(_ref) {
     var _ref$routeData = _ref.routeData,
         routeData = _ref$routeData === void 0 ? {} : _ref$routeData,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
         _ref$readOnly = _ref.readOnly,
-        readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-        _ref$setMarker = _ref.setMarker,
-        setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker;
+        readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly;
     var _routeData$polylines = routeData.polylines,
         polylines = _routeData$polylines === void 0 ? [] : _routeData$polylines;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Markers, {
       readOnly: readOnly,
-      setMarker: setMarker,
-      markers: routeData.points
+      markers: routeData.points,
+      markerOptions: markerOptions
     }), /*#__PURE__*/React__default["default"].createElement(Polyline, {
       path: polylines,
       options: routeData.polylineOptions
@@ -16093,10 +16101,10 @@
   var MarkersDrawer = function MarkersDrawer(_ref) {
     var _ref$markers = _ref.markers,
         markers = _ref$markers === void 0 ? [] : _ref$markers,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
         _ref$readOnly = _ref.readOnly,
         readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
-        _ref$setMarker = _ref.setMarker,
-        setMarker = _ref$setMarker === void 0 ? function () {} : _ref$setMarker,
         _ref$callbackOnSucces = _ref.callbackOnSuccessDirections,
         callbackOnSuccessDirections = _ref$callbackOnSucces === void 0 ? function () {} : _ref$callbackOnSucces,
         _ref$callbackOnErrorD = _ref.callbackOnErrorDirections,
@@ -16104,8 +16112,7 @@
         _ref$googleMapsApiKey = _ref.googleMapsApiKey,
         googleMapsApiKey = _ref$googleMapsApiKey === void 0 ? '' : _ref$googleMapsApiKey;
     var commonProps = {
-      readOnly: readOnly,
-      setMarker: setMarker
+      readOnly: readOnly
     };
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, markers.map(function (marker, idx) {
       var _marker$polylines;
@@ -16114,13 +16121,15 @@
         key: "".concat(idx.toString())
       }, commonProps, {
         routeData: marker,
+        markerOptions: markerOptions,
         callbackOnSuccessDirections: callbackOnSuccessDirections,
         callbackOnErrorDirections: callbackOnErrorDirections,
         googleMapsApiKey: googleMapsApiKey
       })) : /*#__PURE__*/React__default["default"].createElement(Markers, _extends$1({
         key: "".concat(idx.toString())
       }, commonProps, {
-        markers: marker.points
+        markers: marker.points,
+        markerOptions: markerOptions
       }));
     }));
   };
@@ -35430,7 +35439,7 @@
     })));
   };
 
-  var _excluded = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
+  var _excluded = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "markerOptions", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
 
   var Map$1 = function Map(_ref) {
     var _mapRef$current;
@@ -35447,6 +35456,8 @@
         zoom = _ref$zoom === void 0 ? 13 : _ref$zoom,
         _ref$markers = _ref.markers,
         markers = _ref$markers === void 0 ? [] : _ref$markers,
+        _ref$markerOptions = _ref.markerOptions,
+        markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions,
         _ref$options = _ref.options,
         options = _ref$options === void 0 ? {} : _ref$options,
         _ref$callbackOnSucces = _ref.callbackOnSuccessDirections,
@@ -35511,6 +35522,7 @@
       className: "google-map-component__search-box"
     }), validMarkersExist && /*#__PURE__*/React__default["default"].createElement(MarkersDrawer, {
       markers: markers,
+      markerOptions: markerOptions,
       readOnly: mapOptions.readOnly,
       callbackOnSuccessDirections: callbackOnSuccessDirections,
       callbackOnErrorDirections: callbackOnErrorDirections,
@@ -35518,6 +35530,105 @@
     }));
   };
 
+  var rotate = styled$g.keyframes(["to{transform:rotate(360deg);}"]);
+  var Spinner$1 = styled__default["default"].div.withConfig({
+    displayName: "styles__Spinner",
+    componentId: "sc-1e490ps-0"
+  })(["", ""], function (_ref) {
+    var color = _ref.color,
+        duration = _ref.duration,
+        size = _ref.size,
+        thickness = _ref.thickness,
+        backSpinnerColor = _ref.backSpinnerColor;
+    return styled$g.css(["width:", "px;height:", "px;border-radius:50%;background-color:transparent;border-top:", "px solid ", ";border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";animation:", " ", "s linear infinite;position:absolute;"], size, size, thickness, getColor(color), thickness, getColor(color), thickness, getColor(color), thickness, getColor(backSpinnerColor), rotate, duration);
+  });
+  var SpinnerWrapper = styled__default["default"].div.withConfig({
+    displayName: "styles__SpinnerWrapper",
+    componentId: "sc-1e490ps-1"
+  })(["position:relative;display:flex;justify-content:center;align-items:center;width:", "px;height:", "px;"], function (_ref2) {
+    var size = _ref2.size;
+    return size;
+  }, function (_ref3) {
+    var size = _ref3.size;
+    return size;
+  });
+  var CenterContent = styled__default["default"].div.withConfig({
+    displayName: "styles__CenterContent",
+    componentId: "sc-1e490ps-2"
+  })(["position:absolute;display:flex;justify-content:center;align-items:center;"]);
+  var styles$1 = {
+    Spinner: Spinner$1,
+    CenterContent: CenterContent,
+    SpinnerWrapper: SpinnerWrapper
+  };
+
+  var Spinner = function Spinner(_ref) {
+    var _ref$config = _ref.config,
+        config = _ref$config === void 0 ? {} : _ref$config,
+        children = _ref.children;
+    var _config$color = config.color,
+        color = _config$color === void 0 ? 'blue' : _config$color,
+        _config$duration = config.duration,
+        duration = _config$duration === void 0 ? 4 : _config$duration,
+        _config$size = config.size,
+        size = _config$size === void 0 ? 115 : _config$size,
+        _config$thickness = config.thickness,
+        thickness = _config$thickness === void 0 ? 8 : _config$thickness,
+        _config$backSpinnerCo = config.backSpinnerColor,
+        backSpinnerColor = _config$backSpinnerCo === void 0 ? 'grey' : _config$backSpinnerCo;
+    return /*#__PURE__*/React__default["default"].createElement(styles$1.SpinnerWrapper, {
+      size: size
+    }, /*#__PURE__*/React__default["default"].createElement(styles$1.Spinner, {
+      color: color,
+      duration: duration,
+      size: size,
+      thickness: thickness,
+      backSpinnerColor: backSpinnerColor
+    }), children && /*#__PURE__*/React__default["default"].createElement(styles$1.CenterContent, null, children));
+  };
+
+  var show = styled$g.keyframes(["0%{opacity:0;}to{opacity:1;}"]);
+  var Container = styled__default["default"].section.withConfig({
+    displayName: "styles__Container",
+    componentId: "sc-19kt9g-0"
+  })(["display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;position:fixed;top:0;left:0;background:", ";", ";z-index:100;animation:", " 0.2s ease-in;"], function (_ref) {
+    var backgroundColor = _ref.backgroundColor;
+    return backgroundColor;
+  }, function (_ref2) {
+    var effect = _ref2.effect;
+    return effect && styled$g.css(effect);
+  }, show);
+  var LoaderContainer = styled__default["default"].div.withConfig({
+    displayName: "styles__LoaderContainer",
+    componentId: "sc-19kt9g-1"
+  })(["position:relative;display:flex;justify-content:center;align-items:center;width:115px;height:115px;"]);
+  var styles = {
+    Container: Container,
+    LoaderContainer: LoaderContainer
+  };
+
+  var FullLoader = function FullLoader(_ref) {
+    var children = _ref.children,
+        _ref$backgroundColor = _ref.backgroundColor,
+        backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
+        _ref$spinnerConfig = _ref.spinnerConfig,
+        spinnerConfig = _ref$spinnerConfig === void 0 ? {} : _ref$spinnerConfig,
+        _ref$effect = _ref.effect,
+        effect = _ref$effect === void 0 ? {} : _ref$effect;
+    var defaultSpinnerConfig = {
+      color: 'blue',
+      duration: 4,
+      size: 115,
+      thickness: 8
+    };
+    return /*#__PURE__*/React__default["default"].createElement(styles.Container, {
+      effect: effect,
+      backgroundColor: backgroundColor
+    }, /*#__PURE__*/React__default["default"].createElement(styles.LoaderContainer, null, children || /*#__PURE__*/React__default["default"].createElement(Spinner, {
+      config: _objectSpread2(_objectSpread2({}, defaultSpinnerConfig), spinnerConfig)
+    })));
+  };
+
   exports.Avatar = Avatar;
   exports.AvatarGroup = AvatarGroup$1;
   exports.Button = Button;
@@ -35528,6 +35639,7 @@
   exports.ColorPicker = ColorPicker;
   exports.Drawer = Drawer;
   exports.ErrorBoundary = ErrorBoundary;
+  exports.FullLoader = FullLoader;
   exports.HTML = HTML;
   exports.Icon = Icon;
   exports.Image = Image;
@@ -35536,6 +35648,7 @@
   exports.Map = Map$1;
   exports.QRCode = QRCode;
   exports.Skeleton = Skeleton;
+  exports.Spinner = Spinner;
   exports.Switch = Switch;
   exports.Textarea = Textarea;
   exports.icons = icons;