From e570bdfeff91cfa64c540d50f84b881c04c17d4b Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Fri, 28 Feb 2020 13:12:19 -0800 Subject: [PATCH] add feature remove button, style buttons --- src/PhonoChangeApplier.scss | 20 ++++- src/components/Epochs.js | 2 +- src/components/Features.js | 138 ++++++++++++++++------------- src/components/Features.scss | 34 ++++--- src/components/Options.js | 4 +- src/components/SoundChangeSuite.js | 2 +- src/reducers/reducer.features.js | 8 ++ src/reducers/reducer.js | 4 +- 8 files changed, 133 insertions(+), 79 deletions(-) diff --git a/src/PhonoChangeApplier.scss b/src/PhonoChangeApplier.scss index 4fd7e32..5a7b79c 100644 --- a/src/PhonoChangeApplier.scss +++ b/src/PhonoChangeApplier.scss @@ -24,7 +24,7 @@ div.App { display: grid; width: 100%; place-items: center center; - grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(25em, 1fr)); grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); div { @@ -34,4 +34,22 @@ div.App { overflow-y: scroll; } } + + button.form, input[type="submit"].form, input[type="button"].form { + height: 2em; + border-radius: 0.25em; + border-color: transparent; + margin: 0.2em auto; + width: 10em; + } + + button.form--add, input[type="submit"].form--add, input[type="button"].form--add{ + background-color: greenyellow; + color: black; + } + + button.form--remove, input[type="submit"].form--remove, input[type="button"].form--remove { + background-color: red; + color: white; + } } \ No newline at end of file diff --git a/src/components/Epochs.js b/src/components/Epochs.js index 3076d21..6a940c3 100644 --- a/src/components/Epochs.js +++ b/src/components/Epochs.js @@ -41,7 +41,7 @@ const Epochs = ({epochs, errors, dispatch}) => { const renderAddEpochButton = index => { if (index === epochs.length - 1 ) return (
addEpoch(e)}> - +
) return <> diff --git a/src/components/Features.js b/src/components/Features.js index e1135b0..68cb945 100644 --- a/src/components/Features.js +++ b/src/components/Features.js @@ -4,69 +4,6 @@ import './Features.scss'; import type { featureAction } from '../reducers/reducer.features'; -const parsePhonesFromFeatureObject = featureObject => { - const getProperty = property => object => object[property] - - const getFeatureMap = (featureObject) => { - return Object.keys(featureObject).map(feature => { - const plusPhones = featureObject[feature].positive.map(getProperty('grapheme')).join(' / '); - const minusPhones = featureObject[feature].negative.map(getProperty('grapheme')).join(' / '); - return {[feature]: {plus: plusPhones, minus: minusPhones}} - }) - } - - const getFeatureMapJSX = (featureMap) => { - return featureMap.map((feature, index) => { - const featureName = Object.keys(feature); - const { plus, minus } = feature[featureName]; - return ( -
  • - - - {`[+ ${featureName}]`} - - - {plus} - - - - - {`[- ${featureName}]`} - - - {minus} - - -
    • - ) - }) - } - - const featureMap = getFeatureMap(featureObject); - const featureMapJSX = getFeatureMapJSX(featureMap); - return featureMapJSX; -} - -const parseNewPhones = somePhones => { - if (somePhones === '') return ['']; - return somePhones.split('/').map(phone => phone.trim()); -} - -const handleClickDispatch = e => dispatchFunction => actionBuilder => actionParameters => { - e.preventDefault(); - return dispatchFunction(actionBuilder(actionParameters)); -} - -const buildAddFeatureAction = ([newPositivePhones, newNegativePhones, feature]): featureAction => ( - { - type: "ADD_FEATURE", - value: { - positivePhones: parseNewPhones(newPositivePhones), - negativePhones: parseNewPhones(newNegativePhones), - feature - } - } -) const Features = ({ phones, features, dispatch }) => { const [feature, setFeature] = useState('aspirated') @@ -79,6 +16,80 @@ const Features = ({ phones, features, dispatch }) => { setNewPositivePhones(''); setNewNegativePhones(''); } + + const handleDeleteClick = (e, feature) => { + e.preventDefault(); + const deleteFeatureAction = { + type: "DELETE_FEATURE", + value: feature + } + return dispatch(deleteFeatureAction); + } + + const parsePhonesFromFeatureObject = featureObject => { + const getProperty = property => object => object[property] + + const getFeatureMap = (featureObject) => { + return Object.keys(featureObject).map(feature => { + const plusPhones = featureObject[feature].positive.map(getProperty('grapheme')).join(' / '); + const minusPhones = featureObject[feature].negative.map(getProperty('grapheme')).join(' / '); + return {[feature]: {plus: plusPhones, minus: minusPhones}} + }) + } + + const getFeatureMapJSX = (featureMap) => { + return featureMap.map((feature, index) => { + const [featureName] = Object.keys(feature); + const { plus, minus } = feature[featureName]; + return ( +
  • + + + {`[+ ${featureName}]`} + + + {plus} + + + + + {`[- ${featureName}]`} + + + {minus} + + + +
    • + ) + }) + } + + const featureMap = getFeatureMap(featureObject); + const featureMapJSX = getFeatureMapJSX(featureMap); + return featureMapJSX; + } + + const parseNewPhones = somePhones => { + if (somePhones === '') return ['']; + return somePhones.split('/').map(phone => phone.trim()); + } + + const handleClickDispatch = e => dispatchFunction => actionBuilder => actionParameters => { + e.preventDefault(); + return dispatchFunction(actionBuilder(actionParameters)); + } + + const buildAddFeatureAction = ([newPositivePhones, newNegativePhones, feature]): featureAction => ( + { + type: "ADD_FEATURE", + value: { + positivePhones: parseNewPhones(newPositivePhones), + negativePhones: parseNewPhones(newNegativePhones), + feature + } + } + ) return (
    @@ -114,6 +125,7 @@ const Features = ({ phones, features, dispatch }) => { handleClickDispatch(e)(dispatch)(buildAddFeatureAction)([newPositivePhones, newNegativePhones, feature])} value="Add feature" diff --git a/src/components/Features.scss b/src/components/Features.scss index 3957e03..ffe38b1 100644 --- a/src/components/Features.scss +++ b/src/components/Features.scss @@ -1,16 +1,22 @@ div.Features { - ul.Features__list li { - display: grid; - grid-template-columns: 1fr 1fr; - - span.feature--names-and-phones { + ul.Features__list { + width: 100%; + + li { display: grid; - grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); - } - - span.feature-name { - font-weight: 600; + grid-template-columns: 10fr 10fr 1fr; + margin: 0.5em 0; + place-items: center center; + + span.feature--names-and-phones { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + } + + span.feature-name { + font-weight: 600; + } } } @@ -23,4 +29,12 @@ div.Features { font-size: 1em; } } + + button.delete-feature { + background-color: red; + border-color: transparent; + border-radius: 0.5em; + color: white; + max-height: 1.5em; + } } \ No newline at end of file diff --git a/src/components/Options.js b/src/components/Options.js index 33eb612..f86a2b0 100644 --- a/src/components/Options.js +++ b/src/components/Options.js @@ -65,8 +65,8 @@ const Options = ({ options, dispatch }) => { *proto > *epoch > output */} - - handleOutputClearSubmit(e)}/> + + handleOutputClearSubmit(e)}/> diff --git a/src/components/SoundChangeSuite.js b/src/components/SoundChangeSuite.js index 5d1903f..c5e201a 100644 --- a/src/components/SoundChangeSuite.js +++ b/src/components/SoundChangeSuite.js @@ -103,7 +103,7 @@ const SoundChangeSuite = props => { >
    removeEpoch(e, epoch.name)}> - +
    ); diff --git a/src/reducers/reducer.features.js b/src/reducers/reducer.features.js index 82969b9..9288cf6 100644 --- a/src/reducers/reducer.features.js +++ b/src/reducers/reducer.features.js @@ -77,4 +77,12 @@ export const addFeature = (state: stateType, action: featureAction): stateType = let newFeature = {[action.value.feature]: {positive: positivePhones, negative: negativePhones}}; return {...state, features:{...state.features, ...newFeature}, phones: newPhoneObject} +} + +export const deleteFeature = (state, action) => { + console.log('deleting') + const deletedFeature = action.value; + delete state.features[deletedFeature]; + console.log(state) + return {...state} } \ No newline at end of file diff --git a/src/reducers/reducer.js b/src/reducers/reducer.js index b14da78..fe6b1a6 100644 --- a/src/reducers/reducer.js +++ b/src/reducers/reducer.js @@ -3,7 +3,7 @@ import { addLexeme, setLexicon } from './reducer.lexicon'; import type { lexiconAction } from './reducer.lexicon'; import { addEpoch, setEpoch, removeEpoch } from './reducer.epochs'; import type { epochAction } from './reducer.epochs'; -import { addFeature } from './reducer.features'; +import { addFeature, deleteFeature } from './reducer.features'; import type { featureAction } from './reducer.features'; import type { optionsAction } from './reducer.options'; import { setOptions } from './reducer.options'; @@ -56,6 +56,8 @@ export const stateReducer = (state: stateType, action: actionType): stateType => case 'ADD_FEATURE': return addFeature(state, action); + case 'DELETE_FEATURE': return deleteFeature(state, action); + case 'SET_OPTIONS': return setOptions(state, action); case 'CLEAR': return clearOutput(state, action);