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

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

import { AnimatePresence } from 'motion/react';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import Icon from '../icon/Icon';
import Input, { InputSize } from '../input/Input';
import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput, StyledSearchInputPseudoElement } from './SearchInput.styles';
import { useTheme } from 'styled-components';
import { useElementSize } from '../../hooks/element';
const SearchInput = _ref => {
  let {
    iconColor,
    isActive,
    onActiveChange,
    onChange,
    onKeyDown,
    placeholder,
    shouldUseAbsolutePositioning = false,
    size = InputSize.Medium,
    value,
    width: widthValue
  } = _ref;
  const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
  const inputRef = useRef(null);
  const pseudoRef = useRef(null);
  const parentWidth = useElementSize(pseudoRef);
  const theme = useTheme();
  const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
  const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
  useEffect(() => {
    if (typeof onActiveChange === 'function') {
      onActiveChange(isSearchInputActive);
    }
    if (isSearchInputActive) {
      inputRef.current?.focus();
    }
  }, [isSearchInputActive, onActiveChange]);
  useEffect(() => {
    if (typeof isActive === 'boolean') {
      setIsSearchInputActive(isActive);
    }
  }, [isActive]);
  const width = useMemo(() => parentWidth?.width ?? widthValue, [parentWidth?.width, widthValue]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSearchInput, {
    className: "beta-chayns-search-input",
    $size: size,
    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
    onClick: () => {
      if (shouldUseAbsolutePositioning) {
        if (isSearchInputActive) {
          handleBackIconClick();
        } else {
          handleSearchIconClick();
        }
      }
    }
  }, shouldUseAbsolutePositioning ? /*#__PURE__*/React.createElement(AnimatePresence, {
    initial: false
  }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
    animate: {
      opacity: 1,
      width
    },
    exit: {
      opacity: 0,
      width: 0
    },
    initial: {
      opacity: 0,
      width: 0
    },
    key: "searchInputContentWrapper",
    transition: {
      duration: 0.3
    }
  }, /*#__PURE__*/React.createElement(Input, {
    onChange: onChange,
    onKeyDown: onKeyDown,
    placeholder: placeholder,
    ref: inputRef,
    shouldShowClearIcon: true,
    size: size,
    value: value
  })), /*#__PURE__*/React.createElement(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__*/React.createElement(Icon, {
    key: "icon",
    color: iconColor,
    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
    size: 18
  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
    initial: false
  }, /*#__PURE__*/React.createElement(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__*/React.createElement(Icon, {
    key: "icon",
    color: iconColor,
    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
    size: 18
  })))), /*#__PURE__*/React.createElement(AnimatePresence, {
    initial: false
  }, isSearchInputActive && /*#__PURE__*/React.createElement(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__*/React.createElement(Input, {
    key: "input",
    leftElement: /*#__PURE__*/React.createElement(Icon, {
      color: theme.text,
      icons: ['far fa-search']
    }),
    onChange: onChange,
    onKeyDown: onKeyDown,
    placeholder: placeholder,
    ref: inputRef,
    shouldShowClearIcon: true,
    size: size,
    value: value
  }))))), /*#__PURE__*/React.createElement(StyledSearchInputPseudoElement, {
    ref: pseudoRef
  }));
};
SearchInput.displayName = 'SearchInput';
export default SearchInput;
//# sourceMappingURL=SearchInput.js.map