Added untested Dropdown for select fields.
Added some more comments.
This commit is contained in:
parent
83a75016a6
commit
16193c1bf4
|
@ -0,0 +1,53 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {Input} from './Input';
|
||||||
|
|
||||||
|
export class Dropdown extends Input {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
value: props.value || false
|
||||||
|
, isDisabled: props.isDisabled || false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Whenever the input changes, update the value state of this component
|
||||||
|
handleOnChange(event) {
|
||||||
|
this.setState({
|
||||||
|
value: event.target.checked
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
parseOptions (optionsString) {
|
||||||
|
let results = [];
|
||||||
|
let options = optionsString.split(',');
|
||||||
|
|
||||||
|
options.forEach((option) => {
|
||||||
|
results.push(
|
||||||
|
<option>
|
||||||
|
{option.trim()}
|
||||||
|
</option>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<label>
|
||||||
|
<span>
|
||||||
|
{this.props.name}
|
||||||
|
{this.showHelperLink()}
|
||||||
|
</span>
|
||||||
|
<select onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
|
||||||
|
{this.parseOptions(this.props.optionsList)}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Dropdown.defaultProps = {
|
||||||
|
doValidate: false
|
||||||
|
};
|
|
@ -5,6 +5,7 @@ import {TextArea} from './TextArea';
|
||||||
|
|
||||||
import {WordForm} from './WordForm';
|
import {WordForm} from './WordForm';
|
||||||
|
|
||||||
|
// A component that allows you to edit a word
|
||||||
export class EditWordForm extends React.Component {
|
export class EditWordForm extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||||
|
|
||||||
import {Button} from './Button';
|
import {Button} from './Button';
|
||||||
|
|
||||||
|
// Creates a page that floats above other elements when a connected button is clicked.
|
||||||
export class FixedPage extends React.Component {
|
export class FixedPage extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -10,6 +11,7 @@ export class FixedPage extends React.Component {
|
||||||
display: false
|
display: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Bind each instance to its own show/hide watchers.
|
||||||
this.show = this.show.bind(this);
|
this.show = this.show.bind(this);
|
||||||
this.hide = this.hide.bind(this);
|
this.hide = this.hide.bind(this);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import marked from 'marked';
|
||||||
|
|
||||||
import {FixedPage} from './FixedPage';
|
import {FixedPage} from './FixedPage';
|
||||||
|
|
||||||
|
// A component for the site footer
|
||||||
export class Footer extends React.Component {
|
export class Footer extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
|
@ -4,6 +4,7 @@ import marked from 'marked';
|
||||||
import {Button} from './Button';
|
import {Button} from './Button';
|
||||||
import {FixedPage} from './FixedPage';
|
import {FixedPage} from './FixedPage';
|
||||||
|
|
||||||
|
// A component for the site header
|
||||||
export class Header extends React.Component {
|
export class Header extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
|
@ -7,6 +7,7 @@ import {Button} from './Button';
|
||||||
const saveIcon = <i>💾</i>;
|
const saveIcon = <i>💾</i>;
|
||||||
const editIcon = <i>🖉</i>;
|
const editIcon = <i>🖉</i>;
|
||||||
|
|
||||||
|
// A component to show dictionary information in a tabbed interface.
|
||||||
export class InfoDisplay extends React.Component {
|
export class InfoDisplay extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
Loading…
Reference in New Issue