react-mapfilter/commonjs/internal/FeatureHeader.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");

require("core-js/modules/es.function.name");

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

exports.default = void 0;

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

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

var _CardHeader = _interopRequireDefault(require("@material-ui/core/CardHeader"));

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

var _reactIntl = require("react-intl");

var _Place = _interopRequireDefault(require("@material-ui/icons/Place"));

var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));

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

var _FormattedLocation = _interopRequireDefault(require("../internal/FormattedLocation"));

var _messages = _interopRequireDefault(require("../messages"));

// @flow
var useStyles = (0, _styles.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
}*/

var FeatureHeader = function FeatureHeader(_ref) {
  var iconLabel = _ref.iconLabel,
      _ref$iconColor = _ref.iconColor,
      iconColor = _ref$iconColor === void 0 ? '#cccccc' : _ref$iconColor,
      name = _ref.name,
      coords = _ref.coords,
      createdAt = _ref.createdAt,
      action = _ref.action;
  var classes = useStyles();
  var subheaderParts = [];
  if (createdAt) subheaderParts.push( /*#__PURE__*/React.createElement(_reactIntl.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.default, (0, _extends2.default)({
      key: "location"
    }, coords)));
  }

  return /*#__PURE__*/React.createElement(_CardHeader.default, {
    classes: {
      action: classes.action
    },
    avatar: /*#__PURE__*/React.createElement(_Avatar.default, {
      "aria-label": "Recipe",
      style: {
        backgroundColor: iconColor
      },
      className: classes.avatar
    }, iconLabel || /*#__PURE__*/React.createElement(_Place.default, {
      fontSize: "large"
    })),
    action: action,
    title: /*#__PURE__*/React.createElement(_Typography.default, {
      variant: "h5",
      component: "h2"
    }, name || /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.default.defaultObservationName)),
    subheader: subheaderParts
  });
};

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