@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
138 lines (137 loc) • 4.75 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_expander_1 = __importDefault(require("makeup-expander"));
const dropdown_1 = require("../../common/dropdown");
const date_utils_1 = require("../../common/dates/date-utils");
const dates_1 = require("../../common/dates");
const MIN_WIDTH_FOR_DOUBLE_PANE = 600;
class DateTextbox {
onCreate() {
this.state = {
numMonths: 1,
firstSelected: null,
secondSelected: null,
popover: false,
};
}
onMount() {
this.expander = new makeup_expander_1.default(this.el, {
hostSelector: ".ebay-date-textbox--main > .icon-btn",
contentSelector: ".date-textbox__popover",
expandOnClick: true,
autoCollapse: true,
});
this.dropdownUtil = new dropdown_1.DropdownUtil(this.el, this.getEl("popover"));
}
onDestroy() {
var _a, _b;
(_a = this.expander) === null || _a === void 0 ? void 0 : _a.destroy();
(_b = this.dropdownUtil) === null || _b === void 0 ? void 0 : _b.cleanup();
}
onInput(input) {
if (input.value !== undefined) {
this.state.firstSelected = (0, date_utils_1.dateArgToISO)(input.value);
}
if (input.rangeEnd !== undefined) {
this.state.secondSelected = (0, date_utils_1.dateArgToISO)(input.rangeEnd);
}
if (!input.range) {
this.state.secondSelected = null;
}
}
calculateNumMonths() {
this.state.numMonths =
document.documentElement.clientWidth < MIN_WIDTH_FOR_DOUBLE_PANE
? 1
: 2;
}
handleInputChange(index, { value }) {
let iso = (0, dates_1.parse)(value, this.input.locale);
if (iso === null) {
this.emit("invalid-date", { value, index });
return;
}
if (index === 0) {
this.state.firstSelected = iso;
}
else {
this.state.secondSelected = iso;
}
this.emitSelectedChange();
}
openPopover() {
this.calculateNumMonths();
this.state.popover = true;
this.dropdownUtil.show();
}
closePopover() {
this.state.popover = false;
this.dropdownUtil.hide();
}
onPopoverSelect({ iso }) {
const { firstSelected, secondSelected } = this.state;
this.state.firstSelected = iso;
if (this.input.range) {
const selected = firstSelected || secondSelected;
if (firstSelected && secondSelected) {
// both were selected; reset selection
this.state.secondSelected = null;
}
else if (selected) {
// exactly one was selected; figure out the order
if (selected < iso) {
this.state.firstSelected = selected;
this.state.secondSelected = iso;
}
else {
this.state.secondSelected = selected;
}
if (this.input.collapseOnSelect) {
this.expander.expanded = false;
}
}
}
else if (this.input.collapseOnSelect) {
this.expander.expanded = false;
}
this.emitSelectedChange();
}
/**
* If the cursor is at the end of the input and it makes sense to add a d/m/y separator, add it.
*/
onInputKeyup({ originalEvent: event }) {
var _a;
// abort if key wasn't a number
if (!/^\d$/.test(event.key)) {
return;
}
const input = event.target;
const { value } = input;
if (input.selectionStart === value.length) {
const { o: order, s: sep } = (0, dates_1.getLocale)(this.input.locale);
let i = 0;
let start = 0;
for (let currStart; ~(currStart = value.indexOf(sep[i], start));) {
start = currStart + sep[i].length;
i++;
}
if (value.length - start === (order[i] === "y" ? 4 : 2)) {
input.value += (_a = sep[i]) !== null && _a !== void 0 ? _a : "";
}
}
}
emitSelectedChange() {
this.emit("change", this.input.range
? {
rangeStart: this.state.firstSelected,
rangeEnd: this.state.secondSelected,
}
: {
selected: this.state.firstSelected,
});
}
}
module.exports = DateTextbox;