From c3bf18a896402ea117b8cafcbafcf36c171c594c Mon Sep 17 00:00:00 2001 From: SuperDumbTM Date: Tue, 16 Jul 2024 12:16:06 +0800 Subject: [PATCH] Fix react-select select box length on sm --- src/app/(main)/tool/page.tsx | 839 ++++++++++++++++++----------------- 1 file changed, 420 insertions(+), 419 deletions(-) diff --git a/src/app/(main)/tool/page.tsx b/src/app/(main)/tool/page.tsx index 0cfcdb3..68fe1f5 100644 --- a/src/app/(main)/tool/page.tsx +++ b/src/app/(main)/tool/page.tsx @@ -1,419 +1,420 @@ -"use client"; - -import "./style.css"; - -import {Locale} from "@/libs/wmo/enums"; -import {useLocale, useTranslations} from "next-intl"; -import {useEffect, useState} from "react"; -import {createFilter} from "react-select"; -import AsyncSelect from "react-select/async"; -import {getCity} from "./actions"; - -export default function Page() { - const t = useTranslations("common"); - const usrLocale = useLocale(); - - const [language, setLanguage] = useState( - {"zh-Hant": "tc", "zh-Hans": "zh"}[usrLocale] || usrLocale, - ); - - const [cityOption, setCityOption] = useState< - Array<{value: string; label: string}> - >([]); - - const [formData, setFormData] = useState({ - align: "start", - city: "", - days: "5", - locale: "", - unit: "C", - }); - - const [copied, setCopied] = useState(false); - - const [outUrl, setOutUrl] = useState(""); - - useEffect(() => { - // trigger change event to load the city options - document - .querySelector("select[name=locale]") - ?.dispatchEvent(new Event("change", {bubbles: true})); - }, []); - - return ( -
-
-
-
-

- {t("Widget Customiser")} -

-

- {t("widget_customiser_help")} -

-
- -
-
-
- -
- -
-
-
- -
- { - callback( - cityOption.filter((c) => - c.label - .toLocaleLowerCase() - .includes(inputValue.toLocaleLowerCase()), - ), - ); - }} - onChange={(newValue) => { - setFormData({...formData, city: newValue!.value}); - }} - filterOption={createFilter({ignoreAccents: false})} - // className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6" - > -
-
-
-
- -
-

- {t("Display Settings")} -

-

- -
-
- - {t("Temperature Unit")} - -

- -
-
- - setFormData({...formData, unit: e.target.value}) - } - className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" - /> - -
- -
- - setFormData({...formData, unit: e.target.value}) - } - className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" - /> - -
-
-
- -
- - {t("Widget Alignment")} - -

- -
-
- - setFormData({...formData, align: e.target.value}) - } - className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" - /> - -
- -
- - setFormData({...formData, align: e.target.value}) - } - className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" - /> - -
- -
- - setFormData({...formData, align: e.target.value}) - } - className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" - /> - -
-
-
- -
- - {t("Max Forecast Period")} - -

- {t("max_forecast_help")} -

- -
-
- - { - if (e.target.value == "") { - setFormData({...formData, days: ""}); - } - if (e.target.value.match(/^[0-9]+$/)) { - let d = parseInt(e.target.value); - setFormData({ - ...formData, - days: d > 0 ? d.toString() : "1", - }); - } - }} - /> - -
-
-
-
-
- -
- -
-
- - -
- -
-

- {t("empty_city_help")} -

-
-
-
-
- ); -} +"use client"; + +import "./style.css"; + +import {Locale} from "@/libs/wmo/enums"; +import {useLocale, useTranslations} from "next-intl"; +import {useEffect, useState} from "react"; +import {createFilter} from "react-select"; +import AsyncSelect from "react-select/async"; +import {getCity} from "./actions"; + +export default function Page() { + const t = useTranslations("common"); + const usrLocale = useLocale(); + + const [language, setLanguage] = useState( + {"zh-Hant": "tc", "zh-Hans": "zh"}[usrLocale] || usrLocale, + ); + + const [cityOption, setCityOption] = useState< + Array<{value: string; label: string}> + >([]); + + const [formData, setFormData] = useState({ + align: "start", + city: "", + days: "5", + locale: "", + unit: "C", + }); + + const [copied, setCopied] = useState(false); + + const [outUrl, setOutUrl] = useState(""); + + useEffect(() => { + // trigger change event to load the city options + document + .querySelector("select[name=locale]") + ?.dispatchEvent(new Event("change", {bubbles: true})); + }, []); + + return ( +
+
+
+
+

+ {t("Widget Customiser")} +

+

+ {t("widget_customiser_help")} +

+
+ +
+
+
+ +
+ +
+
+ +
+ +
+ { + callback( + cityOption.filter((c) => + c.label + .toLocaleLowerCase() + .includes(inputValue.toLocaleLowerCase()), + ), + ); + }} + onChange={(newValue) => { + setFormData({...formData, city: newValue!.value}); + }} + filterOption={createFilter({ignoreAccents: false})} + className="block w-full sm:max-w-xs sm:text-sm sm:leading-6" + > +
+
+
+
+ +
+

+ {t("Display Settings")} +

+

+ +
+
+ + {t("Temperature Unit")} + +

+ +
+
+ + setFormData({...formData, unit: e.target.value}) + } + className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" + /> + +
+ +
+ + setFormData({...formData, unit: e.target.value}) + } + className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" + /> + +
+
+
+ +
+ + {t("Widget Alignment")} + +

+ +
+
+ + setFormData({...formData, align: e.target.value}) + } + className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" + /> + +
+ +
+ + setFormData({...formData, align: e.target.value}) + } + className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" + /> + +
+ +
+ + setFormData({...formData, align: e.target.value}) + } + className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" + /> + +
+
+
+ +
+ + {t("Max Forecast Period")} + +

+ {t("max_forecast_help")} +

+ +
+
+ + { + if (e.target.value == "") { + setFormData({...formData, days: ""}); + } + if (e.target.value.match(/^[0-9]+$/)) { + let d = parseInt(e.target.value); + setFormData({ + ...formData, + days: d > 0 ? d.toString() : "1", + }); + } + }} + /> + +
+
+
+
+
+ +
+ +
+
+ + +
+ +
+

+ {t("empty_city_help")} +

+
+
+
+
+ ); +}