From 325a2d1f7ca9c10166e610599a4ac49091d6b776 Mon Sep 17 00:00:00 2001
From: Ai Ling <50992674+ailing35@users.noreply.github.com>
Date: Tue, 11 Oct 2022 19:53:21 +0800
Subject: [PATCH] [ui][companies typeahead] Add isLabelHidden and placeHolder
 props (#361)

* [ui][companies typeahead] add isLabelHidden and placeHolder props

* [ui][companies typeahead] add isLabelHidden and placeHolder props
---
 .../src/components/shared/CompaniesTypeahead.tsx      | 11 ++++++++++-
 packages/ui/src/Typeahead/Typeahead.tsx               |  3 +++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/components/shared/CompaniesTypeahead.tsx b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
index b25f9cd8..2eacc357 100644
--- a/apps/portal/src/components/shared/CompaniesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
@@ -6,10 +6,17 @@ import { trpc } from '~/utils/trpc';
 
 type Props = Readonly<{
   disabled?: boolean;
+  isLabelHidden?: boolean;
   onSelect: (option: TypeaheadOption) => void;
+  placeHolder?: string;
 }>;
 
-export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
+export default function CompaniesTypeahead({
+  disabled,
+  onSelect,
+  isLabelHidden,
+  placeHolder,
+}: Props) {
   const [query, setQuery] = useState('');
   const companies = trpc.useQuery([
     'companies.list',
@@ -23,6 +30,7 @@ export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
   return (
     <Typeahead
       disabled={disabled}
+      isLabelHidden={isLabelHidden}
       label="Company"
       noResultsMessage="No companies found"
       nullable={true}
@@ -33,6 +41,7 @@ export default function CompaniesTypeahead({ disabled, onSelect }: Props) {
           value: id,
         })) ?? []
       }
+      placeholder={placeHolder}
       onQueryChange={setQuery}
       onSelect={onSelect}
     />
diff --git a/packages/ui/src/Typeahead/Typeahead.tsx b/packages/ui/src/Typeahead/Typeahead.tsx
index 2197716d..54bf1f59 100644
--- a/packages/ui/src/Typeahead/Typeahead.tsx
+++ b/packages/ui/src/Typeahead/Typeahead.tsx
@@ -22,6 +22,7 @@ type Props = Readonly<{
   ) => void;
   onSelect: (option: TypeaheadOption) => void;
   options: ReadonlyArray<TypeaheadOption>;
+  placeholder?: string;
   value?: TypeaheadOption;
 }>;
 
@@ -35,6 +36,7 @@ export default function Typeahead({
   onQueryChange,
   value,
   onSelect,
+  placeholder,
 }: Props) {
   const [query, setQuery] = useState('');
   return (
@@ -77,6 +79,7 @@ export default function Typeahead({
             displayValue={(option) =>
               (option as unknown as TypeaheadOption)?.label
             }
+            placeholder={placeholder}
             onChange={(event) => {
               setQuery(event.target.value);
               onQueryChange(event.target.value, event);