|
1 | | -import { h, Lazy, app } from "hyperapp" |
| 1 | +import { h, memo, text, app } from "hyperapp" |
2 | 2 | import { buildData } from "./store" |
3 | 3 |
|
4 | 4 | const updateRow = (id, label) => ({ |
@@ -50,162 +50,110 @@ const swapRows = (state) => { |
50 | 50 | } |
51 | 51 |
|
52 | 52 | const Row = ({ data, label, styleClass }) => |
53 | | - h( |
54 | | - "tr", |
55 | | - { key: data.id, class: styleClass }, |
56 | | - h("td", { class: "col-md-1" }, data.id), |
57 | | - h( |
58 | | - "td", |
59 | | - { class: "col-md-4" }, |
60 | | - h("a", { onclick: [selectRow, data.id] }, label) |
| 53 | + h("tr", { key: data.id, class: styleClass }, [ |
| 54 | + h("td", { class: "col-md-1" }, text(data.id)), |
| 55 | + h("td", { class: "col-md-4" }, |
| 56 | + h("a", { onclick: [ selectRow, data.id ] }, text(label)), |
61 | 57 | ), |
62 | | - h( |
63 | | - "td", |
64 | | - { class: "col-md-1" }, |
65 | | - h( |
66 | | - "a", |
67 | | - { onclick: [deleteRow, data.id] }, |
| 58 | + h("td", { class: "col-md-1" }, |
| 59 | + h("a", { onclick: [ deleteRow, data.id ] }, |
68 | 60 | h("span", { |
69 | 61 | class: "glyphicon glyphicon-remove", |
70 | 62 | "aria-hidden": "true", |
71 | 63 | }) |
72 | | - ) |
| 64 | + ), |
73 | 65 | ), |
74 | | - h("td", { class: "col-md-6" }) |
75 | | - ) |
76 | | - |
77 | | -const LazyRow = ({ data, label, styleClass }) => |
78 | | - Lazy({ view: Row, data, label, styleClass }) |
| 66 | + h("td", { class: "col-md-6" }), |
| 67 | + ]) |
79 | 68 |
|
80 | 69 | app({ |
81 | 70 | init: { |
82 | 71 | data: [], |
83 | 72 | selected: false, |
84 | 73 | }, |
85 | 74 | view: (state) => |
86 | | - h( |
87 | | - "div", |
88 | | - { class: "container" }, |
89 | | - h( |
90 | | - "div", |
91 | | - { class: "jumbotron" }, |
92 | | - h( |
93 | | - "div", |
94 | | - { class: "row" }, |
95 | | - h("div", { class: "col-md-6" }, h("h1", null, "Hyperapp")), |
96 | | - h( |
97 | | - "div", |
98 | | - { class: "col-md-6" }, |
99 | | - h( |
100 | | - "div", |
101 | | - { class: "row" }, |
102 | | - h( |
103 | | - "div", |
104 | | - { class: "col-sm-6 smallpad" }, |
105 | | - h( |
106 | | - "button", |
107 | | - { |
| 75 | + h("div", { class: "container" }, [ |
| 76 | + h("div", { class: "jumbotron" }, |
| 77 | + h("div", { class: "row" }, [ |
| 78 | + h("div", { class: "col-md-6" }, h("h1", {}, text("Hyperapp"))), |
| 79 | + h("div", { class: "col-md-6" }, |
| 80 | + h("div", { class: "row" }, [ |
| 81 | + h("div", { class: "col-sm-6 smallpad" }, |
| 82 | + h("button", { |
108 | 83 | type: "button", |
109 | 84 | class: "btn btn-primary btn-block", |
110 | 85 | id: "run", |
111 | 86 | onclick: create1K, |
112 | 87 | }, |
113 | | - "Create 1,000 rows" |
| 88 | + text("Create 1,000 rows") |
114 | 89 | ) |
115 | 90 | ), |
116 | | - h( |
117 | | - "div", |
118 | | - { class: "col-sm-6 smallpad" }, |
119 | | - h( |
120 | | - "button", |
121 | | - { |
| 91 | + h("div", { class: "col-sm-6 smallpad" }, |
| 92 | + h("button", { |
122 | 93 | type: "button", |
123 | 94 | class: "btn btn-primary btn-block", |
124 | 95 | id: "runlots", |
125 | 96 | onclick: create10K, |
126 | 97 | }, |
127 | | - "Create 10,000 rows" |
| 98 | + text("Create 10,000 rows") |
128 | 99 | ) |
129 | 100 | ), |
130 | | - h( |
131 | | - "div", |
132 | | - { class: "col-sm-6 smallpad" }, |
133 | | - h( |
134 | | - "button", |
135 | | - { |
| 101 | + h("div", { class: "col-sm-6 smallpad" }, |
| 102 | + h("button", { |
136 | 103 | type: "button", |
137 | 104 | class: "btn btn-primary btn-block", |
138 | 105 | id: "add", |
139 | 106 | onclick: append1K, |
140 | 107 | }, |
141 | | - "Append 1,000 rows" |
| 108 | + text("Append 1,000 rows") |
142 | 109 | ) |
143 | 110 | ), |
144 | | - h( |
145 | | - "div", |
146 | | - { class: "col-sm-6 smallpad" }, |
147 | | - h( |
148 | | - "button", |
149 | | - { |
| 111 | + h("div", { class: "col-sm-6 smallpad" }, |
| 112 | + h("button", { |
150 | 113 | type: "button", |
151 | 114 | class: "btn btn-primary btn-block", |
152 | 115 | id: "update", |
153 | 116 | onclick: updateEveryTenth, |
154 | 117 | }, |
155 | | - "Update every 10th row" |
| 118 | + text("Update every 10th row") |
156 | 119 | ) |
157 | 120 | ), |
158 | | - h( |
159 | | - "div", |
160 | | - { class: "col-sm-6 smallpad" }, |
161 | | - h( |
162 | | - "button", |
163 | | - { |
| 121 | + h("div", { class: "col-sm-6 smallpad" }, |
| 122 | + h("button", { |
164 | 123 | type: "button", |
165 | 124 | class: "btn btn-primary btn-block", |
166 | 125 | id: "clear", |
167 | 126 | onclick: clearAllRows, |
168 | 127 | }, |
169 | | - "Clear" |
| 128 | + text("Clear") |
170 | 129 | ) |
171 | 130 | ), |
172 | | - h( |
173 | | - "div", |
174 | | - { class: "col-sm-6 smallpad" }, |
175 | | - h( |
176 | | - "button", |
177 | | - { |
| 131 | + h("div", { class: "col-sm-6 smallpad" }, |
| 132 | + h("button", { |
178 | 133 | type: "button", |
179 | 134 | class: "btn btn-primary btn-block", |
180 | 135 | id: "swaprows", |
181 | 136 | onclick: swapRows, |
182 | 137 | }, |
183 | | - "Swap Rows" |
| 138 | + text("Swap Rows") |
184 | 139 | ) |
185 | 140 | ) |
186 | | - ) |
187 | | - ) |
| 141 | + ]) |
| 142 | + )] |
188 | 143 | ) |
189 | 144 | ), |
190 | | - h( |
191 | | - "table", |
192 | | - { class: "table table-hover table-striped test-data" }, |
193 | | - h( |
194 | | - "tbody", |
195 | | - null, |
196 | | - state.data.map((data) => |
197 | | - LazyRow({ |
| 145 | + h("table", { class: "table table-hover table-striped test-data" }, |
| 146 | + h("tbody", {}, state.data.map((data) => memo(Row, { |
198 | 147 | data, |
199 | 148 | label: data.label, |
200 | 149 | styleClass: data.id === state.selected ? "danger" : "", |
201 | | - }) |
202 | | - ) |
| 150 | + })) |
203 | 151 | ) |
204 | 152 | ), |
205 | 153 | h("span", { |
206 | 154 | class: "preloadicon glyphicon glyphicon-remove", |
207 | 155 | "aria-hidden": "true", |
208 | 156 | }) |
209 | | - ), |
| 157 | + ]), |
210 | 158 | node: document.getElementById("app"), |
211 | 159 | }) |
0 commit comments