michael/webpack-base
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

apply prettier config update

Browse Source
This commit is contained in:
Michael Peters 2024-07-21 10:51:53 -07:00
parent 892f8ca09d
commit 9514790f79
3 changed files with 31 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/core/align.ts
View File

@ -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');

50
src/core/hooks.ts
View File

@ -14,7 +14,7 @@ import { IAlignment, alignContextElement } from './align';
class ShouldNeverHappenError extends Error {}
function sleep(ms: number): Promise<void> {
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<T, V>(
actionFunc: () => Promise<T>,
deps: DependencyList,
initialValue: V
initialValue: V,
): [value: T | V, error: unknown | null] {
const isMounted = useRef(false);
const isMounted = useIsMountedRef();
const [value, setValue] = useState<T | V>(initialValue);
const [error, setError] = useState<unknown | null>(null);
useEffect(() => {
isMounted.current = true;
(async () => {
try {
const value = await actionFunc();
@ -73,10 +71,6 @@ export function useOneTimeAsyncAction<T, V>(
setError(e);
}
})();
return () => {
isMounted.current = false;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [actionFunc, ...deps]);
@ -86,9 +80,9 @@ export function useOneTimeAsyncAction<T, V>(
/** creates a callable async function that will not double-trigger and gives a result, error message, and shaking boolean */
export function useAsyncCallback<ResultType>(
actionFunc: (
isMounted: MutableRefObject<boolean>
isMounted: MutableRefObject<boolean>,
) => 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<ResultType>(
/** creates a callable async function that does not need to return a value (or shake) */
export function useAsyncVoidCallback(
actionFunc: (isMounted: MutableRefObject<boolean>) => Promise<void>,
deps: DependencyList
deps: DependencyList,
): [callable: () => void] {
const [callable] = useAsyncCallback(async (isMounted: MutableRefObject<boolean>) => {
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<ResultType>(
actionFunc: (
isMounted: MutableRefObject<boolean>
isMounted: MutableRefObject<boolean>,
) => Promise<{ errorMessage: string | null; result: ResultType | null }>,
deps: DependencyList,
stateTextMapping?: {
@ -147,7 +141,7 @@ export function useAsyncSubmitButton<ResultType>(
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<ResultType>(
return actionReturnValue;
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[...deps, actionFunc]
[...deps, actionFunc],
);
const text = useMemo(() => {
@ -186,7 +180,7 @@ export function useAsyncSubmitButton<ResultType>(
/** calls the close action when you hit escape or click outside of the ref element */
export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
refs: RefObject<HTMLElement>[],
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<boolean>(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<boolean>(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<HTMLElement>) => 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<boolean>(false);
const contextHover = useMemo(
() => createContextHover(),
// eslint-disable-next-line react-hooks/exhaustive-deps
[createContextHover, ...createContextHoverDeps]
[createContextHover, ...createContextHoverDeps],
);
const mouseEnterCallable = useCallback(() => {

3
src/index.html
View File

@ -1,7 +1,8 @@
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="data:,"><!-- disable favicon -->
<!-- disable favicon -->
<link rel="icon" href="data:," />
<title>Webpack Starter</title>
</head>
<body>