sportstg-bluekit/src/components/Calendar/EventWrapper/EventWrapper.js


import React from 'react'
import PropTypes from 'prop-types'
import cn from 'classnames'
import styles from './EventWrapper.scss'
import moment from 'moment'

const EventWrapper = ({
  className,
  start,
  end,
  title,
  isShowTime,
  styles
}) => {

  const getDateFormat = () => {
    return {
      start: moment(start).format('hA'),
      end: moment(end).format('hA'),
    }
  }
  const inlineStyles = { ...styles }

  return (
    <div className={cn(styles.eventWrapper, className)} style={inlineStyles}>
      {(isShowTime) &&
        <div className={styles.time}>
          {getDateFormat().start} — {getDateFormat().end}
        </div>
      }
      <div className={styles.title}>{title}</div>
    </div>
  );
}

EventWrapper.propTypes = {
  start: PropTypes.instanceOf(Date).isRequired,
  end: PropTypes.instanceOf(Date).isRequired,
  title: PropTypes.string.isRequired,
  isShowTime: PropTypes.bool,
  styles: PropTypes.shape({
    fontColor: PropTypes.string,
    fontSize: PropTypes.oneOf(['small', 'large']),
    padding: PropTypes.string,
    borderWidth: PropTypes.string,
    borderColor: PropTypes.string,
    borderStyle: PropTypes.oneOf(['solid', 'dashed']),
    backgroundColor: PropTypes.string,
    borderRadius: PropTypes.oneOf([ 5, 10]),
  })
};

EventWrapper.defaultProps = {
  start: '2017-11-17 12:30:00',
  end: '2017-11-17 14:30:00',
  title: 'Title',
  isShowTime: false,
  styles: {
    fontColor: 13,
    fontSize: 'small',
    padding: 10,
    borderWidth: 1,
    borderColor: '#177f3d',
    borderStyle: 'solid',
    borderRadius: 5,
    backgroundColor: '#dff0d8',
  }
};

export default EventWrapper