feat(Search): custom category layout renderer (#3672)

* [WIP] First implementation of custom SearchCategoryRenderer

* [WIP] Added Typescript file and props validation

* [wip] updating documentation

* WIP  remove unecessary change in PR

* WIP fix unnecessary parenthesis

* added proptypes to the search component

* forgot to put the props optional

* remove v2 in example title

Author: PrincessMadMath

docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js

@@ -4,6 +4,20 @@ import faker from 'faker'
 import React, { Component } from 'react'
 import { Search, Grid, Header, Segment, Label } from 'semantic-ui-react'
 
+const categoryLayoutRenderer = ({ categoryContent, resultsContent }) => (
+  <div>
+    <h3 className='name'>{categoryContent}</h3>
+    <div style={{ background: 'red' }} className='results'>
+      {resultsContent}
+    </div>
+  </div>
+)
+
+categoryLayoutRenderer.propTypes = {
+  categoryContent: PropTypes.node,
+  resultsContent: PropTypes.node,
+}
+
 const categoryRenderer = ({ name }) => <Label as='span' content={name} />
 
 categoryRenderer.propTypes = {
@@ -79,6 +93,7 @@ export default class SearchExampleCategory extends Component {
         <Grid.Column width={8}>
           <Search
             category
+            categoryLayoutRenderer={categoryLayoutRenderer}
             categoryRenderer={categoryRenderer}
             loading={isLoading}
             onResultSelect={this.handleResultSelect}

src/modules/Search/Search.d.ts

@@ -58,6 +58,14 @@ export interface StrictSearchProps {
   // ------------------------------------
   // Rendering
   // ------------------------------------
+  /**
+   * Renders the SearchCategory layout.
+   *
+   * @param {object} categoryContent - The Renderable SearchCategory contents.
+   * @param {object} resultsContent - The Renderable SearchResult contents.
+   * @returns {*} - Renderable SearchCategory layout.
+   */
+  categoryLayoutRenderer?: (props: SearchCategoryProps) => React.ReactElement<any>
 
   /**
    * Renders the SearchCategory contents.

src/modules/Search/Search.js

@@ -83,6 +83,15 @@ export default class Search extends Component {
     // Rendering
     // ------------------------------------
 
+    /**
+     * Renders the SearchCategory layout.
+     *
+     * @param {object} categoryContent - The Renderable SearchCategory contents.
+     * @param {object} resultsContent - The Renderable SearchResult contents.
+     * @returns {*} - Renderable SearchCategory layout.
+     */
+    categoryLayoutRenderer: PropTypes.func,
+
     /**
      * Renders the SearchCategory contents.
      *
@@ -577,7 +586,7 @@ export default class Search extends Component {
   }
 
   renderCategories = () => {
-    const { categoryRenderer, results: categories } = this.props
+    const { categoryLayoutRenderer, categoryRenderer, results: categories } = this.props
     const { selectedIndex } = this.state
 
     let count = 0
@@ -586,6 +595,7 @@ export default class Search extends Component {
       const categoryProps = {
         key: childKey || category.name,
         active: _.inRange(selectedIndex, count, count + category.results.length),
+        layoutRenderer: categoryLayoutRenderer,
         renderer: categoryRenderer,
         ...category,
       }

src/modules/Search/SearchCategory.d.ts

@@ -26,6 +26,18 @@ export interface StrictSearchCategoryProps {
   /** Display name. */
   name?: string
 
+  /**
+   * Renders the SearchCategory layout.
+   *
+   * @param {object} categoryContent - The Renderable SearchCategory contents.
+   * @param {object} resultsContent - The Renderable SearchResult contents.
+   * @returns {*} - Renderable SearchCategory layout.
+   */
+  layoutRenderer?: (
+    categoryContent: React.ReactElement<any>,
+    resultsContent: React.ReactElement<any>,
+  ) => React.ReactElement<any>
+
   /**
    * Renders the category contents.
    *

src/modules/Search/SearchCategory.js

@@ -9,22 +9,26 @@ import {
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
+import SearchCategoryLayout from './SearchCategoryLayout'
 
 function SearchCategory(props) {
-  const { active, children, className, content, renderer } = props
+  const { active, children, className, content, layoutRenderer, renderer } = props
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
   const rest = getUnhandledProps(SearchCategory, props)
   const ElementType = getElementType(SearchCategory, props)
 
+  const categoryContent = renderer(props)
+  const resultsContent = childrenUtils.isNil(children) ? content : children
+
   return (
     <ElementType {...rest} className={classes}>
-      <div className='name'>{renderer(props)}</div>
-      <div className='results'>{childrenUtils.isNil(children) ? content : children}</div>
+      {layoutRenderer({ categoryContent, resultsContent })}
     </ElementType>
   )
 }
 
 SearchCategory.defaultProps = {
+  layoutRenderer: SearchCategoryLayout,
   renderer: ({ name }) => name,
 }
 
@@ -47,6 +51,14 @@ SearchCategory.propTypes = {
   /** Display name. */
   name: PropTypes.string,
 
+  /**
+   * Renders the category layout contents.
+   *
+   * @param {object} props - The SearchCategoryLayout props object.
+   * @returns {*} - Renderable category layout contents.
+   */
+  layoutRenderer: PropTypes.func,
+
   /**
    * Renders the category contents.
    *

src/modules/Search/SearchCategoryLayout.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+import { SemanticShorthandContent } from '../../generic'
+import SearchResult from './SearchResult'
+
+export interface SearchCategoryLayoutProps extends StrictSearchCategoryLayoutProps {
+  [key: string]: any
+}
+
+export interface StrictSearchCategoryLayoutProps {
+  /** The rendered category content */
+  categoryContent: React.ReactElement<any>
+
+  /** The rendered results content */
+  resultsContent: React.ReactElement<any>
+}
+
+declare const SearchCategoryLayout: React.StatelessComponent<SearchCategoryLayoutProps>
+
+export default SearchCategoryLayout

src/modules/Search/SearchCategoryLayout.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+function SearchCategoryLayout(props) {
+  const { categoryContent, resultsContent } = props
+  return (
+    <>
+      <div className='name'>{categoryContent}</div>
+      <div className='results'>{resultsContent}</div>
+    </>
+  )
+}
+
+SearchCategoryLayout.propTypes = {
+  /** The rendered category content */
+  categoryContent: PropTypes.element.isRequired,
+
+  /** The rendered results content */
+  resultsContent: PropTypes.element.isRequired,
+}
+
+export default SearchCategoryLayout