|  |  |  | @ -1,19 +1,27 @@ | 
			
		
	
		
			
				
					|  |  |  |  | import React, { memo, FC, useMemo, useState } from 'react'; | 
			
		
	
		
			
				
					|  |  |  |  | import React, { useEffect, FC, useMemo, useState, useRef } from 'react'; | 
			
		
	
		
			
				
					|  |  |  |  | import style from './index.module.scss'; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | import { defaultTheme } from '@/core/config'; | 
			
		
	
		
			
				
					|  |  |  |  | export interface switchType { | 
			
		
	
		
			
				
					|  |  |  |  |   sole: string; | 
			
		
	
		
			
				
					|  |  |  |  |   label: string; | 
			
		
	
		
			
				
					|  |  |  |  |   onChange?: Function; | 
			
		
	
		
			
				
					|  |  |  |  |   theme?: string; | 
			
		
	
		
			
				
					|  |  |  |  | } | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const Index: FC<switchType> = function Index({ sole, label, onChange }) { | 
			
		
	
		
			
				
					|  |  |  |  | const Index: FC<switchType> = function Index({ sole, label, onChange, theme }) { | 
			
		
	
		
			
				
					|  |  |  |  |   const [on, setOn] = useState('no'); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   const refs = useRef<HTMLInputElement>(null!); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   const switchChange: React.ChangeEventHandler<HTMLInputElement> = (e) => { | 
			
		
	
		
			
				
					|  |  |  |  |     const status = e.target.value === 'yes' ? 'no' : 'yes'; | 
			
		
	
		
			
				
					|  |  |  |  |     setOn(status); | 
			
		
	
		
			
				
					|  |  |  |  |     onChange && onChange(status); | 
			
		
	
		
			
				
					|  |  |  |  |   }; | 
			
		
	
		
			
				
					|  |  |  |  |   useEffect(() => { | 
			
		
	
		
			
				
					|  |  |  |  |     refs.current.style.setProperty('--JoL-theme', theme ? theme : defaultTheme); | 
			
		
	
		
			
				
					|  |  |  |  |   }, [theme]); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   const render = useMemo( | 
			
		
	
		
			
				
					|  |  |  |  |     () => ( | 
			
		
	
		
			
				
					|  |  |  |  |       <div className={style.container}> | 
			
		
	
	
		
			
				
					|  |  |  | @ -21,6 +29,7 @@ const Index: FC<switchType> = function Index({ sole, label, onChange }) { | 
			
		
	
		
			
				
					|  |  |  |  |           {label} | 
			
		
	
		
			
				
					|  |  |  |  |         </label> | 
			
		
	
		
			
				
					|  |  |  |  |         <input | 
			
		
	
		
			
				
					|  |  |  |  |           ref={refs} | 
			
		
	
		
			
				
					|  |  |  |  |           className={style.switch} | 
			
		
	
		
			
				
					|  |  |  |  |           type="checkbox" | 
			
		
	
		
			
				
					|  |  |  |  |           id={sole} | 
			
		
	
	
		
			
				
					|  |  |  | 
 |