react-mapfilter/esm/ObservationDialog/ObservationViewNew.js

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

import "core-js/modules/es.array.iterator";
import "core-js/modules/web.dom-collections.iterator";
// @flow
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close'; // import clone from 'clone-deep'

import { getFields as defaultGetFieldsFromTags } from '../lib/data_analysis';
/*:: import type { Observation } from 'mapeo-schema'*/

/*:: import type { Field } from '../types'*/

const useStyles = makeStyles(theme => ({
  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 defaultGetFieldsFromTags(obs.tags);
}

const ObservationView = ({
  onRequestClose,
  observation,
  getFields = defaultGetFields,
  getName = () => 'Observation',
  getMedia
}
/*: Props*/
) => {
  const classes = useStyles();
  const [editing, setEditing] = React.useState(false); // const [draftTags, setTags] = React.useState(() =>
  //   clone(observation.tags || {})
  // )

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


  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(AppBar, {
    className: classes.appBar
  }, /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(IconButton, {
    edge: "start",
    color: "inherit",
    onClick: onRequestClose,
    "aria-label": "Close"
  }, /*#__PURE__*/React.createElement(CloseIcon, null)), /*#__PURE__*/React.createElement(Typography, {
    variant: "h6",
    className: classes.title
  }, "Observation"), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    color: "inherit",
    onClick: () => setEditing(false)
  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
    color: "inherit",
    onClick: handleSave
  }, "Save")) : /*#__PURE__*/React.createElement(Button, {
    color: "inherit",
    onClick: () => setEditing(true)
  }, "Edit"))), /*#__PURE__*/React.createElement("div", {
    className: classes.contents
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.media
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.details
  }, "Hello world")));
};

export default ObservationView;
//# sourceMappingURL=ObservationViewNew.js.map