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

React components that implement Google's Material Design.

"use strict";

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

var _Typography = _interopRequireDefault(require("../Typography"));

var _TextField = _interopRequireDefault(require("../TextField"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _InputAdornment = _interopRequireDefault(require("../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["default"].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["default"].createElement(Component, {
    className: (0, _clsx["default"])(classes.root, className)
  }, title ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
    variant: "h6"
  }, titleProps), title) : null, withSearch ? /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
    className: classes.inputSearch,
    InputProps: SearchIcon ? {
      endAdornment: /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
        position: "end"
      }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
    className: classes.action
  }, action)) : null;
}

process.env.NODE_ENV !== "production" ? TableToolbar.propTypes = {
  action: _propTypes["default"].node,

  /**
   * @ignore
   */
  className: _propTypes["default"].string,

  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  component: _propTypes["default"].elementType,
  onHandleSearch: _propTypes["default"].func,
  searchIcon: _propTypes["default"].elementType,
  title: _propTypes["default"].string,
  titleProps: _propTypes["default"].object,
  withSearch: _propTypes["default"].bool
} : void 0;

var _default = (0, _withStyles["default"])(styles, {
  name: 'TableToolbar'
})(TableToolbar);

exports["default"] = _default;