diff --git a/front/packages/primitives/src/input.tsx b/front/packages/primitives/src/input.tsx index 6a86244c..7daa6cbd 100644 --- a/front/packages/primitives/src/input.tsx +++ b/front/packages/primitives/src/input.tsx @@ -18,40 +18,48 @@ * along with Kyoo. If not, see . */ -import { forwardRef } from "react"; -import { TextInput } from "react-native"; -import { px, Stylable, useYoshiki } from "yoshiki/native"; +import { forwardRef, ReactNode } from "react"; +import { Platform, TextInput, TextInputProps, View } from "react-native"; +import { px, useYoshiki } from "yoshiki/native"; import { ts } from "./utils"; +const focusReset: object = Platform.OS === "web" ? { focus: { self: { boxShadow: "none" } } } : {}; + export const Input = forwardRef< TextInput, { - onChange: (value: string) => void; - value?: string; - placeholder?: string; - placeholderTextColor?: string; - onBlur?: (value: string | undefined) => void; - } & Stylable ->(function _Input({ onChange, value, placeholder, placeholderTextColor, onBlur, ...props }, ref) { + variant?: "small" | "big"; + style; + right?: ReactNode; + } & TextInputProps +>(function _Input({ style, placeholderTextColor, variant = "small", right, ...props }, ref) { const { css, theme } = useYoshiki(); return ( - onBlur?.call(null, value)} + theme.accent, - borderRadius: ts(1), - borderWidth: px(1), - padding: ts(0.5), - }, - props, + [ + { + borderColor: (theme) => theme.accent, + borderRadius: ts(1), + borderWidth: px(1), + padding: ts(0.5), + flexDirection: "row", + }, + variant === "big" && { + borderRadius: ts(4), + p: ts(1), + }, + ], + { style }, )} - /> + > + theme.paragraph, ...focusReset }, props)} + /> + {right} + ); });