@nativetail/ui 0.0.5 → 0.0.7

package/src/components/input/pin-input.tsx

@@ -1,18 +1,50 @@
-import { cn, Pressable, TextInput, View } from "@nativetail/core";
-import { useCallback, useRef, useState } from "react";
+import { cn, Pressable, Text, TextInput, View } from "@nativetail/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Control, Controller, Path } from "react-hook-form";
 import { TextInput as NativeTextInput } from "react-native";
 
-export type PinInputProps = {
-	value: string;
-	onChangeText: (text: string) => void;
+export type PinInputProps<T = Record<string, any>> = {
+	value?: string;
+	onChangeText?: (text: string) => void;
 	length: number;
 	pinBoxClassName?: string;
 	pinBoxFocusedClassName?: string;
 	containerClassName?: string;
 	error?: string;
 	helperText?: string;
+	secureTextEntry?: boolean;
+	pinHideTime?: number;
+	control?: Control<T, any>;
+	name?: Path<T>;
+};
+export const PinInput = <T extends Record<string, any>>({
+	name,
+	control,
+	...props
+}: PinInputProps<T>) => {
+	if (control) {
+		return (
+			<Controller
+				name={name}
+				control={control}
+				render={({ field, fieldState }) => {
+					return (
+						<BaseInput
+							{...props}
+							value={field.value}
+							onChangeText={(text) => {
+								field.onChange(text);
+							}}
+							error={fieldState.error?.message}
+						/>
+					);
+				}}
+			/>
+		);
+	}
+	return <BaseInput {...props} />;
 };
-export function PinInput({
+function BaseInput<T extends Record<string, any>>({
 	value,
 	onChangeText,
 	containerClassName,
@@ -21,10 +53,12 @@ export function PinInput({
 	pinBoxFocusedClassName,
 	helperText,
 	length,
+	secureTextEntry,
+	pinHideTime = 300,
 	...props
-}: PinInputProps) {
+}: PinInputProps<T>) {
 	const [isFocused, setIsFocused] = useState(false);
-	const activeIndex = value.length == length ? length - 1 : value.length;
+	const activeIndex = value?.length == length ? length - 1 : value?.length;
 	const textInputRef = useRef<NativeTextInput>();
 	const onFocus = useCallback(() => {
 		setIsFocused(true);
@@ -34,7 +68,7 @@ export function PinInput({
 	}, [setIsFocused]);
 	const _handleChange = useCallback(
 		(text: string) => {
-			if (text.length <= length) {
+			if (text?.length <= length) {
 				onChangeText(text);
 			}
 		},
@@ -45,31 +79,92 @@ export function PinInput({
 		textInputRef.current?.focus();
 	}, [textInputRef, setIsFocused]);
 	return (
-		<View className={cn(" gap-2 flex-row  w-full", containerClassName)}>
-			{Array.from({ length: length }).map((_, index) => (
-				<Pressable
-					key={`pininput-${index}`}
-					className={cn(
-						"p-2 bg-card rounded-lg items-center justify-center w-full font-medium aspect-sqaure flex-1 border border-muted/15 h-16 text-foreground text-[16px] text-center",
-						pinBoxClassName,
-						isFocused &&
-							activeIndex === index &&
-							"border-foreground" + " " + pinBoxFocusedClassName
-					)}
-					onPress={onPinBoxPress}
-				>
-					{value[index]}
-				</Pressable>
-			))}
-			<TextInput
-				ref={textInputRef}
-				value={value}
-				onChangeText={_handleChange}
-				onFocus={onFocus}
-				onBlur={onBlur}
-				className="opacity-0 scale-0 absolute"
-				{...props}
-			/>
-		</View>
+		<>
+			<View className={cn(" gap-2 flex-row  w-full", containerClassName)}>
+				{Array.from({ length: length }).map((_, index) => (
+					<PinBox
+						key={`pininput-${index}`}
+						pinBoxClassName={pinBoxClassName}
+						isFocused={isFocused}
+						activeIndex={activeIndex}
+						index={index}
+						pinBoxFocusedClassName={pinBoxFocusedClassName}
+						onPinBoxPress={onPinBoxPress}
+						secureTextEntry={secureTextEntry}
+						value={value}
+						pinHideTime={pinHideTime}
+					/>
+				))}
+				<TextInput
+					ref={textInputRef}
+					value={value}
+					onChangeText={_handleChange}
+					onFocus={onFocus}
+					onBlur={onBlur}
+					className="opacity-0 scale-0 absolute"
+					{...props}
+				/>
+			</View>
+			{error && <Text className="text-sm text-danger">{error}</Text>}
+		</>
 	);
 }
+
+const PinBox = ({
+	pinBoxClassName,
+	activeIndex,
+	index,
+	onPinBoxPress,
+	value,
+	isFocused,
+	pinBoxFocusedClassName,
+	secureTextEntry,
+	pinHideTime,
+}: {
+	pinBoxClassName?: string;
+	isFocused?: boolean;
+	activeIndex: number;
+	index: number;
+	pinBoxFocusedClassName?: string;
+	onPinBoxPress: () => void;
+	value: string;
+	secureTextEntry?: boolean;
+	pinHideTime?: number;
+}) => {
+	const pinValue = value?.[index];
+	const isActive = activeIndex === index;
+	const [hide, setHide] = useState(false);
+	const timeoutRef = useRef<NodeJS.Timeout>(null);
+	useEffect(() => {
+		if (!secureTextEntry) return;
+		if (pinValue) {
+			timeoutRef.current = setTimeout(() => {
+				setHide(true);
+			}, pinHideTime);
+		} else {
+			setHide(false);
+		}
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, [secureTextEntry, pinValue, pinHideTime]);
+	return (
+		<Pressable
+			className={cn(
+				"p-2 bg-card rounded-lg items-center justify-center w-full font-medium aspect-sqaure flex-1 border border-muted/15 h-16 text-foreground text-[16px] text-center",
+				pinBoxClassName,
+				isFocused &&
+					isActive &&
+					"border-foreground" + " " + pinBoxFocusedClassName
+			)}
+			onPress={onPinBoxPress}
+			onFocus={onPinBoxPress}
+		>
+			{hide ? (
+				<View className="w-2 h-2 rounded-full bg-foreground" />
+			) : (
+				pinValue
+			)}
+		</Pressable>
+	);
+};

package/src/components/select/index.tsx

@@ -1,141 +1,2 @@
-import { cn, PressableProps, Text, useTw, View } from "@nativetail/core";
-import { Dropdown } from "../dropdown";
-import { memo, useCallback, useMemo } from "react";
-import { Iconify } from "react-native-iconify";
-
-type SelectProps = PressableProps & {
-	containerClassName?: string;
-	label: string;
-	error?: string;
-	helperText?: string;
-	value: string;
-	onChange: (value: string) => void;
-	placeholder?: string;
-	options: {
-		label: string;
-		value: string;
-		icon?: React.ReactNode;
-	}[];
-};
-export function Select({
-	containerClassName,
-	label,
-	error,
-	className,
-	value,
-	onChange,
-	helperText,
-	placeholder,
-	options,
-	...props
-}: SelectProps) {
-	const tw = useTw();
-	const renderOptions = useCallback(() => {
-		return options.map((option, index) => (
-			<SelectItem
-				label={option.label}
-				value={option.value}
-				icon={option.icon}
-				onChange={onChange}
-				isActive={value === option.value}
-				key={option.value}
-				first={index === 0}
-				last={index === options.length - 1}
-			/>
-		));
-	}, [options, value, onChange, tw]);
-	return (
-		<View className={cn("w-full gap-1", containerClassName)}>
-			<Text className={cn("text-muted/75 duration-75 ")}>{label}</Text>
-
-			<Dropdown.Root>
-				<SelectTrigger
-					options={options}
-					value={value}
-					placeholder={placeholder}
-					{...props}
-				/>
-				<Dropdown.Menu>{renderOptions()}</Dropdown.Menu>
-			</Dropdown.Root>
-		</View>
-	);
-}
-const SelectTrigger = memo(
-	({
-		options,
-		className,
-		value,
-		placeholder,
-		...props
-	}: Partial<SelectProps>) => {
-		const selectedOption = useMemo(
-			() => options.find((option) => option.value === value),
-			[value]
-		);
-		const tw = useTw();
-		return (
-			<Dropdown.Trigger
-				className={cn(
-					"p-3 bg-card rounded-lg w-full border flex-row items-center justify-between border-muted/15 h-14 text-foreground -z-5 text-[16px]",
-					className
-				)}
-				{...props}
-			>
-				{selectedOption && (
-					<Text className="text-foreground">{selectedOption.label}</Text>
-				)}
-				{!selectedOption && placeholder && (
-					<Text className="text-muted">{placeholder}</Text>
-				)}
-				<Iconify
-					icon="solar:alt-arrow-down-outline"
-					size={20}
-					color={tw.color("foreground")}
-				/>
-			</Dropdown.Trigger>
-		);
-	}
-);
-
-const SelectItem = memo(
-	({
-		label,
-		value,
-		icon,
-		onChange,
-		isActive,
-		first,
-		last,
-	}: {
-		label: string;
-		value: string;
-		icon?: React.ReactNode;
-
-		onChange: (value: string) => void;
-		isActive?: boolean;
-		first?: boolean;
-		last?: boolean;
-	}) => {
-		const tw = useTw();
-		return (
-			<Dropdown.Item
-				key={value}
-				onPress={() => onChange(isActive ? "" : value)}
-				first={first}
-				last={last}
-			>
-				<View className="flex-row items-center gap-2">
-					<Text className="text-sm text-foreground">{label}</Text>
-					{icon}
-				</View>
-				{isActive && (
-					<Iconify
-						icon="lucide:check"
-						size={16}
-						color={tw.color("foreground")}
-					/>
-				)}
-			</Dropdown.Item>
-		);
-	}
-);
+export * from "./select";
+export * from "./multi-select";

package/src/components/select/multi-select.tsx

@@ -0,0 +1,208 @@
+import {
+	cn,
+	Pressable,
+	PressableProps,
+	Text,
+	useTw,
+	View,
+} from "@nativetail/core";
+import { Dropdown } from "../dropdown";
+import { memo, useCallback, useMemo } from "react";
+import { Iconify } from "react-native-iconify";
+import { Control, Controller, Path } from "react-hook-form";
+
+type SelectProps<T extends Record<string, any>> = PressableProps & {
+	containerClassName?: string;
+	label?: string;
+	error?: string;
+	helperText?: string;
+	value?: string[];
+	onChange?: (value: string[]) => void;
+	placeholder?: string;
+	options: {
+		label: string;
+		value: string;
+		icon?: React.ReactNode;
+	}[];
+	control?: Control<T, any>;
+	name?: Path<T>;
+};
+export const MultiSelect = <T extends Record<string, any>>({
+	name,
+	control,
+	...props
+}: SelectProps<T>) => {
+	if (control) {
+		return (
+			<Controller
+				name={name}
+				control={control}
+				render={({ field, fieldState }) => {
+					return (
+						<BaseSelect
+							{...props}
+							value={field.value}
+							onChange={(text) => {
+								field.onChange(text);
+							}}
+							error={fieldState.error?.message}
+						/>
+					);
+				}}
+			/>
+		);
+	}
+	return <BaseSelect {...props} />;
+};
+function BaseSelect<T extends Record<string, any>>({
+	containerClassName,
+	label,
+	error,
+	className,
+	value,
+	onChange,
+	helperText,
+	placeholder,
+	options,
+	...props
+}: SelectProps<T>) {
+	const tw = useTw();
+	const renderOptions = useCallback(() => {
+		return options.map((option, index) => (
+			<SelectItem
+				label={option.label}
+				value={option.value}
+				icon={option.icon}
+				onChange={(val) => {
+					if (!val) onChange(value.filter((v) => v != option.value));
+					else onChange([...(value || []), val]);
+				}}
+				isActive={value?.includes?.(option.value)}
+				key={option.value}
+				first={index === 0}
+				last={index === options.length - 1}
+			/>
+		));
+	}, [options, value, onChange, tw]);
+	return (
+		<View className={cn("w-full gap-1", containerClassName)}>
+			<Text className={cn("text-muted/75 duration-75 ")}>{label}</Text>
+
+			<Dropdown.Root>
+				<SelectTrigger
+					options={options}
+					value={value}
+					placeholder={placeholder}
+					onChange={onChange}
+					error={error}
+					{...props}
+				/>
+				<Dropdown.Menu>{renderOptions()}</Dropdown.Menu>
+			</Dropdown.Root>
+		</View>
+	);
+}
+const SelectTrigger = memo(
+	<T extends Record<string, any>>({
+		options,
+		className,
+		value,
+		placeholder,
+		onChange,
+		error,
+		...props
+	}: PressableProps & {
+		options: SelectProps<T>["options"];
+		value: SelectProps<T>["value"];
+		onChange: SelectProps<T>["onChange"];
+		placeholder: SelectProps<T>["placeholder"];
+		error: SelectProps<T>["error"];
+	}) => {
+		const selectedOptions = useMemo(
+			() => options.filter((option) => value?.includes?.(option.value)),
+			[value]
+		);
+		const tw = useTw();
+		return (
+			<>
+				<Dropdown.Trigger
+					className={cn(
+						"p-3 bg-card rounded-lg w-full border flex-row items-center justify-between border-muted/15 h-14 text-foreground -z-5 text-[16px]",
+						className
+					)}
+					{...props}
+				>
+					{selectedOptions.length > 0 && (
+						<View className="flex-row gap-2 flex-wrap">
+							{selectedOptions.map((option) => (
+								<Pressable
+									className="bg-muted/8 rounded-2xl text-sm px-2 py-1"
+									key={option.value}
+									onPress={() => {
+										onChange(value.filter((val) => val != option.value));
+									}}
+								>
+									{option.label}
+								</Pressable>
+							))}
+						</View>
+					)}
+					{selectedOptions.length == 0 && placeholder && (
+						<Text className="text-muted">{placeholder}</Text>
+					)}
+					<Iconify
+						icon="solar:alt-arrow-down-outline"
+						size={20}
+						color={tw.color("foreground")}
+					/>
+				</Dropdown.Trigger>
+
+				{error && <Text className="text-sm text-danger">{error}</Text>}
+			</>
+		);
+	}
+);
+
+const SelectItem = memo(
+	({
+		label,
+		value,
+		icon,
+		onChange,
+		isActive,
+		first,
+		last,
+	}: {
+		label: string;
+		value: string;
+		icon?: React.ReactNode;
+
+		onChange: (value: string) => void;
+		isActive?: boolean;
+		first?: boolean;
+		last?: boolean;
+	}) => {
+		const tw = useTw();
+		return (
+			<Dropdown.Item
+				key={value}
+				onPress={() => onChange(isActive ? "" : value)}
+				first={first}
+				last={last}
+				autoClosable={false}
+			>
+				<View className="flex-row items-center gap-2">
+					<Text className="text-sm text-foreground">{label}</Text>
+					{icon}
+				</View>
+				{isActive && (
+					<Iconify
+						icon="lucide:check"
+						size={16}
+						color={tw.color("foreground")}
+					/>
+				)}
+			</Dropdown.Item>
+		);
+	}
+);