@6thquake/react-material/es/Table/TreeTable/TableToolbar.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import React, { Component } from 'react';
import Toolbar from '../../Toolbar';
import Search from '../../Search';
import IconButton from '../../IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import GetApp from '@material-ui/icons/GetApp';
import { withStyles } from '../../styles';
import Menu from '../../Menu';
import MenuItem from '../../MenuItem';
import { darken, fade, lighten } from '../../styles/colorManipulator';

const styles = theme => ({
  root: {
    borderTop: `1px solid
    ${theme.palette.type === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.8)}`,
    borderBottom: `1px solid
    ${theme.palette.type === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.8)}`
  },
  title: _extends({
    flex: '0 0 auto'
  }, theme.typography.title),
  spacer: {
    flex: '1 1 100%'
  },
  actions: {
    display: 'flex'
  },
  // title: {
  //   flex: '0 0 auto',
  // },
  search: {},
  searchInput: {
    minWidth: '10em'
  },
  download: {
    marginLeft: theme.spacing(2)
  }
});
/**
 * @ignore - internal component.
 */


var _ref = React.createElement(GetApp, null);

class TableToolbar extends Component {
  constructor(props) {
    super(props);
    this.excelRef = React.createRef('excel');

    this.onChange = e => {
      const {
        onSearch,
        SearchProps
      } = this.props;
      const text = e.target.value;
      this.setState({
        searchText: text
      });
      onSearch && onSearch(text);
      SearchProps.onChange && SearchProps.onChange(text);
    };

    this.handleClick = event => {
      this.setState({
        anchorEl: event.currentTarget
      });
    };

    this.handleClose = () => {
      this.setState({
        anchorEl: null
      });
    };

    this.handleItemClick = e => {
      const {
        download
      } = this.props;
      download && download();
    };

    this.state = {
      anchorEl: null,
      searchText: ''
    };
  }

  componentDidMount() {}

  render() {
    const {
      width,
      classes,
      searchable,
      exportProps,
      SearchProps,
      title
    } = this.props;
    const {
      anchorEl,
      searchText
    } = this.state;

    if (SearchProps.floatRight === undefined) {
      SearchProps.floatRight = true;
    }

    if (!searchable && !exportProps) {
      return null;
    }

    return React.createElement("div", {
      className: classes.root,
      style: {
        width
      }
    }, React.createElement(Toolbar, null, React.createElement("div", {
      className: classes.title
    }, title), React.createElement("div", {
      className: classes.spacer
    }), React.createElement("div", {
      style: {
        width: '80%',
        float: 'right'
      }
    }, searchable && React.createElement(Search, _extends({
      classes: {
        input: classes.searchInput
      }
    }, SearchProps, {
      value: searchText,
      onChange: this.onChange
    }))), exportProps && React.createElement("div", {
      className: classes.download
    }, React.createElement(IconButton, {
      "aria-label": "More",
      "aria-owns": anchorEl ? 'long-menu' : null,
      "aria-haspopup": "true",
      onClick: this.handleClick
    }, _ref), React.createElement(Menu, {
      id: "long-menu",
      anchorEl: anchorEl,
      open: Boolean(anchorEl),
      onClose: this.handleClose
    }, exportProps.type === 'csv' && React.createElement(MenuItem, {
      onClick: this.handleItemClick
    }, React.createElement("a", {
      ref: this.excelRef
    }, "CSV"))))));
  }

}

export default withStyles(styles)(TableToolbar);