Table: Adds column filtering (#27225)

* Table: Adds column filters

* Refactor: adds filter by value function

* Refactor: some styling and sorting

* Refactor: Moves filterByValue to utils

* Tests: add filterByValue tests

* Refactor: simplifies filteredValues

* Refactor: adds dropshadow

* Refactor: keeps icons together with label and aligns with column alignment

* Refactor: hides clear filter if no filter is active

* Refactor: changes how values in filter are populated

* Refactor: adds filterable field override

* Tests: fixed broken tests

* Refactor: adds FilterList

* Refactor: adds blanks entry for non value labels

* Refactor: using preFilteredRows in filter list

* Refactor: adds filter input

* Refactor: fixes issue found by e2e

* Refactor: changes after PR comments

* Docs: adds documentation for Column filter

* Refactor: moves functions to utils and adds tests

* Refactor: memoizes filter function

* Docs: reverts docs for now
This commit is contained in:
Hugo Häggmark
2020-09-01 17:06:35 +02:00
committed by GitHub
parent aff9e931ce
commit ff1149ac39
9 changed files with 653 additions and 22 deletions

View File

@ -11,6 +11,11 @@ export interface Props {
*/
includeButtonPress: boolean;
parent: Window | Document;
/**
* https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Defaults to false.
*/
useCapture?: boolean;
}
interface State {
@ -21,23 +26,24 @@ export class ClickOutsideWrapper extends PureComponent<Props, State> {
static defaultProps = {
includeButtonPress: true,
parent: window,
useCapture: false,
};
state = {
hasEventListener: false,
};
componentDidMount() {
this.props.parent.addEventListener('click', this.onOutsideClick, false);
this.props.parent.addEventListener('click', this.onOutsideClick, this.props.useCapture);
if (this.props.includeButtonPress) {
// Use keyup since keydown already has an eventlistener on window
this.props.parent.addEventListener('keyup', this.onOutsideClick, false);
this.props.parent.addEventListener('keyup', this.onOutsideClick, this.props.useCapture);
}
}
componentWillUnmount() {
this.props.parent.removeEventListener('click', this.onOutsideClick, false);
this.props.parent.removeEventListener('click', this.onOutsideClick, this.props.useCapture);
if (this.props.includeButtonPress) {
this.props.parent.removeEventListener('keyup', this.onOutsideClick, false);
this.props.parent.removeEventListener('keyup', this.onOutsideClick, this.props.useCapture);
}
}