client/src/components/NoteInput.js
changeset 35 97106bacb24e
parent 29 4cfeabef7d5e
child 46 4aa24724e5b3
equal deleted inserted replaced
34:6c920486de81 35:97106bacb24e
     1 import React, { Component } from 'react';
     1 import React, { Component } from 'react';
     2 import { connect } from 'react-redux';
     2 import { connect } from 'react-redux';
     3 import { bindActionCreators } from 'redux';
     3 import { bindActionCreators } from 'redux';
     4 import { Form, FormGroup, Button, Label, Row, Col } from 'react-bootstrap';
     4 import { Form, FormGroup, FormControl, Button, Label, Row, Col, Panel } from 'react-bootstrap';
     5 import moment from 'moment';
     5 import moment from 'moment';
     6 
     6 
     7 import PropTypes from 'prop-types';
     7 import PropTypes from 'prop-types';
     8 import SlateEditor from './SlateEditor';
     8 import SlateEditor from './SlateEditor';
     9 import Clock from './Clock'
     9 import Clock from './Clock'
    65   }
    65   }
    66 
    66 
    67   render() {
    67   render() {
    68     return (
    68     return (
    69       <Form>
    69       <Form>
    70         <Row>
    70         <Panel>
    71           <Col md={6}>
    71             <Row>
    72             { this.renderTiming() }
    72               <Col md={6}>
    73           </Col>
    73                 { this.renderTiming() }
    74           <Col md={6} className="text-right">
    74               </Col>
    75             <Clock />
    75               <Col md={6} className="text-right">
    76           </Col>
    76                 <Clock />
    77         </Row>
    77               </Col>
    78         <hr />
    78             </Row>
    79         <FormGroup>
    79         </Panel>
    80           <div className="editor-wrapper">
    80         <div className="editor">
       
    81           <div className="editor-left">
    81             <SlateEditor ref="editor" onChange={this.onEditorChange} />
    82             <SlateEditor ref="editor" onChange={this.onEditorChange} />
    82           </div>
    83           </div>
    83         </FormGroup>
    84           <div className="editor-right">
       
    85             <FormControl
       
    86               name="margin"
       
    87               componentClass="textarea"
       
    88               placeholder="Enter a margin comment for your note"
       
    89               inputRef={ ref => { this.description = ref; } }
       
    90             />
       
    91           </div>
       
    92         </div>
    84         <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>
    93         <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>
    85       </Form>
    94       </Form>
    86     );
    95     );
    87   }
    96   }
    88 }
    97 }