patch feature display support for multi-graph phones
This commit is contained in:
parent
cf0c971ee3
commit
5d98f91b0f
2 changed files with 31 additions and 2 deletions
|
@ -4,6 +4,36 @@ import './Features.scss';
|
||||||
|
|
||||||
import type { featureAction } from '../reducers/stateReducer.features';
|
import type { featureAction } from '../reducers/stateReducer.features';
|
||||||
|
|
||||||
|
const parsePhonesFromFeatureObject = featureObject => {
|
||||||
|
|
||||||
|
const getFeatureMap = (featureObject) => {
|
||||||
|
return Object.keys(featureObject).map(feature => {
|
||||||
|
const plusPhones = featureObject[feature].positive.map(phone => phone.grapheme).join('|');
|
||||||
|
const minusPhones = featureObject[feature].negative.map(phone => phone.grapheme).join('|');
|
||||||
|
return {[feature]: {plus: plusPhones, minus: minusPhones}}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFeatureMapJSX = (featureMap) => {
|
||||||
|
return featureMap.map((feature, index) => {
|
||||||
|
const featureName = Object.keys(feature)
|
||||||
|
const plusPhones = feature[featureName].plus;
|
||||||
|
const minusPhones = feature[featureName].minus;
|
||||||
|
return (
|
||||||
|
<li key={`feature__${featureName}`}>
|
||||||
|
<span className="plus-phones">{`[+ ${featureName}] = ${plusPhones}`}</span>
|
||||||
|
<span className="minus-phones">{`[- ${featureName}] = ${minusPhones}`}</span>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const featureMap = getFeatureMap(featureObject);
|
||||||
|
console.log(featureMap)
|
||||||
|
const featureMapJSX = getFeatureMapJSX(featureMap);
|
||||||
|
return featureMapJSX;
|
||||||
|
}
|
||||||
|
|
||||||
const parseFeaturesFromPhonemeObject = phonesObject => {
|
const parseFeaturesFromPhonemeObject = phonesObject => {
|
||||||
|
|
||||||
const getFeatureMap = (phonesObject) => {
|
const getFeatureMap = (phonesObject) => {
|
||||||
|
@ -92,7 +122,7 @@ const Features = (props) => {
|
||||||
<h3>Phonetic Features</h3>
|
<h3>Phonetic Features</h3>
|
||||||
|
|
||||||
<ul className="Features__list" data-testid="Features-list">
|
<ul className="Features__list" data-testid="Features-list">
|
||||||
{props.phones ? <>{parseFeaturesFromPhonemeObject(props.phones)}</> : <></>}
|
{props.phones ? <>{parsePhonesFromFeatureObject(props.features)}</> : <></>}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<form className="Features__form" data-testid="Features-form">
|
<form className="Features__form" data-testid="Features-form">
|
||||||
|
|
|
@ -45,7 +45,6 @@ export const addFeature = (state: stateType, action: featureAction): stateType =
|
||||||
let positivePhones = action.value.positivePhones || [];
|
let positivePhones = action.value.positivePhones || [];
|
||||||
let negativePhones = action.value.negativePhones || [];
|
let negativePhones = action.value.negativePhones || [];
|
||||||
let newFeatureName = action.value.feature;
|
let newFeatureName = action.value.feature;
|
||||||
|
|
||||||
let newPhoneObject = [
|
let newPhoneObject = [
|
||||||
...positivePhones, ...negativePhones
|
...positivePhones, ...negativePhones
|
||||||
].reduce((phoneObject, phone) => addPhones(phoneObject, phone), state.phones)
|
].reduce((phoneObject, phone) => addPhones(phoneObject, phone), state.phones)
|
||||||
|
|
Loading…
Reference in a new issue