@equinor/fusion-react-filter 2.1.2 → 2.1.3
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/components/filter/FilterOptionHeader.d.ts.map +1 -1
- package/dist/components/filter/FilterOptionHeader.js +2 -2
- package/dist/components/misc/FilterContainer.d.ts.map +1 -1
- package/dist/components/misc/FilterContainer.js +3 -2
- package/dist/components/panel/FilterPanel.d.ts.map +1 -1
- package/dist/components/panel/FilterPanel.js +0 -1
- package/dist/components/panel/FilterPanelFilters.d.ts.map +1 -1
- package/dist/components/panel/FilterPanelFilters.js +6 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterOptionHeader.d.ts","sourceRoot":"","sources":["../../../src/components/filter/FilterOptionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,YAAY,EAAqC,MAAM,OAAO,CAAC;AAY7F,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AA2CF,eAAO,MAAM,kBAAkB,GAAI,OAAO,iBAAiB,KAAG,
|
|
1
|
+
{"version":3,"file":"FilterOptionHeader.d.ts","sourceRoot":"","sources":["../../../src/components/filter/FilterOptionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,YAAY,EAAqC,MAAM,OAAO,CAAC;AAY7F,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AA2CF,eAAO,MAAM,kBAAkB,GAAI,OAAO,iBAAiB,KAAG,YAyD7D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -53,7 +53,7 @@ export const FilterOptionHeader = (props) => {
|
|
|
53
53
|
const searchRef = useRef(null);
|
|
54
54
|
const { options$, selection$ } = useFilterOptionContext();
|
|
55
55
|
const optionCount = Object.keys(useObservableState(options$).value || {}).length;
|
|
56
|
-
const { value: selectedCount } = useObservableState(useObservableSelector(selection$, (x) => (x ?? new Set()).size
|
|
56
|
+
const { value: selectedCount } = useObservableState(useObservableSelector(selection$, (x) => (x ?? new Set()).size), { initial: 0 });
|
|
57
57
|
const onIconClick = () => {
|
|
58
58
|
if (showSearch) {
|
|
59
59
|
setQuery('');
|
|
@@ -71,6 +71,6 @@ export const FilterOptionHeader = (props) => {
|
|
|
71
71
|
});
|
|
72
72
|
return () => subscription.unsubscribe();
|
|
73
73
|
}, [query$]);
|
|
74
|
-
return (_jsxs(Styled.Root, { children: [_jsx(Styled.SearchField, { id: title, ref: searchRef, "$showSearch": showSearch, type: "search", placeholder: title, onInput: (e) => setQuery(e.currentTarget.value), inputIcon: _jsx(Icon, { name: "search", size: 16 }, "thumbs") }), _jsxs(Styled.Header, { "$showSearch": showSearch, children: [_jsx("span", { children: title }), _jsxs(Styled.Counter, { "$noCount":
|
|
74
|
+
return (_jsxs(Styled.Root, { children: [_jsx(Styled.SearchField, { id: title, ref: searchRef, "$showSearch": showSearch, type: "search", placeholder: title, onInput: (e) => setQuery(e.currentTarget.value), inputIcon: _jsx(Icon, { name: "search", size: 16 }, "thumbs") }), _jsxs(Styled.Header, { "$showSearch": showSearch, children: [_jsx("span", { children: title }), _jsxs(Styled.Counter, { "$noCount": selectedCount === 0, children: [_jsx("span", { children: "(" }), _jsx("span", { children: selectedCount }), _jsx("span", { children: "/" }), _jsx("span", { children: optionCount }), _jsx("span", { children: ")" })] })] }), _jsx(Styled.IconBtn, { name: showSearch ? 'chevron_right' : 'search', size: 16, onClick: onIconClick })] }));
|
|
75
75
|
};
|
|
76
76
|
export default FilterOptionHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterContainer.d.ts","sourceRoot":"","sources":["../../../src/components/misc/FilterContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,KAAK,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterContainer.d.ts","sourceRoot":"","sources":["../../../src/components/misc/FilterContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,KAAK,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;AAc3D,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC;AAE/E;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,iBAAiB,CAAC,oBAAoB,CAAC,KAAG,YAOhF,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -3,9 +3,10 @@ import styled from 'styled-components';
|
|
|
3
3
|
import { tokens } from '@equinor/eds-tokens';
|
|
4
4
|
const Styled = {
|
|
5
5
|
Root: styled.div `
|
|
6
|
-
display:
|
|
7
|
-
flex: auto;
|
|
6
|
+
display: flex;
|
|
8
7
|
gap: ${({ $spacing }) => tokens.spacings.comfortable[$spacing || 'medium']};
|
|
8
|
+
height: 100%;
|
|
9
|
+
|
|
9
10
|
& > * {
|
|
10
11
|
flex: 1;
|
|
11
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/panel/FilterPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAajG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/panel/FilterPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAajG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAyB5C,KAAK,YAAY,GAAG;IAClB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,IAAI,cAAc,CAAC,cAAc,CAAC,GAAG;IACrE,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gCAAgC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAEhC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,CAAC,KAAK,EAC9B,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAC9C,YA4BJ,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -24,7 +24,6 @@ const Styled = {
|
|
|
24
24
|
Filters: styled.div `
|
|
25
25
|
overflow-x: auto;
|
|
26
26
|
overflow-y: hidden;
|
|
27
|
-
display: flex;
|
|
28
27
|
padding-bottom: calc(var(--filter-panel-spacing));
|
|
29
28
|
margin-bottom: calc(var(--filter-panel-spacing) * -1);
|
|
30
29
|
background-color: ${tokens.colors.ui.background__light.rgba};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterPanelFilters.d.ts","sourceRoot":"","sources":["../../../src/components/panel/FilterPanelFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterPanelFilters.d.ts","sourceRoot":"","sources":["../../../src/components/panel/FilterPanelFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAejF,KAAK,uBAAuB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,QAAQ,CAAC,cAAc,CAAC,EAAE,EAAE,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,KAAG,YAuBnE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -5,10 +5,15 @@ import { useFilterPanelContext } from './FilterPanelProvider';
|
|
|
5
5
|
import { EdsProvider } from '@equinor/eds-core-react';
|
|
6
6
|
import { map } from 'rxjs/operators';
|
|
7
7
|
import { FilterContainer } from '../misc';
|
|
8
|
+
import { styled } from 'styled-components';
|
|
9
|
+
const FilterWrapper = styled.div `
|
|
10
|
+
display: ${({ $showFilters }) => ($showFilters ? 'block' : 'none')};
|
|
11
|
+
height: 100%;
|
|
12
|
+
`;
|
|
8
13
|
export const FilterPanelFilters = (props) => {
|
|
9
14
|
const { FilterSelector, ...args } = props;
|
|
10
15
|
const { filters$, showFilters } = useFilterPanelContext();
|
|
11
16
|
const { value: filters } = useObservableState(useMemo(() => filters$.pipe(map(({ filters, selectedFilters }) => filters.filter((filter) => selectedFilters.has(filter.props.filterKey)))), [filters$]));
|
|
12
|
-
return (_jsx(EdsProvider, { density: "compact", children: _jsxs(
|
|
17
|
+
return (_jsx(EdsProvider, { density: "compact", children: _jsxs(FilterWrapper, { ...args, "$showFilters": Boolean(showFilters), children: [FilterSelector && _jsx(FilterSelector, {}), _jsx(FilterContainer, { children: filters })] }) }));
|
|
13
18
|
};
|
|
14
19
|
export default FilterPanelFilters;
|
package/package.json
CHANGED