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

重构目前所有的复制颜色代码功能使用统一的Hook。

Browse Source
This commit is contained in:
徐涛 2025-01-03 17:26:12 +08:00
parent 10f885526e
commit 69afcc369e
4 changed files with 15 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ColorPicker.tsx
View File

@ -1,11 +1,10 @@
import { isEqual, isNil } from 'lodash-es';
import { useCallback, useEffect, useState } from 'react';
import { useCopyToClipboard } from 'react-use';
import { isEqual } from 'lodash-es';
import { useState } from 'react';
import { useCopyColor } from '../hooks/useCopyColor';
import { ColorComponentInput } from './ColorComponentInput';
import styles from './ColorPicker.module.css';
import { HSegmentedControl } from './HSegmentedControl';
import { HslAssemble } from './HslAsssemble';
import { NotificationType, useNotification } from './Notifications';
import { RGBAssemble } from './RGBAssemble';
type ColorPickerProps = {
@ -14,35 +13,18 @@ type ColorPickerProps = {
};
export function ColorPicker({ color, onSelect }: ColorPickerProps) {
const [cpState, copyToClipboard] = useCopyToClipboard();
const { showToast } = useNotification();
const [pickMode, setMode] = useState<'rgb' | 'hsl' | 'input'>('rgb');
const [selectedColor, setSelectedColor] = useState<string>(color ?? '000000');
const handleColorSelect = (color: string) => {
setSelectedColor(color);
onSelect?.(color);
};
const handleCopyAction = useCallback(() => {
copyToClipboard(`#${selectedColor}`);
}, [selectedColor]);
useEffect(() => {
if (!isNil(cpState.error)) {
showToast(NotificationType.ERROR, 'Failed to copy to clipboard', 'tabler:alert-circle', 3000);
} else if (!isNil(cpState.value)) {
showToast(
NotificationType.SUCCESS,
`${cpState.value} has been copied to clipboard.`,
'tabler:circle-check',
3000,
);
}
}, [cpState]);
const copyColor = useCopyColor();
return (
<div className={styles.color_picker}>
<div className={styles.color_preview} style={{ backgroundColor: `#${selectedColor}` }} />
<div className={styles.color_code} onClick={handleCopyAction}>
<div className={styles.color_code} onClick={() => copyColor(selectedColor)}>
#{selectedColor}
</div>
<HSegmentedControl

28
src/components/ColorStand.tsx
View File

@ -1,38 +1,18 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { isNil } from 'lodash-es';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCopyToClipboard } from 'react-use';
import { useMemo, useState } from 'react';
import NoColor from '../assets/NoColor.svg';
import { useColorFunction } from '../ColorFunctionContext';
import { useCopyColor } from '../hooks/useCopyColor';
import styles from './ColorStand.module.css';
import { HSegmentedControl } from './HSegmentedControl';
import { NotificationType, useNotification } from './Notifications';
type ColorValueProps = {
value: string | null;
};
function ColorValue({ value }: ColorValueProps) {
const [cpState, copyToClipboard] = useCopyToClipboard();
const { showToast } = useNotification();
const handleCopy = useCallback(() => {
if (!isNil(value)) {
copyToClipboard(value);
}
}, [value]);
useEffect(() => {
if (!isNil(cpState.error)) {
showToast(NotificationType.ERROR, 'Failed to copy to clipboard', 'tabler:alert-circle', 3000);
} else if (!isNil(cpState.value)) {
showToast(
NotificationType.SUCCESS,
`${cpState.value} has been copied to clipboard.`,
'tabler:circle-check',
3000,
);
}
}, [cpState]);
const copyColor = useCopyColor();
return (
<div className={styles.color_value}>
@ -42,7 +22,7 @@ function ColorValue({ value }: ColorValueProps) {
<span>Not Available</span>
</div>
) : (
<div className={styles.value} onClick={handleCopy}>
<div className={styles.value} onClick={() => copyColor(value)}>
{value}
</div>
)}

1
src/hooks/useCopyColor.ts
View File

@ -7,6 +7,7 @@ export function useCopyColor() {
const { showToast } = useNotification();
const [cpState, copyToClipboard] = useCopyToClipboard();
const copyAction = useCallback((color: string) => {
if (isNil(color)) return;
if (color.startsWith('#')) {
copyToClipboard(color);
} else {

25
src/page-components/harmonies/HarmonyPreview.tsx
View File

@ -1,8 +1,7 @@
import cx from 'clsx';
import { constant, flatten, isEqual, isNil, take, times } from 'lodash-es';
import { useEffect, useMemo } from 'react';
import { useCopyToClipboard } from 'react-use';
import { NotificationType, useNotification } from '../../components/Notifications';
import { constant, flatten, isEqual, take, times } from 'lodash-es';
import { useMemo } from 'react';
import { useCopyColor } from '../../hooks/useCopyColor';
import { HarmonyColor } from '../../models';
import styles from './HarmonyPreview.module.css';
@ -11,8 +10,7 @@ type HarmonyPreviewProps = {
};
export function HarmonyPreview({ colors = [] }: HarmonyPreviewProps) {
const [cpState, copyToClipboard] = useCopyToClipboard();
const { showToast } = useNotification();
const copyColor = useCopyColor();
const extendedColors = useMemo(() => {
const sortedColors = colors.sort((a, b) => -(a.ratio - b.ratio));
if (sortedColors.length >= 4) {
@ -24,19 +22,6 @@ export function HarmonyPreview({ colors = [] }: HarmonyPreviewProps) {
]);
}, [colors]);
useEffect(() => {
if (!isNil(cpState.error)) {
showToast(NotificationType.ERROR, 'Failed to copy to clipboard', 'tabler:alert-circle', 3000);
} else if (!isNil(cpState.value)) {
showToast(
NotificationType.SUCCESS,
`${cpState.value} has been copied to clipboard.`,
'tabler:circle-check',
3000,
);
}
}, [cpState]);
return (
<div className={styles.preview}>
<h5>Harmony Preview</h5>
@ -49,7 +34,7 @@ export function HarmonyPreview({ colors = [] }: HarmonyPreviewProps) {
<div className={styles.color_ratio}>{ratio > 0 && `Ratio: ${ratio}`}</div>
<div className={styles.color_square} style={{ backgroundColor: `#${color}` }}></div>
<div className={styles.color_code}>
{ratio > 0 && <span onClick={() => copyToClipboard(`#${color}`)}>#{color}</span>}
{ratio > 0 && <span onClick={() => copyColor(color)}>#{color}</span>}
</div>
</div>
))}