@neovici/cosmoz-omnitable 14.34.0 → 14.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/grouped-list/cosmoz-grouped-list.js +1 -1
- package/dist/grouped-list/cosmoz-grouped-list.js.map +1 -1
- package/dist/grouped-list/use-cosmoz-grouped-list.d.ts +32 -13
- package/dist/grouped-list/use-cosmoz-grouped-list.d.ts.map +1 -1
- package/dist/grouped-list/use-cosmoz-grouped-list.js +12 -13
- package/dist/grouped-list/use-cosmoz-grouped-list.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { renderCosmozGroupedList, useCosmozGroupedList, } from './use-cosmoz-grouped-list
|
|
1
|
+
import { renderCosmozGroupedList, useCosmozGroupedList, } from './use-cosmoz-grouped-list';
|
|
2
2
|
import { component } from '@pionjs/pion';
|
|
3
3
|
const CosmozGroupedList = (host) => renderCosmozGroupedList(useCosmozGroupedList(host));
|
|
4
4
|
customElements.define('cosmoz-grouped-list', component(CosmozGroupedList, { useShadowDOM: false }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cosmoz-grouped-list.js","sourceRoot":"","sources":["../../src/grouped-list/cosmoz-grouped-list.js"],"names":[],"mappings":"AAAA,OAAO,EACN,uBAAuB,EACvB,oBAAoB,GACpB,MAAM,
|
|
1
|
+
{"version":3,"file":"cosmoz-grouped-list.js","sourceRoot":"","sources":["../../src/grouped-list/cosmoz-grouped-list.js"],"names":[],"mappings":"AAAA,OAAO,EACN,uBAAuB,EACvB,oBAAoB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,EAAE,CAClC,uBAAuB,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC;AAErD,cAAc,CAAC,MAAM,CACpB,qBAAqB,EACrB,SAAS,CAAC,iBAAiB,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CACrD,CAAC"}
|
|
@@ -1,15 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
export
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import './cosmoz-grouped-list-row';
|
|
2
|
+
import { GroupItem } from './utils';
|
|
3
|
+
import type { DirectiveResult } from 'lit/directive.js';
|
|
4
|
+
import type { Item } from '../lib/types';
|
|
5
|
+
export interface RenderItemParams {
|
|
6
|
+
selected: boolean;
|
|
7
|
+
expanded: boolean;
|
|
8
|
+
toggleSelect: (selected?: boolean) => void;
|
|
9
|
+
toggleCollapse: () => void;
|
|
10
|
+
}
|
|
11
|
+
export interface RenderGroupParams {
|
|
12
|
+
selected: boolean;
|
|
13
|
+
folded: boolean;
|
|
14
|
+
toggleSelect: (selected?: boolean) => void;
|
|
15
|
+
toggleFold: () => void;
|
|
16
|
+
}
|
|
17
|
+
export interface UseCosmozGroupedListHost extends HTMLElement {
|
|
18
|
+
data: (Item | GroupItem<Item>)[];
|
|
19
|
+
renderItem: (item: Item, index: number, params: RenderItemParams) => unknown;
|
|
20
|
+
renderGroup: (item: GroupItem<Item>, index: number, params: RenderGroupParams) => unknown;
|
|
21
|
+
displayEmptyGroups: boolean;
|
|
22
|
+
compareItemsFn?: <T>(a: T, b: T) => boolean;
|
|
23
|
+
style: CSSStyleDeclaration;
|
|
24
|
+
}
|
|
25
|
+
declare const useCosmozGroupedList: (host: UseCosmozGroupedListHost) => {
|
|
26
|
+
renderRow: (item: Item | GroupItem<Item>, index: number) => unknown;
|
|
27
|
+
flatData: (object | GroupItem<object>)[] | undefined;
|
|
14
28
|
};
|
|
29
|
+
declare const renderCosmozGroupedList: ({ renderRow, flatData, }: {
|
|
30
|
+
renderRow: (item: Item | GroupItem<Item>, index: number) => unknown;
|
|
31
|
+
flatData: (Item | GroupItem<Item>)[] | undefined;
|
|
32
|
+
}) => DirectiveResult;
|
|
33
|
+
export { renderCosmozGroupedList, useCosmozGroupedList };
|
|
15
34
|
//# sourceMappingURL=use-cosmoz-grouped-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-cosmoz-grouped-list.d.ts","sourceRoot":"","sources":["../../src/grouped-list/use-cosmoz-grouped-list.
|
|
1
|
+
{"version":3,"file":"use-cosmoz-grouped-list.d.ts","sourceRoot":"","sources":["../../src/grouped-list/use-cosmoz-grouped-list.ts"],"names":[],"mappings":"AAIA,OAAO,2BAA2B,CAAC;AAGnC,OAAO,EAKN,SAAS,EACT,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC5D,IAAI,EAAE,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,OAAO,CAAC;IAC7E,WAAW,EAAE,CACZ,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EACrB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,iBAAiB,KACrB,OAAO,CAAC;IACb,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;IAC5C,KAAK,EAAE,mBAAmB,CAAC;CAC3B;AAMD,QAAA,MAAM,oBAAoB,GAAI,MAAM,wBAAwB;sBA8BnD,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,MAAM;;CAiD7C,CAAC;AAEF,QAAA,MAAM,uBAAuB,GAAI,0BAG9B;IACF,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACpE,QAAQ,EAAE,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC;CACjD,KAAG,eAUH,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -5,18 +5,21 @@ import { html } from 'lit-html';
|
|
|
5
5
|
import './cosmoz-grouped-list-row';
|
|
6
6
|
import { useCollapsibleItems } from './use-collapsible-items';
|
|
7
7
|
import { useSelectedItems } from './use-selected-items';
|
|
8
|
-
import { byReference, isExpanded, isFolded, prepareData } from './utils';
|
|
8
|
+
import { byReference, isExpanded, isFolded, prepareData, } from './utils';
|
|
9
9
|
import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
|
|
10
10
|
const styles = {
|
|
11
11
|
host: { position: 'relative', display: 'flex', flexDirection: 'column' },
|
|
12
|
-
}
|
|
13
|
-
|
|
12
|
+
};
|
|
13
|
+
const useCosmozGroupedList = (host) => {
|
|
14
|
+
const { data, renderItem, renderGroup, displayEmptyGroups, compareItemsFn = byReference, } = host;
|
|
15
|
+
const { toggleFold, toggleCollapse, state, signal } = useCollapsibleItems();
|
|
14
16
|
// TODO: state changes trigger recalculation, which is slow (200ms with 10k items)
|
|
15
17
|
// it only makes sense to do it when a group is folded
|
|
16
18
|
// suggested fix: separate signal for item collapse and group fold
|
|
17
|
-
flatData = useMemo(() => prepareData(data, displayEmptyGroups, state), [data, displayEmptyGroups, signal]), { selectedItems, isItemSelected, isGroupSelected, isSelected, select, deselect, selectOnly, selectAll, deselectAll, toggleSelect, toggleSelectTo, } = useSelectedItems({ initial: [], compareItemsFn, data, flatData })
|
|
19
|
+
const flatData = useMemo(() => prepareData(data, displayEmptyGroups, state), [data, displayEmptyGroups, signal]), { selectedItems, isItemSelected, isGroupSelected, isSelected, select, deselect, selectOnly, selectAll, deselectAll, toggleSelect, toggleSelectTo, } = useSelectedItems({ initial: [], compareItemsFn, data, flatData });
|
|
20
|
+
const renderRow = useCallback((item, index) => Array.isArray(item.items)
|
|
18
21
|
? renderGroup(item, index, {
|
|
19
|
-
selected: isGroupSelected(item
|
|
22
|
+
selected: isGroupSelected(item),
|
|
20
23
|
folded: isFolded(item, state),
|
|
21
24
|
toggleSelect: (selected) => toggleSelect(item, typeof selected === 'boolean' ? selected : undefined),
|
|
22
25
|
toggleFold: () => toggleFold(item),
|
|
@@ -27,7 +30,9 @@ const styles = {
|
|
|
27
30
|
toggleSelect: (selected) => toggleSelect(item, typeof selected === 'boolean' ? selected : undefined),
|
|
28
31
|
toggleCollapse: () => toggleCollapse(item),
|
|
29
32
|
}), [renderItem, renderGroup, selectedItems, toggleSelect, signal]);
|
|
30
|
-
useLayoutEffect(() =>
|
|
33
|
+
useLayoutEffect(() => {
|
|
34
|
+
Object.assign(host.style, styles.host);
|
|
35
|
+
}, []);
|
|
31
36
|
useNotifyProperty('selectedItems', selectedItems);
|
|
32
37
|
const api = {
|
|
33
38
|
toggleFold,
|
|
@@ -46,13 +51,7 @@ const styles = {
|
|
|
46
51
|
useImperativeApi(api, Object.values(api));
|
|
47
52
|
return { renderRow, flatData };
|
|
48
53
|
};
|
|
49
|
-
|
|
50
|
-
* @param {Object} params
|
|
51
|
-
* @param {Function} params.renderRow
|
|
52
|
-
* @param {Array} params.flatData
|
|
53
|
-
* @returns {*}
|
|
54
|
-
*/
|
|
55
|
-
const renderCosmozGroupedList = ({ renderRow, flatData }) => {
|
|
54
|
+
const renderCosmozGroupedList = ({ renderRow, flatData, }) => {
|
|
56
55
|
return virtualize({
|
|
57
56
|
items: flatData,
|
|
58
57
|
renderItem: (item, index) => html `<cosmoz-grouped-list-row
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-cosmoz-grouped-list.js","sourceRoot":"","sources":["../../src/grouped-list/use-cosmoz-grouped-list.
|
|
1
|
+
{"version":3,"file":"use-cosmoz-grouped-list.js","sourceRoot":"","sources":["../../src/grouped-list/use-cosmoz-grouped-list.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-omnitable",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.35.0",
|
|
4
4
|
"description": "[](https://travis-ci.org/Neovici/cosmoz-omnitable)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components"
|