Skip to content

Commit 853d5c3

Browse files
Nefsen402Nefsen402
committed
destam-dom: Inline App function
1 parent b4531d5 commit 853d5c3

File tree

1 file changed

+76
-80
lines changed

1 file changed

+76
-80
lines changed

‎frameworks/keyed/destam-dom/src/main.jsx

Lines changed: 76 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -13,90 +13,86 @@ const Button = ({ id, text, fn }) =>
1313
<button id={ id } class='btn btn-primary btn-block' type='button' $onclick={ fn }>{ text }</button>
1414
</div>
1515

16-
const App = () => {
17-
const
18-
array = OArray(),
19-
selected = Observer.mutable(null),
20-
selector = selected.selector('danger', null),
21-
run = () => {
22-
array.splice(0, array.length);
23-
appendData(1000);
24-
},
25-
runLots = () => {
26-
array.splice(0, array.length);
27-
appendData(10000)
28-
},
29-
add = () => appendData(1000),
30-
update = () => {
31-
for(let i = 0, len = array.length; i < len; i += 10)
32-
array[i].label.set(array[i].label.get() + ' !!!');
33-
},
34-
swapRows = () => {
35-
if (array.length > 998) {
36-
atomic (() => {
37-
let tmp = array[1];
38-
array[1] = array[998];
39-
array[998] = tmp;
40-
});
41-
}
42-
},
43-
clear = () => {
44-
array.splice(0, array.length);
45-
},
46-
remove = idx => {
47-
array.splice(idx, 1);
48-
},
49-
select = idx => {
50-
selected.set(array[idx].label);
51-
};
16+
const
17+
array = OArray(),
18+
selected = Observer.mutable(null),
19+
selector = selected.selector('danger', null),
20+
run = () => {
21+
array.splice(0, array.length);
22+
appendData(1000);
23+
},
24+
runLots = () => {
25+
array.splice(0, array.length);
26+
appendData(10000)
27+
},
28+
add = () => appendData(1000),
29+
update = () => {
30+
for(let i = 0, len = array.length; i < len; i += 10)
31+
array[i].label.set(array[i].label.get() + ' !!!');
32+
},
33+
swapRows = () => {
34+
if (array.length > 998) {
35+
atomic (() => {
36+
let tmp = array[1];
37+
array[1] = array[998];
38+
array[998] = tmp;
39+
});
40+
}
41+
},
42+
clear = () => {
43+
array.splice(0, array.length);
44+
},
45+
remove = idx => {
46+
array.splice(idx, 1);
47+
},
48+
select = idx => {
49+
selected.set(array[idx].label);
50+
};
5251

53-
function appendData(count) {
54-
const arr = Array(count);
55-
for (let i = 0; i < count; i++) {
56-
let label = Observer.mutable(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`);
52+
function appendData(count) {
53+
const arr = Array(count);
54+
for (let i = 0; i < count; i++) {
55+
let label = Observer.mutable(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`);
5756

58-
const dom =
59-
<tr class={selector(label)}>
60-
<td class='col-md-1' $textContent={ idCounter++ } />
61-
<td class='col-md-4'><a $clickHandler={select} $textContent={ label } /></td>
62-
<td class='col-md-1'><a $clickHandler={remove}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
63-
<td class='col-md-6'/>
64-
</tr>;
57+
const dom =
58+
<tr class={selector(label)}>
59+
<td class='col-md-1' $textContent={ idCounter++ } />
60+
<td class='col-md-4'><a $clickHandler={select} $textContent={ label } /></td>
61+
<td class='col-md-1'><a $clickHandler={remove}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
62+
<td class='col-md-6'/>
63+
</tr>;
6564

66-
dom.label = label;
67-
arr[i] = dom;
68-
}
69-
70-
array.push(...arr);
65+
dom.label = label;
66+
arr[i] = dom;
7167
}
7268

73-
return <div class='container'>
74-
<div class='jumbotron'><div class='row'>
75-
<div class='col-md-6'><h1>Destam-Dom Keyed</h1></div>
76-
<div class='col-md-6'><div class='row'>
77-
<Button id='run' text='Create 1,000 rows' fn={ run } />
78-
<Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
79-
<Button id='add' text='Append 1,000 rows' fn={ add } />
80-
<Button id='update' text='Update every 10th row' fn={ update } />
81-
<Button id='clear' text='Clear' fn={ clear } />
82-
<Button id='swaprows' text='Swap Rows' fn={ swapRows } />
83-
</div></div>
84-
</div></div>
85-
<table class='table table-hover table-striped test-data'><tbody $onclick={ev => {
86-
let handler;
87-
let e = ev.target;
88-
while (e.parentElement.tagName !== "TBODY") {
89-
if (e.clickHandler) handler = e.clickHandler;
90-
e = e.parentElement;
91-
}
92-
93-
if (!handler) return;
94-
handler(Array.prototype.indexOf.call(e.parentElement.children, e));
95-
}}>
96-
{array}
97-
</tbody></table>
98-
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
99-
</div>;
69+
array.push(...arr);
10070
}
10171

102-
mount(document.body, App());
72+
mount(document.body, <div class='container'>
73+
<div class='jumbotron'><div class='row'>
74+
<div class='col-md-6'><h1>Destam-Dom Keyed</h1></div>
75+
<div class='col-md-6'><div class='row'>
76+
<Button id='run' text='Create 1,000 rows' fn={ run } />
77+
<Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
78+
<Button id='add' text='Append 1,000 rows' fn={ add } />
79+
<Button id='update' text='Update every 10th row' fn={ update } />
80+
<Button id='clear' text='Clear' fn={ clear } />
81+
<Button id='swaprows' text='Swap Rows' fn={ swapRows } />
82+
</div></div>
83+
</div></div>
84+
<table class='table table-hover table-striped test-data'><tbody $onclick={ev => {
85+
let handler;
86+
let e = ev.target;
87+
while (e.parentElement.tagName !== "TBODY") {
88+
if (e.clickHandler) handler = e.clickHandler;
89+
e = e.parentElement;
90+
}
91+
92+
if (!handler) return;
93+
handler(Array.prototype.indexOf.call(e.parentElement.children, e));
94+
}}>
95+
{array}
96+
</tbody></table>
97+
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
98+
</div>);

0 commit comments

Comments
 (0)