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

React versions of Mayflower design system UI components

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/**
 * GenTeaserEvent module.
 * @module @massds/mayflower-react/GenTeaserEvent
 * @requires module:@massds/mayflower-assets/scss/03-organisms/gen-teaser
 */
import React from "react";
import PropTypes from "prop-types";
import IconCalendar from "../Icon/IconCalendar.mjs";
import LinkDropdown from "../LinkDropdown/index.mjs";
import EventTime from "../EventTime/index.mjs";
import { buildUrl } from "../GenTeaser/utils.mjs";
/**
 * Event
 */

const GenTeaserEvent = props => {
  const calendars = props.calendars,
        startDate = props.startDate,
        endDate = props.endDate,
        details = props.details,
        location = props.location,
        description = props.description,
        title = props.title,
        rest = _objectWithoutPropertiesLoose(props, ["calendars", "startDate", "endDate", "details", "location", "description", "title"]);

  const dropdownProps = {
    dropdownButton: {
      text: 'Add to Calendar',
      theme: 'c-primary',
      usage: 'quaternary',
      id: 'dropdownbutton-simple',
      'aria-haspopup': true,
      capitalized: true
    }
  };
  const eventProps = {
    startDate: startDate,
    endDate: endDate,
    details: details,
    location: location,
    description: description,
    title: title
  };
  dropdownProps.dropdownItems = calendars.map(item => {
    const type = item.type,
          text = item.text;
    let itemVals = '';

    switch (type) {
      case 'yahoo':
      case 'google':
      case 'outlookcom':
        itemVals = {
          text: text,
          href: buildUrl(eventProps, type)
        };
        break;

      default:
        itemVals = {
          text: text,
          href: buildUrl(eventProps, type, window || ''),
          target: '_blank',
          download: 'download.ics'
        };
        break;
    }

    return itemVals;
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
    className: "ma__gen-teaser__infoitem"
  }, rest), /*#__PURE__*/React.createElement("span", {
    className: "ma__gen-teaser__infoitem-icon"
  }, /*#__PURE__*/React.createElement(IconCalendar, {
    width: 15,
    height: 15
  })), /*#__PURE__*/React.createElement(EventTime, eventProps)), /*#__PURE__*/React.createElement(LinkDropdown, dropdownProps));
};

GenTeaserEvent.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The start date & time of the event  */
  startDate: PropTypes.string,

  /** The end date & time of the event  */
  endDate: PropTypes.string,

  /** The address of the event */
  location: PropTypes.string,

  /** Any details about the event */
  details: PropTypes.string,

  /** What type of calendars you would like users to be able to add to.
   'google', 'yahoo', and 'outlookcom' if passed will render as specific
   formats, all others render as base ics format.
   */
  calendars: PropTypes.arrayOf(PropTypes.string),

  /** The title of the event */
  title: PropTypes.string,

  /** A description of the event */
  description: PropTypes.string
} : {};
export default GenTeaserEvent;