mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-07-09 03:04:20 -04:00
Create a link component with native feedback
This commit is contained in:
parent
24dddc3075
commit
bb63340555
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user