Skip to content

Commit 94b468e

Browse files
TobiasKoehlerMarcusNotheis
TobiasKoehler
authored and
MarcusNotheis
committed
feat(FilterBar): renderSearch function
BREAKING CHANGE replaced boolean value with render function
1 parent 13978b2 commit 94b468e

File tree

4 files changed

+23
-34
lines changed

4 files changed

+23
-34
lines changed

‎packages/fiori3/__karma_snapshots__/FilterBar.md

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
```
66
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
77
<ThemeProvider jss={{...}} theme={{...}}>
8-
<Jss(WithStyles(FilterBar)) renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true}>
9-
<WithStyles(FilterBar) renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true} theme={{...}} classes={{...}}>
10-
<FilterBar renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true} theme={{...}} classes={{...}}>
8+
<Jss(WithStyles(FilterBar)) renderSearch={[Function: renderSearch]} renderVariants={[Function: renderVariants]} displayOnly={true}>
9+
<WithStyles(FilterBar) renderSearch={[Function: renderSearch]} renderVariants={[Function: renderVariants]} displayOnly={true} theme={{...}} classes={{...}}>
10+
<FilterBar renderSearch={[Function: renderSearch]} renderVariants={[Function: renderVariants]} displayOnly={true} theme={{...}} classes={{...}}>
1111
<div className="FilterBar-outerContainer---">
1212
<div className="FilterBar-filterBarHeader---">
1313
<Jss(WithStyles(VariantManagement)) variantItems={{...}} enabled={true} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4">
@@ -72,11 +72,13 @@
7272
</WithStyles(VariantManagement)>
7373
</Jss(WithStyles(VariantManagement))>
7474
<div className="FilterBar-vLine---">
75+
7576
<Input placeholder="Search" type="Text" value="" valueState="None">
7677
<WithWebComponent theme={{...}} placeholder="Search" type="Text" value="" valueState="None">
7778
<ui5-input placeholder="Search" type="Text" value="" value-state="None" class="sapUiSizeCompact" />
7879
</WithWebComponent>
7980
</Input>
81+
8082
</div>
8183
<div className="FilterBar-headerRowRight---">
8284
<Button onPress={[Function]} type="Transparent" icon={{...}} activeIcon={{...}}>
@@ -160,9 +162,9 @@
160162
```
161163
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
162164
<ThemeProvider jss={{...}} theme={{...}}>
163-
<Jss(WithStyles(FilterBar)) renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true}>
164-
<WithStyles(FilterBar) renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true} theme={{...}} classes={{...}}>
165-
<FilterBar renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true} theme={{...}} classes={{...}}>
165+
<Jss(WithStyles(FilterBar)) renderVariants={[Function: renderVariants]} displayOnly={true}>
166+
<WithStyles(FilterBar) renderVariants={[Function: renderVariants]} displayOnly={true} theme={{...}} classes={{...}}>
167+
<FilterBar renderVariants={[Function: renderVariants]} displayOnly={true} theme={{...}} classes={{...}}>
166168
<div className="FilterBar-outerContainer---">
167169
<div className="FilterBar-filterBarHeader---">
168170
<Jss(WithStyles(VariantManagement)) variantItems={{...}} enabled={true} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4">
@@ -226,13 +228,6 @@
226228
</VariantManagement>
227229
</WithStyles(VariantManagement)>
228230
</Jss(WithStyles(VariantManagement))>
229-
<div className="FilterBar-vLine---">
230-
<Input placeholder="Search" type="Text" value="" valueState="None">
231-
<WithWebComponent theme={{...}} placeholder="Search" type="Text" value="" valueState="None">
232-
<ui5-input placeholder="Search" type="Text" value="" value-state="None" class="sapUiSizeCompact" />
233-
</WithWebComponent>
234-
</Input>
235-
</div>
236231
<div className="FilterBar-headerRowRight---">
237232
<Button onPress={[Function]} type="Transparent" icon={{...}} activeIcon={{...}}>
238233
<WithWebComponent theme={{...}} onPress={[Function]} type="Transparent" icon={{...}} activeIcon={{...}}>
@@ -341,9 +336,9 @@
341336
```
342337
<ThemeProvider theme="sap_fiori3_light" contentDensity="Compact" withToastContainer={false}>
343338
<ThemeProvider jss={{...}} theme={{...}}>
344-
<Jss(WithStyles(FilterBar)) renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true}>
345-
<WithStyles(FilterBar) renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true} theme={{...}} classes={{...}}>
346-
<FilterBar renderVariants={[Function: renderVariants]} displayOnly={true} renderSearch={true} theme={{...}} classes={{...}}>
339+
<Jss(WithStyles(FilterBar)) renderVariants={[Function: renderVariants]} displayOnly={true}>
340+
<WithStyles(FilterBar) renderVariants={[Function: renderVariants]} displayOnly={true} theme={{...}} classes={{...}}>
341+
<FilterBar renderVariants={[Function: renderVariants]} displayOnly={true} theme={{...}} classes={{...}}>
347342
<div className="FilterBar-outerContainer---">
348343
<div className="FilterBar-filterBarHeader---">
349344
<Jss(WithStyles(VariantManagement)) variantItems={{...}} enabled={true} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4">
@@ -407,13 +402,6 @@
407402
</VariantManagement>
408403
</WithStyles(VariantManagement)>
409404
</Jss(WithStyles(VariantManagement))>
410-
<div className="FilterBar-vLine---">
411-
<Input placeholder="Search" type="Text" value="" valueState="None">
412-
<WithWebComponent theme={{...}} placeholder="Search" type="Text" value="" valueState="None">
413-
<ui5-input placeholder="Search" type="Text" value="" value-state="None" class="sapUiSizeCompact" />
414-
</WithWebComponent>
415-
</Input>
416-
</div>
417405
<div className="FilterBar-headerRowRight---">
418406
<Button onPress={[Function]} type="Transparent" icon={{...}} activeIcon={{...}}>
419407
<WithWebComponent theme={{...}} onPress={[Function]} type="Transparent" icon={{...}} activeIcon={{...}}>

‎packages/fiori3/src/components/FilterBar/FilterBar.karma.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,20 @@ import { VariantManagement } from '../../lib/VariantManagement';
77
import { FilterItem } from '../../lib/FilterItem';
88
import { FilterType } from '../../lib/FilterType';
99
import { Switch } from '../../lib/Switch';
10+
import { Input } from '../../lib/Input';
1011

1112
const variantItems = [{ label: 'Variant 1', key: '1' }, { label: 'Variant 2', key: '2' }];
1213
const filterItems = [{ text: 'Text 1', key: '1' }, { text: 'Text 2', key: '2' }];
1314

1415
const renderVariants = () => <VariantManagement variantItems={variantItems} />;
16+
const renderSearch = () => <Input placeholder={'Search'} />;
1517

1618
use(matchSnapshot);
1719

1820
describe('FilterBar', () => {
1921
it('Render without crashing', () => {
2022
const wrapper = mountThemedComponent(
21-
<FilterBar renderVariants={renderVariants}>
23+
<FilterBar renderSearch={renderSearch} renderVariants={renderVariants}>
2224
<FilterItem
2325
// onChange={(e) => alert(e.getParameter('selectedItem').key)}
2426
filterItems={filterItems}

‎packages/fiori3/src/components/FilterBar/demo.stories.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { PlacementType } from '../../lib/PlacementType';
88
import { TitleLevel } from '../../lib/TitleLevel';
99
import { FilterType } from '../../lib/FilterType';
1010
import { Switch } from '../../lib/Switch';
11+
import { Input } from '../../lib/Input';
1112

1213
const flavours = [];
1314
for (let i = 1; i <= 9; i++) {
@@ -32,9 +33,13 @@ const renderVariants = () => {
3233
);
3334
};
3435

36+
const renderSearch = () => {
37+
return <Input placeholder={'Search'} />;
38+
};
39+
3540
function renderStory() {
3641
return (
37-
<FilterBar renderVariants={renderVariants}>
42+
<FilterBar renderSearch={renderSearch} renderVariants={renderVariants}>
3843
<FilterItem
3944
onChange={(e) => alert(e.getParameter('selectedItem').key)}
4045
filterItems={filterItems}

‎packages/fiori3/src/components/FilterBar/index.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import { withStyles } from '@fiori-for-react/styles';
33
import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
44
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
55
import styles from './FilterBar.jss';
6-
import { Input } from '../../lib/Input';
76
import { Button } from '../../lib/Button';
87
import { ButtonType } from '../../lib/ButtonType';
98

109
export interface FilterBarPropTypes extends Fiori3CommonProps {
1110
renderVariants?: () => JSX.Element;
12-
renderSearch?: boolean;
11+
renderSearch?: () => JSX.Element;
1312
children: ReactNode | ReactNodeArray;
1413
}
1514

@@ -19,8 +18,7 @@ interface FilterBarInternalProps extends FilterBarPropTypes, ClassProps {}
1918
export class FilterBar extends PureComponent<FilterBarPropTypes> {
2019
static defaultProps = {
2120
children: '',
22-
displayOnly: true,
23-
renderSearch: true
21+
displayOnly: true
2422
};
2523

2624
state = {
@@ -38,11 +36,7 @@ export class FilterBar extends PureComponent<FilterBarPropTypes> {
3836
<div className={classes.outerContainer}>
3937
<div className={classes.filterBarHeader}>
4038
{renderVariants && renderVariants()}
41-
{renderSearch && (
42-
<div className={classes.vLine}>
43-
<Input placeholder={'Search'} />
44-
</div>
45-
)}
39+
{renderSearch && <div className={classes.vLine}> {renderSearch()} </div>}
4640
<div className={classes.headerRowRight}>
4741
<Button onPress={this.handelHideFilterBar} type={ButtonType.Transparent}>
4842
{this.state.showFilters ? 'Hide Filter Bar' : 'Show Filter Bar'}

0 commit comments

Comments
 (0)