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

Add more features om the input primitive

Browse Source
This commit is contained in:
Zoe Roux 2023-01-28 02:24:24 +09:00 committed by Zoe Roux
parent 80be960f29
commit e9622edee9
1 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,40 +18,48 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { forwardRef } from "react"; import { forwardRef, ReactNode } from "react";
import { TextInput } from "react-native"; import { Platform, TextInput, TextInputProps, View } from "react-native";
import { px, Stylable, useYoshiki } from "yoshiki/native"; import { px, useYoshiki } from "yoshiki/native";
import { ts } from "./utils"; import { ts } from "./utils";
const focusReset: object = Platform.OS === "web" ? { focus: { self: { boxShadow: "none" } } } : {};
export const Input = forwardRef< export const Input = forwardRef<
TextInput, TextInput,
{ {
onChange: (value: string) => void; variant?: "small" | "big";
value?: string; style;
placeholder?: string; right?: ReactNode;
placeholderTextColor?: string; } & TextInputProps
onBlur?: (value: string | undefined) => void; >(function _Input({ style, placeholderTextColor, variant = "small", right, ...props }, ref) {
} & Stylable
>(function _Input({ onChange, value, placeholder, placeholderTextColor, onBlur, ...props }, ref) {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
return ( return (
<TextInput <View
ref={ref}
value={value ?? ""}
onChangeText={onChange}
placeholder={placeholder}
placeholderTextColor={placeholderTextColor ?? theme.overlay1}
onBlur={() => onBlur?.call(null, value)}
{...css( {...css(
{ [
borderColor: (theme) => theme.accent, {
borderRadius: ts(1), borderColor: (theme) => theme.accent,
borderWidth: px(1), borderRadius: ts(1),
padding: ts(0.5), borderWidth: px(1),
}, padding: ts(0.5),
props, flexDirection: "row",
},
variant === "big" && {
borderRadius: ts(4),
p: ts(1),
},
],
{ style },
)} )}
/> >
<TextInput
ref={ref}
placeholderTextColor={placeholderTextColor ?? theme.overlay1}
{...css({ flexGrow: 1, color: (theme) => theme.paragraph, ...focusReset }, props)}
/>
{right}
</View>
); );
}); });