feat: search button and footer text props

Adslot · Aug 15, 2022 · 33989ba · 33989ba
1 parent 3fd2521
commit 33989ba
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/src/components/SearchableCheckList/index.d.ts b/src/components/SearchableCheckList/index.d.ts
@@ -42,6 +42,8 @@ export interface SearchableCheckListProps {
   searchOnEnter?: boolean;
   onSearch?: (...args: any[]) => any;
   onClear?: (...args: any[]) => any;
+  showSearchButton?: boolean;
+  footerText?: string;
 }
 
 declare const SearchableCheckList: React.FC<SearchableCheckListProps>;

diff --git a/src/components/SearchableCheckList/index.jsx b/src/components/SearchableCheckList/index.jsx
@@ -17,6 +17,8 @@ const SearchableCheckList = ({
   onSearch,
   searchOnEnter,
   onClear,
+  showSearchButton,
+  footerText,
 }) => {
   const [searchText, setSearchText] = React.useState('');
 
@@ -58,6 +60,7 @@ const SearchableCheckList = ({
         )}
         <div className="search-box">
           <Search
+            showSearchButton={showSearchButton}
             searchOnEnter={searchOnEnter}
             onClear={onClear}
             onSearch={(value) => {
@@ -93,13 +96,14 @@ const SearchableCheckList = ({
             ))}
           </CheckboxGroup>
         </div>
-        {remainingItemsCount > 0 && (
-          <div
-            className="footer"
-            data-testid="footer-section"
-          >{`${remainingItemsCount.toLocaleString()} more ${_.toLower(
-            remainingItemsCount > 1 ? pluralLabel : singularLabel
-          )}`}</div>
+        {(!_.isEmpty(footerText) || remainingItemsCount > 0) && (
+          <div className="footer" data-testid="footer-section">
+            {!_.isEmpty(footerText)
+              ? footerText
+              : `${remainingItemsCount.toLocaleString()} more ${_.toLower(
+                  remainingItemsCount > 1 ? pluralLabel : singularLabel
+                )}`}
+          </div>
         )}
       </div>
     </div>
@@ -146,6 +150,8 @@ SearchableCheckList.propTypes = {
   searchOnEnter: PropTypes.bool,
   onSearch: PropTypes.func,
   onClear: PropTypes.func,
+  showSearchButton: PropTypes.bool,
+  footerText: PropTypes.string,
 };
 
 SearchableCheckList.defaultProps = {
@@ -155,6 +161,7 @@ SearchableCheckList.defaultProps = {
   placeholder: 'Search',
   searchOnEnter: false,
   onClear: _.noOp,
+  showSearchButton: true,
 };
 
 export default SearchableCheckList;
diff --git a/src/components/SearchableCheckList/index.spec.jsx b/src/components/SearchableCheckList/index.spec.jsx
@@ -52,6 +52,26 @@ describe('<SearchableChecklist />', () => {
     expect(queryByTestId('searchable-list-title')).not.toBeInTheDocument();
   });
 
+  it('should render search button by default when searchOnEnter is true', () => {
+    const { queryByTestId } = render(
+      <SearchableCheckList context={context} items={items} onChange={_.noop} searchOnEnter={true} />
+    );
+    expect(queryByTestId('search-button')).toBeInTheDocument();
+  });
+
+  it('should not render search button when showSearchButton is false', () => {
+    const { queryByTestId } = render(
+      <SearchableCheckList
+        context={context}
+        items={items}
+        onChange={_.noop}
+        searchOnEnter={true}
+        showSearchButton={false}
+      />
+    );
+    expect(queryByTestId('search-button')).not.toBeInTheDocument();
+  });
+
   it('should correctly render footer value with single hidden item', () => {
     const { getByTestId } = render(
       <SearchableCheckList context={context} items={items} displayCount={8} onChange={_.noop} />
@@ -60,6 +80,20 @@ describe('<SearchableChecklist />', () => {
     expect(getByTestId('footer-section')).toHaveTextContent('1 more publisher');
   });
 
+  it('should correctly render footer text when specified', () => {
+    const { getByTestId } = render(
+      <SearchableCheckList
+        context={context}
+        items={items}
+        displayCount={8}
+        onChange={_.noop}
+        footerText="custom text"
+      />
+    );
+
+    expect(getByTestId('footer-section')).toHaveTextContent('custom text');
+  });
+
   it('should correctly render custom placeholder', () => {
     const { queryByTestId } = render(
       <SearchableCheckList