xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新前端Scheme类型定义。

Browse Source
This commit is contained in:
徐涛 2025-01-23 16:54:08 +08:00
parent ab4e0b440c
commit 26ebc3c7e3
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/models.ts
View File

@ -1,3 +1,8 @@
import { MaterialDesign2SchemeStorage } from './material-2-scheme';
import { MaterialDesign3SchemeStorage } from './material-3-scheme';
import { QSchemeStorage } from './q-scheme';
import { SwatchSchemeStorage } from './swatch_scheme';
export type Option = {
label: string;
value: string | number | null;
@ -35,3 +40,9 @@ export type ColorShifting = {
chroma: number;
lightness: number;
};
export type SchemeStorage =
| QSchemeStorage
| SwatchSchemeStorage
| MaterialDesign2SchemeStorage
| MaterialDesign3SchemeStorage;

25
src/stores/schemes.ts
View File

@ -4,6 +4,7 @@ import { atomWithStorage } from 'jotai/utils';
import { isEqual, reduce } from 'lodash-es';
import { useCallback, useMemo } from 'react';
import { v4 } from 'uuid';
import { SchemeContent, SchemeStorage, SchemeType } from '../models';
type ColorSet = {
normal?: string | null;
@ -38,10 +39,10 @@ export type SchemeSet = {
darkScheme: Scheme;
};
const schemesAtom = atomWithStorage<SchemeSet[]>('schemes', []);
const schemesAtom = atomWithStorage<SchemeContent<SchemeStorage>[]>('schemes', []);
export const activeSchemeAtom = atomWithStorage<string | null>('activeScheme', null);
export function useSchemeList(): Pick<SchemeSet, 'id' | 'name' | 'createdAt'>[] {
export function useSchemeList(): Pick<SchemeContent<SchemeStorage>, 'id' | 'name' | 'createdAt'>[] {
const schemes = useAtomValue(schemesAtom);
const sortedSchemes = useMemo(
() =>
@ -54,19 +55,23 @@ export function useSchemeList(): Pick<SchemeSet, 'id' | 'name' | 'createdAt'>[]
return sortedSchemes;
}
export function useScheme(id: string): SchemeSet | null {
export function useScheme(id: string): SchemeContent<SchemeStorage> | null {
const schemes = useAtomValue(schemesAtom);
const scheme = useMemo(() => schemes.find((s) => isEqual(id, s.id)) ?? null, [schemes, id]);
return scheme;
}
export function useActiveScheme(): SchemeSet | null {
export function useActiveScheme(): SchemeContent<SchemeStorage> | null {
const activeSchemeId = useAtomValue(activeSchemeAtom);
const activeScheme = useScheme(activeSchemeId ?? 'UNEXISTS');
return activeScheme;
}
export function useCreateScheme(): (name: string, description?: string) => string {
export function useCreateScheme(): (
name: string,
type: SchemeType,
description?: string,
) => string {
const updateSchemes = useSetAtom(schemesAtom);
const createSchemeAction = useCallback(
(name: string, description?: string) => {
@ -78,8 +83,8 @@ export function useCreateScheme(): (name: string, description?: string) => strin
name,
createdAt: dayjs().toISOString(),
description: description ?? null,
lightScheme: {},
darkScheme: {},
type,
schemeStorage: {},
},
]);
return newId;
@ -90,10 +95,12 @@ export function useCreateScheme(): (name: string, description?: string) => strin
return createSchemeAction;
}
export function useUpdateScheme(id: string): (updater: (prev: SchemeSet) => SchemeSet) => void {
export function useUpdateScheme(
id: string,
): (updater: (prev: SchemeContent<SchemeStorage>) => SchemeContent<SchemeStorage>) => void {
const updateSchemes = useSetAtom(schemesAtom);
const updateAction = useCallback(
(updater: (prev: SchemeSet) => SchemeSet) => {
(updater: (prev: SchemeContent<SchemeStorage>) => SchemeContent<SchemeStorage>) => {
updateSchemes((prev) =>
reduce(
prev,