|
| 1 | +import { conse, cause, list, Stream, Fractal, Conse, Event, List, Context } from 'whatsup' |
| 2 | +import { render } from '@whatsup/jsx' |
| 3 | + |
| 4 | +// prettier-ignore |
| 5 | +const A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive', 'fancy'] |
| 6 | +// prettier-ignore |
| 7 | +const C = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'] |
| 8 | +// prettier-ignore |
| 9 | +const N = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'] |
| 10 | + |
| 11 | +function rnd(max: number) { |
| 12 | + return Math.round(Math.random() * 1000) % max |
| 13 | +} |
| 14 | + |
| 15 | +class SelectRowEvent extends Event { |
| 16 | + constructor(readonly row: Row) { |
| 17 | + super() |
| 18 | + } |
| 19 | +} |
| 20 | + |
| 21 | +class DeleteRowEvent extends Event { |
| 22 | + constructor(readonly row: Row) { |
| 23 | + super() |
| 24 | + } |
| 25 | +} |
| 26 | + |
| 27 | +class SelectedRowId extends Conse<number> {} |
| 28 | + |
| 29 | +class Row extends Fractal<JSX.Element> { |
| 30 | + readonly id: number |
| 31 | + readonly label: Conse<string> |
| 32 | + |
| 33 | + constructor(id: number, label: string) { |
| 34 | + super() |
| 35 | + this.id = id |
| 36 | + this.label = conse(label) |
| 37 | + } |
| 38 | + |
| 39 | + *whatsUp(ctx: Context) { |
| 40 | + const { id } = this |
| 41 | + const selected = ctx.find(SelectedRowId)! |
| 42 | + const className = cause(function* () { |
| 43 | + while (true) { |
| 44 | + yield (yield* selected) === id ? 'danger' : '' |
| 45 | + } |
| 46 | + }) |
| 47 | + const selectClickHandler = () => ctx.dispath(new SelectRowEvent(this)) |
| 48 | + const deleteClickHandler = () => ctx.dispath(new DeleteRowEvent(this)) |
| 49 | + |
| 50 | + while (true) { |
| 51 | + yield ( |
| 52 | + <tr key={id} className={yield* className}> |
| 53 | + <td className="col-md-1">{id}</td> |
| 54 | + <td className="col-md-4"> |
| 55 | + <a onClick={selectClickHandler}>{yield* this.label}</a> |
| 56 | + </td> |
| 57 | + <td className="col-md-1"> |
| 58 | + <a onClick={deleteClickHandler}> |
| 59 | + <span className="glyphicon glyphicon-remove" ariaHidden="true"></span> |
| 60 | + </a> |
| 61 | + </td> |
| 62 | + <td className="col-md-6"></td> |
| 63 | + </tr> |
| 64 | + ) |
| 65 | + } |
| 66 | + } |
| 67 | +} |
| 68 | + |
| 69 | +class Main extends Fractal<JSX.Element> { |
| 70 | + readonly rows = list<Row>([]) |
| 71 | + readonly selected = new SelectedRowId(NaN) |
| 72 | + private nextRowId = 1 |
| 73 | + |
| 74 | + private buildRows(count = 1000) { |
| 75 | + var rows = [] as Row[] |
| 76 | + for (var i = 0; i < count; i++) { |
| 77 | + const id = this.nextRowId++ |
| 78 | + const label = A[rnd(A.length)] + ' ' + C[rnd(C.length)] + ' ' + N[rnd(N.length)] |
| 79 | + rows.push(new Row(id, label)) |
| 80 | + } |
| 81 | + return rows |
| 82 | + } |
| 83 | + |
| 84 | + delete(row: Row) { |
| 85 | + this.rows.delete(row) |
| 86 | + } |
| 87 | + |
| 88 | + run() { |
| 89 | + const rows = this.buildRows() |
| 90 | + this.rows.set(rows) |
| 91 | + this.selected.set(NaN) |
| 92 | + } |
| 93 | + |
| 94 | + add() { |
| 95 | + const rows = this.buildRows(1000) |
| 96 | + this.rows.insert(...rows) |
| 97 | + } |
| 98 | + |
| 99 | + update() { |
| 100 | + const rows = this.rows.get() |
| 101 | + |
| 102 | + for (let i = 0; i < rows.length; i += 10) { |
| 103 | + const label = rows[i].label.get() |
| 104 | + rows[i].label.set(label + ' !!!') |
| 105 | + } |
| 106 | + } |
| 107 | + |
| 108 | + select(row: Row) { |
| 109 | + this.selected.set(row.id) |
| 110 | + } |
| 111 | + |
| 112 | + runLots() { |
| 113 | + const rows = this.buildRows(10000) |
| 114 | + this.rows.set(rows) |
| 115 | + this.selected.set(NaN) |
| 116 | + } |
| 117 | + |
| 118 | + clear() { |
| 119 | + this.rows.set([]) |
| 120 | + this.selected.set(NaN) |
| 121 | + } |
| 122 | + |
| 123 | + swapRows() { |
| 124 | + const rows = this.rows.get().slice() |
| 125 | + |
| 126 | + if (rows.length > 998) { |
| 127 | + ;[rows[1], rows[998]] = [rows[998], rows[1]] |
| 128 | + this.rows.set(rows) |
| 129 | + } |
| 130 | + } |
| 131 | + |
| 132 | + *whatsUp(ctx: Context) { |
| 133 | + ctx.share(this.selected) |
| 134 | + ctx.on(SelectRowEvent, (e) => this.select(e.row)) |
| 135 | + ctx.on(DeleteRowEvent, (e) => this.delete(e.row)) |
| 136 | + |
| 137 | + const runHandler = () => this.run() |
| 138 | + const runLotsHandler = () => this.runLots() |
| 139 | + const addHandler = () => this.add() |
| 140 | + const updateHandler = () => this.update() |
| 141 | + const clearHandler = () => this.clear() |
| 142 | + const swapRowsHandler = () => this.swapRows() |
| 143 | + |
| 144 | + while (true) { |
| 145 | + yield ( |
| 146 | + <div className="container"> |
| 147 | + <div className="jumbotron"> |
| 148 | + <div className="row"> |
| 149 | + <div className="col-md-6"> |
| 150 | + <h1>WhatsUp</h1> |
| 151 | + </div> |
| 152 | + <div className="col-md-6"> |
| 153 | + <div className="row"> |
| 154 | + <div className="col-sm-6 smallpad"> |
| 155 | + <button |
| 156 | + type="button" |
| 157 | + className="btn btn-primary btn-block" |
| 158 | + id="run" |
| 159 | + onClick={runHandler} |
| 160 | + > |
| 161 | + Create 1,000 rows |
| 162 | + </button> |
| 163 | + </div> |
| 164 | + <div className="col-sm-6 smallpad"> |
| 165 | + <button |
| 166 | + type="button" |
| 167 | + className="btn btn-primary btn-block" |
| 168 | + id="runlots" |
| 169 | + onClick={runLotsHandler} |
| 170 | + > |
| 171 | + Create 10,000 rows |
| 172 | + </button> |
| 173 | + </div> |
| 174 | + <div className="col-sm-6 smallpad"> |
| 175 | + <button |
| 176 | + type="button" |
| 177 | + className="btn btn-primary btn-block" |
| 178 | + id="add" |
| 179 | + onClick={addHandler} |
| 180 | + > |
| 181 | + Append 1,000 rows |
| 182 | + </button> |
| 183 | + </div> |
| 184 | + <div className="col-sm-6 smallpad"> |
| 185 | + <button |
| 186 | + type="button" |
| 187 | + className="btn btn-primary btn-block" |
| 188 | + id="update" |
| 189 | + onClick={updateHandler} |
| 190 | + > |
| 191 | + Update every 10th row |
| 192 | + </button> |
| 193 | + </div> |
| 194 | + <div className="col-sm-6 smallpad"> |
| 195 | + <button |
| 196 | + type="button" |
| 197 | + className="btn btn-primary btn-block" |
| 198 | + id="clear" |
| 199 | + onClick={clearHandler} |
| 200 | + > |
| 201 | + Clear |
| 202 | + </button> |
| 203 | + </div> |
| 204 | + <div className="col-sm-6 smallpad"> |
| 205 | + <button |
| 206 | + type="button" |
| 207 | + className="btn btn-primary btn-block" |
| 208 | + id="swaprows" |
| 209 | + onClick={swapRowsHandler} |
| 210 | + > |
| 211 | + Swap Rows |
| 212 | + </button> |
| 213 | + </div> |
| 214 | + </div> |
| 215 | + </div> |
| 216 | + </div> |
| 217 | + </div> |
| 218 | + <table className="table table-hover table-striped test-data"> |
| 219 | + <tbody>{yield* connect(this.rows)}</tbody> |
| 220 | + </table> |
| 221 | + <span className="preloadicon glyphicon glyphicon-remove" ariaHidden="true" /> |
| 222 | + </div> |
| 223 | + ) |
| 224 | + } |
| 225 | + } |
| 226 | +} |
| 227 | + |
| 228 | +function* connect<T>(list: List<Stream<T>>) { |
| 229 | + const acc = [] as T[] |
| 230 | + |
| 231 | + for (const item of yield* list) { |
| 232 | + acc.push(yield* item) |
| 233 | + } |
| 234 | + |
| 235 | + return acc |
| 236 | +} |
| 237 | + |
| 238 | +render(new Main(), document.getElementById('main')!) |
0 commit comments