Merge branch 'master' into add-tooltip-on-filter

.eslintrc

@@ -35,7 +35,6 @@
     "block-scoped-var": 2,
     "brace-style": [2, "1tbs", { "allowSingleLine": true }],
     "camelcase": [2, { "properties": "always" }],
-    "comma-dangle": [2, "never"],
     "comma-spacing": [2, { "before": false, "after": true }],
     "comma-style": [2, "last"],
     "complexity": 0,

.github/workflows/test-and-release.yml

@@ -4,17 +4,19 @@ on:
     branches:
       - master
 jobs:
-  test:
-    runs-on: ubuntu-16.04
+  test-and-release:
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - name: Lint, build and test
+        uses: cypress-io/github-action@v2
         with:
-          node-version: '12'
-      - run: yarn install --frozen-lockfile
-      - run: yarn lint
-      - run: yarn build
-      - run: yarn test
+          build: yarn lint-and-build
+          start: yarn cy:server
+          record: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test-pull-request.yml

@@ -1,14 +1,16 @@
 name: Test Pull Request
 on: pull_request
 jobs:
-  test:
-    runs-on: ubuntu-16.04
+  test-pull-request:
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - name: Lint, build and test
+        uses: cypress-io/github-action@v2
         with:
-          node-version: '12'
-      - run: yarn install --frozen-lockfile
-      - run: yarn lint
-      - run: yarn build
-      - run: yarn test
+          build: yarn lint-and-build
+          start: yarn cy:server
+          record: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

cypress.json

@@ -1,3 +1,4 @@
 {
-    "baseUrl": "http://localhost:8989"
+    "baseUrl": "http://localhost:8989",
+    "projectId": "2nsyux"
 }

cypress/integration/cell.js

@@ -32,7 +32,7 @@ describe('Cell', function () {
     });
 
     it('edit cell', function () {
-        cy.getCell(4, 1).dblclick();
+        cy.getCell(4, 1).dblclick({ force: true });
         cy.getCell(4, 1).find('input').click();
         cy.focused().type('{selectall}{del}Test{enter}');
         cy.getCell(4, 1).contains('Test');

cypress/integration/inline_filters.js

@@ -14,36 +14,36 @@ describe('Inline Filters', function () {
         cy.getCell(4, 0).click().type('{ctrl}f');
 
         cy.get('@filterInput4').type('edin');
-        cy.get('.dt-row[data-row-index=0]').should('be.visible');
-        cy.get('.dt-row[data-row-index=1]').should('not.be.visible');
+        cy.get('.dt-row-0').should('be.visible');
+        cy.get('.dt-row-1').should('not.exist');
         cy.get('@filterInput4').clear();
     });
 
     it('simple number filter', function () {
         cy.get('@filterInput5').type('2360');
         cy.get('.dt-row[data-row-index=8]').should('be.visible');
-        cy.get('.dt-row[data-row-index=15]').should('not.be.visible');
-        cy.get('.dt-row[data-row-index=22]').should('not.be.visible');
+        cy.get('.dt-row[data-row-index=15]').should('not.exist');
+        cy.get('.dt-row[data-row-index=22]').should('not.exist');
         cy.get('@filterInput5').clear();
     });
 
     it('greater than', function () {
         cy.get('@filterInput5').type('> 6000');
-        cy.get('.dt-row[data-row-index=0]').should('not.be.visible');
+        cy.get('.dt-row[data-row-index=0]').should('not.exist');
         cy.get('.dt-row[data-row-index=3]').should('be.visible');
         cy.get('@filterInput5').clear();
     });
 
     it('less than', function () {
         cy.get('@filterInput5').type('< 2000');
-        cy.get('.dt-row[data-row-index=0]').should('not.be.visible');
+        cy.get('.dt-row[data-row-index=0]').should('not.exist');
         cy.get('.dt-row[data-row-index=51]').should('be.visible');
         cy.get('@filterInput5').clear();
     });
 
     it('range', function () {
         cy.get('@filterInput5').type(' 2000: 5000');
-        cy.get('.dt-row[data-row-index=4]').should('not.be.visible');
+        cy.get('.dt-row[data-row-index=4]').should('not.exist');
         cy.get('.dt-row[data-row-index=5]').should('be.visible');
         cy.get('@filterInput5').clear();
     });
@@ -58,16 +58,15 @@ describe('Inline Filters', function () {
         cy.get('@filterInput4').type('to');
         cy.get('@filterInput5').type('54');
 
-        cy.get('.dt-row[data-row-index=0]').should('be.visible');
         cy.get('.dt-row[data-row-index=4]').should('be.visible');
-        cy.get('.dt-row[data-row-index=1]').should('not.be.visible');
+        cy.get('.dt-row[data-row-index=1]').should('not.exist');
         cy.get('@filterInput4').clear();
         cy.get('@filterInput5').clear();
     });
 
     it('greater than for string type filters', function () {
         cy.get('@filterInput6').type('> 01/07/2011');
-        cy.get('.dt-row[data-row-index=0]').should('not.be.visible');
+        cy.get('.dt-row[data-row-index=0]').should('not.exist');
         cy.get('.dt-row[data-row-index=1]').should('be.visible');
         cy.get('.dt-row[data-row-index=3]').should('be.visible');
         cy.get('.dt-row[data-row-index=5]').should('be.visible');

index.html

@@ -18,7 +18,8 @@
 
 <body>
 	<h1>Frappé DataTable</h1>
-	<button onclick="datatable.render()">Refresh</button>
+	<button onclick="datatable.render()">Render Table</button>
+	<button onclick="datatable.refresh()">Refresh Data</button>
 	<button onclick="switchToTreeView()" data-action="treeview">TreeView</button>
 	<label>
 		<input type="checkbox" id="input-large-data" />
@@ -188,6 +189,18 @@
 					dynamicRowHeight: true,
 					treeView: treeView,
 					showTotalRow: true,
+					// direction: 'rtl',
+					// language: 'myLang',
+					// translations: {
+					// 	myLang: {
+					// 		"Sort Ascending": "Sort low to high",
+					// 		"{count} cells copied": {
+					// 			"1": "1 cell was copied",
+					// 			"2": "2 cells were copied",
+					// 			"default": "Many cells were copied"
+					// 		}
+					// 	}
+					// },
 					// filterRows(keyword, cells, colIndex) {
 					// 	return cells
 					// 		.filter(cell => cell.content.includes(keyword))

package.json

@@ -17,6 +17,7 @@
     "travis-deploy-once": "travis-deploy-once",
     "semantic-release": "semantic-release",
     "lint": "eslint src",
+    "lint-and-build": "yarn lint && yarn build",
     "commit": "npx git-cz"
   },
   "files": [
@@ -26,7 +27,7 @@
   "devDependencies": {
     "autoprefixer": "^9.0.0",
     "chai": "3.5.0",
-    "cypress": "3.0.1",
+    "cypress": "^9.2.0",
     "cz-conventional-changelog": "^2.1.0",
     "deepmerge": "^2.0.1",
     "eslint": "^5.0.1",

src/cellmanager.js

@@ -133,7 +133,10 @@ export default class CellManager {
     bindCopyCellContents() {
         this.keyboard.on('ctrl+c', () => {
             const noOfCellsCopied = this.copyCellContents(this.$focusedCell, this.$selectionCursor);
-            const message = `${noOfCellsCopied} cell${noOfCellsCopied > 1 ? 's' : ''} copied`;
+            const message = this.instance.translate('{count} cells copied', {
+                count: noOfCellsCopied
+            });
+
             if (noOfCellsCopied) {
                 this.instance.showToastMessage(message, 2);
             }

src/columnmanager.js

@@ -174,7 +174,11 @@ export default class ColumnManager {
 
         const onMouseMove = (e) => {
             if (!isDragging) return;
-            const finalWidth = startWidth + (e.pageX - startX);
+            let delta = e.pageX - startX;
+            if (this.options.direction === 'rtl') {
+                delta = -1 * delta;
+            }
+            const finalWidth = startWidth + delta;
             const {
                 colIndex
             } = $.data($resizingCell);

src/datatable.js

@@ -6,7 +6,8 @@ import RowManager from './rowmanager';
 import BodyRenderer from './body-renderer';
 import Style from './style';
 import Keyboard from './keyboard';
-import DEFAULT_OPTIONS from './defaults';
+import TranslationManager from './translationmanager';
+import getDefaultOptions from './defaults';
 
 let defaultComponents = {
     DataManager,
@@ -31,6 +32,8 @@ class DataTable {
             throw new Error('Invalid argument given for `wrapper`');
         }
 
+        this.initializeTranslations(options);
+        this.setDefaultOptions();
         this.buildOptions(options);
         this.prepare();
         this.initializeComponents();
@@ -41,23 +44,36 @@ class DataTable {
         }
     }
 
+    initializeTranslations(options) {
+        this.language = options.language || 'en';
+        this.translationManager = new TranslationManager(this.language);
+
+        if (options.translations) {
+            this.translationManager.addTranslations(options.translations);
+        }
+    }
+
+    setDefaultOptions() {
+        this.DEFAULT_OPTIONS = getDefaultOptions(this);
+    }
+
     buildOptions(options) {
         this.options = this.options || {};
 
         this.options = Object.assign(
-            {}, DEFAULT_OPTIONS,
+            {}, this.DEFAULT_OPTIONS,
             this.options || {}, options
         );
 
         options.headerDropdown = options.headerDropdown || [];
         this.options.headerDropdown = [
-            ...DEFAULT_OPTIONS.headerDropdown,
+            ...this.DEFAULT_OPTIONS.headerDropdown,
             ...options.headerDropdown
         ];
 
         // custom user events
         this.events = Object.assign(
-            {}, DEFAULT_OPTIONS.events,
+            {}, this.DEFAULT_OPTIONS.events,
             this.options.events || {},
             options.events || {}
         );
@@ -243,6 +259,10 @@ class DataTable {
             console.log.apply(console, arguments);
         }
     }
+
+    translate(str, args) {
+        return this.translationManager.translate(str, args);
+    }
 }
 
 DataTable.instances = 0;

src/defaults.js

@@ -1,71 +1,73 @@
 import filterRows from './filterRows';
 import icons from './icons';
 
-export default {
-    columns: [],
-    data: [],
-    dropdownButton: icons.chevronDown,
-    headerDropdown: [
-        {
-            label: 'Sort Ascending',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'asc');
+export default function getDefaultOptions(instance) {
+    return {
+        columns: [],
+        data: [],
+        dropdownButton: icons.chevronDown,
+        headerDropdown: [
+            {
+                label: instance.translate('Sort Ascending'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'asc');
+                }
+            },
+            {
+                label: instance.translate('Sort Descending'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'desc');
+                }
+            },
+            {
+                label: instance.translate('Reset sorting'),
+                action: function (column) {
+                    this.sortColumn(column.colIndex, 'none');
+                }
+            },
+            {
+                label: instance.translate('Remove column'),
+                action: function (column) {
+                    this.removeColumn(column.colIndex);
+                }
             }
+        ],
+        events: {
+            onRemoveColumn(column) {},
+            onSwitchColumn(column1, column2) {},
+            onSortColumn(column) {},
+            onCheckRow(row) {},
+            onDestroy() {}
         },
-        {
-            label: 'Sort Descending',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'desc');
-            }
+        hooks: {
+            columnTotal: null
         },
-        {
-            label: 'Reset sorting',
-            action: function (column) {
-                this.sortColumn(column.colIndex, 'none');
-            }
+        sortIndicator: {
+            asc: '↑',
+            desc: '↓',
+            none: ''
         },
-        {
-            label: 'Remove column',
-            action: function (column) {
-                this.removeColumn(column.colIndex);
-            }
-        }
-    ],
-    events: {
-        onRemoveColumn(column) {},
-        onSwitchColumn(column1, column2) {},
-        onSortColumn(column) {},
-        onCheckRow(row) {},
-        onDestroy() {}
-    },
-    hooks: {
-        columnTotal: null
-    },
-    sortIndicator: {
-        asc: '↑',
-        desc: '↓',
-        none: ''
-    },
-    overrideComponents: {
-        // ColumnManager: CustomColumnManager
-    },
-    filterRows: filterRows,
-    freezeMessage: '',
-    getEditor: null,
-    serialNoColumn: true,
-    checkboxColumn: false,
-    clusterize: true,
-    logs: false,
-    layout: 'fixed', // fixed, fluid, ratio
-    noDataMessage: 'No Data',
-    cellHeight: 40,
-    minimumColumnWidth: 30,
-    inlineFilters: false,
-    treeView: false,
-    checkedRowStatus: true,
-    dynamicRowHeight: false,
-    pasteFromClipboard: false,
-    showTotalRow: false,
-    direction: 'ltr',
-    disableReorderColumn: false
+        overrideComponents: {
+            // ColumnManager: CustomColumnManager
+        },
+        filterRows: filterRows,
+        freezeMessage: '',
+        getEditor: null,
+        serialNoColumn: true,
+        checkboxColumn: false,
+        clusterize: true,
+        logs: false,
+        layout: 'fixed', // fixed, fluid, ratio
+        noDataMessage: instance.translate('No Data'),
+        cellHeight: 40,
+        minimumColumnWidth: 30,
+        inlineFilters: false,
+        treeView: false,
+        checkedRowStatus: true,
+        dynamicRowHeight: false,
+        pasteFromClipboard: false,
+        showTotalRow: false,
+        direction: 'ltr',
+        disableReorderColumn: false
+    };
 };

src/rowmanager.js

@@ -133,7 +133,10 @@ export default class RowManager {
         const checkedRows = this.getCheckedRows();
         const count = checkedRows.length;
         if (count > 0) {
-            this.bodyRenderer.showToastMessage(`${count} row${count > 1 ? 's' : ''} selected`);
+            let message = this.instance.translate('{count} rows selected', {
+                count: count
+            });
+            this.bodyRenderer.showToastMessage(message);
         } else {
             this.bodyRenderer.clearToastMessage();
         }

src/style.css

@@ -164,6 +164,11 @@
     }
 }
 
+.datatable[dir=rtl] .dt-cell__resize-handle {
+    right: unset;
+    left: -3px;
+}
+
 .icon-open, .icon-close {
     width: 16px;
     height: 16px;

src/style.js

@@ -192,11 +192,6 @@ export default class Style {
 
             let naturalWidth = $.style($('.dt-cell__content', $cell), 'width');
 
-            if (column.id === '_rowIndex') {
-                naturalWidth = this.getRowIndexColumnWidth();
-                column.width = naturalWidth;
-            }
-
             if (typeof naturalWidth === 'number' && naturalWidth >= column.naturalWidth) {
                 column.naturalWidth = naturalWidth;
             } else {
@@ -245,6 +240,9 @@ export default class Style {
                     if (!column.width) {
                         column.width = column.naturalWidth;
                     }
+                    if (column.id === '_rowIndex') {
+                        column.width = this.getRowIndexColumnWidth();
+                    }
                     if (column.width < this.options.minimumColumnWidth) {
                         column.width = this.options.minimumColumnWidth;
                     }

src/translationmanager.js

@@ -0,0 +1,30 @@
+import { format } from './utils';
+import getTranslations from './translations';
+
+export default class TranslationManager {
+    constructor(language) {
+        this.language = language;
+        this.translations = getTranslations();
+    }
+
+    addTranslations(translations) {
+        this.translations = Object.assign(this.translations, translations);
+    }
+
+    translate(sourceText, args) {
+        let translation = (this.translations[this.language] &&
+            this.translations[this.language][sourceText]) || sourceText;
+
+        if (typeof translation === 'object') {
+            translation = args && args.count ?
+                this.getPluralizedTranslation(translation, args.count) :
+                sourceText;
+        }
+
+        return format(translation, args || {});
+    }
+
+    getPluralizedTranslation(translations, count) {
+        return translations[count] || translations['default'];
+    }
+};

src/translations/de.json

@@ -0,0 +1,15 @@
+{
+	"Sort Ascending": "Aufsteigend sortieren",
+	"Sort Descending": "Absteigend sortieren",
+	"Reset sorting": "Sortierung zurücksetzen",
+	"Remove column": "Spalte entfernen",
+	"No Data": "Keine Daten",
+	"{count} cells copied": {
+		"1": "{count} Zelle kopiert",
+		"default": "{count} Zellen kopiert"
+	},
+	"{count} rows selected": {
+		"1": "{count} Zeile ausgewählt",
+		"default": "{count} Zeilen ausgewählt"
+	}
+}

src/translations/en.json

@@ -0,0 +1,15 @@
+{
+	"Sort Ascending": "Sort Ascending",
+	"Sort Descending": "Sort Descending",
+	"Reset sorting": "Reset sorting",
+	"Remove column": "Remove column",
+	"No Data": "No Data",
+	"{count} cells copied": {
+		"1": "{count} cell copied",
+		"default": "{count} cells copied"
+	},
+	"{count} rows selected": {
+		"1": "{count} row selected",
+		"default": "{count} rows selected"
+	}
+}

src/translations/fr.json

@@ -0,0 +1,15 @@
+{
+	"Sort Ascending": "Trier par ordre croissant",
+	"Sort Descending": "Trier par ordre décroissant",
+	"Reset sorting": "Réinitialiser le tri",
+	"Remove column": "Supprimer colonne",
+	"No Data": "Pas de données",
+	"{count} cells copied": {
+		"1": "{count} cellule copiée",
+		"default": "{count} cellules copiées"
+	},
+	"{count} rows selected": {
+		"1": "{count} ligne sélectionnée",
+		"default": "{count} lignes sélectionnées"
+	}
+}

src/translations/index.js

@@ -0,0 +1,13 @@
+import en from './en.json';
+import de from './de.json';
+import fr from './fr.json';
+import it from './it.json';
+
+export default function getTranslations() {
+    return {
+        en,
+        de,
+        fr,
+        it,
+    };
+};

src/translations/it.json

@@ -0,0 +1,15 @@
+{
+	"Sort Ascending": "Ordinamento ascendente",
+	"Sort Descending": "Ordinamento decrescente",
+	"Reset sorting": "Azzeramento ordinamento",
+	"Remove column": "Rimuovi colonna",
+	"No Data": "Nessun dato",
+	"{count} cells copied": {
+		"1": "Copiato {count} cella",
+		"default": "{count} celle copiate"
+	},
+	"{count} rows selected": {
+		"1": "{count} linea selezionata",
+		"default": "{count} linee selezionate"
+	}
+}

src/utils.js

@@ -138,3 +138,14 @@ export function numberSortAsc(a, b) {
 export function stripHTML(html) {
     return html.replace(/<[^>]*>/g, '');
 };
+
+export function format(str, args) {
+    if (!str) return str;
+
+    Object.keys(args).forEach(arg => {
+        let regex = new RegExp(`{(${arg})}`, 'g');
+        str = str.replace(regex, args[arg]);
+    });
+
+    return str;
+};