mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-05 23:43:57 +00:00
asharonbaltazar
51c31adaf1
* 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`
85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
// 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>
|
|
</>
|
|
);
|
|
};
|