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

18
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) => {
const label = isMap(option) ? option.get('label') : option.label;
const value = isMap(option) ? option.get('value') : option.value;
return (
<div <div
key={`${index}_${option.value}`} key={`${index}_${value}`}
className={cx(styles.option, isEqual(selected, option.value) && styles.selected)} className={cx(styles.option, isEqual(selected, value) && styles.selected)}
ref={(el) => (optionsRef.current[index] = el!)} ref={(el) => (optionsRef.current[index] = el!)}
onClick={() => handleSelectAction(option.value, index)}> onClick={() => handleSelectAction(value, index)}>
{option.label} {label}
</div> </div>
))} );
})}
{!isNil(selected) && ( {!isNil(selected) && (
<div <div
className={styles.slider} className={styles.slider}

18
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) => {
const label = isMap(option) ? option.get('label') : option.label;
const value = isMap(option) ? option.get('value') : option.value;
return (
<div <div
key={`${index}_${option.value}`} key={`${index}_${value}`}
className={cx(styles.option, isEqual(selected, option.value) && styles.selected)} className={cx(styles.option, isEqual(selected, value) && styles.selected)}
ref={(el) => (optionsRef.current[index] = el!)} ref={(el) => (optionsRef.current[index] = el!)}
onClick={() => handleSelectAction(option.value, index)}> onClick={() => handleSelectAction(value, index)}>
{option.label} {label}
</div> </div>
))} );
})}
{!isNil(selected) && ( {!isNil(selected) && (
<div <div
className={styles.slider} className={styles.slider}

6
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; label: string;
value: string | number | null; value: string | number | null;
}; }
| Record<'label' | 'value', string | number | null>;
export type HarmonyColor = { export type HarmonyColor = {
color: string; color: string;