@massds/mayflower-react/dist/EventTime/index.mjs

React versions of Mayflower design system UI components

/**
 * EventTime module.
 * @module @massds/mayflower-react/EventTime
 * @requires module:@massds/mayflower-assets/scss/01-atoms/event-time
 */
import React from "react";
import PropTypes from "prop-types";
import parse from "html-react-parser";
const timeFormat = new Intl.DateTimeFormat('en-US', {
  hour12: true,
  hour: 'numeric',
  minute: 'numeric'
});
const dateFormat = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

const EventTime = props => {
  const startDate = props.startDate,
        endDate = props.endDate,
        details = props.details;
  return /*#__PURE__*/React.createElement("span", {
    className: "ma__event-time"
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__event-time__calendar"
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__event-time__date"
  }, dateFormat.format(startDate)), /*#__PURE__*/React.createElement("div", {
    className: "ma__event-time__time"
  }, timeFormat.format(startDate) + " - " + timeFormat.format(endDate))), details && /*#__PURE__*/React.createElement("p", {
    className: "ma__contact__details"
  }, parse(details)));
};

EventTime.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The start date of the event. */
  startDate: PropTypes.instanceOf(Date).isRequired,

  /** The end date of the event. */
  endDate: PropTypes.instanceOf(Date).isRequired,

  /** Details around the event. */
  details: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
} : {};
export default EventTime;