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

Merge pull request #307 from vector-im/dbkr/fix_toggle

Browse source 
Fix toggle button toggling
This commit is contained in:
Robert Long 2022-05-02 11:30:05 -07:00 committed by GitHub
commit c7dd2e2093
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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} />