Skip to content

Refactor FilterItem #65

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 3 commits into from
Jul 22, 2019
Merged

Refactor FilterItem #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e1e1032
refactoring(FilterBar): optimze coding and remove unnecessary rerenders
vbersch Jul 22, 2019
9c33009
WIP: update snapshots
vbersch Jul 22, 2019
2eeae5d
Merge branch 'master' into reafactoring/FilterItem
vbersch Jul 22, 2019
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
282 changes: 135 additions & 147 deletions packages/main/__karma_snapshots__/FilterBar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,51 +69,47 @@
</div>
</div>
<div className="FilterBar-filterArea---">
<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]}>
<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>
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
<div className="-innerFilterItemContainer---">
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function: onSelect]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<Option data-key="1" icon={{...}}>
<ui5-option data-key="1" icon={{...}} class="">
Text 1
</ui5-option>
</Option>
<Option data-key="2" icon={{...}}>
<ui5-option data-key="2" icon={{...}} class="">
Text 2
</ui5-option>
</Option>
</ui5-select>
</Select>
</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]}>
<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>
</FilterItem>
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
<div className="-innerFilterItemContainer---">
<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>
</FilterItem>
</WithStyles(FilterItem)>
</div>
</FilterItem>
</div>
</div>
</FilterBar>
Expand Down Expand Up @@ -185,67 +181,63 @@
</div>
</div>
<div className="FilterBar-filterArea---">
<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]}>
<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>
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
<div className="-innerFilterItemContainer---">
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function: onSelect]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<Option data-key="1" icon={{...}}>
<ui5-option data-key="1" icon={{...}} class="">
Text 1
</ui5-option>
</Option>
<Option data-key="2" icon={{...}}>
<ui5-option data-key="2" icon={{...}} class="">
Text 2
</ui5-option>
</Option>
</ui5-select>
</Select>
</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]}>
<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>
</FilterItem>
<FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
<div className="-innerFilterItemContainer---">
<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>
</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]}>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Custom Filter 1
</ui5-label>
</Label>
</div>
</FilterItem>
<FilterItem loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]}>
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
<div className="-innerFilterItemContainer---">
<Label for="">
<ui5-label for="" class="">
Custom Filter 1
</ui5-label>
</Label>
<div className="-loadingContainer---">
<BusyIndicator active={true} size="Medium" style={{...}}>
<ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
</BusyIndicator>
</div>
</div>
</FilterItem>
</WithStyles(FilterItem)>
</div>
</FilterItem>
</div>
</div>
</FilterBar>
Expand Down Expand Up @@ -317,65 +309,61 @@
</div>
</div>
<div className="FilterBar-filterArea---">
<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]}>
<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>
<FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
<div className="-innerFilterItemContainer---">
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Select onChange={[Function: onSelect]} style={{...}} valueState="None">
<ui5-select style={{...}} value-state="None" class="">
<Option data-key="1" icon={{...}}>
<ui5-option data-key="1" icon={{...}} class="">
Text 1
</ui5-option>
</Option>
<Option data-key="2" icon={{...}}>
<ui5-option data-key="2" icon={{...}} class="">
Text 2
</ui5-option>
</Option>
</ui5-select>
</Select>
</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]}>
<div style={{...}}>
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
</div>
</FilterItem>
<FilterItem loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]}>
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
<div className="-innerFilterItemContainer---">
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<div className="-loadingContainer---">
<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]}>
<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>
<FilterItem label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
<div className="-filterItem---" style={[undefined]} title={[undefined]}>
<div className="-innerFilterItemContainer---">
<Label for="">
<ui5-label for="" class="">
Classification
</ui5-label>
</Label>
<Input placeholder="" onChange={[Function: onSelect]} style={{...}} type="Text" value="" valueState="None">
<ui5-input placeholder="" style={{...}} type="Text" value="" value-state="None" class="" />
</Input>
</div>
</FilterItem>
</WithStyles(FilterItem)>
</div>
</FilterItem>
</div>
</div>
</FilterBar>
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/components/FilterBar/demo.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ function renderStory() {
label="Classification"
key="classification"
type={FilterType.Select}
loading={boolean('loading', false)}
/>
<FilterItem
key={'filter2'}
Expand Down
Loading