feat(Select): 添加只读属性并优化相关交互
- 在 Select 组件的Props中添加 readonly 属性 - 当组件为只读状态时,禁用下拉框的展开和收缩功能 - 在触发器元素上添加 aria-readonly 属性,提高无障碍访问性 - 调整样式,使只读状态下的组件外观保持一致
This commit is contained in:
@@ -108,6 +108,7 @@ interface SelectProps {
|
|||||||
value?: Option['value'];
|
value?: Option['value'];
|
||||||
defaultValue?: Option['value'];
|
defaultValue?: Option['value'];
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
readonly?: boolean;
|
||||||
onChange?: (value: Option['value']) => void;
|
onChange?: (value: Option['value']) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -118,6 +119,7 @@ const Select: Component<SelectProps> = (props) => {
|
|||||||
placeholder: '',
|
placeholder: '',
|
||||||
options: [],
|
options: [],
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
readonly: false,
|
||||||
},
|
},
|
||||||
props,
|
props,
|
||||||
);
|
);
|
||||||
@@ -209,7 +211,9 @@ const Select: Component<SelectProps> = (props) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
clearTimeout(hideOptionTimer);
|
clearTimeout(hideOptionTimer);
|
||||||
setOptionVisible((prev) => !prev);
|
if (!mProps.readonly) {
|
||||||
|
setOptionVisible((prev) => !prev);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
const handleOptionClick = (value: Option['value']) => {
|
const handleOptionClick = (value: Option['value']) => {
|
||||||
if (selected() !== value) {
|
if (selected() !== value) {
|
||||||
@@ -228,8 +232,9 @@ const Select: Component<SelectProps> = (props) => {
|
|||||||
<div
|
<div
|
||||||
ref={trigger}
|
ref={trigger}
|
||||||
aria-disabled={mProps.disabled}
|
aria-disabled={mProps.disabled}
|
||||||
|
aria-readonly={mProps.readonly}
|
||||||
class={cx(
|
class={cx(
|
||||||
'flex items-center gap-3 min-h-[1em] px-3 py-1.5 cursor-pointer aria-disabled:cursor-not-allowed',
|
'flex items-center gap-3 min-h-[1em] px-3 py-1.5 cursor-pointer aria-disabled:cursor-not-allowed aria-readonly:cursor-not-allowed',
|
||||||
mProps.variant === 'normal' &&
|
mProps.variant === 'normal' &&
|
||||||
'rounded-sm bg-neutral text-on-neutral aria-disabled:text-neutral-disabled hover:not-aria-disabled:text-primary-hover',
|
'rounded-sm bg-neutral text-on-neutral aria-disabled:text-neutral-disabled hover:not-aria-disabled:text-primary-hover',
|
||||||
mProps.variant === 'underlined' &&
|
mProps.variant === 'underlined' &&
|
||||||
|
Reference in New Issue
Block a user