All files / src/components/DatatableHeader/Widgets Search.js

100% Statements 25/25
100% Branches 12/12
100% Functions 8/8
100% Lines 25/25

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);