Merge d6d7eeb into 27ca92a

addon/components/frost-list.js

@@ -3,7 +3,18 @@
  */
 
 import Ember from 'ember'
-const {$, A, get, isEmpty, isNone, run, set} = Ember
+const {
+  $,
+  A,
+  get,
+  isEmpty,
+  isNone,
+  run,
+  set,
+  computed: {
+    deprecatingAlias
+  }
+} = Ember
 import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {selection} from 'ember-frost-list'
@@ -23,6 +34,7 @@ export default Component.extend({
   // == PropTypes =============================================================
 
   propTypes: {
+    minHeight: PropTypes.number,
     // Options - required
     item: PropTypes.EmberComponent.isRequired,
     items: PropTypes.arrayOf(PropTypes.oneOfType([
@@ -54,10 +66,10 @@ export default Component.extend({
     // Smoke and mirrors
     alwaysUseDefaultHeight: PropTypes.bool,
     bufferSize: PropTypes.number,
-    defaultHeight: PropTypes.number,
-
+    alwaysRemeasure: PropTypes.bool,
     // Private
     _itemComparator: PropTypes.func,
+    debug: PropTypes.bool,
 
     // State
     _isShiftDown: PropTypes.bool,
@@ -81,14 +93,15 @@ export default Component.extend({
 
       // Smoke and mirrors options
       alwaysUseDefaultHeight: false,
-      bufferSize: 10,
-      defaultHeight: 50,
-
+      alwaysRemeasure: true,
+      bufferSize: 1,
       // State
       _rangeState: {
         anchor: null,
         endpoint: null
-      }
+      },
+      minHeight: 50,
+      debug: false
     }
   },
 
@@ -114,6 +127,10 @@ export default Component.extend({
     })
   },
 
+  defaultHeight: deprecatingAlias('minHeight', {
+    id: 'frost-list.deprecate-defaultHeight',
+    until: '6.0.0'
+  }),
   // == Functions =============================================================
 
   setShift (event) {

addon/styles/_frost-list-content-container.scss

@@ -5,11 +5,12 @@
   flex-direction: column;
   height: calc(100% - 2px);
   min-height: 0;
-  // Only for the infinite scroll case
   border-right: 1px solid $frost-color-lgrey-1;
-  // The only border side that can be done this way
+  // Only for the infinite scroll case
   border-left: 1px solid $frost-color-lgrey-1;
+  // The only border side that can be done this way
   background-color: $frost-color-white;
+  overflow-y: scroll;
 
   &.paged {
     border-right: 0;

addon/templates/components/frost-list-content-container.hbs

@@ -10,13 +10,12 @@
       {{yield to="inverse"}}
     {{/each}}
   {{/frost-scroll}}
-{{else}}
+{{else if items}}
   {{#vertical-collection
-    alwaysRemeasure=true
-    alwaysUseDefaultHeight=alwaysUseDefaultHeight
+    alwaysRemeasure=alwaysRemeasure
     bufferSize=bufferSize
-    content=items
-    defaultHeight=defaultHeight
+    minHeight=minHeight
+    items=items
     firstReached=onLoadPrevious
     lastReached=onLoadNext
     scrollPosition=scrollTop
@@ -34,6 +33,7 @@
     minimumMovement=15
     containerSelector=null
     containerHeight=null
+    debug=debug
 
     as |model index|
   }}

addon/templates/components/frost-list.hbs

@@ -1,5 +1,4 @@
 {{! Template for the frost-list component }}
-
 <div class='frost-list-header {{if pagination 'paged'}}'>
   {{#if sorting}}
     {{component sorting
@@ -30,15 +29,17 @@
 
 <div class='frost-list-content-container-top-border {{if pagination 'paged'}}'></div>
 {{#frost-list-content-container
+  alwaysRemeasure=alwaysRemeasure
   alwaysUseDefaultHeight=alwaysUseDefaultHeight
   bufferSize=bufferSize
-  defaultHeight=defaultHeight
+  minHeight=minHeight
   hook=(concat hookPrefix '-contentContainer')
   items=_items
   pagination=pagination
   scrollTop=scrollTop
   onLoadNext=onLoadNext
   onLoadPrevious=onLoadPrevious
+  debug=debug
   as |model index|
 }}
   <div class={{concat

index.js

@@ -18,6 +18,9 @@ module.exports = {
 
     if (app) {
       app.import(path.join('vendor', 'ua-parser.min.js'))
+      if (!/production/.test(app.env) && !/test/.test(app.env)) {
+        app.import(path.join('vendor', 'smoke-and-mirrors-debug.css'))
+      }
     }
   },
 

package.json

@@ -55,7 +55,6 @@
     "ember-frost-sort": "^7.0.0",
     "ember-frost-test": "1.0.1",
     "ember-get-config": "0.2.1",
-    "ember-hash-helper-polyfill": "0.1.2",
     "ember-hook": "1.4.1",
     "ember-load-initializers": "0.6.3",
     "ember-math-helpers": "^2.0.5",
@@ -69,7 +68,7 @@
     "loader.js": "^4.0.0",
     "pull-report": "^0.3.1",
     "sinon-chai": "^2.8.0",
-    "smoke-and-mirrors": "github:ciena-frost/smoke-and-mirrors"
+    "vertical-collection": "github:html-next/vertical-collection"
   },
   "keywords": [
     "ember-addon",
@@ -87,4 +86,4 @@
   "ember-frost-icon-pack": {
     "name": "frost-list"
   }
-}
+}

tests/dummy/app/components/custom-sort.js

@@ -0,0 +1,6 @@
+import {Component} from 'ember-frost-core'
+import layout from '../templates/components/custom-sort'
+
+export default Component.extend({
+  layout
+})

tests/dummy/app/pods/infinite/controller.js

@@ -14,7 +14,7 @@ export default Controller.extend({
   notifications: inject.service('notification-messages'),
 
   // == Properties ============================================================
-
+  debug: false,
   expandedItems: A([]),
   itemsPerPage: 100,
   lastPage: 0,

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

@@ -9,9 +9,18 @@
   onExpansionChange=(action 'onExpansionChange')
   onLoadNext=(action 'onLoadNext')
   onSelectionChange=(action 'onSelectionChange')
-  sorting=(component 'frost-sort'
-    sortOrder=sortOrder
-    sortingProperties=sortingProperties
-    onChange=(action 'onSortingChange')
+  debug=debug
+  sorting=(component 'custom-sort'
+    toggle=(component 'frost-toggle'
+      hook='myToggle'
+      value=debug
+      onClick=(action (mut debug) (not debug))
+    )
+    sort=(component 'frost-sort'
+      hook='mySort'
+      sortOrder=sortOrder
+      sortingProperties=sortingProperties
+      onChange=(action 'onSortingChange')
+    )
   )
-}}
+}}

tests/dummy/app/pods/simple/controller.js

@@ -12,7 +12,7 @@ export default Controller.extend({
   // == Dependencies ==========================================================
 
   // == Properties ============================================================
-
+  debug: false,
   expandedItems: A([]),
   selectedItems: A([]),
   sortOrder: A(['-id']),

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

@@ -8,9 +8,18 @@
   selectedItems=selectedItems
   onExpansionChange=(action 'onExpansionChange')
   onSelectionChange=(action 'onSelectionChange')
-  sorting=(component 'frost-sort'
-    sortOrder=sortOrder
-    sortingProperties=sortingProperties
-    onChange=(action 'onSortingChange')
+  debug=debug
+  sorting=(component 'custom-sort'
+    toggle=(component 'frost-toggle'
+      hook='myToggle'
+      value=debug
+      onClick=(action (mut debug) (not debug))
+    )
+    sort=(component 'frost-sort'
+      hook='mySort'
+      sortOrder=sortOrder
+      sortingProperties=sortingProperties
+      onChange=(action 'onSortingChange')
+    )
   )
 }}

tests/dummy/app/styles/app.scss

@@ -118,3 +118,29 @@ $frost-modal-demos-shadow-color: rgba(0, 0, 0, .13);
   margin: 0 20px 0 10px;
   font-size: $frost-font-s;
 }
+
+.custom-sort {
+  display: flex;
+  flex-direction: row;
+  width: 60%;
+
+  .item {
+    display: flex;
+  }
+  .center {
+    justify-content: center;
+  }
+  .label {
+    line-height: 45px;
+    padding: 5px;
+  }
+}
+
+#ember-testing {
+  height: 100%;
+  width: 100%;
+  .ember-view {
+    height: inherit;
+    width: inherit;
+  }
+}

tests/dummy/app/templates/components/custom-sort.hbs

@@ -0,0 +1,10 @@
+{{! Template for the custom-sort component }}
+<div class='item frost-flex-2 centered'>
+  <div class='label'>
+    Debug
+  </div>
+  {{component toggle}}
+</div>
+<div class='item frost-flex-4'>
+  {{component sort}}
+</div>

tests/integration/components/frost-list-test.js

@@ -207,14 +207,20 @@ describe(test.label, function () {
           this.get('selectedItems').setObjects(selectedItems)
         })
         this.render(hbs`
-        {{frost-list
-          item=(component 'frost-list-item')
-          hook='my-list'
-          items=items
-          selectedItems=selectedItems
-          onSelectionChange=onSelectionChange
-          itemKey='id'
-        }}
+          {{frost-list
+            item=(component 'frost-list-item')
+            hook='my-list'
+            items=items
+            pagination=(component 'frost-list-pagination'
+              page=0
+              itemsPerPage=100
+              total=100
+              onChange=(action (mut currentPage))
+            )
+            selectedItems=selectedItems
+            onSelectionChange=onSelectionChange
+            itemKey='id'
+          }}
       `)
         return wait()
       })