@krowdy-ui/core/esm/TableToolbar/TableToolbar.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import Typography from '../Typography';
import TextField from '../TextField';
import withStyles from '../styles/withStyles';
import InputAdornment from '../InputAdornment';

var styles = function styles(_ref) {
  var spacing = _ref.spacing;
  return {
    action: {
      '& > *': {
        '&:not(:last-child)': {
          marginRight: spacing(.5)
        }
      }
    },
    inputSearch: {
      '& * input': {
        fontSize: 14,
        padding: spacing(1.5, 1)
      },
      '& > div': {
        paddingRight: spacing(2)
      },
      minWidth: 300
    },
    root: {
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'space-between',
      padding: spacing(2)
    },

    /* Styles applied to the action element. */
    searchIcon: {
      '&:hover': {
        cursor: 'pointer'
      }
    }
  };
};

function TableToolbar(props) {
  var inputSearch = React.useRef();
  var action = props.action,
      _props$component = props.component,
      Component = _props$component === void 0 ? 'div' : _props$component,
      classes = props.classes,
      SearchIcon = props.searchIcon,
      className = props.className,
      _props$onHandleSearch = props.onHandleSearch,
      onHandleSearch = _props$onHandleSearch === void 0 ? function () {} : _props$onHandleSearch,
      title = props.title,
      titleProps = props.titleProps,
      withSearch = props.withSearch;

  var _handleChangeSearch = function _handleChangeSearch(ev) {
    var value = ev.target.value;
    if (ev.keyCode === 13) onHandleSearch(value);
  };

  return title || withSearch ? /*#__PURE__*/React.createElement(Component, {
    className: clsx(classes.root, className)
  }, title ? /*#__PURE__*/React.createElement(Typography, _extends({
    variant: "h6"
  }, titleProps), title) : null, withSearch ? /*#__PURE__*/React.createElement(TextField, {
    className: classes.inputSearch,
    InputProps: SearchIcon ? {
      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
        position: "end"
      }, /*#__PURE__*/React.createElement(SearchIcon, {
        className: classes.searchIcon,
        onClick: function onClick() {
          return onHandleSearch(inputSearch.current.value);
        }
      }))
    } : undefined,
    inputRef: inputSearch,
    onKeyUp: _handleChangeSearch,
    placeholder: "Buscar",
    variant: "outlined"
  }) : null, action && /*#__PURE__*/React.createElement("div", {
    className: classes.action
  }, action)) : null;
}

process.env.NODE_ENV !== "production" ? TableToolbar.propTypes = {
  action: PropTypes.node,

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  component: PropTypes.elementType,
  onHandleSearch: PropTypes.func,
  searchIcon: PropTypes.elementType,
  title: PropTypes.string,
  titleProps: PropTypes.object,
  withSearch: PropTypes.bool
} : void 0;
export default withStyles(styles, {
  name: 'TableToolbar'
})(TableToolbar);