Create a link component with native feedback

This commit is contained in:
Zoe Roux 2022-12-10 18:54:17 +09:00
parent 24dddc3075
commit bb63340555
2 changed files with 40 additions and 8 deletions

View File

@ -18,9 +18,17 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { ReactNode } from "react";
import { Platform, TextProps } from "react-native";
import { TextLink } from "solito/link";
import { ComponentType, ReactNode } from "react";
import {
Platform,
Pressable,
TextProps,
TouchableOpacity,
TouchableNativeFeedback,
View,
ViewProps,
} from "react-native";
import { LinkCore, TextLink } from "solito/link";
import { useYoshiki } from "yoshiki/native";
export const A = ({
@ -46,3 +54,27 @@ export const A = ({
</TextLink>
);
};
export const Link = ({ href, children, ...props }: ViewProps & { href: string }) => {
return (
<LinkCore
href={href}
Component={Platform.select<ComponentType>({
web: View,
android: TouchableNativeFeedback,
ios: TouchableOpacity,
default: Pressable,
})}
componentProps={Platform.select<object>({
android: { useForeground: true },
default: props,
})}
>
{Platform.select<ReactNode>({
android: <View {...props}>{children}</View>,
ios: <View {...props}>{children}</View>,
default: children,
})}
</LinkCore>
);
};

View File

@ -18,8 +18,8 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { A, Skeleton, Poster, ts, P, SubP } from "@kyoo/primitives";
import { Platform, View } from "react-native";
import { Link, Skeleton, Poster, ts, P, SubP } from "@kyoo/primitives";
import { Platform } from "react-native";
import { percent, px, Stylable, useYoshiki } from "yoshiki/native";
import { WithLoading } from "../fetch";
@ -40,8 +40,8 @@ export const ItemGrid = ({
const { css } = useYoshiki();
return (
<View
// href={href ?? ""}
<Link
href={href ?? ""}
{...css(
[
{
@ -81,7 +81,7 @@ export const ItemGrid = ({
)}
</Skeleton>
)}
</View>
</Link>
);
};