cerxes/csx
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

A working version but using non-legacy decorators should be reconsidered, and probably quite a few bugs left in the render loop

Browse Source
This commit is contained in:
Miel Truyen
2019-11-03 15:35:19 +01:00
parent fc527cb156
commit 3a135a30d1
18 changed files with 599 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
test/todos-mvc/components/my-todo.jsx
View File

@@ -7,11 +7,20 @@ import {TodoItem} from './todo-item';
@defineElement('my-todo')
export class MyTodo extends CustomElement{
uid = 1;
// @State Won't work;
@State() todos = [
{id: this.uid++, text: "my initial todo", checked: false },
{id: this.uid++, text: "Learn about Web Components", checked: false },
];
@State() todos;
// = [
// {id: this.uid++, text: "my initial todo", checked: false },
// {id: this.uid++, text: "Learn about Web Components", checked: false },
// ];
constructor(){
super();
this.uid = 1;
this.todos = [
{id: this.uid++, text: "my initial todo", checked: false },
{id: this.uid++, text: "Learn about Web Components", checked: false },
]
}
render(){
return (
@@ -27,7 +36,8 @@ export class MyTodo extends CustomElement{
{this.todos.map(item =>
<todo-item
model={ item.id }
checked={( item.checked )}
text={item.text}
checked={ item.checked }
>
{ item.text }
</todo-item>
@@ -44,12 +54,14 @@ export class MyTodo extends CustomElement{
this.todos = [...this.todos, { id: this.uid++, text, checked: false }];
}
};
handleCheck = ({detail: checked}, id) => {
handleCheck = ({detail: {checked,id}}) => {
let indexOf = this.todos.findIndex(t=>t.id===id);
let updated = {...this.todos[indexOf], checked};
this.todos = [...this.todos.slice(0,indexOf), updated, ...this.todos.slice(indexOf+1)];
if(indexOf>=0) {
let updated = { ...this.todos[ indexOf ], checked };
this.todos = [...this.todos.slice(0, indexOf), updated, ...this.todos.slice(indexOf + 1)];
}
};
handleRemove = (e,id)=>{
handleRemove = ({detail: {id}})=>{
let indexOf = this.todos.findIndex(t=>t.id===id);
this.todos = [...this.todos.slice(0,indexOf), ...this.todos.slice(indexOf+1)];
}

9
test/todos-mvc/components/todo-item.jsx
View File

@@ -1,9 +1,11 @@
import {defineElement, render, CustomElement, Host, ShadowDOM} from "../../../packages/csx-custom-elements";
import {defineElement, render, CustomElement, Host, ShadowDOM, State} from "../../../packages/csx-custom-elements";
import style from './todo-item.scss';
@defineElement('todo-item')
export class TodoItem extends CustomElement{
checked = false;// TODO annotate as prop (attribute)
@State() checked = false;// TODO annotate as prop instead of state (attribute)
@State() model; // TODO annotate as prop instead of state
@State() text;
render(){
return (
@@ -27,12 +29,13 @@ export class TodoItem extends CustomElement{
handleChange = ()=>{
this.dispatchEvent(new CustomEvent('check', {
detail: (this.checked=!this.checked),
detail: {checked: (this.checked=!this.checked), id: this.model},
bubbles: true
}));
};
handleClick = ()=>{
this.dispatchEvent(new CustomEvent('remove', {
detail: {id: this.model},
bubbles: true
}));
};