Swap Event Data (#446)

* use zustand store in `ContextMenuContext` * add `withDivider` prop to context menu `Option` * add `isDisabled` prop to `Option` * create `eventIdSwapping` store * create swapping context menu options * fix `key` in ContextMenu * address `tanstack-eslint` errors * create initial `requestEventSwap` event * create initial `swapEvents` action * use `swapEvents` in `EventBlock` * move from `emitError` to `logAxiosError` * remove extra curly brace from Copy ID * add `clearEventId` func * finalize context menu swapping logic * write optimistic swapping logic * remove unused import and type out handler in `rundownController` * create `rundownSwapValidator` * move index increase to `EventBlock` * move swapping logic from `id` to `index` * create `swapEvents` endpoint * move `useEventIdSwapping` hook into its own file * revert to using event `id` * logic now uses indexes to swap events * add `todo` to `swapEvents` * revert index increment * create `swapOntimeEvents` and export in `index.ts` * use `swapOntimeEvents` in frontend & server * update import path * remove extra `setCached`
2026-08-16 12:53:32 +00:00 · 2023-08-15 16:04:53 -04:00
parent a46a0e1631
commit 51c31adaf1
17 changed files with 363 additions and 123 deletions
@@ -0,0 +1,9 @@
+.contextMenuButton {
+  position: absolute;
+  cursor: pointer;
+}
+
+.contextMenuBackdrop {
+  position: fixed;
+  inset: 0;
+}
@@ -0,0 +1,84 @@
+// logic (with some modifications) culled from:
+// https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
+
+import { Fragment, ReactElement } from 'react';
+import { Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import { IconType } from '@react-icons/all-files';
+import { create } from 'zustand';
+
+import style from './ContextMenu.module.scss';
+
+type ContextMenuCoords = {
+  x: number;
+  y: number;
+};
+
+export type Option = {
+  label: string;
+  icon: IconType;
+  onClick: () => void;
+  withDivider?: boolean;
+  isDisabled?: boolean;
+};
+
+type ContextMenuStore = {
+  coords: ContextMenuCoords;
+  options: Option[];
+  isOpen: boolean;
+  setContextMenu: (coords: ContextMenuCoords, options: Option[]) => void;
+  setIsOpen: (newIsOpen: boolean) => void;
+};
+
+export const useContextMenuStore = create<ContextMenuStore>((set) => ({
+  coords: { x: 0, y: 0 },
+  options: [],
+  isOpen: false,
+  setContextMenu: (coords, options) => set(() => ({ coords, options, isOpen: true })),
+  setIsOpen: (newIsOpen) => set(() => ({ isOpen: newIsOpen })),
+}));
+
+interface ContextMenuProps {
+  // ReactElement type required due to early `return` (line 51) returning {children}
+  children: ReactElement;
+}
+
+export const ContextMenu = ({ children }: ContextMenuProps) => {
+  const { coords, options, isOpen, setIsOpen } = useContextMenuStore();
+
+  const onClose = () => {
+    return setIsOpen(false);
+  };
+
+  if (!isOpen) {
+    return children;
+  }
+
+  return (
+    <>
+      {children}
+      <div className={style.contextMenuBackdrop} />
+      <Menu isOpen gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
+        <MenuButton
+          className={style.contextMenuButton}
+          aria-hidden
+          w={1}
+          h={1}
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+        <MenuList>
+          {options.map(({ label, icon: Icon, onClick, withDivider, isDisabled }, i) => (
+            <Fragment key={label}>
+              {withDivider && <MenuDivider />}
+              <MenuItem key={i} icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
+                {label}
+              </MenuItem>
+            </Fragment>
+          ))}
+        </MenuList>
+      </Menu>
+    </>
+  );
+};