Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -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/>.
*/
import { forwardRef, ReactNode } from "react";
import { forwardRef, ReactNode, useState } from "react";
import { Platform, TextInput, TextInputProps, View } from "react-native";
import { px, Theme, useYoshiki } from "yoshiki/native";
import { ts } from "./utils";
const focusReset: object = Platform.OS === "web" ? { focus: { self: { boxShadow: "none" } } } : {};
import { focusReset, ts } from "./utils";
export const Input = forwardRef<
TextInput,
@ -31,17 +29,19 @@ export const Input = forwardRef<
variant?: "small" | "big";
right?: ReactNode;
} & TextInputProps
>(function Input({ style, placeholderTextColor, variant = "small", right, ...props }, ref) {
>(function Input({ placeholderTextColor, variant = "small", right, ...props }, ref) {
const { css, theme } = useYoshiki();
const [focused, setFocused] = useState(false);
return (
<View
{...css(
[
{
borderColor: (theme) => theme.accent,
borderColor: (theme) => theme.colors.white,
borderRadius: ts(1),
borderWidth: px(1),
borderStyle: "solid",
padding: ts(0.5),
flexDirection: "row",
alignContent: "center",
@ -51,14 +51,22 @@ export const Input = forwardRef<
borderRadius: ts(4),
p: ts(1),
},
focused && {
borderWidth: px(2),
},
],
{ style },
props,
)}
>
<TextInput
ref={ref}
placeholderTextColor={placeholderTextColor ?? theme.overlay1}
{...css({ flexGrow: 1, color: (theme: Theme) => theme.paragraph, ...focusReset }, props)}
placeholderTextColor={placeholderTextColor ?? theme.colors.white}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
{...css(
{ flexGrow: 1, color: (theme: Theme) => theme.colors.white, borderWidth: 0, ...focusReset },
props,
)}
/>
{right}
</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);
}}
placeholder={t("navbar.search")}
placeholderTextColor={theme.light.overlay0}
{...tooltip(t("navbar.search"))}
{...css({ borderColor: (theme) => theme.colors.white, height: ts(4), flexShrink: 1 }, props)}
{...css({ height: ts(4), flexShrink: 1 }, props)}
/>
);
});