oxaliq/feature-change-applier
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style features and options components

Browse source
This commit is contained in:
Sorrel Bri 2020-02-26 16:16:52 -08:00
parent 7f868c5a26
commit 953c403f3b
8 changed files with 95 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/PhonoChangeApplier.scss
View file

@ -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;
}
}

31
src/components/Epochs.js
View file

@ -36,23 +36,36 @@ const Epochs = ({epochs, dispatch}) => {
value: dispatchValue
})
}
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>
</>
);
}

44
src/components/Features.js
View file

@ -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"

27
src/components/Features.scss
View file

@ -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;
}
}
}

23
src/components/Options.js
View file

@ -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>

8
src/components/Options.scss
View file

@ -0,0 +1,8 @@
div.Options {
form {
display: flex;
flex-flow: column nowrap;
}
}

4
src/components/SoundChangeSuite.js
View file

@ -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>
</>
);
}

1
src/reducers/reducer.results.js
View file

@ -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)