0431942f3d
This new iteration of select-kit focuses on following best principales and disallowing mutations inside select-kit components. A best effort has been made to avoid breaking changes, however if you content was a flat array, eg: ["foo", "bar"] You will need to set valueProperty=null and nameProperty=null on the component. Also almost every component should have an `onChange` handler now to decide what to do with the updated data. **select-kit will not mutate your data by itself anymore**
62 lines
1.3 KiB
JavaScript
62 lines
1.3 KiB
JavaScript
import Component from "@ember/component";
|
|
import { computed } from "@ember/object";
|
|
|
|
export default Component.extend({
|
|
layoutName: "select-kit/templates/components/select-kit/select-kit-body",
|
|
classNames: ["select-kit-body"],
|
|
attributeBindings: ["selectKitId:data-select-kit-id"],
|
|
selectKitId: computed("selectKit.uniqueID", function() {
|
|
return `${this.selectKit.uniqueID}-body`;
|
|
}),
|
|
rootEventType: "click",
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
|
|
this.handleRootMouseDownHandler = Ember.run.bind(
|
|
this,
|
|
this.handleRootMouseDown
|
|
);
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
|
|
document.addEventListener(
|
|
this.rootEventType,
|
|
this.handleRootMouseDownHandler,
|
|
true
|
|
);
|
|
},
|
|
|
|
willDestroyElement() {
|
|
this._super(...arguments);
|
|
|
|
document.removeEventListener(
|
|
this.rootEventType,
|
|
this.handleRootMouseDownHandler,
|
|
true
|
|
);
|
|
},
|
|
|
|
handleRootMouseDown(event) {
|
|
if (!this.selectKit.isExpanded) {
|
|
return;
|
|
}
|
|
|
|
const headerElement = document.querySelector(
|
|
`[data-select-kit-id=${this.selectKit.uniqueID}-header]`
|
|
);
|
|
|
|
if (headerElement && headerElement.contains(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (this.element.contains(event.target)) {
|
|
return;
|
|
}
|
|
|
|
this.selectKit.close(event);
|
|
}
|
|
});
|