feat(components): 添加 Select 组件
- 实现了一个功能完善的 Select 下拉选择组件 - 支持简单选项和分组选项两种类型 - 提供正常、下划线和沉浸三种样式变体 - 具备单选和受控组件功能 - 优化了可访问性和交互体验
This commit is contained in:
Vixalie
207
src/components/Select.tsx
Normal file
207
src/components/Select.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import { Icon } from '@iconify-icon/solid';
|
||||
import cx from 'clsx';
|
||||
import { isNil, isNotNil } from 'es-toolkit';
|
||||
import {
|
||||
Component,
|
||||
createEffect,
|
||||
createMemo,
|
||||
createSignal,
|
||||
Index,
|
||||
JSX,
|
||||
Match,
|
||||
mergeProps,
|
||||
onMount,
|
||||
Show,
|
||||
Switch,
|
||||
} from 'solid-js';
|
||||
import { Dynamic, Portal } from 'solid-js/web';
|
||||
import Divider from './Divider';
|
||||
import ScrollArea from './ScrollArea';
|
||||
|
||||
interface Option {
|
||||
label: JSX.Element;
|
||||
value: string | number | symbol | boolean;
|
||||
}
|
||||
|
||||
interface SimpleOptionsProps {
|
||||
options: Option[];
|
||||
active?: Option['value'];
|
||||
onClick?: (option: Option) => void;
|
||||
}
|
||||
|
||||
const SimpleOptions: Component<SimpleOptionsProps> = (props) => {
|
||||
const handleClick = (value: Option['value']) => {
|
||||
props.onClick?.(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex flex-col items-stretch gap-0.5">
|
||||
<Index each={props.options}>
|
||||
{(option) => (
|
||||
<div
|
||||
class={cx(
|
||||
'rounded-sm px-2 py-1 transition-colors duration-100',
|
||||
option().value === props.active && 'bg-primary-surface text-on-primary-surface',
|
||||
option().value === props.active
|
||||
? 'hover:bg-primary-surface-hover hover:text-on-primary-surface'
|
||||
: 'hover:bg-neutral-hover hover:text-on-neutral',
|
||||
)}
|
||||
onClick={() => handleClick(option().value)}>
|
||||
{option().label}
|
||||
</div>
|
||||
)}
|
||||
</Index>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface GroupedOptionsProps {
|
||||
options: Record<string, Option[]>;
|
||||
active?: Option['value'];
|
||||
onClick?: (value: Option['value']) => void;
|
||||
}
|
||||
|
||||
const GroupedOptions: Component<GroupedOptionsProps> = (props) => {
|
||||
const entries = createMemo(() => Object.entries(props.options));
|
||||
const handleClick = (value: Option['value']) => {
|
||||
props.onClick?.(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex flex-col items-stretch gap-1">
|
||||
<Index each={entries()}>
|
||||
{(entry) => (
|
||||
<div class="flex flex-col items-stretch gap-1">
|
||||
<span class="px-1 text-on-surface/38 text-[0.6em]">{entry()[0]}</span>
|
||||
<Divider faded />
|
||||
<div class="flex flex-col items-stretch gap-0.5">
|
||||
<Index each={entry()[1]}>
|
||||
{(option) => (
|
||||
<div
|
||||
class={cx(
|
||||
'rounded-sm px-2 py-1 transition-colors duration-100',
|
||||
option().value === props.active &&
|
||||
'bg-primary-surface text-on-primary-surface',
|
||||
option().value === props.active
|
||||
? 'hover:bg-primary-surface-hover hover:text-on-primary-surface'
|
||||
: 'hover:bg-neutral-hover hover:text-on-neutral',
|
||||
)}
|
||||
onClick={() => handleClick(option().value)}>
|
||||
{option().label}
|
||||
</div>
|
||||
)}
|
||||
</Index>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Index>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface SelectProps {
|
||||
variant?: 'normal' | 'underlined' | 'immersive';
|
||||
placeholder?: string;
|
||||
name?: string;
|
||||
options: Option[] | Record<string, Option[]>;
|
||||
value?: Option['value'];
|
||||
defaultValue?: Option['value'];
|
||||
disabled?: boolean;
|
||||
onChange?: (value: Option['value']) => void;
|
||||
}
|
||||
|
||||
const Select: Component<SelectProps> = (props) => {
|
||||
const mProps = mergeProps<SelectProps[]>(
|
||||
{
|
||||
variant: 'normal',
|
||||
placeholder: '',
|
||||
options: [],
|
||||
disabled: false,
|
||||
},
|
||||
props,
|
||||
);
|
||||
|
||||
let trigger: HTMLDivElement;
|
||||
let optionFrame: HTMLDivElement;
|
||||
|
||||
const [selected, setSelected] = createSignal<Option['value'] | undefined>(undefined);
|
||||
const [optionVisible, setOptionVisible] = createSignal(false);
|
||||
|
||||
onMount(() => {
|
||||
if (isNotNil(mProps.defaultValue)) {
|
||||
setSelected(mProps.defaultValue);
|
||||
}
|
||||
});
|
||||
createEffect(() => {
|
||||
if (isNotNil(mProps.value) && mProps.value !== selected()) {
|
||||
setSelected(mProps.value);
|
||||
}
|
||||
});
|
||||
const displayLabel = createMemo(() => {
|
||||
const placeholderContent = <span>{mProps.placeholder}</span>;
|
||||
if (isNil(selected())) {
|
||||
return placeholderContent;
|
||||
}
|
||||
|
||||
if (Array.isArray(mProps.options)) {
|
||||
const selectedOption = mProps.options.find((option) => option.value === selected());
|
||||
return selectedOption?.label ?? placeholderContent;
|
||||
} else {
|
||||
for (const [, entry] of Object.entries(mProps.options)) {
|
||||
const option = entry.find((opt) => opt.value === selected());
|
||||
if (isNotNil(option)) {
|
||||
return option.label;
|
||||
}
|
||||
}
|
||||
return placeholderContent;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="relative inline-block">
|
||||
<div
|
||||
ref={trigger}
|
||||
aria-disabled={mProps.disabled}
|
||||
class={cx(
|
||||
'flex items-center gap-3 min-h-[1em] px-3 py-1.5 cursor-pointer aria-disabled:cursor-not-allowed',
|
||||
mProps.variant === 'normal' &&
|
||||
'rounded-sm bg-neutral text-on-neutral aria-disabled:text-neutral-disabled hover:not-aria-disabled:text-primary-hover',
|
||||
mProps.variant === 'underlined' &&
|
||||
'border-b border-solid pb-[calc(var(--spacing)*1.5-1px)] border-on-surface text-on-surface aria-disabled:border-neutral-disabled aria-disabled:text-neutral-disabled hover:not-aria-disabled:text-primary-hover hover:not-aria-disabled:border-primary-hover',
|
||||
mProps.variant === 'immersive' &&
|
||||
'text-on-surface hover:not-aria-disabled:text-primary-hover aria-disabled:text-neutral-disabled',
|
||||
)}>
|
||||
<div class="flex-1 flex flex-row items-center truncate">
|
||||
<Dynamic component={displayLabel} />
|
||||
</div>
|
||||
<Icon
|
||||
icon="hugeicons:arrow-down-01"
|
||||
class={cx(
|
||||
'transition-transform duration-300',
|
||||
optionVisible() ? 'rotate-180' : 'rotate-none',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Show when={optionVisible()}>
|
||||
<Portal>
|
||||
<div
|
||||
ref={optionFrame}
|
||||
class="absolute z-[15] w-auto rounded-sm bg-surface-active px-1 py-1 elevation-1">
|
||||
<ScrollArea enableY fullSize>
|
||||
<Switch fallback={<GroupedOptions options={mProps.options} />}>
|
||||
<Match when={Array.isArray(mProps.options)}>
|
||||
<SimpleOptions options={mProps.options} />
|
||||
</Match>
|
||||
</Switch>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</Portal>
|
||||
</Show>
|
||||
<Show when={isNotNil(mProps.name)}>
|
||||
<input type="hidden" name={mProps.name} value={selected()} />
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Select;
|
||||
Reference in New Issue
Block a user