mirror of
https://github.com/Alamantus/Lexiconga.git
synced 2025-03-21 19:08:56 +01:00
Made word form component able to edit and add words for better reusability, fixed submit on enter.
This commit is contained in:
parent
6e13c7da53
commit
69f8ff516c
5 changed files with 96 additions and 107 deletions
|
@ -49,7 +49,7 @@ export class Input extends React.Component {
|
|||
{this.props.name}
|
||||
{this.showHelperLink()}
|
||||
</span>
|
||||
<input type="text" onChange={this.handleOnChange} value={this.state.value} />
|
||||
<input type="text" onChange={this.handleOnChange} onKeyDown={(event) => this.props.onKeyDown(event)} value={this.state.value} />
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -12,11 +12,7 @@ export class TextArea extends Input {
|
|||
this.handleMaximizeClick = this.handleMaximizeClick.bind(this);
|
||||
}
|
||||
|
||||
handleMaximizeClick(event) {
|
||||
this.showFullScreenTextbox();
|
||||
}
|
||||
|
||||
showFullScreenTextbox() {
|
||||
handleMaximizeClick() {
|
||||
var sourceTextboxElement = document.getElementById(this.props.id);
|
||||
var targetTextboxElement = document.getElementById("fullScreenTextbox");
|
||||
document.getElementById("fullScreenTextboxLabel").innerHTML = this.props.name;
|
||||
|
@ -40,7 +36,7 @@ export class TextArea extends Input {
|
|||
action={() => this.handleMaximizeClick()}
|
||||
label='Maximize' />
|
||||
</span>
|
||||
<textarea id={this.props.id} onChange={this.handleOnChange} value={this.state.value} />
|
||||
<textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={(event) => this.props.onKeyDown(event)} value={this.state.value} />
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import {Input} from './Input';
|
||||
import {TextArea} from './TextArea';
|
||||
import {WordForm} from './WordForm';
|
||||
import {Button} from './Button';
|
||||
|
||||
const saveIcon = <i>💾</i>;
|
||||
|
@ -33,91 +32,77 @@ export class Word extends React.Component {
|
|||
*/
|
||||
|
||||
showName() {
|
||||
let editButton;
|
||||
if (this.state.editWord) {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.name} ref={(inputComponent) => this.nameField = inputComponent} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className='name'>
|
||||
{this.props.name}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className='name'>
|
||||
{this.props.name}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
showPronunciation() {
|
||||
if (this.state.editWord) {
|
||||
if (this.props.pronunciation !== '') {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.pronunciation} ref={(inputComponent) => this.pronunciationField = inputComponent} />
|
||||
<div className='pronunciation'>
|
||||
{this.props.pronunciation}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.props.pronunciation !== '') {
|
||||
return (
|
||||
<div className='pronunciation'>
|
||||
{this.props.pronunciation}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showPartOfSpeech() {
|
||||
if (this.state.editWord) {
|
||||
if (this.props.partOfSpeech !== '') {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.partOfSpeech} ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
|
||||
<div className='part-of-speech'>
|
||||
{this.props.partOfSpeech}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.props.partOfSpeech !== '') {
|
||||
return (
|
||||
<div className='part-of-speech'>
|
||||
{this.props.partOfSpeech}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showSimpleDefinition() {
|
||||
if (this.state.editWord) {
|
||||
if (this.props.simpleDefinition !== '') {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.simpleDefinition} ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
|
||||
<div className='simple-definition'>
|
||||
{this.props.simpleDefinition}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
if (this.props.simpleDefinition !== '') {
|
||||
return (
|
||||
<div className='simple-definition'>
|
||||
{this.props.simpleDefinition}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showLongDefinition() {
|
||||
if (this.state.editWord) {
|
||||
if (this.props.longDefinition !== '') {
|
||||
return (
|
||||
<div>
|
||||
<Input value={this.props.longDefinition} ref={(inputComponent) => this.longDefinitionField = inputComponent} />
|
||||
<div className='long-definition'>
|
||||
{this.props.longDefinition}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
showWordOrEdit() {
|
||||
if (this.state.editWord) {
|
||||
return (
|
||||
<WordForm
|
||||
updateWord={(wordObject) => this.updateWord(wordObject)}
|
||||
wordValues={this.packageThisWordIntoObject()}
|
||||
submitLabel='Update' />
|
||||
);
|
||||
} else {
|
||||
if (this.props.longDefinition !== '') {
|
||||
return (
|
||||
<div className='long-definition'>
|
||||
{this.props.longDefinition}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{this.showName()}
|
||||
|
||||
{this.showPronunciation()}
|
||||
|
||||
{this.showPartOfSpeech()}
|
||||
|
||||
<br />
|
||||
|
||||
{this.showSimpleDefinition()}
|
||||
|
||||
{this.showLongDefinition()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -125,23 +110,9 @@ export class Word extends React.Component {
|
|||
if (this.props.isEditing) {
|
||||
if (this.state.editWord) {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
action={() => {
|
||||
let values = {
|
||||
name: this.nameField.state.value,
|
||||
pronunciation: this.pronunciationField.state.value,
|
||||
partOfSpeech: this.partOfSpeechField.state.value,
|
||||
simpleDefinition: this.simpleDefinitionField.state.value,
|
||||
longDefinition: this.longDefinitionField.state.value
|
||||
}
|
||||
this.setState({editWord: false}, () => this.updateWord(values));
|
||||
}}
|
||||
label='Save' />
|
||||
<Button
|
||||
action={() => this.setState({editWord: false})}
|
||||
label='Cancel' />
|
||||
</div>
|
||||
<Button
|
||||
action={() => 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 {
|
|||
|
||||
<a name={'entry' + this.props.wordId}></a>
|
||||
|
||||
{this.showName()}
|
||||
|
||||
{this.showPronunciation()}
|
||||
|
||||
{this.showPartOfSpeech()}
|
||||
|
||||
<br />
|
||||
|
||||
{this.showSimpleDefinition()}
|
||||
|
||||
{this.showLongDefinition()}
|
||||
{this.showWordOrEdit()}
|
||||
|
||||
{this.showManagementArea()}
|
||||
|
||||
|
|
|
@ -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 (
|
||||
<form>
|
||||
<Input name='Word' ref={(inputComponent) => this.wordField = inputComponent} />
|
||||
<Input name='Word'
|
||||
value={nameDefaultValue}
|
||||
onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
|
||||
ref={(inputComponent) => this.wordField = inputComponent} />
|
||||
|
||||
<Input name='Pronunciation'
|
||||
helperLink={{
|
||||
|
@ -87,20 +103,28 @@ export class NewWordForm extends React.Component {
|
|||
label: "IPA Characters",
|
||||
hover: "IPA Character Picker located at http://r12a.github.io/pickers/ipa/"
|
||||
}}
|
||||
value={pronunciationDefaultValue}
|
||||
onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
|
||||
ref={(inputComponent) => this.pronunciationField = inputComponent} />
|
||||
|
||||
<Input name='Part of Speech' ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
|
||||
<Input name='Part of Speech'
|
||||
value={partOfSpeechDefaultValue}
|
||||
ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
|
||||
|
||||
<Input name={<div style={{display: 'inline'}}>Definition/<wbr /><b className="wbr"></b>Equivalent Word(s)</div>}
|
||||
value={simpleDefinitionDefaultValue}
|
||||
onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
|
||||
ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
|
||||
|
||||
<TextArea id='newWordForm'
|
||||
name={<div style={{display: 'inline'}}>Explanation/<wbr /><b className="wbr"></b>Long Definition</div>}
|
||||
value={longDefinitionDefaultValue}
|
||||
onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
|
||||
ref={(inputComponent) => this.longDefinitionField = inputComponent} />
|
||||
|
||||
<span id="errorMessage">{this.state.errorMessage}</span>
|
||||
|
||||
<Button action={() => this.handleSubmit()} label='Add Word' />
|
||||
<Button action={() => this.handleSubmit()} label={this.props.submitLabel} />
|
||||
|
||||
<div id="updateConflict">{this.state.updateConflictMessage}</div>
|
||||
</form>
|
|
@ -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 (
|
||||
<div>
|
||||
<Header />
|
||||
<NewWordForm addWord={(wordObject) => this.addWord(wordObject)} parent={this} />
|
||||
<WordForm addWord={(wordObject) => this.addWord(wordObject)} submitLabel='Add Word' />
|
||||
<Button
|
||||
action={() => this.changeDictionaryName()}
|
||||
label='change name' />
|
||||
|
|
Loading…
Add table
Reference in a new issue