chore(Search*): use React.forwardRef() (#4270)

Author: layershifter

src/index.js

@@ -154,6 +154,7 @@ export RatingIcon from './modules/Rating/RatingIcon'
 
 export Search from './modules/Search'
 export SearchCategory from './modules/Search/SearchCategory'
+export SearchCategoryLayout from './modules/Search/SearchCategoryLayout'
 export SearchResult from './modules/Search/SearchResult'
 export SearchResults from './modules/Search/SearchResults'
 

src/modules/Search/Search.js

@@ -22,6 +22,7 @@ import {
 } from '../../lib'
 import Input from '../../elements/Input'
 import SearchCategory from './SearchCategory'
+import SearchCategoryLayout from './SearchCategoryLayout'
 import SearchResult from './SearchResult'
 import SearchResults from './SearchResults'
 
@@ -679,5 +680,6 @@ Search.defaultProps = {
 Search.autoControlledProps = ['open', 'value']
 
 Search.Category = SearchCategory
+Search.CategoryLayout = SearchCategoryLayout
 Search.Result = SearchResult
 Search.Results = SearchResults

src/modules/Search/SearchCategory.js

@@ -11,8 +11,9 @@ import {
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
-function SearchCategory(props) {
+const SearchCategory = React.forwardRef(function (props, ref) {
   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)
@@ -21,17 +22,18 @@ function SearchCategory(props) {
   const resultsContent = childrenUtils.isNil(children) ? content : children
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {layoutRenderer({ categoryContent, resultsContent })}
     </ElementType>
   )
-}
+})
 
 SearchCategory.defaultProps = {
   layoutRenderer: SearchCategoryLayout,
   renderer: ({ name }) => name,
 }
 
+SearchCategory.displayName = 'SearchCategory'
 SearchCategory.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/modules/Search/SearchCategoryLayout.d.ts

@@ -1,8 +1,5 @@
 import * as React from 'react'
 
-import { SemanticShorthandContent } from '../../generic'
-import SearchResult from './SearchResult'
-
 export interface SearchCategoryLayoutProps extends StrictSearchCategoryLayoutProps {
   [key: string]: any
 }
@@ -15,6 +12,6 @@ export interface StrictSearchCategoryLayoutProps {
   resultsContent: React.ReactElement<any>
 }
 
-declare const SearchCategoryLayout: React.StatelessComponent<SearchCategoryLayoutProps>
+declare const SearchCategoryLayout: React.FunctionComponent<SearchCategoryLayoutProps>
 
 export default SearchCategoryLayout

src/modules/Search/SearchCategoryLayout.js

@@ -3,6 +3,7 @@ import React from 'react'
 
 function SearchCategoryLayout(props) {
   const { categoryContent, resultsContent } = props
+
   return (
     <>
       <div className='name'>{categoryContent}</div>

src/modules/Search/SearchResult.js

@@ -1,6 +1,7 @@
 import cx from 'clsx'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   createHTMLImage,
@@ -30,32 +31,29 @@ const defaultRenderer = ({ image, price, title, description }) => [
   </div>,
 ]
 
-export default class SearchResult extends Component {
-  handleClick = (e) => {
-    const { onClick } = this.props
+const SearchResult = React.forwardRef(function (props, ref) {
+  const { active, className, renderer } = props
 
-    if (onClick) onClick(e, this.props)
+  const handleClick = (e) => {
+    _.invoke(props, 'onClick', e, props)
   }
 
-  render() {
-    const { active, className, renderer } = this.props
-
-    const classes = cx(useKeyOnly(active, 'active'), 'result', className)
-    const rest = getUnhandledProps(SearchResult, this.props)
-    const ElementType = getElementType(SearchResult, this.props)
-
-    // Note: You technically only need the 'content' wrapper when there's an
-    // image. However, optionally wrapping it makes this function a lot more
-    // complicated and harder to read. Since always wrapping it doesn't affect
-    // the style in any way let's just do that.
-    return (
-      <ElementType {...rest} className={classes} onClick={this.handleClick}>
-        {renderer(this.props)}
-      </ElementType>
-    )
-  }
-}
-
+  const classes = cx(useKeyOnly(active, 'active'), 'result', className)
+  const rest = getUnhandledProps(SearchResult, props)
+  const ElementType = getElementType(SearchResult, props)
+
+  // Note: You technically only need the 'content' wrapper when there's an
+  // image. However, optionally wrapping it makes this function a lot more
+  // complicated and harder to read. Since always wrapping it doesn't affect
+  // the style in any way let's just do that.
+  return (
+    <ElementType {...rest} className={classes} onClick={handleClick} ref={ref}>
+      {renderer(props)}
+    </ElementType>
+  )
+})
+
+SearchResult.displayName = 'SearchResult'
 SearchResult.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -104,3 +102,5 @@ SearchResult.propTypes = {
 SearchResult.defaultProps = {
   renderer: defaultRenderer,
 }
+
+export default SearchResult

src/modules/Search/SearchResults.js

@@ -4,19 +4,20 @@ import React from 'react'
 
 import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
 
-function SearchResults(props) {
+const SearchResults = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('results transition', className)
   const rest = getUnhandledProps(SearchResults, props)
   const ElementType = getElementType(SearchResults, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SearchResults.displayName = 'SearchResults'
 SearchResults.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

test/specs/modules/Search/SearchCategory-test.js

@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('SearchCategory', () => {
   common.isConformant(SearchCategory)
+  common.forwardsRef(SearchCategory)
   common.rendersChildren(SearchCategory)
 
   describe('children', () => {

test/specs/modules/Search/SearchCategoryLayout-test.js

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import SearchCategoryLayout from 'src/modules/Search/SearchCategoryLayout'
+import * as common from 'test/specs/commonTests'
+
+const requiredProps = {
+  categoryContent: <div />,
+  resultsContent: <div />,
+}
+
+describe('SearchCategoryLayout', () => {
+  common.isConformant(SearchCategoryLayout, { requiredProps, rendersChildren: false })
+})

test/specs/modules/Search/SearchResult-test.js

@@ -1,9 +1,23 @@
+import React from 'react'
+
 import SearchResult from 'src/modules/Search/SearchResult'
 import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
 
 const requiredProps = { title: '' }
 
 describe('SearchResult', () => {
   common.isConformant(SearchResult, { requiredProps })
+  common.forwardsRef(SearchResult, { requiredProps })
   common.propKeyOnlyToClassName(SearchResult, 'active', { requiredProps })
+
+  describe('onClick', () => {
+    it('is called with (e, data) when clicked', () => {
+      const onClick = sandbox.spy()
+      mount(<SearchResult onClick={onClick} {...requiredProps} />).simulate('click')
+
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch({ type: 'click' }, requiredProps)
+    })
+  })
 })