2018-05-09 01:08:30 +00:00
|
|
|
import Component from '@ember/component';
|
|
|
|
import { computed, get } from '@ember/object';
|
|
|
|
|
|
|
|
export default Component.extend({
|
|
|
|
classNames: ['accordion'],
|
|
|
|
|
|
|
|
key: 'id',
|
|
|
|
source: computed(() => []),
|
|
|
|
|
2018-07-12 19:05:51 +00:00
|
|
|
onToggle(/* item, isOpen */) {},
|
|
|
|
startExpanded: false,
|
|
|
|
|
2018-05-09 01:08:30 +00:00
|
|
|
decoratedSource: computed('source.[]', function() {
|
|
|
|
const stateCache = this.get('stateCache');
|
|
|
|
const key = this.get('key');
|
|
|
|
const deepKey = `item.${key}`;
|
2018-07-12 19:05:51 +00:00
|
|
|
const startExpanded = this.get('startExpanded');
|
2018-05-09 01:08:30 +00:00
|
|
|
|
|
|
|
const decoratedSource = this.get('source').map(item => {
|
|
|
|
const cacheItem = stateCache.findBy(deepKey, get(item, key));
|
|
|
|
return {
|
|
|
|
item,
|
2018-07-12 19:05:51 +00:00
|
|
|
isOpen: cacheItem ? !!cacheItem.isOpen : startExpanded,
|
2018-05-09 01:08:30 +00:00
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
this.set('stateCache', decoratedSource);
|
|
|
|
return decoratedSource;
|
|
|
|
}),
|
|
|
|
|
|
|
|
// When source updates come in, the state cache is used to preserve
|
|
|
|
// open/close state.
|
|
|
|
stateCache: computed(() => []),
|
|
|
|
});
|