packageDocumentation module import "./Toggle.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { CommonProps } from "../utils/Props" ; import { useRefs } from "../utils/hooks/useRefs" ; public deprecated export enum ToggleButtonType { /** Primary (green) background */ Primary , /** Blue background */ Blue } public deprecated export interface ToggleProps extends CommonProps { /** Indicates whether the Toggle is disabled (default is false) */ disabled ? : boolean ; /** Indicates whether the Toggle is "on" or "off" (default is false) */ isOn ? : boolean ; /** Show the toggle rounded or square (rounded is default) */ rounded ? : boolean ; /** Show a check mark icon when the toggle is "on" (false is default) */ showCheckmark ? : boolean ; deprecated buttonType ? : ToggleButtonType ; /** Function called when the toggle state is changed */ onChange ? : ( checked : boolean ) => any ; /** Function called when the toggle loses focus  */ onBlur ? : ( event : React . FocusEvent ) => any ; /** Use larger size (default is false) */ large ? : boolean ; /** Indicates whether to set focus to the input element */ setFocus ? : boolean ; /** Tooltip text */ title ? : string ; /** Provides ability to return reference to HTMLInputElement */ ref ? : React . Ref < HTMLInputElement > ; } const ForwardRefToggle = React . forwardRef < HTMLInputElement , ToggleProps > ( function ForwardRefToggle ( props , ref ) { const inputElement = React . useRef < HTMLInputElement > ( null ) ; const refs = useRefs ( inputElement , ref ) ; const padding = 2 ; const defaultHeight = props . large ? 32 : 21 ; const [ height , setHeight ] = React . useState ( defaultHeight ) ; const [ width , setWidth ] = React . useState ( defaultHeight * 2 ) ; const [ checked , setChecked ] = React . useState ( props . isOn ? true : false ) ; const [ toggling , setToggling ] = React . useState ( false ) ; React . useEffect ( ( ) => { if ( props . setFocus && inputElement . current ) inputElement . current . focus ( ) ; } , [ props ] ) ; React . useEffect ( ( ) => { setChecked ( props . isOn ? true : false ) ; } , [ props . isOn ] ) ; const handleChange = React . useCallback ( ( ) => { const newChecked = ! checked ; setToggling ( true ) ; setChecked ( newChecked ) ; if ( props . onChange ) props . onChange ( newChecked ) ; setTimeout ( ( ) => { if ( inputElement . current ) setToggling ( false ) ; } , 250 ) ; } , [ props , checked ] ) ; const handleBlur = React . useCallback ( ( event ) => { if ( props . onBlur ) props . onBlur ( event ) ; } , [ props ] ) ; const handleCheckboxBlur = React . useCallback ( ( event ) => { event . stopPropagation ( ) ; } , [ ] ) ; const setHeightFromRef = React . useCallback ( ( el ) => { if ( el !== null ) { if ( el . clientHeight > 0 && el . clientWidth > 0 ) { setHeight ( el . clientHeight ) ; setWidth ( el . clientWidth ) ; } } } , [ ] ) ; const getOffset = ( ) : number => { return ( checked ) ? width - height : 0 ; } ; /** Default props */ const rounded = props . rounded !== undefined ? props . rounded : true ; const showCheckmark = props . showCheckmark !== undefined ? props . showCheckmark : false ; const buttonType = props . buttonType !== undefined ? props . buttonType : ToggleButtonType . Blue ; const halfHeight = height / 2 ; const checkmarkClassName = classnames ( "core-toggle-checkmark" , "icon" , "icon-checkmark" , showCheckmark && "core-visible" , toggling && "core-toggling" ) ; const toggleStyle = { borderRadius : rounded ? halfHeight : 3 , fontSize : halfHeight , ... props . style } ; const toggleClassName = classnames ( "core-toggle" , buttonType === ToggleButtonType . Primary && "core-toggle-primary" , props . large && "core-toggle-large" , rounded && "core-toggle-rounded" , props . disabled && "uicore-disabled" , props . className ) ; const toggleHandleStyle = { width : height - ( padding * 2 ) , transform : `translateX(${ getOffset ( ) }px)` , top : padding , bottom : padding , left : padding } ; const handleClassName = classnames ( "core-toggle-handle" , toggling && "core-toggling" ) ; return ( < label ref = { setHeightFromRef } style = { toggleStyle } className = { toggleClassName } onBlur = { handleBlur } > < input type = "checkbox" ref = { refs } className = "core-toggle-input" checked = { checked } disabled = { props . disabled } onChange = { handleChange } onBlur = { handleCheckboxBlur } title = { props . title } / > < span className = "core-toggle-background" / > < span className = { checkmarkClassName } /> < span className = { handleClassName } style = { toggleHandleStyle } / > < /label>); } ) ; public deprecated export const Toggle = ForwardRefToggle ;