50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
/* 开关组件 - 用于切换启用/禁用状态 */
|
|
|
|
interface SwitchProps {
|
|
checked: boolean;
|
|
onChange?: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
className?: string;
|
|
id?: string;
|
|
}
|
|
|
|
export function Switch({
|
|
checked,
|
|
onChange,
|
|
disabled = false,
|
|
loading = false,
|
|
className = '',
|
|
id
|
|
}: SwitchProps) {
|
|
const handleClick = () => {
|
|
if (!disabled && !loading && onChange) {
|
|
onChange(!checked);
|
|
}
|
|
};
|
|
|
|
const isDisabled = disabled || loading;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
id={id}
|
|
className={`
|
|
switch
|
|
${checked ? 'switch-checked' : 'switch-unchecked'}
|
|
${isDisabled ? 'switch-disabled' : ''}
|
|
${loading ? 'switch-loading' : ''}
|
|
${className}
|
|
`}
|
|
onClick={handleClick}
|
|
disabled={isDisabled}
|
|
aria-checked={checked}
|
|
role="switch"
|
|
>
|
|
<span className={`switch-handle ${checked ? 'switch-handle-checked' : 'switch-handle-unchecked'}`}>
|
|
{loading && <span className="switch-loading-icon"></span>}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|