Skip to content

Commit 9d88985

Browse files
Lukas742MarcusNotheis
Lukas742
authored and
MarcusNotheis
committed
fix(FilterItem): BusyIndicator is displayed when loading prop is true (#63)
1 parent 0c9b143 commit 9d88985

File tree

2 files changed

+140
-103
lines changed

2 files changed

+140
-103
lines changed

‎packages/main/__karma_snapshots__/FilterBar.md

Lines changed: 115 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -72,40 +72,44 @@
7272
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
7373
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
7474
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
75-
<Label for="">
76-
<ui5-label for="" class="">
77-
Classification
78-
</ui5-label>
79-
</Label>
80-
<Select onChange={[Function]} style={{...}} valueState="None">
81-
<ui5-select style={{...}} value-state="None" class="">
82-
<StandardListItem type="Active" data-key="1" infoState="None">
83-
<ui5-li type="Active" data-key="1" info-state="None" class="">
84-
Text 1
85-
</ui5-li>
86-
</StandardListItem>
87-
<StandardListItem type="Active" data-key="2" infoState="None">
88-
<ui5-li type="Active" data-key="2" info-state="None" class="">
89-
Text 2
90-
</ui5-li>
91-
</StandardListItem>
92-
</ui5-select>
93-
</Select>
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>
9496
</div>
9597
</FilterItem>
9698
</WithStyles(FilterItem)>
9799
<WithStyles(FilterItem) type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
98100
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
99101
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
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>
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>
109113
</div>
110114
</div>
111115
</FilterItem>
@@ -184,55 +188,61 @@
184188
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
185189
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
186190
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
187-
<Label for="">
188-
<ui5-label for="" class="">
189-
Classification
190-
</ui5-label>
191-
</Label>
192-
<Select onChange={[Function]} style={{...}} valueState="None">
193-
<ui5-select style={{...}} value-state="None" class="">
194-
<StandardListItem type="Active" data-key="1" infoState="None">
195-
<ui5-li type="Active" data-key="1" info-state="None" class="">
196-
Text 1
197-
</ui5-li>
198-
</StandardListItem>
199-
<StandardListItem type="Active" data-key="2" infoState="None">
200-
<ui5-li type="Active" data-key="2" info-state="None" class="">
201-
Text 2
202-
</ui5-li>
203-
</StandardListItem>
204-
</ui5-select>
205-
</Select>
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>
206212
</div>
207213
</FilterItem>
208214
</WithStyles(FilterItem)>
209215
<WithStyles(FilterItem) type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
210216
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
211217
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
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>
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>
221229
</div>
222230
</div>
223231
</FilterItem>
224232
</WithStyles(FilterItem)>
225233
<WithStyles(FilterItem) loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]}>
226234
<FilterItem loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} innerRef={{...}} classes={{...}} theme={{...}}>
227235
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
228-
<Label for="">
229-
<ui5-label for="" class="">
230-
Custom Filter 1
231-
</ui5-label>
232-
</Label>
233-
<BusyIndicator size="Large">
234-
<ui5-busyindicator size="Large" class="" />
235-
</BusyIndicator>
236+
<div style={{...}}>
237+
<Label for="">
238+
<ui5-label for="" class="">
239+
Custom Filter 1
240+
</ui5-label>
241+
</Label>
242+
<BusyIndicator active={true} size="Medium" style={{...}}>
243+
<ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
244+
</BusyIndicator>
245+
</div>
236246
</div>
237247
</FilterItem>
238248
</WithStyles(FilterItem)>
@@ -310,53 +320,59 @@
310320
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
311321
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
312322
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
313-
<Label for="">
314-
<ui5-label for="" class="">
315-
Classification
316-
</ui5-label>
317-
</Label>
318-
<Select onChange={[Function]} style={{...}} valueState="None">
319-
<ui5-select style={{...}} value-state="None" class="">
320-
<StandardListItem type="Active" data-key="1" infoState="None">
321-
<ui5-li type="Active" data-key="1" info-state="None" class="">
322-
Text 1
323-
</ui5-li>
324-
</StandardListItem>
325-
<StandardListItem type="Active" data-key="2" infoState="None">
326-
<ui5-li type="Active" data-key="2" info-state="None" class="">
327-
Text 2
328-
</ui5-li>
329-
</StandardListItem>
330-
</ui5-select>
331-
</Select>
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>
332344
</div>
333345
</FilterItem>
334346
</WithStyles(FilterItem)>
335347
<WithStyles(FilterItem) loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]}>
336348
<FilterItem loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} innerRef={{...}} classes={{...}} theme={{...}}>
337349
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
338-
<Label for="">
339-
<ui5-label for="" class="">
340-
Classification
341-
</ui5-label>
342-
</Label>
343-
<BusyIndicator size="Large">
344-
<ui5-busyindicator size="Large" class="" />
345-
</BusyIndicator>
350+
<div style={{...}}>
351+
<Label for="">
352+
<ui5-label for="" class="">
353+
Classification
354+
</ui5-label>
355+
</Label>
356+
<BusyIndicator active={true} size="Medium" style={{...}}>
357+
<ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
358+
</BusyIndicator>
359+
</div>
346360
</div>
347361
</FilterItem>
348362
</WithStyles(FilterItem)>
349363
<WithStyles(FilterItem) label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
350364
<FilterItem label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
351365
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
352-
<Label for="">
353-
<ui5-label for="" class="">
354-
Classification
355-
</ui5-label>
356-
</Label>
357-
<Input placeholder="" onChange={[Function]} style={{...}} type="Text" value="" valueState="None">
358-
<ui5-input placeholder="" style={{...}} type="Text" value="" value-state="None" class="" />
359-
</Input>
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>
360376
</div>
361377
</FilterItem>
362378
</WithStyles(FilterItem)>

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ListItemTypes } from '../../lib/ListItemTypes';
1010
import { Select } from '../../lib/Select';
1111
import { StandardListItem } from '../../lib/StandardListItem';
1212
import styles from './FilterItem.jss';
13+
import { BusyIndicatorType } from '../../lib/BusyIndicatorType';
1314

1415
export interface FilterItemPropTypes extends CommonProps {
1516
placeholder?: string;
@@ -61,7 +62,13 @@ export class FilterItem extends PureComponent<FilterItemPropTypes> {
6162
return <Input placeholder={placeholder} onChange={this.onSelect} style={{ width: '100%' }} />;
6263
case FilterType.Select:
6364
if (loading) {
64-
return <BusyIndicator />;
65+
return (
66+
<BusyIndicator
67+
active
68+
size={BusyIndicatorType.Medium}
69+
style={{ backgroundColor: 'transparent', width: '80px' }}
70+
/>
71+
);
6572
}
6673
return (
6774
<Select onChange={this.onSelect} style={{ width: '100%' }}>
@@ -74,7 +81,13 @@ export class FilterItem extends PureComponent<FilterItemPropTypes> {
7481
);
7582
case FilterType.Custom:
7683
if (loading) {
77-
return <BusyIndicator />;
84+
return (
85+
<BusyIndicator
86+
active
87+
size={BusyIndicatorType.Medium}
88+
style={{ backgroundColor: 'transparent', width: '80px' }}
89+
/>
90+
);
7891
}
7992
return (
8093
<div>
@@ -103,8 +116,16 @@ export class FilterItem extends PureComponent<FilterItemPropTypes> {
103116

104117
return (
105118
<div ref={innerRef} className={filterItemClasses.toString()} style={style} title={tooltip}>
106-
<Label>{label}</Label>
107-
{this.getFilterComponent()}
119+
<div
120+
style={{
121+
display: 'flex',
122+
flexDirection: 'column',
123+
justifyContent: 'start'
124+
}}
125+
>
126+
<Label>{label}</Label>
127+
{this.getFilterComponent()}
128+
</div>
108129
</div>
109130
);
110131
}

0 commit comments

Comments
 (0)