adore-datatable 2.0.0

package/src/filterRows.js

@@ -0,0 +1,209 @@
+import { isNumber, stripHTML } from './utils';
+import CellManager from './cellmanager';
+
+export default function filterRows(rows, filters, data) {
+    let filteredRowIndices = [];
+
+    if (Object.keys(filters).length === 0) {
+        return rows.map(row => row.meta.rowIndex);
+    }
+
+    for (let colIndex in filters) {
+        const keyword = filters[colIndex];
+
+        const filteredRows = filteredRowIndices.length ?
+            filteredRowIndices.map(i => rows[i]) :
+            rows;
+
+        const cells = filteredRows.map(row => row[colIndex]);
+
+        let filter = guessFilter(keyword);
+        let filterMethod = getFilterMethod(rows, data, filter);
+
+        if (filterMethod) {
+            filteredRowIndices = filterMethod(filter.text, cells);
+        } else {
+            filteredRowIndices = cells.map(cell => cell.rowIndex);
+        }
+    }
+
+    return filteredRowIndices;
+};
+
+function getFilterMethod(rows, allData, filter) {
+    const getFormattedValue = cell => {
+        let formatter = CellManager.getCustomCellFormatter(cell);
+        let rowData = rows[cell.rowIndex];
+        if (allData && allData.data && allData.data.length) {
+            rowData = allData.data[cell.rowIndex];
+        }
+        if (formatter && cell.content) {
+            cell.html = formatter(cell.content, rows[cell.rowIndex], cell.column, rowData, filter);
+            return stripHTML(cell.html);
+        }
+        return cell.content || '';
+    };
+
+    const stringCompareValue = cell =>
+        String(stripHTML(cell.html || '') || getFormattedValue(cell)).toLowerCase();
+
+    const numberCompareValue = cell => parseFloat(cell.content);
+
+    const getCompareValues = (cell, keyword) => {
+        if (cell.column.compareValue) {
+            const compareValues = cell.column.compareValue(cell, keyword);
+            if (compareValues && Array.isArray(compareValues)) return compareValues;
+        }
+
+        // check if it can be converted to number
+        const float = numberCompareValue(cell);
+        if (!isNaN(float)) {
+            return [float, keyword];
+        }
+
+        return [stringCompareValue(cell), keyword];
+    };
+
+    let filterMethodMap = {
+        contains(keyword, cells) {
+            return cells
+                .filter(cell => {
+                    const needle = (keyword || '').toLowerCase();
+                    return !needle ||
+                        (cell.content || '').toLowerCase().includes(needle) ||
+                        stringCompareValue(cell).includes(needle);
+                })
+                .map(cell => cell.rowIndex);
+        },
+
+        greaterThan(keyword, cells) {
+            return cells
+                .filter(cell => {
+                    const [compareValue, keywordValue] = getCompareValues(cell, keyword);
+                    return compareValue > keywordValue;
+                })
+                .map(cell => cell.rowIndex);
+        },
+
+        lessThan(keyword, cells) {
+            return cells
+                .filter(cell => {
+                    const [compareValue, keywordValue] = getCompareValues(cell, keyword);
+                    return compareValue < keywordValue;
+                })
+                .map(cell => cell.rowIndex);
+        },
+
+        equals(keyword, cells) {
+            return cells
+                .filter(cell => {
+                    const value = parseFloat(cell.content);
+                    return value === keyword;
+                })
+                .map(cell => cell.rowIndex);
+        },
+
+        notEquals(keyword, cells) {
+            return cells
+                .filter(cell => {
+                    const value = parseFloat(cell.content);
+                    return value !== keyword;
+                })
+                .map(cell => cell.rowIndex);
+        },
+
+        range(rangeValues, cells) {
+            return cells
+                .filter(cell => {
+                    const values1 = getCompareValues(cell, rangeValues[0]);
+                    const values2 = getCompareValues(cell, rangeValues[1]);
+                    const value = values1[0];
+                    return value >= values1[1] && value <= values2[1];
+                })
+                .map(cell => cell.rowIndex);
+        },
+
+        containsNumber(keyword, cells) {
+            return cells
+                .filter(cell => {
+                    let number = parseFloat(keyword, 10);
+                    let string = keyword;
+                    let hayNumber = numberCompareValue(cell);
+                    let hayString = stringCompareValue(cell);
+
+                    return number === hayNumber || hayString.includes(string);
+                })
+                .map(cell => cell.rowIndex);
+        }
+    };
+
+    return filterMethodMap[filter.type];
+}
+
+function guessFilter(keyword = '') {
+    if (keyword.length === 0) return {};
+
+    let compareString = keyword;
+
+    if (['>', '<', '='].includes(compareString[0])) {
+        compareString = keyword.slice(1);
+    } else if (compareString.startsWith('!=')) {
+        compareString = keyword.slice(2);
+    }
+
+    if (keyword.startsWith('>')) {
+        if (compareString) {
+            return {
+                type: 'greaterThan',
+                text: compareString.trim()
+            };
+        }
+    }
+
+    if (keyword.startsWith('<')) {
+        if (compareString) {
+            return {
+                type: 'lessThan',
+                text: compareString.trim()
+            };
+        }
+    }
+
+    if (keyword.startsWith('=')) {
+        if (isNumber(compareString)) {
+            return {
+                type: 'equals',
+                text: Number(keyword.slice(1).trim())
+            };
+        }
+    }
+
+    if (isNumber(compareString)) {
+        return {
+            type: 'containsNumber',
+            text: compareString
+        };
+    }
+
+    if (keyword.startsWith('!=')) {
+        if (isNumber(compareString)) {
+            return {
+                type: 'notEquals',
+                text: Number(keyword.slice(2).trim())
+            };
+        }
+    }
+
+    if (keyword.split(':').length === 2 && keyword.split(':').every(v => isNumber(v.trim()))) {
+        compareString = keyword.split(':');
+        return {
+            type: 'range',
+            text: compareString.map(v => v.trim())
+        };
+    }
+
+    return {
+        type: 'contains',
+        text: compareString.toLowerCase()
+    };
+}

package/src/icons.js

@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+
+// Icons from https://feathericons.com/
+
+let icons = {
+    chevronDown: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>',
+    chevronRight: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>'
+};
+
+export default icons;

package/src/index.js

@@ -0,0 +1,5 @@
+import DataTable from './datatable.js';
+import packageJson from '../package.json';
+DataTable.__version__ = packageJson.version;
+
+export default DataTable;

package/src/keyboard.js

@@ -0,0 +1,59 @@
+import $ from './dom';
+
+const KEYCODES = {
+    13: 'enter',
+    91: 'meta',
+    16: 'shift',
+    17: 'ctrl',
+    18: 'alt',
+    37: 'left',
+    38: 'up',
+    39: 'right',
+    40: 'down',
+    9: 'tab',
+    27: 'esc',
+    67: 'c',
+    70: 'f',
+    86: 'v'
+};
+
+export default class Keyboard {
+    constructor(element) {
+        this.listeners = {};
+        $.on(element, 'keydown', this.handler.bind(this));
+    }
+
+    handler(e) {
+        let key = KEYCODES[e.keyCode];
+
+        if (e.shiftKey && key !== 'shift') {
+            key = 'shift+' + key;
+        }
+
+        if ((e.ctrlKey && key !== 'ctrl') || (e.metaKey && key !== 'meta')) {
+            key = 'ctrl+' + key;
+        }
+
+        const listeners = this.listeners[key];
+
+        if (listeners && listeners.length > 0) {
+            for (let listener of listeners) {
+                const preventBubbling = listener(e);
+                if (preventBubbling === undefined || preventBubbling === true) {
+                    e.preventDefault();
+                }
+            }
+        }
+    }
+
+    on(key, listener) {
+        const keys = key.split(',').map(k => k.trim());
+
+        keys.map(key => {
+            this.listeners[key] = this.listeners[key] || [];
+            this.listeners[key].push(listener);
+        });
+    }
+}
+
+export let keyCode = KEYCODES;

package/src/rowmanager.js

@@ -0,0 +1,369 @@
+import $ from './dom';
+import {
+    makeDataAttributeString,
+    nextTick,
+    ensureArray,
+    linkProperties,
+    uniq,
+    numberSortAsc
+} from './utils';
+
+export default class RowManager {
+    constructor(instance) {
+        this.instance = instance;
+        linkProperties(this, this.instance, [
+            'options',
+            'fireEvent',
+            'wrapper',
+            'bodyScrollable',
+            'bodyRenderer',
+            'style'
+        ]);
+
+        this.bindEvents();
+        this.refreshRows = nextTick(this.refreshRows, this);
+    }
+
+    get datamanager() {
+        return this.instance.datamanager;
+    }
+
+    get cellmanager() {
+        return this.instance.cellmanager;
+    }
+
+    bindEvents() {
+        this.bindCheckbox();
+    }
+
+    bindCheckbox() {
+        if (!this.options.checkboxColumn) return;
+
+        // map of checked rows
+        this.checkMap = [];
+
+        $.on(this.wrapper, 'click', '.dt-cell--col-0 [type="checkbox"]', (e, $checkbox) => {
+            const $cell = $checkbox.closest('.dt-cell');
+            const {
+                rowIndex,
+                isHeader
+            } = $.data($cell);
+            const checked = $checkbox.checked;
+
+            if (isHeader) {
+                this.checkAll(checked);
+            } else {
+                this.checkRow(rowIndex, checked);
+            }
+        });
+    }
+
+    refreshRows() {
+        this.instance.renderBody();
+        this.instance.setDimensions();
+    }
+
+    refreshRow(row, rowIndex) {
+        const _row = this.datamanager.updateRow(row, rowIndex);
+
+        _row.forEach(cell => {
+            this.cellmanager.refreshCell(cell, true);
+        });
+    }
+
+    getCheckedRows() {
+        if (!this.checkMap) {
+            return [];
+        }
+
+        let out = [];
+        for (let rowIndex in this.checkMap) {
+            const checked = this.checkMap[rowIndex];
+            if (checked === 1) {
+                out.push(rowIndex);
+            }
+        }
+
+        return out;
+    }
+
+    highlightCheckedRows() {
+        this.getCheckedRows()
+            .map(rowIndex => this.checkRow(rowIndex, true));
+    }
+
+    checkRow(rowIndex, toggle) {
+        const value = toggle ? 1 : 0;
+        const selector = rowIndex => `.dt-cell--0-${rowIndex} [type="checkbox"]`;
+        // update internal map
+        this.checkMap[rowIndex] = value;
+        // set checkbox value explicitly
+        $.each(selector(rowIndex), this.bodyScrollable)
+            .map(input => {
+                input.checked = toggle;
+            });
+        // highlight row
+        this.highlightRow(rowIndex, toggle);
+        this.showCheckStatus();
+        this.fireEvent('onCheckRow', this.datamanager.getRow(rowIndex));
+    }
+
+    checkAll(toggle) {
+        const value = toggle ? 1 : 0;
+
+        // update internal map
+        if (toggle) {
+            if (this.datamanager._filteredRows) {
+                this.datamanager._filteredRows.forEach(f => {
+                    this.checkRow(f, toggle);
+                });
+            } else {
+                this.checkMap = Array.from(Array(this.getTotalRows())).map(c => value);
+            }
+        } else {
+            this.checkMap = [];
+        }
+        // set checkbox value
+        $.each('.dt-cell--col-0 [type="checkbox"]', this.bodyScrollable)
+            .map(input => {
+                input.checked = toggle;
+            });
+        // highlight all
+        this.highlightAll(toggle);
+        this.showCheckStatus();
+        this.fireEvent('onCheckRow');
+    }
+
+    showCheckStatus() {
+        if (!this.options.checkedRowStatus) return;
+        const checkedRows = this.getCheckedRows();
+        const count = checkedRows.length;
+        if (count > 0) {
+            let message = this.instance.translate('{count} rows selected', {
+                count: count
+            });
+            this.bodyRenderer.showToastMessage(message);
+        } else {
+            this.bodyRenderer.clearToastMessage();
+        }
+    }
+
+    highlightRow(rowIndex, toggle = true) {
+        const $row = this.getRow$(rowIndex);
+        if (!$row) return;
+
+        if (!toggle && this.bodyScrollable.classList.contains('dt-scrollable--highlight-all')) {
+            $row.classList.add('dt-row--unhighlight');
+            return;
+        }
+
+        if (toggle && $row.classList.contains('dt-row--unhighlight')) {
+            $row.classList.remove('dt-row--unhighlight');
+        }
+
+        this._highlightedRows = this._highlightedRows || {};
+
+        if (toggle) {
+            $row.classList.add('dt-row--highlight');
+            this._highlightedRows[rowIndex] = $row;
+        } else {
+            $row.classList.remove('dt-row--highlight');
+            delete this._highlightedRows[rowIndex];
+        }
+    }
+
+    highlightAll(toggle = true) {
+        if (toggle) {
+            this.bodyScrollable.classList.add('dt-scrollable--highlight-all');
+        } else {
+            this.bodyScrollable.classList.remove('dt-scrollable--highlight-all');
+            for (const rowIndex in this._highlightedRows) {
+                const $row = this._highlightedRows[rowIndex];
+                $row.classList.remove('dt-row--highlight');
+            }
+            this._highlightedRows = {};
+        }
+    }
+
+    showRows(rowIndices) {
+        rowIndices = ensureArray(rowIndices);
+        const rows = rowIndices.map(rowIndex => this.datamanager.getRow(rowIndex));
+        this.bodyRenderer.renderRows(rows);
+    }
+
+    showAllRows() {
+        const rowIndices = this.datamanager.getAllRowIndices();
+        this.showRows(rowIndices);
+    }
+
+    getChildrenToShowForNode(rowIndex) {
+        const row = this.datamanager.getRow(rowIndex);
+        row.meta.isTreeNodeClose = false;
+
+        return this.datamanager.getImmediateChildren(rowIndex);
+    }
+
+    openSingleNode(rowIndex) {
+        const childrenToShow = this.getChildrenToShowForNode(rowIndex);
+        const visibleRowIndices = this.bodyRenderer.visibleRowIndices;
+        const rowsToShow = uniq([...childrenToShow, ...visibleRowIndices]).sort(numberSortAsc);
+
+        this.showRows(rowsToShow);
+    }
+
+    getChildrenToHideForNode(rowIndex) {
+        const row = this.datamanager.getRow(rowIndex);
+        row.meta.isTreeNodeClose = true;
+
+        const rowsToHide = this.datamanager.getChildren(rowIndex);
+        rowsToHide.forEach(rowIndex => {
+            const row = this.datamanager.getRow(rowIndex);
+            if (!row.meta.isLeaf) {
+                row.meta.isTreeNodeClose = true;
+            }
+        });
+
+        return rowsToHide;
+    }
+
+    closeSingleNode(rowIndex) {
+        const rowsToHide = this.getChildrenToHideForNode(rowIndex);
+        const visibleRows = this.bodyRenderer.visibleRowIndices;
+        const rowsToShow = visibleRows
+            .filter(rowIndex => !rowsToHide.includes(rowIndex))
+            .sort(numberSortAsc);
+
+        this.showRows(rowsToShow);
+    }
+
+    expandAllNodes() {
+        let rows = this.datamanager.getRows();
+        let rootNodes = rows.filter(row => !row.meta.isLeaf);
+
+        const childrenToShow = rootNodes.map(row => this.getChildrenToShowForNode(row.meta.rowIndex)).flat();
+        const visibleRowIndices = this.bodyRenderer.visibleRowIndices;
+        const rowsToShow = uniq([...childrenToShow, ...visibleRowIndices]).sort(numberSortAsc);
+
+        this.showRows(rowsToShow);
+    }
+
+    collapseAllNodes() {
+        let rows = this.datamanager.getRows();
+        let rootNodes = rows.filter(row => row.meta.indent === 0);
+
+        const rowsToHide = rootNodes.map(row => this.getChildrenToHideForNode(row.meta.rowIndex)).flat();
+        const visibleRows = this.bodyRenderer.visibleRowIndices;
+        const rowsToShow = visibleRows
+            .filter(rowIndex => !rowsToHide.includes(rowIndex))
+            .sort(numberSortAsc);
+
+        this.showRows(rowsToShow);
+    }
+
+    setTreeDepth(depth) {
+        let rows = this.datamanager.getRows();
+
+        const rowsToOpen = rows.filter(row => row.meta.indent < depth);
+        const rowsToClose = rows.filter(row => row.meta.indent >= depth);
+        const rowsToHide = rowsToClose.filter(row => row.meta.indent > depth);
+
+        rowsToClose.forEach(row => {
+            if (!row.meta.isLeaf) {
+                row.meta.isTreeNodeClose = true;
+            }
+        });
+        rowsToOpen.forEach(row => {
+            if (!row.meta.isLeaf) {
+                row.meta.isTreeNodeClose = false;
+            }
+        });
+
+        const rowsToShow = rows
+            .filter(row => !rowsToHide.includes(row))
+            .map(row => row.meta.rowIndex)
+            .sort(numberSortAsc);
+        this.showRows(rowsToShow);
+    }
+
+    getRow$(rowIndex) {
+        return $(this.selector(rowIndex), this.bodyScrollable);
+    }
+
+    getTotalRows() {
+        return this.datamanager.getRowCount();
+    }
+
+    getFirstRowIndex() {
+        return 0;
+    }
+
+    getLastRowIndex() {
+        return this.datamanager.getRowCount() - 1;
+    }
+
+    scrollToRow(rowIndex) {
+        rowIndex = +rowIndex;
+        this._lastScrollTo = this._lastScrollTo || 0;
+        const $row = this.getRow$(rowIndex);
+        if ($.inViewport($row, this.bodyScrollable)) return;
+
+        const {
+            height
+        } = $row.getBoundingClientRect();
+        const {
+            top,
+            bottom
+        } = this.bodyScrollable.getBoundingClientRect();
+        const rowsInView = Math.floor((bottom - top) / height);
+
+        let offset = 0;
+        if (rowIndex > this._lastScrollTo) {
+            offset = height * ((rowIndex + 1) - rowsInView);
+        } else {
+            offset = height * ((rowIndex + 1) - 1);
+        }
+
+        this._lastScrollTo = rowIndex;
+        $.scrollTop(this.bodyScrollable, offset);
+    }
+
+    getRowHTML(row, props) {
+        const dataAttr = makeDataAttributeString(props);
+        let rowIdentifier = props.rowIndex;
+
+        if (props.isFilter) {
+            row = row.map(cell => (Object.assign({}, cell, {
+                content: this.getFilterInput({
+                    colIndex: cell.colIndex,
+                    name: cell.name
+                }),
+                isFilter: 1,
+                isHeader: undefined,
+                editable: false
+            })));
+
+            rowIdentifier = 'filter';
+        }
+
+        if (props.isHeader) {
+            rowIdentifier = 'header';
+        }
+
+        return `
+            <div class="dt-row dt-row-${rowIdentifier}" ${dataAttr}>
+                ${row.map(cell => this.cellmanager.getCellHTML(cell)).join('')}
+            </div>
+        `;
+    }
+
+    getFilterInput(props) {
+        let title = `title="Filter based on ${props.name || 'Index'}"`;
+        const dataAttr = makeDataAttributeString(props);
+        return `<input class="dt-filter dt-input" type="text" ${dataAttr} tabindex="1"
+            ${props.colIndex === 0 ? 'disabled' : title} />`;
+    }
+
+    selector(rowIndex) {
+        return `.dt-row-${rowIndex}`;
+    }
+}