From 6bb8a6306adffb291a875a2e4c7ea5b992ab567a Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Thu, 17 Aug 2017 13:51:08 -0600 Subject: [PATCH] Enable switching details from DictionaryDetails menu. Add Phonology section to DictionaryDetails. Update DictionaryDetails and MainDisplay to have more data to work with and display. --- src/components/MainDisplay.jsx | 18 ++- .../DetailsSection/PhonologyDisplay.jsx | 143 ++++++++++++++++++ .../DetailsSection/index.jsx | 123 +++++++++++++++ .../display/DictionaryDetails/index.jsx | 59 +------- 4 files changed, 287 insertions(+), 56 deletions(-) create mode 100644 src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx create mode 100644 src/components/display/DictionaryDetails/DetailsSection/index.jsx diff --git a/src/components/MainDisplay.jsx b/src/components/MainDisplay.jsx index 03a524d..bd2f630 100644 --- a/src/components/MainDisplay.jsx +++ b/src/components/MainDisplay.jsx @@ -27,12 +27,28 @@ export const MainDisplay = ({ dictionaryInfo, wordsToDisplay, updateDisplay, upd specification={ dictionaryInfo.specification } description={ dictionaryInfo.description } partsOfSpeech={ dictionaryInfo.partsOfSpeech } + alphabeticalOrder={['b', 'p', 't', 'd', 'a', 'o', 'j', 'e']} details={{ + phonology: { + consonants: ['b', 'p', 'd', 't', 'j'], + vowels: ['a', 'o', 'e'], + blends: ['ae', 'oe', 'tj', 'dy'], + phonotactics: { + onset: ['b', 'p', 'j'], + nucleus: ['a', 'o', 'e'], + coda: ['any'], + exceptions: 'There are no exceptions', + }, + }, + grammar: { + content: 'The rules of the language are simple: just follow them!' + }, custom: [ { name: 'Test Tab', + content: 'This is a test tab to test how custom tabs work!', } - ] + ], }} /> diff --git a/src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx b/src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx new file mode 100644 index 0000000..6e0e4ea --- /dev/null +++ b/src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx @@ -0,0 +1,143 @@ +import Inferno from 'inferno'; +import Component from 'inferno-component'; +import marked from 'marked'; + +export const PhonologyDisplay = ({ phonologyContent }) => { + return ( +
+

+ Phonemes +

+ +
+ +
+ Consonants: +
+ {phonologyContent.consonants.map(consonant => { + return ( + + { consonant } + + ); + })} +
+
+ +
+ Vowels: +
+ {phonologyContent.vowels.map(vowel => { + return ( + + { vowel } + + ); + })} +
+
+ +
+ + { + phonologyContent.blends.length > 0 + && ( +
+ +
+ Polyphthongs{'\u200B'}/{'\u200B'}Blends: +
+ {phonologyContent.blends.map(blend => { + return ( + + { blend } + + ); + })} +
+
+ +
+ ) + } + + { + (phonologyContent.phonotactics.onset.length > 0 + || phonologyContent.phonotactics.nucleus.length > 0 + || phonologyContent.phonotactics.coda.length > 0) + && ( +
+

+ Phonotactics +

+ +
+ +
+ Onset: +
+ {phonologyContent.phonotactics.onset.map(onset => { + return ( + + { onset } + + ); + })} +
+
+ +
+ Nucleus: +
+ {phonologyContent.phonotactics.nucleus.map(nucleus => { + return ( + + { nucleus } + + ); + })} +
+
+ +
+ Coda: +
+ {phonologyContent.phonotactics.coda.map(coda => { + return ( + + { coda } + + ); + })} +
+
+ +
+ + { + phonologyContent.phonotactics.exceptions.trim() !== '' + && ( +
+
+ Exceptions: +
+
+
+ ) + } +
+ ) + } + +
+ ); +} diff --git a/src/components/display/DictionaryDetails/DetailsSection/index.jsx b/src/components/display/DictionaryDetails/DetailsSection/index.jsx new file mode 100644 index 0000000..281bece --- /dev/null +++ b/src/components/display/DictionaryDetails/DetailsSection/index.jsx @@ -0,0 +1,123 @@ +import Inferno from 'inferno'; +import Component from 'inferno-component'; +import marked from 'marked'; + +import { PhonologyDisplay } from './PhonologyDisplay'; + +const DISPLAY = { + NONE: false, + DESCRIPTION: 1, + DETAILS: 2, + STATS: 3, +} + +export class DetailsSection extends Component { + constructor (props) { + super(props); + + this.defaultMenuItems = [ + 'Phonology', + 'Grammar', + ]; + + this.state = { + currentDisplay: 0, + } + } + + mapCustomMenuItems (customTabs) { + return customTabs.map(tab => { + return tab.name; + }); + } + + displayDetails () { + const { currentDisplay } = this.state; + const { details } = this.props; + const defaultMenuLength = this.defaultMenuItems.length; + + if (currentDisplay < defaultMenuLength) { + switch (this.defaultMenuItems[currentDisplay]) { + case 'Phonology': { + return + break; + } + case 'Grammar': { + return 'Grammar content!'; + break; + } + } + } else { + return ( +
+
+
+ ); + } + } + + render () { + const { details } = this.props; + + let additionalMenu = ( +
+

+ Additional +

+ +
+ ); + + const menu = ( +
+

+ Linguistics +

+ + + { additionalMenu } + +
+ ); + + return ( +
+ +
+ { this.displayDetails() } +
+
+ ); + } +} diff --git a/src/components/display/DictionaryDetails/index.jsx b/src/components/display/DictionaryDetails/index.jsx index f840928..5694770 100644 --- a/src/components/display/DictionaryDetails/index.jsx +++ b/src/components/display/DictionaryDetails/index.jsx @@ -2,7 +2,8 @@ import Inferno from 'inferno'; import Component from 'inferno-component'; import marked from 'marked'; -import { EditDictionaryModal } from './EditDictionaryModal'; +import { EditDictionaryModal } from '../../management/EditDictionaryModal'; +import { DetailsSection } from './DetailsSection'; const DISPLAY = { NONE: false, @@ -51,7 +52,7 @@ export class DictionaryDetails extends Component {
); @@ -59,59 +60,7 @@ export class DictionaryDetails extends Component { } case DISPLAY.DETAILS : { - let additionalMenu; - if (this.props.details.hasOwnProperty('custom')) { - let customTabsJSX = this.props.details.custom.map((tab) => { - return ( -
  • - - { tab.name } - -
    • - ); - }); - - additionalMenu = ( -
    -

    - Additional -

    -
      - { customTabsJSX } -
    -
    - ); - } - - const menu = ( - - ); - - let content = ( -
    -

    - Details Content! -

    -
    - ); - - displayJSX = ( -
    - { menu } - { content } -
    - ); + displayJSX = ; break; }