react-native-mechanic-map/lib/module/MechanicMap.js

React Native wrapper for Mechanic Map

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { Platform } from 'react-native';
import PropTypes from 'prop-types';
import { WebView } from 'react-native-webview';
import { LocationTypes, MapActions, MapResponses } from './index';
const MechanicMap = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    languageCode,
    disableAutoInit,
    payload,
    options,
    onEvent,
    onLevelSwitched,
    onLocationOpened,
    onLocationClosed,
    onMapLoaded,
    onNavigationCancalled,
    onLocationHighlighted,
    onMapError,
    ...props
  } = _ref;
  const webViewRef = useRef(null);

  const postMessage = message => {
    var _webViewRef$current;

    const messageStr = JSON.stringify(message);
    (_webViewRef$current = webViewRef.current) === null || _webViewRef$current === void 0 ? void 0 : _webViewRef$current.postMessage(messageStr);
  };

  useImperativeHandle(ref, () => ({
    postMessage(params) {
      postMessage(params);
    },

    init(params) {
      postMessage({
        action: MapActions.INIT,
        payload: {
          language: params.languageCode || 'en',
          levels: params.payload,
          options: params.options || {}
        }
      });
    },

    showLocation(_ref2) {
      let {
        id,
        type,
        duration = true,
        closeNavigation = true,
        moveAndZoom = true
      } = _ref2;
      postMessage({
        action: MapActions.SHOW_LOCATION,
        payload: {
          id,
          type,
          duration,
          closeNavigation,
          moveAndZoom
        }
      });
    },

    closeNavigation() {
      let resetLevel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
      postMessage({
        action: MapActions.CLOSE_NAVIGATION,
        payload: {
          resetLevel
        }
      });
    },

    showNavigation(route, params) {
      postMessage({
        action: MapActions.SHOW_NAVIGATION,
        payload: {
          route,
          autoMode: (params === null || params === void 0 ? void 0 : params.autoMode) === undefined ? true : params.autoMode,
          zoomEnabled: (params === null || params === void 0 ? void 0 : params.zoomEnabled) === undefined ? true : params.zoomEnabled,
          showPins: (params === null || params === void 0 ? void 0 : params.showPins) === undefined ? true : params.showPins
        }
      });
    },

    setFloor(floorNo, params) {
      postMessage({
        action: MapActions.SET_FLOOR,
        payload: {
          floorNo,
          resetZoom: (params === null || params === void 0 ? void 0 : params.resetZoom) === undefined ? true : params.resetZoom,
          hideLocation: (params === null || params === void 0 ? void 0 : params.hideLocation) === undefined ? true : params.hideLocation
        }
      });
    },

    highlightLocations(ids, params) {
      postMessage({
        action: MapActions.HIGHLIGHT_LOCATIONS,
        payload: {
          ids,
          type: (params === null || params === void 0 ? void 0 : params.type) === undefined ? LocationTypes.STORE : params.type,
          zoomEnabled: params === null || params === void 0 ? void 0 : params.zoomEnabled,
          duration: params === null || params === void 0 ? void 0 : params.duration
        }
      });
    },

    hideLocation() {
      postMessage({
        action: MapActions.HIDE_LOCATION
      });
    },

    setCurrentLocation(x, y, floorNo) {
      postMessage({
        action: MapActions.SET_CURRENT_LOCATION,
        payload: {
          x,
          y,
          floorNo
        }
      });
    },

    showCurrentLocation() {
      postMessage({
        action: MapActions.SHOW_CURRENT_LOCATION
      });
    },

    moveCurrentLocation(coords, params) {
      postMessage({
        action: MapActions.MOVE_CURRENT_LOCATION,
        payload: {
          coords,
          floorNo: params === null || params === void 0 ? void 0 : params.floorNo
        }
      });
    },

    removeCurrentLocation() {
      postMessage({
        action: MapActions.REMOVE_CURRENT_LOCATION
      });
    },

    zoomIn() {
      postMessage({
        action: MapActions.ZOOM_IN
      });
    },

    zoomOut() {
      postMessage({
        action: MapActions.ZOOM_OUT
      });
    },

    moveTo(x, y, params) {
      postMessage({
        action: MapActions.MOVE_TO,
        payload: {
          x,
          y,
          scale: params === null || params === void 0 ? void 0 : params.scale,
          duration: params === null || params === void 0 ? void 0 : params.duration,
          easing: params === null || params === void 0 ? void 0 : params.easing
        }
      });
    },

    zoomTo(x, y, params) {
      postMessage({
        action: MapActions.ZOOM_TO,
        payload: {
          x,
          y,
          scale: params === null || params === void 0 ? void 0 : params.scale,
          duration: params === null || params === void 0 ? void 0 : params.duration,
          easing: params === null || params === void 0 ? void 0 : params.easing
        }
      });
    },

    addLevel(level) {
      postMessage({
        action: MapActions.ADD_LEVEL,
        payload: {
          level
        }
      });
    },

    resetLevel() {
      postMessage({
        action: MapActions.RESET_LEVEL
      });
    },

    changeColors(colors) {
      postMessage({
        action: MapActions.CHANGE_COLORS,
        payload: { ...colors
        }
      });
    },

    reload() {
      postMessage({
        action: MapActions.RELOAD
      });
    }

  }));
  return /*#__PURE__*/React.createElement(WebView, _extends({
    ref: webViewRef,
    source: Platform.OS === 'android' ? {
      uri: 'file:///android_asset/assets/mechanic_map.html'
    } : require('../assets/mechanic_map.html'),
    onMessage: event => {
      const {
        action,
        data
      } = JSON.parse(event.nativeEvent.data);

      if (onEvent) {
        onEvent({
          action,
          data
        });
      }

      if (action === MapResponses.MAP_LOADED && onMapLoaded) {
        onMapLoaded();
      }

      if (action === MapResponses.LOCATION_OPENED && onLocationOpened) {
        onLocationOpened(data);
      }

      if (action === MapResponses.LOCATION_CLOSED && onLocationClosed) {
        onLocationClosed();
      }

      if (action === MapResponses.LEVEL_SWITCHED && onLevelSwitched) {
        onLevelSwitched(data); // new floor no
      }

      if (action === MapResponses.NAVIGATION_CANCELLED && onNavigationCancalled) {
        onNavigationCancalled();
      }

      if (action === MapResponses.LOCATION_HIGHLIGHTED && onLocationHighlighted) {
        onLocationHighlighted();
      }

      if (action === MapResponses.ERROR && onMapError) {
        onMapError(data);
      }
    },
    onLoadEnd: () => {
      if (disableAutoInit) return;
      postMessage({
        action: MapActions.INIT,
        payload: {
          language: languageCode,
          levels: payload,
          options
        }
      });
    },
    allowFileAccess: true,
    allowUniversalAccessFromFileURLs: true,
    originWhitelist: ['*'],
    hideKeyboardAccessoryView: false
  }, props));
});
MechanicMap.propTypes = {
  payload: PropTypes.array.isRequired
};
MechanicMap.defaultProps = {
  languageCode: 'en',
  disableAutoInit: false,
  options: {}
};
export default MechanicMap;
//# sourceMappingURL=MechanicMap.js.map