c619223367
1. Split the resizing functionality of into a separate mixin to be shared across components 2. Add basic integration tests to prove that everything is getting called through out the lifetime of the app. I decided against unit testing as there isn't really any isolated logic to be tested, more checking that things are being called in the correct order etc i.e. the integration is correct. Adds assertion to with-resizing so its obvious to override `resize`
33 lines
1 KiB
JavaScript
33 lines
1 KiB
JavaScript
import { computed, get } from '@ember/object';
|
|
import Component from 'ember-collection/components/ember-collection';
|
|
import style from 'ember-computed-style';
|
|
import WithResizing from 'consul-ui/mixins/with-resizing';
|
|
import qsaFactory from 'consul-ui/utils/qsa-factory';
|
|
const $$ = qsaFactory();
|
|
|
|
export default Component.extend(WithResizing, {
|
|
tagName: 'div',
|
|
attributeBindings: ['style'],
|
|
height: 500,
|
|
style: style('getStyle'),
|
|
classNames: ['list-collection'],
|
|
getStyle: computed('height', function() {
|
|
return {
|
|
height: get(this, 'height'),
|
|
};
|
|
}),
|
|
resize: function(e) {
|
|
const $self = this.element;
|
|
const $appContent = [...$$('main > div')][0];
|
|
if ($appContent) {
|
|
const rect = $self.getBoundingClientRect();
|
|
const $footer = [...$$('footer[role="contentinfo"]')][0];
|
|
const space = rect.top + $footer.clientHeight;
|
|
const height = e.detail.height - space;
|
|
this.set('height', Math.max(0, height));
|
|
this.updateItems();
|
|
this.updateScrollPosition();
|
|
}
|
|
},
|
|
});
|