react-icons/fi#FiSearch JavaScript Examples

The following examples show how to use react-icons/fi#FiSearch. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DetailHeader.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
DetailHeader = ({
  initAnimation,
  isSearchBtnClicked,
  handleLogoClick,
  handleSearchBtnClick,
  searchForm,
}) => {
  const { location, checkIn, checkOut, guests } = searchForm;
  const [, checkInMonth, checkInDay] = checkIn.replace(/\b0/g, '').split('.');
  const [, checkOutMonth, checkOutDay] = checkOut
    .replace(/\b0/g, '')
    .split('.');
  const { adult, child } = guests;
  const guestCount = adult + child;
  return (
    <StDetailHeaderWrapper>
      <StDetailHeader isSearchBtnClicked={isSearchBtnClicked}>
        <Logo handleLogoClick={handleLogoClick}></Logo>
        <StNavSearchWrapper
          isSearchBtnClicked={isSearchBtnClicked}
          initAnimation={initAnimation}
        >
          <Navigation isSearchBtnClicked={isSearchBtnClicked}></Navigation>
          <SearchFormContainer isSearchBtnClicked={isSearchBtnClicked} />
        </StNavSearchWrapper>

        <StOnScrollSearchButton
          btnType="oval"
          fontSize="14px"
          isSearchBtnClicked={isSearchBtnClicked}
          onClick={handleSearchBtnClick}
        >
          <StSearchFormResultWrapper dataExists={location}>
            {location || '장소 추가'}
          </StSearchFormResultWrapper>
          <StSearchFormResultWrapper dataExists={checkIn}>
            {checkInMonth
              ? `${checkInMonth}월 ${checkInDay}일 - ${checkOutMonth}월 ${checkOutDay}일`
              : '날짜 추가'}
          </StSearchFormResultWrapper>
          <StSearchFormResultWrapper guestCount dataExists={guestCount}>
            {guestCount ? `게스트 ${guestCount}명` : '게스트 추가'}
          </StSearchFormResultWrapper>
          <StOnScrollSearchButtonIconWrapper>
            <FiSearch />
          </StOnScrollSearchButtonIconWrapper>
        </StOnScrollSearchButton>

        <StButtonGroupWrapper>
          <SettingButtonContainer />
          <MyPageButtonContainer />
        </StButtonGroupWrapper>
      </StDetailHeader>
    </StDetailHeaderWrapper>
  );
}
Example #2
Source File: MainHeader.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
MainHeader = ({
  initAnimation,
  isScrollTop,
  handleLogoClick,
  isSearchBtnClicked,
  handleSearchBtnClick,
}) => {
  return (
    <StMainHeader
      isScrollTop={isScrollTop}
      isSearchBtnClicked={isSearchBtnClicked}
    >
      <Logo isScrollTop={isScrollTop} handleLogoClick={handleLogoClick}></Logo>
      <StNavSearchWrapper
        initAnimation={initAnimation}
        isScrollTop={isScrollTop}
        isSearchBtnClicked={isSearchBtnClicked}
      >
        <Navigation
          isScrollTop={isScrollTop}
          isSearchBtnClicked={isSearchBtnClicked}
        ></Navigation>
        <SearchFormContainer isSearchBtnClicked={isSearchBtnClicked} />
      </StNavSearchWrapper>

      <StOnScrollSearchButton
        btnType="oval"
        fontSize="14px"
        isScrollTop={isScrollTop}
        isSearchBtnClicked={isSearchBtnClicked}
        onClick={handleSearchBtnClick}
      >
        검색 시작하기
        <StOnScrollSearchButtonIconWrapper>
          <FiSearch />
        </StOnScrollSearchButtonIconWrapper>
      </StOnScrollSearchButton>

      <StButtonGroupWrapper>
        <SettingButtonContainer isScrollTop={isScrollTop} />
        <MyPageButtonContainer isScrollTop={isScrollTop} />
      </StButtonGroupWrapper>
    </StMainHeader>
  );
}
Example #3
Source File: SearchButton.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
SearchButton = () => {
  return (
    <StSearchButton type="submit" btnType="circle">
      <FiSearch></FiSearch>
    </StSearchButton>
  );
}
Example #4
Source File: SearchHeader.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
SearchHeader = ({
  initAnimation,
  isSearchBtnClicked,
  handleLogoClick,
  handleSearchBtnClick,
  searchForm,
}) => {
  const { location, checkIn, checkOut, guests } = searchForm;
  const [, checkInMonth, checkInDay] =
    checkIn && checkIn.replace(/\b0/g, '').split('.');
  const [, checkOutMonth, checkOutDay] =
    checkOut && checkOut.replace(/\b0/g, '').split('.');
  const { adult, child } = guests;
  const guestCount = +adult + +child;
  return (
    <StSearchHeader isSearchBtnClicked={isSearchBtnClicked}>
      <Logo handleLogoClick={handleLogoClick}></Logo>
      <StNavSearchWrapper
        isSearchBtnClicked={isSearchBtnClicked}
        initAnimation={initAnimation}
      >
        <Navigation isSearchBtnClicked={isSearchBtnClicked}></Navigation>
        <SearchFormContainer isSearchBtnClicked={isSearchBtnClicked} />
      </StNavSearchWrapper>

      <StOnScrollSearchButton
        btnType="oval"
        fontSize="14px"
        onClick={handleSearchBtnClick}
        isSearchBtnClicked={isSearchBtnClicked}
      >
        <StSearchFormResultWrapper dataExists={location}>
          {location || '장소 추가'}
        </StSearchFormResultWrapper>
        <StSearchFormResultWrapper dataExists={checkIn}>
          {checkInMonth
            ? `${checkInMonth}월 ${checkInDay}일 - ${checkOutMonth}월 ${checkOutDay}일`
            : '날짜 추가'}
        </StSearchFormResultWrapper>
        <StSearchFormResultWrapper guestCount dataExists={guestCount}>
          {guestCount ? `게스트 ${guestCount}명` : '게스트 추가'}
        </StSearchFormResultWrapper>
        <StOnScrollSearchButtonIconWrapper>
          <FiSearch />
        </StOnScrollSearchButtonIconWrapper>
      </StOnScrollSearchButton>

      <StButtonGroupWrapper>
        <SettingButtonContainer />
        <MyPageButtonContainer />
      </StButtonGroupWrapper>
    </StSearchHeader>
  );
}
Example #5
Source File: SearchField.js    From testnets-cardano-org with MIT License 5 votes vote down vote up 
SearchField = ({ onSearch }) => {
  const onFormSubmit = (search, lang, setSearch) => (e) => {
    e.preventDefault()
    analytics.capture({ category: 'form', action: 'submit_search', label: search })
    onSearch && onSearch(search)
    setSearch('')
    navigate(`/${lang}/search/?query=${encodeURIComponent(search)}&page=1`)
  }

  return (
    <GlobalContentQuery
      render={globalContent => (
        <Language.Consumer>
          {({ key: lang }) => (
            <Search.Consumer>
              {({ search, setSearch }) => (
                <Form
                  onSubmit={onFormSubmit(search, lang, setSearch)}
                  aria-label={globalContent.search_form_aria_label}
                >
                  <Input
                    type='text'
                    name='search-field'
                    placeholder={globalContent.search}
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    aria-label={globalContent.search_form_aria_label}
                  />
                  <Submit
                    type='submit'
                    onClick={(e) => analytics.click({ category: 'form', label: 'search_submit', event: e })}
                    aria-label={globalContent.search_form_submit_aria_label}
                  >
                    <FiSearch />
                  </Submit>
                </Form>
              )}
            </Search.Consumer>
          )}
        </Language.Consumer>
      )}
    />
  )
}
Example #6
Source File: searchBox.js    From plataforma-sabia with MIT License 5 votes vote down vote up 
SearchBox = ({ placeholder, onChange, onSubmit, currentRefinement, refine, hits }) => {
	const [inputValue, setInputValue] = useState(currentRefinement);

	const handleChange = (_, { newValue }) => {
		setInputValue(newValue);
		onChange(newValue);
	};

	const onSuggestionsFetchRequested = ({ value }) => refine(value);

	const onSuggestionsClearRequested = () => refine();

	const getSuggestionValue = (hit) => hit.query;

	const renderSuggestion = (hit) => (
		<CustomHighlight attribute="query" hit={hit} tagName="mark" />
	);

	return (
		<AutoSuggestWrapper onSubmit={onSubmit}>
			<AutoSuggest
				suggestions={hits}
				onSuggestionsFetchRequested={onSuggestionsFetchRequested}
				onSuggestionsClearRequested={onSuggestionsClearRequested}
				getSuggestionValue={getSuggestionValue}
				renderSuggestion={renderSuggestion}
				inputProps={{ placeholder, onChange: handleChange, value: inputValue }}
				renderSuggestionsContainer={({ containerProps, children }) => (
					<StyledSuggestionsContainer>
						<StyledSuggestions {...containerProps}>{children}</StyledSuggestions>
					</StyledSuggestionsContainer>
				)}
				renderInputComponent={(inputProps) => (
					<InputWrapper>
						<FiSearch fontSize={26} />
						<input {...inputProps} />
					</InputWrapper>
				)}
			/>
			<Button variant="success" type="submit">
				Pesquisar
			</Button>
		</AutoSuggestWrapper>
	);
}
Example #7
Source File: Search.js    From winstall with GNU General Public License v3.0 4 votes vote down vote up 
function Search({ apps, onSearch, label, placeholder, preventGlobalSelect, isPackView, alreadySelected=[], limit=-1}) {
  const [results, setResults] = useState([])
  const [searchInput, setSearchInput] = useState();
  const defaultKeys = [{ name: "name", weight: 2 }, "path", "desc", "publisher", "tags"];
  const [keys, setKeys] = useState(defaultKeys);
  const router = useRouter();
  const [urlQuery, setUrlQuery] = useState();

  const options = (keys) => {
    return {
      minMatchCharLength: 3,
      threshold: 0.3,
      keys
    }
  }

  let fuse = new Fuse(apps, options(defaultKeys));

  useEffect(() => {
    // if we have a ?q param on the url, we deal with it
    if (apps.length !== 0 && router.query && router.query.q && urlQuery !== router.query.q){
      handleSearchInput(null, router.query.q)
      setUrlQuery(router.query.q)
    } else if(results != 0 && urlQuery && router.query && !router.query.q){
      // if we previously had a query, going back should reset it.
      setSearchInput("");
      setResults([]);
      onSearch();
    }
  })

  const handleSearchInput = (e, q) => {
    const inputVal = e ? e.target.value : q;

    if(onSearch) onSearch(inputVal);

    let query = inputVal;

    if(query === ""){
      forceVisible(); // for some reason lazy load doesn't detect when the new elements roll in, so we force visible to all imgs
    }

    let prefixes = ["name", "tags", "publisher", "desc"];
    let checkPrefix = prefixes.filter(prefix => query.startsWith(`${prefix}:`));


    if(checkPrefix.length !== 0){
      setKeys(checkPrefix);
      query = query.replace(`${checkPrefix[0]}:`, "")
      fuse = new Fuse(apps, options(checkPrefix));
    } else if(keys !== defaultKeys){
      setKeys(defaultKeys)
      fuse = new Fuse(apps, options(defaultKeys));
    }

    setSearchInput(inputVal);

    if (query<= 3) return;

    let results = fuse.search(query.toLowerCase().replace(/\s/g, ""));

    setResults([...results.map((r) => r.item).slice(0, (limit ? limit : results.length))]);
  };


  if (!apps) return <></>;

  return (
    <div>
      <label htmlFor="search" className={styles.searchLabel}>{label || `${Math.floor(apps.length / 50) * 50}+ apps and growing.`}</label>
      <div className={styles.searchBox}>
        <div className={styles.searchInner}>
          <FiSearch />

          <DebounceInput
            minLength={2}
            debounceTimeout={300}
            onChange={(e) => handleSearchInput(e)}
            id="search"
            value={searchInput}
            autoComplete="off"
            autoFocus={true}
            placeholder={placeholder || "Search for apps here"}
          />
        </div>
        
        <div className={styles.tip}>
          <a href="#" title="Search tips"><FiHelpCircle /></a>
          <div className={styles.tipData}>
            <p>Use search prefixes to target a specific field in searches!</p>
            <ul>
              <li><code>name:</code> search for an app's name</li>
              <li><code>publisher:</code> search for apps by a publisher</li>
              <li><code>tags:</code> search for apps by a tag</li>
              <li><code>desc:</code> search the description of apps</li>
            </ul>
          </div>
        </div>
        {results.length > 0 && searchInput && <p className={styles.searchHint}>Showing {results.length} {results.length === 1 ? "result" : "results"}.</p>}
      </div>

      {searchInput && results.length !== 0 ? (
        <ListPackages>
            {results.map((app, i) =>
            <SingleApp
              app={app}
              showDesc={true}
              preventGlobalSelect={preventGlobalSelect}
              pack={isPackView}
              hideBorder={true}
              key={`${app._id}`}
              preSelected={alreadySelected.findIndex(a => a._id === app._id) != -1 ? true : false}
            />
          )}
        </ListPackages>
      ) : (
          <>{searchInput ? <p className={styles.noresults}>Could not find any apps.</p> : ""}</>
        )}
    </div>
  );
}