@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
74 lines (73 loc) • 2.56 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const makeup_floating_label_1 = __importDefault(require("makeup-floating-label"));
class Select {
get selectId() {
return this.input.id || this.getElId("select");
}
handleChange(event) {
const { selectedIndex } = event.target;
const el = this.getEls("option")[selectedIndex];
const option = [...(this.input.option || [])][selectedIndex];
this.state.selectedIndex = selectedIndex;
// TODO: we should not cast the selected value to a string here, but this is a breaking change.
this.emit("change", {
index: selectedIndex,
selected: [String(option.value)],
el,
});
}
handleFloatingLabelInit() {
this.emit("floating-label-init");
}
onCreate() {
this.state = { selectedIndex: 0 };
}
onInput(input) {
this.state.selectedIndex = 0;
let i = 0;
for (const option of input.option || []) {
if (option.selected) {
this.state.selectedIndex = i;
break;
}
i++;
}
}
onMount() {
this._setupMakeup();
const parentForm = this.el.closest("form");
if (parentForm) {
const { selectedIndex } = document.getElementById(this.selectId);
this.subscribeTo(parentForm).on("reset", () => {
this.handleChange({ target: { selectedIndex } });
});
}
}
onUpdate() {
this._setupMakeup();
}
_setupMakeup() {
// TODO: makeup-floating-label should be updated so that we can remove the event listeners.
// It probably makes more sense to just move this functionality into Marko though.
if (this.input.floatingLabel) {
if (this._floatingLabel) {
this._floatingLabel.refresh();
this.handleFloatingLabelInit();
}
else if (document.readyState === "complete") {
if (this.el) {
this._floatingLabel = new makeup_floating_label_1.default(this.el);
this.handleFloatingLabelInit();
}
}
else {
this.subscribeTo(window).once("load", this._setupMakeup.bind(this));
}
}
}
}
module.exports = Select;