feat(components): 为复选框和单选框组件添加只读属性
- 在 CheckBoxProps、RadioProps 和 RadioGroupProps 接口中添加 readonly 属性 - 在 Check、Radio 和 RadioGroup 组件中实现只读逻辑 - 修改 handleClick 和 handleSelect 方法,增加对只读属性的判断
This commit is contained in:
@@ -17,6 +17,7 @@ interface CheckBoxProps {
|
|||||||
checked?: boolean;
|
checked?: boolean;
|
||||||
defaultChecked?: boolean;
|
defaultChecked?: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
readonly?: boolean;
|
||||||
onChange?: (checked?: boolean) => void;
|
onChange?: (checked?: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -35,6 +36,7 @@ const Check: ParentComponent<CheckBoxProps> = (props) => {
|
|||||||
const mProps = mergeProps<ParentProps<CheckBoxProps>[]>(
|
const mProps = mergeProps<ParentProps<CheckBoxProps>[]>(
|
||||||
{
|
{
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
readonly: false,
|
||||||
},
|
},
|
||||||
props,
|
props,
|
||||||
);
|
);
|
||||||
@@ -54,7 +56,7 @@ const Check: ParentComponent<CheckBoxProps> = (props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
if (mProps.disabled) {
|
if (mProps.disabled || mProps.readonly) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setInternalChecked((prev) => !prev);
|
setInternalChecked((prev) => !prev);
|
||||||
|
@@ -17,6 +17,7 @@ interface RadioProps {
|
|||||||
checked?: boolean;
|
checked?: boolean;
|
||||||
defaultChecked?: boolean;
|
defaultChecked?: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
readonly?: boolean;
|
||||||
onChange?: (value?: boolean) => void;
|
onChange?: (value?: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -35,6 +36,7 @@ const Radio: ParentComponent<RadioProps> = (props) => {
|
|||||||
const mProps = mergeProps<ParentProps<RadioProps>[]>(
|
const mProps = mergeProps<ParentProps<RadioProps>[]>(
|
||||||
{
|
{
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
readonly: false,
|
||||||
},
|
},
|
||||||
props,
|
props,
|
||||||
);
|
);
|
||||||
@@ -54,7 +56,7 @@ const Radio: ParentComponent<RadioProps> = (props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
if (mProps.disabled) {
|
if (mProps.disabled || mProps.readonly) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setInternalChecked((prev) => !prev);
|
setInternalChecked((prev) => !prev);
|
||||||
|
@@ -23,6 +23,7 @@ interface RadioGroupProps {
|
|||||||
value?: Option['value'];
|
value?: Option['value'];
|
||||||
defalutValue?: Option['value'];
|
defalutValue?: Option['value'];
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
readonly?: boolean;
|
||||||
onChange?: (value?: Option['value']) => void;
|
onChange?: (value?: Option['value']) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -31,6 +32,7 @@ const RadioGroup: Component<RadioGroupProps> = (props) => {
|
|||||||
{
|
{
|
||||||
options: [],
|
options: [],
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
readonly: false,
|
||||||
},
|
},
|
||||||
props,
|
props,
|
||||||
);
|
);
|
||||||
@@ -50,7 +52,7 @@ const RadioGroup: Component<RadioGroupProps> = (props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const handleSelect = (value: Option['value']) => {
|
const handleSelect = (value: Option['value']) => {
|
||||||
if (mProps.disabled) {
|
if (mProps.disabled || mProps.readonly) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setSelectedValue(value);
|
setSelectedValue(value);
|
||||||
@@ -64,6 +66,7 @@ const RadioGroup: Component<RadioGroupProps> = (props) => {
|
|||||||
<Radio
|
<Radio
|
||||||
checked={selectedValue() === option().value}
|
checked={selectedValue() === option().value}
|
||||||
disabled={mProps.disabled}
|
disabled={mProps.disabled}
|
||||||
|
readonly={mProps.readonly}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
handleSelect(option().value);
|
handleSelect(option().value);
|
||||||
}}>
|
}}>
|
||||||
|
Reference in New Issue
Block a user