From 77b2478af1745f1cd7f734cea95bcb86e866ebe3 Mon Sep 17 00:00:00 2001 From: avrilpearl Date: Tue, 26 Mar 2019 14:41:33 -0400 Subject: [PATCH 1/6] react/DP-13169: Add default header search behavior. --- changelogs/DP-13169.md | 3 +++ .../molecules/HeaderSearch/index.js | 24 +++++++++++++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 changelogs/DP-13169.md diff --git a/changelogs/DP-13169.md b/changelogs/DP-13169.md new file mode 100644 index 0000000000..3902a908bf --- /dev/null +++ b/changelogs/DP-13169.md @@ -0,0 +1,3 @@ +Minor +Added +- (React) [HeaderSearch] DP-13169: Added default behaviour to HeaderSearch for onClick action to direct to search.mass.gov. Can be overidden by passing a custom onClick function to HeaderSearch's buttonSearch props. # diff --git a/react/src/components/molecules/HeaderSearch/index.js b/react/src/components/molecules/HeaderSearch/index.js index e28682236a..2a3cf10d66 100644 --- a/react/src/components/molecules/HeaderSearch/index.js +++ b/react/src/components/molecules/HeaderSearch/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import is from 'is'; import ButtonWithIcon from '../../atoms/buttons/ButtonWithIcon'; import TypeAheadDropdown from '../../molecules/TypeAheadDropdown'; import componentPropTypeCheck from '../../utilities/componentPropTypeCheck'; @@ -19,16 +20,32 @@ class HeaderSearch extends React.Component { handleChange(event) { const query = event.target.value; this.setState({ value: query }); - // invokes custom function if passed in the component + /** + * Invokes a custom onChange function if passed. + * @param {string} query - The current query string of the input. + */ if (typeof this.props.onChange === 'function') { this.props.onChange(query); } } + handleClick(e) { + if (is.fn(this.props.buttonSearch.onClick)) { + /** + * Invokes a custom onClick function if passed to the buttonSearch component. + * @param {object} event - The click event. + * @param {string} query - The current query string input. + */ + this.props.buttonSearch.onClick({ event: e, query: this.state.value }); + } else if (this.state.value.length > 0) { + window.location.assign(`https://search.mass.gov/?q=${this.state.value}`); + } + } render() { const headerSearch = this.props; const orgDropdown = headerSearch.orgDropdown; const shouldShowTypeAhead = (orgDropdown && orgDropdown.dropdownButton && orgDropdown.inputText); + const { onClick, ...buttonSearchRest } = headerSearch.buttonSearch; return(
{shouldShowTypeAhead && @@ -55,7 +72,10 @@ class HeaderSearch extends React.Component {
{this.props.postInputFilter}
- + this.handleClick(e)} + {...buttonSearchRest} + />
From 0c4024eb022fbdc0ae662c78f80da7ce80becd6f Mon Sep 17 00:00:00 2001 From: avrilpearl Date: Tue, 26 Mar 2019 14:55:40 -0400 Subject: [PATCH 2/6] add state value check --- react/src/components/molecules/HeaderSearch/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/src/components/molecules/HeaderSearch/index.js b/react/src/components/molecules/HeaderSearch/index.js index 2a3cf10d66..3303e1387d 100644 --- a/react/src/components/molecules/HeaderSearch/index.js +++ b/react/src/components/molecules/HeaderSearch/index.js @@ -20,6 +20,7 @@ class HeaderSearch extends React.Component { handleChange(event) { const query = event.target.value; this.setState({ value: query }); + console.log(query) /** * Invokes a custom onChange function if passed. * @param {string} query - The current query string of the input. @@ -36,7 +37,7 @@ class HeaderSearch extends React.Component { * @param {string} query - The current query string input. */ this.props.buttonSearch.onClick({ event: e, query: this.state.value }); - } else if (this.state.value.length > 0) { + } else if (this.state.value && this.state.value.length > 0) { window.location.assign(`https://search.mass.gov/?q=${this.state.value}`); } } From 5bac5f544c2fd8c441204177b74b08c6b9821266 Mon Sep 17 00:00:00 2001 From: Minghua Sun Date: Tue, 26 Mar 2019 16:23:54 -0400 Subject: [PATCH 3/6] Update changelogs/DP-13169.md Co-Authored-By: avrilpearl --- changelogs/DP-13169.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelogs/DP-13169.md b/changelogs/DP-13169.md index 3902a908bf..91623b4394 100644 --- a/changelogs/DP-13169.md +++ b/changelogs/DP-13169.md @@ -1,3 +1,3 @@ Minor Added -- (React) [HeaderSearch] DP-13169: Added default behaviour to HeaderSearch for onClick action to direct to search.mass.gov. Can be overidden by passing a custom onClick function to HeaderSearch's buttonSearch props. # +- (React) [HeaderSearch] DP-13169: Added default behaviour to HeaderSearch for onClick action to direct to search.mass.gov. Can be overidden by passing a custom onClick function to HeaderSearch's buttonSearch props. #519 From 6038cb5433fb1d9263e09f1acd496166f71f8ffc Mon Sep 17 00:00:00 2001 From: Steven Murray Date: Tue, 26 Mar 2019 16:24:02 -0400 Subject: [PATCH 4/6] Update react/src/components/molecules/HeaderSearch/index.js Co-Authored-By: avrilpearl --- react/src/components/molecules/HeaderSearch/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/react/src/components/molecules/HeaderSearch/index.js b/react/src/components/molecules/HeaderSearch/index.js index 3303e1387d..e9ce01d0ce 100644 --- a/react/src/components/molecules/HeaderSearch/index.js +++ b/react/src/components/molecules/HeaderSearch/index.js @@ -20,7 +20,6 @@ class HeaderSearch extends React.Component { handleChange(event) { const query = event.target.value; this.setState({ value: query }); - console.log(query) /** * Invokes a custom onChange function if passed. * @param {string} query - The current query string of the input. From 49043c04f0a252f6f1ebf9064a91ed3f42741fc0 Mon Sep 17 00:00:00 2001 From: Steven Murray Date: Tue, 26 Mar 2019 16:24:08 -0400 Subject: [PATCH 5/6] Update react/src/components/molecules/HeaderSearch/index.js Co-Authored-By: avrilpearl --- react/src/components/molecules/HeaderSearch/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/src/components/molecules/HeaderSearch/index.js b/react/src/components/molecules/HeaderSearch/index.js index e9ce01d0ce..4f5b0f9f97 100644 --- a/react/src/components/molecules/HeaderSearch/index.js +++ b/react/src/components/molecules/HeaderSearch/index.js @@ -29,7 +29,7 @@ class HeaderSearch extends React.Component { } } handleClick(e) { - if (is.fn(this.props.buttonSearch.onClick)) { + if (this.props.buttonSearch && is.fn(this.props.buttonSearch.onClick)) { /** * Invokes a custom onClick function if passed to the buttonSearch component. * @param {object} event - The click event. From d55687ce50e276e135c1f2bcadc5c0d8418e3677 Mon Sep 17 00:00:00 2001 From: avrilpearl Date: Tue, 18 Jun 2019 10:52:26 -0400 Subject: [PATCH 6/6] address comments --- react/src/components/molecules/HeaderSearch/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/react/src/components/molecules/HeaderSearch/index.js b/react/src/components/molecules/HeaderSearch/index.js index d8b267b1e9..25a55d3522 100644 --- a/react/src/components/molecules/HeaderSearch/index.js +++ b/react/src/components/molecules/HeaderSearch/index.js @@ -17,25 +17,26 @@ class HeaderSearch extends React.Component { this.setState({ value: nextProps.defaultText }); } - handleChange(event) { - const query = event.target.value; + handleChange(e) { + const query = e.target.value; this.setState({ value: query }); /** * Invokes a custom onChange function if passed. * @param {string} query - The current query string of the input. */ - if (typeof this.props.onChange === 'function') { + if (this.props.onChange && is.fn(this.props.onChange)) { this.props.onChange(query); } } handleClick(e) { + const event = e; if (this.props.buttonSearch && is.fn(this.props.buttonSearch.onClick)) { /** * Invokes a custom onClick function if passed to the buttonSearch component. * @param {object} event - The click event. * @param {string} query - The current query string input. */ - this.props.buttonSearch.onClick({ event: e, query: this.state.value }); + this.props.buttonSearch.onClick({ event, query: this.state.value }); } else if (this.state.value && this.state.value.length > 0) { window.location.assign(`https://search.mass.gov/?q=${this.state.value}`); }