search

Author: Sasha Kondrashov

index.d.ts

@@ -509,12 +509,7 @@ export {
   StrictRatingIconProps,
 } from './dist/commonjs/modules/Rating/RatingIcon'
 
-export {
-  default as Search,
-  SearchProps,
-  SearchResultData,
-  StrictSearchProps,
-} from './dist/commonjs/modules/Search'
+export { default as Search, SearchProps, StrictSearchProps } from './dist/commonjs/modules/Search'
 export {
   default as SearchCategory,
   SearchCategoryProps,

src/modules/Search/Search.d.ts

@@ -93,49 +93,60 @@ export interface StrictSearchProps {
    * Called on blur.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onBlur?: (event: React.MouseEvent<HTMLElement>, data: SearchProps) => void
+  onBlur?: (event: React.MouseEvent<HTMLElement>, props: SearchProps) => void
 
   /**
    * Called on focus.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onFocus?: (event: React.MouseEvent<HTMLElement>, data: SearchProps) => void
+  onFocus?: (event: React.MouseEvent<HTMLElement>, props: SearchProps) => void
 
   /**
    * Called on mousedown.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onMouseDown?: (event: React.MouseEvent<HTMLElement>, data: SearchProps) => void
+  onMouseDown?: (event: React.MouseEvent<HTMLElement>, props: SearchProps) => void
 
   /**
    * Called when a result is selected.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
+   * @param {any} result - The search result.
    */
-  onResultSelect?: (event: React.MouseEvent<HTMLDivElement>, data: SearchResultData) => void
+  onResultSelect?: (
+    event: React.MouseEvent<HTMLDivElement>,
+    props: SearchProps,
+    result: any,
+  ) => void
 
   /**
    * Called on search input change.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props, includes current value of search input.
+   * @param {object} props - All props.
+   * @param {string} query - Current value of search input.
    */
-  onSearchChange?: (event: React.MouseEvent<HTMLElement>, data: SearchProps) => void
+  onSearchChange?: (event: React.MouseEvent<HTMLElement>, props: SearchProps, query: string) => void
 
   /**
    * Called when the active selection index is changed.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
+   * @param {any} result - The search result.
    */
-  onSelectionChange?: (event: React.MouseEvent<HTMLElement>, data: SearchResultData) => void
+  onSelectionChange?: (
+    event: React.MouseEvent<HTMLElement>,
+    props: SearchProps,
+    result: any,
+  ) => void
 
   // ------------------------------------
   // Style
@@ -166,10 +177,6 @@ export interface StrictSearchProps {
   placeholder?: string
 }
 
-export interface SearchResultData extends SearchProps {
-  result: any
-}
-
 declare const Search: ForwardRefComponent<SearchProps, HTMLDivElement> & {
   Category: typeof SearchCategory
   Result: typeof SearchResult

src/modules/Search/Search.js

@@ -152,14 +152,14 @@ class SearchInner extends Component {
     debug('handleResultSelect()')
     debug(result)
 
-    _.invoke(this.props, 'onResultSelect', e, { ...this.props, result })
+    _.invoke(this.props, 'onResultSelect', e, this.props, result)
   }
 
   handleSelectionChange = (e) => {
     debug('handleSelectionChange()')
 
     const result = this.getSelectedResult()
-    _.invoke(this.props, 'onSelectionChange', e, { ...this.props, result })
+    _.invoke(this.props, 'onSelectionChange', e, this.props, result)
   }
 
   closeOnEscape = (e) => {
@@ -282,7 +282,7 @@ class SearchInner extends Component {
     const { open } = this.state
     const newQuery = e.target.value
 
-    _.invoke(this.props, 'onSearchChange', e, { ...this.props, value: newQuery })
+    _.invoke(this.props, 'onSearchChange', e, this.props, newQuery)
 
     // open search dropdown on search query
     if (newQuery.length < minCharacters) {

src/modules/Search/index.d.ts

@@ -1 +1 @@
-export { default, SearchProps, StrictSearchProps, SearchResultData } from './Search'
+export { default, SearchProps, StrictSearchProps } from './Search'

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

@@ -485,7 +485,7 @@ describe('Search', () => {
   })
 
   describe('onBlur', () => {
-    it('is called with (event, data) on search input blur', () => {
+    it('is called on search input blur', () => {
       const onBlur = sandbox.spy()
       wrapperMount(<Search results={options} onBlur={onBlur} />).simulate('blur', nativeEvent)
 
@@ -504,7 +504,7 @@ describe('Search', () => {
   })
 
   describe('onFocus', () => {
-    it('is called with (event, data) on search input focus', () => {
+    it('is called on search input focus', () => {
       const onFocus = sandbox.spy()
       wrapperMount(<Search results={options} onFocus={onFocus} />).simulate('focus', nativeEvent)
 
@@ -514,36 +514,41 @@ describe('Search', () => {
   })
 
   describe('onResultSelect', () => {
-    let spy
+    let onResultSelect
     beforeEach(() => {
-      spy = sandbox.spy()
+      onResultSelect = sandbox.spy()
     })
 
-    it('is called with event and value on item click', () => {
+    it('is called on item click', () => {
       const randomIndex = _.random(options.length - 1)
       const randomResult = options[randomIndex]
-      wrapperMount(<Search results={options} minCharacters={0} onResultSelect={spy} />)
+      wrapperMount(<Search results={options} minCharacters={0} onResultSelect={onResultSelect} />)
 
       // open
       openSearchResults()
       searchResultsIsOpen()
 
       wrapper.find('SearchResult').at(randomIndex).simulate('click', nativeEvent)
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch(
+      onResultSelect.should.have.been.calledOnce()
+      onResultSelect.should.have.been.calledWithMatch(
         {},
         {
           minCharacters: 0,
-          result: randomResult,
           results: options,
         },
+        randomResult,
       )
     })
-    it('is called with event and value when pressing enter on a selected item', () => {
+    it('is called when pressing enter on a selected item', () => {
       const firstResult = options[0]
       wrapperMount(
-        <Search results={options} minCharacters={0} onResultSelect={spy} selectFirstResult />,
+        <Search
+          results={options}
+          minCharacters={0}
+          onResultSelect={onResultSelect}
+          selectFirstResult
+        />,
       )
 
       // open
@@ -552,18 +557,23 @@ describe('Search', () => {
 
       domEvent.keyDown(document, { key: 'Enter' })
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch({}, { result: firstResult })
+      onResultSelect.should.have.been.calledOnce()
+      onResultSelect.should.have.been.calledWithMatch({}, {}, firstResult)
     })
     it('is not called when updating the value prop', () => {
       const value = _.sample(options).title
       const next = _.sample(_.without(options, value)).title
 
       wrapperMount(
-        <Search results={options} minCharacters={0} value={value} onResultSelect={spy} />,
+        <Search
+          results={options}
+          minCharacters={0}
+          value={value}
+          onResultSelect={onResultSelect}
+        />,
       ).setProps({ value: next })
 
-      spy.should.not.have.been.called()
+      onResultSelect.should.not.have.been.called()
     })
     it('does not call onResultSelect on query change', () => {
       const onResultSelectSpy = sandbox.spy()
@@ -579,26 +589,26 @@ describe('Search', () => {
   })
 
   describe('onSearchChange', () => {
-    it('is called with (event, value) on search input change', () => {
-      const spy = sandbox.spy()
-      wrapperMount(<Search results={options} minCharacters={0} onSearchChange={spy} />)
+    it('is called on search input change', () => {
+      const onSearchChange = sandbox.spy()
+      wrapperMount(<Search results={options} minCharacters={0} onSearchChange={onSearchChange} />)
         .find('input.prompt')
         .simulate('change', { target: { value: 'a' }, stopPropagation: _.noop })
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch(
+      onSearchChange.should.have.been.calledOnce()
+      onSearchChange.should.have.been.calledWithMatch(
         { target: { value: 'a' } },
         {
           minCharacters: 0,
           results: options,
-          value: 'a',
         },
+        'a',
       )
     })
   })
 
-  describe('onSearchChange', () => {
-    it('is called with (event, data) when the active selection index is changed', () => {
+  describe('onSelectionChange', () => {
+    it('is called when the active selection index is changed', () => {
       const onSelectionChange = sandbox.spy()
 
       wrapperMount(
@@ -617,9 +627,9 @@ describe('Search', () => {
         {},
         {
           minCharacters: 0,
-          result: options[1],
           results: options,
         },
+        options[1],
       )
     })
   })