From d44a58eb6a0118e54b23e539f3a17553165e0e95 Mon Sep 17 00:00:00 2001 From: rdbsolutions Date: Wed, 11 Aug 2021 13:04:29 +0100 Subject: [PATCH] added autosuggest search static flow --- components/dns/homepage/titleContent.js | 120 +++++++++++++++++++++--- package.json | 1 + styles/sass/welshgov/_application.scss | 68 ++++++++++++++ 3 files changed, 176 insertions(+), 13 deletions(-) diff --git a/components/dns/homepage/titleContent.js b/components/dns/homepage/titleContent.js index 5950efad..5c1a3086 100644 --- a/components/dns/homepage/titleContent.js +++ b/components/dns/homepage/titleContent.js @@ -1,12 +1,89 @@ import Link from "next/link"; +import { useState } from "react"; import { useRouter } from "next/router"; import useTranslation from "next-translate/useTranslation"; +import AutoSuggest from "react-autosuggest"; + +const dnsSites = [ + { id: 1, name: "30MW Energy Plant - Wrexham" }, + { id: 1, name: "Abertillery Wind Farm" }, + { id: 1, name: "Alaw Mon Solar Farm" }, + { id: 1, name: "Alwen Forest - Wind" }, + { id: 1, name: "Blackberry Lane Solar Park" }, + { id: 1, name: "Bretton Hall Solar Farm" }, + { id: 1, name: "Brynllewelyn Farm - Renewable Energy Project" }, + { id: 1, name: "Brynrhyd Solar Farm" }, + { id: 1, name: "Brynwell Farm Renewable Energy Hub" }, + { id: 1, name: "Buttington Quarry - ERF" }, + { id: 1, name: "Coed Darcy - STOR" }, + { id: 1, name: "Coity Road - STOR" }, + { id: 1, name: "Craig Y Perchyll Solar" }, + { id: 1, name: "Egnedol - Sustainable Energy" }, + { id: 1, name: "Elwy Solar Energy" }, + { id: 1, name: "Erebus - Floating Offshore Wind Demonstration Project" }, + { id: 1, name: "Felindre Road - STOR" }, + { id: 1, name: "Gaerwen Wind Farm" }, + { id: 1, name: "Garn Fach Wind Farm" }, + { id: 1, name: "Holyhead Harbour Revision Order" }, + { id: 1, name: "Holyhead Marina Harbour Revision Order" }, + { id: 1, name: "Holyhead Waterfront Regeneration Scheme HRO" }, + { id: 1, name: "Legacy Substation Gas Peaking Plant" }, + { id: 1, name: "Llantarnam - SToR" }, + { id: 1, name: "Llanwern - Solar" }, + { id: 1, name: "Lluest y Gwynt Wind Farm" }, + { id: 1, name: "Llynfi Energy Recovery Facility" }, + { id: 1, name: "Manmoel Wind Farm" }, + { id: 1, name: "Môn Solar Farm" }, + { id: 1, name: "Mor Hafren: Energy Recovery Facility" }, + { id: 1, name: "Mynydd Carn-y-Cefn Wind Farm" }, + { id: 1, name: "Mynydd Llanhilleth Wind Farm" }, + { id: 1, name: "Pancross & Oaklands Solar Farm" }, + { id: 1, name: "Parc Dyffryn Solar Park" }, + { id: 1, name: "Parc Solar Traffwll" }, + { id: 1, name: "Pen March Wind Farm" }, + { id: 1, name: "Pen-y-Fan - Power Plant" }, + { id: 1, name: "Pencaerlan Solar Farm" }, + { id: 1, name: "Penderi Solar Farm" }, + { id: 1, name: "Penpergwm Solar Farm" }, + { id: 1, name: "Pentre Bach Solar Farm" }, + { id: 1, name: "Plas Power Estate Solar Farm" }, + { id: 1, name: "Project Valorous" }, + { id: 1, name: "Rhoscrowther Wind Farm" }, + { id: 1, name: "Rush Wall Solar Park Ltd" }, + { id: 1, name: "Sudbrook - Peaking Gas" }, + { id: 1, name: "TWA - Morlais Demonstration Zone" }, + { id: 1, name: "Twyn Hywel Energy Park" }, + { id: 1, name: "Tycroes Solar" }, + { id: 1, name: "Upper Ogmore - Wind Turbines" }, + { id: 1, name: "Valero - Cogeneration Facility" }, + { id: 1, name: "Vattenfall - Renewable Energy" }, + { id: 1, name: "Wauntysswg - Solar" }, + { id: 1, name: "Wentlooge - renewable energy hub" }, + { id: 1, name: "Y Bryn Wind Farm" }, +]; + +const lowerCasedCompanies = dnsSites.map((company) => { + return { + id: company.id, + name: company.name, + }; +}); const TitleContent = (props) => { let { t } = useTranslation(); const router = useRouter(); const { locale } = router; + + const [value, setValue] = useState(""); + const [suggestions, setSuggestions] = useState([]); + + function getSuggestions(value) { + return lowerCasedCompanies.filter((company) => + company.name.toLowerCase().includes(value.trim().toLowerCase()) + ); + } + return (

@@ -21,20 +98,37 @@ const TitleContent = (props) => { Planning Inspectorate.

-
- + setSuggestions([])} + onSuggestionsFetchRequested={({ value }) => { + console.log(value); + setValue(value); + setSuggestions(getSuggestions(value)); + }} + onSuggestionSelected={(_, { suggestionValue }) => + console.log("Selected: " + suggestionValue) + } + getSuggestionValue={(suggestion) => suggestion.name} + renderSuggestion={(suggestion) => ( + {suggestion.name} + )} + inputProps={{ + className: "govuk-input govuk-!-font-size-16", + placeholder: "Search application name", + value: value, + onChange: (_, { newValue, method }) => { + setValue(newValue); + }, + }} + highlightFirstSuggestion={true} /> - + + + Go + +
); diff --git a/package.json b/package.json index 74e63f1d..fcd166f7 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "pm2": "^5.1.0", "react": "17.0.2", "react-accessible-accordion": "^3.3.5", + "react-autosuggest": "^10.1.0", "react-cookie-consent": "^6.2.4", "react-datepicker": "^4.1.1", "react-dom": "17.0.2", diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss index 55a56cfd..ce523103 100644 --- a/styles/sass/welshgov/_application.scss +++ b/styles/sass/welshgov/_application.scss @@ -1039,3 +1039,71 @@ ul#sharePageLinks.active { color: #333; } } + +// dns autocomplete search + +.react-autosuggest__container { + position: relative; + width: 50%; +} + +.react-autosuggest__input { + width: 100%; + height: 36px; + padding: 10px; + border: 1px solid lightgray; + border-radius: 4px; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + font-size: 0.875rem; +} + +.react-autosuggest__input--focused { + outline: none; +} + +.react-autosuggest__input--open { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.react-autosuggest__suggestions-container { + display: none; +} + +.react-autosuggest__suggestions-container--open { + display: block; + position: absolute; + top: 40px; + width: auto; + min-width: 160px; + margin-left: 1px; + background-color: #ffffff; + border-radius: 0 0 5px 5px; + z-index: 20; + -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%); + box-shadow: 0 6px 12px rgb(0 0 0 / 18%); + background-clip: padding-box; + border: 1px solid black; + border-top: none; + font-size: 0.875rem; + max-height: 400px; + overflow-y: scroll; +} + +.react-autosuggest__suggestions-list { + margin: 0; + padding: 0; + list-style-type: none; +} + +.react-autosuggest__suggestion { + cursor: pointer; + padding: 10px 20px; + color: #333; + border-bottom: 1px solid #c3c3c3; +} + +.react-autosuggest__suggestion--highlighted { + background-color: #c3c3c3; +}