@6thquake/react-material/Table/AwesomeTable/TableToolbar.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _Toolbar = _interopRequireDefault(require("../../Toolbar"));

var _Search = _interopRequireDefault(require("../../Search"));

var _IconButton = _interopRequireDefault(require("../../IconButton"));

var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));

var _GetApp = _interopRequireDefault(require("@material-ui/icons/GetApp"));

var _styles = require("../../styles");

var _Menu = _interopRequireDefault(require("../../Menu"));

var _MenuItem = _interopRequireDefault(require("../../MenuItem"));

var _colorManipulator = require("../../styles/colorManipulator");

var styles = function styles(theme) {
  return {
    root: {
      borderTop: "1px solid\n    ".concat(theme.palette.type === 'light' ? (0, _colorManipulator.lighten)((0, _colorManipulator.fade)(theme.palette.divider, 1), 0.88) : (0, _colorManipulator.darken)((0, _colorManipulator.fade)(theme.palette.divider, 1), 0.8)),
      borderBottom: "1px solid\n    ".concat(theme.palette.type === 'light' ? (0, _colorManipulator.lighten)((0, _colorManipulator.fade)(theme.palette.divider, 1), 0.88) : (0, _colorManipulator.darken)((0, _colorManipulator.fade)(theme.palette.divider, 1), 0.8))
    },
    title: (0, _extends2.default)({
      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 TableToolbar =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(TableToolbar, _Component);

  function TableToolbar(props) {
    var _this;

    (0, _classCallCheck2.default)(this, TableToolbar);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TableToolbar).call(this, props));
    _this.excelRef = _react.default.createRef('excel');

    _this.onChange = function (e) {
      var _this$props = _this.props,
          onSearch = _this$props.onSearch,
          SearchProps = _this$props.SearchProps;
      var text = e.target.value;

      _this.setState({
        searchText: text
      });

      onSearch && onSearch(text);
      SearchProps.onChange && SearchProps.onChange(text);
    };

    _this.handleClick = function (event) {
      _this.setState({
        anchorEl: event.currentTarget
      });
    };

    _this.handleClose = function () {
      _this.setState({
        anchorEl: null
      });
    };

    _this.handleItemClick = function (e) {
      var download = _this.props.download;
      download && download();

      _this.setState({
        anchorEl: null
      });
    };

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

  (0, _createClass2.default)(TableToolbar, [{
    key: "componentDidMount",
    value: function componentDidMount() {}
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          width = _this$props2.width,
          classes = _this$props2.classes,
          searchable = _this$props2.searchable,
          exportProps = _this$props2.exportProps,
          SearchProps = _this$props2.SearchProps,
          title = _this$props2.title;
      var _this$state = this.state,
          anchorEl = _this$state.anchorEl,
          searchText = _this$state.searchText;

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

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

      return _react.default.createElement("div", {
        className: classes.root,
        style: {
          width: width
        }
      }, _react.default.createElement(_Toolbar.default, null, _react.default.createElement("div", {
        className: classes.title
      }, title), _react.default.createElement("div", {
        className: classes.spacer
      }), _react.default.createElement("div", {
        style: {
          width: '80%',
          float: 'right'
        }
      }, searchable && _react.default.createElement(_Search.default, (0, _extends2.default)({
        classes: {
          input: classes.searchInput
        }
      }, SearchProps, {
        value: searchText,
        onChange: this.onChange
      }))), exportProps && _react.default.createElement("div", {
        className: classes.download
      }, _react.default.createElement(_IconButton.default, {
        "aria-label": "More",
        "aria-owns": anchorEl ? 'long-menu' : null,
        "aria-haspopup": "true",
        onClick: this.handleClick
      }, _react.default.createElement(_GetApp.default, null)), _react.default.createElement(_Menu.default, {
        id: "long-menu",
        anchorEl: anchorEl,
        open: Boolean(anchorEl),
        onClose: this.handleClose
      }, exportProps.type === 'csv' && _react.default.createElement(_MenuItem.default, {
        onClick: this.handleItemClick
      }, _react.default.createElement("a", {
        ref: this.excelRef
      }, "CSV"))))));
    }
  }]);
  return TableToolbar;
}(_react.Component);

var _default = (0, _styles.withStyles)(styles)(TableToolbar);

exports.default = _default;