Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 7x 7x 7x 7x 2x 2x 2x 7x 7x 7x 7x 5x 7x 6x 15x 15x 15x 15x 7x 5x 5x 2x 1x 5x 2x | import React, { Component, Fragment } from "react"; import { connect } from "react-redux"; import { IconButton, Tooltip, Zoom, TextField } from "@material-ui/core"; import { Search as SearchIcon } from "@material-ui/icons"; import { searchPropType, searchTermPropType, rowsPropType, isRefreshingPropType } from "../../../proptypes"; import { search as searchAction } from "../../../redux/actions/datatableActions"; export class Search extends Component { constructor(props) { super(props); this.state = { openSearch: false }; this.searchInput = React.createRef(); } searchUpdate = e => { const { search } = this.props; const { value } = e.target; search(value); }; toggleSearch = () => { const { openSearch } = this.state; const { searchTerm } = this.props; if (!openSearch) { this.searchInput.current.focus(); } if (searchTerm.length === 0) { this.setState({ openSearch: !openSearch }); } }; render() { const { openSearch } = this.state; const { searchTerm, rows, isRefreshing } = this.props; const disabled = rows.length === 0 || isRefreshing; return ( <Fragment> <TextField className={ !openSearch ? "searchAnimationInput search-input" : "searchAnimationInputActive search-input" } inputRef={this.searchInput} onChange={this.searchUpdate} value={searchTerm} disabled={disabled} placeholder="Search.." /> <Tooltip TransitionComponent={Zoom} title={disabled ? "No data to filter" : "Toggle"} > <span> <IconButton className={disabled ? "disabled-icon search-icon" : "search-icon"} onClick={() => this.toggleSearch()} disabled={disabled} > <SearchIcon color="primary" /> </IconButton> </span> </Tooltip> </Fragment> ); } } Search.propTypes = { search: searchPropType, searchTerm: searchTermPropType.isRequired, rows: rowsPropType.isRequired, isRefreshing: isRefreshingPropType.isRequired }; const mapDispatchToProps = dispatch => { return { search: term => dispatch(searchAction(term)) }; }; const mapStateToProps = state => { return { rowsSelected: state.datatableReducer.rowsSelected, isRefreshing: state.datatableReducer.isRefreshing, rows: state.datatableReducer.data.rows, searchTerm: state.datatableReducer.searchTerm }; }; export default connect( mapStateToProps, mapDispatchToProps )(Search); |