feat: replace paper-input with cosmoz-input in text column

Neovici · Nov 21, 2023 · bb83d80 · bb83d80
1 parent 8564e2f
commit bb83d80
Show file tree

Hide file tree

Showing 6 changed files with 2,518 additions and 2,908 deletions.
diff --git a/cosmoz-omnitable-column.js b/cosmoz-omnitable-column.js
@@ -3,39 +3,41 @@ import '@polymer/iron-icon/iron-icon';
 import '@polymer/paper-input/paper-input';
 import './ui-helpers/cosmoz-clear-button';
 
-import { applySingleFilter, columnMixin, getString } from './cosmoz-omnitable-column-mixin';
+import {
+	applySingleFilter,
+	columnMixin,
+	getString,
+} from './cosmoz-omnitable-column-mixin';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 
-const
-	onChange = setState => event => setState(state => {
-		// skip the event emitted during paper-input initialization 
-		if(state.inputValue === undefined && event.target.value === '') {
-			return state;
-		}
-
-		clearTimeout(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 })),
+const onChange = (setState) => (event) =>
+		setState((state) => {
+			// skip the event emitted during paper-input initialization
+			if (state.inputValue === undefined && event.target.value === '') {
+				return state;
+			}
 
-	onKeyDown = setState => event => {
+			clearTimeout(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 }));
+			setState((state) => ({ ...state, filter: state.inputValue }));
 		}
 	},
-
-	onFocus = setState => event =>
-		setState(state => ({ ...state, headerFocused: event.detail.value })),
-
-	resetFilter = setState => () =>
-		setState(state => ({ ...state, filter: null, inputValue: null })),
-
-	hasFilter = filter => filter != null && filter !== '';
+	onFocus = (setState) => (event) =>
+		setState((state) => ({ ...state, headerFocused: event.detail.value })),
+	resetFilter = (setState) => () =>
+		setState((state) => ({ ...state, filter: null, inputValue: null })),
+	hasFilter = (filter) => filter != null && filter !== '';
 
 /**
  * @polymer
@@ -47,7 +49,7 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
 		return {
 			minWidth: { type: String, value: '55px' },
 			editMinWidth: { type: String, value: '55px' },
-			inputValue: { type: Object, notify: true }
+			inputValue: { type: Object, notify: true },
 		};
 	}
 
@@ -59,26 +61,37 @@ class OmnitableColumn extends columnMixin(PolymerElement) {
 	}
 
 	renderCell(column, { item }) {
-		return html`<span class="default-column">${ getString(column, item) }</span>`;
+		return html`<span class="default-column">${getString(column, item)}</span>`;
 	}
 
 	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>`;
+		const onChange = (event) => onItemChange(event.target.value);
+		return html`<cosmoz-input
+			no-label-float
+			type="text"
+			@change=${onChange}
+			.value=${getString(column, item)}
+		></cosmoz-input>`;
 	}
 
 	renderHeader(column, { filter, inputValue, headerFocused }, setState) {
-		return html`<paper-input
-			label=${ column.title }
-			.value=${ inputValue ?? filter }
-			@value-changed=${ onChange(setState) }
-			focused=${ headerFocused }
-			@focused-changed=${ onFocus(setState) }
-			@keydown=${ onKeyDown(setState) }
-			@blur=${ onBlur(setState) }
+		return html`<cosmoz-input
+			.label=${column.title}
+			.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=${ hasFilter(filter) } light @click=${ resetFilter(setState) }></cosmoz-clear-button>
-		</paper-input>`;
+			<cosmoz-clear-button
+				suffix
+				slot="suffix"
+				?visible=${hasFilter(filter)}
+				light
+				@click=${resetFilter(setState)}
+			></cosmoz-clear-button>
+		</cosmoz-input>`;
 	}
 
 	legacyFilterToState(filter) {

diff --git a/cosmoz-omnitable-styles.js b/cosmoz-omnitable-styles.js
@@ -518,7 +518,7 @@ export default css`
 		display: inline-flex;
 		position: relative;
 	}
-	.header-cell :not(.sg) {
+	.header-cell :not(.sg,cosmoz-clear-button) {
 		min-width: 0;
 		flex: auto;
 	}