Skip to content

P
paragon
Commit 3dae3894 by Ari Rizzitano
Options

eslint ;(

parent ccbcd94d
Showing with 57 additions and 61 deletions
src/SelectInput.js
......@@ -11,7 +11,7 @@ class SelectInput extends React.Component {
this.handleChange = this.handleChange.bind(this);
this.state = {
uuid: newId('textInput'),
value: this.props.value
value: this.props.value,
};
}
......@@ -26,14 +26,14 @@ class SelectInput extends React.Component {
<span className="input-description" id={descriptionId}>
{this.props.description}
</span>
)
}
),
};
}
return descriptionElements;
}
handleChange(event) {
this.setState({value: event.target.value});
this.setState({ value: event.target.value });
this.props.onChange(event.target.value, this.props.name);
}
......@@ -53,9 +53,7 @@ class SelectInput extends React.Component {
return this.props.options.map((option, i) => {
let section;
if (option.options) {
const groupOpts = option.options.map((opt, j) => {
return this.getOption(opt, j);
});
const groupOpts = option.options.map((opt, j) => this.getOption(opt, j));
section = (
<optgroup label={option.label} key={`group-${i}`}>
{groupOpts}
......@@ -70,7 +68,7 @@ class SelectInput extends React.Component {
render() {
const { descriptionId, description } = this.getDescriptionElements(),
options = this.getOptions();
options = this.getOptions();
return (
<div className={this.props.className}>
......@@ -96,19 +94,19 @@ SelectInput.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
PropTypes.number,
]),
description: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element
PropTypes.element,
]),
options: PropTypes.array.isRequired,
disabled: PropTypes.bool,
onChange: PropTypes.func
onChange: PropTypes.func,
};
SelectInput.defaultProps = {
onChange: () => {}
onChange: () => {},
};
export default SelectInput;
src/TabInterface.js
......@@ -12,14 +12,14 @@ class TabInterface extends React.Component {
this.toggle = this.toggle.bind(this);
this.state = {
activeTab: 0,
uuid: newId('tabInterface')
uuid: newId('tabInterface'),
};
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
activeTab: tab,
});
}
}
......@@ -77,7 +77,7 @@ class TabInterface extends React.Component {
render() {
const labels = this.buildLabels(),
panels = this.buildPanels();
panels = this.buildPanels();
return (
<div className={this.props.className}>
......@@ -95,7 +95,7 @@ class TabInterface extends React.Component {
// TODO: custom validator that ensures tabLabels and panels are the same length
TabInterface.propTypes = {
tabLabels: PropTypes.array.isRequired,
panels: PropTypes.array.isRequired
panels: PropTypes.array.isRequired,
};
export default TabInterface;
src/TextInput.js
......@@ -3,7 +3,7 @@ import { Input } from 'reactstrap';
import asInput from './utils/asInput';
function TextField (props) {
function TextField(props) {
return (
<Input
id={props.id}
......@@ -25,7 +25,7 @@ const TextInput = asInput(TextField);
TextInput.defaultProps = {
onChange: () => {},
value: ''
value: '',
};
export default TextInput;
src/index.js
......@@ -5,5 +5,5 @@ import TextInput from './TextInput';
export {
SelectInput,
TabInterface,
TextInput
TextInput,
};
src/utils/asInput.js
......@@ -4,11 +4,9 @@ import { Label, FormGroup, FormFeedback, FormText } from 'reactstrap';
import newId from './newId';
const getDisplayName = WrappedComponent => {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
};
const getDisplayName = WrappedComponent => WrappedComponent.displayName || WrappedComponent.name || 'Component';
const asInput = WrappedComponent => {
const asInput = (WrappedComponent) => {
class NewComponent extends React.Component {
constructor(props) {
super(props);
......@@ -17,7 +15,7 @@ const asInput = WrappedComponent => {
const id = newId('textInput');
this.state = {
id: id,
id,
value: this.props.value,
isValid: true,
describedBy: [],
......@@ -27,7 +25,7 @@ const asInput = WrappedComponent => {
}
handleChange(event) {
this.setState({value: event.target.value});
this.setState({ value: event.target.value });
this.props.onChange(event.target.value, this.props.name);
}
......@@ -40,9 +38,9 @@ const asInput = WrappedComponent => {
getDescriptions() {
// possible future work: multiple feedback msgs?
const errorId = `error-${this.state.id}`,
descriptionId = `description-${this.state.id}`;
descriptionId = `description-${this.state.id}`;
let desc = {};
const desc = {};
if (!this.state.isValid) {
desc.error = (
......@@ -93,11 +91,11 @@ const asInput = WrappedComponent => {
value: PropTypes.string,
description: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element
PropTypes.element,
]),
disabled: PropTypes.bool,
required: PropTypes.bool,
onChange: PropTypes.func
onChange: PropTypes.func,
};
return NewComponent;
......
stories/Welcome.js
......@@ -22,8 +22,8 @@ const styles = {
code: {
fontSize: 15,
fontWeight: 600,
padding: "2px 5px",
border: "1px solid #eae9e9",
padding: '2px 5px',
border: '1px solid #eae9e9',
borderRadius: 4,
backgroundColor: '#f3f2f2',
color: '#3a3a3a',
......@@ -31,13 +31,13 @@ const styles = {
note: {
opacity: 0.5,
}
},
};
export default class Welcome extends React.Component {
showApp(e) {
e.preventDefault();
if(this.props.showApp) this.props.showApp();
if (this.props.showApp) this.props.showApp();
}
render() {
......@@ -49,9 +49,9 @@ export default class Welcome extends React.Component {
</p>
<p>
We've added some basic stories inside the <code style={styles.code}>src/stories</code> directory.
<br/>
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br/>
<br />
(Basically a story is like a visual test case.)
</p>
<p>
......@@ -67,12 +67,12 @@ export default class Welcome extends React.Component {
</p>
<p>
This is just one thing you can do with Storybook.
<br/>
<br />
Have a look at the <a style={styles.link} href="https://github.com/kadirahq/react-storybook" target="_blank">React Storybook</a> repo for more information.
</p>
<p style={styles.note}>
<b>NOTE:</b>
<br/>
<br />
Have a look at the <code style={styles.code}>.storybook/webpack.config.js</code> to add webpack
loaders and plugins you are using in this project.
</p>
......
stories/index.js
......@@ -7,7 +7,7 @@ import Welcome from './Welcome';
storiesOf('Welcome', module)
.add('to Storybook', () => (
<Welcome showApp={linkTo('Button')}/>
<Welcome showApp={linkTo('Button')} />
));
storiesOf('TextInput', module)
......@@ -28,8 +28,8 @@ storiesOf('TextInput', module)
if (value.length < 3) {
feedback = {
isValid: false,
validationMessage: 'Username must be at least 3 characters in length.'
}
validationMessage: 'Username must be at least 3 characters in length.',
};
}
return feedback;
}}
......@@ -46,7 +46,7 @@ storiesOf('SelectInput', module)
'apple',
'orange',
'strawberry',
'banana'
'banana',
]}
/>
))
......@@ -56,12 +56,12 @@ storiesOf('SelectInput', module)
label="New England States"
value="RI"
options={[
{label: 'Connecticut', value: 'CN'},
{label: 'Maine', value: 'ME'},
{label: 'Massachusetts', value: 'MA'},
{label: 'New Hampshire', value: 'NH'},
{label: 'Rhode Island', value: 'RI'},
{label: 'Vermont', value: 'VT'},
{ label: 'Connecticut', value: 'CN' },
{ label: 'Maine', value: 'ME' },
{ label: 'Massachusetts', value: 'MA' },
{ label: 'New Hampshire', value: 'NH' },
{ label: 'Rhode Island', value: 'RI' },
{ label: 'Vermont', value: 'VT' },
]}
/>
))
......@@ -74,25 +74,25 @@ storiesOf('SelectInput', module)
{
label: 'New England States',
options: [
{label: 'Connecticut', value: 'CN'},
{label: 'Maine', value: 'ME'},
{label: 'Massachusetts', value: 'MA'},
{label: 'New Hampshire', value: 'NH'},
{label: 'Rhode Island', value: 'RI'},
{label: 'Vermont', value: 'VT'},
{ label: 'Connecticut', value: 'CN' },
{ label: 'Maine', value: 'ME' },
{ label: 'Massachusetts', value: 'MA' },
{ label: 'New Hampshire', value: 'NH' },
{ label: 'Rhode Island', value: 'RI' },
{ label: 'Vermont', value: 'VT' },
],
},
{
label: 'Mid Atlantic States',
options: [
{label: 'Delaware', value: 'DE'},
{label: 'Maryland', value: 'MD'},
{label: 'New Jersey', value: 'NJ'},
{label: 'New York', value: 'NY'},
{label: 'Pennsylvania', value: 'PA'},
{label: 'Virginia', value: 'VA'},
{label: 'Washington, DC', value: 'DC'},
{label: 'West Virginia', value: 'WV'},
{ label: 'Delaware', value: 'DE' },
{ label: 'Maryland', value: 'MD' },
{ label: 'New Jersey', value: 'NJ' },
{ label: 'New York', value: 'NY' },
{ label: 'Pennsylvania', value: 'PA' },
{ label: 'Virginia', value: 'VA' },
{ label: 'Washington, DC', value: 'DC' },
{ label: 'West Virginia', value: 'WV' },
],
},
]}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment