diff --git a/src/core/align.ts b/src/core/align.ts index 1032b43..595b5ee 100644 --- a/src/core/align.ts +++ b/src/core/align.ts @@ -19,7 +19,7 @@ export interface IAlignment { export function alignContextElement( element: HTMLElement, relativeTo: HTMLElement | { x: number; y: number }, - alignment: IAlignment + alignment: IAlignment, ): void { function getOffset(alignment: string, name: string) { const added = name + ' +'; @@ -76,10 +76,7 @@ export function alignContextElement( const offset = getOffset(alignment.centerY, 'bottom'); element.style.top = rt + (rh - eh / 2) + offset + 'px'; } else { - throw new Error( - 'illegal centerY alignment: ' + - JSON.stringify(alignment.centerY) - ); + throw new Error('illegal centerY alignment: ' + JSON.stringify(alignment.centerY)); } } else if (alignment.top) { if (alignment.top.startsWith('centerY')) { @@ -95,9 +92,7 @@ export function alignContextElement( const offset = getOffset(alignment.top, 'bottom'); element.style.top = rt + rh + offset + 'px'; } else { - throw new Error( - 'illegal top alignment: ' + JSON.stringify(alignment.top) - ); + throw new Error('illegal top alignment: ' + JSON.stringify(alignment.top)); } } else if (alignment.bottom) { if (alignment.bottom.startsWith('centerY')) { @@ -113,9 +108,7 @@ export function alignContextElement( const offset = getOffset(alignment.bottom, 'bottom'); element.style.top = rb - eh + offset + 'px'; } else { - throw new Error( - 'illegal bottom alignment: ' + JSON.stringify(alignment.bottom) - ); + throw new Error('illegal bottom alignment: ' + JSON.stringify(alignment.bottom)); } } else { throw new Error('y-alignment not specified'); @@ -135,10 +128,7 @@ export function alignContextElement( const offset = getOffset(alignment.centerX, 'right'); element.style.left = rl + (rw - ew / 2) + offset + 'px'; } else { - throw new Error( - 'illegal centerX alignment: ' + - JSON.stringify(alignment.centerX) - ); + throw new Error('illegal centerX alignment: ' + JSON.stringify(alignment.centerX)); } } else if (alignment.left) { if (alignment.left.startsWith('centerX')) { @@ -151,9 +141,7 @@ export function alignContextElement( const offset = getOffset(alignment.left, 'right'); element.style.left = rl + rw + offset + 'px'; } else { - throw new Error( - 'illegal left alignment: ' + JSON.stringify(alignment.left) - ); + throw new Error('illegal left alignment: ' + JSON.stringify(alignment.left)); } } else if (alignment.right) { if (alignment.right.startsWith('centerX')) { @@ -166,9 +154,7 @@ export function alignContextElement( const offset = getOffset(alignment.right, 'right'); element.style.left = rr - ew + offset + 'px'; } else { - throw new Error( - 'illegal right alignment: ' + JSON.stringify(alignment.right) - ); + throw new Error('illegal right alignment: ' + JSON.stringify(alignment.right)); } } else { throw new Error('x-alignment not defined'); diff --git a/src/core/hooks.ts b/src/core/hooks.ts index b166df0..63f2cf1 100644 --- a/src/core/hooks.ts +++ b/src/core/hooks.ts @@ -14,7 +14,7 @@ import { IAlignment, alignContextElement } from './align'; class ShouldNeverHappenError extends Error {} function sleep(ms: number): Promise { - return new Promise((resolve) => setTimeout(resolve, ms)); + return new Promise(resolve => setTimeout(resolve, ms)); } /** returns a ref that is true if the component is mounted and false otherwise. Very useful for async stuff */ @@ -51,16 +51,14 @@ function useShake(ms: number): [shaking: boolean, doShake: () => void] { export function useOneTimeAsyncAction( actionFunc: () => Promise, deps: DependencyList, - initialValue: V + initialValue: V, ): [value: T | V, error: unknown | null] { - const isMounted = useRef(false); + const isMounted = useIsMountedRef(); const [value, setValue] = useState(initialValue); const [error, setError] = useState(null); useEffect(() => { - isMounted.current = true; - (async () => { try { const value = await actionFunc(); @@ -73,10 +71,6 @@ export function useOneTimeAsyncAction( setError(e); } })(); - - return () => { - isMounted.current = false; - }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [actionFunc, ...deps]); @@ -86,9 +80,9 @@ export function useOneTimeAsyncAction( /** creates a callable async function that will not double-trigger and gives a result, error message, and shaking boolean */ export function useAsyncCallback( actionFunc: ( - isMounted: MutableRefObject + isMounted: MutableRefObject, ) => Promise<{ errorMessage: string | null; result: ResultType | null }>, - deps: DependencyList + deps: DependencyList, ): [callable: () => void, result: ResultType | null, errorMessage: string | null, shaking: boolean, pending: boolean] { const isMounted = useIsMountedRef(); @@ -126,7 +120,7 @@ export function useAsyncCallback( /** creates a callable async function that does not need to return a value (or shake) */ export function useAsyncVoidCallback( actionFunc: (isMounted: MutableRefObject) => Promise, - deps: DependencyList + deps: DependencyList, ): [callable: () => void] { const [callable] = useAsyncCallback(async (isMounted: MutableRefObject) => { await actionFunc(isMounted); @@ -139,7 +133,7 @@ export function useAsyncVoidCallback( /** creates useful state variables for a button intended call a submit action */ export function useAsyncSubmitButton( actionFunc: ( - isMounted: MutableRefObject + isMounted: MutableRefObject, ) => Promise<{ errorMessage: string | null; result: ResultType | null }>, deps: DependencyList, stateTextMapping?: { @@ -147,7 +141,7 @@ export function useAsyncSubmitButton( pending?: string; error?: string; done?: string; - } + }, ): [callable: () => void, text: string, shaking: boolean, result: ResultType | null, errorMessage: string | null] { const textMapping = { ...{ @@ -169,7 +163,7 @@ export function useAsyncSubmitButton( return actionReturnValue; }, // eslint-disable-next-line react-hooks/exhaustive-deps - [...deps, actionFunc] + [...deps, actionFunc], ); const text = useMemo(() => { @@ -186,7 +180,7 @@ export function useAsyncSubmitButton( /** calls the close action when you hit escape or click outside of the ref element */ export function useActionWhenEscapeOrClickedOrContextOutsideEffect( refs: RefObject[], - actionFunc: () => void + actionFunc: () => void, ) { // have to use a ref here and not states since we can't re-assign state between mouseup and click const data = useRef< @@ -228,7 +222,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect( actionFunc(); }, - [hadMouseDown, actionFunc] + [hadMouseDown, actionFunc], ); const handleMouseDown = useCallback((event: MouseEvent) => { @@ -263,7 +257,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect( // context menu is fired on mouse-down so no need to do special checks. actionFunc(); }, - [actionFunc] + [actionFunc], ); const handleKeyDown = useCallback( @@ -275,7 +269,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect( actionFunc(); }, - [actionFunc] + [actionFunc], ); useEffect(() => { @@ -321,7 +315,7 @@ export function useAlignment( relativeToPos: { x: number; y: number } | null, alignment: IAlignment, realignDeps: DependencyList, - baseClassName: string + baseClassName: string, ): [className: string] { const [aligned, setAligned] = useState(false); @@ -342,7 +336,7 @@ export function useAlignment( /** creates useful context menu state */ export function useContextMenu( createContextMenu: (close: () => void) => ReactNode, - createContextMenuDeps: DependencyList + createContextMenuDeps: DependencyList, ): [contextMenu: ReactNode, toggle: () => void, close: () => void, open: () => void, isOpen: boolean] { const [isOpen, setIsOpen] = useState(false); @@ -354,7 +348,7 @@ export function useContextMenu( const contextMenu = useMemo(() => createContextMenu(close), [close, createContextMenu, ...createContextMenuDeps]); const toggle = useCallback(() => { - setIsOpen((oldIsOpen) => !!contextMenu && !oldIsOpen); + setIsOpen(oldIsOpen => !!contextMenu && !oldIsOpen); }, [contextMenu]); const open = useCallback(() => { setIsOpen(true); @@ -366,7 +360,7 @@ export function useContextMenu( /** creates context menu state for right-clicks */ export function useContextClickContextMenu( createContextMenu: (alignment: IAlignment, relativeToPos: { x: number; y: number }, close: () => void) => ReactNode, - createContextMenuDeps: DependencyList + createContextMenuDeps: DependencyList, ): [contextMenu: ReactNode, onContextMenu: (event: React.MouseEvent) => void] { const [relativeToPos, setRelativeToPos] = useState<{ x: number; @@ -377,12 +371,12 @@ export function useContextClickContextMenu( const createContextMenuWithRelativeToPos = useCallback( (close: () => void) => createContextMenu(alignment, relativeToPos, close), - [alignment, createContextMenu, relativeToPos] + [alignment, createContextMenu, relativeToPos], ); const [contextMenu, _toggle, _close, open] = useContextMenu( createContextMenuWithRelativeToPos, - createContextMenuDeps + createContextMenuDeps, ); const onContextMenu = useCallback( @@ -390,7 +384,7 @@ export function useContextClickContextMenu( setRelativeToPos({ x: event.clientX, y: event.clientY }); open(); }, - [open] + [open], ); return [contextMenu, onContextMenu]; @@ -399,14 +393,14 @@ export function useContextClickContextMenu( /** creates context state for hovering over an element */ export function useContextHover( createContextHover: () => ReactNode, - createContextHoverDeps: DependencyList + createContextHoverDeps: DependencyList, ): [contextHover: ReactNode, mouseEnterCallable: () => void, mouseLeaveCallable: () => void] { const [isOpen, setIsOpen] = useState(false); const contextHover = useMemo( () => createContextHover(), // eslint-disable-next-line react-hooks/exhaustive-deps - [createContextHover, ...createContextHoverDeps] + [createContextHover, ...createContextHoverDeps], ); const mouseEnterCallable = useCallback(() => { diff --git a/src/index.html b/src/index.html index d901d26..71add94 100644 --- a/src/index.html +++ b/src/index.html @@ -1,7 +1,8 @@ - + + Webpack Starter