1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-03-23 11:58:55 +01:00

You can now add a word while editing a word, allowing the edit word form to stay open and reorganize! Cool stuff!

Also fixed a small styling thing.
This commit is contained in:
Robbie Antenesse 2016-09-24 08:58:09 -06:00
parent 69f8ff516c
commit 42b3091d7a
8 changed files with 61 additions and 65 deletions

View file

@ -9,31 +9,20 @@ export class Dictionary extends React.Component {
}
showWords() {
let words = this.props.words.map((word, index) => {
return <Word key={'dictionaryEntry' + index.toString()} isEditing={true}
let words = this.props.words.map((word) => {
return <Word key={'dictionaryEntry' + word.wordId.toString()} isEditing={true}
name={word.name}
pronunciation={word.pronunciation}
partOfSpeech={word.partOfSpeech}
simpleDefinition={word.simpleDefinition}
longDefinition={word.longDefinition}
wordId={word.wordId}
index={index}
passWordAndUpdate={(index, wordObject) => this.passWordAndUpdate(index, wordObject)} />;
updateWord={(wordId, wordObject) => this.props.updateWord(wordId, wordObject)} />;
});
if (this.showConsoleMessages) {
console.log('Showing these words:');
console.log(words);
}
return <div>{words}</div>;
}
passWordAndUpdate(index, wordObject) {
console.log('Passing edited up: ' + wordObject.name);
this.props.updateWord(index, wordObject);
}
render() {
return (
<div>

View file

@ -18,6 +18,7 @@ export class Input extends React.Component {
// Bind listeners
this.handleOnChange = this.handleOnChange.bind(this);
this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
}
// Whenever the input changes we update the value state of this component
@ -28,6 +29,12 @@ export class Input extends React.Component {
});
}
handleOnKeyDown(event) {
if (this.props.onKeyDown) {
this.props.onKeyDown(event);
}
}
showHelperLink() {
if (this.props.helperLink) {
return (
@ -49,7 +56,7 @@ export class Input extends React.Component {
{this.props.name}
{this.showHelperLink()}
</span>
<input type="text" onChange={this.handleOnChange} onKeyDown={(event) => this.props.onKeyDown(event)} value={this.state.value} />
<input type="text" onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
</label>
);
}

View file

@ -36,7 +36,7 @@ export class TextArea extends Input {
action={() => this.handleMaximizeClick()}
label='Maximize' />
</span>
<textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={(event) => this.props.onKeyDown(event)} value={this.state.value} />
<textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
</label>
);
}

View file

@ -125,7 +125,7 @@ export class Word extends React.Component {
}
updateWord(wordObject) {
this.props.passWordAndUpdate(this.props.index, {
this.props.updateWord(this.props.wordId, {
name: wordObject.name || this.props.name,
pronunciation: wordObject.pronunciation || this.props.pronunciation,
partOfSpeech: wordObject.partOfSpeech || this.props.partOfSpeech,
@ -148,13 +148,13 @@ export class Word extends React.Component {
render() {
return (
<div id={'entry' + this.props.index} className='word'>
<a name={'entry' + this.props.wordId}></a>
<div id={'entry' + this.props.wordId} className='word'>
{this.showWordOrEdit()}
{this.showManagementArea()}
<div className='management'>
{this.showManagementArea()}
</div>
</div>
);

View file

@ -124,7 +124,7 @@ export class WordForm extends React.Component {
<span id="errorMessage">{this.state.errorMessage}</span>
<Button action={() => this.handleSubmit()} label={this.props.submitLabel} />
<Button classes={(this.props.updateWord) ? 'edit-button' : 'add-button'} action={() => this.handleSubmit()} label={this.props.submitLabel} />
<div id="updateConflict">{this.state.updateConflictMessage}</div>
</form>

View file

@ -81,7 +81,7 @@ class Lexiconga extends React.Component {
updatedWords = this.sortWords(updatedWords);
let updatedDetails = this.state.details;
updatedDetails.nextwordid += 1;
updatedDetails.nextWordId += 1;
this.setState({
words: updatedWords,
@ -93,44 +93,44 @@ class Lexiconga extends React.Component {
});
}
updateWord(index, wordObject) {
if (this.showConsoleMessages) console.log('Updating ' + this.state.words[index].name + ' to ' + wordObject.name);
firstIndexWordWithId(id) {
let resultIndex = -1;
let updatedWords = this.state.words;
updatedWords[index].name = wordObject.name;
updatedWords[index].pronunciation = wordObject.pronunciation;
updatedWords[index].partOfSpeech = wordObject.partOfSpeech;
updatedWords[index].simpleDefinition = wordObject.simpleDefinition;
updatedWords[index].longDefinition = wordObject.longDefinition;
for (let i = 0; i < this.state.words.length; i++) {
let word = this.state.words[i];
updatedWords = this.sortWords(updatedWords);
this.setState({words: updatedWords}, () => {
if (this.showConsoleMessages) {
console.log('Updated successfully');
if (word.wordId === id) {
resultIndex = i;
break;
}
});
}
showWords() {
let words = this.state.words.map((word, index) => {
return <Word key={'dictionaryEntry' + index.toString()} isEditing={true}
name={word.name}
pronunciation={word.pronunciation}
partOfSpeech={word.partOfSpeech}
simpleDefinition={word.simpleDefinition}
longDefinition={word.longDefinition}
wordId={word.wordId}
index={index}
updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />;
});
if (this.showConsoleMessages) {
console.log('Showing these words:');
console.log(words);
}
return <div>{words}</div>;
return resultIndex;
}
updateWord(wordId, wordObject) {
let index = this.firstIndexWordWithId(wordId);
if (index >= 0) {
if (this.showConsoleMessages) console.log('Updating ' + this.state.words[index].name + ' to ' + wordObject.name);
let updatedWords = this.state.words;
updatedWords[index].name = wordObject.name;
updatedWords[index].pronunciation = wordObject.pronunciation;
updatedWords[index].partOfSpeech = wordObject.partOfSpeech;
updatedWords[index].simpleDefinition = wordObject.simpleDefinition;
updatedWords[index].longDefinition = wordObject.longDefinition;
updatedWords = this.sortWords(updatedWords);
this.setState({words: updatedWords}, () => {
if (this.showConsoleMessages) {
console.log('Updated successfully');
}
});
} else {
console.log('Could not update. No word with id of ' + wordId.toString());
}
}
render() {
@ -149,7 +149,7 @@ class Lexiconga extends React.Component {
details={this.state.details}
words={this.state.words}
settings={this.state.settings}
updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />
updateWord={(wordId, wordObject) => this.updateWord(wordId, wordObject)} />
</div>
);
}

View file

@ -124,20 +124,20 @@ input, textarea, select, option {
background: #dcb078;
}
entry {
.word {
background: #d7ad7d;
border: none;
-webkit-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
}
.editButton {
background: #86ac41;
}
.edit-button {
background: #86ac41;
}
.deleteButton {
background: #ba5536;
.delete-button {
background: #ba5536;
}
}
footer {

View file

@ -362,7 +362,7 @@ searchTerm {
margin: 10px;
}
.editButton, .deleteButton, .deleteConfirmButton, .deleteCancelButton {
.edit-button, .delete-button, .deleteConfirmButton, .deleteCancelButton {
display: inline;
font-size: 10px;
margin: 5px;