From 545cf46451d753f7f17c6fd3e7905dff9a52c6c9 Mon Sep 17 00:00:00 2001
From: Timo <gasda@amazon.com>
Date: Thu, 10 Aug 2023 09:48:30 +0200
Subject: [PATCH] add match counter

---
 .../with-table-collection-select-filter.page.tsx      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/pages/app-layout/with-table-collection-select-filter.page.tsx b/pages/app-layout/with-table-collection-select-filter.page.tsx
index 964204d1b3..b85f548fc7 100644
--- a/pages/app-layout/with-table-collection-select-filter.page.tsx
+++ b/pages/app-layout/with-table-collection-select-filter.page.tsx
@@ -45,6 +45,8 @@ export default function () {
   const [usePropertyFilter, setUsePropertyFilter] = useState(true);
   const [customControl, setCustomControl] = useState(true);
   const [customAction, setCustomAction] = useState(true);
+  const [matches, setMatches] = useState(false);
+  const [textfilter, setTextfilter] = useState('');
   const [query, setQuery] = useState<PropertyFilterProps.Query>({ operation: 'and', tokens: [] });
 
   const { items, actions, paginationProps, propertyFilterProps } = useCollection(allItems, {
@@ -99,6 +101,9 @@ export default function () {
                     <Checkbox checked={customAction} onChange={e => setCustomAction(e.detail.checked)}>
                       Custom action
                     </Checkbox>
+                    <Checkbox checked={matches} onChange={e => setMatches(e.detail.checked)}>
+                      Show match count
+                    </Checkbox>
                   </SpaceBetween>
                 }
               >
@@ -127,13 +132,14 @@ export default function () {
                       filteringProperties={filteringProperties}
                       customControl={customControl && <Button>Filter action</Button>}
                       additionalActions={customAction && <Button>Filter action</Button>}
+                      countText={matches ? '11 matches' : undefined}
                     />
                   ) : (
                     <Input
                       data-testid="input-filter"
                       type="search"
-                      value={''}
-                      onChange={() => {}}
+                      value={textfilter}
+                      onChange={e => setTextfilter(e.detail.value)}
                       placeholder="Find instances"
                       clearAriaLabel="clear"
                     />
@@ -163,6 +169,7 @@ export default function () {
                     />
                   </FormField>
                 </div>
+                {matches && !usePropertyFilter && <span style={{ lineHeight: '3rem' }}>11 matches</span>}
               </div>
             }
             columnDefinitions={columnDefinitions.slice(0, 7)}