Skip to content

Commit fd794d8

Browse files
aidenybaiaidenybai
committed
ok this is bonkers
1 parent 68225c6 commit fd794d8

File tree

4 files changed

+220
-196
lines changed

4 files changed

+220
-196
lines changed

‎frameworks/keyed/million/src/main.js

Lines changed: 121 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
Block,
33
fragment,
4+
FragmentBlock,
45
stringToDOM,
56
withKey,
67
} from '/Users/aidenybai/Projects/aidenybai/million/packages/block/index';
@@ -65,6 +66,7 @@ const random = (max) => Math.round(Math.random() * 1000) % max;
6566

6667
let nextId = 1;
6768
let list = [];
69+
let oldCache = {};
6870
let selected = 0;
6971
let main;
7072

@@ -126,17 +128,22 @@ const swapRows = () => {
126128
return false;
127129
};
128130

129-
const select = (id) => {
131+
let prevSelected;
132+
const select = (id, el) => {
133+
if (prevSelected) prevSelected.className = '';
130134
selected = id;
131-
update();
135+
el.className = 'danger';
136+
prevSelected = el;
137+
const row = main.children.findIndex((block) => block.props.id === id);
138+
row.props.className = 'danger';
139+
const prevRow = main.children.findIndex((block) => block.props.id === id);
140+
prevRow.props.className = '';
132141
};
133142

134143
const remove = (id) => {
135-
list.splice(
136-
list.findIndex((item) => item.id === id),
137-
1
138-
);
139-
update();
144+
const index = list.findIndex((item) => item.id === id);
145+
list.splice(index, 1);
146+
main.children.splice(index, 1);
140147
};
141148

142149
const Row = (() => {
@@ -158,12 +165,6 @@ const Row = (() => {
158165
{
159166
path: [1, 0],
160167
edits: [
161-
{
162-
type: 'event',
163-
listener: 'select',
164-
name: 'onClick',
165-
hole: 'select',
166-
},
167168
{
168169
type: 'child',
169170
hole: 'label',
@@ -172,18 +173,6 @@ const Row = (() => {
172173
],
173174
inits: [],
174175
},
175-
{
176-
path: [2, 0],
177-
edits: [
178-
{
179-
type: 'event',
180-
listener: 'remove',
181-
name: 'onClick',
182-
hole: 'remove',
183-
},
184-
],
185-
inits: [],
186-
},
187176
{
188177
path: [],
189178
edits: [
@@ -227,14 +216,6 @@ function render(oldCache, newCache) {
227216
id: item.id,
228217
label: item.label,
229218
className: isSelected ? 'danger' : '',
230-
remove: withKey(() => {
231-
remove(item.id);
232-
return false;
233-
}, id),
234-
select: withKey(() => {
235-
select(item.id);
236-
return false;
237-
}, id),
238219
},
239220
id,
240221
false
@@ -246,99 +227,115 @@ function render(oldCache, newCache) {
246227
);
247228
}
248229

249-
new Block(
250-
stringToDOM(
251-
'<div class="container"><div class="jumbotron"><div class="row"><div class="col-md-6"><h1>Million</h1></div><div class="col-md-6"><div class="row"><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="clear">Clear</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button></div></div></div></div></div><table class="table table-hover table-striped test-data"><tbody></tbody></table><span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span></div>'
252-
),
253-
[
254-
{
255-
path: [0, 0, 1, 0, 0, 0],
256-
edits: [
257-
{
258-
type: 'event',
259-
name: 'onClick',
260-
listener: create1k,
261-
},
262-
],
263-
inits: [],
264-
},
265-
{
266-
path: [0, 0, 1, 0, 1, 0],
267-
edits: [
268-
{
269-
type: 'event',
270-
name: 'onClick',
271-
listener: create10k,
272-
},
273-
],
274-
inits: [],
275-
},
276-
{
277-
path: [0, 0, 1, 0, 2, 0],
278-
edits: [
279-
{
280-
type: 'event',
281-
name: 'onClick',
282-
listener: append1k,
283-
},
284-
],
285-
inits: [],
286-
},
287-
{
288-
path: [0, 0, 1, 0, 3, 0],
289-
edits: [
290-
{
291-
type: 'event',
292-
name: 'onClick',
293-
listener: updateEvery10,
294-
},
295-
],
296-
inits: [],
297-
},
298-
{
299-
path: [0, 0, 1, 0, 4, 0],
300-
edits: [
301-
{
302-
type: 'event',
303-
name: 'onClick',
304-
listener: () => {
305-
clear();
306-
update();
307-
return false;
230+
(() => {
231+
new Block(
232+
stringToDOM(
233+
'<div class="container"><div class="jumbotron"><div class="row"><div class="col-md-6"><h1>Million</h1></div><div class="col-md-6"><div class="row"><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="clear">Clear</button></div><div class="col-sm-6 smallpad"><button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button></div></div></div></div></div><table class="table table-hover table-striped test-data"><tbody></tbody></table><span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span></div>'
234+
),
235+
[
236+
{
237+
path: [0, 0, 1, 0, 0, 0],
238+
edits: [
239+
{
240+
type: 'event',
241+
name: 'onClick',
242+
listener: create1k,
308243
},
309-
},
310-
],
311-
inits: [],
312-
},
313-
{
314-
path: [0, 0, 1, 0, 5, 0],
315-
edits: [
316-
{
317-
type: 'event',
318-
name: 'onClick',
319-
listener: swapRows,
320-
},
321-
],
322-
inits: [],
323-
},
324-
{
325-
path: [1, 0],
326-
edits: [
327-
{
328-
type: 'child',
329-
hole: 'rows',
330-
index: 0,
331-
},
332-
],
333-
inits: [],
334-
},
335-
],
336-
{ rows: (main = fragment([])) },
337-
undefined,
338-
undefined
339-
).mount(document.getElementById('main'));
244+
],
245+
inits: [],
246+
},
247+
{
248+
path: [0, 0, 1, 0, 1, 0],
249+
edits: [
250+
{
251+
type: 'event',
252+
name: 'onClick',
253+
listener: create10k,
254+
},
255+
],
256+
inits: [],
257+
},
258+
{
259+
path: [0, 0, 1, 0, 2, 0],
260+
edits: [
261+
{
262+
type: 'event',
263+
name: 'onClick',
264+
listener: append1k,
265+
},
266+
],
267+
inits: [],
268+
},
269+
{
270+
path: [0, 0, 1, 0, 3, 0],
271+
edits: [
272+
{
273+
type: 'event',
274+
name: 'onClick',
275+
listener: updateEvery10,
276+
},
277+
],
278+
inits: [],
279+
},
280+
{
281+
path: [0, 0, 1, 0, 4, 0],
282+
edits: [
283+
{
284+
type: 'event',
285+
name: 'onClick',
286+
listener: () => {
287+
clear();
288+
return false;
289+
},
290+
},
291+
],
292+
inits: [],
293+
},
294+
{
295+
path: [0, 0, 1, 0, 5, 0],
296+
edits: [
297+
{
298+
type: 'event',
299+
name: 'onClick',
300+
listener: swapRows,
301+
},
302+
],
303+
inits: [],
304+
},
305+
{
306+
path: [1, 0],
307+
edits: [
308+
{
309+
type: 'event',
310+
name: 'onClick',
311+
listener: (event) => {
312+
const el = event.target;
313+
const row = el.closest('tr');
314+
const id = Number(row.firstChild.textContent);
315+
if (el.matches('.glyphicon-remove')) {
316+
row.remove();
317+
remove(id);
318+
} else {
319+
select(id, row);
320+
}
321+
return false;
322+
},
323+
},
324+
{
325+
type: 'child',
326+
hole: 'rows',
327+
index: 0,
328+
},
329+
],
330+
inits: [],
331+
},
332+
],
333+
{ rows: (main = fragment([])) },
334+
undefined,
335+
undefined
336+
).mount(document.getElementById('main'));
337+
})();
340338

341-
let oldCache = {};
342339
function update() {
343340
let newCache = {};
344341
main.patch(render(oldCache, newCache));

0 commit comments

Comments
 (0)