From 7c272cdf9810bf2c94ec395130da15697d52789d Mon Sep 17 00:00:00 2001 From: Kenny Lam Date: Fri, 15 Jan 2021 11:38:34 -0500 Subject: [PATCH 1/5] feat(search): add no redirect option to search --- .../react/src/components/Masthead/Masthead.js | 7 +-- .../src/components/Masthead/MastheadSearch.js | 49 ++++++++++++++----- .../components/Masthead/README.stories.mdx | 16 ++++++ 3 files changed, 54 insertions(+), 18 deletions(-) diff --git a/packages/react/src/components/Masthead/Masthead.js b/packages/react/src/components/Masthead/Masthead.js index a4316b80fd0..1dd1d9fe18e 100644 --- a/packages/react/src/components/Masthead/Masthead.js +++ b/packages/react/src/components/Masthead/Masthead.js @@ -251,15 +251,10 @@ const Masthead = ({ )} {hasSearch && ( )} diff --git a/packages/react/src/components/Masthead/MastheadSearch.js b/packages/react/src/components/Masthead/MastheadSearch.js index 517369651b2..70f6dd8adbb 100755 --- a/packages/react/src/components/Masthead/MastheadSearch.js +++ b/packages/react/src/components/Masthead/MastheadSearch.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2020 + * Copyright IBM Corp. 2016, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -100,7 +100,6 @@ const MastheadSearch = ({ renderValue, searchOpenOnload, navType, - customTypeaheadApi, ...rest }) => { const { ref } = useSearchVisible(false); @@ -206,6 +205,12 @@ const MastheadSearch = ({ rest.isSearchActive(state.isSearchOpen); } + // Custom event emitted when search does not redirect to default url + const onSearchNoRedirect = new CustomEvent('onSearchNoRedirect', { + bubbles: true, + detail: { value: state.val }, + }); + /** * When the input field changes, we set the new val to our state * @@ -224,6 +229,23 @@ const MastheadSearch = ({ dispatch({ type: 'setVal', payload: { val: newValue } }); } + /** + * Custom onKeyDown event handlers + * + * @param {event} event The callback event + */ + function onKeyDown(event) { + switch (event.key) { + case 'Enter': { + // Disables Enter key if searchNoRirect is true + if (rest.searchNoRedirect) { + event.currentTarget.dispatchEvent(onSearchNoRedirect); + event.preventDefault(); + } + } + } + } + /** * Autosuggest will pass through all these props to the input. * @@ -233,6 +255,7 @@ const MastheadSearch = ({ placeholder: placeHolderText, value: state.val, onChange, + onKeyDown, className: `${prefix}--header__search--input`, }; @@ -263,7 +286,11 @@ const MastheadSearch = ({ } if (state.isSearchOpen && state.val.length) { - root.parent.location.href = getRedirect(state.val); + if (rest.searchNoRedirect) { + event.currentTarget.dispatchEvent(onSearchNoRedirect); + } else { + root.parent.location.href = getRedirect(state.val); + } } else { dispatch({ type: 'setSearchOpen' }); } @@ -310,7 +337,6 @@ const MastheadSearch = ({ componentInputProps={componentInputProps} dispatch={dispatch} isActive={state.isSearchOpen} - searchIconClick={searchIconClick} /> ); } @@ -364,8 +390,8 @@ const MastheadSearch = ({ if (request.reason === 'input-changed') { // if the search input has changed - let response = customTypeaheadApi - ? customTypeaheadApi(searchValue) + let response = rest.customTypeaheadApi + ? rest.customTypeaheadApi(searchValue) : await SearchTypeaheadAPI.getResults(searchValue); if (response !== undefined) { @@ -400,7 +426,11 @@ const MastheadSearch = ({ * @param {string} params.suggestionValue Suggestion value */ function onSuggestionSelected(event, { suggestionValue }) { - root.parent.location.href = getRedirect(suggestionValue); + if (rest.searchNoRedirect) { + event.preventDefault(); + } else { + root.parent.location.href = getRedirect(suggestionValue); + } } /** @@ -483,11 +513,6 @@ MastheadSearch.propTypes = { * navigation type for autoids */ navType: PropTypes.oneOf(['default', 'alt', 'eco']), - - /** - * Custom typeahead API function - */ - customTypeaheadApi: PropTypes.func, }; MastheadSearch.defaultProps = { diff --git a/packages/react/src/components/Masthead/README.stories.mdx b/packages/react/src/components/Masthead/README.stories.mdx index e56f84b0112..97d3e2e6b21 100755 --- a/packages/react/src/components/Masthead/README.stories.mdx +++ b/packages/react/src/components/Masthead/README.stories.mdx @@ -126,6 +126,12 @@ document.addEventListener('onSearchValueChanged', e => console.log(e.detail); // { value: inputValue } // do something here ); + +// disables search redirect onClick and onEnter +document.addEventListener('onSearchNoRedirect', e => + console.log(e.detail); // { value: inputValue } + // do something here +); ``` ## Props @@ -200,6 +206,16 @@ const platformData = { ; ``` +## searchNoRedirect + +This will disable the default redirecting of the search component as well as emit +the `onSearchNoRedirect` [custom event](#custom-events). +> Note that unless a custom redirect action is +provided in the event, the search will do nothing except list search suggestions. + +; +``` + ## customProfileLogin This allows setting a user-defined login URL. This is currently an experimental From ecd9be7ab4eb2dad14ae2bf1553974c5b0ce49ae Mon Sep 17 00:00:00 2001 From: Kenny Lam Date: Fri, 15 Jan 2021 11:45:03 -0500 Subject: [PATCH 2/5] chore(snapshot): update snapshots --- .../__snapshots__/storyshots.test.js.snap | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 9804ac33646..4a2a916deac 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -38434,6 +38434,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = /> Date: Fri, 15 Jan 2021 12:22:52 -0500 Subject: [PATCH 3/5] fix(search): update event details --- .../src/components/Masthead/MastheadSearch.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/Masthead/MastheadSearch.js b/packages/react/src/components/Masthead/MastheadSearch.js index 70f6dd8adbb..77615e99128 100755 --- a/packages/react/src/components/Masthead/MastheadSearch.js +++ b/packages/react/src/components/Masthead/MastheadSearch.js @@ -206,10 +206,14 @@ const MastheadSearch = ({ } // Custom event emitted when search does not redirect to default url - const onSearchNoRedirect = new CustomEvent('onSearchNoRedirect', { - bubbles: true, - detail: { value: state.val }, - }); + function onSearchNoRedirect(event, val) { + const onSearchNoRedirect = new CustomEvent('onSearchNoRedirect', { + bubbles: true, + detail: { value: val }, + }); + + event.currentTarget.dispatchEvent(onSearchNoRedirect); + } /** * When the input field changes, we set the new val to our state @@ -225,7 +229,6 @@ const MastheadSearch = ({ }); event.currentTarget.dispatchEvent(onSearchValueChanged); - dispatch({ type: 'setVal', payload: { val: newValue } }); } @@ -239,7 +242,7 @@ const MastheadSearch = ({ case 'Enter': { // Disables Enter key if searchNoRirect is true if (rest.searchNoRedirect) { - event.currentTarget.dispatchEvent(onSearchNoRedirect); + onSearchNoRedirect(event, state.val); event.preventDefault(); } } @@ -287,7 +290,7 @@ const MastheadSearch = ({ if (state.isSearchOpen && state.val.length) { if (rest.searchNoRedirect) { - event.currentTarget.dispatchEvent(onSearchNoRedirect); + onSearchNoRedirect(event, state.val); } else { root.parent.location.href = getRedirect(state.val); } @@ -427,6 +430,7 @@ const MastheadSearch = ({ */ function onSuggestionSelected(event, { suggestionValue }) { if (rest.searchNoRedirect) { + onSearchNoRedirect(event, suggestionValue); event.preventDefault(); } else { root.parent.location.href = getRedirect(suggestionValue); From 3a8d53cab5ceea16d3a5bc22d01a709f8dcf9213 Mon Sep 17 00:00:00 2001 From: Kenny Lam Date: Fri, 15 Jan 2021 12:39:36 -0500 Subject: [PATCH 4/5] chore(docs): update jsdocs --- packages/react/src/components/Masthead/MastheadSearch.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Masthead/MastheadSearch.js b/packages/react/src/components/Masthead/MastheadSearch.js index 77615e99128..625db685db2 100755 --- a/packages/react/src/components/Masthead/MastheadSearch.js +++ b/packages/react/src/components/Masthead/MastheadSearch.js @@ -205,7 +205,12 @@ const MastheadSearch = ({ rest.isSearchActive(state.isSearchOpen); } - // Custom event emitted when search does not redirect to default url + /** + * Custom event emitted when search does not redirect to default url + * + * @param {event} event The callback event + * @param {string} val The new val of the input + */ function onSearchNoRedirect(event, val) { const onSearchNoRedirect = new CustomEvent('onSearchNoRedirect', { bubbles: true, From a639f3f01bc72060fa864a26b1ef03b9201698a3 Mon Sep 17 00:00:00 2001 From: Kenny Lam Date: Fri, 15 Jan 2021 15:12:50 -0500 Subject: [PATCH 5/5] chore(docs): fix syntax error in readme --- packages/react/src/components/Masthead/README.stories.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Masthead/README.stories.mdx b/packages/react/src/components/Masthead/README.stories.mdx index 97d3e2e6b21..a7ef54ab3bd 100755 --- a/packages/react/src/components/Masthead/README.stories.mdx +++ b/packages/react/src/components/Masthead/README.stories.mdx @@ -213,6 +213,7 @@ the `onSearchNoRedirect` [custom event](#custom-events). > Note that unless a custom redirect action is provided in the event, the search will do nothing except list search suggestions. +```javascript ; ```