chore(examples): update examples (#923)

examples/carousel-svg/index.js

@@ -45,7 +45,7 @@ const hTriangle = (id, degRotation) =>
       transform: 'rotate(' + degRotation + ')',
       'stroke-width': 3
     },
-    on: { click: [triangleClick, id] }
+    on: { click: () => { triangleClick(id) } }
   })
 
 const view = (data) =>
@@ -62,9 +62,9 @@ const view = (data) =>
           hTriangle('blue', 300)
         ])
     ]),
-    h('button', { on: { click: [handleRotate, 60] } }, 'Rotate Clockwise'),
-    h('button', { on: { click: [handleRotate, -60] } }, 'Rotate Anticlockwise'),
-    h('button', { on: { click: [handleReset, 0] } }, 'Reset')
+    h('button', { on: { click: () => { handleRotate(60) } } }, 'Rotate Clockwise'),
+    h('button', { on: { click: () => { handleRotate(-60) } } }, 'Rotate Anticlockwise'),
+    h('button', { on: { click: () => { handleReset(0) } } }, 'Reset')
   ])
 
 window.addEventListener('DOMContentLoaded', () => {

examples/hero/index.js

@@ -58,7 +58,7 @@ const detailView = (movie) =>
         h('div.hero.header-title', { hero: { id: movie.title } }, movie.title),
         h('div.spacer'),
         h('div.close', {
-          on: { click: [select, undefined] },
+          on: { click: () => { select(undefined) } },
           style: {
             transform: 'scale(0)',
             delayed: { transform: 'scale(1)' },
@@ -113,7 +113,7 @@ const overviewView = (movies) =>
         }
       }, movies.map((movie) =>
         h('div.row', {
-          on: { click: [select, movie] },
+          on: { click: () => { select(movie) } },
         }, [
           h('div.hero.rank', [
             h('span.hero', { hero: { id: 'rank' + movie.rank } }, movie.rank)

examples/reorder-animation/index.js

@@ -80,7 +80,7 @@ function movieView (movie) {
     h('div', { style: { fontWeight: 'bold' } }, movie.rank),
     h('div', movie.title),
     h('div', movie.desc),
-    h('div.btn.rm-btn', { on: { click: [remove, movie] } }, 'x'),
+    h('div.btn.rm-btn', { on: { click: () => { remove(movie) } } }, 'x'),
   ])
 }
 
@@ -103,9 +103,9 @@ function view (data) {
       h('a.btn.add', { on: { click: add } }, 'Add'),
       'Sort by: ',
       h('span.btn-group', [
-        h('a.btn.rank', { class: { active: sortBy === 'rank' }, on: { click: [changeSort, 'rank'] } }, 'Rank'),
-        h('a.btn.title', { class: { active: sortBy === 'title' }, on: { click: [changeSort, 'title'] } }, 'Title'),
-        h('a.btn.desc', { class: { active: sortBy === 'desc' }, on: { click: [changeSort, 'desc'] } }, 'Description'),
+        h('a.btn.rank', { class: { active: sortBy === 'rank' }, on: { click: () => { changeSort('rank') } } }, 'Rank'),
+        h('a.btn.title', { class: { active: sortBy === 'title' }, on: { click: () => { changeSort('title') } } }, 'Title'),
+        h('a.btn.desc', { class: { active: sortBy === 'desc' }, on: { click: () => { changeSort('desc') } } }, 'Description'),
       ]),
     ]),
     h('div.list', { style: { height: totalHeight + 'px' } }, data.map(movieView)),