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));
|
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
|
||||||
div {
|
div {
|
||||||
padding: 1em;
|
width: 100%;
|
||||||
|
max-height: 85vh;
|
||||||
|
margin: 1em;
|
||||||
overflow-y: scroll;
|
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 = () => {
|
const renderEpochs = () => {
|
||||||
if (epochs) return epochs.map((epoch, index) => (
|
if (epochs) return epochs.map((epoch, index) => (
|
||||||
|
<div
|
||||||
|
className="SoundChangeSuite"
|
||||||
|
data-testid={`${epoch.name}_SoundChangeSuite`}
|
||||||
|
key={`epoch-${index}`}
|
||||||
|
>
|
||||||
<SoundChangeSuite
|
<SoundChangeSuite
|
||||||
key={`epoch-${index}`} epochIndex={index} epoch={epoch}
|
epochIndex={index} epoch={epoch}
|
||||||
updateEpoch={updateEpoch} removeEpoch={removeEpoch}
|
updateEpoch={updateEpoch} removeEpoch={removeEpoch}
|
||||||
// error={errors[epoch.name]}
|
// error={errors[epoch.name]}
|
||||||
/>
|
/>
|
||||||
|
{renderAddEpochButton(index)}
|
||||||
|
</div>
|
||||||
));
|
));
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{ renderEpochs() }
|
{ 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];
|
const { plus, minus } = feature[featureName];
|
||||||
return (
|
return (
|
||||||
<li key={`feature__${featureName}`}>
|
<li key={`feature__${featureName}`}>
|
||||||
<span className="plus-phones">{`[+ ${featureName}] = ${plus}`}</span>
|
<span className="feature--names-and-phones">
|
||||||
<span className="minus-phones">{`[- ${featureName}] = ${minus}`}</span>
|
<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>
|
</li>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
@ -82,20 +96,22 @@ const Features = ({ phones, features, dispatch }) => {
|
||||||
></input>
|
></input>
|
||||||
|
|
||||||
{/* ! Positive Phones */}
|
{/* ! Positive Phones */}
|
||||||
<label htmlFor="positive-phones">+</label>
|
<label htmlFor="positive-phones">+
|
||||||
<input
|
<input
|
||||||
id="positive-phones"
|
id="positive-phones"
|
||||||
type="text" name="phonemes"
|
type="text" name="phonemes"
|
||||||
value={newPositivePhones} onChange={e=> setNewPositivePhones(e.target.value)}
|
value={newPositivePhones} onChange={e=> setNewPositivePhones(e.target.value)}
|
||||||
></input>
|
></input>
|
||||||
|
</label>
|
||||||
|
|
||||||
{/* ! Negative Phones */}
|
{/* ! Negative Phones */}
|
||||||
<label htmlFor="negative-phones">-</label>
|
<label htmlFor="negative-phones">-
|
||||||
<input
|
<input
|
||||||
id="negative-phones"
|
id="negative-phones"
|
||||||
type="text" name="phonemes"
|
type="text" name="phonemes"
|
||||||
value={newNegativePhones} onChange={e=> setNewNegativePhones(e.target.value)}
|
value={newNegativePhones} onChange={e=> setNewNegativePhones(e.target.value)}
|
||||||
></input>
|
></input>
|
||||||
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="submit"
|
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 [ load, setLoad ] = useState('');
|
||||||
|
|
||||||
const handleRadioChange = e => {
|
const handleRadioChange = e => {
|
||||||
const { name, id } = e.target.name;
|
const { name, id } = e.target;
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'SET_OPTIONS',
|
type: 'SET_OPTIONS',
|
||||||
value: {
|
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) => {
|
const handleFormSubmit = (e, options) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
dispatch({
|
dispatch({
|
||||||
|
@ -71,13 +59,6 @@ const Options = ({ options, dispatch }) => {
|
||||||
<span className="Options__output-example"> *proto > *epoch > output</span>
|
<span className="Options__output-example"> *proto > *epoch > output</span>
|
||||||
</label>
|
</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>
|
<input type="submit" value="Run Changes"></input>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
div.Options {
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -14,7 +14,7 @@ const SoundChangeSuite = props => {
|
||||||
}, [epoch])
|
}, [epoch])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="SoundChangeSuite" data-testid={`${epoch.name}_SoundChangeSuite`}>
|
<>
|
||||||
<h4>{epoch.name}</h4>
|
<h4>{epoch.name}</h4>
|
||||||
<form className="SoundChangeSuite__form" data-testid={`${epoch.name}_SoundChangeSuite_changes`}>
|
<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)}>
|
<form onSubmit={e=>props.removeEpoch(e, epoch.name)}>
|
||||||
<input type="submit" name="remove-epoch" value={`remove ${epoch.name}`}></input>
|
<input type="submit" name="remove-epoch" value={`remove ${epoch.name}`}></input>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -276,6 +276,7 @@ export const run = (state: stateType, action: resultsAction): stateType => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const results = passResults.map(stringifyResults);
|
const results = passResults.map(stringifyResults);
|
||||||
|
console.log(results)
|
||||||
return {...state, results }
|
return {...state, results }
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
|
|
Loading…
Reference in a new issue