/** @jsx jsx */ import React from "react"; import PropTypes from "prop-types"; import moment from "moment-timezone"; import "./index.css"; import { css, jsx } from '@emotion/react' import Tooltip from "./tooltip"; import { isAllDay, pSBC } from "./utils/helper"; import { Manager, Reference } from 'react-popper'; export default class MultiEvent extends React.Component { constructor(props) { super(props); this.state = { startTime: moment(this.props.startTime), endTime: moment(this.props.endTime), color: this.props.color, darkColor: pSBC(-0.35, this.props.color), showTooltip: false, } this.state.allDay = isAllDay(this.state.startTime, this.state.endTime); this.toggleTooltip = this.toggleTooltip.bind(this); this.closeTooltip = this.closeTooltip.bind(this); } closeTooltip() { this.setState({showTooltip: false}); } toggleTooltip() { this.setState({showTooltip: !this.state.showTooltip}); } render() { const leftArrow = css` margin-left: 8px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; &:before { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-right: 8px solid ${this.state.color}; border-top: 13px solid transparent; border-bottom: 13px solid transparent; } &:hover::before { cursor: pointer; border-right-color: ${this.state.darkColor}; } `; const rightArrow = css` margin-right: 8px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; &:after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-left: 8px solid ${this.state.color}; border-top: 13px solid transparent; border-bottom: 13px solid transparent; } &:hover::after { cursor: pointer; border-left-color: ${this.state.darkColor}; } `; return ( <div className="event" tabIndex="0" onBlur={this.closeTooltip} css={css` width: ${'calc(' + this.props.length + '00% + ' + (this.props.length - 1) + 'px)'}; &:focus { outline: none; } position: relative; `} > <Manager> <Reference> {({ref}) => ( <div css={[css` width: ${'calc(100% - ' + 8 * (this.props.arrowLeft + this.props.arrowRight) + 'px)'}; border-radius: 3px; background: ${this.state.color}; &:hover { background: ${this.state.darkColor}; } ${this.props.arrowLeft && leftArrow} ${this.props.arrowRight && rightArrow} `, this.props.multiEventStyles]} onClick={this.toggleTooltip} ref={ref} > <div className="event-text" css={{ padding: '3px 0px', color: 'white', marginLeft: this.props.arrowLeft ? '2px' : '5px', marginRight: this.props.arrowRight ? '0px' : '5px', overflowX: 'hidden', whiteSpace: 'nowrap', position: 'relative', textAlign: 'left', '&:hover': { cursor: 'pointer', }, }} > { this.state.allDay ? "" : this.state.startTime.format("h:mma ") } <span css={{fontWeight: "500"}}> {this.props.name} </span> </div> </div> )} </Reference> <Tooltip name={this.props.name} startTime={moment(this.props.startTime)} endTime={moment(this.props.endTime)} description={this.props.description} location={this.props.location} tooltipStyles={this.props.tooltipStyles} showTooltip={this.state.showTooltip} closeTooltip={this.closeTooltip} calendarName={this.props.calendarName} /> </Manager> </div> ) } } MultiEvent.propTypes = { name: PropTypes.string.isRequired, startTime: PropTypes.instanceOf(moment).isRequired, endTime: PropTypes.instanceOf(moment).isRequired, length: PropTypes.number, description: PropTypes.string, location: PropTypes.string, calendarName: PropTypes.string, tooltipStyles: PropTypes.oneOfType([ PropTypes.object, PropTypes.instanceOf(css), ]), multiEventStyles: PropTypes.oneOfType([ PropTypes.object, PropTypes.instanceOf(css), ]), color: PropTypes.string, arrowLeft: PropTypes.bool, arrowRight: PropTypes.bool, } MultiEvent.defaultProps = { color: '#4786ff', length: 1, arrowLeft: false, arrowRight: false, }