app-search-bar.component.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Search } from '@carbon/react';
import styles from './app-search-bar.scss';

import { AssignedExtension, Extension, useAssignedExtensions } from '@openmrs/esm-framework';
import { ComponentContext } from '@openmrs/esm-framework/src/internal';

const appMenuItemSlot = 'app-menu-item-slot';

interface AppSearchBarProps {
  onChange?: (searchTerm: string) => void;
  onClear: () => void;
  onSubmit: (searchTerm: string) => void;
  small?: boolean;
}

const AppSearchBar = React.forwardRef<HTMLInputElement, AppSearchBarProps>(
  ({ onChange, onClear, onSubmit, small }, ref) => {
    const { t } = useTranslation();
    const [searchTerm, setSearchTerm] = useState("");
    const menuItemExtensions = useAssignedExtensions(
      appMenuItemSlot
    ) as AssignedExtension[];

    const handleChange = (val: string) => {
      setSearchTerm(val);
      if (onChange) {
        onChange(val);
      }
    };

    const handleSubmit = (evt: React.FormEvent) => {
      evt.preventDefault();
      if (onSubmit) {
        onSubmit(searchTerm);
      }
    };

    const filteredExtensions = menuItemExtensions
      .filter((extension) => {
        const itemName = extension?.name ?? "";
        return itemName.toLowerCase().includes(searchTerm.toLowerCase());
      })
      .map((extension) => (
        <ComponentContext.Provider
          key={extension?.id}
          value={{
            featureName: extension?.moduleName,
            moduleName: extension?.moduleName,
            extension: {
              extensionId: extension?.id,
              extensionSlotName: appMenuItemSlot,
              extensionSlotModuleName: extension?.moduleName,
            },
          }}
        >
          <Extension />
        </ComponentContext.Provider>
      ));

    return (
      <>
        <form onSubmit={handleSubmit} className={styles.searchArea}>
          <Search
            autoFocus
            className={styles.appSearchInput}
            closeButtonLabelText={t("clearSearch", "Clear")}
            labelText=""
            onChange={(event) => handleChange(event.target.value)}
            onClear={onClear}
            placeholder={t("searchForApp", "Search for an application")}
            size={small ? "sm" : "lg"}
            value={searchTerm}
            ref={ref}
            data-testid="appSearchBar"
          />
        </form>
        <div className={styles.searchItems}>
          {searchTerm
            ? filteredExtensions
            : menuItemExtensions.map((extension) => (
              <ComponentContext.Provider
                key={extension?.id}
                value={{
                  featureName: extension?.moduleName,
                  moduleName: extension?.moduleName,
                  extension: {
                    extensionId: extension?.id,
                    extensionSlotName: appMenuItemSlot,
                    extensionSlotModuleName: extension?.moduleName,
                  },
                }}
              >
                <Extension />
              </ComponentContext.Provider>
            ))}
        </div>
      </>
    );
  }
);

export default AppSearchBar;;