fix(calendar): update dialog positioning logic

Author: nicholaschiang

components/calendar/dialog/surface.tsx

@@ -34,7 +34,7 @@ export default function DialogSurface({
   offset,
   children,
 }: DialogSurfaceProps): JSX.Element {
-  const { editing, setDialog, dragging, setRnd } = useCalendarState();
+  const { editing, editingLeftPercent, editingWidthPercent, setDialog, dragging, setRnd } = useCalendarState();
 
   const measured = useRef<boolean>(false);
   const [visible, setVisible] = useState<boolean>(false);
@@ -57,8 +57,11 @@ export default function DialogSurface({
   const [measureRef, bounds] = useMeasure({ polyfill });
 
   const rndPosition = useMemo(
-    () => getPosition(editing.time.from, rndWidth + RND_MARGIN),
-    [editing.time.from, rndWidth]
+    () => {
+      const { x, y } = getPosition(editing.time.from, rndWidth + RND_MARGIN);
+      return { y, x: x + editingLeftPercent * rndWidth };
+    },
+    [editing.time.from, rndWidth, editingLeftPercent]
   );
   const rndHeight = useMemo(() => getHeight(editing.time), [editing.time]);
 
@@ -67,9 +70,9 @@ export default function DialogSurface({
     return visible && !dragging ? x : x + 12;
   }, [offset.x, dragging, visible, rndPosition.x, bounds.width]);
   const onRight = useMemo(() => {
-    const x = offset.x + rndPosition.x + rndWidth + PREVIEW_MARGIN;
+    const x = offset.x + rndPosition.x + rndWidth * editingWidthPercent + PREVIEW_MARGIN;
     return visible && !dragging ? x : x - 12;
-  }, [offset.x, dragging, visible, rndPosition.x, rndWidth]);
+  }, [offset.x, dragging, visible, rndPosition.x, rndWidth, editingWidthPercent]);
 
   const alignedTop = useMemo(() => offset.y + rndPosition.y, [
     offset.y,
@@ -96,7 +99,7 @@ export default function DialogSurface({
 
   const props = useSpring({
     onRest: () => (!visible && measured.current ? setDialog(false) : undefined),
-    left: rndPosition.x < rndWidth * 3 ? onRight : onLeft,
+    left: onRight + bounds.width < window.innerWidth ? onRight : onLeft,
     config: { tension: 250, velocity: 50 },
     immediate: !measured.current || dragging,
     top,

components/calendar/index.tsx

@@ -204,6 +204,8 @@ export default function Calendar({
   // the body scrollbar disappear, moving the `fixed` position values).
   const [offset, setOffset] = useState<Position>({ x: 0, y: 0 });
   const [width, setWidth] = useState<number>(0);
+  const [editingLeftPercent, setEditingLeftPercent] = useState<number>(0);
+  const [editingWidthPercent, setEditingWidthPercent] = useState<number>(0);
 
   const onEditStop = useCallback(
     (evt?: FormEvent) => {
@@ -224,6 +226,10 @@ export default function Calendar({
       editing,
       setEditing,
       onEditStop,
+      editingLeftPercent,
+      setEditingLeftPercent,
+      editingWidthPercent,
+      setEditingWidthPercent,
       rnd,
       setRnd,
       dialog,
@@ -239,6 +245,10 @@ export default function Calendar({
       editing,
       setEditing,
       onEditStop,
+      editingLeftPercent,
+      setEditingLeftPercent,
+      editingWidthPercent,
+      setEditingWidthPercent,
       rnd,
       setRnd,
       dialog,

components/calendar/meetings/item.tsx

@@ -55,6 +55,8 @@ export default function MeetingItem({
   const {
     editing,
     setEditing,
+    setEditingLeftPercent,
+    setEditingWidthPercent,
     rnd,
     setRnd,
     dialog,
@@ -90,6 +92,8 @@ export default function MeetingItem({
           if (mouseMovement > 10) {
             removeListeners();
             setEditing(meeting);
+            setEditingLeftPercent(leftPercent);
+            setEditingWidthPercent(widthPercent);
             setEventTarget('middle');
             setEventData({
               screenX: e.screenX,
@@ -107,6 +111,8 @@ export default function MeetingItem({
           removeListeners();
           setRnd(false);
           setEditing(meeting);
+          setEditingLeftPercent(leftPercent);
+          setEditingWidthPercent(widthPercent);
           setDialogPage(DialogPage.Display);
           setDialog(true);
         };
@@ -126,6 +132,8 @@ export default function MeetingItem({
           onMouseDown={(evt) => {
             evt.stopPropagation();
             setEditing(meeting);
+            setEditingLeftPercent(leftPercent);
+            setEditingWidthPercent(widthPercent);
             setEventTarget('bottom');
             setEventData({
               screenX: evt.screenX,
@@ -143,6 +151,8 @@ export default function MeetingItem({
           onMouseDown={(evt) => {
             evt.stopPropagation();
             setEditing(meeting);
+            setEditingLeftPercent(leftPercent);
+            setEditingWidthPercent(widthPercent);
             setEventTarget('top');
             setEventData({
               screenX: evt.screenX,

components/calendar/state.ts

@@ -1,6 +1,6 @@
 import { FormEvent, createContext, useContext } from 'react';
 
-import { Callback, CallbackParam } from 'lib/model/callback';
+import { Callback } from 'lib/model/callback';
 import { Meeting } from 'lib/model/meeting';
 import { MeetingsQuery } from 'lib/model/query/meetings';
 
@@ -17,6 +17,10 @@ export interface CalendarState {
   editing: Meeting;
   setEditing: Callback<Meeting>;
   onEditStop: (evt?: FormEvent) => void;
+  editingLeftPercent: number;
+  setEditingLeftPercent: Callback<number>;
+  editingWidthPercent: number;
+  setEditingWidthPercent: Callback<number>;
   rnd: boolean;
   setRnd: Callback<boolean>;
   dialog: boolean;
@@ -31,15 +35,19 @@ export interface CalendarState {
 export const CalendarStateContext = createContext<CalendarState>({
   start: new MeetingsQuery().from,
   editing: new Meeting(),
-  setEditing: (param: CallbackParam<Meeting>) => {},
-  onEditStop: (evt?: FormEvent) => {},
+  setEditing: () => {},
+  onEditStop: () => {},
+  editingLeftPercent: 0,
+  setEditingLeftPercent: () => {},
+  editingWidthPercent: 0,
+  setEditingWidthPercent: () => {},
   rnd: false,
-  setRnd: (param: CallbackParam<boolean>) => {},
+  setRnd: () => {},
   dialog: false,
-  setDialog: (param: CallbackParam<boolean>) => {},
-  setDialogPage: (param: CallbackParam<DialogPage>) => {},
+  setDialog: () => {},
+  setDialogPage: () => {},
   dragging: false,
-  setDragging: (param: CallbackParam<boolean>) => {},
+  setDragging: () => {},
   display: 'Week',
   setDisplay: () => {},
 });