components.widgets.Calendar.CalendarEvent.jsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
import React from 'react'
import get from 'lodash/get'
import dayjs from 'dayjs'
import classNames from 'classnames'
import PropTypes from 'prop-types'

import { eventLessHour, isAllDay } from './utils'

const mapStyle = (color, lessHour, { height, top, width } = {}) => ({
    position: 'absolute',
    height: `${height}%`,
    top: `${top}%`,
    width: `${width}%`,
    backgroundColor: color,
    padding: lessHour ? '0 5px' : '2px 5px',
    lineHeight: lessHour ? '1' : '1.5',
    flexFlow: lessHour ? 'nowrap' : 'none',
})

const monthEventStyle = color => ({
    backgroundColor: color,
})

const DEFAULT_BG_COLOR = '#3174ad'

export function CalendarEvent({
    style,
    event,
    accessors,
    cellColorAccessor,
    setResolve,
    onSelectEvent,
    dispatch,
}) {
    const tooltip = accessors.tooltip(event)
    const title = accessors.title(event)
    const color = event[cellColorAccessor] || DEFAULT_BG_COLOR
    const lessHour = eventLessHour(get(event, 'date'), get(event, 'step'))
    const begin = get(event, 'date.begin')
    const end = get(event, 'date.end')
    const disabled = get(event, 'disabled', false)

    const handleClick = () => {
        setResolve({ id: get(event, 'id') })
        dispatch(onSelectEvent)
    }

    return (
        
            
                {title}
            
            
                {!isAllDay(begin, end) ? dayjs(begin).format('HH:mm') : null}
            
        
    )
}

CalendarEvent.propTypes = {
    style: PropTypes.object,
    event: PropTypes.object,
    accessors: PropTypes.object,
    cellColorAccessor: PropTypes.any,
    setResolve: PropTypes.func,
    onSelectEvent: PropTypes.func,
    dispatch: PropTypes.func,
}

export default CalendarEvent