@vtex/styleguide/lib/InputSearch/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Input = require("../Input");

var _Input2 = _interopRequireDefault(_Input);

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

var _Search2 = _interopRequireDefault(_Search);

var _Clear = require("../icon/Clear");

var _Clear2 = _interopRequireDefault(_Clear);

var _withForwardedRef = require("../../modules/withForwardedRef");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var InputSearch =
/*#__PURE__*/
function (_Component) {
  _inheritsLoose(InputSearch, _Component);

  function InputSearch(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    _this.handleClickClear = function (event) {
      _this.props.onChange && _this.props.onChange(_extends({}, event, {
        target: _extends({}, event.target, {
          value: ''
        })
      }));
      _this.props.onClear && _this.props.onClear(event);
    };

    _this.handleSubmit = function (event) {
      var _this$props = _this.props,
          onSubmit = _this$props.onSubmit,
          value = _this$props.value;
      onSubmit && onSubmit(_extends({}, event, {
        target: _extends({}, event.target, {
          value: value
        }),
        preventDefault: event.preventDefault || function () {}
      }));
    };

    _this.handleHovering = function (hover) {
      _this.setState({
        hover: hover
      });
    };

    _this.handleFocus = function (focus) {
      _this.setState({
        focus: focus
      });
    };

    _this.state = {
      hover: false,
      focus: false
    };
    return _this;
  }

  var _proto = InputSearch.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$state = this.state,
        hover = _this$state.hover,
        focus = _this$state.focus;
    var _this$props2 = this.props,
        disabled = _this$props2.disabled,
        size = _this$props2.size,
        value = _this$props2.value;
    var iconSize = InputSearch.iconSizes[size] || InputSearch.iconSizes.regular;
    return _react2.default.createElement(_Input2.default, _extends({}, this.props, {
      onFocus: function onFocus() {
        return _this2.handleFocus(true);
      },
      onBlur: function onBlur() {
        return _this2.handleFocus(false);
      },
      onMouseEnter: function onMouseEnter() {
        return _this2.handleHovering(true);
      },
      onMouseLeave: function onMouseLeave() {
        return _this2.handleHovering(false);
      },
      onKeyUp: function onKeyUp(e) {
        return e.key === 'Enter' && _this2.handleSubmit(e);
      },
      type: "search",
      suffix: _react2.default.createElement("div", {
        className: "flex flex-row items-center"
      }, value && _react2.default.createElement("span", {
        tabIndex: 0,
        onClick: this.handleClickClear,
        className: "pointer mr4 c-muted-3"
      }, !disabled && _react2.default.createElement(_Clear2.default, {
        size: iconSize
      })), _react2.default.createElement("div", {
        className: "mh2 bw1 bl " + (focus ? 'b--muted-2' : hover ? 'b--muted-3' : 'b--muted-4'),
        style: {
          height: InputSearch.separatorHeight[size] || InputSearch.separatorHeight.regular
        }
      }), _react2.default.createElement("span", {
        className: "pointer pl4 c-link flex",
        onClick: this.handleSubmit
      }, _react2.default.createElement(_Search2.default, {
        size: iconSize
      })))
    }));
  };

  return InputSearch;
}(_react.Component);

InputSearch.iconSizes = {
  small: 14,
  regular: 16,
  large: 18
};
InputSearch.separatorHeight = {
  small: 28,
  regular: 36,
  large: 44
};
InputSearch.propTypes = {
  disabled: _propTypes2.default.bool,

  /** @ignore Forwarded Ref */
  forwardedRef: _withForwardedRef.refShape,
  onChange: _propTypes2.default.func,
  onSubmit: _propTypes2.default.func,
  onClear: _propTypes2.default.func,
  size: _propTypes2.default.string,
  value: _propTypes2.default.string
};
exports.default = (0, _withForwardedRef.withForwardedRef)(InputSearch);