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

React versions of Mayflower design system UI components

/**
 * OperationalHours module.
 * @module @massds/mayflower-react/OperationalHours
 * @requires module:@massds/mayflower-assets/scss/01-atoms/operational-hours
 */
import React from "react";
import PropTypes from "prop-types";

const getDayOfWeek = () => {
  const d = new Date();
  const weekday = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
  return weekday[d.getDay()];
};

const currentDay = getDayOfWeek();

const OperationalHours = props => {
  const listing = props.listKey ? '--listing' : '';
  return /*#__PURE__*/React.createElement("div", {
    className: "ma__operational-hours"
  }, /*#__PURE__*/React.createElement("table", {
    className: "ma__operational-hours-table" + listing
  }, /*#__PURE__*/React.createElement("tbody", null, props.hours && Object.entries(props.hours).map((_ref) => {
    let key = _ref[0],
        value = _ref[1];
    const active = props.showActive && key === props.currentDay ? '--active' : '';
    const rowKey = props.listKey ? props.listKey + "-row-" + key : null;
    const status = typeof value.status !== 'undefined' && value.status !== null ? value.status : true;
    let time = '';
    const dateFormat = new Intl.DateTimeFormat('en-US', {
      hour12: true,
      hour: 'numeric',
      minute: 'numeric'
    });

    if (status === false) {
      time = 'Closed';
    } else {
      time = dateFormat.format(value.start) + " - " + dateFormat.format(value.end);
    }

    return /*#__PURE__*/React.createElement("tr", {
      key: rowKey,
      className: "ma__operational-hours-row" + active
    }, /*#__PURE__*/React.createElement("td", {
      className: "ma__operational-hours-day"
    }, key), /*#__PURE__*/React.createElement("td", {
      className: "ma__operational-hours-time"
    }, time));
  }))));
};

OperationalHours.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An object that is keyed by the days of the week. Each day
      contains the following:
      status: represents an open or closed day of business for the week. If true, the business is open.
      start: The time the business opens.
      end: The time the business closes. */
  hours: PropTypes.shape({
    monday: PropTypes.shape({
      status: PropTypes.bool,
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    tuesday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    wednesday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    thursday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    friday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    saturday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    sunday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    })
  }).isRequired,

  /** Whether to show if currently active or not. */
  showActive: PropTypes.bool,

  /** A unique string used for generating the display of days for week. */
  listKey: PropTypes.string.isRequired,

  /** Current day for the week that gets highlighted. */
  currentDay: PropTypes.string
} : {};
OperationalHours.defaultProps = {
  showActive: true,
  currentDay: currentDay
};
export default OperationalHours;