import React , { useEffect , useState } from "react" ; import { Button , Spacer } from "@geist-ui/react" ; import XCircle from "@geist-ui/react-icons/xCircle" ; import { useStorageState } from "@/utils/hooks" ; import produce from "immer" ; import Input from "@/components/input" ; import { gen } from "@/parser" ; import { astAtom , useAtomValue } from "@/atom" ; const TestTab = ( ) => { const [ cases , setCases ] = useStorageState < string [ ] > ( "test-case" , [ "" ] ) ; const ast = useAtomValue ( astAtom ) ; const [ regExp , setRegExp ] = useState < RegExp > ( ( ) => { const regex = gen ( ast , false ) ; return new RegExp ( regex , ast . flags . join ( "" ) ) ; } ) ; useEffect ( ( ) => { if ( cases . length === 0 ) { setCases ( [ "" ] ) ; } } , [ cases ] ) ; useEffect ( ( ) => { const regex = gen ( ast , false ) ; const regExp = new RegExp ( regex , ast . flags . join ( "" ) ) ; setRegExp ( regExp ) ; } , [ ast ] ) ; const handleInputChange = ( value , index ) => { setCases ( produce ( cases , ( draft ) => { draft [ index ] = value ; } ) ) ; } ; const handleRemove = ( index ) => { setCases ( produce ( cases , ( draft ) => { draft . splice ( index , 1 ) ; } ) ) ; } ; const handleAdd = ( ) => { setCases ( produce ( cases , ( draft ) => { draft . push ( "" ) ; } ) ) ; } ; return ( < > < div className = "wrapper" > { cases . map ( ( value , index ) => ( < React . Fragment key = { index } > < div className = "case-input" > < Input value = { value } width = "215px" status = { regExp . test ( value ) ? "success" : "error" } onChange = { ( value ) => handleInputChange ( value , index ) } /> < XCircle cursor = "pointer" onClick = { ( ) => handleRemove ( index ) } /> < /div> < Spacer y = { 0.5 } / > < /React.Fragment>))} < div className = "btn" > < Button onClick = { handleAdd } > Add A Case < /Button> < /div> < /div> < style jsx > { `
        .wrapper {
          padding: 24px 12px;
        }
        .case-input {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .btn {
          display: flex;
          justify-content: center;
        }
      ` } < /style> < />); } ; export default TestTab ;