From 2ec3578e1c6098369ef9e707e9e60d18497d7f05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= Date: Mon, 10 Feb 2025 14:42:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=88=96=E5=B1=8F=E8=94=BD?= =?UTF-8?q?=E7=BC=96=E8=AF=91=E9=94=99=E8=AF=AF=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ColorFunctionContext.tsx | 1 + src/components/Notifications.tsx | 6 +++--- src/components/ScrollArea.tsx | 14 ++++++++++--- src/components/Switch.tsx | 5 ++++- .../color-compare/HCTCompare.tsx | 21 ++++++------------- .../color-compare/HSLCompare.tsx | 21 ++++++------------- .../color-compare/OKLCHCompare.tsx | 21 ++++++------------- .../color-compare/RGBCompare.tsx | 21 ++++++------------- .../color-compare/ShadeScale.tsx | 7 +------ .../color-compare/TintScale.tsx | 7 +------ src/page-components/scheme/ColorEntry.tsx | 2 +- .../scheme/m2-scheme/Builder.tsx | 2 +- .../scheme/m3-scheme/Builder.tsx | 2 +- .../scheme/q-scheme/Builder.tsx | 2 +- 14 files changed, 49 insertions(+), 83 deletions(-) diff --git a/src/ColorFunctionContext.tsx b/src/ColorFunctionContext.tsx index 62be5eb..d1b0694 100644 --- a/src/ColorFunctionContext.tsx +++ b/src/ColorFunctionContext.tsx @@ -23,6 +23,7 @@ export function useColorFunction(): ColorFunctionContextType { } export function ColorFunctionProvider({ children }: WasmProviderProps) { + //@ts-expect-error TS2503 const [wasmInstance, setWasmInstance] = useState(null); const [isPending, startTransition] = useTransition(); const [error, setError] = useState(null); diff --git a/src/components/Notifications.tsx b/src/components/Notifications.tsx index ad637c6..8ffd6f6 100644 --- a/src/components/Notifications.tsx +++ b/src/components/Notifications.tsx @@ -194,6 +194,7 @@ export function Notifications({ message={message} duration={duration ?? defaultDuration} closeAction={removeNotification} + //@ts-expect-error TS2322 ref={ref} /> ); @@ -233,9 +234,6 @@ export function Notifications({ value={{ addNotification, removeNotification, - showDialog: () => '', - showModalDialog: () => '', - closeDialog: () => {}, showToast, }}> {children} @@ -245,6 +243,7 @@ export function Notifications({ {notifications.slice(0, maxNotifications).map(({ id, element, ref }) => ( ( (null); const handleMouseDown = (evt: MouseEvent) => { evt.preventDefault(); + //@ts-expect-error TS2769 document.addEventListener('mousemove', handleMouseMove); + //@ts-expect-error TS2769 document.addEventListener('mouseup', handleMouseUp); }; - const handleMouseMove = (evt: MouseEvent) => { + const handleMouseMove = (evt: MouseEvent) => { evt.preventDefault(); const container = containerRef?.current; const scrollbar = trackRef.current; @@ -34,7 +36,9 @@ function VerticalScrollBar({ containerRef }: ScrollBarProps) { }; const handleMouseUp = (evt: MouseEvent) => { evt.preventDefault(); + //@ts-expect-error TS2769 document.removeEventListener('mousemove', handleMouseMove); + //@ts-expect-error TS2769 document.removeEventListener('mouseup', handleMouseUp); }; @@ -77,7 +81,9 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) { const thumbRef = useRef(null); const handleMouseDown = (evt: MouseEvent) => { evt.preventDefault(); + //@ts-expect-error TS2769 document.addEventListener('mousemove', handleMouseMove); + //@ts-expect-error TS2769 document.addEventListener('mouseup', handleMouseUp); }; const handleMouseMove = (evt: MouseEvent) => { @@ -99,7 +105,9 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) { }; const handleMouseUp = (evt: MouseEvent) => { evt.preventDefault(); + //@ts-expect-error TS2769 document.removeEventListener('mousemove', handleMouseMove); + //@ts-expect-error TS2769 document.removeEventListener('mouseup', handleMouseUp); }; @@ -129,7 +137,7 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) { className={styles.h_thumb} ref={thumbRef} style={{ left: thumbPos }} - onMouseDown={handleMouseDown} + onMouseDown={(e) => handleMouseDown(e)} /> ); diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx index 4dafc89..bfa261f 100644 --- a/src/components/Switch.tsx +++ b/src/components/Switch.tsx @@ -26,11 +26,14 @@ export function Switch({ name, checked = false, disabled = false, onChange }: Sw }, [checked]); return ( + //@ts-expect-error TS2322
- {!isNil(name) && } + {!isNil(name) && ( + + )}
); } diff --git a/src/page-components/color-compare/HCTCompare.tsx b/src/page-components/color-compare/HCTCompare.tsx index a8d07bb..2f3667b 100644 --- a/src/page-components/color-compare/HCTCompare.tsx +++ b/src/page-components/color-compare/HCTCompare.tsx @@ -1,23 +1,14 @@ import { useMemo } from 'react'; -import { HctDiffference } from '../../color_functions/color_module'; +import { Differ, HctDiffference } from '../../color_functions/color_module'; import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultCompareResult: HctDiffference = { - hue: { - delta: 0, - percent: 0, - }, - chroma: { - delta: 0, - percent: 0, - }, - lightness: { - delta: 0, - percent: 0, - }, -}; +const defaultCompareResult: HctDiffference = new HctDiffference( + new Differ(0, 0), + new Differ(0, 0), + new Differ(0, 0), +); export function HCTCompare({ basic = '000000', diff --git a/src/page-components/color-compare/HSLCompare.tsx b/src/page-components/color-compare/HSLCompare.tsx index 383a0d6..fed2ca5 100644 --- a/src/page-components/color-compare/HSLCompare.tsx +++ b/src/page-components/color-compare/HSLCompare.tsx @@ -1,23 +1,14 @@ import { useMemo } from 'react'; -import { HSLDifference } from '../../color_functions/color_module'; +import { Differ, HSLDifference } from '../../color_functions/color_module'; import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultCompareResult: HSLDifference = { - hue: { - delta: 0, - percent: 0, - }, - saturation: { - delta: 0, - percent: 0, - }, - lightness: { - delta: 0, - percent: 0, - }, -}; +const defaultCompareResult: HSLDifference = new HSLDifference( + new Differ(0, 0), + new Differ(0, 0), + new Differ(0, 0), +); export function HSLCompare({ basic = '000000', diff --git a/src/page-components/color-compare/OKLCHCompare.tsx b/src/page-components/color-compare/OKLCHCompare.tsx index 14762a2..f7d8566 100644 --- a/src/page-components/color-compare/OKLCHCompare.tsx +++ b/src/page-components/color-compare/OKLCHCompare.tsx @@ -1,23 +1,14 @@ import { useMemo } from 'react'; -import { OklchDifference } from '../../color_functions/color_module'; +import { Differ, OklchDifference } from '../../color_functions/color_module'; import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultCompareResult: OklchDifference = { - hue: { - delta: 0, - percent: 0, - }, - chroma: { - delta: 0, - percent: 0, - }, - lightness: { - delta: 0, - percent: 0, - }, -}; +const defaultCompareResult: OklchDifference = new OklchDifference( + new Differ(0, 0), + new Differ(0, 0), + new Differ(0, 0), +); export function OklchCompare({ basic = '000000', diff --git a/src/page-components/color-compare/RGBCompare.tsx b/src/page-components/color-compare/RGBCompare.tsx index 6795f07..0d151c4 100644 --- a/src/page-components/color-compare/RGBCompare.tsx +++ b/src/page-components/color-compare/RGBCompare.tsx @@ -1,23 +1,14 @@ import { useMemo } from 'react'; -import { RGBDifference } from '../../color_functions/color_module'; +import { Differ, RGBDifference } from '../../color_functions/color_module'; import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultCompareResult: RGBDifference = { - r: { - delta: 0, - percent: 0, - }, - g: { - delta: 0, - percent: 0, - }, - b: { - delta: 0, - percent: 0, - }, -}; +const defaultCompareResult: RGBDifference = new RGBDifference( + new Differ(0, 0), + new Differ(0, 0), + new Differ(0, 0), +); export function RGBCompare({ basic = '000000', diff --git a/src/page-components/color-compare/ShadeScale.tsx b/src/page-components/color-compare/ShadeScale.tsx index 455b453..4412d8a 100644 --- a/src/page-components/color-compare/ShadeScale.tsx +++ b/src/page-components/color-compare/ShadeScale.tsx @@ -5,12 +5,7 @@ import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultMixResult: MixReversing = { - r_factor: 0, - g_factor: 0, - b_factor: 0, - average: 0, -}; +const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0); export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) { const { colorFn } = useColorFunction(); diff --git a/src/page-components/color-compare/TintScale.tsx b/src/page-components/color-compare/TintScale.tsx index f4ccaf7..0c546c7 100644 --- a/src/page-components/color-compare/TintScale.tsx +++ b/src/page-components/color-compare/TintScale.tsx @@ -5,12 +5,7 @@ import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultMixResult: MixReversing = { - r_factor: 0, - g_factor: 0, - b_factor: 0, - average: 0, -}; +const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0); export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) { const { colorFn } = useColorFunction(); diff --git a/src/page-components/scheme/ColorEntry.tsx b/src/page-components/scheme/ColorEntry.tsx index 11a3b8e..c51e797 100644 --- a/src/page-components/scheme/ColorEntry.tsx +++ b/src/page-components/scheme/ColorEntry.tsx @@ -1,6 +1,6 @@ import { isEmpty } from 'lodash-es'; import { ActionIcon } from '../../components/ActionIcon'; -import { FloatColorPicker } from '../../components/FloatcolorPicker'; +import { FloatColorPicker } from '../../components/FloatColorPicker'; import styles from './colorEntry.module.css'; export type IdenticalColorEntry = { diff --git a/src/page-components/scheme/m2-scheme/Builder.tsx b/src/page-components/scheme/m2-scheme/Builder.tsx index 70c7608..74dd0c3 100644 --- a/src/page-components/scheme/m2-scheme/Builder.tsx +++ b/src/page-components/scheme/m2-scheme/Builder.tsx @@ -1,7 +1,7 @@ import { includes, isEmpty, isNil, merge } from 'lodash-es'; import { useActionState, useCallback, useMemo, useState } from 'react'; import { useColorFunction } from '../../../ColorFunctionContext'; -import { FloatColorPicker } from '../../../components/FloatcolorPicker'; +import { FloatColorPicker } from '../../../components/FloatColorPicker'; import { ScrollArea } from '../../../components/ScrollArea'; import { MaterialDesign2SchemeStorage } from '../../../material-2-scheme'; import { SchemeContent } from '../../../models'; diff --git a/src/page-components/scheme/m3-scheme/Builder.tsx b/src/page-components/scheme/m3-scheme/Builder.tsx index 9545751..f260b47 100644 --- a/src/page-components/scheme/m3-scheme/Builder.tsx +++ b/src/page-components/scheme/m3-scheme/Builder.tsx @@ -1,7 +1,7 @@ import { includes, isEmpty, isNil } from 'lodash-es'; import { useActionState, useCallback, useMemo, useState } from 'react'; import { useColorFunction } from '../../../ColorFunctionContext'; -import { FloatColorPicker } from '../../../components/FloatcolorPicker'; +import { FloatColorPicker } from '../../../components/FloatColorPicker'; import { ScrollArea } from '../../../components/ScrollArea'; import { MaterialDesign3Scheme, MaterialDesign3SchemeStorage } from '../../../material-3-scheme'; import { SchemeContent } from '../../../models'; diff --git a/src/page-components/scheme/q-scheme/Builder.tsx b/src/page-components/scheme/q-scheme/Builder.tsx index 3a8ffde..f0dba31 100644 --- a/src/page-components/scheme/q-scheme/Builder.tsx +++ b/src/page-components/scheme/q-scheme/Builder.tsx @@ -7,7 +7,7 @@ import { WACGSetting, } from '../../../color_functions/color_module'; import { useColorFunction } from '../../../ColorFunctionContext'; -import { FloatColorPicker } from '../../../components/FloatcolorPicker'; +import { FloatColorPicker } from '../../../components/FloatColorPicker'; import { ScrollArea } from '../../../components/ScrollArea'; import { VSegmentedControl } from '../../../components/VSegmentedControl'; import { SchemeContent } from '../../../models';