[added] edge detection for event popup

komori1013 · Oct 29, 2015 · d98af8d · d98af8d
1 parent 69b092d
commit d98af8d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 13 deletions.
diff --git a/src/Month.jsx b/src/Month.jsx
@@ -288,16 +288,12 @@ let MonthView = React.createClass({
         onHide={() => this.setState({ overlay: null })}
       >
         <Popup
+          {...this.props}
           position={overlay.position}
           events={overlay.events}
           slotStart={overlay.date}
           slotEnd={overlay.end}
-          selected={this.props.selected}
           onSelect={this._selectEvent}
-          eventPropGetter={this.props.eventPropGetter}
-          startAccessor={this.props.startAccessor}
-          endAccessor={this.props.endAccessor}
-          titleAccessor={this.props.titleAccessor}
         />
       </Overlay>
     )

diff --git a/src/Popup.jsx b/src/Popup.jsx
@@ -1,22 +1,58 @@
 import React from 'react';
 import EventCell from './EventCell';
 import { isSelected } from './utils/selection';
+import localizer from './localizer';
+import getOffset from 'dom-helpers/query/offset';
+import getScrollTop from 'dom-helpers/query/scrollTop';
+import getScrollLeft from 'dom-helpers/query/scrollLeft';
 
 class Popup extends React.Component {
-  render() {
-    let { events, selected, ...props } = this.props;
 
-    let { left, width, top } = this.props.position;
+  componentDidMount(){
+    let { top, left, width, height } = getOffset(this.refs.root)
+      , 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 + 5
+      if (right > viewRight)
+        leftOffset = right - viewRight + 5
+
+      this.setState({ topOffset, leftOffset })
+    }
+  }
+
+  render() {
+    let { events, selected, eventComponent, ...props } = this.props;
 
-    top += 20;
+    let { left, width, top } = this.props.position
+      , topOffset = (this.state || {}).topOffset || 0
+      , leftOffset = (this.state || {}).leftOffset || 0;
 
-    let style = { left, top, minWidth: width + (width / 2) }
+    let style = {
+      top: top - topOffset,
+      left: left - leftOffset,
+      minWidth: width + (width / 2)
+    }
 
     return (
-      <div style={style} className='rbc-overlay'>
+      <div ref='root' style={style} className='rbc-overlay'>
+        <div className='rbc-overlay-header'>
+          { localizer.format(props.slotStart, props.dayHeaderFormat, props.culture) }
+        </div>
         {
           events.map((event, idx) =>
-            <EventCell key={idx} {...props} event={event} selected={isSelected(event, selected)} />
+            <EventCell key={idx}
+              {...props}
+              event={event}
+              component={eventComponent}
+              selected={isSelected(event, selected)}
+            />
           )
         }
       </div>

diff --git a/src/less/month.less b/src/less/month.less
@@ -108,7 +108,6 @@
 
 .rbc-overlay {
   position: absolute;
-  //width: 400;
   z-index: @event-zindex + 1;
   border: 1px solid #e5e5e5;
   background-color: #fff;
@@ -119,3 +118,9 @@
     margin-top: 1px;
   }
 }
+
+.rbc-overlay-header {
+  border-bottom: 1px solid #e5e5e5;
+  margin: -10px -10px 5px -10px ;
+  padding: 2px 10px;
+}