Skip to content

Commit

Permalink
fix(AnalyticalTable): fix column filter and allow spaces as input (#411)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lukas742
Lukas742 authored Apr 7, 2020
1 parent 856df0b commit 4003065
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 93 deletions.
19 changes: 12 additions & 7 deletions packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '@ui5/webcomponents-icons/dist/icons/decline';
import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem';
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
import { List } from '@ui5/webcomponents-react/lib/List';
Expand Down Expand Up @@ -121,12 +121,17 @@ export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties,
</StandardListItem>
)}
{showFilter && !column.isGrouped && (
<CustomListItem type={ListItemTypes.Inactive}>
<FlexBox alignItems={FlexBoxAlignItems.Center} style={{ padding: '0px 1rem' }}>
<Icon name="filter" style={{ paddingRight: '0.5rem', minWidth: '1rem', minHeight: '1rem' }} />
<Filter column={column} popoverRef={ref} />
</FlexBox>
</CustomListItem>
<FlexBox
alignItems={FlexBoxAlignItems.Center}
style={{
padding: '0px 1rem',
height: 'var(--_ui5_custom_list_item_height)',
borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`
}}
>
<Icon name="filter" style={{ paddingRight: '0.5rem', minWidth: '1rem', minHeight: '1rem' }} />
<Filter column={column} popoverRef={ref} />
</FlexBox>
)}
{showGroup && (
<StandardListItem type={ListItemTypes.Active} icon="group-2" data-sort={'group'}>
Expand Down
152 changes: 68 additions & 84 deletions packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1655,27 +1655,23 @@ exports[`AnalyticalTable Tree Table 1`] = `
>
Sort Descending
</ui5-li>
<ui5-li-custom
type="Inactive"
>
<div
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
style="padding: 0px 1rem;"
>
<ui5-icon
accessible-name=""
name="filter"
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
/>
<ui5-input
name=""
placeholder=""
type="Text"
value=""
value-state="None"
/>
</div>
</ui5-li-custom>
<div
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
style="padding: 0px 1rem;"
>
<ui5-icon
accessible-name=""
name="filter"
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
/>
<ui5-input
name=""
placeholder=""
type="Text"
value=""
value-state="None"
/>
</div>
</ui5-list>
</ui5-popover>
<div
Expand Down Expand Up @@ -1736,27 +1732,23 @@ exports[`AnalyticalTable Tree Table 1`] = `
>
Sort Descending
</ui5-li>
<ui5-li-custom
type="Inactive"
>
<div
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
style="padding: 0px 1rem;"
>
<ui5-icon
accessible-name=""
name="filter"
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
/>
<ui5-input
name=""
placeholder=""
type="Text"
value=""
value-state="None"
/>
</div>
</ui5-li-custom>
<div
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
style="padding: 0px 1rem;"
>
<ui5-icon
accessible-name=""
name="filter"
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
/>
<ui5-input
name=""
placeholder=""
type="Text"
value=""
value-state="None"
/>
</div>
</ui5-list>
</ui5-popover>
<div
Expand Down Expand Up @@ -1817,27 +1809,23 @@ exports[`AnalyticalTable Tree Table 1`] = `
>
Sort Descending
</ui5-li>
<ui5-li-custom
type="Inactive"
>
<div
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
style="padding: 0px 1rem;"
>
<ui5-icon
accessible-name=""
name="filter"
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
/>
<ui5-input
name=""
placeholder=""
type="Text"
value=""
value-state="None"
/>
</div>
</ui5-li-custom>
<div
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
style="padding: 0px 1rem;"
>
<ui5-icon
accessible-name=""
name="filter"
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
/>
<ui5-input
name=""
placeholder=""
type="Text"
value=""
value-state="None"
/>
</div>
</ui5-list>
</ui5-popover>
<div
Expand Down Expand Up @@ -1899,27 +1887,23 @@ exports[`AnalyticalTable Tree Table 1`] = `
>
Sort Descending
</ui5-li>
<ui5-li-custom
type="Inactive"
>
<div
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
style="padding: 0px 1rem;"
>
<ui5-icon
accessible-name=""
name="filter"
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
/>
<ui5-input
name=""
placeholder=""
type="Text"
value=""
value-state="None"
/>
</div>
</ui5-li-custom>
<div
class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0"
style="padding: 0px 1rem;"
>
<ui5-icon
accessible-name=""
name="filter"
style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
/>
<ui5-input
name=""
placeholder=""
type="Text"
value=""
value-state="None"
/>
</div>
</ui5-list>
</ui5-popover>
<div
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export /**
const DefaultFilterComponent: FC<any> = ({ column }) => {
const handleChange = useCallback(
(e) => {
column.setFilter(e.detail.value);
column.setFilter(e.target.value);
},
[column.setFilter]
);
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3262,7 +3262,7 @@
dependencies:
"@types/react" "*"

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

0 comments on commit 4003065

Please sign in to comment.