react-mapfilter/esm/internal/FeatureHeader.js

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

import _extends from "@babel/runtime-corejs3/helpers/extends";
// @flow
import * as React from 'react';
import CardHeader from '@material-ui/core/CardHeader';
import { makeStyles } from '@material-ui/core/styles';
import { FormattedTime, FormattedMessage } from 'react-intl';
import PlaceIcon from '@material-ui/icons/Place';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import FormattedLocation from '../internal/FormattedLocation';
import msgs from '../messages';
/*:: import type { Coordinates } from '../types'*/

const useStyles = makeStyles({
  avatar: {
    width: 50,
    height: 50,
    fontSize: 24,
    fontWeight: 500
  },
  action: {
    alignSelf: 'center',
    margin: 0
  }
});
/*:: type Props = {
  iconLabel?: string,
  iconColor?: string,
  name?: React.Node,
  coords?: Coordinates,
  createdAt?: Date,
  action?: React.Node
}*/

const FeatureHeader = ({
  iconLabel,
  iconColor = '#cccccc',
  name,
  coords,
  createdAt,
  action
}
/*: Props*/
) => {
  const classes = useStyles();
  const subheaderParts = [];
  if (createdAt) subheaderParts.push( /*#__PURE__*/React.createElement(FormattedTime, {
    key: "time",
    value: createdAt,
    year: "numeric",
    month: "long",
    day: "2-digit"
  }));

  if (coords) {
    if (subheaderParts.length) subheaderParts.push(' \u2014 ');
    subheaderParts.push( /*#__PURE__*/React.createElement(FormattedLocation, _extends({
      key: "location"
    }, coords)));
  }

  return /*#__PURE__*/React.createElement(CardHeader, {
    classes: {
      action: classes.action
    },
    avatar: /*#__PURE__*/React.createElement(Avatar, {
      "aria-label": "Recipe",
      style: {
        backgroundColor: iconColor
      },
      className: classes.avatar
    }, iconLabel || /*#__PURE__*/React.createElement(PlaceIcon, {
      fontSize: "large"
    })),
    action: action,
    title: /*#__PURE__*/React.createElement(Typography, {
      variant: "h5",
      component: "h2"
    }, name || /*#__PURE__*/React.createElement(FormattedMessage, msgs.defaultObservationName)),
    subheader: subheaderParts
  });
};

export default FeatureHeader;
//# sourceMappingURL=FeatureHeader.js.map