mirror of
https://github.com/Alamantus/Lexiconga.git
synced 2025-03-23 03:48:56 +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:
parent
69f8ff516c
commit
42b3091d7a
8 changed files with 61 additions and 65 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -362,7 +362,7 @@ searchTerm {
|
|||
margin: 10px;
|
||||
}
|
||||
|
||||
.editButton, .deleteButton, .deleteConfirmButton, .deleteCancelButton {
|
||||
.edit-button, .delete-button, .deleteConfirmButton, .deleteCancelButton {
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
margin: 5px;
|
||||
|
|
Loading…
Add table
Reference in a new issue