atomicpages / pretty-checkbox-react / 8915003455

coverage: 100.0%. Remained the same

Source File
Press 'n' to go to next uncovered line, 'b' for previous

100.0
/src/components/switch/Switch.tsx
1 
import * as React from 'react';
1✔
2 
import clsx from 'clsx';
1✔
3 









4



import { useClassNames } from '../../hooks/utility/useClassNames';




1✔





5



import { useControlled } from '../../hooks/utility/useControlled';




1✔





6



import { UseRadioState } from '../..';










7



import { useLocked } from '../../hooks/utility/useLocked';




1✔





8



import { State } from '../state/State';




1✔





9












10



import { PCRSwitchProps } from '../../typings/PCRSwitchProps';










11



import { useCommonProps } from '../../hooks/utility/useCommonProps';




1✔





12



import { UseCheckboxState } from '../checkbox/Checkbox';










13



import mergeRefs from 'react-merge-refs';




1✔





14



import { useAriaChecked } from './useAriaChecked';




1✔





15












16



export type SwitchProps<










17



  S = UseRadioState['state'] | UseCheckboxState['state']










18



> = PCRSwitchProps<S>;










19












20



export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(




1✔





21



  (props, ref) => {










22



    const { checked, value, state, ...rest } = useControlled<




5✔





23



      UseRadioState['state'] | UseCheckboxState['state'],










24



      SwitchProps










25



    >(props);










26












27



    const { children, locked, color, id, className, style, htmlProps } =










28



      useCommonProps(rest);




5✔





29



    const styles = useLocked({ locked, style });




5✔





30












31



    const htmlRef = useAriaChecked({ setState: props.setState, checked });




5✔





32












33



    return (




5✔





34



      <div










35



        style={styles}










36



        className={clsx(










37



          'pretty',










38



          'p-switch',










39



          useClassNames(props, true),










40



          className










41



        )}










42



      >










43



        <input










44



          ref={mergeRefs([ref, htmlRef])}










45



          type="checkbox"










46



          role="switch"










47



          value={value}










48



          id={id}










49



          // required for role="switch"










50



          // @see https://www.w3.org/TR/wai-aria-1.1/#switch










51



          aria-checked={checked}










52



          checked={checked}










53



          {...htmlProps}










54



        />










55



        <State id={id} color={color}>










56



          {children}










57



        </State>










58



      </div>










59



    );










60



  }










61



);










62












63



Switch.displayName = 'Switch';




1✔



















    

  • 

    •