<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Nota con confirmación borrar</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-con-confirmaciandxf3n-borrar-OVRYwL */
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({
getInitialState: function () {
return {
isConfirming: false
};
},
onChange: function (event) {
this.props.onChange(this.props.note.id, event.target.value);
},
onDelete: function () {
if (this.state.isConfirming) {
this.props.onDelete(this.props.note.id);
this.setState({isConfirming: false});
} else {
this.setState({isConfirming: true});
}
},
onCancelDelete: function () {
this.setState({isConfirming: false});
},
render: function () {
return (
<div>
<div>
<textarea rows={5} cols={40} value={this.props.note.content} onChange={this.onChange}/>
</div>
<button onClick={this.onDelete}>
{
this.state.isConfirming ? 'Confirmar' : 'Borrar nota'
}
</button>
{
this.state.isConfirming ? <button onClick={this.onCancelDelete}>Cancelar</button> : null
}
</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 key={selectedNote.id} 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();