Skip to content

Commit c5d4217

Browse files
vberschvbersch
authored
Refactor FilterItem (#65)
* refactoring(FilterBar): optimze coding and remove unnecessary rerenders * WIP: update snapshots
1 parent 3965719 commit c5d4217

File tree

5 files changed

+220
-227
lines changed

5 files changed

+220
-227
lines changed

‎packages/main/__karma_snapshots__/FilterBar.md‎

Lines changed: 135 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -69,51 +69,47 @@
6969
</div>
7070
</div>
7171
<div className="FilterBar-filterArea---">
72-
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
73-
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
74-
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
75-
<div style={{...}}>
76-
<Label for="">
77-
<ui5-label for="" class="">
78-
Classification
79-
</ui5-label>
80-
</Label>
81-
<Select onChange={[Function]} style={{...}} valueState="None">
82-
<ui5-select style={{...}} value-state="None" class="">
83-
<StandardListItem type="Active" data-key="1" infoState="None">
84-
<ui5-li type="Active" data-key="1" info-state="None" class="">
85-
Text 1
86-
</ui5-li>
87-
</StandardListItem>
88-
<StandardListItem type="Active" data-key="2" infoState="None">
89-
<ui5-li type="Active" data-key="2" info-state="None" class="">
90-
Text 2
91-
</ui5-li>
92-
</StandardListItem>
93-
</ui5-select>
94-
</Select>
95-
</div>
72+
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
73+
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
74+
<div className="-innerFilterItemContainer---">
75+
<Label for="">
76+
<ui5-label for="" class="">
77+
Classification
78+
</ui5-label>
79+
</Label>
80+
<Select onChange={[Function: onSelect]} style={{...}} valueState="None">
81+
<ui5-select style={{...}} value-state="None" class="">
82+
<Option data-key="1" icon={{...}}>
83+
<ui5-option data-key="1" icon={{...}} class="">
84+
Text 1
85+
</ui5-option>
86+
</Option>
87+
<Option data-key="2" icon={{...}}>
88+
<ui5-option data-key="2" icon={{...}} class="">
89+
Text 2
90+
</ui5-option>
91+
</Option>
92+
</ui5-select>
93+
</Select>
9694
</div>
97-
</FilterItem>
98-
</WithStyles(FilterItem)>
99-
<WithStyles(FilterItem) type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
100-
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
101-
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
102-
<div style={{...}}>
103-
<Label for="">
104-
<ui5-label for="" class="">
105-
Custom Filter 1
106-
</ui5-label>
107-
</Label>
108-
<div>
109-
<Switch onClick={[Function]} valueParameter="state" style={{...}}>
110-
<ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
111-
</Switch>
112-
</div>
95+
</div>
96+
</FilterItem>
97+
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
98+
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
99+
<div className="-innerFilterItemContainer---">
100+
<Label for="">
101+
<ui5-label for="" class="">
102+
Custom Filter 1
103+
</ui5-label>
104+
</Label>
105+
<div>
106+
<Switch onClick={[Function]} valueParameter="state" style={{...}}>
107+
<ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
108+
</Switch>
113109
</div>
114110
</div>
115-
</FilterItem>
116-
</WithStyles(FilterItem)>
111+
</div>
112+
</FilterItem>
117113
</div>
118114
</div>
119115
</FilterBar>
@@ -185,67 +181,63 @@
185181
</div>
186182
</div>
187183
<div className="FilterBar-filterArea---">
188-
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
189-
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
190-
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
191-
<div style={{...}}>
192-
<Label for="">
193-
<ui5-label for="" class="">
194-
Classification
195-
</ui5-label>
196-
</Label>
197-
<Select onChange={[Function]} style={{...}} valueState="None">
198-
<ui5-select style={{...}} value-state="None" class="">
199-
<StandardListItem type="Active" data-key="1" infoState="None">
200-
<ui5-li type="Active" data-key="1" info-state="None" class="">
201-
Text 1
202-
</ui5-li>
203-
</StandardListItem>
204-
<StandardListItem type="Active" data-key="2" infoState="None">
205-
<ui5-li type="Active" data-key="2" info-state="None" class="">
206-
Text 2
207-
</ui5-li>
208-
</StandardListItem>
209-
</ui5-select>
210-
</Select>
211-
</div>
184+
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
185+
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
186+
<div className="-innerFilterItemContainer---">
187+
<Label for="">
188+
<ui5-label for="" class="">
189+
Classification
190+
</ui5-label>
191+
</Label>
192+
<Select onChange={[Function: onSelect]} style={{...}} valueState="None">
193+
<ui5-select style={{...}} value-state="None" class="">
194+
<Option data-key="1" icon={{...}}>
195+
<ui5-option data-key="1" icon={{...}} class="">
196+
Text 1
197+
</ui5-option>
198+
</Option>
199+
<Option data-key="2" icon={{...}}>
200+
<ui5-option data-key="2" icon={{...}} class="">
201+
Text 2
202+
</ui5-option>
203+
</Option>
204+
</ui5-select>
205+
</Select>
212206
</div>
213-
</FilterItem>
214-
</WithStyles(FilterItem)>
215-
<WithStyles(FilterItem) type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
216-
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
217-
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
218-
<div style={{...}}>
219-
<Label for="">
220-
<ui5-label for="" class="">
221-
Custom Filter 1
222-
</ui5-label>
223-
</Label>
224-
<div>
225-
<Switch onClick={[Function]} valueParameter="state" style={{...}}>
226-
<ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
227-
</Switch>
228-
</div>
207+
</div>
208+
</FilterItem>
209+
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
210+
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
211+
<div className="-innerFilterItemContainer---">
212+
<Label for="">
213+
<ui5-label for="" class="">
214+
Custom Filter 1
215+
</ui5-label>
216+
</Label>
217+
<div>
218+
<Switch onClick={[Function]} valueParameter="state" style={{...}}>
219+
<ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
220+
</Switch>
229221
</div>
230222
</div>
231-
</FilterItem>
232-
</WithStyles(FilterItem)>
233-
<WithStyles(FilterItem) loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]}>
234-
<FilterItem loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} innerRef={{...}} classes={{...}} theme={{...}}>
235-
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
236-
<div style={{...}}>
237-
<Label for="">
238-
<ui5-label for="" class="">
239-
Custom Filter 1
240-
</ui5-label>
241-
</Label>
223+
</div>
224+
</FilterItem>
225+
<FilterItem loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]}>
226+
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
227+
<div className="-innerFilterItemContainer---">
228+
<Label for="">
229+
<ui5-label for="" class="">
230+
Custom Filter 1
231+
</ui5-label>
232+
</Label>
233+
<div className="-loadingContainer---">
242234
<BusyIndicator active={true} size="Medium" style={{...}}>
243235
<ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
244236
</BusyIndicator>
245237
</div>
246238
</div>
247-
</FilterItem>
248-
</WithStyles(FilterItem)>
239+
</div>
240+
</FilterItem>
249241
</div>
250242
</div>
251243
</FilterBar>
@@ -317,65 +309,61 @@
317309
</div>
318310
</div>
319311
<div className="FilterBar-filterArea---">
320-
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
321-
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
322-
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
323-
<div style={{...}}>
324-
<Label for="">
325-
<ui5-label for="" class="">
326-
Classification
327-
</ui5-label>
328-
</Label>
329-
<Select onChange={[Function]} style={{...}} valueState="None">
330-
<ui5-select style={{...}} value-state="None" class="">
331-
<StandardListItem type="Active" data-key="1" infoState="None">
332-
<ui5-li type="Active" data-key="1" info-state="None" class="">
333-
Text 1
334-
</ui5-li>
335-
</StandardListItem>
336-
<StandardListItem type="Active" data-key="2" infoState="None">
337-
<ui5-li type="Active" data-key="2" info-state="None" class="">
338-
Text 2
339-
</ui5-li>
340-
</StandardListItem>
341-
</ui5-select>
342-
</Select>
343-
</div>
312+
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
313+
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
314+
<div className="-innerFilterItemContainer---">
315+
<Label for="">
316+
<ui5-label for="" class="">
317+
Classification
318+
</ui5-label>
319+
</Label>
320+
<Select onChange={[Function: onSelect]} style={{...}} valueState="None">
321+
<ui5-select style={{...}} value-state="None" class="">
322+
<Option data-key="1" icon={{...}}>
323+
<ui5-option data-key="1" icon={{...}} class="">
324+
Text 1
325+
</ui5-option>
326+
</Option>
327+
<Option data-key="2" icon={{...}}>
328+
<ui5-option data-key="2" icon={{...}} class="">
329+
Text 2
330+
</ui5-option>
331+
</Option>
332+
</ui5-select>
333+
</Select>
344334
</div>
345-
</FilterItem>
346-
</WithStyles(FilterItem)>
347-
<WithStyles(FilterItem) loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]}>
348-
<FilterItem loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} innerRef={{...}} classes={{...}} theme={{...}}>
349-
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
350-
<div style={{...}}>
351-
<Label for="">
352-
<ui5-label for="" class="">
353-
Classification
354-
</ui5-label>
355-
</Label>
335+
</div>
336+
</FilterItem>
337+
<FilterItem loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]}>
338+
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
339+
<div className="-innerFilterItemContainer---">
340+
<Label for="">
341+
<ui5-label for="" class="">
342+
Classification
343+
</ui5-label>
344+
</Label>
345+
<div className="-loadingContainer---">
356346
<BusyIndicator active={true} size="Medium" style={{...}}>
357347
<ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
358348
</BusyIndicator>
359349
</div>
360350
</div>
361-
</FilterItem>
362-
</WithStyles(FilterItem)>
363-
<WithStyles(FilterItem) label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
364-
<FilterItem label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
365-
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
366-
<div style={{...}}>
367-
<Label for="">
368-
<ui5-label for="" class="">
369-
Classification
370-
</ui5-label>
371-
</Label>
372-
<Input placeholder="" onChange={[Function]} style={{...}} type="Text" value="" valueState="None">
373-
<ui5-input placeholder="" style={{...}} type="Text" value="" value-state="None" class="" />
374-
</Input>
375-
</div>
351+
</div>
352+
</FilterItem>
353+
<FilterItem label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
354+
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
355+
<div className="-innerFilterItemContainer---">
356+
<Label for="">
357+
<ui5-label for="" class="">
358+
Classification
359+
</ui5-label>
360+
</Label>
361+
<Input placeholder="" onChange={[Function: onSelect]} style={{...}} type="Text" value="" valueState="None">
362+
<ui5-input placeholder="" style={{...}} type="Text" value="" value-state="None" class="" />
363+
</Input>
376364
</div>
377-
</FilterItem>
378-
</WithStyles(FilterItem)>
365+
</div>
366+
</FilterItem>
379367
</div>
380368
</div>
381369
</FilterBar>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ function renderStory() {
4646
label="Classification"
4747
key="classification"
4848
type={FilterType.Select}
49+
loading={boolean('loading', false)}
4950
/>
5051
<FilterItem
5152
key={'filter2'}

0 commit comments

Comments
 (0)