@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
98 lines (97 loc) • 3.54 kB
JavaScript
const _excluded = ["calendars", "startDate", "endDate", "details", "location", "description", "title"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
/**
* 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, _excluded);
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: 20,
height: 20
})), /*#__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;