Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: upgrade cosmoz-grouped-list #605

Merged
merged 2 commits into from
Feb 28, 2024
Merged

feat: upgrade cosmoz-grouped-list #605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40b2748
feat: upgrade cosmoz-grouped-list
cristinecula Feb 27, 2024
db96ef8
test: fix tests
cristinecula Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion cosmoz-omnitable-column-list-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,6 @@ class OmnitableColumnListData extends translatable(mixin(Template, PolymerElemen
this._expanded = !this._expanded;
event.stopPropagation();
event.preventDefault();
this.dispatchEvent(new CustomEvent('expand', { bubbles: true }));
}
}

Expand Down
4 changes: 1 addition & 3 deletions cosmoz-omnitable-column-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
onText,
} from './cosmoz-omnitable-column-list-mixin';
import '@neovici/cosmoz-autocomplete';
import { notifyResize } from './lib/utils';
import { columnSymbol } from './lib/use-dom-columns';

/**
Expand All @@ -41,10 +40,9 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
};
}

renderCell({ valuePath, textProperty }, { item, index }) {
renderCell({ valuePath, textProperty }, { item }) {
return html`<cosmoz-omnitable-column-list-data
.items=${getTexts(item, valuePath, textProperty)}
@expand=${(event) => notifyResize(event.target, index)}
></cosmoz-omnitable-column-list-data>`;
}

Expand Down
8 changes: 1 addition & 7 deletions cosmoz-omnitable-item-expand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { component, useEffect } from '@pionjs/pion';
import { html, nothing } from 'lit-html';
import './cosmoz-omnitable-item-expand-line';
import { notifyResize } from './lib/utils';

const renderExpandList = ({
columns,
Expand All @@ -24,7 +23,7 @@ const renderExpandList = ({
>`
),
ExpandList = (host) => {
const { expanded, index, columns } = host;
const { columns } = host;

useEffect(() => {
if (columns?.length > 0) {
Expand All @@ -35,11 +34,6 @@ const renderExpandList = ({
return () => host.removeAttribute('hidden');
}, [columns?.length]);

useEffect(
() => expanded && requestAnimationFrame(() => notifyResize(host, index)),
[expanded]
);

return Array.isArray(columns) && columns.length > 0 && host.expanded
? renderExpandList(host)
: nothing;
Expand Down
5 changes: 0 additions & 5 deletions lib/use-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,11 +165,6 @@ export const useList = ({
);
}, []);

useEffect(() => {
host.shadowRoot.querySelector('#groupedList').scrollTarget =
host.shadowRoot.querySelector('#scroller');
}, []);

const { groupOnColumn } = sortAndGroupOptions,
onItemChange = useCallback(
(column, item) => (value) => _onItemChange(host, column, item, value),
Expand Down
11 changes: 2 additions & 9 deletions lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
const notifyResize = (target, index) =>
target.dispatchEvent(
new CustomEvent('update-item-size', {
bubbles: true,
detail: { index },
})
),
indexSymbol = Symbol('index');
const indexSymbol = Symbol('index');

export { notifyResize, indexSymbol };
export { indexSymbol };
39 changes: 5 additions & 34 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"@neovici/cosmoz-collapse": "^1.1.0",
"@neovici/cosmoz-datetime-input": "^4.0.0",
"@neovici/cosmoz-dropdown": "^4.0.0",
"@neovici/cosmoz-grouped-list": "^7.0.0",
"@neovici/cosmoz-grouped-list": "^8.0.0",
"@neovici/cosmoz-i18next": "^3.1.1",
"@neovici/cosmoz-input": "^4.0.0",
"@neovici/cosmoz-router": "^11.0.0",
Expand Down
10 changes: 9 additions & 1 deletion test/autocomplete.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
/* eslint-disable max-lines */
import { assert, html, nextFrame } from '@open-wc/testing';

import { setupOmnitableFixture } from './helpers/utils';
import {
ignoreResizeObserverLoopErrors,
rowVisible,
setupOmnitableFixture,
} from './helpers/utils';

import '../cosmoz-omnitable.js';
import { getComparableValue } from '../cosmoz-omnitable-column-autocomplete.js';
Expand Down Expand Up @@ -422,10 +427,12 @@ const basicFixture = html`
`;

suite('autocomplete unit tests', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable;

setup(async () => {
omnitable = await setupOmnitableFixture(basicFixture, data.slice(0));
await rowVisible();
});

test('basic render test', async () => {
Expand Down Expand Up @@ -454,6 +461,7 @@ suite('autocomplete unit tests', () => {
});

suite('values as function', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
test('displays values from a source function', async () => {
const data = [
{
Expand Down
13 changes: 12 additions & 1 deletion test/basic.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { assert, expect, html, nextFrame } from '@open-wc/testing';
import { assert as sinonAssert, spy } from 'sinon';

import '../demo/helpers/cosmoz-translations';
import { setupOmnitableFixture } from './helpers/utils';
import { ignoreResizeObserverLoopErrors, rowVisible, setupOmnitableFixture } from './helpers/utils';
import { generateTableDemoData } from '../demo/table-demo-helper';
import { flush } from '@polymer/polymer/lib/utils/flush';

Expand All @@ -16,6 +16,7 @@ import { columnSymbol } from '../lib/use-dom-columns';
sinonAssert.expose(assert, { prefix: '' });

suite('basic', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable, columnWithoutGroupOn;

setup(async () => {
Expand Down Expand Up @@ -140,6 +141,7 @@ suite('basic', () => {
});

suite('default-config', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
test('default valuePath is name', async () => {
const omnitable = await setupOmnitableFixture(
html`
Expand Down Expand Up @@ -169,6 +171,7 @@ suite('default-config', () => {
});

suite('item update effects', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable;

setup(async () => {
Expand Down Expand Up @@ -217,6 +220,7 @@ suite('item update effects', () => {
});

suite('render cell function', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable;

setup(async () => {
Expand Down Expand Up @@ -297,6 +301,7 @@ suite('render cell function', () => {
});

suite('render header function', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable;

const getRows = () =>
Expand Down Expand Up @@ -381,6 +386,7 @@ suite('render header function', () => {
});

suite('fit columns behaviour', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable;

setup(async () => {
Expand Down Expand Up @@ -422,6 +428,7 @@ suite('fit columns behaviour', () => {
`,
data,
);
await rowVisible();
});

test('it adjusts the visible columns based on the available width', async () => {
Expand All @@ -436,6 +443,7 @@ suite('fit columns behaviour', () => {
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();

assert.deepEqual(
Array.from(omnitable.shadowRoot.querySelectorAll('.header-cell')).map(
Expand All @@ -448,6 +456,7 @@ suite('fit columns behaviour', () => {
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();

assert.deepEqual(
Array.from(omnitable.shadowRoot.querySelectorAll('.header-cell')).map(
Expand All @@ -459,6 +468,7 @@ suite('fit columns behaviour', () => {
});

suite('render group function', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable;

setup(async () => {
Expand Down Expand Up @@ -497,6 +507,7 @@ suite('render group function', () => {
});

suite('enabled columns', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
test('displays only enabled columns', async () => {
const omnitable = await setupOmnitableFixture(
html` <cosmoz-omnitable
Expand Down
3 changes: 2 additions & 1 deletion test/boolean.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { assert, html } from '@open-wc/testing';

import { spy } from 'sinon';
import { setupOmnitableFixture } from './helpers/utils';
import { ignoreResizeObserverLoopErrors, setupOmnitableFixture } from './helpers/utils';

import '../cosmoz-omnitable.js';
import '../cosmoz-omnitable-columns.js';
Expand All @@ -17,6 +17,7 @@ import { serializeFilter } from '../cosmoz-omnitable-column-mixin';
import { columnSymbol } from '../lib/use-dom-columns';

suite('boolean', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
test('initializes boolean column', async () => {
const data = [
{ boolean: true },
Expand Down
2 changes: 2 additions & 0 deletions test/expand-line.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { fixture, html, assert } from '@open-wc/testing';
import '../cosmoz-omnitable-item-expand-line';
import { ignoreResizeObserverLoopErrors } from './helpers/utils';

suite('cosmoz-omnitable-item-expand-line', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
test('initializes correctly', async () => {
const el = await fixture(
html`<cosmoz-omnitable-item-expand-line
Expand Down
5 changes: 4 additions & 1 deletion test/group.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { assert, html, nextFrame } from '@open-wc/testing';

import { setupOmnitableFixture } from './helpers/utils';
import { ignoreResizeObserverLoopErrors, setupOmnitableFixture } from './helpers/utils';
import { generateTableDemoData } from '../demo/table-demo-helper';

import '../cosmoz-omnitable.js';
import '../cosmoz-omnitable-columns.js';

suite('id', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable, data;

setup(async () => {
Expand Down Expand Up @@ -62,6 +63,7 @@ suite('id', () => {
});

suite('bool', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable, data;

setup(async () => {
Expand Down Expand Up @@ -118,6 +120,7 @@ suite('bool', () => {
});

suite('amount', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
let omnitable, data;

setup(async () => {
Expand Down
7 changes: 3 additions & 4 deletions test/hash-param-read.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { assert, html, nextFrame } from '@open-wc/testing';
import { assert, html } from '@open-wc/testing';

import { setupOmnitableFixture } from './helpers/utils';
import { ignoreResizeObserverLoopErrors, setupOmnitableFixture } from './helpers/utils';

import '../cosmoz-omnitable.js';
import '../cosmoz-omnitable-column-autocomplete.js';
Expand Down Expand Up @@ -31,7 +31,6 @@ const data = [
],
location = window.location,
instantiate = async () => {
await nextFrame();
omnitable = await setupOmnitableFixture(
html`
<cosmoz-omnitable
Expand Down Expand Up @@ -69,10 +68,10 @@ const data = [
`,
data,
);
await nextFrame();
};

suite('basic-read', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
setup(() => {
location.hash = '#!/';
});
Expand Down
3 changes: 2 additions & 1 deletion test/hash-param-write.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { assert, html, nextFrame } from '@open-wc/testing';

import { setupOmnitableFixture } from './helpers/utils';
import { ignoreResizeObserverLoopErrors, setupOmnitableFixture } from './helpers/utils';

import '../cosmoz-omnitable.js';
import '../cosmoz-omnitable-column-autocomplete.js';
Expand Down Expand Up @@ -73,6 +73,7 @@ const data = [
};

suite('basic-write', () => {
ignoreResizeObserverLoopErrors(setup, teardown);
setup(async () => {
location.hash = '#!/';
await instantiate();
Expand Down
Loading