Added Edit Dictionary form and manipulation of dictionary settings plus Checkboxes to go with it! Also added the ability to disable input fields.
This commit is contained in:
parent
98b6377a01
commit
bed9dc5b3c
|
@ -0,0 +1,38 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {Input} from './Input';
|
||||||
|
|
||||||
|
import {Button} from './Button';
|
||||||
|
|
||||||
|
export class Checkbox extends Input {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
value: props.value || false,
|
||||||
|
isDisabled: props.isDisabled || false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Whenever the input changes we update the value state of this component
|
||||||
|
handleOnChange(event) {
|
||||||
|
this.setState({
|
||||||
|
value: event.target.checked
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<label>
|
||||||
|
<span>
|
||||||
|
{this.props.name}
|
||||||
|
{this.showHelperLink()}
|
||||||
|
</span>
|
||||||
|
<input type="checkbox" onChange={this.handleOnChange} checked={(this.state.value) ? 'checked' : null} disabled={(this.state.isDisabled) ? 'disabled' : null} />
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Checkbox.defaultProps = {
|
||||||
|
doValidate: false
|
||||||
|
};
|
|
@ -0,0 +1,82 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {Input} from './Input';
|
||||||
|
import {TextArea} from './TextArea';
|
||||||
|
import {Checkbox} from './Checkbox';
|
||||||
|
import {Button} from './Button';
|
||||||
|
import {FixedPage} from './FixedPage';
|
||||||
|
|
||||||
|
export class EditDictionaryForm extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
// Declare local variables as null until mounted.
|
||||||
|
this.nameField = null;
|
||||||
|
this.descriptionField = null;
|
||||||
|
this.partsOfSpeechField = null;
|
||||||
|
this.allowDuplicatesField = null;
|
||||||
|
this.caseSensitiveField = null;
|
||||||
|
this.sortByEquivalentField = null;
|
||||||
|
this.isCompleteField = null;
|
||||||
|
this.isPublicField = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
saveOnClose() {
|
||||||
|
this.props.saveChanges({
|
||||||
|
name: this.nameField.state.value,
|
||||||
|
description: this.descriptionField.state.value,
|
||||||
|
partsOfSpeech: this.partsOfSpeechField.state.value,
|
||||||
|
allowDuplicates: this.allowDuplicatesField.state.value,
|
||||||
|
caseSensitive: this.caseSensitiveField.state.value,
|
||||||
|
sortByEquivalent: this.sortByEquivalentField.state.value,
|
||||||
|
isComplete: this.isCompleteField.state.value,
|
||||||
|
isPublic: this.isPublicField.state.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<FixedPage buttonClasses='right' buttonText='Edit Dictionary' onHide={() => this.saveOnClose()}>
|
||||||
|
|
||||||
|
<h2>Edit Dictionary</h2>
|
||||||
|
|
||||||
|
<div className='settings-column'>
|
||||||
|
|
||||||
|
<Input name='Dictionary Name'
|
||||||
|
value={this.props.details.name}
|
||||||
|
ref={(inputComponent) => this.nameField = inputComponent} />
|
||||||
|
|
||||||
|
<TextArea name='Dictionary Details'
|
||||||
|
value={this.props.details.description}
|
||||||
|
ref={(inputComponent) => this.descriptionField = inputComponent} />
|
||||||
|
|
||||||
|
<Input name='Parts of Speech'
|
||||||
|
value={this.props.settings.partsOfSpeech}
|
||||||
|
ref={(inputComponent) => this.partsOfSpeechField = inputComponent} />
|
||||||
|
|
||||||
|
<Checkbox name='Allow Duplicates'
|
||||||
|
value={this.props.settings.allowDuplicates}
|
||||||
|
ref={(inputComponent) => this.allowDuplicatesField = inputComponent} />
|
||||||
|
|
||||||
|
<Checkbox name='Case-Sensitive'
|
||||||
|
value={this.props.settings.caseSensitive}
|
||||||
|
ref={(inputComponent) => this.caseSensitiveField = inputComponent} />
|
||||||
|
|
||||||
|
<Checkbox name='Sort by Definition'
|
||||||
|
value={this.props.settings.sortByEquivalent}
|
||||||
|
ref={(inputComponent) => this.sortByEquivalentField = inputComponent} />
|
||||||
|
|
||||||
|
<Checkbox name='Dictionary Is Complete'
|
||||||
|
value={this.props.settings.isComplete}
|
||||||
|
ref={(inputComponent) => this.isCompleteField = inputComponent} />
|
||||||
|
|
||||||
|
<Checkbox name='Dictionary Is Public'
|
||||||
|
value={this.props.settings.isPublic}
|
||||||
|
ref={(inputComponent) => this.isPublicField = inputComponent} />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</FixedPage>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -10,6 +10,7 @@ export class FixedPage extends React.Component {
|
||||||
display: false
|
display: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.show = this.show.bind(this);
|
||||||
this.hide = this.hide.bind(this);
|
this.hide = this.hide.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -41,7 +42,7 @@ export class FixedPage extends React.Component {
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<Button classes={this.props.buttonClasses}
|
<Button classes={this.props.buttonClasses}
|
||||||
action={() => this.show()}
|
action={this.show}
|
||||||
label={this.props.buttonText} />
|
label={this.props.buttonText} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -54,6 +55,10 @@ export class FixedPage extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
hide() {
|
hide() {
|
||||||
|
if (this.props.onHide) {
|
||||||
|
this.props.onHide();
|
||||||
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
display: false
|
display: false
|
||||||
});
|
});
|
||||||
|
|
|
@ -13,7 +13,8 @@ export class Input extends React.Component {
|
||||||
// };
|
// };
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
value: props.value || ''
|
value: props.value || '',
|
||||||
|
isDisabled: props.isDisabled || false
|
||||||
};
|
};
|
||||||
|
|
||||||
// Bind listeners
|
// Bind listeners
|
||||||
|
@ -49,6 +50,12 @@ export class Input extends React.Component {
|
||||||
this.setState({value: ''});
|
this.setState({value: ''});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleFieldEnabled() {
|
||||||
|
this.setState({
|
||||||
|
isDisabled: !this.state.isDisabled
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<label>
|
<label>
|
||||||
|
@ -56,7 +63,7 @@ export class Input extends React.Component {
|
||||||
{this.props.name}
|
{this.props.name}
|
||||||
{this.showHelperLink()}
|
{this.showHelperLink()}
|
||||||
</span>
|
</span>
|
||||||
<input type="text" onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
|
<input type="text" onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} disabled={(this.state.isDisabled) ? 'disabled' : null} value={this.state.value} />
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,7 +41,7 @@ export class TextArea extends Input {
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
|
<textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} disabled={(this.state.isDisabled) ? 'disabled' : null} value={this.state.value} />
|
||||||
|
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
|
|
|
@ -8,7 +8,7 @@ import {Header} from './components/Header';
|
||||||
import {Footer} from './components/Footer';
|
import {Footer} from './components/Footer';
|
||||||
import {WordForm} from './components/WordForm';
|
import {WordForm} from './components/WordForm';
|
||||||
import {Button} from './components/Button';
|
import {Button} from './components/Button';
|
||||||
import {FixedPage} from './components/FixedPage';
|
import {EditDictionaryForm} from './components/EditDictionaryForm';
|
||||||
import {Dictionary} from './components/Dictionary';
|
import {Dictionary} from './components/Dictionary';
|
||||||
|
|
||||||
import {dynamicSort} from './js/helpers';
|
import {dynamicSort} from './js/helpers';
|
||||||
|
@ -52,15 +52,26 @@ class Lexiconga extends React.Component {
|
||||||
this.previousDictionary = {};
|
this.previousDictionary = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
changeDictionaryName() {
|
saveChanges(changesObject) {
|
||||||
// To change elements within the dictionary object, you can set it to
|
let updatedDetails = this.state.details;
|
||||||
// a variable, manipulate the variable, then use setState() to set
|
let updatedSettings = this.state.settings;
|
||||||
// the object equal to the changed variable.
|
|
||||||
let updateDictionary = this.state.currentDictionary;
|
updatedDetails.name = changesObject.name;
|
||||||
updateDictionary.name = 'something else'
|
updatedDetails.description = changesObject.description;
|
||||||
|
|
||||||
|
updatedSettings.partsOfSpeech = changesObject.partsOfSpeech;
|
||||||
|
updatedSettings.allowDuplicates = changesObject.allowDuplicates;
|
||||||
|
updatedSettings.caseSensitive = changesObject.caseSensitive;
|
||||||
|
updatedSettings.sortByEquivalent = changesObject.sortByEquivalent;
|
||||||
|
updatedSettings.isComplete = changesObject.isComplete;
|
||||||
|
updatedSettings.isPublic = changesObject.isPublic;
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
currentDictionary: updateDictionary
|
details: updatedDetails,
|
||||||
})
|
settings: updatedSettings
|
||||||
|
}, () => {
|
||||||
|
this.saveLocalDictionary();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
sortWords(array) {
|
sortWords(array) {
|
||||||
|
@ -230,9 +241,10 @@ class Lexiconga extends React.Component {
|
||||||
action={() => this.loadLocalDictionary()}
|
action={() => this.loadLocalDictionary()}
|
||||||
label='Load Dictionary' />
|
label='Load Dictionary' />
|
||||||
|
|
||||||
<FixedPage buttonClasses='right' buttonText='Edit Dictionary'>
|
<EditDictionaryForm
|
||||||
|
details={this.state.details}
|
||||||
</FixedPage>
|
settings={this.state.settings}
|
||||||
|
saveChanges={(changesObject) => this.saveChanges(changesObject)} />
|
||||||
|
|
||||||
<Dictionary
|
<Dictionary
|
||||||
details={this.state.details}
|
details={this.state.details}
|
||||||
|
|
|
@ -90,6 +90,7 @@ td:last-child, th:last-child {
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
margin: $column-margin;
|
margin: $column-margin;
|
||||||
}
|
}
|
||||||
|
@ -469,11 +470,8 @@ searchTerm {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settingsCol {
|
.settings-column {
|
||||||
display: block;
|
@extend .left-column;
|
||||||
float: left;
|
|
||||||
width: 30%;
|
margin-right: $column-margin * 2;
|
||||||
min-width: 260px;
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 30px 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue