Skip to content

Instantly share code, notes, and snippets.

@valex

valex/index.html

Created October 22, 2018 14:54
Show Gist options
  • Save valex/4438599a16235638ca428855358a6706 to your computer and use it in GitHub Desktop.
Save valex/4438599a16235638ca428855358a6706 to your computer and use it in GitHub Desktop.
Download ZIP
Log component state with reply
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="03.00.table.css">
</head>
<body>
<div id="app">
<!-- my app renders here -->
</div>
<script charset="utf-8" crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>
<script type="text/babel">
class Excel extends React.Component{
constructor(params) {
super(params);
this.displayName= 'Excel';
this._preSearchData= null;
this._log = [];
this.state = {
data: this.props.initialData,
sortby: null,
descending: false,
edit: null, // [row index, cell index]
search: false,
};
// This binding is necessary to make `this` work in the callback
this._save = this._save.bind(this);
this._search = this._search.bind(this);
this._sort = this._sort.bind(this);
this._showEditor = this._showEditor.bind(this);
this._toggleSearch = this._toggleSearch.bind(this);
};
_logSetState(newState) {
// remember the old state in a clone
this._log.push(JSON.parse(JSON.stringify(
this._log.length === 0 ? this.state : newState
)));
this.setState(newState);
};
_replay() {
if (this._log.length === 0) {
console.warn('No state to replay yet');
return;
}
var idx = -1;
var interval = setInterval(function() {
idx++;
if (idx === this._log.length - 1) { // the end
clearInterval(interval);
}
this.setState(this._log[idx]);
}.bind(this), 1000);
};
componentDidMount() {
document.onkeydown = function(e) {
if (e.altKey && e.shiftKey && e.keyCode === 82) { // ALT+SHIFT+R(eplay)
this._replay();
}
}.bind(this);
};
_search(e) {
var needle = e.target.value.toLowerCase();
if (!needle) {
this._logSetState({data: this._preSearchData});
return;
}
var idx = e.target.dataset.idx;
var searchdata = this._preSearchData.filter(function(row) {
return row[idx].toString().toLowerCase().indexOf(needle) > -1;
});
this._logSetState({data: searchdata});
};
_toggleSearch(e){
if (this.state.search) {
this._logSetState({
data: this._preSearchData,
search: false,
});
this._preSearchData = null;
} else {
this._preSearchData = this.state.data;
this._logSetState({
search: true,
});
}
};
_save(e){
e.preventDefault();
var input = e.target.firstChild;
var data = this.state.data.slice();
data[this.state.edit.row][this.state.edit.cell] = input.value;
this._logSetState({
edit: null,
data: data,
});
};
_sort(e){
var column = e.target.cellIndex;
var data = this.state.data.slice(); // copy data
var descending = this.state.sortby === column && !this.state.descending;
data.sort(function(a, b) {
return descending
? (a[column] < b[column] ? 1 : -1)
: (a[column] > b[column] ? 1 : -1);
});
this._logSetState({
data: data,
sortby: column,
descending: descending,
});
};
_showEditor(e){
this._logSetState({edit: {
row: parseInt(e.target.dataset.row, 10),
cell: e.target.cellIndex,
}});
};
_renderSearch(){
if (!this.state.search) {
return null;
}
return (
<tr onChange={this._search}>
{
this.props.headers.map(function(_ignore, idx)
{
return (<td key={idx}><input
style={{width: 100+'%'}}
data-idx={idx} type="text"/></td>);
}, this)
}
</tr>
);
};
_renderToolbar(){
return <button className="toolbar" onClick={this._toggleSearch}>Search</button>
};
_renderTable() {
return (
<table>
<thead onClick={this._sort}>
<tr>
{
this.props.headers.map(function(title, idx)
{
if (this.state.sortby === idx) {
title += this.state.descending ? ' \u2191' : ' \u2193'
}
return (<th key={idx}>{title}</th>);
}, this)
}
</tr>
</thead>
<tbody onDoubleClick={this._showEditor}>
{this._renderSearch()}
{
this.state.data.map(function(row, idrow)
{
return (
<tr key={idrow}>
{
row.map(function(cell, idcell){
var content = cell;
var edit = this.state.edit;
if (edit && edit.row === idrow && edit.cell === idcell) {
content = <form onSubmit={this._save}><input defaultValue={cell} type="text"/></form>;
}
return (<td data-row={idrow} key={idcell}>{content}</td>);
}, this)
}
</tr>
);
}, this)
}
</tbody>
</table>
);
};
render(){
return (
<div>
{this._renderToolbar()}
{this._renderTable()}
</div>
);
};
}
Excel.propTypes = {
headers: PropTypes.arrayOf(PropTypes.string),
initialData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
};
var headers = [
"Book", "Author", "Language", "Published", "Sales"
];
var data = [
["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954–1955", "150 million"],
["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"],
["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754–1791", "100 million"],
["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
];
ReactDOM.render(
React.createElement(Excel, {
headers: headers,
initialData: data,
}),
document.getElementById("app")
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment