use constructor bound methods for data toolbar

This commit is contained in:
Jake McDermott
2019-01-03 12:16:06 -05:00
parent e5cdea8daf
commit e015558190

View File

@@ -43,17 +43,24 @@ class DataListToolbar extends React.Component {
searchKey: sortedColumnKey, searchKey: sortedColumnKey,
searchValue: '', searchValue: '',
}; };
this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
this.onSortDropdownToggle = this.onSortDropdownToggle.bind(this);
this.onSortDropdownSelect = this.onSortDropdownSelect.bind(this);
this.onSearch = this.onSearch.bind(this);
this.onSearchDropdownToggle = this.onSearchDropdownToggle.bind(this);
this.onSearchDropdownSelect = this.onSearchDropdownSelect.bind(this);
} }
handleSearchInputChange = searchValue => { handleSearchInputChange (searchValue) {
this.setState({ searchValue }); this.setState({ searchValue });
}; }
onSortDropdownToggle = isSortDropdownOpen => { onSortDropdownToggle (isSortDropdownOpen) {
this.setState({ isSortDropdownOpen }); this.setState({ isSortDropdownOpen });
}; }
onSortDropdownSelect = ({ target }) => { onSortDropdownSelect ({ target }) {
const { columns, onSort, sortOrder } = this.props; const { columns, onSort, sortOrder } = this.props;
const [{ key }] = columns.filter(({ name }) => name === target.innerText); const [{ key }] = columns.filter(({ name }) => name === target.innerText);
@@ -61,27 +68,33 @@ class DataListToolbar extends React.Component {
this.setState({ isSortDropdownOpen: false }); this.setState({ isSortDropdownOpen: false });
onSort(key, sortOrder); onSort(key, sortOrder);
}; }
onSearchDropdownToggle = isSearchDropdownOpen => { onSearchDropdownToggle (isSearchDropdownOpen) {
this.setState({ isSearchDropdownOpen }); this.setState({ isSearchDropdownOpen });
}; }
onSearchDropdownSelect = ({ target }) => { onSearchDropdownSelect ({ target }) {
const { columns } = this.props; const { columns } = this.props;
const targetName = target.innerText; const targetName = target.innerText;
const [{ key }] = columns.filter(({ name }) => name === targetName); const [{ key }] = columns.filter(({ name }) => name === targetName);
this.setState({ isSearchDropdownOpen: false, searchKey: key }); this.setState({ isSearchDropdownOpen: false, searchKey: key });
}; }
onSearch () {
const { searchValue } = this.state;
const { onSearch } = this.props;
onSearch(searchValue);
}
render () { render () {
const { up } = DropdownPosition; const { up } = DropdownPosition;
const { const {
columns, columns,
isAllSelected, isAllSelected,
onSearch,
onSelectAll, onSelectAll,
onSort, onSort,
sortedColumnKey, sortedColumnKey,
@@ -175,7 +188,7 @@ class DataListToolbar extends React.Component {
<Button <Button
variant="tertiary" variant="tertiary"
aria-label={i18n._(t`Search`)} aria-label={i18n._(t`Search`)}
onClick={() => onSearch(searchValue)} onClick={this.onSearch}
> >
<i className="fas fa-search" aria-hidden="true" /> <i className="fas fa-search" aria-hidden="true" />
</Button> </Button>