Skip to content

Commit 4003065

Browse files
Lukas742Lukas742
authored
fix(AnalyticalTable): fix column filter and allow spaces as input (#411)
1 parent 856df0b commit 4003065

File tree

4 files changed

+82
-93
lines changed

4 files changed

+82
-93
lines changed

‎packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import '@ui5/webcomponents-icons/dist/icons/decline';
22
import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
3-
import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem';
43
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
4+
import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
55
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
66
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
77
import { List } from '@ui5/webcomponents-react/lib/List';
@@ -121,12 +121,17 @@ export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties,
121121
</StandardListItem>
122122
)}
123123
{showFilter && !column.isGrouped && (
124-
<CustomListItem type={ListItemTypes.Inactive}>
125-
<FlexBox alignItems={FlexBoxAlignItems.Center} style={{ padding: '0px 1rem' }}>
126-
<Icon name="filter" style={{ paddingRight: '0.5rem', minWidth: '1rem', minHeight: '1rem' }} />
127-
<Filter column={column} popoverRef={ref} />
128-
</FlexBox>
129-
</CustomListItem>
124+
<FlexBox
125+
alignItems={FlexBoxAlignItems.Center}
126+
style={{
127+
padding: '0px 1rem',
128+
height: 'var(--_ui5_custom_list_item_height)',
129+
borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`
130+
}}
131+
>
132+
<Icon name="filter" style={{ paddingRight: '0.5rem', minWidth: '1rem', minHeight: '1rem' }} />
133+
<Filter column={column} popoverRef={ref} />
134+
</FlexBox>
130135
)}
131136
{showGroup && (
132137
<StandardListItem type={ListItemTypes.Active} icon="group-2" data-sort={'group'}>

‎packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

Lines changed: 68 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1655,27 +1655,23 @@ exports[`AnalyticalTable Tree Table 1`] = `
16551655
>
16561656
Sort Descending
16571657
</ui5-li>
1658-
<ui5-li-custom
1659-
type="Inactive"
1660-
>
1661-
<div
1662-
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
1663-
style="padding: 0px 1rem;"
1664-
>
1665-
<ui5-icon
1666-
accessible-name=""
1667-
name="filter"
1668-
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
1669-
/>
1670-
<ui5-input
1671-
name=""
1672-
placeholder=""
1673-
type="Text"
1674-
value=""
1675-
value-state="None"
1676-
/>
1677-
</div>
1678-
</ui5-li-custom>
1658+
<div
1659+
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
1660+
style="padding: 0px 1rem;"
1661+
>
1662+
<ui5-icon
1663+
accessible-name=""
1664+
name="filter"
1665+
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
1666+
/>
1667+
<ui5-input
1668+
name=""
1669+
placeholder=""
1670+
type="Text"
1671+
value=""
1672+
value-state="None"
1673+
/>
1674+
</div>
16791675
</ui5-list>
16801676
</ui5-popover>
16811677
<div
@@ -1736,27 +1732,23 @@ exports[`AnalyticalTable Tree Table 1`] = `
17361732
>
17371733
Sort Descending
17381734
</ui5-li>
1739-
<ui5-li-custom
1740-
type="Inactive"
1741-
>
1742-
<div
1743-
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
1744-
style="padding: 0px 1rem;"
1745-
>
1746-
<ui5-icon
1747-
accessible-name=""
1748-
name="filter"
1749-
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
1750-
/>
1751-
<ui5-input
1752-
name=""
1753-
placeholder=""
1754-
type="Text"
1755-
value=""
1756-
value-state="None"
1757-
/>
1758-
</div>
1759-
</ui5-li-custom>
1735+
<div
1736+
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
1737+
style="padding: 0px 1rem;"
1738+
>
1739+
<ui5-icon
1740+
accessible-name=""
1741+
name="filter"
1742+
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
1743+
/>
1744+
<ui5-input
1745+
name=""
1746+
placeholder=""
1747+
type="Text"
1748+
value=""
1749+
value-state="None"
1750+
/>
1751+
</div>
17601752
</ui5-list>
17611753
</ui5-popover>
17621754
<div
@@ -1817,27 +1809,23 @@ exports[`AnalyticalTable Tree Table 1`] = `
18171809
>
18181810
Sort Descending
18191811
</ui5-li>
1820-
<ui5-li-custom
1821-
type="Inactive"
1822-
>
1823-
<div
1824-
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
1825-
style="padding: 0px 1rem;"
1826-
>
1827-
<ui5-icon
1828-
accessible-name=""
1829-
name="filter"
1830-
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
1831-
/>
1832-
<ui5-input
1833-
name=""
1834-
placeholder=""
1835-
type="Text"
1836-
value=""
1837-
value-state="None"
1838-
/>
1839-
</div>
1840-
</ui5-li-custom>
1812+
<div
1813+
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
1814+
style="padding: 0px 1rem;"
1815+
>
1816+
<ui5-icon
1817+
accessible-name=""
1818+
name="filter"
1819+
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
1820+
/>
1821+
<ui5-input
1822+
name=""
1823+
placeholder=""
1824+
type="Text"
1825+
value=""
1826+
value-state="None"
1827+
/>
1828+
</div>
18411829
</ui5-list>
18421830
</ui5-popover>
18431831
<div
@@ -1899,27 +1887,23 @@ exports[`AnalyticalTable Tree Table 1`] = `
18991887
>
19001888
Sort Descending
19011889
</ui5-li>
1902-
<ui5-li-custom
1903-
type="Inactive"
1904-
>
1905-
<div
1906-
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
1907-
style="padding: 0px 1rem;"
1908-
>
1909-
<ui5-icon
1910-
accessible-name=""
1911-
name="filter"
1912-
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
1913-
/>
1914-
<ui5-input
1915-
name=""
1916-
placeholder=""
1917-
type="Text"
1918-
value=""
1919-
value-state="None"
1920-
/>
1921-
</div>
1922-
</ui5-li-custom>
1890+
<div
1891+
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
1892+
style="padding: 0px 1rem;"
1893+
>
1894+
<ui5-icon
1895+
accessible-name=""
1896+
name="filter"
1897+
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
1898+
/>
1899+
<ui5-input
1900+
name=""
1901+
placeholder=""
1902+
type="Text"
1903+
value=""
1904+
value-state="None"
1905+
/>
1906+
</div>
19231907
</ui5-list>
19241908
</ui5-popover>
19251909
<div

‎packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export /**
77
const DefaultFilterComponent: FC<any> = ({ column }) => {
88
const handleChange = useCallback(
99
(e) => {
10-
column.setFilter(e.detail.value);
10+
column.setFilter(e.target.value);
1111
},
1212
[column.setFilter]
1313
);

‎yarn.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3262,7 +3262,7 @@
32623262
dependencies:
32633263
"@types/react" "*"
32643264

3265-
"@types/react@*", "@types/react@^16.9.2":
3265+
"@types/react@*", "@types/react@16.9.2", "@types/react@^16.9.2":
32663266
version "16.9.2"
32673267
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
32683268
integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==

0 commit comments

Comments
 (0)