Skip to content

Commit 70faf16

Browse files
justin808justin808
committed
Convert to latest react-bootstrap syntax
NOTE: This is not passing rspec See react-bootstrap/react-bootstrap#1850
1 parent 5f1c9a6 commit 70faf16

File tree

2 files changed

+151
-111
lines changed

2 files changed

+151
-111
lines changed

‎client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

Lines changed: 139 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1+
// NOTE: https://github.com/react-bootstrap/react-bootstrap/issues/1850 seesm to require string
2+
// refs and not the callback kind.
3+
/* eslint-disable react/no-find-dom-node, react/no-string-refs */
14
import React, { PropTypes } from 'react';
2-
3-
import Row from 'react-bootstrap/lib/Row';
5+
import ReactDOM from 'react-dom';
46
import Col from 'react-bootstrap/lib/Col';
7+
import FormControl from 'react-bootstrap/lib/FormControl';
8+
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
9+
import Form from 'react-bootstrap/lib/Form';
10+
import FormGroup from 'react-bootstrap/lib/FormGroup';
11+
import Button from 'react-bootstrap/lib/Button';
512
import Nav from 'react-bootstrap/lib/Nav';
613
import NavItem from 'react-bootstrap/lib/NavItem';
714
import Alert from 'react-bootstrap/lib/Alert';
@@ -10,7 +17,7 @@ import _ from 'lodash';
1017

1118
import BaseComponent from 'libs/components/BaseComponent';
1219

13-
import Input from '../../Input';
20+
import css from './CommentForm.scss';
1421

1522
const emptyComment = { author: '', text: '' };
1623
const textPlaceholder = 'Say something using markdown...';
@@ -57,22 +64,22 @@ export default class CommentForm extends BaseComponent {
5764
switch (this.state.formMode) {
5865
case 0:
5966
comment = {
60-
author: this.horizontalAuthorNode.getValue(),
61-
text: this.horizontalTextNode.getValue(),
67+
author: ReactDOM.findDOMNode(this.refs.horizontalAuthorNode).value,
68+
text: ReactDOM.findDOMNode(this.refs.horizontalTextNode).value,
6269
};
6370
break;
6471
case 1:
6572
comment = {
66-
author: this.stackedAuthorNode.getValue(),
67-
text: this.stackedTextNode.getValue(),
73+
author: ReactDOM.findDOMNode(this.refs.stackedAuthorNode).value,
74+
text: ReactDOM.findDOMNode(this.refs.stackedTextNode).value,
6875
};
6976
break;
7077
case 2:
7178
comment = {
7279
// This is different because the input is a native HTML element
7380
// rather than a React element.
74-
author: this.inlineAuthorNode.value,
75-
text: this.inlineTextNode.value,
81+
author: ReactDOM.findDOMNode(this.refs.inlineAuthorNode).value,
82+
text: ReactDOM.findDOMNode(this.refs.inlineTextNode).value,
7683
};
7784
break;
7885
default:
@@ -100,13 +107,13 @@ export default class CommentForm extends BaseComponent {
100107
let ref;
101108
switch (this.state.formMode) {
102109
case 0:
103-
ref = this.horizontalTextNode.getInputDOMNode();
110+
ref = ReactDOM.findDOMNode(this.refs.horizontalTextNode);
104111
break;
105112
case 1:
106-
ref = this.stackedTextNode.getInputDOMNode();
113+
ref = ReactDOM.findDOMNode(this.refs.stackedTextNode);
107114
break;
108115
case 2:
109-
ref = this.inlineTextNode;
116+
ref = ReactDOM.findDOMNode(this.refs.inlineTextNode);
110117
break;
111118
default:
112119
throw new Error(`Unexpected state.formMode ${this.state.formMode}`);
@@ -119,44 +126,52 @@ export default class CommentForm extends BaseComponent {
119126
return (
120127
<div>
121128
<hr />
122-
<form className="commentForm form-horizontal" onSubmit={this.handleSubmit}>
123-
<Input
124-
type="text"
125-
label="Name"
126-
placeholder="Your Name"
127-
labelClassName="col-sm-2"
128-
wrapperClassName="col-sm-10"
129-
ref={(node) => { this.horizontalAuthorNode = node; }}
130-
value={this.state.comment.author}
131-
onChange={this.handleChange}
132-
disabled={this.props.isSaving}
133-
hasFeedback
134-
bsStyle={bsStyleFor('author', this.props.error)}
135-
/>
136-
<Input
137-
type="textarea"
138-
label="Text"
139-
placeholder={textPlaceholder}
140-
labelClassName="col-sm-2"
141-
wrapperClassName="col-sm-10"
142-
ref={(node) => { this.horizontalTextNode = node; }}
143-
value={this.state.comment.text}
144-
onChange={this.handleChange}
145-
disabled={this.props.isSaving}
146-
hasFeedback
147-
bsStyle={bsStyleFor('text', this.props.error)}
148-
/>
149-
<div className="form-group">
150-
<div className="col-sm-offset-2 col-sm-10">
151-
<input
129+
<Form horizontal className="commentForm form-horizontal" onSubmit={this.handleSubmit}>
130+
<FormGroup controlId="formHorizontalName">
131+
<Col componentClass={ControlLabel} sm={2}>
132+
Name
133+
</Col>
134+
<Col sm={10}>
135+
<FormControl
136+
type="text"
137+
placeholder="Your Name"
138+
ref="horizontalAuthorNode"
139+
value={this.state.comment.author}
140+
onChange={this.handleChange}
141+
disabled={this.props.isSaving}
142+
bsStyle={bsStyleFor('author', this.props.error)}
143+
/>
144+
</Col>
145+
</FormGroup>
146+
<FormGroup controlId="formHorizontalName">
147+
<Col componentClass={ControlLabel} sm={2}>
148+
Text
149+
</Col>
150+
<Col sm={10}>
151+
<FormControl
152+
type="textarea"
153+
label="Text"
154+
placeholder={textPlaceholder}
155+
ref="horizontalTextNode"
156+
value={this.state.comment.text}
157+
onChange={this.handleChange}
158+
disabled={this.props.isSaving}
159+
bsStyle={bsStyleFor('text', this.props.error)}
160+
/>
161+
</Col>
162+
</FormGroup>
163+
<FormGroup controlId="formHorizontalSubmit">
164+
<Col smOffset={2} sm={10}>
165+
<Button
152166
type="submit"
153167
className="btn btn-primary"
154-
value={this.props.isSaving ? 'Saving...' : 'Post'}
155168
disabled={this.props.isSaving}
156-
/>
157-
</div>
158-
</div>
159-
</form>
169+
>
170+
{this.props.isSaving ? 'Saving...' : 'Post'}
171+
</Button>
172+
</Col>
173+
</FormGroup>
174+
</Form>
160175
</div>
161176
);
162177
}
@@ -166,79 +181,92 @@ export default class CommentForm extends BaseComponent {
166181
<div>
167182
<hr />
168183
<form className="commentForm form" onSubmit={this.handleSubmit}>
169-
<Input
170-
type="text"
171-
label="Name"
172-
placeholder="Your Name"
173-
ref={(node) => { this.stackedAuthorNode = node; }}
174-
value={this.state.comment.author}
175-
onChange={this.handleChange}
176-
disabled={this.props.isSaving}
177-
hasFeedback
178-
bsStyle={bsStyleFor('author', this.props.error)}
179-
/>
180-
<Input
181-
type="textarea"
182-
label="Text"
183-
placeholder={textPlaceholder}
184-
ref={(node) => { this.stackedTextNode = node; }}
185-
value={this.state.comment.text}
186-
onChange={this.handleChange}
187-
disabled={this.props.isSaving}
188-
hasFeedback
189-
bsStyle={bsStyleFor('text', this.props.error)}
190-
/>
191-
<input
192-
type="submit"
193-
className="btn btn-primary"
194-
value={this.props.isSaving ? 'Saving...' : 'Post'}
195-
disabled={this.props.isSaving}
196-
/>
184+
<FormGroup controlId="formBasicName">
185+
<ControlLabel>Name</ControlLabel>
186+
<FormControl
187+
type="text"
188+
placeholder="Your Name"
189+
ref="stackedAuthorNode"
190+
value={this.state.comment.author}
191+
onChange={this.handleChange}
192+
disabled={this.props.isSaving}
193+
bsStyle={bsStyleFor('author', this.props.error)}
194+
/>
195+
</FormGroup>
196+
<FormGroup
197+
controlId="formBasicText"
198+
>
199+
<ControlLabel>Text</ControlLabel>
200+
<FormControl
201+
type="textarea"
202+
label="Text"
203+
placeholder={textPlaceholder}
204+
ref="stackedTextNode"
205+
value={this.state.comment.text}
206+
onChange={this.handleChange}
207+
disabled={this.props.isSaving}
208+
bsStyle={bsStyleFor('text', this.props.error)}
209+
/>
210+
</FormGroup>
211+
<FormGroup controlId="formBasicSubmit">
212+
<Button
213+
type="submit"
214+
className="btn btn-primary"
215+
disabled={this.props.isSaving}
216+
>
217+
{this.props.isSaving ? 'Saving...' : 'Post'}
218+
</Button>
219+
</FormGroup>
197220
</form>
198221
</div>
199222
);
200223
}
201224

225+
// Head up! We have some CSS modules going on here with the className props below.
202226
formInline() {
203227
return (
204228
<div>
205229
<hr />
206-
<form className="commentForm form" onSubmit={this.handleSubmit}>
207-
<Input label="Inline Form" wrapperClassName="wrapper">
208-
<Row>
209-
<Col xs={3}>
210-
<input
211-
type="text"
212-
className="form-control"
213-
placeholder="Your Name"
214-
ref={(node) => { this.inlineAuthorNode = node; }}
215-
value={this.state.comment.author}
216-
onChange={this.handleChange}
217-
disabled={this.props.isSaving}
218-
/>
219-
</Col>
220-
<Col xs={8}>
221-
<input
222-
type="text"
223-
className="form-control"
224-
placeholder={textPlaceholder}
225-
ref={(node) => { this.inlineTextNode = node; }}
226-
value={this.state.comment.text}
227-
onChange={this.handleChange}
228-
disabled={this.props.isSaving}
229-
/>
230-
</Col>
231-
<Col xs={1}>
232-
<input
233-
type="submit"
234-
className="btn btn-primary"
235-
value={this.props.isSaving ? 'Saving...' : 'Post'}
236-
disabled={this.props.isSaving}
237-
/>
238-
</Col>
239-
</Row>
240-
</Input>
241-
</form>
230+
<Form inline className="commentForm form-inline" onSubmit={this.handleSubmit}>
231+
<FormGroup controlId="formInlineName" >
232+
<ControlLabel>
233+
Name
234+
</ControlLabel>
235+
<FormControl
236+
type="text"
237+
placeholder="Your Name"
238+
ref="inlineAuthorNode"
239+
value={this.state.comment.author}
240+
onChange={this.handleChange}
241+
disabled={this.props.isSaving}
242+
bsStyle={bsStyleFor('author', this.props.error)}
243+
className={css.nameFormControl}
244+
/>
245+
</FormGroup>
246+
<FormGroup controlId="formInlineName">
247+
<ControlLabel>
248+
Text
249+
</ControlLabel>
250+
<FormControl
251+
type="textarea"
252+
label="Text"
253+
placeholder={textPlaceholder}
254+
ref="inlineTextNode"
255+
value={this.state.comment.text}
256+
onChange={this.handleChange}
257+
disabled={this.props.isSaving}
258+
bsStyle={bsStyleFor('text', this.props.error)}
259+
className={css.textFormControl}
260+
/>
261+
</FormGroup>
262+
<Button
263+
type="submit"
264+
className="btn btn-primary"
265+
disabled={this.props.isSaving}
266+
>
267+
{this.props.isSaving ? 'Saving...' : 'Post'}
268+
</Button>
269+
</Form>
242270
</div>
243271
);
244272
}

‎client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.nameFormControl {
2+
margin-left: 10px;
3+
margin-right: 20px;
4+
// Must set width to !important b/c CSS modules value will be overriden by the bootstrap value
5+
width: 150px !important;
6+
}
7+
8+
.textFormControl {
9+
margin-left: 10px;
10+
margin-right: 20px;
11+
width: 250px !important;
12+
}

0 commit comments

Comments
 (0)