@flexis/ui
Version:
Styleless React Components
54 lines • 4.34 kB
JavaScript
import { ResizeObserver } from './ResizeObserver';
export class ColumnsSyncObserver {
constructor(callback) {
this.ro = null;
this.callback = null;
this.source = null;
this.target = null;
this.callback = callback;
this.ro = new ResizeObserver(this.sync.bind(this));
}
observe(source, target) {
const { source: prevSource, ro } = this;
if (source === null || target === null) {
return;
}
this.source = source;
this.target = target;
if (source !== prevSource) {
ro.disconnect();
Array.from(source.children).forEach((cell) => {
ro.observe(cell);
});
}
this.sync();
}
sync(entries = [], observer = this.ro) {
const { callback, source, target } = this;
if (source !== null && target !== null) {
syncColumns(source, target);
}
if (typeof callback === 'function') {
callback(entries, observer);
}
}
destroy() {
this.ro.disconnect();
this.ro = null;
this.callback = null;
this.source = null;
this.target = null;
}
}
export function syncColumns(sourceRow, targetRow) {
const sourceChildren = Array.from(sourceRow.children);
const targetChildren = Array.from(targetRow.children);
const columnsWidths = sourceChildren.map(cell => cell.offsetWidth);
const sourceChildrenCount = sourceChildren.length;
targetChildren.forEach((cell, i) => {
if (i < sourceChildrenCount) {
cell.style.width = `${columnsWidths[i]}px`;
}
});
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1uc1N5bmNPYnNlcnZlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9oZWxwZXJzL0NvbHVtbnNTeW5jT2JzZXJ2ZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLGNBQWMsRUFHZCxNQUFNLGtCQUFrQixDQUFDO0FBRTFCLE1BQU0sT0FBTyxtQkFBbUI7SUFPL0IsWUFBWSxRQUFpQztRQUxyQyxPQUFFLEdBQW1CLElBQUksQ0FBQztRQUMxQixhQUFRLEdBQTJCLElBQUksQ0FBQztRQUN4QyxXQUFNLEdBQWdCLElBQUksQ0FBQztRQUMzQixXQUFNLEdBQWdCLElBQUksQ0FBQztRQUdsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztRQUN6QixJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUVELE9BQU8sQ0FBQyxNQUFtQixFQUFFLE1BQW1CO1FBRS9DLE1BQU0sRUFDTCxNQUFNLEVBQUUsVUFBVSxFQUNsQixFQUFFLEVBQ0YsR0FBRyxJQUFJLENBQUM7UUFFVCxJQUFJLE1BQU0sS0FBSyxJQUFJLElBQUksTUFBTSxLQUFLLElBQUksRUFBRTtZQUN2QyxPQUFPO1NBQ1A7UUFFRCxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUNyQixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUVyQixJQUFJLE1BQU0sS0FBSyxVQUFVLEVBQUU7WUFDMUIsRUFBRSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ2hCLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFO2dCQUM1QyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2xCLENBQUMsQ0FBQyxDQUFDO1NBQ0g7UUFFRCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDYixDQUFDO0lBRUQsSUFBSSxDQUFDLFVBQWlDLEVBQUUsRUFBRSxXQUEyQixJQUFJLENBQUMsRUFBRTtRQUUzRSxNQUFNLEVBQ0wsUUFBUSxFQUNSLE1BQU0sRUFDTixNQUFNLEVBQ04sR0FBRyxJQUFJLENBQUM7UUFFVCxJQUFJLE1BQU0sS0FBSyxJQUFJLElBQUksTUFBTSxLQUFLLElBQUksRUFBRTtZQUN2QyxXQUFXLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1NBQzVCO1FBRUQsSUFBSSxPQUFPLFFBQVEsS0FBSyxVQUFVLEVBQUU7WUFDbkMsUUFBUSxDQUFDLE9BQU8sRUFBRSxRQUFRLENBQUMsQ0FBQztTQUM1QjtJQUNGLENBQUM7SUFFRCxPQUFPO1FBQ04sSUFBSSxDQUFDLEVBQUUsQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQztRQUNmLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1FBQ25CLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO0lBQ3BCLENBQUM7Q0FDRDtBQUVELE1BQU0sVUFBVSxXQUFXLENBQUMsU0FBc0IsRUFBRSxTQUFzQjtJQUV6RSxNQUFNLGNBQWMsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQWtCLENBQUM7SUFDdkUsTUFBTSxjQUFjLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFrQixDQUFDO0lBQ3ZFLE1BQU0sYUFBYSxHQUFHLGNBQWMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDbkUsTUFBTSxtQkFBbUIsR0FBRyxjQUFjLENBQUMsTUFBTSxDQUFDO0lBRWxELGNBQWMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxFQUFFLEVBQUU7UUFFbEMsSUFBSSxDQUFDLEdBQUcsbUJBQW1CLEVBQUU7WUFDNUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsR0FBRyxhQUFhLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztTQUMzQztJQUNGLENBQUMsQ0FBQyxDQUFDO0FBQ0osQ0FBQyJ9