diff --git a/package.json b/package.json
index 5f4f4e377..3d361a492 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
"moment": "^2.29.4",
"moment-timezone": "^0.5.34",
"prop-types": "^15.8.1",
- "react-overlays": "^4.1.1",
+ "react-overlays": "^5.2.0",
"uncontrollable": "^7.2.1"
},
"bugs": {
diff --git a/src/Month.js b/src/Month.js
index 2bf573da9..997f48fd8 100644
--- a/src/Month.js
+++ b/src/Month.js
@@ -9,8 +9,9 @@ import { notify } from './utils/helpers'
import getPosition from 'dom-helpers/position'
import * as animationFrame from 'dom-helpers/animationFrame'
-import Popup from './Popup'
-import Overlay from 'react-overlays/Overlay'
+/* import Popup from './Popup'
+import Overlay from 'react-overlays/Overlay' */
+import PopOverlay from './PopOverlay'
import DateContentRow from './DateContentRow'
import Header from './Header'
import DateHeader from './DateHeader'
@@ -204,11 +205,40 @@ class MonthView extends React.Component {
}
renderOverlay() {
- let overlay = (this.state && this.state.overlay) || {}
- let { accessors, localizer, components, getters, selected, popupOffset } =
- this.props
+ let overlay = this.state?.overlay ?? {}
+ let {
+ accessors,
+ localizer,
+ components,
+ getters,
+ selected,
+ popupOffset,
+ handleDragStart,
+ } = this.props
+
+ const onHide = () => this.setState({ overlay: null })
return (
+
+ )
+
+ /* return (
)}
- )
+ ) */
}
measureRowLimit() {
diff --git a/src/PopOverlay.js b/src/PopOverlay.js
new file mode 100644
index 000000000..3499bec62
--- /dev/null
+++ b/src/PopOverlay.js
@@ -0,0 +1,95 @@
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
+import { Overlay } from 'react-overlays'
+import Popup from './Popup'
+
+function CalOverlay({
+ containerRef,
+ popupOffset = 5,
+ overlay,
+ accessors,
+ localizer,
+ components,
+ getters,
+ selected,
+ handleSelectEvent,
+ handleDoubleClickEvent,
+ handleKeyPressEvent,
+ handleDragStart,
+ onHide,
+ overlayDisplay,
+}) {
+ const popperRef = useRef(null)
+ if (!overlay.position) return null
+
+ let offset
+ if (!isNaN(popupOffset)) {
+ offset = { x: popupOffset, y: popupOffset }
+ }
+
+ const { position, events, date, end } = overlay
+ return (
+
+ {({ props }) => (
+
+ )}
+
+ )
+}
+
+const PopOverlay = React.forwardRef((props, ref) => (
+
+))
+
+PopOverlay.propTypes = {
+ popupOffset: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+ ]),
+ overlay: PropTypes.shape({
+ position: PropTypes.object,
+ events: PropTypes.array,
+ date: PropTypes.instanceOf(Date),
+ end: PropTypes.instanceOf(Date),
+ }),
+ accessors: PropTypes.object.isRequired,
+ localizer: PropTypes.object.isRequired,
+ components: PropTypes.object.isRequired,
+ getters: PropTypes.object.isRequired,
+ selected: PropTypes.object,
+ handleSelectEvent: PropTypes.func,
+ handleDoubleClickEvent: PropTypes.func,
+ handleKeyPressEvent: PropTypes.func,
+ handleDragStart: PropTypes.func,
+ onHide: PropTypes.func,
+ overlayDisplay: PropTypes.func,
+}
+
+export default PopOverlay
diff --git a/src/Popup.js b/src/Popup.js
index a19fb3cf7..5d14d31f2 100644
--- a/src/Popup.js
+++ b/src/Popup.js
@@ -1,136 +1,125 @@
+import React, { useLayoutEffect } from 'react'
import PropTypes from 'prop-types'
-import React from 'react'
import getOffset from 'dom-helpers/offset'
-import getScrollTop from 'dom-helpers/scrollTop'
-import getScrollLeft from 'dom-helpers/scrollLeft'
+import useClickOutside from './hooks/useClickOutside'
import EventCell from './EventCell'
import { isSelected } from './utils/selection'
-class Popup extends React.Component {
- componentDidMount() {
- let { popupOffset = 5, popperRef } = this.props,
- { top, left, width, height } = getOffset(popperRef.current),
- viewBottom = window.innerHeight + getScrollTop(window),
- viewRight = window.innerWidth + getScrollLeft(window),
- bottom = top + height,
- right = left + width
-
- if (bottom > viewBottom || right > viewRight) {
- let topOffset, leftOffset
-
- if (bottom > viewBottom)
- topOffset = bottom - viewBottom + (popupOffset.y || +popupOffset || 0)
- if (right > viewRight)
- leftOffset = right - viewRight + (popupOffset.x || +popupOffset || 0)
+/**
+ * Changes to react-overlays cause issue with auto positioning,
+ * so we need to manually calculate the position of the popper,
+ * and constrain it to the Month container.
+ */
+function getPosition({ target, offset, container, box }) {
+ const { top, left, width, height } = getOffset(target)
+ const {
+ top: cTop,
+ left: cLeft,
+ width: cWidth,
+ height: cHeight,
+ } = getOffset(container)
+ const { width: bWidth, height: bHeight } = getOffset(box)
+ const viewBottom = cTop + cHeight
+ const viewRight = cLeft + cWidth
+ const bottom = top + bHeight
+ const right = left + bWidth
+ const { x, y } = offset
+ const topOffset = bottom > viewBottom ? top - bHeight - y : top + y + height
+ const leftOffset = right > viewRight ? left + x - bWidth + width : left + x
- this.setState({ topOffset, leftOffset }) //eslint-disable-line
- }
+ return {
+ topOffset,
+ leftOffset,
}
+}
- render() {
- let {
- events,
- selected,
- getters,
- accessors,
- components,
- onSelect,
- onDoubleClick,
- onKeyPress,
- slotStart,
- slotEnd,
- localizer,
- popperRef,
- } = this.props
-
- let { width } = this.props.position,
- topOffset = (this.state || {}).topOffset || 0,
- leftOffset = (this.state || {}).leftOffset || 0
-
- let style = {
- top: -topOffset,
- left: -leftOffset,
- minWidth: width + width / 2,
- }
+function Pop({
+ containerRef,
+ accessors,
+ getters,
+ selected,
+ components,
+ localizer,
+ position,
+ show,
+ events,
+ slotStart,
+ slotEnd,
+ onSelect,
+ onDoubleClick,
+ onKeyPress,
+ handleDragStart,
+ popperRef,
+ target,
+ offset,
+}) {
+ useClickOutside({ ref: popperRef, callback: show })
+ useLayoutEffect(() => {
+ const { topOffset, leftOffset } = getPosition({
+ target,
+ offset,
+ container: containerRef.current,
+ box: popperRef.current,
+ })
+ popperRef.current.style.top = `${topOffset}px`
+ popperRef.current.style.left = `${leftOffset}px`
+ }, [offset.x, offset.y, target])
- return (
-
-
- {localizer.format(slotStart, 'dayHeaderFormat')}
-
- {events.map((event, idx) => (
-
this.props.handleDragStart(event)}
- onDragEnd={() => this.props.show()}
- />
- ))}
-
+
+ {localizer.format(slotStart, 'dayHeaderFormat')}
+
+ {events.map((event, idx) => (
+
handleDragStart(event)}
+ onDragEnd={() => show()}
+ />
+ ))}
+