Skip to content

Commit

Permalink
Merge pull request #598 from Neovici/feat/cosmoz-input
Browse files Browse the repository at this point in the history 
Replace paper-input with cosmoz-input
  • Loading branch information
@megheaiulian
megheaiulian authored Nov 22, 2023
2 parents 8564e2f + 8534150 commit 1d5e54a
Show file tree
Hide file tree
Showing 61 changed files with 10,289 additions and 9,222 deletions.
84 changes: 46 additions & 38 deletions cosmoz-omnitable-column-amount.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable no-return-assign */
import '@polymer/paper-input/paper-input';
import '@neovici/cosmoz-input';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
import './ui-helpers/cosmoz-clear-button';

Expand All @@ -9,7 +9,16 @@ import { html } from 'lit-html';
import { columnMixin } from './cosmoz-omnitable-column-mixin';
import { defaultComputeSource } from './lib/utils-data';
import './lib/cosmoz-omnitable-amount-range-input';
import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount';
import {
getComparableValue,
getCurrency,
applySingleFilter,
getString,
getInputString,
toAmount,
toHashString,
fromHashString,
} from './lib/utils-amount';
import { get } from '@polymer/polymer/lib/utils/path';

/**
Expand All @@ -29,13 +38,12 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
rates: { type: Object, notify: true },
width: { type: String, value: '70px' },
cellClass: { type: String, value: 'amount-cell align-right' },
headerCellClass: { type: String, value: 'amount-header-cell' }
headerCellClass: { type: String, value: 'amount-header-cell' },
};
}

getFilterFn(column, filter) {
const
min = getComparableValue({ ...column, valuePath: 'min' }, filter),
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
max = getComparableValue({ ...column, valuePath: 'max' }, filter);

if (min == null && max == null) {
Expand Down Expand Up @@ -64,8 +72,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
if (filter == null) {
return;
}
const
min = toAmount(rates, filter.min),
const min = toAmount(rates, filter.min),
max = toAmount(rates, filter.max);

if (min == null && max == null) {
Expand All @@ -86,51 +93,52 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {

return {
min: fromHashString(matches[1]),
max: fromHashString(matches[2])
max: fromHashString(matches[2]),
};
}

renderCell(column, { item }) {
return html`<span>${ column.getString(column, item) }</span>`;
return html`<span>${column.getString(column, item)}</span>`;
}

renderEditCell(column, { item }, onItemChange) {
const onChange = event => onItemChange({
amount: event.target.value,
currency: get(item, column.valuePath)?.currency
});

return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }>
<div slot="suffix">${ getCurrency(column, item) }</div>
</paper-input>`;
const onChange = (event) =>
onItemChange({
amount: event.target.value,
currency: get(item, column.valuePath)?.currency,
});

return html`<cosmoz-input
no-label-float
type="number"
@change=${onChange}
.value=${getInputString(column, item)}
>
<div slot="suffix">${getCurrency(column, item)}</div>
</cosmoz-input>`;
}

renderHeader(
{ title,
min,
max,
locale,
rates,
currency,
autoupdate,
autodetect },
{ title, min, max, locale, rates, currency, autoupdate, autodetect },
{ filter },
setState,
source
source,
) {
return html`<cosmoz-omnitable-amount-range-input
.title=${ title }
.filter=${ filter }
.values=${ source }
.rates=${ rates }
.min=${ min }
.max=${ max }
.locale=${ locale }
.currency=${ currency }
.autoupdate=${ autoupdate }
.autodetect=${ autodetect }
@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
.title=${title}
.filter=${filter}
.values=${source}
.rates=${rates}
.min=${min}
.max=${max}
.locale=${locale}
.currency=${currency}
.autoupdate=${autoupdate}
.autodetect=${autodetect}
@filter-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, filter: value }))}
@header-focused-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, headerFocused: value }))}
></cosmoz-omnitable-amount-range-input>`;
}

Expand Down
23 changes: 12 additions & 11 deletions cosmoz-omnitable-column-autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { get } from '@polymer/polymer/lib/utils/path';

export const getComparableValue = (
{ valuePath, textProperty, valueProperty },
item
item,
) => {
const property = textProperty ? strProp(textProperty) : prop(valueProperty),
values = array(valuePath && get(item, valuePath)).map(property);
Expand All @@ -33,7 +33,7 @@ export const getComparableValue = (
* @appliesMixin columnMixin
*/
class OmnitableColumnAutocomplete extends listColumnMixin(
columnMixin(PolymerElement)
columnMixin(PolymerElement),
) {
static get properties() {
return {
Expand Down Expand Up @@ -63,12 +63,12 @@ class OmnitableColumnAutocomplete extends listColumnMixin(

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

renderHeader(column, { filter, query }, setState, source) {
Expand All @@ -89,12 +89,13 @@ class OmnitableColumnAutocomplete extends listColumnMixin(
.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 All @@ -105,5 +106,5 @@ class OmnitableColumnAutocomplete extends listColumnMixin(
}
customElements.define(
'cosmoz-omnitable-column-autocomplete',
OmnitableColumnAutocomplete
OmnitableColumnAutocomplete,
);
6 changes: 3 additions & 3 deletions cosmoz-omnitable-column-date.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable no-return-assign */
import '@polymer/paper-input/paper-input';
import '@neovici/cosmoz-input';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';

import './ui-helpers/cosmoz-clear-button';
Expand Down Expand Up @@ -88,12 +88,12 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
renderEditCell(column, { item }, onItemChange) {
const onChange = event => onItemChange(fromInputString(event.target.value));

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

renderHeader(
Expand Down
2 changes: 1 addition & 1 deletion cosmoz-omnitable-column-datetime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {

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

// eslint-disable-next-line max-lines-per-function
Expand Down
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
66 changes: 41 additions & 25 deletions cosmoz-omnitable-column-number.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import '@polymer/paper-input/paper-input';
import '@neovici/cosmoz-input';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
import './ui-helpers/cosmoz-clear-button';

Expand All @@ -9,10 +9,16 @@ import { columnMixin } from './cosmoz-omnitable-column-mixin';

import './lib/cosmoz-omnitable-number-range-input';
import { defaultComputeSource } from './lib/utils-data';
import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number';
import {
applySingleFilter,
getComparableValue,
getInputString,
getString,
toHashString,
toNumber,
} from './lib/utils-number';
import { get } from '@polymer/polymer/lib/utils/path';


/**
* @polymer
* @customElement
Expand All @@ -30,13 +36,12 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
minWidth: { type: String, value: '30px' },
headerCellClass: { type: String, value: 'number-header-cell' },
maximumFractionDigits: { type: Number, value: null },
minimumFractionDigits: { type: Number, value: null } // browser default 0 for numbers, currency-specific or 2 for currency
minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency
};
}

getFilterFn(column, filter) {
const
min = getComparableValue({ ...column, valuePath: 'min' }, filter),
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
max = getComparableValue({ ...column, valuePath: 'max' }, filter);

if (min == null && max == null) {
Expand Down Expand Up @@ -86,44 +91,55 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {

return {
min: toNumber(matches[1]),
max: toNumber(matches[2])
max: toNumber(matches[2]),
};
}

renderCell(column, { item }) {
return html`<div class="omnitable-cell-number">${ getString(column, item) }</div>`;
return html`<div class="omnitable-cell-number">
${getString(column, item)}
</div>`;
}

renderEditCell(column, { item }, onItemChange) {
const onChange = event => onItemChange(event.target.value);

return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }></paper-input>`;
const onChange = (event) => onItemChange(event.target.value);

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

renderHeader(
{ title,
{
title,
min,
max,
locale,
maximumFractionDigits,
minimumFractionDigits,
autoupdate },
autoupdate,
},
{ filter },
setState,
source
source,
) {
return html`<cosmoz-omnitable-number-range-input
.title=${ title }
.filter=${ filter }
.values=${ source }
.min=${ min }
.max=${ max }
.locale=${ locale }
.maximumFractionDigits=${ maximumFractionDigits }
.minimumFractionDigsits=${ minimumFractionDigits }
.autoupdate=${ autoupdate }
@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
.title=${title}
.filter=${filter}
.values=${source}
.min=${min}
.max=${max}
.locale=${locale}
.maximumFractionDigits=${maximumFractionDigits}
.minimumFractionDigsits=${minimumFractionDigits}
.autoupdate=${autoupdate}
@filter-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, filter: value }))}
@header-focused-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, headerFocused: value }))}
></cosmoz-omnitable-number-range-input>`;
}

Expand Down
Loading

0 comments on commit 1d5e54a

Please sign in to comment.