ncore-ui-kit/example/src/pages/components/textInput/index.tsx

import {
    useLayoutEffect,
    useState
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    SelectBox,
    TextInput,
    Button,
    Header,
    Switch
    ,
    Text
} from "ncore-ui-kit";
import {
    useNavigation
} from "@react-navigation/native";
import type RootStackParamList from "../../navigation/type";
import type {
    NativeStackNavigationProp
} from "@react-navigation/native-stack";
import type {
    ITextInputProps
} from "ncore-ui-kit";
import {
    Home as HomeIcon
} from "lucide-react-native";

const TYPES: Array<ITextInputProps["type"]> = [
    "default",
    "danger",
    "warning",
    "question",
    "success",
    "info"
];
const VARIANTS: Array<ITextInputProps["variant"]> = [
    "text",
    "hidden"
];
const SPREAD_BEHAVIOURS: Array<ITextInputProps["spreadBehaviour"]> = [
    "baseline",
    "stretch",
    "free"
];

const TYPES_DATA = TYPES.map((item) => ({
    __title: item as string,
    __key: item as string
}));

const VARIANTS_DATA = VARIANTS.map((item) => ({
    __title: item as string,
    __key: item as string
}));

const TextInputPage = () => {
    const {
        radiuses,
        borders,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

    const [
        typeIndex,
        setTypeIndex
    ] = useState<number>(0);

    const [
        variantIndex,
        setVariantIndex
    ] = useState<number>(0);

    const [
        spreadIndex,
        setSpreadIndex
    ] = useState<number>(0);

    const [
        title,
        setTitle
    ] = useState<string>("");

    const [
        isDisabled,
        setIsDisabled
    ] = useState<boolean>(false);

    const [
        showIcon,
        setShowIcon
    ] = useState<boolean>(false);

    const [
        isCleanEnabled,
        setIsCleanEnabled
    ] = useState<boolean>(true);

    const [
        isRequired,
        setIsRequired
    ] = useState<boolean>(false);

    const [
        isOptional,
        setIsOptional
    ] = useState<boolean>(false);

    const [
        val,
        setVal
    ] = useState<string>("");

    useLayoutEffect(() => {
        navigation.setOptions({
            header: () => (
                <Header
                    title={localize("textInput-title")}
                    isWrapSafeareaContext={false}
                    navigation={navigation}
                    isGoBackEnable={true}
                />
            ),
            headerShown: true
        });
    }, []);

    return (
        <PageContainer
            scrollViewProps={{
                contentContainerStyle: stylesheet.scrollContent
            }}
            scrollViewStyle={[stylesheet.container]}
            isWorkWithHeaderSpace={false}
            isScrollable={true}
        >
            <View style={[stylesheet.contentContainer]}>
                <Text
                    variant="bodyMediumSize"
                    color="mid"
                    style={{
                        marginBottom: 20
                    }}
                >
                    {localize("textInput-desc")}
                </Text>
                <View
                    style={{
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        borderRadius: radiuses.form,
                        borderWidth: borders.line,
                        padding: spaces.spacingMd,
                        justifyContent: "center",
                        alignItems: "center",
                        minHeight: 120
                    }}
                >
                    <TextInput
                        icon={
                            showIcon
                                ? ({
                                    color,
                                    size
                                }) => (
                                    <HomeIcon
                                        color={colors.content.icon[color]}
                                        size={size}
                                    />
                                )
                                : undefined
                        }
                        title={
                            title || localize("textInput-exampleTitle")
                        }
                        placeholder={localize("textInput-placeholder")}
                        spreadBehaviour={SPREAD_BEHAVIOURS[spreadIndex]}
                        variant={VARIANTS[variantIndex]}
                        isCleanEnabled={isCleanEnabled}
                        type={TYPES[typeIndex]}
                        isDisabled={isDisabled}
                        isRequired={isRequired}
                        isOptional={isOptional}
                        onChangeText={setVal}
                        value={val}
                    />
                </View>
                <TextInput
                    placeholder={localize("textInput-enterTitle")}
                    title={localize("textInput-titleLabel")}
                    style={{
                        marginBottom: spaces.spacingMd
                    }}
                    spreadBehaviour="stretch"
                    onChangeText={setTitle}
                    value={title}
                />
                <View
                    style={{
                        justifyContent: "space-between",
                        gap: spaces.spacingMd,
                        flexDirection: "row",
                        flexWrap: "wrap",
                        width: "100%"
                    }}
                >
                    <SelectBox
                        initialSelectedItems={TYPES_DATA[typeIndex] ? [TYPES_DATA[typeIndex]] : []}
                        onChange={(selectedItems) => {
                            if (selectedItems.length > 0) {
                                const index = TYPES.indexOf(selectedItems[0]!.__key as unknown as ITextInputProps["type"]);

                                if (index !== -1) setTypeIndex(index);
                            }
                        }}
                        title={localize("textInput-changeType")}
                        titleExtractor={(item) => item.__title}
                        keyExtractor={(item) => item.__key}
                        spreadBehaviour="free"
                        data={TYPES_DATA}
                    />
                    <SelectBox
                        onChange={(selectedItems) => {
                            if (selectedItems.length > 0) {
                                const index = VARIANTS.indexOf(selectedItems[0]!.__key as unknown as ITextInputProps["variant"]);

                                if (index !== -1) setVariantIndex(index);
                            }
                        }}
                        initialSelectedItems={VARIANTS_DATA[variantIndex] ? [VARIANTS_DATA[variantIndex]] : []}
                        title={localize("textInput-changeVariant")}
                        titleExtractor={(item) => item.__title}
                        keyExtractor={(item) => item.__key}
                        spreadBehaviour="free"
                        data={VARIANTS_DATA}
                    />
                    <Button
                        onPress={() => {
                            setSpreadIndex((prev) => prev + 1 > SPREAD_BEHAVIOURS.length - 1 ? 0 : prev + 1);
                        }}
                        title={`${localize("textInput-changeSpread")}: ${SPREAD_BEHAVIOURS[spreadIndex]}`}
                        spreadBehaviour="free"
                    />
                    <View
                        style={{
                            justifyContent: "space-between",
                            flexDirection: "row",
                            alignItems: "center",
                            flexWrap: "wrap",
                            width: "100%"
                        }}
                    >
                        <Switch
                            title={localize("textInput-toggleIcon")}
                            onPress={() => setShowIcon(!showIcon)}
                            isActive={showIcon}
                        />
                        <Switch
                            title={localize("textInput-toggleDisabled")}
                            onPress={() => setIsDisabled(!isDisabled)}
                            isActive={isDisabled}
                        />
                        <Switch
                            onPress={() => setIsCleanEnabled(!isCleanEnabled)}
                            title={localize("textInput-toggleClean")}
                            isActive={isCleanEnabled}
                        />
                        <Switch
                            title={localize("textInput-toggleRequired")}
                            onPress={() => setIsRequired(!isRequired)}
                            isActive={isRequired}
                        />
                        <Switch
                            title={localize("textInput-toggleOptional")}
                            onPress={() => setIsOptional(!isOptional)}
                            isActive={isOptional}
                        />
                    </View>
                </View>
            </View>
        </PageContainer>
    );
};
export default TextInputPage;