react-mapfilter/commonjs/ObservationDialog/ObservationViewNew.js

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

"use strict";

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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));

var _react = _interopRequireDefault(require("react"));

var _styles = require("@material-ui/core/styles");

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));

var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _data_analysis = require("../lib/data_analysis");

// @flow
// import clone from 'clone-deep'
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    root: {
      position: 'relative',
      width: '100vw',
      height: '100vh',
      display: 'flex',
      flexDirection: 'column',
      backgroundColor: 'green'
    },
    appBar: {
      position: 'relative'
    },
    title: {
      marginLeft: theme.spacing(2),
      flex: 1
    },
    contents: {
      flex: 1,
      display: 'flex',
      flexDirection: 'row'
    },
    media: {
      flex: 1,
      backgroundColor: 'aqua',
      flexBasis: '67%',
      maxWidth: '67%',
      position: 'relative'
    },
    details: {
      flex: 1,
      minWidth: 320,
      flexBasis: '33%',
      backgroundColor: 'white',
      overflowY: 'scroll'
    }
  };
});
/*:: type Props = {
  onRequestClose: () => {},
  observation: Observation,
  onSave: (observation: Observation) => {},
  /** Get an array of fields to render for an observation - defaults to
   * automatically determining fields *-/
  getFields?: (observation: Observation) => Array<Field>,
  /** Get the name of an observation (rendered as the dialog title). defaults to
   * 'Observation' *-/
  getName?: (observation: Observation) => string,
  /** Called with the observation, should return an array of objects with a url
   * property where the image can be opened, and a type, currently only 'image'
   * is supported *-/
  getMedia: (
    observation: Observation
  ) => Array<{| url: string, type?: 'image' |}>
}*/

function defaultGetFields(obs
/*: Observation*/
) {
  return (0, _data_analysis.getFields)(obs.tags);
}

var ObservationView = function ObservationView(_ref) {
  var onRequestClose = _ref.onRequestClose,
      observation = _ref.observation,
      _ref$getFields = _ref.getFields,
      getFields = _ref$getFields === void 0 ? defaultGetFields : _ref$getFields,
      _ref$getName = _ref.getName,
      getName = _ref$getName === void 0 ? function () {
    return 'Observation';
  } : _ref$getName,
      getMedia = _ref.getMedia;
  var classes = useStyles();

  var _React$useState = _react.default.useState(false),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      editing = _React$useState2[0],
      setEditing = _React$useState2[1]; // const [draftTags, setTags] = React.useState(() =>
  //   clone(observation.tags || {})
  // )


  function handleSave() {
    setEditing(false);
  } // function handleChange(newTags) {
  //   setTags(newTags)
  // }


  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
    className: classes.appBar
  }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    edge: "start",
    color: "inherit",
    onClick: onRequestClose,
    "aria-label": "Close"
  }, /*#__PURE__*/_react.default.createElement(_Close.default, null)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "h6",
    className: classes.title
  }, "Observation"), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    color: "inherit",
    onClick: function onClick() {
      return setEditing(false);
    }
  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    color: "inherit",
    onClick: handleSave
  }, "Save")) : /*#__PURE__*/_react.default.createElement(_Button.default, {
    color: "inherit",
    onClick: function onClick() {
      return setEditing(true);
    }
  }, "Edit"))), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.contents
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.media
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.details
  }, "Hello world")));
};

var _default = ObservationView;
exports.default = _default;
//# sourceMappingURL=ObservationViewNew.js.map