Nota REACT con delete

In this example below you will see how to do a Nota REACT con delete with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0utKast, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0utKast ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Nota REACT con delete</title>
  
  
  
  
  
</head>

<body>

  
  <script src='https://cdn.rawgit.com/bradleyboy/codepen-react/master/dist/codepen-react-0.1.1.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.0/lodash.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0utKast/nota-react-con-delete-ZGpZjE */
var notepad = {
    notes: [],
    selectedId: null
};

var nextNodeId = 1;

var onAddNote = function () {
    var note = {id: nextNodeId, content: ''};
    nextNodeId++;
    notepad.notes.push(note);
    notepad.selectedId = note.id;
    onChange();
};

var onChangeNote = function (id, value) {
    var note = _.find(notepad.notes, function (note) {
        return note.id === id;
    });
    if (note) {
        note.content = value;
    }
    onChange();
};

var onDeleteNote = function (id) {
    var note = _.find(notepad.notes, function (note) {
        return note.id === id;
    });
    if (note) {
        notepad.notes = notepad.notes.filter(function (note) {
            return note.id !== id;
        });
    }
    if (notepad.selectedId === id) {
        notepad.selectedId = null;
    }
    onChange();
};

var onSelectNote = function (id) {
    notepad.selectedId = id;
    onChange();
};

var NoteSummary = React.createClass({
    render: function () {
        var note = this.props.note;
        var title = note.content;
        if (title.indexOf('\n') > 0) {
            title = note.content.substring(0, note.content.indexOf('\n'));
        }
        if (!title) {
            title = 'Sin Título';
        }
    
        return (
            <div className="note-summary">{title}</div>
        );
    }
});

var NotesList = React.createClass({
    render: function () {
        var notepad = this.props.notepad;
        var notes = notepad.notes;
    
        return (
            <div className="note-list">
                {
                    notes.map(function (note) {
                        return (
                            <div key={note.id} className={notepad.selectedId === note.id ? 'note-selected' : ''}>
                                <a href="#" onClick={this.props.onSelectNote.bind(null, note.id)}>
                                    <NoteSummary note={note}/>
                                </a>
                            </div>
                        );
                    }.bind(this))
                }
            </div>
        );
    }
});

var NoteEditor = React.createClass({
    onChange: function (event) {
        this.props.onChange(this.props.note.id, event.target.value);
    },

    render: function () {
        return (
            <div>
                <div>
                    <textarea rows={5} cols={40} value={this.props.note.content} onChange={this.onChange}/>
                </div>
                <button onClick={this.props.onDelete.bind(null, this.props.note.id)}>Borrar nota</button>
            </div>
        );
    }
});

var Notepad = React.createClass({
    render: function () {
        var notepad = this.props.notepad;
    
        var editor = null;
        
        var selectedNote = _.find(notepad.notes, function (note) {
            return note.id === notepad.selectedId;
        });
        
        if (selectedNote) {
            editor = <NoteEditor note={selectedNote} onChange={this.props.onChangeNote} onDelete={this.props.onDeleteNote}/>
        }
    
        return (
            <div id="notepad">
                <NotesList notepad={notepad} onSelectNote={this.props.onSelectNote}/>
                <div><button onClick={this.props.onAddNote}>Añadir nota</button></div>
                {editor}
            </div>
        );
    }
});

var onChange = function () {
    React.render(
        <Notepad notepad={notepad} onAddNote={onAddNote} onSelectNote={onSelectNote} onDeleteNote={onDeleteNote} onChangeNote={onChangeNote}/>,
        document.body
    );
};

onChange();

Comments