style features and options components
This commit is contained in:
parent
7f868c5a26
commit
953c403f3b
8 changed files with 95 additions and 47 deletions
|
@ -21,7 +21,9 @@ div.App {
|
|||
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
|
||||
|
||||
div {
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
max-height: 85vh;
|
||||
margin: 1em;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -37,22 +37,35 @@ const Epochs = ({epochs, dispatch}) => {
|
|||
})
|
||||
}
|
||||
|
||||
const renderAddEpochButton = index => {
|
||||
if (index === epochs.length - 1 ) return (
|
||||
<form onSubmit={e=>addEpoch(e)}>
|
||||
<input type="submit" name="add-epoch" value="Add Epoch" ></input>
|
||||
</form>
|
||||
)
|
||||
return <></>
|
||||
}
|
||||
|
||||
const renderEpochs = () => {
|
||||
if (epochs) return epochs.map((epoch, index) => (
|
||||
<SoundChangeSuite
|
||||
key={`epoch-${index}`} epochIndex={index} epoch={epoch}
|
||||
updateEpoch={updateEpoch} removeEpoch={removeEpoch}
|
||||
// error={errors[epoch.name]}
|
||||
/>
|
||||
));
|
||||
<div
|
||||
className="SoundChangeSuite"
|
||||
data-testid={`${epoch.name}_SoundChangeSuite`}
|
||||
key={`epoch-${index}`}
|
||||
>
|
||||
<SoundChangeSuite
|
||||
epochIndex={index} epoch={epoch}
|
||||
updateEpoch={updateEpoch} removeEpoch={removeEpoch}
|
||||
// error={errors[epoch.name]}
|
||||
/>
|
||||
{renderAddEpochButton(index)}
|
||||
</div>
|
||||
));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{ renderEpochs() }
|
||||
<form onSubmit={e=>addEpoch(e)}>
|
||||
<input type="submit" name="add-epoch" value="Add Epoch" ></input>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -21,8 +21,22 @@ const parsePhonesFromFeatureObject = featureObject => {
|
|||
const { plus, minus } = feature[featureName];
|
||||
return (
|
||||
<li key={`feature__${featureName}`}>
|
||||
<span className="plus-phones">{`[+ ${featureName}] = ${plus}`}</span>
|
||||
<span className="minus-phones">{`[- ${featureName}] = ${minus}`}</span>
|
||||
<span className="feature--names-and-phones">
|
||||
<span className="feature--feature-name">
|
||||
{`[+ ${featureName}]`}
|
||||
</span>
|
||||
<span className="feature--feature-phones">
|
||||
{plus}
|
||||
</span>
|
||||
</span>
|
||||
<span className="feature--names-and-phones">
|
||||
<span className="feature--feature-name">
|
||||
{`[- ${featureName}]`}
|
||||
</span>
|
||||
<span className="feature--feature-phones">
|
||||
{minus}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
@ -82,20 +96,22 @@ const Features = ({ phones, features, dispatch }) => {
|
|||
></input>
|
||||
|
||||
{/* ! Positive Phones */}
|
||||
<label htmlFor="positive-phones">+</label>
|
||||
<input
|
||||
id="positive-phones"
|
||||
type="text" name="phonemes"
|
||||
value={newPositivePhones} onChange={e=> setNewPositivePhones(e.target.value)}
|
||||
></input>
|
||||
<label htmlFor="positive-phones">+
|
||||
<input
|
||||
id="positive-phones"
|
||||
type="text" name="phonemes"
|
||||
value={newPositivePhones} onChange={e=> setNewPositivePhones(e.target.value)}
|
||||
></input>
|
||||
</label>
|
||||
|
||||
{/* ! Negative Phones */}
|
||||
<label htmlFor="negative-phones">-</label>
|
||||
<input
|
||||
id="negative-phones"
|
||||
type="text" name="phonemes"
|
||||
value={newNegativePhones} onChange={e=> setNewNegativePhones(e.target.value)}
|
||||
></input>
|
||||
<label htmlFor="negative-phones">-
|
||||
<input
|
||||
id="negative-phones"
|
||||
type="text" name="phonemes"
|
||||
value={newNegativePhones} onChange={e=> setNewNegativePhones(e.target.value)}
|
||||
></input>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="submit"
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
div.Features {
|
||||
max-width: 85%;
|
||||
|
||||
ul.Features__list li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
span.feature--names-and-phones {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||
}
|
||||
|
||||
span.feature-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
input {
|
||||
margin: 0.1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -6,7 +6,7 @@ const Options = ({ options, dispatch }) => {
|
|||
const [ load, setLoad ] = useState('');
|
||||
|
||||
const handleRadioChange = e => {
|
||||
const { name, id } = e.target.name;
|
||||
const { name, id } = e.target;
|
||||
dispatch({
|
||||
type: 'SET_OPTIONS',
|
||||
value: {
|
||||
|
@ -16,18 +16,6 @@ const Options = ({ options, dispatch }) => {
|
|||
});
|
||||
}
|
||||
|
||||
const handleCheckChange = e => {
|
||||
const option = e.target.name;
|
||||
const setValue = e.target.checked ? 'true' : 'false';
|
||||
dispatch({
|
||||
type: 'SET_OPTIONS',
|
||||
value: {
|
||||
option,
|
||||
setValue
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleFormSubmit = (e, options) => {
|
||||
e.preventDefault();
|
||||
dispatch({
|
||||
|
@ -48,7 +36,7 @@ const Options = ({ options, dispatch }) => {
|
|||
type="radio" name="output" id="default"
|
||||
checked={options ? options.output === 'default' : true}
|
||||
onChange={e=>handleRadioChange(e)}
|
||||
/>
|
||||
/>
|
||||
<label htmlFor="default">Default
|
||||
<span className="Options__output-example"> output</span>
|
||||
</label>
|
||||
|
@ -71,13 +59,6 @@ const Options = ({ options, dispatch }) => {
|
|||
<span className="Options__output-example"> *proto > *epoch > output</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="checkbox" name="save"
|
||||
checked={options ? options.save : false}
|
||||
onChange={e=>handleCheckChange(e)}
|
||||
/>
|
||||
<label htmlFor="save">Store session on Run</label>
|
||||
|
||||
<input type="submit" value="Run Changes"></input>
|
||||
</form>
|
||||
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
div.Options {
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
}
|
|
@ -14,7 +14,7 @@ const SoundChangeSuite = props => {
|
|||
}, [epoch])
|
||||
|
||||
return (
|
||||
<div className="SoundChangeSuite" data-testid={`${epoch.name}_SoundChangeSuite`}>
|
||||
<>
|
||||
<h4>{epoch.name}</h4>
|
||||
<form className="SoundChangeSuite__form" data-testid={`${epoch.name}_SoundChangeSuite_changes`}>
|
||||
|
||||
|
@ -46,7 +46,7 @@ const SoundChangeSuite = props => {
|
|||
<form onSubmit={e=>props.removeEpoch(e, epoch.name)}>
|
||||
<input type="submit" name="remove-epoch" value={`remove ${epoch.name}`}></input>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -276,6 +276,7 @@ export const run = (state: stateType, action: resultsAction): stateType => {
|
|||
}, []);
|
||||
|
||||
const results = passResults.map(stringifyResults);
|
||||
console.log(results)
|
||||
return {...state, results }
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
|
|
Loading…
Reference in a new issue