/* * Copyright 2020 Adobe. All rights reserved. * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ import {AriaToggleProps} from '@react-types/checkbox'; import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils'; import {InputHTMLAttributes, LabelHTMLAttributes} from 'react'; import {RefObject} from '@react-types/shared'; import {ToggleState} from '@react-stately/toggle'; import {useFocusable, usePress} from '@react-aria/interactions'; export interface ToggleAria { /** Props to be spread on the label element. */ labelProps: LabelHTMLAttributes, /** Props to be spread on the input element. */ inputProps: InputHTMLAttributes, /** Whether the toggle is selected. */ isSelected: boolean, /** Whether the toggle is in a pressed state. */ isPressed: boolean, /** Whether the toggle is disabled. */ isDisabled: boolean, /** Whether the toggle is read only. */ isReadOnly: boolean, /** Whether the toggle is invalid. */ isInvalid: boolean } /** * Handles interactions for toggle elements, e.g. Checkboxes and Switches. */ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefObject): ToggleAria { let { isDisabled = false, isReadOnly = false, value, name, form, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, validationState = 'valid', isInvalid, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick } = props; let onChange = (e) => { // since we spread props on label, onChange will end up there as well as in here. // so we have to stop propagation at the lowest level that we care about e.stopPropagation(); state.setSelected(e.target.checked); }; let hasChildren = children != null; let hasAriaLabel = ariaLabel != null || ariaLabelledby != null; if (!hasChildren && !hasAriaLabel && process.env.NODE_ENV !== 'production') { console.warn('If you do not provide children, you must specify an aria-label for accessibility'); } // Handle press state for keyboard interactions and cases where labelProps is not used. let {pressProps, isPressed} = usePress({ onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick, isDisabled }); // Handle press state on the label. let {pressProps: labelProps, isPressed: isLabelPressed} = usePress({ onPressStart, onPressEnd, onPressChange, onPressUp, onClick, onPress(e) { onPress?.(e); state.toggle(); ref.current?.focus(); }, isDisabled: isDisabled || isReadOnly }); let {focusableProps} = useFocusable(props, ref); let interactions = mergeProps(pressProps, focusableProps); let domProps = filterDOMProps(props, {labelable: true}); useFormReset(ref, state.defaultSelected, state.setSelected); return { labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}), inputProps: mergeProps(domProps, { 'aria-invalid': isInvalid || validationState === 'invalid' || undefined, 'aria-errormessage': props['aria-errormessage'], 'aria-controls': props['aria-controls'], 'aria-readonly': isReadOnly || undefined, onChange, disabled: isDisabled, ...(value == null ? {} : {value}), name, form, type: 'checkbox', ...interactions }), isSelected: state.isSelected, isPressed: isPressed || isLabelPressed, isDisabled, isReadOnly, isInvalid: isInvalid || validationState === 'invalid' }; }