client/src/components/NoteInput.js
author Alexandre Segura <mex.zktk@gmail.com>
Tue, 23 May 2017 16:18:34 +0200
changeset 5 5c91bfa8fcde
parent 2 b52921a63e77
child 8 6f572b6b6be3
permissions -rw-r--r--
Introduce SlateJS.
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
import React, {Component} from 'react';
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
2
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
     3
import ReactDOM from 'react-dom'
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
     4
import { Form, FormControl, FormGroup, Button } from 'react-bootstrap';
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
     5
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
import PropTypes from 'prop-types';
5
5c91bfa8fcde Introduce SlateJS.
Alexandre Segura <mex.zktk@gmail.com>
parents: 2
diff changeset
     7
import SlateEditor from './SlateEditor';
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
class NoteInput extends Component {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
  constructor(props) {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
    super(props);
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
    this.state = {value: ''};
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
    this.onAddNoteClick = this.onAddNoteClick.bind(this);
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
    this.handleChange = this.handleChange.bind(this);
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
  handleChange(event) {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
    this.setState({value : event.target.value});
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
  onAddNoteClick(event) {
5
5c91bfa8fcde Introduce SlateJS.
Alexandre Segura <mex.zktk@gmail.com>
parents: 2
diff changeset
    24
    const text = this.refs.editor.asPlain();
5c91bfa8fcde Introduce SlateJS.
Alexandre Segura <mex.zktk@gmail.com>
parents: 2
diff changeset
    25
    this.props.addNote(text);
5c91bfa8fcde Introduce SlateJS.
Alexandre Segura <mex.zktk@gmail.com>
parents: 2
diff changeset
    26
    this.refs.editor.clear();
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
  componentDidMount() {
5
5c91bfa8fcde Introduce SlateJS.
Alexandre Segura <mex.zktk@gmail.com>
parents: 2
diff changeset
    30
    // this.noteInput.focus();
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
  render() {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
    return (
2
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    35
      <Form>
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    36
        <FormGroup>
5
5c91bfa8fcde Introduce SlateJS.
Alexandre Segura <mex.zktk@gmail.com>
parents: 2
diff changeset
    37
          <SlateEditor ref="editor" />
2
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    38
        </FormGroup>
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    39
        <Button type="button" onClick={this.onAddNoteClick}>Add Note</Button>
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    40
      </Form>
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
    );
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
}
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
NoteInput.propTypes = {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
  addNote: PropTypes.func.isRequired
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
};
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
export default NoteInput;