From aa11bbbedcf72f4ec41b792a32b6fcb3d004190d Mon Sep 17 00:00:00 2001 From: Tiberiu Ichim Date: Mon, 20 Jan 2025 12:45:07 +0200 Subject: [PATCH 1/7] Add intl inteligence to header search popup --- .../ui/Header/HeaderSearchPopUp.js | 21 ++++- src/index.js | 80 ++++++++++++++----- 2 files changed, 80 insertions(+), 21 deletions(-) diff --git a/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js b/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js index 13ac82c0..76832285 100644 --- a/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js +++ b/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js @@ -3,6 +3,8 @@ import { Container, Input, List } from 'semantic-ui-react'; import { withRouter, Link } from 'react-router-dom'; import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers'; import { handleEnterKeyPress } from '@eeacms/volto-eea-design-system/helpers'; +import { useSelector } from 'react-redux'; +import { useIntl } from 'react-intl'; const getRandomItems = (arr, max) => { return ( @@ -27,6 +29,7 @@ function HeaderSearchPopUp({ location.pathname.match(v.matchpath ? v.matchpath : v.path), ); const activeView = localView.length > 0 ? localView[0] : defaultView[0]; + const currentLang = useSelector((state) => state.intl.locale); const { path = '', @@ -36,6 +39,14 @@ function HeaderSearchPopUp({ placeholder = 'Search', searchSuggestions, } = activeView || {}; + + const searchPath = typeof path === 'function' ? path({ currentLang }) : path; + + const url = + typeof buttonUrl === 'function' + ? buttonUrl({ currentLang }) + : buttonUrl || defaultView[0].path; + const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {}; const [visibleSuggestions, setVisibileSuggestions] = React.useState( @@ -50,7 +61,7 @@ function HeaderSearchPopUp({ const onSubmit = (event) => { const text = searchInputRef?.current?.inputRef?.current?.value; - history.push(`${path}?q=${text}`); + history.push(`${searchPath}?q=${text}`); if (window?.searchContext?.resetSearch) { window.searchContext.resetSearch({ searchTerm: text }); @@ -68,6 +79,10 @@ function HeaderSearchPopUp({ onClose(); }; + const intl = useIntl(); + const translatedPlaceholder = + typeof placeholder === 'function' ? placeholder({ intl }) : placeholder; + return (