109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
import {render, CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
|
|
import style from "./index.scss";
|
|
import {TableComponent} from "./table-component";
|
|
|
|
@defineElement("table-tester")
|
|
class TableTester extends CustomElement{
|
|
|
|
|
|
/**
|
|
*
|
|
* @type {({[headerRender]: (function(): string), render: (function(User): *), [size]: number})[]}
|
|
*/
|
|
#columnDefinitions = [
|
|
{
|
|
headerRender: () => "Id",
|
|
render: (u) => u.userId,
|
|
size: 110
|
|
},
|
|
{
|
|
headerRender: () => "Email",
|
|
render: (u) => u.identity?.email,
|
|
},
|
|
{
|
|
headerRender: () => "FirstName",
|
|
render: (u) => u.identity?.firstName,
|
|
size: 160
|
|
},
|
|
{
|
|
headerRender: () => "LastName",
|
|
render: (u) => u.identity?.lastName,
|
|
size: 160
|
|
},
|
|
{
|
|
headerRender: () => "...",
|
|
render: (u) => {
|
|
let d = new Date();
|
|
return (<button onClick={(ev) => this.testMe(ev, u, d)}>test me</button>)
|
|
},
|
|
size: 110
|
|
},
|
|
];
|
|
|
|
@state()
|
|
users = [];
|
|
|
|
render(){
|
|
|
|
return <TableComponent
|
|
columns={this.#columnDefinitions}
|
|
data={this.users}
|
|
/>
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
|
|
setTimeout(()=>this.load(), 0);
|
|
setTimeout(()=>this.load(), 50);
|
|
setTimeout(()=>this.load(), 100);
|
|
setTimeout(()=>this.load(), 150);
|
|
setTimeout(()=>this.load(), 200);
|
|
setTimeout(()=>this.load(), 250);
|
|
|
|
this.interval = setInterval(()=>this.load(), 3000);
|
|
}
|
|
|
|
interval;
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
if(this.interval) {
|
|
clearInterval(this.interval);
|
|
}
|
|
}
|
|
|
|
load(){
|
|
let users = [];
|
|
|
|
let rndFirstNames = ['Loes', 'Johnny', 'Maria', 'Jezus', 'Philippe', 'Filip', 'Annie'];
|
|
let rndLastNames = ['Peeters', 'Wachters', 'Jannsens', 'De Schaetzen', 'Becks', 'Konings', 'De Clerk'];
|
|
|
|
for(let i = 0; i < 5; ++i){
|
|
let first = rndFirstNames[Math.floor(rndFirstNames.length*Math.random())];
|
|
let last = rndLastNames[Math.floor(rndLastNames.length*Math.random())];
|
|
users.push({
|
|
userId: (Math.random()*99999).toString(36).slice(-6).toUpperCase(),
|
|
identity: {
|
|
firstName: first,
|
|
lastName: last,
|
|
email: `${first}.${last}@example.com`.toLocaleLowerCase()
|
|
}
|
|
})
|
|
}
|
|
|
|
this.users = users;
|
|
}
|
|
|
|
lastClear = new Date();
|
|
testMe = (ev, u, d)=>{
|
|
if((new Date()).getTime() - this.lastClear.getTime() > 20){
|
|
console.log("\n\n");
|
|
this.lastClear = new Date();
|
|
}
|
|
console.log("I should only show up once per click:", d.getTime());
|
|
}
|
|
}
|
|
|
|
document.body.appendChild(render(<style>{style}</style>));
|
|
document.body.appendChild(render(<TableTester/>));
|