Skip to content

fix(FilterItem): BusyIndicator is displayed when loading prop is true #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 19, 2019
Merged

fix(FilterItem): BusyIndicator is displayed when loading prop is true #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 115 additions & 99 deletions packages/main/__karma_snapshots__/FilterBar.md
View file
Open in desktop
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
Open in desktop
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