alikia2x/sparkast
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

temp: try to replace selector component in nextui

Browse Source
This commit is contained in:
alikia2x 2024-07-05 16:08:30 +08:00
parent da709d2988
commit 6960ec5b35
11 changed files with 164 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@ -3,6 +3,6 @@
"tabWidth": 4,
"trailingComma": "none",
"singleQuote": false,
"printWidth": 120,
"printWidth": 100,
"endOfLine": "lf"
}

62
components/engineSelector.tsx
View File

@ -6,10 +6,8 @@ import { engineTranslation } from "lib/onesearch/translatedEngineList";
import { settingsType } from "global";
import { useAtomValue, useSetAtom } from "jotai";
export default function EngineSelector(
props: { className: string }
) {
const { t } = useTranslation("Search");
export default function EngineSelector(props: { className: string }) {
const { t } = useTranslation();
const settings: settingsType = useAtomValue(settingsAtom);
const items = settings.searchEngines;
const currentEngine: string = settings.currentSearchEngine;
@ -19,10 +17,8 @@ export default function EngineSelector(
const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]);
const setSettings = useSetAtom(settingsAtom);
function getName(engineKey: string) {
return engineTranslation.includes(engineKey) ? t(`engine.${engineKey}`) : engineKey;
return engineTranslation.includes(engineKey) ? t(`search.engine.${engineKey}`) : engineKey;
}
useEffect(() => {
@ -39,39 +35,29 @@ export default function EngineSelector(
}
}, [currentEngine, selectedValue, setSettings]);
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
return (
<div className={props.className}>
{
isClient &&
(
<Dropdown>
<DropdownTrigger>
<Button variant="bordered" className="capitalize">
{displayEngine}
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label={t("engine-aria")}
variant="light"
disallowEmptySelection
selectionMode="single"
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
{Object.keys(items).map((item) => (
<DropdownItem key={item} suppressHydrationWarning>
{getName(item)}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
)}
<Dropdown>
<DropdownTrigger>
<Button variant="bordered" className="capitalize">
{displayEngine}
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label={t("search.engine-aria")}
variant="light"
disallowEmptySelection
selectionMode="single"
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
{Object.keys(items).map((item) => (
<DropdownItem key={item} suppressHydrationWarning>
{getName(item)}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
</div>
);
}

6
components/search.tsx
View File

@ -7,7 +7,6 @@ import handleEnter from "lib/onesearch/handleEnter";
import { suggestionAtom } from "lib/state/suggestion";
import { useTranslation } from "react-i18next";
export default function Search(props: { onFocus: () => void }) {
const { t } = useTranslation();
const settings = useAtomValue(settingsAtom);
@ -40,12 +39,13 @@ export default function Search(props: { onFocus: () => void }) {
<div className="absolute w-full top-[8.5rem] lg:top-56 short:top-24 z-1 left-1/2 translate-x-[-50%] ">
<input
className="absolute z-1 w-11/12 sm:w-[700px] h-10 rounded-lg left-1/2 translate-x-[-50%]
text-center outline-none border-[1px] focus:border-2 duration-200 pr-2 shadow-md focus:shadow-none dark:shadow-zinc-800 dark:shadow-md bg-white dark:bg-[rgb(23,25,29)]
text-center outline-none border-2 focus:border-2 duration-200 pr-2 shadow-md focus:shadow-none
dark:shadow-zinc-800 dark:shadow-md bg-white dark:bg-[rgb(23,25,29)]
dark:border-neutral-500 dark:focus:border-neutral-300 placeholder:text-slate-500
dark:placeholder:text-slate-400 text-slate-900 dark:text-white"
id="searchBox"
type="text"
placeholder={t('search.placeholder')}
placeholder={t("search.placeholder")}
onFocus={props.onFocus}
onKeyDown={handleKeydown}
onChange={(e) =>

85
components/selector.tsx Normal file
View File

@ -0,0 +1,85 @@
import { HTMLAttributes, ReactNode, RefObject, useEffect, useRef } from "react";
import { selectedOnChange } from "./selectorItem";
import { createPortal } from "react-dom";
export type selectionType = string | number | boolean;
interface PickerPropsChildrenStyle extends HTMLAttributes<HTMLDivElement> {
selected: selectionType;
selectionOnChange: selectedOnChange;
displayContent: string;
children: ReactNode;
}
interface PickerPropsParamStyle extends HTMLAttributes<HTMLDivElement> {
selected: selectionType;
selectionOnChange: selectedOnChange;
displayContent: string;
selectionItems: PickedItem;
}
interface PickedItem {
[key: string]: selectionType;
}
export default function Picker(props: PickerPropsChildrenStyle | PickerPropsParamStyle) {
const itemListRef: RefObject<HTMLDivElement> = useRef(null);
const buttonRef: RefObject<HTMLButtonElement> = useRef(null);
const updatePosition = () => {
if (itemListRef.current == null || buttonRef.current == null) {
return;
}
const buttonRect = buttonRef.current.getBoundingClientRect();
const listWidth = itemListRef.current.getBoundingClientRect().width;
// Align to center
itemListRef.current.style.left = buttonRect.x + buttonRect.width / 2 - listWidth / 2 + "px";
itemListRef.current.style.top = buttonRect.y + buttonRect.height + 16 + "px";
};
useEffect(() => {
updatePosition();
const handleResize = () => {
updatePosition();
};
window.addEventListener('resize', handleResize);
// Cleanup event listener on component unmount
return () => {
window.removeEventListener('resize', handleResize);
};
}, [itemListRef, buttonRef]);
if ("selectionItems" in props) {
const { selectionItems, displayContent, selectionOnChange, ...rest } = props;
return (
<div {...rest}>
<button
className="relative border-2 border-gray-500 dark:border-gray-300 rounded-xl dark:text-white
px-4 py-2"
ref={buttonRef}
>
{displayContent}
</button>
{createPortal(
<div ref={itemListRef} className="absolute w-fit text-white">
{Object.keys(selectionItems).map((key: string, index) => {
return <div key={index}>{selectionItems[key]}</div>;
})}
</div>,
document.body
)}
</div>
);
} else {
return (
<div {...props}>
<button className="relative" ref={buttonRef}>
{props.displayContent}
</button>
{createPortal(<div ref={itemListRef}>{props.children}</div>, document.body)}
</div>
);
}
}

12
components/selectorItem.tsx Normal file
View File

@ -0,0 +1,12 @@
import { ReactNode } from "react";
import { selectionType } from "./selector";
export type selectedOnChange = (target: selectionType) => void;
export default function SelectionItem(props: {key: selectionType, children: ReactNode, onChange: selectedOnChange}){
return (
<div onClick={() => props.onChange(props.key)}>
{props.children}
</div>
)
}

4
i18n/en.json
View File

@ -1,5 +1,5 @@
{
"Search": {
"search": {
"placeholder": "Search or type a URL",
"engine-aria": "Switch search engine",
"engine": {
@ -16,7 +16,7 @@
"404": {
"title": "Page Not Found"
},
"About": {
"about": {
"title": "SparkHome"
},
"tools": {

14
pages/index.tsx
View File

@ -6,6 +6,7 @@ import { settingsAtom } from "lib/state/settings";
import { bgFocusAtom } from "lib/state/background";
import EngineSelector from "components/engineSelector";
import OneSearch from "components/onesearch/onesearch";
import Picker from "components/selector";
export default function Homepage() {
const settings = useAtomValue(settingsAtom);
@ -14,12 +15,21 @@ export default function Homepage() {
return (
<div className="h-full fixed overflow-hidden w-full bg-black">
<Background />
<EngineSelector className="absolute top-20 lg:top-44 short:top-0 translate-x-[-50%] translate-y-[-0.2rem]
<EngineSelector
className="absolute top-20 lg:top-44 short:top-0 translate-x-[-50%] translate-y-[-0.2rem]
left-1/2 w-11/12 sm:w-[700px] text:black text-right
dark:text-white text-3xl text-shadow-lg z-10"/>
dark:text-white text-3xl text-shadow-lg z-10"
/>
<Search onFocus={() => setBgFocus(true)} />
<Time showSecond={settings.timeShowSecond} />
<OneSearch />
<Picker
selectionItems={{ "1": "Item1", "2": "Item2" }}
selected="2"
selectionOnChange={() => {}}
displayContent="Item1"
className="absolute w-fit h-8 top-20 lg:top-44 short:top-0 -translate-x-1/2 -translate-y-1 left-1/2 z-20"
/>
</div>
);
}

36
src/app.tsx
View File

@ -3,20 +3,19 @@ import { useRoutes } from "react-router-dom";
import routes from "~react-pages";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import ICU from "i18next-icu";
import * as en from "i18n/en.json";
import * as zh from "i18n/zh.json";
import * as ja from "i18n/ja.json";
import * as ar from "i18n/ar.json";
import * as de from "i18n/de.json";
import * as es from "i18n/es.json";
import * as fr from "i18n/fr.json";
import * as it from "i18n/it.json";
import * as ko from "i18n/ko.json";
import * as pt from "i18n/pt.json";
import * as ru from "i18n/ru.json";
import { NextUIProvider } from "@nextui-org/react";
import LanguageDetector from 'i18next-browser-languagedetector';
import ICU from 'i18next-icu';
import * as en from "i18n/en.json"
import * as zh from "i18n/zh.json"
import * as ja from "i18n/ja.json"
import * as ar from "i18n/ar.json"
import * as de from "i18n/de.json"
import * as es from "i18n/es.json"
import * as fr from "i18n/fr.json"
import * as it from "i18n/it.json"
import * as ko from "i18n/ko.json"
import * as pt from "i18n/pt.json"
import * as ru from "i18n/ru.json"
i18n.use(initReactI18next) // passes i18n down to react-i18next
.use(LanguageDetector)
@ -64,15 +63,12 @@ i18n.use(initReactI18next) // passes i18n down to react-i18next
},
detection: {
order: ["navigator"],
order: ['navigator'],
caches: []
}
});
export function App() {
return (
<NextUIProvider>
<Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</Suspense>
</NextUIProvider>
);
return <Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</Suspense>;
}

5
src/main.tsx
View File

@ -3,13 +3,16 @@ import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { App } from "./app";
import "./index.css";
import { NextUIProvider } from "@nextui-org/react";
const app = createRoot(document.getElementById("root")!);
app.render(
<StrictMode>
<BrowserRouter>
<App />
<NextUIProvider>
<App />
</NextUIProvider>
</BrowserRouter>
</StrictMode>
);

6
tailwind.config.ts
View File

@ -6,8 +6,7 @@ const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
"./node_modules/@nextui-org/theme/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
@ -17,7 +16,6 @@ const config: Config = {
}
}
},
darkMode: "class",
plugins: [nextui()],
plugins: [nextui()]
};
export default config;