Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-02 13:14:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix search bar focus state

Browse Source
This commit is contained in:
Zoe Roux 2023-11-08 20:54:34 +01:00
parent a72691a81f
commit a1aa71e271
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
front/packages/primitives/src/input.tsx
View File

@ -18,12 +18,10 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { forwardRef, ReactNode } from "react"; import { forwardRef, ReactNode, useState } from "react";
import { Platform, TextInput, TextInputProps, View } from "react-native"; import { Platform, TextInput, TextInputProps, View } from "react-native";
import { px, Theme, useYoshiki } from "yoshiki/native"; import { px, Theme, useYoshiki } from "yoshiki/native";
import { ts } from "./utils"; import { focusReset, ts } from "./utils";
const focusReset: object = Platform.OS === "web" ? { focus: { self: { boxShadow: "none" } } } : {};
export const Input = forwardRef< export const Input = forwardRef<
TextInput, TextInput,
@ -31,17 +29,19 @@ export const Input = forwardRef<
variant?: "small" | "big"; variant?: "small" | "big";
right?: ReactNode; right?: ReactNode;
} & TextInputProps } & TextInputProps
>(function Input({ style, placeholderTextColor, variant = "small", right, ...props }, ref) { >(function Input({ placeholderTextColor, variant = "small", right, ...props }, ref) {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
const [focused, setFocused] = useState(false);
return ( return (
<View <View
{...css( {...css(
[ [
{ {
borderColor: (theme) => theme.accent, borderColor: (theme) => theme.colors.white,
borderRadius: ts(1), borderRadius: ts(1),
borderWidth: px(1), borderWidth: px(1),
borderStyle: "solid",
padding: ts(0.5), padding: ts(0.5),
flexDirection: "row", flexDirection: "row",
alignContent: "center", alignContent: "center",
@ -51,14 +51,22 @@ export const Input = forwardRef<
borderRadius: ts(4), borderRadius: ts(4),
p: ts(1), p: ts(1),
}, },
focused && {
borderWidth: px(2),
},
], ],
{ style }, props,
)} )}
> >
<TextInput <TextInput
ref={ref} ref={ref}
placeholderTextColor={placeholderTextColor ?? theme.overlay1} placeholderTextColor={placeholderTextColor ?? theme.colors.white}
{...css({ flexGrow: 1, color: (theme: Theme) => theme.paragraph, ...focusReset }, props)} onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
{...css(
{ flexGrow: 1, color: (theme: Theme) => theme.colors.white, borderWidth: 0, ...focusReset },
props,
)}
/> />
{right} {right}
</View> </View>

3
front/packages/ui/src/navbar/index.tsx
View File

@ -79,9 +79,8 @@ const SearchBar = forwardRef<TextInput, Stylable>(function SearchBar(props, ref)
setQuery(q); setQuery(q);
}} }}
placeholder={t("navbar.search")} placeholder={t("navbar.search")}
placeholderTextColor={theme.light.overlay0}
{...tooltip(t("navbar.search"))} {...tooltip(t("navbar.search"))}
{...css({ borderColor: (theme) => theme.colors.white, height: ts(4), flexShrink: 1 }, props)} {...css({ height: ts(4), flexShrink: 1 }, props)}
/> />
); );
}); });