);
- } else {
- if (this.props.pronunciation !== '') {
- return (
-
- );
- }
}
}
showPartOfSpeech() {
- if (this.state.editWord) {
+ if (this.props.partOfSpeech !== '') {
return (
-
-
this.partOfSpeechField = inputComponent} />
+
+ {this.props.partOfSpeech}
);
- } else {
- if (this.props.partOfSpeech !== '') {
- return (
-
- {this.props.partOfSpeech}
-
- );
- }
}
}
showSimpleDefinition() {
- if (this.state.editWord) {
+ if (this.props.simpleDefinition !== '') {
return (
-
-
this.simpleDefinitionField = inputComponent} />
+
+ {this.props.simpleDefinition}
);
- } else {
- if (this.props.simpleDefinition !== '') {
- return (
-
- {this.props.simpleDefinition}
-
- );
- }
}
}
showLongDefinition() {
- if (this.state.editWord) {
+ if (this.props.longDefinition !== '') {
return (
-
-
this.longDefinitionField = inputComponent} />
+
+ {this.props.longDefinition}
);
+ }
+ }
+
+ showWordOrEdit() {
+ if (this.state.editWord) {
+ return (
+
this.updateWord(wordObject)}
+ wordValues={this.packageThisWordIntoObject()}
+ submitLabel='Update' />
+ );
} else {
- if (this.props.longDefinition !== '') {
- return (
-
- {this.props.longDefinition}
-
- );
- }
+ return (
+
+ {this.showName()}
+
+ {this.showPronunciation()}
+
+ {this.showPartOfSpeech()}
+
+
+
+ {this.showSimpleDefinition()}
+
+ {this.showLongDefinition()}
+
+ );
}
}
@@ -125,23 +110,9 @@ export class Word extends React.Component {
if (this.props.isEditing) {
if (this.state.editWord) {
return (
-
-
+ this.setState({editWord: false})}
+ label='Cancel' />
);
} else {
return (
@@ -161,10 +132,18 @@ export class Word extends React.Component {
simpleDefinition: wordObject.simpleDefinition || this.props.simpleDefinition,
longDefinition: wordObject.longDefinition || this.props.longDefinition
});
+
+ this.setState({editWord: false});
}
- editProperty(property) {
-
+ packageThisWordIntoObject() {
+ return {
+ name: this.props.name,
+ pronunciation: this.props.pronunciation,
+ partOfSpeech: this.props.partOfSpeech,
+ simpleDefinition: this.props.simpleDefinition,
+ longDefinition: this.props.longDefinition
+ };
}
render() {
@@ -173,17 +152,7 @@ export class Word extends React.Component {
- {this.showName()}
-
- {this.showPronunciation()}
-
- {this.showPartOfSpeech()}
-
-
-
- {this.showSimpleDefinition()}
-
- {this.showLongDefinition()}
+ {this.showWordOrEdit()}
{this.showManagementArea()}
diff --git a/src/components/NewWordForm.jsx b/src/components/WordForm.jsx
similarity index 64%
rename from src/components/NewWordForm.jsx
rename to src/components/WordForm.jsx
index a668346..003ecf0 100644
--- a/src/components/NewWordForm.jsx
+++ b/src/components/WordForm.jsx
@@ -1,10 +1,12 @@
import React from 'react';
+import {keyCodeFor} from '../js/helpers'
+
import {Input} from './Input';
import {TextArea} from './TextArea';
import {Button} from './Button';
-export class NewWordForm extends React.Component {
+export class WordForm extends React.Component {
constructor(props) {
super(props);
@@ -21,7 +23,7 @@ export class NewWordForm extends React.Component {
this.longDefinitionField = null;
}
- submitWordOnCtrlEnter() {
+ submitWordOnCtrlEnter(event) {
var keyCode = (event.which ? event.which : event.keyCode);
//Windows and Linux Chrome accept ctrl+enter as keyCode 10.
@@ -34,15 +36,21 @@ export class NewWordForm extends React.Component {
handleSubmit() {
if (this.formIsValid()) {
- this.props.addWord({
+ let word = {
name: this.wordField.state.value,
pronunciation: this.pronunciationField.state.value,
partOfSpeech: this.partOfSpeechField.state.value,
simpleDefinition: this.simpleDefinitionField.state.value,
longDefinition: this.longDefinitionField.state.value
- });
+ };
- this.clearForm()
+ if (this.props.updateWord) {
+ this.props.updateWord(word);
+ } else {
+ this.props.addWord(word);
+ }
+
+ this.clearForm();
}
}
@@ -77,9 +85,17 @@ export class NewWordForm extends React.Component {
}
render() {
+ let nameDefaultValue = (this.props.wordValues) ? this.props.wordValues.name : '';
+ let pronunciationDefaultValue = (this.props.wordValues) ? this.props.wordValues.pronunciation : '';
+ let partOfSpeechDefaultValue = (this.props.wordValues) ? this.props.wordValues.partOfSpeech : '';
+ let simpleDefinitionDefaultValue = (this.props.wordValues) ? this.props.wordValues.simpleDefinition : '';
+ let longDefinitionDefaultValue = (this.props.wordValues) ? this.props.wordValues.longDefinition : '';
return (
}
+ value={simpleDefinitionDefaultValue}
+ onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
}
+ value={longDefinitionDefaultValue}
+ onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
ref={(inputComponent) => this.longDefinitionField = inputComponent} />
{this.state.errorMessage}
-
this.handleSubmit()} label='Add Word' />
+ this.handleSubmit()} label={this.props.submitLabel} />
{this.state.updateConflictMessage}
diff --git a/src/index.jsx b/src/index.jsx
index 521dad6..547f855 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -5,7 +5,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import {Header} from './components/Header';
-import {NewWordForm} from './components/NewWordForm';
+import {WordForm} from './components/WordForm';
import {Button} from './components/Button';
import {Dictionary} from './components/Dictionary';
@@ -100,7 +100,7 @@ class Lexiconga extends React.Component {
updatedWords[index].name = wordObject.name;
updatedWords[index].pronunciation = wordObject.pronunciation;
updatedWords[index].partOfSpeech = wordObject.partOfSpeech;
- updatedWords[index].simpledefinition = wordObject.simpledefinition;
+ updatedWords[index].simpleDefinition = wordObject.simpleDefinition;
updatedWords[index].longDefinition = wordObject.longDefinition;
updatedWords = this.sortWords(updatedWords);
@@ -137,7 +137,7 @@ class Lexiconga extends React.Component {
return (
- this.addWord(wordObject)} parent={this} />
+ this.addWord(wordObject)} submitLabel='Add Word' />
this.changeDictionaryName()}
label='change name' />