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