gather-content-ui/dist/lib/SearchInput/index.js

GatherContent UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SearchInput = SearchInput;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactSpring = require("react-spring");
var _Icon = _interopRequireDefault(require("../Icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function SearchInput(_ref) {
  var placeholder = _ref.placeholder,
    onChangeHandler = _ref.onChangeHandler,
    onClearHandler = _ref.onClearHandler,
    hideIcon = _ref.hideIcon,
    value = _ref.value,
    label = _ref.label,
    id = _ref.id,
    className = _ref.className,
    inputClassName = _ref.inputClassName;
  var transitionsForClearButton = (0, _reactSpring.useTransition)(value, null, {
    from: {
      opacity: 0
    },
    enter: {
      opacity: 1
    },
    leave: {
      opacity: 0
    }
  });
  return /*#__PURE__*/_react["default"].createElement("span", {
    className: "relative inline-flex items-center ".concat(className)
  }, label && /*#__PURE__*/_react["default"].createElement("label", {
    className: "gui-visually-hidden",
    htmlFor: id
  }, label), !hideIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
    name: "search",
    className: "absolute ml-3"
  }), /*#__PURE__*/_react["default"].createElement("input", {
    value: value,
    onChange: onChangeHandler,
    className: "border border-solid border-neutral-90 focus:border-blue-primary text-base rounded m-0 w-full py-2 pr-2 pl-8 outline-none transition-colors duration-200 ".concat(inputClassName),
    placeholder: placeholder,
    id: id
  }), transitionsForClearButton.map(
  // @ts-expect-error TS(2339): Property 'animatedProps' does not exist on type 'U... Remove this comment to see the full error message
  function (_ref2) {
    var item = _ref2.item,
      animatedProps = _ref2.animatedProps;
    return item && /*#__PURE__*/_react["default"].createElement(_reactSpring.animated.button, {
      type: "button",
      onClick: onClearHandler,
      className: "absolute right-0 mr-2 text-neutral-primary hover:bg-neutral-90 bg-transparent w-6 h-6 border-0 bg-opacity-50 rounded-full transition-colors duration-200",
      style: animatedProps
    }, "\xD7");
  }));
}
SearchInput.defaultProps = {
  placeholder: "Search...",
  hideIcon: false,
  value: "",
  label: null,
  id: null,
  className: "",
  inputClassName: ""
};
var _default = exports["default"] = SearchInput;
//# sourceMappingURL=index.js.map