v0.0.8: Fixed issues with event-bindings
This commit is contained in:
parent
a757ae37b3
commit
de0dd21b8d
@ -1,4 +1,5 @@
|
||||
# Don't publish the src containing ESNext proposal's code. Only publish the bundled output in dist/ and the ES6-transpiled src from lib/
|
||||
src/*
|
||||
node_modules/*
|
||||
rollup.config.js
|
||||
yarn.lock
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@cerxes/csx",
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.8",
|
||||
"author": "Miel Truyen <miel.truyen@cerxes.net>",
|
||||
"description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.",
|
||||
"repository": {
|
||||
|
||||
@ -88,8 +88,13 @@ export const NodeTreeRenderer = {
|
||||
if(!newVal){
|
||||
host.removeEventListener(eventName, oldVal);
|
||||
}else{
|
||||
if (oldVal && oldVal !== newVal){
|
||||
host.removeEventListener(eventName, oldVal);
|
||||
}
|
||||
if(newVal !== oldVal){
|
||||
host.addEventListener(eventName, newVal);
|
||||
}
|
||||
}
|
||||
}else{
|
||||
// Assumed to be just an attribute
|
||||
if(newVal===undefined || newVal === false || newVal===null || newVal===''){
|
||||
|
||||
@ -24,6 +24,9 @@
|
||||
<li>
|
||||
<a href="./todos-mvc/">Todos MVC</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./table/">Tables (arrow functions)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
10
tests/table/index.html
Normal file
10
tests/table/index.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Cerxes - CustomElements - SVG</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
108
tests/table/index.jsx
Normal file
108
tests/table/index.jsx
Normal file
@ -0,0 +1,108 @@
|
||||
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/>));
|
||||
19
tests/table/index.scss
Normal file
19
tests/table/index.scss
Normal file
@ -0,0 +1,19 @@
|
||||
html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.center-me{
|
||||
align-self: center;
|
||||
}
|
||||
61
tests/table/table-component.jsx
Normal file
61
tests/table/table-component.jsx
Normal file
@ -0,0 +1,61 @@
|
||||
import {CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
|
||||
import TableComponentStyle from "./table-component.scss";
|
||||
|
||||
let tableId = 0;
|
||||
|
||||
@defineElement("tripto-table")
|
||||
export class TableComponent extends CustomElement {
|
||||
|
||||
#columnDefinitions;
|
||||
|
||||
@prop()
|
||||
set columns(value) {
|
||||
this.#columnDefinitions = value;
|
||||
}
|
||||
|
||||
@state() data;
|
||||
|
||||
@prop()
|
||||
set data(value) {
|
||||
this.data = value;
|
||||
}
|
||||
|
||||
#tableId = tableId++;
|
||||
render() {
|
||||
console.log(`Table render at for ${this.data?.length??0} rows: ${Date.now()}`);
|
||||
return (
|
||||
<Host>
|
||||
<style>{TableComponentStyle}</style>
|
||||
<style>
|
||||
{this.#columnDefinitions?.map((col, idx) => (
|
||||
`#table_${this.#tableId} .cell.cell_${idx} {` +
|
||||
` flex: ${(col.size ? (`0 0 ${col.size}px`) : `1`)};` +
|
||||
`}`
|
||||
))}
|
||||
</style>
|
||||
<section className="table" id={`table_${this.#tableId}`}>
|
||||
<header>
|
||||
<div className="row">
|
||||
{this.#columnDefinitions.map((col, idx) => (
|
||||
<div className={`cell cell_${idx}`}>
|
||||
{col.headerRender()}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{this.data?.map(dataRow => (
|
||||
<div className="row">
|
||||
{this.#columnDefinitions.map((col, idx) => (
|
||||
<div className={`cell cell_${idx}`}>
|
||||
{col.render(dataRow)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</main>
|
||||
</section>
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
}
|
||||
32
tests/table/table-component.scss
Normal file
32
tests/table/table-component.scss
Normal file
@ -0,0 +1,32 @@
|
||||
|
||||
.table {
|
||||
--box-color: #a0a0a0;
|
||||
--primary-color: #5f74ff;
|
||||
--table-background: #e4e4f0;
|
||||
--box-border: 1px solid #7d7d7d;
|
||||
|
||||
border: var(--box-border);
|
||||
display: block;
|
||||
|
||||
header {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
header > .row,
|
||||
main > .row {
|
||||
background: var(--table-background);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
line-height: 3em;
|
||||
border-bottom: var(--box-border);
|
||||
|
||||
.cell {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
main > .row {
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user