Create a popup component

front/packages/primitives/src/index.ts

@@ -33,6 +33,7 @@ export * from "./progress";
 export * from "./slider";
 export * from "./alert";
 export * from "./menu";
+export * from "./popup";
 export * from "./select";
 export * from "./input";
 export * from "./button";

front/packages/primitives/src/popup.tsx

@@ -0,0 +1,62 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { ReactNode } from "react";
+import { Container } from "./container";
+import { Portal } from "@gorhom/portal";
+import { SwitchVariant, YoshikiFunc } from "./themes";
+import { View } from "react-native";
+import { imageBorderRadius } from "./constants";
+import { percent, px } from "yoshiki/native";
+import { ts } from "./utils";
+
+export const Popup = ({ children }: { children: ReactNode | YoshikiFunc<ReactNode> }) => {
+	return (
+		<Portal>
+			<SwitchVariant>
+				{({ css, theme }) => (
+					<View
+						{...css({
+							position: "absolute",
+							top: 0,
+							left: 0,
+							right: 0,
+							bottom: 0,
+							bg: (theme) => theme.themeOverlay,
+						})}
+					>
+						<Container
+							{...css({
+								borderRadius: px(imageBorderRadius),
+								position: "absolute",
+								top: percent(35),
+								padding: ts(4),
+								gap: ts(2),
+								bg: (theme) => theme.background,
+							})}
+						>
+							{typeof children === "function" ? children({ css, theme }) : children}
+						</Container>
+					</View>
+				)}
+			</SwitchVariant>
+		</Portal>
+	);
+};

front/packages/primitives/src/themes/theme.tsx

@@ -155,7 +155,7 @@ export const ThemeSelector = ({
 	return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;
 };
 
-type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T;
+export type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T;
 
 const YoshikiProvider = ({ children }: { children: YoshikiFunc<ReactNode> }) => {
 	const yoshiki = useYoshiki();

front/packages/ui/src/settings/index.tsx

@@ -20,7 +20,6 @@
 
 import {
 	Account,
-	MutationParam,
 	QueryIdentifier,
 	QueryPage,
 	User,
@@ -38,6 +37,7 @@ import {
 	Icon,
 	Input,
 	P,
+	Popup,
 	Select,
 	SubP,
 	SwitchVariant,
@@ -145,54 +145,32 @@ const ChangePopup = ({
 	const [value, setValue] = useState(inital);
 
 	return (
-		<Portal>
+		<Popup>
-			<SwitchVariant>
+			{({ css }) => (
-				{({ css }) => (
+				<>
-					<View
+					<View {...css({ flexDirection: "row", alignItems: "center", gap: ts(2) })}>
-						{...css({
+						<Icon icon={icon} />
-							position: "absolute",
+						<H1 {...css({ fontSize: rem(2) })}>{label}</H1>
-							top: 0,
-							left: 0,
-							right: 0,
-							bottom: 0,
-							bg: (theme) => theme.themeOverlay,
-						})}
-					>
-						<Container
-							{...css({
-								borderRadius: px(imageBorderRadius),
-								position: "absolute",
-								top: percent(35),
-								padding: ts(4),
-								gap: ts(2),
-								bg: (theme) => theme.background,
-							})}
-						>
-							<View {...css({ flexDirection: "row", alignItems: "center", gap: ts(2) })}>
-								<Icon icon={icon} />
-								<H1 {...css({ fontSize: rem(2) })}>{label}</H1>
-							</View>
-							<Input variant="big" value={value} onChangeText={(v) => setValue(v)} />
-							<View {...css({ flexDirection: "row", alignSelf: "flex-end", gap: ts(1) })}>
-								<Button
-									text={t("misc.cancel")}
-									onPress={() => close()}
-									{...css({ minWidth: rem(6) })}
-								/>
-								<Button
-									text={t("misc.edit")}
-									onPress={async () => {
-										await apply(value);
-										close();
-									}}
-									{...css({ minWidth: rem(6) })}
-								/>
-							</View>
-						</Container>
 					</View>
-				)}
+					<Input variant="big" value={value} onChangeText={(v) => setValue(v)} />
-			</SwitchVariant>
+					<View {...css({ flexDirection: "row", alignSelf: "flex-end", gap: ts(1) })}>
-		</Portal>
+						<Button
+							text={t("misc.cancel")}
+							onPress={() => close()}
+							{...css({ minWidth: rem(6) })}
+						/>
+						<Button
+							text={t("misc.edit")}
+							onPress={async () => {
+								await apply(value);
+								close();
+							}}
+							{...css({ minWidth: rem(6) })}
+						/>
+					</View>
+				</>
+			)}
+		</Popup>
 	);
 };