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

增强SegmentControl系列组件对于Map的支持。

Browse Source
This commit is contained in:
徐涛 2025-01-25 08:56:57 +08:00
parent 1b41fb4d22
commit 4b4428fd3b
3 changed files with 34 additions and 24 deletions

24
src/components/HSegmentedControl.tsx
View File

@ -1,5 +1,5 @@
import cx from 'clsx';
import { isEqual, isNil } from 'lodash-es';
import { isEqual, isMap, isNil } from 'lodash-es';
import { useCallback, useRef, useState } from 'react';
import type { Option } from '../models';
import styles from './HSegmentedControl.module.css';
@ -36,15 +36,19 @@ export function HSegmentedControl({
return (
<div className={cx(styles.segmented_control, extendClassName)}>
<div className={styles.options}>
{options.map((option, index) => (
<div
key={`${index}_${option.value}`}
className={cx(styles.option, isEqual(selected, option.value) && styles.selected)}
ref={(el) => (optionsRef.current[index] = el!)}
onClick={() => handleSelectAction(option.value, index)}>
{option.label}
</div>
))}
{options.map((option, index) => {
const label = isMap(option) ? option.get('label') : option.label;
const value = isMap(option) ? option.get('value') : option.value;
return (
<div
key={`${index}_${value}`}
className={cx(styles.option, isEqual(selected, value) && styles.selected)}
ref={(el) => (optionsRef.current[index] = el!)}
onClick={() => handleSelectAction(value, index)}>
{label}
</div>
);
})}
{!isNil(selected) && (
<div
className={styles.slider}

24
src/components/VSegmentedControl.tsx
View File

@ -1,5 +1,5 @@
import cx from 'clsx';
import { isEqual, isNil } from 'lodash-es';
import { isEqual, isMap, isNil } from 'lodash-es';
import { useCallback, useRef, useState } from 'react';
import type { Option } from '../models';
import styles from './VSegmentedControl.module.css';
@ -36,15 +36,19 @@ export function VSegmentedControl({
return (
<div className={cx(styles.segmented_control, extendClassName)}>
<div className={styles.options}>
{options.map((option, index) => (
<div
key={`${index}_${option.value}`}
className={cx(styles.option, isEqual(selected, option.value) && styles.selected)}
ref={(el) => (optionsRef.current[index] = el!)}
onClick={() => handleSelectAction(option.value, index)}>
{option.label}
</div>
))}
{options.map((option, index) => {
const label = isMap(option) ? option.get('label') : option.label;
const value = isMap(option) ? option.get('value') : option.value;
return (
<div
key={`${index}_${value}`}
className={cx(styles.option, isEqual(selected, value) && styles.selected)}
ref={(el) => (optionsRef.current[index] = el!)}
onClick={() => handleSelectAction(value, index)}>
{label}
</div>
);
})}
{!isNil(selected) && (
<div
className={styles.slider}

10
src/models.ts
View File

@ -4,10 +4,12 @@ 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;
};
export type Option =
| {
label: string;
value: string | number | null;
}
| Record<'label' | 'value', string | number | null>;
export type HarmonyColor = {
color: string;