@centreon/react-components/lib/InputField/InputFieldSearch/index.js

react components used by centreon web frontend

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

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

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

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

var _styles = require("@material-ui/core/styles");

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));

/* eslint-disable react/jsx-no-bind */

/* eslint-disable react/jsx-filename-extension */
var useStyles = function useStyles() {
  return {
    root: {
      padding: '0px 4px',
      display: 'flex',
      alignItems: 'center',
      width: '100%',
      borderColor: '#ccc',
      borderRadius: 2,
      borderStyle: 'solid',
      borderWidth: 1,
      color: '#242f3a',
      fontFamily: 'Roboto Regular',
      fontSize: 12,
      boxShadow: 'none',
      position: 'relative',
      backgroundColor: '#f9f9f9'
    },
    paper: {
      padding: 0
    },
    input: {
      flex: 1,
      fontSize: 13
    },
    iconButton: {
      padding: 3
    },
    bottomLine: {
      content: '""',
      position: 'absolute',
      height: 2,
      width: '100%',
      backgroundColor: '#009fdf',
      left: '50%',
      right: 0,
      bottom: -1,
      transform: 'translateX(-50%)'
    }
  };
};

var InputFieldSearch =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(InputFieldSearch, _Component);

  function InputFieldSearch() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2["default"])(this, InputFieldSearch);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(InputFieldSearch)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
      searchText: ''
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSearchInputChanged", function (event) {
      var onChange = _this.props.onChange;
      var searchText = event.target.value;

      _this.setState({
        searchText: searchText
      }, function () {
        onChange(searchText);
      });
    });
    return _this;
  }

  (0, _createClass2["default"])(InputFieldSearch, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          classes = _this$props.classes,
          placeholder = _this$props.placeholder,
          onChange = _this$props.onChange,
          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["classes", "placeholder", "onChange"]);
      var searchText = this.state.searchText;
      return _react["default"].createElement(_Paper["default"], {
        elevation: 0,
        className: classes.paper
      }, _react["default"].createElement(_Paper["default"], {
        className: classes.root
      }, _react["default"].createElement(_IconButton["default"], {
        className: classes.iconButton,
        "aria-label": "Search"
      }, _react["default"].createElement(_Search["default"], {
        fontSize: "small"
      })), _react["default"].createElement(_InputBase["default"], (0, _extends2["default"])({
        className: classes.input,
        placeholder: placeholder,
        inputProps: {
          'aria-label': 'Search'
        },
        onChange: this.onSearchInputChanged,
        value: searchText
      }, rest)), searchText.length > 0 ? _react["default"].createElement(_IconButton["default"], {
        className: classes.iconButton,
        "aria-label": "Remove",
        onClick: this.onSearchInputChanged.bind(this, {
          target: {
            value: ''
          }
        })
      }, _react["default"].createElement(_Close["default"], {
        fontSize: "small"
      })) : null, _react["default"].createElement("span", {
        className: classes.bottomLine
      })));
    }
  }]);
  return InputFieldSearch;
}(_react.Component);

InputFieldSearch.defaultProps = {
  placeholder: 'Search'
};
InputFieldSearch.propTypes = {
  classes: _propTypes["default"].shape.isRequired,
  placeholder: _propTypes["default"].string,
  onChange: _propTypes["default"].func.isRequired
};

var _default = (0, _styles.withStyles)(useStyles)(InputFieldSearch);

exports["default"] = _default;