@neovici/cosmoz-omnitable 7.2.1 → 8.0.0-beta.3

package/cosmoz-omnitable-column.js

@@ -3,121 +3,77 @@ import '@polymer/iron-icon/iron-icon';
 import '@polymer/paper-input/paper-input';
 import './ui-helpers/cosmoz-clear-button';
 
-import { columnMixin } from './cosmoz-omnitable-column-mixin';
+import { applySingleFilter, columnMixin, getString } from './cosmoz-omnitable-column-mixin';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { timeOut } from '@polymer/polymer/lib/utils/async.js';
-import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
-import { enqueueDebouncer } from '@polymer/polymer/lib/utils/flush.js';
 import { html } from 'lit-html';
 
+const
+	onChange = setState => event => setState(state => {
+		clearInterval(state.t);
+		const t = setTimeout(() => setState(state => ({ ...state, filter: state.inputValue })), 1000);
+		return { ...state, inputValue: event.target.value, t };
+	}),
+
+	onBlur = setState => () =>
+		setState(state => ({ ...state, filter: state.inputValue })),
+
+	onKeyDown = setState => event => {
+		if (event.keyCode === 13) {
+			event.preventDefault();
+			setState(state => ({ ...state, filter: state.inputValue }));
+		}
+	},
+
+	onFocus = setState => event =>
+		setState(state => ({ ...state, headerFocused: event.detail.value })),
+
+	resetFilter = setState => () =>
+		setState(state => ({ ...state, filter: undefined, inputValue: undefined })),
+
+	hasFilter = filter => filter != null && filter !== '';
+
 /**
  * @polymer
  * @customElement
  * @appliesMixin columnMixin
  */
 class OmnitableColumn extends columnMixin(PolymerElement) {
-	static get is() {
-		return 'cosmoz-omnitable-column';
-	}
-
 	static get properties() {
 		return {
-			minWidth: {
-				type: String,
-				value: '55px'
-			},
-
-			editMinWidth: {
-				type: String,
-				value: '55px'
-			},
-
-			inputValue: {
-				type: Object,
-				notify: true,
-				value() {
-					return this._getDefaultFilter();
-				},
-				observer: '_inputValueValueChanged'
-			},
-
-			_timeForNoInput: {
-				type: Number,
-				value: 1000
-			}
+			minWidth: { type: String, value: '55px' },
+			editMinWidth: { type: String, value: '55px' },
+			inputValue: { type: Object, notify: true }
 		};
 	}
 
+	getFilterFn(column, filter) {
+		if (filter == null || filter === '') {
+			return;
+		}
+		return applySingleFilter(column, filter);
+	}
+
 	renderCell(column, { item }) {
-		return html`<span class="default-column">${ column.getString(item, column.valuePath) }</span>`;
+		return html`<span class="default-column">${ getString(column, item) }</span>`;
 	}
 
-	renderEditCell(column, { item }) {
-		const onChange = event => {
-			event.model = { item };
-			return column._valueChanged(event);
-		};
-		return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ column.getString(item, column.valuePath) }></paper-input>`;
+	renderEditCell(column, { item }, onItemChange) {
+		const onChange = event => onItemChange(event.target.value);
+		return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></paper-input>`;
 	}
 
-	renderHeader(column) {
+	renderHeader(column, { filter, inputValue, headerFocused }, setState) {
 		return html`<paper-input
 			label=${ column.title }
-			.value=${ column.inputValue }
-			@value-changed=${ event => column.inputValue = event.target.value }
-			focused=${ column.headerFocused }
-			@focused-changed=${ event => column.headerFocused = event.detail.value }
-			@keydown=${ column._onKeyDown }
-			@blur=${ column._onBlur }
+			.value=${ inputValue ?? filter }
+			@value-changed=${ onChange(setState) }
+			focused=${ headerFocused }
+			@focused-changed=${ onFocus(setState) }
+			@keydown=${ onKeyDown(setState) }
+			@blur=${ onBlur(setState) }
 		>
-			<cosmoz-clear-button suffix slot="suffix" ?visible=${ column.hasFilter() } light @click=${ () => column.resetFilter() }></cosmoz-clear-button>
+			<cosmoz-clear-button suffix slot="suffix" ?visible=${ hasFilter(filter) } light @click=${ resetFilter(setState) }></cosmoz-clear-button>
 		</paper-input>`;
 	}
-
-	_serializeFilter(filter = this.filter) {
-		return filter || null;
-	}
-
-	_deserializeFilter(obj) {
-		return obj || null;
-	}
-
-	resetFilter() {
-		this.filter = null;
-		this.inputValue = null;
-	}
-
-	__filterChanged(change) {
-		super.__filterChanged(change);
-		if (change.value != null && change.value !== this.inputValue) {
-			this.inputValue = change.value;
-		}
-	}
-
-	_onBlur() {
-		this.filter = this.inputValue;
-	}
-
-	_onKeyDown(event) {
-		switch (event.keyCode) {
-		case 13: // Enter
-			event.preventDefault();
-			this.filter = this.inputValue;
-			break;
-		}
-	}
-
-	_inputValueValueChanged() {
-		if (this.inputValue === '') {
-			this.filter = this.inputValue;
-			return;
-		}
-		this._debouncer = Debouncer.debounce(this._debouncer,
-			timeOut.after(this._timeForNoInput),
-			() => {
-				this.filter = this.inputValue;
-			});
-		enqueueDebouncer(this._debouncer);
-	}
 }
-customElements.define(OmnitableColumn.is, OmnitableColumn);
+customElements.define('cosmoz-omnitable-column', OmnitableColumn);

package/cosmoz-omnitable-group-row.js

@@ -1,11 +1,7 @@
-import { component, useMemo } from 'haunted';
+import { component } from 'haunted';
 import { nothing } from 'lit-html';
-import { useRenderOnColumnUpdates } from './lib/use-render-on-column-updates';
 
 const GroupRow = ({ column, item, selected, folded }) => {
-	const columns = useMemo(() => column ? [column] : [], [column]);
-	useRenderOnColumnUpdates(columns);
-
 	if (!column) {
 		return nothing;
 	}

package/cosmoz-omnitable-header-row.js

@@ -1,18 +1,22 @@
 /* eslint-disable object-curly-newline */
 import { html, component } from 'haunted';
 import { repeat } from 'lit-html/directives/repeat';
-import { useRenderOnColumnUpdates } from './lib/use-render-on-column-updates';
 import './lib/cosmoz-omnitable-resize-nub';
 
 const
-	renderHeaderRow = ({ columns, groupOnColumn }) => {
+	renderHeaderRow = ({ data, columns, groupOnColumn, filters, setFilterState }) => {
 		return repeat(columns, column => column.name, column => [
 			html`<div
 				class="cell ${ column.headerCellClass } header-cell"
 				?hidden=${ column === groupOnColumn }
 				title=${ column.title }
 				name=${ column.name }
-			>${ column.renderHeader(column) }</div>`,
+			>${ column.renderHeader(
+		column,
+		filters[column.name] ?? {},
+		state => setFilterState(column.name, state),
+		column.source(column, data)
+	) }</div>`,
 			html`<cosmoz-omnitable-resize-nub
 				.column=${ column }
 				name=${ column.name }
@@ -20,9 +24,8 @@ const
 		]);
 	},
 
-	HeaderRow = ({ columns, groupOnColumn, content }) => {
-		useRenderOnColumnUpdates(columns);
-		return [columns && renderHeaderRow({ columns, groupOnColumn }), content];
+	HeaderRow = ({ data, columns, groupOnColumn, content, filters, setFilterState }) => {
+		return [columns && renderHeaderRow({ data, columns, groupOnColumn, filters, setFilterState }), content];
 	};
 
 customElements.define('cosmoz-omnitable-header-row', component(HeaderRow, { useShadowDOM: false }));

package/cosmoz-omnitable-item-expand.js

@@ -3,7 +3,6 @@ import { component, useEffect } from 'haunted';
 import {
 	html, nothing
 } from 'lit-html';
-import { useRenderOnColumnUpdates } from './lib/use-render-on-column-updates';
 import './cosmoz-omnitable-item-expand-line';
 
 const
@@ -15,8 +14,6 @@ const
 		>${ column.renderCell(column, { item, selected, expanded }) }</cosmoz-omnitable-item-expand-line>`),
 
 	ExpandList = host => {
-		useRenderOnColumnUpdates(host.columns);
-
 		useEffect(() => {
 			if (host.columns?.length > 0) {
 				return;

package/cosmoz-omnitable-item-row.js

@@ -1,22 +1,19 @@
 import { component, html } from 'haunted';
 import { repeat } from 'lit-html/directives/repeat';
-import { useRenderOnColumnUpdates } from './lib/use-render-on-column-updates';
 
 const
-	renderCell = (column, data) => column.editable
-		? column.renderEditCell(column, data)
+	renderCell = (column, data, onItemChange) => column.editable
+		? column.renderEditCell(column, data, onItemChange(column, data.item))
 		: column.renderCell(column, data),
-	ItemRow = ({ columns, groupOnColumn, item, selected, expanded }) => {
-		useRenderOnColumnUpdates(columns);
-
+	ItemRow = ({ columns, groupOnColumn, item, selected, expanded, onItemChange }) => {
 		return repeat(columns, column => column.name, column => {
 			return html`<div
 				class="cell itemRow-cell ${ column.cellClass ?? '' }"
 				?hidden=${ column === groupOnColumn }
 				?editable=${ column.editable }
-				title=${ column.cellTitleFn(item, column.valuePath) }
+				title=${ column.cellTitleFn(column, item) }
 				name=${ column.name }
-			>${ renderCell(column, { item, selected, expanded }) }</div>`;
+			>${ renderCell(column, { item, selected, expanded }, onItemChange) }</div>`;
 		});
 	};
 

package/cosmoz-omnitable-styles.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 const checkbox = `
 	.checkbox {
 		box-sizing: border-box;
@@ -21,7 +22,7 @@ const checkbox = `
 	}
 
 	.checkbox:checked {
-		background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+		background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 		box-shadow: none;
 	}
 
@@ -62,7 +63,7 @@ const checkbox = `
 		height: 2px;
 		left: 4px;
 		top: 8px;
-	    background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+	  background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 	}
 `;
 
@@ -281,7 +282,7 @@ export default `<style>
 		display: flex;
 		align-items: center;
 		border-top: solid 1px #e8e8e8;
-		background-color: #f5f5f5;
+		background-color: var(--cosmoz-omnitable-footer-bg-color, #f5f5f5);
 		min-height: 25px;
 		height: 63px;
 		margin-bottom: 1px; /* Chrome overflow rendering bug? When only component in a view */
@@ -336,11 +337,6 @@ export default `<style>
 		@apply --cosmoz-omnitable-selected-row;
 	}
 
-	.itemRow[highlighted] {
-		background-color: rgba(195, 212, 248, 0.5);
-		@apply --cosmoz-omnitable-hightlighted-row;
-	}
-
 	.tableContent .itemRow-cell paper-dropdown-menu {
 		margin-top:-20px;
 	}