@nocobase/plugin-map 0.8.1-alpha.3

package/lib/client/components/AMap.js

@@ -0,0 +1,502 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react = function _react() {
+    return data;
+  };
+
+  return data;
+}
+
+function _amapJsapiLoader() {
+  const data = _interopRequireDefault(require("@amap/amap-jsapi-loader"));
+
+  _amapJsapiLoader = function _amapJsapiLoader() {
+    return data;
+  };
+
+  return data;
+}
+
+require("@amap/amap-jsapi-types");
+
+function _react2() {
+  const data = require("@formily/react");
+
+  _react2 = function _react2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _client() {
+  const data = require("@nocobase/client");
+
+  _client = function _client() {
+    return data;
+  };
+
+  return data;
+}
+
+function _css() {
+  const data = require("@emotion/css");
+
+  _css = function _css() {
+    return data;
+  };
+
+  return data;
+}
+
+function _antd() {
+  const data = require("antd");
+
+  _antd = function _antd() {
+    return data;
+  };
+
+  return data;
+}
+
+var _locales = require("../locales");
+
+var _Search = _interopRequireDefault(require("./Search"));
+
+function _ahooks() {
+  const data = require("ahooks");
+
+  _ahooks = function _ahooks() {
+    return data;
+  };
+
+  return data;
+}
+
+var _hooks = require("../hooks");
+
+function _reactRouter() {
+  const data = require("react-router");
+
+  _reactRouter = function _reactRouter() {
+    return data;
+  };
+
+  return data;
+}
+
+function _icons() {
+  const data = require("@ant-design/icons");
+
+  _icons = function _icons() {
+    return data;
+  };
+
+  return data;
+}
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const methodMapping = {
+  point: {
+    mouseTool: 'marker',
+    propertyKey: 'position',
+    overlay: 'Marker'
+  },
+  polygon: {
+    mouseTool: 'polygon',
+    editor: 'PolygonEditor',
+    propertyKey: 'path',
+    overlay: 'Polygon'
+  },
+  lineString: {
+    mouseTool: 'polyline',
+    editor: 'PolylineEditor',
+    propertyKey: 'path',
+    overlay: 'Polyline'
+  },
+  circle: {
+    mouseTool: 'circle',
+    editor: 'CircleEditor',
+
+    transformOptions(value) {
+      return {
+        center: value.slice(0, 2),
+        radius: value[2]
+      };
+    },
+
+    overlay: 'Circle'
+  }
+};
+
+const AMapComponent = props => {
+  const _ref = (0, _hooks.useMapConfiguration)(props.mapType) || {},
+        accessKey = _ref.accessKey,
+        securityJsCode = _ref.securityJsCode;
+
+  const value = props.value,
+        onChange = props.onChange,
+        disabled = props.disabled,
+        _props$zoom = props.zoom,
+        zoom = _props$zoom === void 0 ? 13 : _props$zoom;
+
+  const _useMapTranslation = (0, _locales.useMapTranslation)(),
+        t = _useMapTranslation.t;
+
+  const fieldSchema = (0, _react2().useFieldSchema)();
+  const aMap = (0, _react().useRef)();
+  const map = (0, _react().useRef)();
+  const mouseTool = (0, _react().useRef)();
+
+  const _useState = (0, _react().useState)([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        needUpdateFlag = _useState2[0],
+        forceUpdate = _useState2[1];
+
+  const _useState3 = (0, _react().useState)(''),
+        _useState4 = _slicedToArray(_useState3, 2),
+        errMessage = _useState4[0],
+        setErrMessage = _useState4[1];
+
+  const _useCollection = (0, _client().useCollection)(),
+        getField = _useCollection.getField;
+
+  const collectionField = getField(fieldSchema.name);
+  const type = collectionField === null || collectionField === void 0 ? void 0 : collectionField.interface;
+  const overlay = (0, _react().useRef)();
+  const editor = (0, _react().useRef)(null);
+  const history = (0, _reactRouter().useHistory)();
+  const id = (0, _react().useRef)(`nocobase-map-${type}-${Date.now().toString(32)}`);
+
+  const _useState5 = (0, _react().useState)({
+    strokeWeight: 5,
+    strokeColor: '#4e9bff',
+    fillColor: '#4e9bff',
+    strokeOpacity: 1
+  }),
+        _useState6 = _slicedToArray(_useState5, 1),
+        commonOptions = _useState6[0];
+
+  const toRemoveOverlay = (0, _ahooks().useMemoizedFn)(() => {
+    if (overlay.current) {
+      var _map$current;
+
+      (_map$current = map.current) === null || _map$current === void 0 ? void 0 : _map$current.remove(overlay.current);
+    }
+  });
+  const setTarget = (0, _ahooks().useMemoizedFn)(() => {
+    if (!disabled && type !== 'point' && editor.current) {
+      editor.current.setTarget(overlay.current);
+      editor.current.open();
+    }
+  });
+  const onMapChange = (0, _ahooks().useMemoizedFn)((target, onlyChange = false) => {
+    let nextValue = null;
+
+    if (type === 'point') {
+      const _target$getPosition = target.getPosition(),
+            lat = _target$getPosition.lat,
+            lng = _target$getPosition.lng;
+
+      nextValue = [lng, lat];
+    } else if (type === 'polygon' || type === 'lineString') {
+      nextValue = target.getPath().map(item => [item.lng, item.lat]);
+
+      if (nextValue.length < 2) {
+        return;
+      }
+    } else if (type === 'circle') {
+      const center = target.getCenter();
+      const radius = target.getRadius();
+      nextValue = [center.lng, center.lat, radius];
+    }
+
+    if (!onlyChange) {
+      toRemoveOverlay();
+      overlay.current = target;
+      setTarget();
+    }
+
+    onChange(nextValue);
+  });
+  const createEditor = (0, _ahooks().useMemoizedFn)(() => {
+    const mapping = methodMapping[type];
+
+    if (mapping && 'editor' in mapping && !editor.current) {
+      editor.current = new aMap.current[mapping.editor](map.current);
+      editor.current.on('adjust', function ({
+        target
+      }) {
+        onMapChange(target, true);
+      });
+      editor.current.on('move', function ({
+        target
+      }) {
+        onMapChange(target, true);
+      });
+    }
+  });
+  const executeMouseTool = (0, _ahooks().useMemoizedFn)(() => {
+    var _editor$current;
+
+    if (!mouseTool.current || ((_editor$current = editor.current) === null || _editor$current === void 0 ? void 0 : _editor$current.getTarget())) return;
+    const mapping = methodMapping[type];
+
+    if (!mapping) {
+      return;
+    }
+
+    mouseTool.current[mapping.mouseTool](_objectSpread({}, commonOptions));
+  });
+  const createMouseTool = (0, _ahooks().useMemoizedFn)(() => {
+    if (mouseTool.current) return;
+    mouseTool.current = new aMap.current.MouseTool(map.current);
+    mouseTool.current.on('draw', function ({
+      obj
+    }) {
+      onMapChange(obj);
+    });
+    executeMouseTool();
+  });
+
+  const toCenter = (position, imm) => {
+    if (map.current) {
+      map.current.setZoomAndCenter(18, position, imm);
+    }
+  };
+
+  const onReset = () => {
+    const ok = () => {
+      toRemoveOverlay();
+
+      if (editor.current) {
+        editor.current.setTarget();
+        editor.current.close();
+      }
+
+      onChange(null);
+    };
+
+    _antd().Modal.confirm({
+      title: t('Clear the canvas'),
+      content: t('Are you sure to clear the canvas?'),
+      okText: t('Confirm'),
+      cancelText: t('Cancel'),
+
+      onOk() {
+        ok();
+      }
+
+    });
+  };
+
+  const onFocusOverlay = () => {
+    if (overlay.current) {
+      map.current.setFitView([overlay.current]);
+    }
+  }; // 编辑时
+
+
+  (0, _react().useEffect)(() => {
+    if (!aMap.current) return;
+
+    if (!value || overlay.current) {
+      return;
+    }
+
+    const mapping = methodMapping[type];
+
+    if (!mapping) {
+      return;
+    }
+
+    const options = _objectSpread({}, commonOptions);
+
+    if ('transformOptions' in mapping) {
+      Object.assign(options, mapping.transformOptions(value));
+    } else if ('propertyKey' in mapping) {
+      options[mapping.propertyKey] = value;
+    }
+
+    const nextOverlay = new aMap.current[mapping.overlay](options); // 聚焦在编辑的位置
+
+    map.current.setFitView([nextOverlay]);
+    nextOverlay.setMap(map.current);
+    overlay.current = nextOverlay;
+    createEditor();
+    setTarget();
+  }, [value, needUpdateFlag, type, commonOptions]); // 当在编辑时，关闭 mouseTool
+
+  (0, _react().useEffect)(() => {
+    if (!mouseTool.current) return;
+
+    if (disabled) {
+      var _mouseTool$current, _editor$current2;
+
+      (_mouseTool$current = mouseTool.current) === null || _mouseTool$current === void 0 ? void 0 : _mouseTool$current.close();
+      (_editor$current2 = editor.current) === null || _editor$current2 === void 0 ? void 0 : _editor$current2.close();
+    } else {
+      var _editor$current3;
+
+      executeMouseTool();
+      (_editor$current3 = editor.current) === null || _editor$current3 === void 0 ? void 0 : _editor$current3.open();
+    }
+  }, [disabled]); // AMap.MouseTool & AMap.XXXEditor
+
+  (0, _react().useEffect)(() => {
+    if (!aMap.current || !type || disabled) return;
+    createMouseTool();
+    createEditor();
+  }, [disabled, needUpdateFlag, type]);
+  (0, _react().useEffect)(() => {
+    if (!mouseTool.current || !editor.current) return;
+    const target = editor.current.getTarget();
+
+    if (target) {
+      var _mouseTool$current$cl, _mouseTool$current2;
+
+      (_mouseTool$current$cl = (_mouseTool$current2 = mouseTool.current).close) === null || _mouseTool$current$cl === void 0 ? void 0 : _mouseTool$current$cl.call(_mouseTool$current2);
+    } else {
+      executeMouseTool();
+    }
+  }, [type, value]);
+  (0, _react().useEffect)(() => {
+    if (!accessKey || map.current) return;
+
+    if (securityJsCode) {
+      window._AMapSecurityConfig = {
+        [securityJsCode.endsWith('_AMapService') ? 'serviceHOST' : 'securityJsCode']: securityJsCode
+      };
+    }
+
+    _amapJsapiLoader().default.load({
+      key: accessKey,
+      version: '2.0',
+      plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.PolylineEditor', 'AMap.CircleEditor']
+    }).then(amap => {
+      setTimeout(() => {
+        map.current = new amap.Map(id.current, {
+          resizeEnable: true,
+          zoom
+        });
+        aMap.current = amap;
+        setErrMessage('');
+        forceUpdate([]);
+      }, Math.random() * 300);
+    }).catch(err => {
+      if (err.includes('多个不一致的 key')) {
+        setErrMessage(t('The AccessKey is incorrect, please check it'));
+      } else {
+        setErrMessage(err);
+      }
+    });
+
+    return () => {
+      var _map$current2;
+
+      (_map$current2 = map.current) === null || _map$current2 === void 0 ? void 0 : _map$current2.destroy();
+      aMap.current = null;
+      map.current = null;
+      mouseTool.current = null;
+      editor.current = null;
+    };
+  }, [accessKey, type, securityJsCode]);
+
+  if (!accessKey || errMessage) {
+    return _react().default.createElement(_antd().Alert, {
+      action: _react().default.createElement(_antd().Button, {
+        type: "primary",
+        onClick: () => history.push('/admin/settings/map-configuration/configuration')
+      }, t('Go to the configuration page')),
+      message: errMessage || t('Please configure the AccessKey and SecurityJsCode first'),
+      type: "error"
+    });
+  }
+
+  return _react().default.createElement("div", {
+    className: (0, _css().css)`
+        position: relative;
+      `,
+    id: id.current,
+    style: {
+      height: '500px'
+    }
+  }, _react().default.createElement("div", {
+    className: (0, _css().css)`
+          position: absolute;
+          bottom: 80px;
+          right: 20px;
+          z-index: 10;
+        `
+  }, _react().default.createElement(_antd().Button, {
+    onClick: onFocusOverlay,
+    disabled: !overlay.current,
+    type: "primary",
+    shape: "round",
+    size: "large",
+    icon: _react().default.createElement(_icons().SyncOutlined, null)
+  })), !disabled ? _react().default.createElement(_react().default.Fragment, null, _react().default.createElement(_Search.default, {
+    toCenter: toCenter,
+    aMap: aMap.current
+  }), _react().default.createElement("div", {
+    className: (0, _css().css)`
+              position: absolute;
+              bottom: 20px;
+              left: 10px;
+              z-index: 2;
+              pointer-events: none;
+            `
+  }, _react().default.createElement(_antd().Alert, {
+    message: t('Click to select the starting point and double-click to end the drawing'),
+    type: "info"
+  })), _react().default.createElement("div", {
+    className: (0, _css().css)`
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              z-index: 2;
+            `
+  }, _react().default.createElement(_antd().Button, {
+    disabled: !value,
+    style: {
+      height: '40px'
+    },
+    onClick: onReset,
+    type: "primary",
+    danger: true
+  }, t('Clear')))) : null);
+};
+
+var _default = AMapComponent;
+exports.default = _default;

package/lib/client/components/Configuration.d.ts

@@ -0,0 +1,2 @@
+declare const Configuration: () => JSX.Element;
+export default Configuration;

package/lib/client/components/Configuration.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _client() {
+  const data = require("@nocobase/client");
+
+  _client = function _client() {
+    return data;
+  };
+
+  return data;
+}
+
+function _ahooks() {
+  const data = require("ahooks");
+
+  _ahooks = function _ahooks() {
+    return data;
+  };
+
+  return data;
+}
+
+function _antd() {
+  const data = require("antd");
+
+  _antd = function _antd() {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react = function _react() {
+    return data;
+  };
+
+  return data;
+}
+
+var _constants = require("../constants");
+
+var _hooks = require("../hooks");
+
+var _locales = require("../locales");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const AMapConfiguration = ({
+  type
+}) => {
+  const _useMapTranslation = (0, _locales.useMapTranslation)(),
+        t = _useMapTranslation.t;
+
+  const _useBoolean = (0, _ahooks().useBoolean)(false),
+        _useBoolean2 = _slicedToArray(_useBoolean, 2),
+        isDisabled = _useBoolean2[0],
+        disableAction = _useBoolean2[1];
+
+  const apiClient = (0, _client().useAPIClient)();
+
+  const _Form$useForm = _antd().Form.useForm(),
+        _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+        form = _Form$useForm2[0];
+
+  const data = (0, _hooks.useMapConfiguration)(type);
+  (0, _react().useEffect)(() => {
+    if (data) {
+      form.setFieldsValue(data);
+      disableAction.toggle();
+    }
+  }, [data]);
+  const resource = (0, _react().useMemo)(() => {
+    return apiClient.resource(_hooks.MapConfigurationResourceKey);
+  }, [apiClient]);
+
+  const onSubmit = values => {
+    resource.set(_objectSpread(_objectSpread({}, values), {}, {
+      type
+    })).then(res => {
+      _antd().message.success(t('Saved successfully'));
+    }).catch(err => {
+      _antd().message.success(t('Saved failed'));
+    });
+  };
+
+  return _react().default.createElement(_antd().Form, {
+    form: form,
+    layout: "vertical",
+    onFinish: onSubmit
+  }, _react().default.createElement(_antd().Form.Item, {
+    required: true,
+    name: "accessKey",
+    label: t('Access key')
+  }, _react().default.createElement(_antd().Input, {
+    disabled: isDisabled
+  })), _react().default.createElement(_antd().Form.Item, {
+    required: true,
+    name: "securityJsCode",
+    label: t('securityJsCode or serviceHost')
+  }, _react().default.createElement(_antd().Input, {
+    disabled: isDisabled
+  })), isDisabled ? _react().default.createElement(_antd().Button, {
+    onClick: disableAction.toggle,
+    type: "ghost"
+  }, t('Edit')) : _react().default.createElement(_antd().Form.Item, null, _react().default.createElement(_antd().Button, {
+    type: "primary",
+    htmlType: "submit"
+  }, t('Save'))));
+};
+
+const components = {
+  amap: AMapConfiguration,
+  google: () => _react().default.createElement("div", null, "Coming soon")
+};
+
+const tabList = _constants.MapTypes.map(item => {
+  return _objectSpread(_objectSpread({}, item), {}, {
+    component: components[item.value]
+  });
+});
+
+const Configuration = () => {
+  const compile = (0, _client().useCompile)();
+  return _react().default.createElement(_antd().Card, {
+    bordered: true
+  }, _react().default.createElement(_antd().Tabs, {
+    type: "card"
+  }, tabList.map(tab => {
+    return _react().default.createElement(_antd().Tabs.TabPane, {
+      key: tab.value,
+      tab: compile(tab.label)
+    }, _react().default.createElement(tab.component, {
+      type: tab.value
+    }));
+  })));
+};
+
+var _default = Configuration;
+exports.default = _default;

package/lib/client/components/Designer.d.ts

@@ -0,0 +1,2 @@
+declare const Designer: () => JSX.Element;
+export default Designer;