@chayns-components/core/lib/cjs/components/search-input/SearchInput.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _Icon = _interopRequireDefault(require("../icon/Icon"));
var _Input = _interopRequireWildcard(require("../input/Input"));
var _SearchInput = require("./SearchInput.styles");
var _styledComponents = require("styled-components");
var _element = require("../../hooks/element");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const SearchInput = ({
  iconColor,
  isActive,
  onActiveChange,
  onChange,
  onKeyDown,
  placeholder,
  shouldUseAbsolutePositioning = false,
  size = _Input.InputSize.Medium,
  value,
  width: widthValue
}) => {
  const [isSearchInputActive, setIsSearchInputActive] = (0, _react2.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
  const inputRef = (0, _react2.useRef)(null);
  const pseudoRef = (0, _react2.useRef)(null);
  const parentWidth = (0, _element.useElementSize)(pseudoRef);
  const theme = (0, _styledComponents.useTheme)();
  const handleBackIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(false), []);
  const handleSearchIconClick = (0, _react2.useCallback)(() => setIsSearchInputActive(true), []);
  (0, _react2.useEffect)(() => {
    if (typeof onActiveChange === 'function') {
      onActiveChange(isSearchInputActive);
    }
    if (isSearchInputActive) {
      var _inputRef$current;
      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
    }
  }, [isSearchInputActive, onActiveChange]);
  (0, _react2.useEffect)(() => {
    if (typeof isActive === 'boolean') {
      setIsSearchInputActive(isActive);
    }
  }, [isActive]);
  const width = (0, _react2.useMemo)(() => (parentWidth === null || parentWidth === void 0 ? void 0 : parentWidth.width) ?? widthValue, [parentWidth === null || parentWidth === void 0 ? void 0 : parentWidth.width, widthValue]);
  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInput, {
    className: "beta-chayns-search-input",
    $size: size,
    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
    onClick: () => {
      if (shouldUseAbsolutePositioning) {
        if (isSearchInputActive) {
          handleBackIconClick();
        } else {
          handleSearchIconClick();
        }
      }
    }
  }, shouldUseAbsolutePositioning ? /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
    initial: false
  }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
    animate: {
      opacity: 1,
      width
    },
    exit: {
      opacity: 0,
      width: 0
    },
    initial: {
      opacity: 0,
      width: 0
    },
    key: "searchInputContentWrapper",
    transition: {
      duration: 0.3
    }
  }, /*#__PURE__*/_react2.default.createElement(_Input.default, {
    onChange: onChange,
    onKeyDown: onKeyDown,
    placeholder: placeholder,
    ref: inputRef,
    shouldShowClearIcon: true,
    size: size,
    value: value
  })), /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
    animate: {
      opacity: 1
    },
    exit: {
      opacity: 0,
      position: 'absolute'
    },
    initial: {
      opacity: 0
    },
    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
    transition: {
      duration: 0.3
    },
    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
  }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
    key: "icon",
    color: iconColor,
    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
    size: 18
  }))) : /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
    initial: false
  }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
    animate: {
      opacity: 1
    },
    exit: {
      opacity: 0,
      position: 'absolute'
    },
    initial: {
      opacity: 0
    },
    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
    transition: {
      duration: 0.3
    },
    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
  }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
    key: "icon",
    color: iconColor,
    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
    size: 18
  })))), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
    initial: false
  }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
    animate: {
      opacity: 1,
      width: '100%'
    },
    exit: {
      opacity: 0,
      width: 0
    },
    initial: {
      opacity: 0,
      width: 0
    },
    key: "searchInputContentWrapper",
    transition: {
      duration: 0.3
    }
  }, /*#__PURE__*/_react2.default.createElement(_Input.default, {
    key: "input",
    leftElement: /*#__PURE__*/_react2.default.createElement(_Icon.default, {
      color: theme.text,
      icons: ['far fa-search']
    }),
    onChange: onChange,
    onKeyDown: onKeyDown,
    placeholder: placeholder,
    ref: inputRef,
    shouldShowClearIcon: true,
    size: size,
    value: value
  }))))), /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledSearchInputPseudoElement, {
    ref: pseudoRef
  }));
};
SearchInput.displayName = 'SearchInput';
var _default = exports.default = SearchInput;
//# sourceMappingURL=SearchInput.js.map