@mint-ui/map/dist/components/mint-map/MintMap.js

- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var classNames = require('classnames/bind');
var MintMap_module = require('./MintMap.module.scss.js');
var MintMapCore = require('./core/MintMapCore.js');
var MintMapProvider = require('./core/provider/MintMapProvider.js');
var NaverMintMapController = require('./naver/NaverMintMapController.js');
var GoogleMintMapController = require('./google/GoogleMintMapController.js');
var KakaoMintMapController = require('./kakao/KakaoMintMapController.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);

var cn = classNames__default["default"].bind(MintMap_module); //지도 기본 센터

var DEFAULT_CENTER = {
  lat: 37.5036845,
  lng: 127.0448698
};
var DEFAULT_ZOOM_LEVEL = 12;
var DEFAULT_MAP_BASE_CONFIG = {
  center: DEFAULT_CENTER,
  zoomLevel: DEFAULT_ZOOM_LEVEL
};

function makeBaseProps(base) {
  !base.center && (base.center = DEFAULT_CENTER);
  !base.zoomLevel && (base.zoomLevel = DEFAULT_ZOOM_LEVEL);
  return base;
}
/**
 * Mint Map 컴포넌트
 *
 * @param {MintMapProps} MintMapProps
 *
 * @returns {JSX.Element} JSX
 */


function MintMap(_a) {
  var mapLoadingComponent = _a.mapLoadingComponent,
      _b = _a.dissolveEffectWhenLoaded,
      dissolveEffectWhenLoaded = _b === void 0 ? true : _b,
      mapType = _a.mapType,
      children = _a.children,
      base = _a.base,
      props = tslib.__rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);

  var mapBaseConfig = base ? makeBaseProps(base) : DEFAULT_MAP_BASE_CONFIG;
  var loadingRef = React.useRef(null);

  var _c = React.useState(),
      controller = _c[0],
      setController = _c[1];

  var loading = React.useMemo(function () {
    return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
  }, [mapLoadingComponent]);
  var prevController = React.useRef();
  React.useEffect(function () {
    if (mapType && mapType.length > 0) {
      setController(undefined);

      if (prevController.current) {
        prevController.current.destroyMap();
      }

      var newController_1 = mapType === 'naver' ? new NaverMintMapController.NaverMintMapController(tslib.__assign(tslib.__assign({
        mapType: mapType
      }, props), {
        base: mapBaseConfig
      })) : mapType === 'google' ? new GoogleMintMapController.GoogleMintMapController(tslib.__assign(tslib.__assign({
        mapType: mapType
      }, props), {
        base: mapBaseConfig
      })) : mapType === 'kakao' ? new KakaoMintMapController.KakaoMintMapController(tslib.__assign(tslib.__assign({
        mapType: mapType
      }, props), {
        base: mapBaseConfig
      })) : null;
      newController_1 && (prevController.current = newController_1);

      if (newController_1) {
        newController_1.loadMapApi().then(function () {
          setController(newController_1);
        });
      } else {
        throw new Error("Not Supported Map type ".concat(mapType));
      }
    } else {
      setController(undefined);
    }
  }, [mapType]);
  return React__default["default"].createElement(React__default["default"].Fragment, null, controller ? React__default["default"].createElement(MintMapProvider.MintMapProvider, {
    controller: controller
  }, dissolveEffectWhenLoaded && React__default["default"].createElement("div", {
    className: cn('ani-fade-out'),
    style: {
      position: 'absolute',
      top: '0px',
      left: '0px',
      width: '100%',
      height: '100%',
      background: 'white',
      zIndex: 1000,
      animationFillMode: 'forwards',
      animationDuration: '0.7s'
    },
    onAnimationEnd: function (e) {
      e.target.style.display = 'none';
    }
  }), React__default["default"].createElement(MintMapCore.MintMapCore, tslib.__assign({
    mapType: mapType
  }, props, {
    base: mapBaseConfig
  }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, dissolveEffectWhenLoaded && React__default["default"].createElement("div", {
    ref: function (refs) {
      loadingRef.current = refs;
    },
    style: {
      position: 'absolute',
      top: '0px',
      left: '0px',
      width: '100%',
      height: '100%',
      zIndex: 1000
    }
  }), loading));
}

exports.MintMap = MintMap;