Split state and record for a list item, fixed #129

addon/components/frost-list-item-expansion.js

@@ -7,7 +7,6 @@
 import Ember from 'ember'
 const {ViewUtils} = Ember
 const {isSimpleClick} = ViewUtils
-import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {PropTypes} from 'ember-prop-types'
 
@@ -30,6 +29,7 @@ export default Component.extend({
       PropTypes.EmberObject,
       PropTypes.object
     ]),
+    isExpanded: PropTypes.bool,
 
     onExpand: PropTypes.func.isRequired
   },
@@ -41,12 +41,6 @@ export default Component.extend({
 
   // == Computed Properties ===================================================
 
-  @readOnly
-  @computed('model.isExpanded')
-  isExpanded (isExpanded) {
-    return isExpanded
-  },
-
   // == Functions =============================================================
 
   // == DOM Events ============================================================

addon/components/frost-list-item-selection.js

@@ -5,7 +5,6 @@
 import Ember from 'ember'
 const {ViewUtils} = Ember
 const {isSimpleClick} = ViewUtils
-import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {PropTypes} from 'ember-prop-types'
 
@@ -28,6 +27,7 @@ export default Component.extend({
       PropTypes.EmberObject,
       PropTypes.object
     ]),
+    isSelected: PropTypes.bool,
 
     onSelect: PropTypes.func.isRequired
   },
@@ -39,12 +39,6 @@ export default Component.extend({
 
   // == Computed Properties ===================================================
 
-  @readOnly
-  @computed('model.isSelected')
-  isSelected (isSelected) {
-    return isSelected
-  },
-
   // == Functions =============================================================
 
   // == DOM Events ============================================================

addon/components/frost-list-item.js

@@ -26,6 +26,8 @@ export default Component.extend({
       PropTypes.EmberObject,
       PropTypes.object
     ]).isRequired,
+    isExpanded: PropTypes.bool,
+    isSelected: PropTypes.bool,
 
     onExpand: PropTypes.func,
     onSelect: PropTypes.func

addon/components/frost-list.js

@@ -3,7 +3,7 @@
  */
 
 import Ember from 'ember'
-const {$, A, get, isEmpty, isNone, run, set} = Ember
+const {$, A, get, isEmpty, isNone, run} = Ember
 import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {selection} from 'ember-frost-list'
@@ -102,15 +102,15 @@ export default Component.extend({
     }
 
     return items.map(item => {
-      run.next(() => {
-        set(item, 'isExpanded', isEmpty(expandedItems) ? false : expandedItems.some(
-          selectedItem => _itemComparator(selectedItem, item))
-        )
-        set(item, 'isSelected', isEmpty(selectedItems) ? false : selectedItems.some(
-          selectedItem => _itemComparator(selectedItem, item))
-        )
-      })
-      return item
+      return {
+        record: item,
+        states: {
+          isExpanded: isEmpty(expandedItems) ? false : expandedItems.some(
+            selectedItem => _itemComparator(selectedItem, item)),
+          isSelected: isEmpty(selectedItems) ? false : selectedItems.some(
+            selectedItem => _itemComparator(selectedItem, item))
+        }
+      }
     })
   },
 
@@ -129,17 +129,6 @@ export default Component.extend({
 
   // == Lifecycle Hooks =======================================================
 
-  didUpdateAttrs ({newAttrs}) {
-    if (newAttrs.scrollTop) {
-      // TODO Push this down into frost-scroll
-      const scrollbar = this.$('.frost-scroll')[0]
-      if (scrollbar) {
-        scrollbar.scrollTop = newAttrs.scrollTop
-        window.Ps.update(scrollbar)
-      }
-    }
-  },
-
   init () {
     this._super(...arguments)
     const itemKey = this.get('itemKey')

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

@@ -1,44 +1,31 @@
 {{! Template for the frost-list-content-container component }}
+{{#vertical-collection
+  alwaysRemeasure=true
+  alwaysUseDefaultHeight=alwaysUseDefaultHeight
+  bufferSize=bufferSize
+  content=items
+  defaultHeight=defaultHeight
+  firstReached=onLoadPrevious
+  lastReached=onLoadNext
+  scrollPosition=scrollTop
+  useContentProxy=false
 
-{{#if pagination}}
-  {{#frost-scroll
-    hook=(concat hookPrefix '-scroll')
-  }}
-    {{#each items as |model index|}}
-      {{yield model index}}
-    {{else}}
-      {{yield to="inverse"}}
-    {{/each}}
-  {{/frost-scroll}}
-{{else}}
-  {{#vertical-collection
-    alwaysRemeasure=true
-    alwaysUseDefaultHeight=alwaysUseDefaultHeight
-    bufferSize=bufferSize
-    content=items
-    defaultHeight=defaultHeight
-    firstReached=onLoadPrevious
-    lastReached=onLoadNext
-    scrollPosition=scrollTop
-    useContentProxy=false
-
-    key='@identity'
-    resizeDebounce=64
-    firstVisibleChanged=null
-    lastVisibleChanged=null
-    didMountCollection=null
-    idForFirstItem=null
-    renderFromLast=false
-    renderAllInitially=false
-    shouldRender=true
-    minimumMovement=15
-    containerSelector=null
-    containerHeight=null
+  key='@identity'
+  resizeDebounce=64
+  firstVisibleChanged=null
+  lastVisibleChanged=null
+  didMountCollection=null
+  idForFirstItem=null
+  renderFromLast=false
+  renderAllInitially=false
+  shouldRender=true
+  minimumMovement=15
+  containerSelector=null
+  containerHeight=null
 
-    as |model index|
-  }}
-    {{yield model index}}
-  {{else}}
-    {{yield to="inverse"}}
-  {{/vertical-collection}}
-{{/if}}
+  as |model index|
+}}
+  {{yield model index}}
+{{else}}
+  {{yield to="inverse"}}
+{{/vertical-collection}}

addon/templates/components/frost-list.hbs

@@ -45,7 +45,7 @@
       'frost-list-item-container'
       (if (eq index 0) ' first')
       (if (eq index (sub _items.length 1)) ' last')
-      (if model.isSelected ' is-selected')
+      (if model.states.isSelected ' is-selected')
     }}
     data-test={{hook (concat hook '-item-container') index=index }}
   >
@@ -54,7 +54,8 @@
         {{frost-list-item-expansion
           hook=(concat hookPrefix '-expansion')
           hookQualifiers=(hash index=index)
-          model=model
+          model=model.record
+          isExpanded=model.states.isExpanded
           onExpand=(action '_expand')
         }}
       {{/if}}
@@ -63,25 +64,30 @@
         {{frost-list-item-selection
           hook=(concat hookPrefix '-selection')
           hookQualifiers=(hash index=index)
-          model=model
+          model=model.record
+          isSelected=model.states.isSelected
           onSelect=(action '_select')
         }}
       {{/if}}
 
       {{component item
         hook=(concat hookPrefix '-item')
         hookQualifiers=(hash index=index)
-        model=model
+        model=model.record
+        isExpanded=model.states.isExpanded
+        isSelected=model.states.isSelected
         onSelect=(action '_select')
       }}
     </div>
 
-    {{#if model.isExpanded}}
+    {{#if model.states.isExpanded}}
       <div class='frost-list-item-container-expansion'>
         {{component itemExpansion
           hook=(concat hookPrefix '-item-expansion')
           hookQualifiers=(hash index=index)
-          model=model
+          model=model.record
+          isExpanded=model.states.isExpanded
+          isSelected=model.states.isSelected
           onSelect=(action '_select')
         }}
       </div>

addon/utils/selection.js

@@ -19,7 +19,7 @@ export default {
    */
   basic (selectedItems, item, rangeState, itemComparator) {
     // If a previous set of selections is present
-    const index = selectedItems.findIndex(selectedItem => itemComparator(selectedItem, item))
+    const index = this._findIndex(selectedItems, item, itemComparator)
     if (selectedItems.get('length') > 1 || index === -1) {
       // Clear the other selections and select the item
       selectedItems.setObjects([item])
@@ -63,7 +63,7 @@ export default {
   range (items, selectedItems, item, rangeState, itemComparator, itemKey) {
     // If an anchor isn't set or in the current list of items, then set the anchor and exit
     const rangeAnchor = rangeState['anchor']
-    const anchor = rangeAnchor ? items.findIndex(currentItem => itemComparator(currentItem, rangeAnchor)) : -1
+    const anchor = this._findIndex(items, rangeAnchor, itemComparator)
     if (anchor === -1) {
       // Range select is always a positive selection (no deselect)
       rangeState['anchor'] = item
@@ -77,7 +77,7 @@ export default {
       return
     }
     // Find the indices of the endpoint
-    const endpoint = items.findIndex(currentItem => itemComparator(currentItem, item))
+    const endpoint = this._findIndex(items, item, itemComparator)
 
     // Select all of the items between the anchor and the item (inclusive)
     if (anchor < endpoint) {
@@ -88,7 +88,7 @@ export default {
 
     // If an endpoint was already selected remove selected items that were
     // in the previous range but aren't in the new range
-    const previousEndpoint = items.findIndex(currentItem => itemComparator(currentItem, rangeState['endpoint']))
+    const previousEndpoint = this._findIndex(items, rangeState['endpoint'], itemComparator)
     if (previousEndpoint >= 0) {
       // If both endpoints are above the anchor
       if (anchor < endpoint && anchor < previousEndpoint) {
@@ -131,7 +131,7 @@ export default {
    * @param {Function} itemComparator - comparator for items
    */
   specific (selectedItems, item, rangeState, itemComparator) {
-    const index = selectedItems.findIndex(selectedItem => itemComparator(selectedItem, item))
+    const index = this._findIndex(selectedItems, item, itemComparator)
     const isCurrentlySelected = (index >= 0)
     const isSelected = !isCurrentlySelected
 
@@ -146,5 +146,30 @@ export default {
     } else {
       selectedItems.removeAt(index)
     }
+  },
+
+  /**
+   * Reproducing the `findIndex` behavior to avoid use cases where it's not defined.
+   * @param {Array} array the array of elements
+   * @param {Object} rhs right hand side value to compare to the elements in the array
+   * @param {Function} compareFct the compare function
+   * @returns {Number} the index of the rhs value if it's in the array otherwise -1
+   */
+  _findIndex (array, rhs, compareFct) {
+    if (array.findIndex) {
+      return array.findIndex(currentItem => compareFct(currentItem, rhs))
+    } else {
+      let findIndex = -1
+      if (array && rhs && compareFct) {
+        for (let index = 0; index !== array.length; index++) {
+          const lhs = array.objectAt(index)
+          if (compareFct(lhs, rhs)) {
+            findIndex = index
+            break
+          }
+        }
+      }
+      return findIndex
+    }
   }
 }

blueprints/ember-frost-list/index.js

@@ -1,15 +1,31 @@
+const blueprintHelper = require('ember-frost-core/blueprint-helper')
+
 module.exports = {
-  afterInstall: function () {
-    return this.addAddonsToProject({
-      packages: [
-        {name: 'ember-frost-core', target: '^1.5.1'},
-        {name: 'ember-frost-sort', target: '^7.0.0'},
-        {name: 'ember-math-helpers', target: '^2.0.0'},
-        {name: 'smoke-and-mirrors', target: '~0.6.2'}
-      ]
+  afterInstall: function (options) {
+    const addonsToAdd = [
+      {name: 'ember-frost-core', target: '^1.14.3'},
+      {name: 'ember-frost-sort', target: '^7.0.0'},
+      {name: 'ember-math-helpers', target: '^2.0.5'},
+      {name: 'smoke-and-mirrors', target: 'github:ciena-frost/smoke-and-mirrors'}
+    ]
+
+    // Get the packages installed in the consumer app/addon. Packages that are already installed in the consumer within
+    // the required semver range will not be re-installed or have blueprints re-run.
+    const consumerPackages = blueprintHelper.consumer.getPackages(options)
+
+    // Get the packages to install (not already installed) from a list of potential packages
+    return blueprintHelper.packageHandler.getPkgsToInstall(addonsToAdd, consumerPackages).then((pkgsToInstall) => {
+      if (pkgsToInstall.length !== 0) {
+        // Call the blueprint hook
+        return this.addAddonsToProject({
+          packages: pkgsToInstall
+        })
+      }
     })
   },
 
   normalizeEntityName: function () {
+    // this prevents an error when the entityName is
+    // not specified (since that doesn't actually matter to us)
   }
 }