Skip to content

Commit 1d5e54a

Browse files
megheaiulianmegheaiulian
authored
Merge pull request #598 from Neovici/feat/cosmoz-input
Replace paper-input with cosmoz-input
2 parents 8564e2f + 8534150 commit 1d5e54a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+10289
-9222
lines changed

‎cosmoz-omnitable-column-amount.js

+46-38
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable no-return-assign */
2-
import '@polymer/paper-input/paper-input';
2+
import '@neovici/cosmoz-input';
33
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
44
import './ui-helpers/cosmoz-clear-button';
55

@@ -9,7 +9,16 @@ import { html } from 'lit-html';
99
import { columnMixin } from './cosmoz-omnitable-column-mixin';
1010
import { defaultComputeSource } from './lib/utils-data';
1111
import './lib/cosmoz-omnitable-amount-range-input';
12-
import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount';
12+
import {
13+
getComparableValue,
14+
getCurrency,
15+
applySingleFilter,
16+
getString,
17+
getInputString,
18+
toAmount,
19+
toHashString,
20+
fromHashString,
21+
} from './lib/utils-amount';
1322
import { get } from '@polymer/polymer/lib/utils/path';
1423

1524
/**
@@ -29,13 +38,12 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
2938
rates: { type: Object, notify: true },
3039
width: { type: String, value: '70px' },
3140
cellClass: { type: String, value: 'amount-cell align-right' },
32-
headerCellClass: { type: String, value: 'amount-header-cell' }
41+
headerCellClass: { type: String, value: 'amount-header-cell' },
3342
};
3443
}
3544

3645
getFilterFn(column, filter) {
37-
const
38-
min = getComparableValue({ ...column, valuePath: 'min' }, filter),
46+
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
3947
max = getComparableValue({ ...column, valuePath: 'max' }, filter);
4048

4149
if (min == null && max == null) {
@@ -64,8 +72,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
6472
if (filter == null) {
6573
return;
6674
}
67-
const
68-
min = toAmount(rates, filter.min),
75+
const min = toAmount(rates, filter.min),
6976
max = toAmount(rates, filter.max);
7077

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

8794
return {
8895
min: fromHashString(matches[1]),
89-
max: fromHashString(matches[2])
96+
max: fromHashString(matches[2]),
9097
};
9198
}
9299

93100
renderCell(column, { item }) {
94-
return html`<span>${ column.getString(column, item) }</span>`;
101+
return html`<span>${column.getString(column, item)}</span>`;
95102
}
96103

97104
renderEditCell(column, { item }, onItemChange) {
98-
const onChange = event => onItemChange({
99-
amount: event.target.value,
100-
currency: get(item, column.valuePath)?.currency
101-
});
102-
103-
return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }>
104-
<div slot="suffix">${ getCurrency(column, item) }</div>
105-
</paper-input>`;
105+
const onChange = (event) =>
106+
onItemChange({
107+
amount: event.target.value,
108+
currency: get(item, column.valuePath)?.currency,
109+
});
110+
111+
return html`<cosmoz-input
112+
no-label-float
113+
type="number"
114+
@change=${onChange}
115+
.value=${getInputString(column, item)}
116+
>
117+
<div slot="suffix">${getCurrency(column, item)}</div>
118+
</cosmoz-input>`;
106119
}
107120

108121
renderHeader(
109-
{ title,
110-
min,
111-
max,
112-
locale,
113-
rates,
114-
currency,
115-
autoupdate,
116-
autodetect },
122+
{ title, min, max, locale, rates, currency, autoupdate, autodetect },
117123
{ filter },
118124
setState,
119-
source
125+
source,
120126
) {
121127
return html`<cosmoz-omnitable-amount-range-input
122-
.title=${ title }
123-
.filter=${ filter }
124-
.values=${ source }
125-
.rates=${ rates }
126-
.min=${ min }
127-
.max=${ max }
128-
.locale=${ locale }
129-
.currency=${ currency }
130-
.autoupdate=${ autoupdate }
131-
.autodetect=${ autodetect }
132-
@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
133-
@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
128+
.title=${title}
129+
.filter=${filter}
130+
.values=${source}
131+
.rates=${rates}
132+
.min=${min}
133+
.max=${max}
134+
.locale=${locale}
135+
.currency=${currency}
136+
.autoupdate=${autoupdate}
137+
.autodetect=${autodetect}
138+
@filter-changed=${({ detail: { value } }) =>
139+
setState((state) => ({ ...state, filter: value }))}
140+
@header-focused-changed=${({ detail: { value } }) =>
141+
setState((state) => ({ ...state, headerFocused: value }))}
134142
></cosmoz-omnitable-amount-range-input>`;
135143
}
136144

‎cosmoz-omnitable-column-autocomplete.js

+12-11
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { get } from '@polymer/polymer/lib/utils/path';
2020

2121
export const getComparableValue = (
2222
{ valuePath, textProperty, valueProperty },
23-
item
23+
item,
2424
) => {
2525
const property = textProperty ? strProp(textProperty) : prop(valueProperty),
2626
values = array(valuePath && get(item, valuePath)).map(property);
@@ -33,7 +33,7 @@ export const getComparableValue = (
3333
* @appliesMixin columnMixin
3434
*/
3535
class OmnitableColumnAutocomplete extends listColumnMixin(
36-
columnMixin(PolymerElement)
36+
columnMixin(PolymerElement),
3737
) {
3838
static get properties() {
3939
return {
@@ -63,12 +63,12 @@ class OmnitableColumnAutocomplete extends listColumnMixin(
6363

6464
renderEditCell(column, { item }, onItemChange) {
6565
const onChange = (event) => onItemChange(event.target.value);
66-
return html`<paper-input
66+
return html`<cosmoz-input
6767
no-label-float
6868
type="text"
6969
@change=${onChange}
7070
.value=${getString(column, item)}
71-
></paper-input>`;
71+
></cosmoz-input>`;
7272
}
7373

7474
renderHeader(column, { filter, query }, setState, source) {
@@ -89,12 +89,13 @@ class OmnitableColumnAutocomplete extends listColumnMixin(
8989
.onText=${onText(setState)}
9090
>${when(
9191
column.loading,
92-
() => html`<paper-spinner-lite
93-
style="width: 20px; height: 20px; flex:none;"
94-
suffix
95-
slot="suffix"
96-
active
97-
></paper-spinner-lite>`
92+
() =>
93+
html`<paper-spinner-lite
94+
style="width: 20px; height: 20px; flex:none;"
95+
suffix
96+
slot="suffix"
97+
active
98+
></paper-spinner-lite>`,
9899
)}</cosmoz-autocomplete-ui
99100
>`;
100101
}
@@ -105,5 +106,5 @@ class OmnitableColumnAutocomplete extends listColumnMixin(
105106
}
106107
customElements.define(
107108
'cosmoz-omnitable-column-autocomplete',
108-
OmnitableColumnAutocomplete
109+
OmnitableColumnAutocomplete,
109110
);

‎cosmoz-omnitable-column-date.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable no-return-assign */
2-
import '@polymer/paper-input/paper-input';
2+
import '@neovici/cosmoz-input';
33
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
44

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

91-
return html`<paper-input
91+
return html`<cosmoz-input
9292
no-label-float
9393
type="date"
9494
@change=${ onChange }
9595
.value=${ getInputString(column, item) }
96-
></paper-input>`;
96+
></cosmoz-input>`;
9797
}
9898

9999
renderHeader(

‎cosmoz-omnitable-column-datetime.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
9696

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

102102
// eslint-disable-next-line max-lines-per-function

‎cosmoz-omnitable-column-list.js

+10-9
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
5252
const onChange = (event) =>
5353
onItemChange(event.target.value.split(/,\s*/gu));
5454

55-
return html`<paper-input
55+
return html`<cosmoz-input
5656
no-label-float
5757
type="text"
58-
@change=${onChange}
5958
.value=${getString(column, item)}
60-
></paper-input>`;
59+
@change=${onChange}
60+
></cosmoz-input>`;
6161
}
6262

6363
renderHeader(column, { filter, query }, setState, source) {
@@ -79,12 +79,13 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
7979
.onText=${onText(setState)}
8080
>${when(
8181
column.loading,
82-
() => html`<paper-spinner-lite
83-
style="width: 20px; height: 20px; flex:none;"
84-
suffix
85-
slot="suffix"
86-
active
87-
></paper-spinner-lite>`
82+
() =>
83+
html`<paper-spinner-lite
84+
style="width: 20px; height: 20px; flex:none;"
85+
suffix
86+
slot="suffix"
87+
active
88+
></paper-spinner-lite>`,
8889
)}</cosmoz-autocomplete-ui
8990
>`;
9091
}

‎cosmoz-omnitable-column-number.js

+41-25
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import '@polymer/paper-input/paper-input';
1+
import '@neovici/cosmoz-input';
22
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
33
import './ui-helpers/cosmoz-clear-button';
44

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

1010
import './lib/cosmoz-omnitable-number-range-input';
1111
import { defaultComputeSource } from './lib/utils-data';
12-
import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number';
12+
import {
13+
applySingleFilter,
14+
getComparableValue,
15+
getInputString,
16+
getString,
17+
toHashString,
18+
toNumber,
19+
} from './lib/utils-number';
1320
import { get } from '@polymer/polymer/lib/utils/path';
1421

15-
1622
/**
1723
* @polymer
1824
* @customElement
@@ -30,13 +36,12 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
3036
minWidth: { type: String, value: '30px' },
3137
headerCellClass: { type: String, value: 'number-header-cell' },
3238
maximumFractionDigits: { type: Number, value: null },
33-
minimumFractionDigits: { type: Number, value: null } // browser default 0 for numbers, currency-specific or 2 for currency
39+
minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency
3440
};
3541
}
3642

3743
getFilterFn(column, filter) {
38-
const
39-
min = getComparableValue({ ...column, valuePath: 'min' }, filter),
44+
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
4045
max = getComparableValue({ ...column, valuePath: 'max' }, filter);
4146

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

8792
return {
8893
min: toNumber(matches[1]),
89-
max: toNumber(matches[2])
94+
max: toNumber(matches[2]),
9095
};
9196
}
9297

9398
renderCell(column, { item }) {
94-
return html`<div class="omnitable-cell-number">${ getString(column, item) }</div>`;
99+
return html`<div class="omnitable-cell-number">
100+
${getString(column, item)}
101+
</div>`;
95102
}
96103

97104
renderEditCell(column, { item }, onItemChange) {
98-
const onChange = event => onItemChange(event.target.value);
99-
100-
return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }></paper-input>`;
105+
const onChange = (event) => onItemChange(event.target.value);
106+
107+
return html`<cosmoz-input
108+
no-label-float
109+
type="number"
110+
@change=${onChange}
111+
.value=${getInputString(column, item)}
112+
></cosmoz-input>`;
101113
}
102114

103115
renderHeader(
104-
{ title,
116+
{
117+
title,
105118
min,
106119
max,
107120
locale,
108121
maximumFractionDigits,
109122
minimumFractionDigits,
110-
autoupdate },
123+
autoupdate,
124+
},
111125
{ filter },
112126
setState,
113-
source
127+
source,
114128
) {
115129
return html`<cosmoz-omnitable-number-range-input
116-
.title=${ title }
117-
.filter=${ filter }
118-
.values=${ source }
119-
.min=${ min }
120-
.max=${ max }
121-
.locale=${ locale }
122-
.maximumFractionDigits=${ maximumFractionDigits }
123-
.minimumFractionDigsits=${ minimumFractionDigits }
124-
.autoupdate=${ autoupdate }
125-
@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
126-
@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
130+
.title=${title}
131+
.filter=${filter}
132+
.values=${source}
133+
.min=${min}
134+
.max=${max}
135+
.locale=${locale}
136+
.maximumFractionDigits=${maximumFractionDigits}
137+
.minimumFractionDigsits=${minimumFractionDigits}
138+
.autoupdate=${autoupdate}
139+
@filter-changed=${({ detail: { value } }) =>
140+
setState((state) => ({ ...state, filter: value }))}
141+
@header-focused-changed=${({ detail: { value } }) =>
142+
setState((state) => ({ ...state, headerFocused: value }))}
127143
></cosmoz-omnitable-number-range-input>`;
128144
}
129145

0 commit comments

Comments
 (0)