xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix toggle button toggling

Browse source 
Just use isSelected directly rather than makking the button have its
own state. Also, the isPressed from useToggleButton looks like its
whether the user has the mouse button down on it or not rather than
whether the toggle switch is on, which was making the state wrong.
This commit is contained in:
David Baker 2022-04-29 19:08:32 +01:00
parent 363f2340a0
commit 48a008093b
1 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/input/Toggle.jsx
View file

@ -1,20 +1,21 @@
import React, { useRef } from "react";
import React, { useCallback, useRef } from "react";
import styles from "./Toggle.module.css";
import { useToggleButton } from "@react-aria/button";
import { useToggleState } from "@react-stately/toggle";
import classNames from "classnames";
import { Field } from "./Input";
export function Toggle({ id, label, className, ...rest }) {
export function Toggle({ id, label, className, onChange, isSelected }) {
const buttonRef = useRef();
const state = useToggleState(rest);
const { buttonProps, isPressed } = useToggleButton(rest, state, buttonRef);
const toggle = useCallback(() => {
onChange(!isSelected);
});
const { buttonProps } = useToggleButton({ isSelected }, { toggle }, buttonRef);
return (
<Field
className={classNames(
styles.toggle,
{ [styles.on]: isPressed },
{ [styles.on]: isSelected },
className
)}
>
@ -23,7 +24,7 @@ export function Toggle({ id, label, className, ...rest }) {
ref={buttonRef}
id={id}
className={classNames(styles.button, {
[styles.isPressed]: isPressed,
[styles.isPressed]: isSelected,
})}
>
<div className={styles.ball} />