client/src/components/Note.js
changeset 82 6f2999873343
parent 80 b3a02ea6d097
child 84 bf35a7737f94
equal deleted inserted replaced
81:a6bd1aaddc34 82:6f2999873343
    40     });
    40     });
    41 
    41 
    42     this.setState({ edit: false })
    42     this.setState({ edit: false })
    43   }
    43   }
    44 
    44 
       
    45   onClickClose = (e) => {
       
    46     e.preventDefault();
       
    47     e.stopPropagation();
       
    48 
       
    49     this.setState({ edit: false })
       
    50   }
       
    51 
    45   renderNoteContent() {
    52   renderNoteContent() {
    46     if (this.state.edit) {
    53     if (this.state.edit) {
    47       return (
    54       return (
    48         <div className="note-content">
    55         <div className="note-content">
    49           <SlateEditor ref="editor"
    56           <SlateEditor ref="editor"
    56     return (
    63     return (
    57       <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
    64       <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
    58     )
    65     )
    59   }
    66   }
    60 
    67 
       
    68   renderNoteRight() {
       
    69     if (this.state.edit) {
       
    70       return (
       
    71         <a onClick={this.onClickClose}>
       
    72           <span className="material-icons">close</span>
       
    73         </a>
       
    74       );
       
    75     }
       
    76 
       
    77     return (
       
    78       <a onClick={this.onClickDelete}>
       
    79         <span className="material-icons">delete</span>
       
    80       </a>
       
    81     )
       
    82   }
       
    83 
    61   render() {
    84   render() {
    62     return (
    85     return (
    63       <div id={"note-" + this.props.note._id} className="note" onClick={ this.enterEditMode }>
    86       <div id={"note-" + this.props.note._id} className="note" onClick={ this.enterEditMode }>
    64         <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
    87         <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
    65         <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
    88         <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
    66         { this.renderNoteContent() }
    89         { this.renderNoteContent() }
    67         <div className="note-margin-comment">
    90         <div className="note-margin-comment">
    68           <small className="text-muted">{ this.props.note.marginComment }</small>
    91           <small className="text-muted">{ this.props.note.marginComment }</small>
    69         </div>
    92         </div>
    70         <a onClick={this.onClickDelete}>
    93         { this.renderNoteRight() }
    71           <span className="material-icons">delete</span>
       
    72         </a>
       
    73       </div>
    94       </div>
    74     );
    95     );
    75   };
    96   };
    76 }
    97 }
    77 
    98