Skip to content

Commit 19a23ec

Browse files
TobiasKoehler01TobiasKoehler01
committed
feat(FilterItem): Initial Version
1 parent 1456b0d commit 19a23ec

File tree

6 files changed

+170
-0
lines changed

6 files changed

+170
-0
lines changed

‎packages/fiori3/src/components/FilterItem/FilterItem.jss.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const styles = () => ({
2+
filterItem: {
3+
minWidth: '10rem',
4+
height: 'fit-content',
5+
marginRight: '0.5rem'
6+
}
7+
});
8+
9+
export default styles;

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// import { FilterItem } from './index';
2+
// import React from 'react';
3+
// import { mountThemedComponent } from '@shared/tests/utils';
4+
// import { expect, use } from 'chai';
5+
// import { matchSnapshot } from 'chai-karma-snapshot';
6+
//
7+
// const variantItems = [{ label: 'Variant 1', key: '1' }, { label: 'Variant 2', key: '2' }];
8+
//
9+
// const renderVariant = () => <VariantManagement variantItems={variantItems} />;
10+
//
11+
// use(matchSnapshot);
12+
//
13+
// describe('FilterItem', () => {
14+
//
15+
// it('Render without crashing', () => {
16+
// const wrapper = mountThemedComponent();
17+
// expect(wrapper.debug()).to.matchSnapshot();
18+
// });
19+
//
20+
// // it('With suggestions', () => {
21+
// // const callback = sinon.spy();
22+
// // const wrapper = mountThemedComponent(<VariantManagement onSelect={callback} variantItems={variantItems} />);
23+
// //
24+
// // console.log('find button', wrapper.find(Button));
25+
// //
26+
// //
27+
// //
28+
// // // @ts-ignore
29+
// // (wrapper.find(Button).first().prop('onPress') as any)({target: {}});
30+
// //
31+
// //
32+
// // wrapper.update();
33+
// //
34+
// // const listItem = wrapper
35+
// // // @ts-ignore
36+
// // .find(ListItem.InnerComponent)
37+
// // .last()
38+
// // .find('li');
39+
// // listItem.simulate('click');
40+
// //
41+
// // expect(wrapper.debug()).to.matchSnapshot();
42+
// // expect(getEventFromCallback(callback).getParameter('selectedItem')).to.equal(variantItems[1]);
43+
// //
44+
// //
45+
// // });
46+
// });

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { ClassProps } from '@fiori-for-react/core/types/ClassProps';
2+
import React, { PureComponent, ReactNode } from 'react';
3+
import styles from './FilterItem.jss';
4+
import { Label } from '../../webComponents/Label';
5+
import { Input } from '../../webComponents/Input';
6+
import { Select } from '../../webComponents/Select';
7+
import { StandardListItem } from '../../webComponents/StandardListItem';
8+
import { BusyIndicator } from '../BusyIndicator';
9+
import { FilterType } from '../../enums/FilterType';
10+
import { Event, StyleClassHelper } from '@fiori-for-react/utils';
11+
import { withStyles } from '@fiori-for-react/core/utils/withStyles';
12+
import { CommonProps } from '@fiori-for-react/core/interfaces';
13+
import { ListItemTypes } from '../..';
14+
15+
export interface FilterItemPropTypes extends CommonProps {
16+
placeholder?: string;
17+
renderText?: (item?: any) => JSX.Element;
18+
type?: FilterType;
19+
label?: string;
20+
filterItems?: any[];
21+
onChange?: (event: Event) => void;
22+
loading?: boolean;
23+
children?: ReactNode;
24+
valueParamName?: string;
25+
changeEventName?: string;
26+
}
27+
28+
interface FilterItemInternalProps extends FilterItemPropTypes, ClassProps {}
29+
30+
@withStyles(styles)
31+
export class FilterItem extends PureComponent<FilterItemPropTypes> {
32+
state = {
33+
selectedText: ''
34+
};
35+
36+
static defaultProps = {
37+
placeholder: '',
38+
renderText: (item) => (item && item.text) || '',
39+
type: FilterType.Default,
40+
filterItems: [],
41+
label: '',
42+
onChange: () => null,
43+
loading: false
44+
};
45+
46+
private onSelect = (e) => {
47+
const selectedKey = e.getParameter('selectedItem').getAttribute('data-key');
48+
const { filterItems } = this.props;
49+
const selectedItem = this._getItemByKey(selectedKey, filterItems) || filterItems[0];
50+
this.setState({ selectedItem });
51+
this.props.onChange(Event.of(this, e.getOriginalEvent(), { selectedItem }));
52+
};
53+
54+
_getItemByKey(key, items) {
55+
return items.filter((item) => item.key === key)[0];
56+
}
57+
58+
private getFilterComponent = () => {
59+
const { type, filterItems, placeholder, children, loading } = this.props as FilterItemInternalProps;
60+
switch (type) {
61+
case FilterType.Default:
62+
return <Input placeholder={placeholder} onChange={this.onSelect} style={{ width: '100%' }} />;
63+
case FilterType.Select:
64+
if (loading) {
65+
return <BusyIndicator />;
66+
}
67+
return (
68+
<Select onChange={this.onSelect} style={{ width: '100%' }}>
69+
{filterItems.map((item) => (
70+
<StandardListItem type={ListItemTypes.Active} key={item.key} data-key={item.key}>
71+
{item.text}
72+
</StandardListItem>
73+
))}
74+
</Select>
75+
);
76+
case FilterType.Custom:
77+
if (loading) {
78+
return <BusyIndicator />;
79+
}
80+
return (
81+
<div>
82+
{React.Children.map(children, (child) => {
83+
return React.cloneElement(child as React.ReactElement<any>, {
84+
[this.props.changeEventName]: this.onSelect,
85+
valueParameter: this.props.valueParamName,
86+
style: { width: '100%' }
87+
});
88+
})}
89+
</div>
90+
);
91+
}
92+
};
93+
94+
render() {
95+
const { label, classes, style, tooltip } = this.props as FilterItemInternalProps;
96+
const filterItemClasses = StyleClassHelper.of(classes.filterItem);
97+
98+
return (
99+
<div className={filterItemClasses.toString()} style={style} title={tooltip}>
100+
<Label>{label}</Label>
101+
{this.getFilterComponent()}
102+
</div>
103+
);
104+
}
105+
}

‎packages/fiori3/src/enums/FilterType.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum FilterType {
2+
Default = 'Default',
3+
Select = 'Select',
4+
Custom = 'Custom'
5+
}

‎packages/fiori3/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { CustomListItem } from './lib/CustomListItem';
1616
import { DatePicker } from './lib/DatePicker';
1717
import { DeviationIndicator } from './lib/DeviationIndicator';
1818
import { Dialog } from './lib/Dialog';
19+
import { FilterItem } from './lib/FilterItem';
1920
import { FlexBox } from './lib/FlexBox';
2021
import { FlexBoxAlignItems } from './lib/FlexBoxAlignItems';
2122
import { FlexBoxDirection } from './lib/FlexBoxDirection';
@@ -100,6 +101,7 @@ export {
100101
Carousel,
101102
InfoLabel,
102103
Bar,
104+
FilterItem,
103105
FlexBox,
104106
FlexBoxJustifyContent,
105107
FlexBoxAlignItems,

‎packages/fiori3/src/lib/FilterItem.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { FilterItem } from '../components/FilterItem';
2+
3+
export { FilterItem };

0 commit comments

Comments
 (0)