connect options form with options hook
This commit is contained in:
parent
63ec56e458
commit
02b21b2aec
3 changed files with 37 additions and 14 deletions
|
@ -12,13 +12,14 @@ const PhonoChangeApplier = () => {
|
||||||
{ phoneme: [ 'feature' ] }
|
{ phoneme: [ 'feature' ] }
|
||||||
);
|
);
|
||||||
const [ epochs, setEpochs ] = useState([{name: 'epoch 1', changes:['[+ feature]>[- feature]/_#']}]);
|
const [ epochs, setEpochs ] = useState([{name: 'epoch 1', changes:['[+ feature]>[- feature]/_#']}]);
|
||||||
|
const [ options, setOptions ] = useState({output: 'default', save: false})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
|
||||||
<ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
|
<ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
|
||||||
<Features phonemes={phonemes} setPhonemes={setPhonemes}/>
|
<Features phonemes={phonemes} setPhonemes={setPhonemes}/>
|
||||||
<Epochs epochs={epochs} setEpochs={setEpochs}/>
|
<Epochs epochs={epochs} setEpochs={setEpochs}/>
|
||||||
<Options />
|
<Options options={options} setOptions={setOptions}/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,35 +2,52 @@ import React from 'react';
|
||||||
import './Options.scss';
|
import './Options.scss';
|
||||||
|
|
||||||
const Options = props => {
|
const Options = props => {
|
||||||
|
const handleRadioChange = e => {
|
||||||
|
props.setOptions({...props.options, [e.target.name]: e.target.id})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCheckChange = e => {
|
||||||
|
props.setOptions({...props.options, [e.target.name]: e.target.checked})
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Options" data-testid="Options">
|
<div className="Options" data-testid="Options">
|
||||||
<h3>Modeling Options</h3>
|
<h3>Modeling Options</h3>
|
||||||
<form onSubmit={()=>{}}>
|
<form onSubmit={()=>{}} data-testid="Options-form">
|
||||||
|
|
||||||
{/* <h5>Output</h5> */}
|
{/* <h5>Output</h5> */}
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="radio" name="output" id="output-default" defaultChecked
|
type="radio" name="output" id="default"
|
||||||
|
checked={props.options ? props.options.output === 'default' : true}
|
||||||
|
onChange={e=>handleRadioChange(e)}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="output-default">Default
|
<label htmlFor="default">Default
|
||||||
<span className="Options__output-example"> output</span>
|
<span className="Options__output-example"> output</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="radio" name="output" id="output-proto"
|
type="radio" name="output" id="proto"
|
||||||
|
checked={props.options ? props.options.output === 'proto' : false}
|
||||||
|
onChange={e=>handleRadioChange(e)}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="output-proto">Proto
|
<label htmlFor="proto">Proto
|
||||||
<span className="Options__output-example"> output [proto]</span>
|
<span className="Options__output-example"> output [proto]</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="radio" name="output" id="output-diachronic"
|
type="radio" name="output" id="diachronic"
|
||||||
/><label htmlFor="output-diachronic">Diachronic
|
checked={props.options ? props.options.output === 'diachronic' : false}
|
||||||
|
onChange={e=>handleRadioChange(e)}
|
||||||
|
/>
|
||||||
|
<label htmlFor="diachronic">Diachronic
|
||||||
<span className="Options__output-example"> *proto > *epoch > output</span>
|
<span className="Options__output-example"> *proto > *epoch > output</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="checkbox" name="save"
|
type="checkbox" name="save"
|
||||||
|
checked={props.options ? props.options.save : false}
|
||||||
|
onChange={e=>handleCheckChange(e)}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="save">Store session on Run</label>
|
<label htmlFor="save">Store session on Run</label>
|
||||||
|
|
||||||
|
|
|
@ -19,4 +19,9 @@ describe('Options', () => {
|
||||||
expect(getByTestId('Options')).toHaveTextContent('Modeling Options');
|
expect(getByTestId('Options')).toHaveTextContent('Modeling Options');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders form options from props', () => {
|
||||||
|
let options = {output: 'proto', save: true}
|
||||||
|
const { getByTestId } = render(<Options options={options} />)
|
||||||
|
expect(getByTestId('Options-form')).toHaveFormValues(options);
|
||||||
|
})
|
||||||
});
|
});
|
Loading…
Reference in a new issue