Skip to content

Commit

Permalink
feat(number-range-input): replace paper-input
Browse files Browse the repository at this point in the history
  • Loading branch information
@megheaiulian
megheaiulian committed Nov 21, 2023
1 parent d9223d1 commit 7dd61fc
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 111 deletions.
19 changes: 10 additions & 9 deletions cosmoz-omnitable-column-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,12 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
const onChange = (event) =>
onItemChange(event.target.value.split(/,\s*/gu));

return html`<paper-input
return html`<cosmoz-input
no-label-float
type="text"
@change=${onChange}
.value=${getString(column, item)}
></paper-input>`;
@change=${onChange}
></cosmoz-input>`;
}

renderHeader(column, { filter, query }, setState, source) {
Expand All @@ -79,12 +79,13 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
.onText=${onText(setState)}
>${when(
column.loading,
() => html`<paper-spinner-lite
style="width: 20px; height: 20px; flex:none;"
suffix
slot="suffix"
active
></paper-spinner-lite>`
() =>
html`<paper-spinner-lite
style="width: 20px; height: 20px; flex:none;"
suffix
slot="suffix"
active
></paper-spinner-lite>`,
)}</cosmoz-autocomplete-ui
>`;
}
Expand Down
113 changes: 50 additions & 63 deletions lib/cosmoz-omnitable-number-range-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,33 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
import { polymerHauntedRender } from './polymer-haunted-render-mixin';

class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerElement)) {
class NumberRangeInput extends rangeInputMixin(
polymerHauntedRender(PolymerElement),
) {
static get properties() {
return {
maximumFractionDigits: { type: Number, value: null },
minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency
formatter: {
type: Object,
computed: '_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)'
computed:
'_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)',
},
// trigger filter updates manually
autoupdate: {
type: String,
value: false
value: false,
},
_filterText: {
type: String,
computed: '_computeFilterText(filter.*, formatter)'
}
computed: '_computeFilterText(filter.*, formatter)',
},
};
}

// eslint-disable-next-line max-lines-per-function
render() {
const onOpenedChanged = event => {
const onOpenedChanged = (event) => {
this.headerFocused = event.detail.value;
this._onDropdownOpenedChanged(event);
};
Expand All @@ -41,54 +44,59 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
}
</style>
<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
<cosmoz-clear-button
@click=${() => this.resetFilter()}
?visible=${this.hasFilter()}
></cosmoz-clear-button>
<paper-dropdown-menu
label=${ this.title }
placeholder=${ ifDefined(this._filterText) }
class="external-values-${ this.externalValues }"
title=${ this._tooltip }
label=${this.title}
placeholder=${ifDefined(this._filterText)}
class="external-values-${this.externalValues}"
title=${this._tooltip}
horizontal-align="right"
?opened=${ this.headerFocused }
@opened-changed=${ onOpenedChanged }
?opened=${this.headerFocused}
@opened-changed=${onOpenedChanged}
>
<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
<h3 style="margin: 0;">${ this.title }</h3>
<paper-input
class=${ this._fromClasses }
<div
class="dropdown-content"
slot="dropdown-content"
style="padding: 15px; min-width: 100px;"
>
<h3 style="margin: 0;">${this.title}</h3>
<cosmoz-input
class=${this._fromClasses}
type="number"
label=${ _('From') }
.value=${ this._filterInput?.min }
@value-changed=${ event => {
this.set('_filterInput.min', event.detail.value);
} }
@input=${ event => this.onBadInputFloatLabel(event) }
@blur=${ event => this._onBlur(event) }
@keydown=${ event => this._onKeyDown(event) }
min=${ this._toInputString(this._limit.fromMin) }
max=${ this._toInputString(this._limit.fromMax) }
></paper-input>
<paper-input
class=${ this._toClasses }
.label=${_('From')}
.value=${this._filterInput?.min}
@value-changed=${(event) => {
this.set('_filterInput.min', event.detail.value);
}}
@blur=${(event) => this._onBlur(event)}
@keydown=${(event) => this._onKeyDown(event)}
min=${this._toInputString(this._limit.fromMin)}
max=${this._toInputString(this._limit.fromMax)}
></cosmoz-input>
<cosmoz-input
class=${this._toClasses}
type="number"
label=${ _('To') }
.value=${ this._filterInput?.max }
@value-changed=${ event => {
this.set('_filterInput.max', event.detail.value);
} }
@input=${ event => this.onBadInputFloatLabel(event) }
@blur=${ event => this._onBlur(event) }
@keydown=${ event => this._onKeyDown(event) }
min=${ this._toInputString(this._limit.toMin) }
max=${ this._toInputString(this._limit.toMax) }
></paper-input>
.label=${_('To')}
.value=${this._filterInput?.max}
@value-changed=${(event) => {
this.set('_filterInput.max', event.detail.value);
}}
@blur=${(event) => this._onBlur(event)}
@keydown=${(event) => this._onKeyDown(event)}
min=${this._toInputString(this._limit.toMin)}
max=${this._toInputString(this._limit.toMax)}
></cosmoz-input>
</div>
</paper-dropdown-menu>
`;
}

_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits) {
const options = {
localeMatcher: 'best fit' // chrome expects this when using custom options
localeMatcher: 'best fit', // chrome expects this when using custom options
};
if (minimumFractionDigits !== null) {
options.minimumFractionDigits = minimumFractionDigits;
Expand All @@ -99,26 +107,6 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
return new Intl.NumberFormat(locale || undefined, options);
}

/**
* Check if label should float based on validity
*
* Number inputs can have allowed characters that aren't numbers (-,e) and won't
* trigger a value change and thus not float the label.
* However, the validity will report badInput so we can trigger a label float by
* setting it to something truthy but still not visible.
* Fixed in paper-input 3.x
*
* @param {Event} event KeyboardEvent
* @returns {void}
*/
onBadInputFloatLabel(event) {
const paperInput = event.currentTarget;
if (paperInput == null || paperInput.tagName !== 'PAPER-INPUT') {
return;
}
paperInput.placeholder = paperInput.$.nativeInput.validity.badInput ? ' ' : '';
}

/**
* Get the comparable value of an item.
*
Expand Down Expand Up @@ -155,5 +143,4 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme
}
}


customElements.define('cosmoz-omnitable-number-range-input', NumberRangeInput);
4 changes: 2 additions & 2 deletions lib/cosmoz-omnitable-range-input-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func

_onKeyDown(event) {
const input = event.currentTarget,
inputs = Array.from(input.parentElement.querySelectorAll('paper-input')),
inputs = Array.from(input.parentElement.querySelectorAll('paper-input, cosmoz-input')),
nextInput = inputs[inputs.findIndex(i => i === input) + 1],
isLastInput = !nextInput,
isFirstInput = inputs[0] === input;
Expand Down Expand Up @@ -349,7 +349,7 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
}

// focus the first input after the dropdown is visible
setTimeout(() => currentTarget.querySelector('paper-input').focus(), 100);
setTimeout(() => currentTarget.querySelector('paper-input, cosmoz-input').focus(), 100);
}


Expand Down
37 changes: 0 additions & 37 deletions test/range.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,43 +216,6 @@ suite('number', () => {
'Expected item coresponding to the age: 46.7511 to be in the filtered items.',
);
});

test("make sure onBadInputFloatLabel doesn't explode", () => {
assert.strictEqual(
columnHeaderInput.onBadInputFloatLabel(new InputEvent('input')),
undefined,
);
});

test('float label on invalid input', async () => {
await nextFrame(); // give lit time to render the columns
const filterMenu = columnHeaderInput.root.querySelector(
'paper-dropdown-menu',
),
isFloating = (element) =>
element.$.container.$.labelAndInputContainer.classList.contains(
'label-is-floating',
),
inputEvent = new InputEvent('input');

filterMenu.noAnimations = true;
assert.isFalse(filterMenu.opened);
filterMenu.click();
const [from, to] = filterMenu.querySelectorAll('paper-input');
assert.isFalse(isFloating(from));
assert.isFalse(isFloating(to));

from.value = 'e';
to.value = 'e';
flush();
await nextFrame();

assert.isTrue(filterMenu.opened);
from.dispatchEvent(inputEvent);
to.dispatchEvent(inputEvent);
assert.isTrue(isFloating(from));
assert.isTrue(isFloating(to));
});
});

suite('number - pure functions', () => {
Expand Down

0 comments on commit 7dd61fc

Please sign in to comment.