@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
93 lines (92 loc) • 3.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class NumberInput {
onCreate() {
this.state = {
value: 0,
min: 0,
max: Infinity,
};
}
onMount() {
var _a;
this.textbox = (_a = this.getComponent("input")) === null || _a === void 0 ? void 0 : _a.getEl("input");
}
onInput(input) {
var _a;
const defaultMin = input.a11yDeleteText ? 1 : 0;
this.state.min = input.min
? parseInt(input.min.toString(), 10)
: defaultMin;
this.state.max = input.max
? parseInt(input.max.toString(), 10)
: Infinity;
const value = (_a = input.value) !== null && _a !== void 0 ? _a : defaultMin;
this.state.value =
typeof value !== "number" ? parseInt(value.toString(), 10) : value;
}
checkBoundary(value, inc = 0) {
const defaultMin = this.input.a11yDeleteText ? 1 : 0;
let newValue = parseInt(value, 10) + inc;
if (isNaN(newValue)) {
newValue = defaultMin;
}
else if (newValue > this.state.max) {
newValue = this.state.max;
}
else if (newValue < this.state.min) {
newValue = this.state.min;
}
return newValue;
}
updateInputValue(event) {
const value = this.checkBoundary(this.textbox.value, 0);
this.state.value = value;
// Update the input field's value to reflect the bounded value
this.textbox.value = value.toString();
this.emit("input-change", {
originalEvent: event.originalEvent,
value,
});
this.emit("change", { originalEvent: event.originalEvent, value });
}
updateInputValueChange(event) {
const value = this.checkBoundary(this.textbox.value, 0);
this.state.value = value;
// Update the input field's value to reflect the bounded value
this.textbox.value = value.toString();
this.emit("change", { originalEvent: event.originalEvent, value });
}
handleAnimation(action) {
// Normally we dont want to use dom manipulation for removing or adding classes,
// but for this animation to work we need to trigger a reflow.
const el = this.el;
el.classList.remove(`number-input--increment`);
el.classList.remove(`number-input--decrement`);
el.classList.remove(`number-input--increment-disabled`);
el.classList.remove(`number-input--decrement-disabled`);
// Trigger a reflow to ensure the animation starts
void el.offsetWidth;
// Add the class for the animation
el.classList.add(`number-input--${action}`);
}
handleIncrement(event) {
const value = this.checkBoundary(this.textbox.value, 1);
this.handleAnimation(value >= this.state.max ? "increment-disabled" : "increment");
this.state.value = value;
// Update the input field's value to reflect the bounded value
this.textbox.value = value.toString();
this.emit("increment", { originalEvent: event.originalEvent, value });
this.emit("change", { originalEvent: event.originalEvent, value });
}
handleDecrement(event) {
const value = this.checkBoundary(this.textbox.value, -1);
this.handleAnimation(value <= this.state.min ? "decrement-disabled" : "decrement");
this.state.value = value;
// Update the input field's value to reflect the bounded value
this.textbox.value = value.toString();
this.emit("decrement", { originalEvent: event.originalEvent, value });
this.emit("change", { originalEvent: event.originalEvent, value });
}
}
module.exports = NumberInput;