@loke/ui
Version:
2 lines (1 loc) • 3.25 kB
JavaScript
import{composeEventHandlers}from"@loke/ui/compose-events";import{useComposedRefs}from"@loke/ui/compose-refs";import{createContextScope}from"@loke/ui/context";import{Primitive}from"@loke/ui/primitive";import{useControllableState}from"@loke/ui/use-controllable-state";import{usePrevious}from"@loke/ui/use-previous";import{useSize}from"@loke/ui/use-size";import{forwardRef,useEffect,useRef,useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";var SWITCH_NAME="Switch",[createSwitchContext,createSwitchScope]=createContextScope(SWITCH_NAME),[SwitchProvider,useSwitchContext]=createSwitchContext(SWITCH_NAME),Switch=forwardRef((props,forwardedRef)=>{let{__scopeSwitch,name,checked:checkedProp,defaultChecked,required,disabled,value="on",onCheckedChange,form,...switchProps}=props,[button,setButton]=useState(null),composedRefs=useComposedRefs(forwardedRef,(node)=>setButton(node)),hasConsumerStoppedPropagationRef=useRef(!1),isFormControl=button?form||!!button.closest("form"):!0,[checked,setChecked]=useControllableState({caller:SWITCH_NAME,defaultProp:defaultChecked??!1,onChange:onCheckedChange,prop:checkedProp});return jsxs(SwitchProvider,{checked,disabled,scope:__scopeSwitch,children:[jsx(Primitive.button,{"aria-checked":checked,"aria-required":required,"data-disabled":disabled?"":void 0,"data-state":getState(checked),disabled,role:"switch",type:"button",value,...switchProps,onClick:composeEventHandlers(props.onClick,(event)=>{if(setChecked((prevChecked)=>!prevChecked),isFormControl){if(hasConsumerStoppedPropagationRef.current=event.isPropagationStopped(),!hasConsumerStoppedPropagationRef.current)event.stopPropagation()}}),ref:composedRefs}),isFormControl&&jsx(SwitchBubbleInput,{bubbles:!hasConsumerStoppedPropagationRef.current,checked,control:button,disabled,form,name,required,style:{transform:"translateX(-100%)"},value})]})});Switch.displayName=SWITCH_NAME;var THUMB_NAME="SwitchThumb",SwitchThumb=forwardRef((props,forwardedRef)=>{let{__scopeSwitch,...thumbProps}=props,context=useSwitchContext(THUMB_NAME,__scopeSwitch);return jsx(Primitive.span,{"data-disabled":context.disabled?"":void 0,"data-state":getState(context.checked),...thumbProps,ref:forwardedRef})});SwitchThumb.displayName=THUMB_NAME;var BUBBLE_INPUT_NAME="SwitchBubbleInput",SwitchBubbleInput=forwardRef(({__scopeSwitch,control,checked,bubbles=!0,...props},forwardedRef)=>{let ref=useRef(null),composedRefs=useComposedRefs(ref,forwardedRef),prevChecked=usePrevious(checked),controlSize=useSize(control);return useEffect(()=>{let input=ref.current;if(!input)return;let inputProto=window.HTMLInputElement.prototype,setChecked=Object.getOwnPropertyDescriptor(inputProto,"checked").set;if(prevChecked!==checked&&setChecked){let event=new Event("click",{bubbles});setChecked.call(input,checked),input.dispatchEvent(event)}},[prevChecked,checked,bubbles]),jsx("input",{"aria-hidden":!0,defaultChecked:checked,type:"checkbox",...props,ref:composedRefs,style:{...props.style,...controlSize,margin:0,opacity:0,pointerEvents:"none",position:"absolute"},tabIndex:-1})});SwitchBubbleInput.displayName=BUBBLE_INPUT_NAME;function getState(checked){return checked?"checked":"unchecked"}var Root=Switch,Thumb=SwitchThumb;export{createSwitchScope,Thumb,SwitchThumb,Switch,Root};