Merge pull request #37 from AdamWard1995/rendererDemo

Renderer demo

tests/dummy/app/heroes.js

@@ -18,13 +18,13 @@ const heroes = [
   {
     name: 'Wonder Woman',
     realName: 'Diana Prince',
-    teamAffiliations: ['JLA'],
+    teamAffiliations: ['JLA', 'Amazons of Themyscira'],
     universe: 'DC'
   },
   {
     name: 'Aquaman',
     realName: 'Arthur Curry',
-    teamAffiliations: ['JLA'],
+    teamAffiliations: ['JLA', 'Atlanteans'],
     universe: 'DC'
   },
   {
@@ -78,7 +78,7 @@ const heroes = [
   {
     name: 'Iron Man',
     realName: 'Tony Stark',
-    teamAffiliations: ['Avengers'],
+    teamAffiliations: ['Avengers', 'The Iron Legion'],
     universe: 'Marvel'
   },
   {
@@ -102,19 +102,19 @@ const heroes = [
   {
     name: 'Hulk',
     realName: 'Dr. Robert Bruce Banner',
-    teamAffiliations: ['Avengers'],
+    teamAffiliations: ['Avengers', 'S.M.A.S.H.'],
     universe: 'Marvel'
   },
   {
     name: 'Captain America',
     realName: 'Steve Rogers',
-    teamAffiliations: ['Avengers'],
+    teamAffiliations: ['Avengers', 'Howling Commandos'],
     universe: 'Marvel'
   },
   {
     name: 'Hawkeye',
     realName: 'Clinton Francis Barton',
-    teamAffiliations: ['Avengers'],
+    teamAffiliations: ['Avengers', 'S.H.I.E.L.D.'],
     universe: 'Marvel'
   },
   {
@@ -138,7 +138,7 @@ const heroes = [
   {
     name: 'Black Widow',
     realName: 'Natasha Alianovna Romanoff',
-    teamAffiliations: ['Avengers'],
+    teamAffiliations: ['Avengers', 'S.H.I.E.L.D.'],
     universe: 'Marvel'
   },
   {
@@ -156,7 +156,7 @@ const heroes = [
   {
     name: 'War Machine',
     realName: 'James Rupert "Rhodey" Rhodes',
-    teamAffiliations: ['Avengers'],
+    teamAffiliations: ['Avengers', 'The Iron Legion'],
     universe: 'Marvel'
   }
 ]

tests/dummy/app/pods/components/multi-line-renderer/component.js

@@ -0,0 +1,15 @@
+/**
+ * Component definition for the text-input-renderer component
+ */
+import {CellRenderer} from 'ember-frost-table'
+import layout from './template'
+
+// BEGIN-SNIPPET multi-line-renderer
+export default CellRenderer.extend({
+
+  layout,
+
+  actions: {
+  }
+})
+// END-SNIPPET

tests/dummy/app/pods/components/multi-line-renderer/template.hbs

@@ -0,0 +1,6 @@
+{{! Template for the text-input-renderer component }}
+{{! BEGIN-SNIPPET multi-line-renderer}}
+{{#each value as |val|}}
+  <div class='line'>{{val}}</div>
+{{/each}}
+{{! END-SNIPPET }}

tests/dummy/app/pods/components/text-input-renderer/component.js

@@ -1,30 +1,15 @@
 /**
  * Component definition for the text-input-renderer component
  */
-
 import {CellRenderer} from 'ember-frost-table'
-
 import layout from './template'
 
+// BEGIN-SNIPPET text-input-renderer
 export default CellRenderer.extend({
-  // == Dependencies ==========================================================
-
-  // == Keyword Properties ====================================================
 
   layout,
 
-  // == PropTypes =============================================================
-
-  // == Computed Properties ===================================================
-
-  // == Functions =============================================================
-
-  // == DOM Events ============================================================
-
-  // == Lifecycle Hooks =======================================================
-
-  // == Actions ===============================================================
-
   actions: {
   }
 })
+// END-SNIPPET

tests/dummy/app/pods/components/text-input-renderer/template.hbs

@@ -1,8 +1,10 @@
 {{! Template for the text-input-renderer component }}
+{{! BEGIN-SNIPPET text-input-renderer}}
 {{frost-text
   hook=(concat hookPrefix '-text')
   hookPrefix=hook
   hookQualifiers=hookQualifiers
   onInput=(action 'handleInput')
   value=value
 }}
+{{! END-SNIPPET }}

tests/dummy/app/pods/demo/cell-renderers/controller.js

@@ -0,0 +1,6 @@
+import HeroesController from '../heroes-controller'
+
+export default HeroesController.extend({
+  actions: {
+  }
+})

tests/dummy/app/pods/demo/cell-renderers/template.hbs

@@ -0,0 +1,66 @@
+{{! template-lint-disable bare-strings }}
+{{!-- BEGIN-SNIPPET cell-renderer }}
+  {{component 'cell-renderer'
+    hook= // e.g. myCellRenderer
+    item= // item associated with the cell's row
+    value // item value to display in this cell
+  }}
+{{ END-SNIPPET --}}
+
+
+<div class='frost-demo-api'>
+  <div class='frost-demo-title'>
+    Cell Renderer API
+  </div>
+  <br>
+  <div class='frost-demo-notes'>
+    Can be applied to body or header cells for a particular column
+  </div>
+  <div class='frost-demo-snippet'>
+    {{code-snippet name='cell-renderer.hbs'}}
+  </div>
+  <div class='frost-demo-title'>
+    Examples
+  </div>
+  <div class='frost-demo-notes'>
+    text-input-renderer
+  </div>
+  <div class='frost-demo-snippet'>
+    {{code-snippet name='text-input-renderer.hbs'}}
+  </div>
+  <div class='frost-demo-notes'>
+    multi-line-renderer
+  </div>
+  <div class='frost-demo-snippet'>
+    {{code-snippet name='multi-line-renderer.hbs'}}
+    {{code-snippet name='multi-line-renderer.scss'}}
+  </div>
+</div>
+<div class='frost-demo-live'>
+  <div class='frost-demo-title'>
+    Live demo
+  </div>
+  <div class='frost-demo-snippet'>
+    {{code-snippet name='cell-renderer-table.hbs'}}
+  </div>
+  <div class='frost-demo-launch'>
+    {{! BEGIN-SNIPPET cell-renderer-table }}
+    {{frost-table
+      columns=(array
+        (hash
+          label='Name'
+          propertyName='name'
+          renderer=(component 'text-input-renderer')
+        )
+        (hash
+          label='Team Affiliations'
+          propertyName='teamAffiliations'
+          renderer=(component 'multi-line-renderer')
+        )
+      )
+      hook='myTable'
+      items=heroes
+    }}
+    {{! END-SNIPPET }}
+  </div>
+</div>

tests/dummy/app/pods/demo/template.hbs

@@ -6,6 +6,7 @@
     </div>
     {{#frost-scroll class='frost-demo-selectors' hook='leftScroll'}}
       {{#link-to 'demo.overview'}}Overview{{/link-to}}
+      {{#link-to 'demo.cell-renderers'}}Cell renderers{{/link-to}}
       <div class='frost-demo-selector-title'>
         Components
         {{#link-to 'demo.frost-fixed-table'}}frost-fixed-table{{/link-to}}
@@ -23,4 +24,4 @@
   {{#frost-scroll class='frost-demo-example' hook='rightScroll'}}
     {{outlet}}
   {{/frost-scroll}}
-</div>
+</div>

tests/dummy/app/router.js

@@ -10,6 +10,7 @@ const DemoRouter = Router.extend({
 DemoRouter.map(function () {
   this.route('demo', {path: '/'}, function () {
     this.route('overview', {path: '/'})
+    this.route('cell-renderers')
     this.route('frost-fixed-table')
     this.route('frost-table')
     this.route('frost-table-body')

tests/dummy/app/styles/app.scss

@@ -192,3 +192,14 @@ dl {
   width: 90px;
 }
 // END-SNIPPET
+
+.frost-table {
+  max-height: 500px;
+}
+
+
+// BEGIN-SNIPPET multi-line-renderer
+.line {
+  white-space: pre-line;
+}
+//END-SNIPPET