Skip to content

Commit

Permalink
fix(FilterItem): BusyIndicator is displayed when loading prop is true (…
Browse files Browse the repository at this point in the history 
…#63)
  • Loading branch information
@Lukas742 @MarcusNotheis
Lukas742 authored and MarcusNotheis committed Jul 19, 2019
1 parent 0c9b143 commit 9d88985
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 103 deletions.
214 changes: 115 additions & 99 deletions packages/main/__karma_snapshots__/FilterBar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,40 +72,44 @@
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<StandardListItem type="Active" data-key="1" infoState="None">
<ui5-li type="Active" data-key="1" info-state="None" class="">
Text 1
</ui5-li>
</StandardListItem>
<StandardListItem type="Active" data-key="2" infoState="None">
<ui5-li type="Active" data-key="2" info-state="None" class="">
Text 2
</ui5-li>
</StandardListItem>
</ui5-select>
</Select>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<StandardListItem type="Active" data-key="1" infoState="None">
<ui5-li type="Active" data-key="1" info-state="None" class="">
Text 1
</ui5-li>
</StandardListItem>
<StandardListItem type="Active" data-key="2" infoState="None">
<ui5-li type="Active" data-key="2" info-state="None" class="">
Text 2
</ui5-li>
</StandardListItem>
</ui5-select>
</Select>
</div>
</div>
</FilterItem>
</WithStyles(FilterItem)>
<WithStyles(FilterItem) type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
<Label for="">
<ui5-label for="" class="">
Custom Filter 1
</ui5-label>
</Label>
<div>
<Switch onClick={[Function]} valueParameter="state" style={{...}}>
<ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
</Switch>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Custom Filter 1
</ui5-label>
</Label>
<div>
<Switch onClick={[Function]} valueParameter="state" style={{...}}>
<ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
</Switch>
</div>
</div>
</div>
</FilterItem>
Expand Down Expand Up @@ -184,55 +188,61 @@
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<StandardListItem type="Active" data-key="1" infoState="None">
<ui5-li type="Active" data-key="1" info-state="None" class="">
Text 1
</ui5-li>
</StandardListItem>
<StandardListItem type="Active" data-key="2" infoState="None">
<ui5-li type="Active" data-key="2" info-state="None" class="">
Text 2
</ui5-li>
</StandardListItem>
</ui5-select>
</Select>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<StandardListItem type="Active" data-key="1" infoState="None">
<ui5-li type="Active" data-key="1" info-state="None" class="">
Text 1
</ui5-li>
</StandardListItem>
<StandardListItem type="Active" data-key="2" infoState="None">
<ui5-li type="Active" data-key="2" info-state="None" class="">
Text 2
</ui5-li>
</StandardListItem>
</ui5-select>
</Select>
</div>
</div>
</FilterItem>
</WithStyles(FilterItem)>
<WithStyles(FilterItem) type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
<Label for="">
<ui5-label for="" class="">
Custom Filter 1
</ui5-label>
</Label>
<div>
<Switch onClick={[Function]} valueParameter="state" style={{...}}>
<ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
</Switch>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Custom Filter 1
</ui5-label>
</Label>
<div>
<Switch onClick={[Function]} valueParameter="state" style={{...}}>
<ui5-switch on-click={[Function]} value-parameter="state" style={{...}} class="" />
</Switch>
</div>
</div>
</div>
</FilterItem>
</WithStyles(FilterItem)>
<WithStyles(FilterItem) loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]}>
<FilterItem loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
<Label for="">
<ui5-label for="" class="">
Custom Filter 1
</ui5-label>
</Label>
<BusyIndicator size="Large">
<ui5-busyindicator size="Large" class="" />
</BusyIndicator>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Custom Filter 1
</ui5-label>
</Label>
<BusyIndicator active={true} size="Medium" style={{...}}>
<ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
</BusyIndicator>
</div>
</div>
</FilterItem>
</WithStyles(FilterItem)>
Expand Down Expand Up @@ -310,53 +320,59 @@
<WithStyles(FilterItem) filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<StandardListItem type="Active" data-key="1" infoState="None">
<ui5-li type="Active" data-key="1" info-state="None" class="">
Text 1
</ui5-li>
</StandardListItem>
<StandardListItem type="Active" data-key="2" infoState="None">
<ui5-li type="Active" data-key="2" info-state="None" class="">
Text 2
</ui5-li>
</StandardListItem>
</ui5-select>
</Select>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<StandardListItem type="Active" data-key="1" infoState="None">
<ui5-li type="Active" data-key="1" info-state="None" class="">
Text 1
</ui5-li>
</StandardListItem>
<StandardListItem type="Active" data-key="2" infoState="None">
<ui5-li type="Active" data-key="2" info-state="None" class="">
Text 2
</ui5-li>
</StandardListItem>
</ui5-select>
</Select>
</div>
</div>
</FilterItem>
</WithStyles(FilterItem)>
<WithStyles(FilterItem) loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]}>
<FilterItem loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<BusyIndicator size="Large">
<ui5-busyindicator size="Large" class="" />
</BusyIndicator>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<BusyIndicator active={true} size="Medium" style={{...}}>
<ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
</BusyIndicator>
</div>
</div>
</FilterItem>
</WithStyles(FilterItem)>
<WithStyles(FilterItem) label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
<FilterItem label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="FilterItem-filterItem---" style={[undefined]} title={[undefined]}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Input placeholder="" onChange={[Function]} style={{...}} type="Text" value="" valueState="None">
<ui5-input placeholder="" style={{...}} type="Text" value="" value-state="None" class="" />
</Input>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Input placeholder="" onChange={[Function]} style={{...}} type="Text" value="" valueState="None">
<ui5-input placeholder="" style={{...}} type="Text" value="" value-state="None" class="" />
</Input>
</div>
</div>
</FilterItem>
</WithStyles(FilterItem)>
Expand Down
29 changes: 25 additions & 4 deletions packages/main/src/components/FilterItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { ListItemTypes } from '../../lib/ListItemTypes';
import { Select } from '../../lib/Select';
import { StandardListItem } from '../../lib/StandardListItem';
import styles from './FilterItem.jss';
import { BusyIndicatorType } from '../../lib/BusyIndicatorType';

export interface FilterItemPropTypes extends CommonProps {
placeholder?: string;
Expand Down Expand Up @@ -61,7 +62,13 @@ export class FilterItem extends PureComponent<FilterItemPropTypes> {
return <Input placeholder={placeholder} onChange={this.onSelect} style={{ width: '100%' }} />;
case FilterType.Select:
if (loading) {
return <BusyIndicator />;
return (
<BusyIndicator
active
size={BusyIndicatorType.Medium}
style={{ backgroundColor: 'transparent', width: '80px' }}
/>
);
}
return (
<Select onChange={this.onSelect} style={{ width: '100%' }}>
Expand All @@ -74,7 +81,13 @@ export class FilterItem extends PureComponent<FilterItemPropTypes> {
);
case FilterType.Custom:
if (loading) {
return <BusyIndicator />;
return (
<BusyIndicator
active
size={BusyIndicatorType.Medium}
style={{ backgroundColor: 'transparent', width: '80px' }}
/>
);
}
return (
<div>
Expand Down Expand Up @@ -103,8 +116,16 @@ export class FilterItem extends PureComponent<FilterItemPropTypes> {

return (
<div ref={innerRef} className={filterItemClasses.toString()} style={style} title={tooltip}>
<Label>{label}</Label>
{this.getFilterComponent()}
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'start'
}}
>
<Label>{label}</Label>
{this.getFilterComponent()}
</div>
</div>
);
}
Expand Down

0 comments on commit 9d88985

Please sign in to comment.