109 lines
3.4 KiB
TypeScript
109 lines
3.4 KiB
TypeScript
import cx from 'clsx';
|
|
import { isEqual } from 'lodash-es';
|
|
import { ChangeEvent, useMemo, useState } from 'react';
|
|
import { useColorFunction } from '../ColorFunctionContext';
|
|
import { HSegmentedControl } from '../components/HSegmentedControl';
|
|
import { ScrollArea } from '../components/ScrollArea';
|
|
import { ColorDescription } from '../models';
|
|
import { ColorCard } from '../page-components/cards-detail/ColorCard';
|
|
import { mapToObject } from '../utls';
|
|
import styles from './CardsDetail.module.css';
|
|
|
|
type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
|
|
type CardsDetailProps = {
|
|
mainTag: string;
|
|
};
|
|
|
|
export function CardsDetail({ mainTag }: CardsDetailProps) {
|
|
const { colorFn } = useColorFunction();
|
|
const categories = useMemo(() => {
|
|
if (!colorFn) {
|
|
return [];
|
|
}
|
|
try {
|
|
const embededCategories = colorFn.color_categories().map(mapToObject) as {
|
|
label: string;
|
|
value: string;
|
|
}[];
|
|
console.debug('[Fetch color categories]', embededCategories);
|
|
return embededCategories.filter((cate) => !isEqual(cate.value, 'unknown'));
|
|
} catch (e) {
|
|
console.error('[Fetch color categories]', e);
|
|
}
|
|
return [];
|
|
}, [colorFn]);
|
|
const [colorCategory, setCategory] = useState<string | 'null'>('null');
|
|
const handleSelectCategory = (e: ChangeEvent<HTMLSelectElement>) => {
|
|
const selectedValue = e.target.value;
|
|
setCategory(selectedValue);
|
|
};
|
|
const [mode, setMode] = useState<ColorModes>('hex');
|
|
const colors = useMemo(() => {
|
|
if (!colorFn) {
|
|
return [];
|
|
}
|
|
try {
|
|
const colorCate = isEqual(colorCategory, 'null') ? undefined : colorCategory;
|
|
let tag = '';
|
|
switch (mainTag) {
|
|
case 'japanese':
|
|
tag = 'japanese_traditional';
|
|
break;
|
|
case 'chinese':
|
|
tag = 'chinese_traditional';
|
|
break;
|
|
default:
|
|
tag = '';
|
|
break;
|
|
}
|
|
const embedColors = colorFn.search_color_cards(tag, colorCate) as ColorDescription[];
|
|
console.debug('[Fetch cards]', embedColors);
|
|
return embedColors;
|
|
} catch (e) {
|
|
console.error('[Fetch colors]', e);
|
|
}
|
|
return [];
|
|
}, [colorFn, mainTag, colorCategory]);
|
|
|
|
return (
|
|
<div className={cx('workspace', styles.cards_workspace)}>
|
|
<div className={styles.filters}>
|
|
<span>Show</span>
|
|
<select
|
|
className={styles.cate_select}
|
|
value={colorCategory}
|
|
onChange={handleSelectCategory}>
|
|
<option value="null">All</option>
|
|
{categories.map((cate, index) => (
|
|
<option key={`${cate.value}-${index}`} value={cate.value}>
|
|
{cate.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<span>colors.</span>
|
|
<div>Copy color value in</div>
|
|
<HSegmentedControl
|
|
options={[
|
|
{ label: 'HEX', value: 'hex' },
|
|
{ label: 'RGB', value: 'rgb' },
|
|
{ label: 'HSL', value: 'hsl' },
|
|
{ label: 'LAB', value: 'lab' },
|
|
{ label: 'OKLCH', value: 'oklch' },
|
|
]}
|
|
value={mode}
|
|
onChange={(v) => setMode(v as ColorModes)}
|
|
/>
|
|
</div>
|
|
<ScrollArea enableY>
|
|
<div className={styles.cards_container}>
|
|
{colors.map((c, index) => (
|
|
<div key={`${c.name}-${index}`} className={styles.card}>
|
|
<ColorCard color={c} copyMode={mode} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|