react-mapfilter/commonjs/ViewWrapper.js

These components are designed for viewing data in Mapeo. They share a common interface:

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));

var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));

var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));

var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));

var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));

var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));

var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));

var React = _interopRequireWildcard(require("react"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _mapeoEntityFilter = _interopRequireDefault(require("mapeo-entity-filter"));

var _ObservationDialog = _interopRequireDefault(require("./ObservationDialog"));

var _stats = _interopRequireDefault(require("./stats"));

var _helpers = require("./utils/helpers");

// @flow
var noop = function noop() {}; // This is a temporary wrapper to compile a filter that defines $preset into a
// filter that will work with our dataset, which currently uses categoryId to
// define which preset applies. We will need to improve how this works in the
// future once we start matching presets like we do with iD


var createFilter = function createFilter(filter
/*: Filter | void*/
) {
  if (!(0, _isArray.default)(filter) || filter[0] !== 'all' || filter.length < 2) {
    return function () {
      return true;
    };
  }

  var presetFilter = (0, _map.default)(filter).call(filter, function (subFilter) {
    var _context;

    if (!(0, _isArray.default)(subFilter) || subFilter[1] !== '$preset' && !(0, _isEqual.default)(subFilter[1], ['$preset'])) {
      return subFilter;
    }

    return (0, _concat.default)(_context = [subFilter[0], 'categoryId']).call(_context, (0, _toConsumableArray2.default)((0, _slice.default)(subFilter).call(subFilter, 2)));
  });
  return (0, _mapeoEntityFilter.default)(presetFilter);
};

var WrappedMapView = function WrappedMapView(_ref) {
  var _ref$observations = _ref.observations,
      observations = _ref$observations === void 0 ? [] : _ref$observations,
      _ref$onUpdateObservat = _ref.onUpdateObservation,
      onUpdateObservation = _ref$onUpdateObservat === void 0 ? noop : _ref$onUpdateObservat,
      _ref$onDeleteObservat = _ref.onDeleteObservation,
      onDeleteObservation = _ref$onDeleteObservat === void 0 ? noop : _ref$onDeleteObservat,
      _ref$presets = _ref.presets,
      presets = _ref$presets === void 0 ? [] : _ref$presets,
      getMediaUrl = _ref.getMediaUrl,
      filter = (0, _filter.default)(_ref),
      children = _ref.children,
      otherProps = (0, _objectWithoutProperties2.default)(_ref, ["observations", "onUpdateObservation", "onDeleteObservation", "presets", "getMediaUrl", "filter", "children"]);
  var stats = React.useMemo(function () {
    return (0, _stats.default)(observations);
  }, [observations]);

  var _React$useState = React.useState(null),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      editingObservation = _React$useState2[0],
      setEditingObservation = _React$useState2[1];

  var _React$useState3 = React.useState(),
      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
      editingInitialImageIndex = _React$useState4[0],
      setEditingInitialImageIndex = _React$useState4[1];

  var getPresetWithFallback = React.useCallback(function (observation
  /*: Observation*/
  )
  /*: PresetWithAdditionalFields*/
  {
    var _context2;

    var preset = getPreset(observation, presets);
    var defaultPreset = (0, _helpers.defaultGetPreset)(observation, stats);
    if (!preset) return defaultPreset;
    return (0, _assign.default)({}, preset, {
      additionalFields: (0, _filter.default)(_context2 = defaultPreset.additionalFields).call(_context2, // Any fields that are not defined in the preset we show as 'additionalFields'
      function (additionalField) {
        var _context3;

        return !(0, _find.default)(_context3 = preset.fields).call(_context3, function (field) {
          var fieldKey = (0, _isArray.default)(field.key) ? field.key : [field.key];
          var additionalFieldKey = (0, _isArray.default)(additionalField.key) ? additionalField.key : [additionalField.key];
          return (0, _isEqual.default)(fieldKey, additionalFieldKey);
        });
      })
    });
  }, [presets, stats]);
  var handleObservationClick = React.useCallback(function (observationId, imageIndex) {
    setEditingInitialImageIndex(imageIndex);
    setEditingObservation((0, _find.default)(observations).call(observations, function (obs) {
      return obs.id === observationId;
    }));
  }, [observations]);
  var getMedia = React.useCallback(function (attachment) {
    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
        _ref2$width = _ref2.width,
        width = _ref2$width === void 0 ? 800 : _ref2$width;

    var dpr = window.devicePixelRatio;
    var size = width < 300 * dpr ? 'thumbnail' : width < 1200 * dpr ? 'preview' : 'original';
    return {
      src: getMediaUrl(attachment.id, size),
      type: 'image'
    };
  }, [getMediaUrl]);
  var filterFunction = React.useMemo(function () {
    return createFilter(filter);
  }, [filter]);
  var filteredObservations = React.useMemo(function () {
    return filter ? (0, _filter.default)(observations).call(observations, filterFunction) : observations;
  }, [observations, filterFunction, filter]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, children({
    onClickObservation: handleObservationClick,
    filteredObservations: filteredObservations,
    getPreset: getPresetWithFallback,
    getMedia: getMedia
  }), /*#__PURE__*/React.createElement(_ObservationDialog.default, {
    open: !!editingObservation,
    observation: editingObservation,
    initialImageIndex: editingInitialImageIndex,
    getPreset: getPresetWithFallback,
    getMedia: getMedia,
    onRequestClose: function onRequestClose() {
      return setEditingObservation(false);
    },
    onSave: onUpdateObservation,
    onDelete: onDeleteObservation
  }));
};

var _default = WrappedMapView; // TODO: Update this function to match presets like ID Editor

exports.default = _default;

function getPreset(observation
/*: Observation*/
, presets
/*: PresetWithFields[]*/
)
/*: PresetWithFields | void*/
{
  var tags = observation.tags;
  if (!tags || !tags.categoryId) return;
  var preset = (0, _find.default)(presets).call(presets, function (preset) {
    return preset.id === tags.categoryId;
  });
  return preset;
}
//# sourceMappingURL=ViewWrapper.js.map