refactor(components): 优化 Segments 组件
- 修复组件名称拼写错误,将 HSegmengts 改为 Segmengts - 增加禁用状态处理,优化用户体验 - 调整样式,确保禁用状态下的视觉反馈
This commit is contained in:
@@ -25,7 +25,7 @@ interface SegmentsProps {
|
|||||||
onChange?: (value: Option['value'] | undefined) => void;
|
onChange?: (value: Option['value'] | undefined) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const HSegmengts: Component<SegmentsProps> = (props) => {
|
export const Segmengts: Component<SegmentsProps> = (props) => {
|
||||||
const mProps = mergeProps<SegmentsProps[]>(
|
const mProps = mergeProps<SegmentsProps[]>(
|
||||||
{
|
{
|
||||||
options: [],
|
options: [],
|
||||||
@@ -62,12 +62,15 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const handleSelect = (value: Option['value']) => {
|
const handleSelect = (value: Option['value']) => {
|
||||||
|
if (mProps.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
setSelected(value);
|
setSelected(value);
|
||||||
mProps.onChange?.(value);
|
mProps.onChange?.(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="inline-block overflow-hidden rounded-sm bg-neutral p-1 select-none">
|
<div class="inline-block overflow-hidden rounded-sm p-1 select-none bg-neutral">
|
||||||
<div
|
<div
|
||||||
class={cx(
|
class={cx(
|
||||||
'relative flex',
|
'relative flex',
|
||||||
@@ -77,11 +80,12 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
|
|||||||
{(option, index) => (
|
{(option, index) => (
|
||||||
<div
|
<div
|
||||||
ref={(el) => (optionRefs[index] = el)}
|
ref={(el) => (optionRefs[index] = el)}
|
||||||
|
aria-disabled={mProps.disabled}
|
||||||
class={cx(
|
class={cx(
|
||||||
'z-[5] cursor-pointer rounded-sm px-2 py-1',
|
'z-[5] cursor-pointer rounded-sm px-2 py-1',
|
||||||
selected() === option().value
|
selected() === option().value
|
||||||
? 'text-on-primary-surface hover:bg-primary-surface-hover/45'
|
? 'not-aria-disabled:text-on-primary-surface aria-disabled:text-primary-disabled hover:not-aria-disabled:bg-primary-surface-hover/45'
|
||||||
: 'text-on-surface hover:bg-surface/35',
|
: 'not-aria-disabled:text-on-surface aria-disabled:text-surface-disabled hover:not-aria-disabled:bg-surface/35',
|
||||||
)}
|
)}
|
||||||
onClick={() => handleSelect(option().value)}>
|
onClick={() => handleSelect(option().value)}>
|
||||||
{option().label}
|
{option().label}
|
||||||
|
Reference in New Issue
Block a user