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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/HSegmentedControl.tsx
View File

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

24
src/components/VSegmentedControl.tsx
View File

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