xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

向Switch组件增加表单可用功能。

Browse Source
This commit is contained in:
徐涛 2025-02-07 15:07:30 +08:00
parent d98e3a69d9
commit d817024bf3
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Switch.tsx
View File

@ -1,15 +1,16 @@
import cx from 'clsx'; import cx from 'clsx';
import { isEqual } from 'lodash-es'; import { isEqual, isNil } from 'lodash-es';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import styles from './Switch.module.css'; import styles from './Switch.module.css';
type SwitchProps = { type SwitchProps = {
name?: string;
checked?: boolean; checked?: boolean;
disabled?: boolean; disabled?: boolean;
onChange?: (checked: boolean) => void; onChange?: (checked: boolean) => void;
}; };
export function Switch({ checked = false, disabled = false, onChange }: SwitchProps) { export function Switch({ name, checked = false, disabled = false, onChange }: SwitchProps) {
const [isChecked, setIsChecked] = useState(checked); const [isChecked, setIsChecked] = useState(checked);
const handleSwitch = useCallback(() => { const handleSwitch = useCallback(() => {
if (!disabled) { if (!disabled) {
@ -29,6 +30,7 @@ export function Switch({ checked = false, disabled = false, onChange }: SwitchPr
<div <div
className={cx(styles.switch_handle, isChecked && styles.checked)} className={cx(styles.switch_handle, isChecked && styles.checked)}
onClick={handleSwitch}></div> onClick={handleSwitch}></div>
{!isNil(name) && <input type="hidden" name={name} value={isChecked} />}
</div> </div>
); );
} }