|
1 | | -import { mount, rendr } from '@rendrjs/core'; |
2 | | -import { App } from './App'; |
| 1 | +import { mount, element, component, useState, text } from '@rendrjs/core'; |
3 | 2 |
|
4 | | -mount(document.querySelector('#root'), rendr(App)); |
| 3 | +let A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', |
| 4 | + 'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', |
| 5 | + 'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive', |
| 6 | + 'fancy']; |
| 7 | +let C = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', |
| 8 | + 'white', 'black', 'orange']; |
| 9 | +let N = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', |
| 10 | + 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard']; |
| 11 | + |
| 12 | +let rand = arr => arr[Math.round(Math.random() * 1000) % arr.length]; |
| 13 | + |
| 14 | +let nextId = 1; |
| 15 | + |
| 16 | +let buildData = (count = 1000) => { |
| 17 | + let data = new Array(count); |
| 18 | + for (let i = 0; i < count; i++) { |
| 19 | + data[i] = { |
| 20 | + id: nextId++, |
| 21 | + label: `${rand(A)} ${rand(C)} ${rand(N)}`, |
| 22 | + }; |
| 23 | + } |
| 24 | + return data; |
| 25 | +}; |
| 26 | + |
| 27 | +let btn = (id, txt, onclick) => element('div', { |
| 28 | + class: 'col-sm-6 smallpad', |
| 29 | + slot: element('button', { |
| 30 | + id, |
| 31 | + onclick, |
| 32 | + type: 'button', |
| 33 | + class: 'btn btn-primary btn-block', |
| 34 | + slot: text(txt), |
| 35 | + }), |
| 36 | +}); |
| 37 | + |
| 38 | +let Jumbotron = ({ set }) => element('div', { |
| 39 | + class: 'jumbotron', |
| 40 | + slot: element('div', { |
| 41 | + class: 'row', |
| 42 | + slot: [ |
| 43 | + element('div', { |
| 44 | + class: 'col-md-6', |
| 45 | + slot: element('h1', { slot: text('Rendrjs') }), |
| 46 | + }), |
| 47 | + element('div', { |
| 48 | + class: 'col-md-6', |
| 49 | + slot: element('div', { |
| 50 | + class: 'row', |
| 51 | + slot: [ |
| 52 | + btn('run', 'Create 1,000 rows', () => set({ arr: buildData() })), |
| 53 | + btn('runlots', 'Create 10,000 rows', () => set({ arr: buildData(10000) })), |
| 54 | + btn('add', 'Append 1,000 rows', () => set(old => ({ ...old, arr: old.arr.concat(buildData()) }))), |
| 55 | + btn('update', 'Update every 10th row', () => set(old => { |
| 56 | + for (let i = 0; i < old.arr.length; i += 10) { |
| 57 | + old.arr[i].label += ' !!!'; |
| 58 | + } |
| 59 | + return { ...old }; |
| 60 | + })), |
| 61 | + btn('clear', 'Clear', () => set({ arr: [] })), |
| 62 | + btn('swaprows', 'Swap rows', () => set(old => { |
| 63 | + let two = old.arr[998]; |
| 64 | + if (two) { |
| 65 | + old.arr[998] = old.arr[1]; |
| 66 | + old.arr[1] = two; |
| 67 | + } |
| 68 | + return { ...old }; |
| 69 | + })), |
| 70 | + ], |
| 71 | + }), |
| 72 | + }), |
| 73 | + ], |
| 74 | + }), |
| 75 | +}); |
| 76 | + |
| 77 | +let makeIcon = preload => element('span', { |
| 78 | + class: preload ? 'preloadicon ' : '' + 'glyphicon glyphicon-remove', |
| 79 | + 'aria-hidden': true, |
| 80 | +}); |
| 81 | +let preloadIcon = makeIcon(true); |
| 82 | +let normalIcon = makeIcon(); |
| 83 | +let emptyTd = element('td', { class: 'col-md-6' }); |
| 84 | + |
| 85 | +let Row = ({ hi, set, item: { id, label } }) => element('tr', { |
| 86 | + class: hi ? 'danger' : undefined, |
| 87 | + slot: [ |
| 88 | + element('td', { class: 'col-md-1', slot: text(`${id}`) }), |
| 89 | + element('td', { |
| 90 | + class: 'col-md-4', |
| 91 | + slot: element('a', { |
| 92 | + onclick: () => set(old => ({ ...old, sel: id })), |
| 93 | + slot: text(label), |
| 94 | + }), |
| 95 | + }), |
| 96 | + element('td', { |
| 97 | + class: 'col-md-1', |
| 98 | + slot: element('a', { |
| 99 | + onclick: () => set(old => { |
| 100 | + old.arr.splice(old.arr.findIndex(d => d.id === id), 1); |
| 101 | + return { ...old }; |
| 102 | + }), |
| 103 | + slot: normalIcon, |
| 104 | + }), |
| 105 | + }), |
| 106 | + emptyTd, |
| 107 | + ], |
| 108 | +}); |
| 109 | + |
| 110 | +let App = () => { |
| 111 | + let [state, setState] = useState({ arr: [] }); |
| 112 | + |
| 113 | + return element('div', { |
| 114 | + class: 'container', |
| 115 | + slot: [ |
| 116 | + component(Jumbotron, { set: setState, memo: [] }), |
| 117 | + element('table', { |
| 118 | + class: 'table table-hover table-striped test-data', |
| 119 | + slot: element('tbody', { |
| 120 | + slot: state.arr.map(item => component(Row, { |
| 121 | + key: `${item.id}`, |
| 122 | + item, |
| 123 | + hi: state.sel === item.id, |
| 124 | + set: setState, |
| 125 | + memo: [item.id === state.sel, item.label], |
| 126 | + })), |
| 127 | + }), |
| 128 | + }), |
| 129 | + preloadIcon, |
| 130 | + ], |
| 131 | + }); |
| 132 | +}; |
| 133 | + |
| 134 | +mount(document.body, component(App)); |
0 commit comments