Search

<Search id="unique-id" onChange={console.log} placeholder="Placeholder" />

() => {
  const [loading, setLoading] = React.useState(false);
  const [searchText, setSearchText] = React.useState('');
  const debouncedText = useDebouncedValue(searchText);
  const [options, setOptions] = React.useState(data.searchData);
  const [values, setValues] = React.useState([]);
  React.useEffect(() => {
    if (debouncedText?.trim().length > 0) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        setLoading(false);
        setOptions(
          data.searchData.filter((option) =>
            new RegExp(searchText, 'ig').test(
              `${option.firstName} ${option.lastName}`,
            ),
          ),
        );
      }, 500 + Math.floor(Math.random() * 2000));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    } else {
      setOptions(data.searchData);
    }
  }, [debouncedText]);

  return (
    <Search
      helperText="Enter a name to search"
      id="people-search"
      noOptionsText="We couldn't find anyone who matched your search"
      loading={loading}
      onChange={(event, option) => setValues(option)}
      onInputChange={(e) => setSearchText(e.target.value)}
      options={options}
      multiple={true}
      value={values}
      placeholder="Search"
      renderOption={(props, option) => (
        <SearchOptionCard
          {...props}
          disabled={option.disabled}
          disabledText={option.disabledText}
          avatarUrl={option.avatar}
          showAvatar
          title={`${option.firstName} ${option.lastName}`}
          subTitle={option.subTitle}
          type={option.type}
        />
      )}
    />
  );
};

() => {
  const [loading, setLoading] = React.useState(false);
  const [searchText, setSearchText] = React.useState('');
  const debouncedText = useDebouncedValue(searchText);
  const [options, setOptions] = React.useState([]);
  React.useEffect(() => {
    if (searchText) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        setLoading(false);
        setOptions(
          data.searchData.filter((option) =>
            new RegExp(searchText, 'ig').test(
              `${option.firstName} ${option.lastName}`,
            ),
          ),
        );
      }, 500 + Math.floor(Math.random() * 2000));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    } else {
      setOptions([]);
    }
  }, [debouncedText]);
  return (
    <Search
      helperText="Enter a name to search"
      id="people-single-search"
      multiple={false}
      noOptionsText="We couldn't find anyone who matched your search"
      loading={loading}
      onChange={console.log}
      onInputChange={(e) => setSearchText(e?.target.value)}
      options={options}
      defaultValue={data.searchData[1]}
      placeholder="Search"
      variant="large"
      type="single"
      renderOption={(props, option) => (
        <SearchOptionCard
          {...props}
          avatarUrl={option.avatar}
          showAvatar
          title={`${option.firstName} ${option.lastName}`}
          subTitle={option.subTitle}
          type={option.type}
        />
      )}
    />
  );
};

() => {
  const [filteredOptions, setFilteredOptions] = React.useState(data.searchData);
  const [searchText, setSearchText] = React.useState('');

  React.useEffect(
    () =>
      setFilteredOptions(
        data.searchData.filter((option) =>
          new RegExp(searchText, 'ig').test(
            `${option.firstName} ${option.lastName}`,
          ),
        ),
      ),
    [searchText],
  );

  return (
    <>
      <Search
        id="unique-id"
        onInputChange={(e) => setSearchText(e.target.value)}
        placeholder="Search"
        size="small"
      />
      {filteredOptions.length === 0 && (
        <div
          style={{
            padding: 30,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          No results
        </div>
      )}
      {filteredOptions.map((option) => (
        <SearchOptionCard
          key={option.id}
          title={`${option.firstName} ${option.lastName}`}
        />
      ))}
    </>
  );
};

() => {
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [searchText, setSearchText] = React.useState('');
  const debouncedText = useDebouncedValue(searchText);
  const [options, setOptions] = React.useState([]);
  React.useEffect(() => {
    if (searchText) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        setLoading(false);
        setOptions(
          data.searchData.filter((option) =>
            new RegExp(searchText, 'ig').test(
              `${option.firstName} ${option.lastName}`,
            ),
          ),
        );
      }, 500 + Math.floor(Math.random() * 2000));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    } else {
      setOptions([]);
    }
  }, [debouncedText]);

  return (
    <>
      <Button color="primary" onClick={() => setOpen(true)}>
        Open simple Modal
      </Button>
      <Modal
        actions={
          <>
            <Button onClick={() => setOpen(false)} color="secondary">
              Cancel
            </Button>
          </>
        }
        id="collapse-Modal"
        onClose={() => setOpen(false)}
        open={open}
        title="Simple Modal"
      >
        <Search
          helperText="Enter a name to search"
          id="people-single-search-pop"
          noOptionsText="We couldn't find anyone who matched your search"
          loading={loading}
          onChange={console.log}
          onInputChange={(e) => setSearchText(e.target.value)}
          options={options}
          placeholder="Search"
          multiple={false}
          renderOption={(props, option) => (
            <SearchOptionCard
              {...props}
              avatarUrl={option.avatar}
              showAvatar
              title={`${option.firstName} ${option.lastName}`}
              subTitle={option.subTitle}
              type={option.type}
            />
          )}
        />
      </Modal>
    </>
  );
};