@hisptz/dhis2-analytics 1.0.5 → 1.0.6

package/build/cjs/components/Map/components/EarthEngineLayerConfiguration/index.js

@@ -0,0 +1,458 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EarthEngineLayerConfigModal = EarthEngineLayerConfigModal;
+exports.EarthEngineLayerConfiguration = EarthEngineLayerConfiguration;
+var _reactHookForm = require("react-hook-form");
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../MapLayer/components/GoogleEngineLayer/constants");
+var _lodash = require("lodash");
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _ui = require("@dhis2/ui");
+var _hooks = require("../MapLayer/components/GoogleEngineLayer/hooks");
+var _engine = require("../MapLayer/components/GoogleEngineLayer/services/engine");
+var _reactQuery = require("react-query");
+var _ColorScaleSelect = _interopRequireDefault(require("../ThematicLayerConfiguration/components/ColorScaleSelect"));
+var _colors = require("../../utils/colors");
+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 (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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function useType() {
+  const type = (0, _reactHookForm.useWatch)({
+    name: "type"
+  });
+  return (0, _lodash.find)(_constants.EARTH_ENGINE_LAYERS, ["id", type]);
+}
+function AggregationSelector() {
+  var _config$defaultAggreg;
+  const config = useType();
+  if (!(config !== null && config !== void 0 && config.defaultAggregations)) {
+    return null;
+  }
+  const supportedAggregations = (_config$defaultAggreg = config === null || config === void 0 ? void 0 : config.defaultAggregations) !== null && _config$defaultAggreg !== void 0 ? _config$defaultAggreg : [];
+  const maxAggregations = config === null || config === void 0 ? void 0 : config.maxAggregations;
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    render: _ref => {
+      var _fieldState$error, _head, _fieldState$error2, _field$value;
+      let {
+        field,
+        fieldState
+      } = _ref;
+      return maxAggregations === 1 ? /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+        clearable: true,
+        error: Boolean(fieldState.error),
+        validationText: fieldState === null || fieldState === void 0 ? void 0 : (_fieldState$error = fieldState.error) === null || _fieldState$error === void 0 ? void 0 : _fieldState$error.message,
+        selected: supportedAggregations.includes((_head = (0, _lodash.head)(field.value)) !== null && _head !== void 0 ? _head : "") ? (0, _lodash.head)(field.value) : undefined,
+        onChange: _ref2 => {
+          let {
+            selected
+          } = _ref2;
+          return field.onChange([selected]);
+        },
+        label: _d2I18n.default.t("Aggregation")
+      }, supportedAggregations.map(aggregation => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+        key: `${aggregation}-option`,
+        label: (0, _lodash.capitalize)(aggregation),
+        value: aggregation
+      }))) : /*#__PURE__*/_react.default.createElement(_ui.MultiSelectField, {
+        error: Boolean(fieldState.error),
+        validationText: fieldState === null || fieldState === void 0 ? void 0 : (_fieldState$error2 = fieldState.error) === null || _fieldState$error2 === void 0 ? void 0 : _fieldState$error2.message,
+        selected: (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.filter(value => supportedAggregations === null || supportedAggregations === void 0 ? void 0 : supportedAggregations.includes(value)),
+        onChange: _ref3 => {
+          let {
+            selected
+          } = _ref3;
+          return field.onChange(selected);
+        },
+        label: _d2I18n.default.t("Aggregations")
+      }, supportedAggregations.map(aggregation => /*#__PURE__*/_react.default.createElement(_ui.MultiSelectOption, {
+        key: `${aggregation}-option`,
+        label: (0, _lodash.capitalize)(aggregation),
+        value: aggregation
+      })));
+    },
+    name: "aggregations"
+  });
+}
+function useDatasetInfo(shouldRun, config) {
+  const {
+    refresh
+  } = (0, _hooks.useGoogleEngineToken)();
+  async function getInfo() {
+    if (config) {
+      const tokenData = await refresh();
+      await _engine.EarthEngine.setToken(tokenData.token, refresh);
+      const engine = new _engine.EarthEngine({
+        options: config
+      });
+      return engine.getPeriod();
+    }
+  }
+  const {
+    data,
+    error,
+    isLoading
+  } = (0, _reactQuery.useQuery)([config], getInfo);
+  const periods = (0, _react.useMemo)(() => {
+    const features = data === null || data === void 0 ? void 0 : data.features;
+    return features === null || features === void 0 ? void 0 : features.map(feature => {
+      var _Date;
+      return (_Date = new Date(feature === null || feature === void 0 ? void 0 : feature.properties["system:time_start"])) === null || _Date === void 0 ? void 0 : _Date.getFullYear();
+    });
+  }, [data]);
+  return {
+    loading: isLoading,
+    error: error,
+    periods
+  };
+}
+function PeriodSelector() {
+  var _config$filters;
+  const config = useType();
+  const {
+    setValue,
+    getValues
+  } = (0, _reactHookForm.useFormContext)();
+  const filters = (_config$filters = config === null || config === void 0 ? void 0 : config.filters) !== null && _config$filters !== void 0 ? _config$filters : [];
+  const hasPeriodFilter = filters.includes("period");
+  const {
+    loading,
+    error,
+    periods
+  } = useDatasetInfo(hasPeriodFilter, config);
+  const initialPeriod = getValues("filters.period");
+  (0, _react.useEffect)(() => {
+    if (!(0, _lodash.isEmpty)(periods) && !initialPeriod) {
+      setValue("filters.period", (0, _lodash.head)(periods));
+    }
+  }, [periods]);
+  if (!hasPeriodFilter) {
+    return null;
+  }
+  if (error) {
+    var _error$message;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        minWidth: "100%",
+        minHeight: 100
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement("p", null, (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : error === null || error === void 0 ? void 0 : error.toString())));
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    name: "filters.period",
+    rules: {
+      required: _d2I18n.default.t("Period is required")
+    },
+    render: _ref4 => {
+      var _fieldState$error3, _field$value2;
+      let {
+        field,
+        fieldState
+      } = _ref4;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          gap: 4
+        },
+        className: "row align-items-center"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          flex: 1
+        }
+      }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+        helpText: _d2I18n.default.t("Available periods are set by the source data"),
+        loading: loading,
+        filterable: true,
+        label: _d2I18n.default.t("Period"),
+        required: true,
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error3 = fieldState.error) === null || _fieldState$error3 === void 0 ? void 0 : _fieldState$error3.message,
+        onChange: _ref5 => {
+          let {
+            selected
+          } = _ref5;
+          return field.onChange(parseInt(selected));
+        },
+        selected: periods !== null && periods !== void 0 && periods.includes(field.value) ? (_field$value2 = field.value) === null || _field$value2 === void 0 ? void 0 : _field$value2.toString() : undefined
+      }, periods === null || periods === void 0 ? void 0 : periods.map(period => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+        key: `${period}-option`,
+        value: period.toString(),
+        label: period.toString()
+      })))), loading && /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
+        extrasmall: true
+      }));
+    }
+  });
+}
+function ColorConfig() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "column gap-16"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row gap-8"
+  }, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    render: _ref6 => {
+      var _fieldState$error4, _field$value3;
+      let {
+        field,
+        fieldState
+      } = _ref6;
+      return /*#__PURE__*/_react.default.createElement(_ui.InputField, _extends({}, field, {
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error4 = fieldState.error) === null || _fieldState$error4 === void 0 ? void 0 : _fieldState$error4.message,
+        value: (_field$value3 = field.value) === null || _field$value3 === void 0 ? void 0 : _field$value3.toString(),
+        onChange: _ref7 => {
+          let {
+            value
+          } = _ref7;
+          return field.onChange(parseInt(value));
+        },
+        label: _d2I18n.default.t("Min"),
+        type: "number"
+      }));
+    },
+    name: "params.min"
+  }), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    render: _ref8 => {
+      var _fieldState$error5, _field$value4;
+      let {
+        field,
+        fieldState
+      } = _ref8;
+      return /*#__PURE__*/_react.default.createElement(_ui.InputField, _extends({}, field, {
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error5 = fieldState.error) === null || _fieldState$error5 === void 0 ? void 0 : _fieldState$error5.message,
+        value: (_field$value4 = field.value) === null || _field$value4 === void 0 ? void 0 : _field$value4.toString(),
+        onChange: _ref9 => {
+          let {
+            value
+          } = _ref9;
+          return field.onChange(parseInt(value));
+        },
+        label: _d2I18n.default.t("Max"),
+        type: "number"
+      }));
+    },
+    name: "params.max"
+  }), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    name: "params.palette",
+    render: _ref10 => {
+      var _fieldState$error6, _scale$toString;
+      let {
+        field,
+        fieldState
+      } = _ref10;
+      const palette = field.value;
+      const scale = (0, _colors.getColorClasses)(palette);
+      const colorClass = (0, _colors.getColorScale)(palette !== null && palette !== void 0 ? palette : "");
+      const onChange = _ref11 => {
+        var _getColorPalette;
+        let {
+          selected
+        } = _ref11;
+        const palette = (_getColorPalette = (0, _colors.getColorPalette)(colorClass, parseInt(selected))) === null || _getColorPalette === void 0 ? void 0 : _getColorPalette.join(",");
+        field.onChange(palette);
+      };
+      return /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+        validationText: (_fieldState$error6 = fieldState.error) === null || _fieldState$error6 === void 0 ? void 0 : _fieldState$error6.message,
+        error: Boolean(fieldState.error),
+        selected: (_scale$toString = scale === null || scale === void 0 ? void 0 : scale.toString()) !== null && _scale$toString !== void 0 ? _scale$toString : _colors.defaultClasses.toString(),
+        label: _d2I18n.default.t("Steps"),
+        onChange: onChange,
+        name: "scale"
+      }, [3, 4, 5, 6, 7, 8, 9].map(value => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+        key: `${value}-classes-option`,
+        label: `${value}`,
+        value: value === null || value === void 0 ? void 0 : value.toString()
+      })));
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    name: "params.palette",
+    render: _ref12 => {
+      var _fieldState$error7;
+      let {
+        field,
+        fieldState
+      } = _ref12;
+      const palette = field.value;
+      const scale = (0, _colors.getColorClasses)(palette);
+      const colorClass = (0, _colors.getColorScale)(palette !== null && palette !== void 0 ? palette : "");
+      const onChange = colorClass => {
+        var _getColorPalette2;
+        const palette = (_getColorPalette2 = (0, _colors.getColorPalette)(colorClass, scale)) === null || _getColorPalette2 === void 0 ? void 0 : _getColorPalette2.join(",");
+        field.onChange(palette);
+      };
+      return /*#__PURE__*/_react.default.createElement(_ui.Field, {
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error7 = fieldState.error) === null || _fieldState$error7 === void 0 ? void 0 : _fieldState$error7.message,
+        label: _d2I18n.default.t("Colors")
+      }, /*#__PURE__*/_react.default.createElement(_ColorScaleSelect.default, {
+        count: scale !== null && scale !== void 0 ? scale : _colors.defaultClasses,
+        colorClass: colorClass !== null && colorClass !== void 0 ? colorClass : _colors.defaultColorScaleName,
+        width: 300,
+        onChange: onChange
+      }));
+    }
+  })));
+}
+function StylesConfig() {
+  const config = useType();
+  const hasParams = Boolean(config === null || config === void 0 ? void 0 : config.params);
+  if (!hasParams) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      minWidth: 200,
+      minHeight: 100
+    },
+    className: "row gap-16"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column"
+  }, /*#__PURE__*/_react.default.createElement("p", null, _d2I18n.default.t("Unit"), ": ", config === null || config === void 0 ? void 0 : config.unit), /*#__PURE__*/_react.default.createElement(ColorConfig, null)));
+}
+function Name() {
+  const config = useType();
+  const {
+    setValue
+  } = (0, _reactHookForm.useFormContext)();
+  (0, _react.useEffect)(() => {
+    setValue("name", config === null || config === void 0 ? void 0 : config.name);
+    setValue("id", config === null || config === void 0 ? void 0 : config.id);
+  }, [config]);
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    name: "name",
+    rules: {
+      required: _d2I18n.default.t("Name is required")
+    },
+    render: _ref13 => {
+      var _fieldState$error8;
+      let {
+        field,
+        fieldState
+      } = _ref13;
+      return /*#__PURE__*/_react.default.createElement(_ui.InputField, {
+        label: _d2I18n.default.t("Layer name"),
+        type: "text",
+        required: true,
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error8 = fieldState.error) === null || _fieldState$error8 === void 0 ? void 0 : _fieldState$error8.message,
+        onChange: _ref14 => {
+          let {
+            value
+          } = _ref14;
+          return field.onChange(value);
+        },
+        value: field.value
+      });
+    }
+  });
+}
+function TypeField(_ref15) {
+  let {
+    excluded
+  } = _ref15;
+  const supportedLayers = (0, _lodash.filter)(_constants.EARTH_ENGINE_LAYERS, _ref16 => {
+    var _excluded$includes;
+    let {
+      id
+    } = _ref16;
+    return _constants.SUPPORTED_EARTH_ENGINE_LAYERS.includes(id) && !((_excluded$includes = excluded === null || excluded === void 0 ? void 0 : excluded.includes(id)) !== null && _excluded$includes !== void 0 ? _excluded$includes : false);
+  });
+  const {
+    setValue
+  } = (0, _reactHookForm.useFormContext)();
+  const setConfigDefaults = selected => {
+    const config = (0, _lodash.find)(supportedLayers, ["id", selected]);
+    if (!config) return;
+    if (config !== null && config !== void 0 && config.defaultAggregations) {
+      setValue("aggregations", config === null || config === void 0 ? void 0 : config.defaultAggregations);
+    } else {
+      setValue("aggregations", undefined);
+    }
+    if (config !== null && config !== void 0 && config.params) {
+      const {
+        max,
+        min,
+        palette
+      } = config.params;
+      setValue("params.max", max);
+      setValue("params.min", min);
+      setValue("params.palette", palette);
+    } else {
+      setValue("params", undefined);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    name: "type",
+    rules: {
+      required: _d2I18n.default.t("Type is required")
+    },
+    render: _ref17 => {
+      var _fieldState$error9;
+      let {
+        field,
+        fieldState
+      } = _ref17;
+      return /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+        label: _d2I18n.default.t("Layer type"),
+        required: true,
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error9 = fieldState.error) === null || _fieldState$error9 === void 0 ? void 0 : _fieldState$error9.message,
+        onChange: _ref18 => {
+          let {
+            selected
+          } = _ref18;
+          setConfigDefaults(selected);
+          field.onChange(selected);
+        },
+        selected: Boolean((0, _lodash.find)(supportedLayers, "id", field.value)) ? field.value : undefined
+      }, supportedLayers === null || supportedLayers === void 0 ? void 0 : supportedLayers.map(layer => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+        key: `${layer.id}-option`,
+        value: layer.id,
+        label: layer.name
+      })));
+    }
+  });
+}
+function EarthEngineLayerConfiguration(_ref19) {
+  let {
+    form,
+    excluded
+  } = _ref19;
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, form, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column gap-16"
+  }, /*#__PURE__*/_react.default.createElement(TypeField, {
+    excluded: excluded
+  }), /*#__PURE__*/_react.default.createElement(Name, null), /*#__PURE__*/_react.default.createElement(AggregationSelector, null), /*#__PURE__*/_react.default.createElement(PeriodSelector, null), /*#__PURE__*/_react.default.createElement(StylesConfig, null)));
+}
+function EarthEngineLayerConfigModal(_ref20) {
+  let {
+    open,
+    exclude,
+    config,
+    onClose,
+    onChange,
+    ...props
+  } = _ref20;
+  const form = (0, _reactHookForm.useForm)({
+    defaultValues: config !== null && config !== void 0 ? config : {}
+  });
+  const onSubmitClick = values => {
+    onClose();
+    onChange(values);
+  };
+  return /*#__PURE__*/_react.default.createElement(_ui.Modal, _extends({}, props, {
+    open: open,
+    onClose: onClose
+  }), /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _d2I18n.default.t("Configure Earth Engine Layer")), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement(EarthEngineLayerConfiguration, {
+    form: form,
+    excluded: exclude
+  })), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    onClick: onClose
+  }, _d2I18n.default.t("Cancel")), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    primary: true,
+    onClick: form.handleSubmit(onSubmitClick)
+  }, _d2I18n.default.t("Save")))));
+}

package/build/cjs/components/Map/components/MapArea/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dhis2Utils = require("@hisptz/dhis2-utils");
+var _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _map = require("../../hooks/map");
+var _MapControls = _interopRequireDefault(require("../MapControls"));
+var _MapLayer = _interopRequireDefault(require("../MapLayer"));
+var _LegendArea = _interopRequireDefault(require("../MapLayer/components/LegendArea"));
+var _MapLayerProvider = require("../MapProvider/components/MapLayerProvider");
+var _hooks = require("../MapProvider/hooks");
+var _MapUpdater = _interopRequireDefault(require("../MapUpdater"));
+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 (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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function MapLayerArea(_ref) {
+  var _base$attribution, _base$url;
+  let {
+    id,
+    base,
+    controls,
+    legends
+  } = _ref;
+  const {
+    layers
+  } = (0, _hooks.useMapLayers)();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeaflet.TileLayer, {
+    id: id,
+    attribution: (_base$attribution = base === null || base === void 0 ? void 0 : base.attribution) !== null && _base$attribution !== void 0 ? _base$attribution : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="https://carto.com/attribution">CARTO</a>',
+    url: (_base$url = base === null || base === void 0 ? void 0 : base.url) !== null && _base$url !== void 0 ? _base$url : "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
+  }), controls === null || controls === void 0 ? void 0 : controls.map(control => /*#__PURE__*/_react.default.createElement(_MapControls.default, _extends({
+    mapId: id,
+    key: `${control.type}-control`
+  }, control))), !(0, _lodash.isEmpty)(layers) && /*#__PURE__*/_react.default.createElement(_reactLeaflet.LayersControl, {
+    hideSingleBase: true,
+    position: "topleft"
+  }, layers.map((layer, index) => /*#__PURE__*/_react.default.createElement(_MapLayer.default, {
+    key: layer.id,
+    layer: layer,
+    index: index
+  }))), !(0, _lodash.isEmpty)(layers) && /*#__PURE__*/_react.default.createElement(_LegendArea.default, {
+    legends: legends,
+    layers: layers,
+    position: "topright"
+  }));
+}
+const MapArea = (_ref2, ref) => {
+  let {
+    base,
+    controls,
+    mapOptions,
+    key,
+    legends,
+    layers
+  } = _ref2;
+  const {
+    center,
+    bounds
+  } = (0, _map.useMapBounds)();
+  const {
+    current: id
+  } = (0, _react.useRef)((0, _dhis2Utils.uid)());
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: `${id}-"map-container`,
+    style: {
+      height: "100%",
+      width: "100%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.MapContainer, _extends({
+    attributionControl: true,
+    ref: ref,
+    id: id,
+    center: center,
+    bounceAtZoomLimits: true,
+    bounds: bounds,
+    style: {
+      height: "100%",
+      width: "100%",
+      minHeight: 500
+    },
+    key: key,
+    trackResize: true
+  }, mapOptions), /*#__PURE__*/_react.default.createElement(_MapUpdater.default, {
+    bounds: bounds
+  }), /*#__PURE__*/_react.default.createElement(_MapLayerProvider.MapLayersProvider, {
+    layers: layers
+  }, /*#__PURE__*/_react.default.createElement(MapLayerArea, {
+    base: base,
+    id: id,
+    controls: controls,
+    legends: legends
+  }))));
+};
+var _default = /*#__PURE__*/(0, _react.forwardRef)(MapArea);
+exports.default = _default;

package/build/cjs/components/Map/components/MapArea/interfaces/index.js

@@ -0,0 +1 @@
+"use strict";

package/build/cjs/components/Map/components/MapControls/components/CustomControl/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomControl = CustomControl;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+const POSITION_CLASSES = {
+  bottomleft: "leaflet-bottom leaflet-left",
+  bottomright: "leaflet-bottom leaflet-right",
+  topleft: "leaflet-top leaflet-left",
+  topright: "leaflet-top leaflet-right"
+};
+function CustomControl(_ref) {
+  let {
+    children,
+    position,
+    ...options
+  } = _ref;
+  const positionClass = position && POSITION_CLASSES[position] || POSITION_CLASSES.topright;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, options, {
+    className: `${positionClass}`
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflow: "hidden",
+      border: "none"
+    },
+    className: "leaflet-control leaflet-bar"
+  }, children));
+}

package/build/cjs/components/Map/components/MapControls/components/DownloadControl/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DownloadControl;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@react-leaflet/core");
+var _leaflet = _interopRequireDefault(require("leaflet"));
+require("leaflet-easyprint");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+const DownloadControlComponent = (0, _core.createControlComponent)(props => {
+  return _leaflet.default.easyPrint(props);
+});
+function DownloadControl(_ref) {
+  let {
+    options,
+    position,
+    mapId
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(DownloadControlComponent, _extends({}, options, {
+    position
+  }));
+}

package/build/cjs/components/Map/components/MapControls/components/FullscreenControl/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@react-leaflet/core");
+var _leaflet = require("leaflet");
+require("leaflet.fullscreen");
+require("leaflet.fullscreen/Control.FullScreen.css");
+const FullscreenControl = (0, _core.createControlComponent)(props => _leaflet.control.fullscreen(props));
+var _default = FullscreenControl;
+exports.default = _default;

package/build/cjs/components/Map/components/MapControls/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MapControl;
+var _react = _interopRequireDefault(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _FullscreenControl = _interopRequireDefault(require("./components/FullscreenControl"));
+var _DownloadControl = _interopRequireDefault(require("./components/DownloadControl"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function MapControl(_ref) {
+  let {
+    type,
+    options,
+    position,
+    mapId
+  } = _ref;
+  switch (type) {
+    case "zoom":
+      return /*#__PURE__*/_react.default.createElement(_reactLeaflet.ZoomControl, _extends({
+        position: position
+      }, options));
+    case "scale":
+      return /*#__PURE__*/_react.default.createElement(_reactLeaflet.ScaleControl, _extends({
+        position: position
+      }, options));
+    case "fullscreen":
+      return /*#__PURE__*/_react.default.createElement(_FullscreenControl.default, _extends({
+        position: position
+      }, options));
+    case "print":
+      return /*#__PURE__*/_react.default.createElement(_DownloadControl.default, {
+        mapId: mapId,
+        position: position,
+        options: options
+      });
+    default:
+      return null;
+  }
+}