@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
157 lines (156 loc) • 5.38 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_focusables_1 = __importDefault(require("makeup-focusables"));
class EbayTable {
onCreate() {
this.state = {
selected: {},
sorted: {},
allSelected: "false",
};
}
onMount() {
this.disabledItems = new Set();
this.tbody = this.getEl("tbody");
this.setLoading();
}
onInput(input) {
this.state.selected = this.getSelectedRowStateFromInput(input);
this.state.allSelected = this.getAllSelectedState(input);
this.state.sorted = this.getSortedColStateFromInput(input);
}
onUpdate() {
this.setLoading();
}
onRender() {
if (typeof window !== "undefined") {
cancelAnimationFrame(this.animationFrame);
}
}
onDestroy() {
cancelAnimationFrame(this.animationFrame);
}
getSelectedRowStateFromInput(input) {
const selected = {};
if (input.row) {
for (const [i, row] of Object.entries([...input.row])) {
const name = row.name || i;
selected[name] = row.selected || false;
}
}
return selected;
}
getSortedColStateFromInput(input) {
const sorted = {};
for (const [i, header] of Object.entries([...input.header])) {
const name = header.name || i;
if (header.sort === true) {
sorted[name] = "none";
}
else if (header.sort) {
sorted[name] = header.sort;
}
}
return sorted;
}
getAllSelectedState(input) {
if (input.allSelected) {
return input.allSelected;
}
let selectedCount = 0;
let rowCount = 0;
for (const [_name, selected] of Object.entries(this.state.selected)) {
if (selected) {
selectedCount++;
}
rowCount++;
}
if (selectedCount === 0) {
return "false";
}
if (selectedCount === rowCount) {
return "true";
}
return "mixed";
}
headerSelect() {
const { allSelected } = this.state;
this.state.selected = [...(this.input.row || [])].reduce((acc, { name }, i) => {
acc[name || i] = allSelected !== "true";
return acc;
}, {});
this.state.allSelected = allSelected !== "true" ? "true" : "false";
this.emit("select", {
selected: this.state.selected,
allSelected: this.state.allSelected,
});
}
rowSelect(name, { checked }) {
this.state.selected[name] = checked;
this.setStateDirty("selected");
this.state.allSelected = this.getAllSelectedState(this.input);
this.emit("select", {
selected: this.state.selected,
});
}
setLoading() {
if (this.input.bodyState === "loading") {
if (this.tbody) {
this.animationFrame = requestAnimationFrame(() => {
(0, makeup_focusables_1.default)(this.tbody).forEach((focusable) => {
if (focusable.tagName === "A") {
focusable.setAttribute("data-href", focusable.getAttribute("href") || "");
focusable.removeAttribute("href");
}
else {
focusable.setAttribute("disabled", "true");
}
focusable.setAttribute("data-tabindex", focusable.getAttribute("tabindex") || "");
focusable.setAttribute("tabindex", "-1");
this.disabledItems.add(focusable);
});
});
}
}
else {
for (const [focusable] of this.disabledItems.entries()) {
if (focusable.tagName === "A") {
focusable.setAttribute("href", focusable.getAttribute("data-href") || "");
focusable.removeAttribute("data-href");
}
else {
focusable.setAttribute("disabled", "true");
}
if (focusable.getAttribute("data-tabindex") !== null) {
focusable.setAttribute("tabindex", focusable.getAttribute("tabindex") || "");
}
else {
focusable.removeAttribute("tabindex");
}
}
this.disabledItems.clear();
}
}
sortColumn(name) {
const sortTo = {
asc: "desc",
desc: "none",
none: "asc",
};
const currSort = this.state.sorted[name];
if (currSort) {
const nextSort = sortTo[currSort];
this.state.sorted = Object.keys(this.state.sorted).reduce((acc, key) => {
acc[key] = key === name ? nextSort : "none";
return acc;
}, {});
this.emit("sort", {
sorted: { [name]: nextSort },
});
}
}
}
module.exports = EbayTable;