mirror of
https://github.com/ansible/awx.git
synced 2026-05-17 14:27:42 -02:30
use constructor bound methods for data toolbar
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user