From c149f96ca81f4061ab971290a64df51a68d2a122 Mon Sep 17 00:00:00 2001 From: EnixCoda Date: Sun, 24 Apr 2022 00:08:22 +0800 Subject: [PATCH] chore: reformat code --- src/components/HighlightOnIndexes.tsx | 14 ++--- src/utils/createAnchorClickHandler.ts | 13 ++--- src/utils/hooks/useConditionalHook.ts | 2 +- src/utils/hooks/useResizeHandler.tsx | 82 ++++++++++++++------------- src/utils/hooks/useUpdateReason.ts | 8 +-- 5 files changed, 59 insertions(+), 60 deletions(-) diff --git a/src/components/HighlightOnIndexes.tsx b/src/components/HighlightOnIndexes.tsx index 189b2ce..f8a21f4 100644 --- a/src/components/HighlightOnIndexes.tsx +++ b/src/components/HighlightOnIndexes.tsx @@ -1,17 +1,17 @@ -import * as React from 'react'; +import * as React from 'react' -export function HighlightOnIndexes(props: { text: string; indexes?: number[]; }) { - const { text, indexes } = props; +export function HighlightOnIndexes(props: { text: string; indexes?: number[] }) { + const { text, indexes } = props - if (!indexes?.length) - return <>{text}; + if (!indexes?.length) return <>{text} return ( <> {text .split('') - .map((char, i) => indexes.includes(i) ? {char} : {char} + .map((char, i) => + indexes.includes(i) ? {char} : {char}, )} - ); + ) } diff --git a/src/utils/createAnchorClickHandler.ts b/src/utils/createAnchorClickHandler.ts index e7f95e8..88cc400 100644 --- a/src/utils/createAnchorClickHandler.ts +++ b/src/utils/createAnchorClickHandler.ts @@ -1,12 +1,11 @@ -import { isOpenInNewWindowClick } from './general'; -import { loadWithPJAX } from './hooks/usePJAX'; +import { isOpenInNewWindowClick } from './general' +import { loadWithPJAX } from './hooks/usePJAX' export function createAnchorClickHandler(url: string) { return (e: React.MouseEvent) => { - if (isOpenInNewWindowClick(e)) - return; + if (isOpenInNewWindowClick(e)) return - e.preventDefault(); - loadWithPJAX(url, e.currentTarget); - }; + e.preventDefault() + loadWithPJAX(url, e.currentTarget) + } } diff --git a/src/utils/hooks/useConditionalHook.ts b/src/utils/hooks/useConditionalHook.ts index 613269d..778d847 100644 --- a/src/utils/hooks/useConditionalHook.ts +++ b/src/utils/hooks/useConditionalHook.ts @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from 'react' export function useConditionalHook(condition: () => boolean, hook: () => T) { const [use] = React.useState(condition) diff --git a/src/utils/hooks/useResizeHandler.tsx b/src/utils/hooks/useResizeHandler.tsx index 65c70a9..2911a30 100644 --- a/src/utils/hooks/useResizeHandler.tsx +++ b/src/utils/hooks/useResizeHandler.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; -import { Size2D } from '../../components/SideBarBodyWrapper'; +import * as React from 'react' +import { Size2D } from '../../components/SideBarBodyWrapper' -export type ResizeState = 'idle' | 'resizing'; +export type ResizeState = 'idle' | 'resizing' export function useResizeHandler( size: Size2D, @@ -9,58 +9,60 @@ export function useResizeHandler( { onResizeStateChange, onClick, + distanceTolerance = 2, }: Partial<{ - onResizeStateChange: (state: ResizeState) => void; - onClick: (e: PointerEvent) => void; - }> = {} + onResizeStateChange: (state: ResizeState) => void + onClick: (e: PointerEvent) => void + distanceTolerance: number + }> = {}, ) { - const pointerDown = React.useRef(false); - const pointerMoved = React.useRef(false); - const initialSizeRef = React.useRef([0, 0]); - const baseSize = React.useRef(size); - const latestPropSize = React.useRef(size); + const pointerDown = React.useRef(false) + const pointerMoved = React.useRef(false) + const initialSizeRef = React.useRef([0, 0]) + const baseSize = React.useRef(size) + const latestPropSize = React.useRef(size) React.useEffect(() => { - latestPropSize.current = size; - }, [size]); + latestPropSize.current = size + }, [size]) React.useEffect(() => { const onPointerMove = ({ clientX, clientY }: PointerEvent) => { - if (!pointerDown.current) - return; - pointerMoved.current = true; - const [x, y] = baseSize.current; - onResize([x + clientX - initialSizeRef.current[0], y + clientY - initialSizeRef.current[1]]); - }; - window.addEventListener('pointermove', onPointerMove); - return () => window.removeEventListener('pointermove', onPointerMove); - }, [onResize]); + if (!pointerDown.current) return + const [x0, y0] = initialSizeRef.current + // Allow minor movement, this happened unintentionally for few times when I use track pad + pointerMoved.current = pointerMoved.current || (clientX - x0) ** 2 + (clientY - y0) ** 2 > distanceTolerance ** 2 + const [x1, y1] = baseSize.current + onResize([x1 + clientX - x0, y1 + clientY - y0]) + } + window.addEventListener('pointermove', onPointerMove) + return () => window.removeEventListener('pointermove', onPointerMove) + }, [onResize]) React.useEffect(() => { const onPointerUp = (e: PointerEvent) => { if (pointerDown.current) { - pointerDown.current = false; + pointerDown.current = false - if (!pointerMoved.current) - onClick?.(e); - pointerMoved.current = false; + if (!pointerMoved.current) onClick?.(e) + pointerMoved.current = false - baseSize.current = latestPropSize.current; - onResizeStateChange?.('idle'); + baseSize.current = latestPropSize.current + onResizeStateChange?.('idle') } - }; - window.addEventListener('pointerup', onPointerUp); - return () => window.removeEventListener('pointerup', onPointerUp); - }, []); + } + window.addEventListener('pointerup', onPointerUp) + return () => window.removeEventListener('pointerup', onPointerUp) + }, []) const onPointerDown = React.useCallback((e: React.PointerEvent) => { - e.preventDefault(); // Prevent unexpected selection when dragging in Safari - const { clientX, clientY } = e; - pointerDown.current = true; - initialSizeRef.current = [clientX, clientY]; - baseSize.current = latestPropSize.current; - onResizeStateChange?.('resizing'); - }, []); + e.preventDefault() // Prevent unexpected selection when dragging in Safari + const { clientX, clientY } = e + pointerDown.current = true + initialSizeRef.current = [clientX, clientY] + baseSize.current = latestPropSize.current + onResizeStateChange?.('resizing') + }, []) - return { onPointerDown }; + return { onPointerDown } } diff --git a/src/utils/hooks/useUpdateReason.ts b/src/utils/hooks/useUpdateReason.ts index edcbf1a..327bf74 100644 --- a/src/utils/hooks/useUpdateReason.ts +++ b/src/utils/hooks/useUpdateReason.ts @@ -1,9 +1,7 @@ import { IN_PRODUCTION_MODE } from 'env' import * as React from 'react' -export function useUpdateReason

(props: P) { +export function useUpdateReason

(props: P) { const lastPropsRef = React.useRef

(props) React.useEffect(() => { if (IN_PRODUCTION_MODE) return @@ -23,11 +21,11 @@ export function useUpdateReason

(typeof r === 'function' ? '[fn]' : r))) } - console.log(`;;`) + console.groupEnd() } lastPropsRef.current = props