"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/common/src/common/Popover.tsx" between
fullcalendar-5.9.0.tar.gz and fullcalendar-5.10.0.tar.gz

About: FullCalendar is a full-sized drag & drop JavaScript event calendar.

Popover.tsx  (fullcalendar-5.9.0):Popover.tsx  (fullcalendar-5.10.0)
import { Dictionary } from '../options' import { Dictionary } from '../options'
import { computeClippedClientRect } from '../util/dom-geom' import { computeClippedClientRect } from '../util/dom-geom'
import { applyStyle, elementClosest, getEventTargetViaRoot } from '../util/dom-m anip' import { applyStyle, elementClosest, getEventTargetViaRoot, getUniqueDomId } fro m '../util/dom-manip'
import { createElement, ComponentChildren, Ref, createPortal } from '../vdom' import { createElement, ComponentChildren, Ref, createPortal } from '../vdom'
import { BaseComponent, setRef } from '../vdom-util' import { BaseComponent, setRef } from '../vdom-util'
export interface PopoverProps { export interface PopoverProps {
elRef?: Ref<HTMLElement> elRef?: Ref<HTMLElement>
id: string
title: string title: string
extraClassNames?: string[] extraClassNames?: string[]
extraAttrs?: Dictionary extraAttrs?: Dictionary
parentEl: HTMLElement parentEl: HTMLElement
alignmentEl: HTMLElement alignmentEl: HTMLElement
alignGridTop?: boolean alignGridTop?: boolean
children?: ComponentChildren children?: ComponentChildren
onClose?: () => void onClose?: () => void
} }
const PADDING_FROM_VIEWPORT = 10 const PADDING_FROM_VIEWPORT = 10
export class Popover extends BaseComponent<PopoverProps> { export class Popover extends BaseComponent<PopoverProps> {
private rootEl: HTMLElement private rootEl: HTMLElement
state = {
titleId: getUniqueDomId(),
}
render() { render() {
let { theme } = this.context let { theme, options } = this.context
let { props } = this let { props, state } = this
let classNames = [ let classNames = [
'fc-popover', 'fc-popover',
theme.getClass('popover'), theme.getClass('popover'),
].concat( ].concat(
props.extraClassNames || [], props.extraClassNames || [],
) )
return createPortal( return createPortal(
<div className={classNames.join(' ')} {...props.extraAttrs} ref={this.hand <div
leRootEl}> id={props.id}
className={classNames.join(' ')}
aria-labelledby={state.titleId}
{...props.extraAttrs}
ref={this.handleRootEl}
>
<div className={'fc-popover-header ' + theme.getClass('popoverHeader')}> <div className={'fc-popover-header ' + theme.getClass('popoverHeader')}>
<span className="fc-popover-title"> <span className="fc-popover-title" id={state.titleId}>
{props.title} {props.title}
</span> </span>
<span className={'fc-popover-close ' + theme.getIconClass('close')} on <span
Click={this.handleCloseClick} /> className={'fc-popover-close ' + theme.getIconClass('close')}
title={options.closeHint}
onClick={this.handleCloseClick}
/>
</div> </div>
<div className={'fc-popover-body ' + theme.getClass('popoverContent')}> <div className={'fc-popover-body ' + theme.getClass('popoverContent')}>
{props.children} {props.children}
</div> </div>
</div>, </div>,
props.parentEl, props.parentEl,
) )
} }
componentDidMount() { componentDidMount() {
document.addEventListener('mousedown', this.handleDocumentMousedown) document.addEventListener('mousedown', this.handleDocumentMouseDown)
document.addEventListener('keydown', this.handleDocumentKeyDown)
this.updateSize() this.updateSize()
} }
componentWillUnmount() { componentWillUnmount() {
document.removeEventListener('mousedown', this.handleDocumentMousedown) document.removeEventListener('mousedown', this.handleDocumentMouseDown)
document.removeEventListener('keydown', this.handleDocumentKeyDown)
} }
handleRootEl = (el: HTMLElement | null) => { handleRootEl = (el: HTMLElement | null) => {
this.rootEl = el this.rootEl = el
if (this.props.elRef) { if (this.props.elRef) {
setRef(this.props.elRef, el) setRef(this.props.elRef, el)
} }
} }
// Triggered when the user clicks *anywhere* in the document, for the autoHide feature // Triggered when the user clicks *anywhere* in the document, for the autoHide feature
handleDocumentMousedown = (ev) => { handleDocumentMouseDown = (ev) => {
// only hide the popover if the click happened outside the popover // only hide the popover if the click happened outside the popover
const target = getEventTargetViaRoot(ev) as HTMLElement const target = getEventTargetViaRoot(ev) as HTMLElement
if (!this.rootEl.contains(target)) { if (!this.rootEl.contains(target)) {
this.handleCloseClick() this.handleCloseClick()
} }
} }
handleDocumentKeyDown = (ev) => {
if (ev.key === 'Escape') {
this.handleCloseClick()
}
}
handleCloseClick = () => { handleCloseClick = () => {
let { onClose } = this.props let { onClose } = this.props
if (onClose) { if (onClose) {
onClose() onClose()
} }
} }
private updateSize() { private updateSize() {
let { isRtl } = this.context let { isRtl } = this.context
let { alignmentEl, alignGridTop } = this.props let { alignmentEl, alignGridTop } = this.props
 End of changes. 11 change blocks. 
11 lines changed or deleted 31 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)