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

import {
    useLayoutEffect,
    useState
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    type ICheckBoxProps,
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    CodeViewer,
    SelectBox,
    TextInput,
    CheckBox,
    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";

const CHECK_BOX_TYPES: Array<ICheckBoxProps["type"]> = [
    "primary",
    "danger",
    "warning",
    "success",
    "info"
];

const CHECK_BOX_SPREAD_BEHAVIOURS: Array<ICheckBoxProps["spreadBehaviour"]> = [
    "baseline",
    "stretch",
    "free"
];

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

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

type IsCheckedType = "checked" | "partially" | null;

const IS_CHECKED_TYPES: Array<IsCheckedType> = [
    "partially",
    "checked",
    null
];

const IS_CHECKED_TYPES_DATA = IS_CHECKED_TYPES.map((item) => ({
    __title: String(item),
    __key: String(item)
}));

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

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

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

    const [
        isCheckedIndex,
        setIsCheckedIndex
    ] = useState<number>(0);

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

    const [
        isLoading,
        setIsLoading
    ] = useState<boolean>(false);

    const [
        subTitle,
        setSubTitle
    ] = useState<string>("Subtitle");

    const [
        isFlip,
        setIsFlip
    ] = useState<boolean>(false);

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

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

    return <PageContainer
        scrollViewProps={{
            contentContainerStyle: stylesheet.scrollContent
        }}
        isWorkWithHeaderSpace={false}
        scrollViewStyle={[
            stylesheet.container
        ]}
        isScrollable={true}
    >
        <View
            style={[
                stylesheet.contentContainer
            ]}
        >
            <Text
                style={stylesheet.descText}
                variant="bodyMediumSize"
                color="mid"
            >
                {localize("checkBox-desc")}
            </Text>
            <View
                style={[
                    stylesheet.previewContainer,
                    {
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        borderRadius: radiuses.form,
                        borderWidth: borders.line,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <CheckBox
                    onPress={() => {
                        setIsCheckedIndex((prev) => (prev === 0 ? 2 : 0));
                    }}
                    spreadBehaviour={
                        CHECK_BOX_SPREAD_BEHAVIOURS[spreadIndex]
                    }
                    isChecked={IS_CHECKED_TYPES[isCheckedIndex]}
                    type={CHECK_BOX_TYPES[typeIndex]}
                    isDisabled={isDisabled}
                    isLoading={isLoading}
                    subTitle={subTitle}
                    isFlip={isFlip}
                    title={title}
                />
            </View>
            <View
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    {localize("usage")}
                </Text>
                <CodeViewer
                    code={"import {\n    CheckBox\n} from \"ncore-ui-kit\";\n\n<CheckBox\n    title=\"CheckBox Title\"\n    subTitle=\"Subtitle\"\n    type=\"primary\"\n/>"}
                    language="tsx"
                />
            </View>
            <TextInput
                placeholder={localize("checkBox-enterText")}
                title={localize("checkBox-titleLabel")}
                style={{
                    marginBottom: spaces.spacingMd
                }}
                spreadBehaviour="stretch"
                onChangeText={setTitle}
                value={title}
            />
            <TextInput
                placeholder={localize("checkBox-enterSubText")}
                title={localize("checkBox-subTitleLabel")}
                style={{
                    marginBottom: spaces.spacingMd
                }}
                onChangeText={setSubTitle}
                spreadBehaviour="stretch"
                value={subTitle}
            />
            <View
                style={[
                    stylesheet.rowContainer,
                    {
                        gap: spaces.spacingMd
                    }
                ]}
            >
                <SelectBox
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = CHECK_BOX_TYPES.indexOf(
                                    selectedItems[0]!
                                        .__key as ICheckBoxProps["type"],
                            );
                            if (index !== -1) setTypeIndex(index);
                        }
                    }}
                    initialSelectedItems={

                        CHECK_BOX_TYPES_DATA[typeIndex]

                            ? [
                                CHECK_BOX_TYPES_DATA[typeIndex]!
                            ]

                            : []

                    }
                    title={localize("checkBox-changeType")}
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    data={CHECK_BOX_TYPES_DATA}
                    spreadBehaviour="free"
                />
                <SelectBox
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index =
                                    CHECK_BOX_SPREAD_BEHAVIOURS.indexOf(
                                        selectedItems[0]!
                                            .__key as ICheckBoxProps["spreadBehaviour"],
                                    );
                            if (index !== -1) setSpreadIndex(index);
                        }
                    }}
                    initialSelectedItems={
                        CHECK_BOX_SPREAD_BEHAVIOURS_DATA[spreadIndex]
                            ? [
                                    CHECK_BOX_SPREAD_BEHAVIOURS_DATA[
                                        spreadIndex
                                    ]!
                            ]
                            : []
                    }
                    title={localize("checkBox-changeSpread")}
                    data={CHECK_BOX_SPREAD_BEHAVIOURS_DATA}
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    spreadBehaviour="free"
                />
                <SelectBox
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = IS_CHECKED_TYPES_DATA.findIndex(
                                (item) =>
                                    item.__key === selectedItems[0]!.__key,
                            );
                            if (index !== -1) setIsCheckedIndex(index);
                        }
                    }}
                    initialSelectedItems={

                        IS_CHECKED_TYPES_DATA[isCheckedIndex]

                            ? [
                                IS_CHECKED_TYPES_DATA[isCheckedIndex]!
                            ]

                            : []

                    }
                    title={localize("checkBox-changeIsChecked")}
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    data={IS_CHECKED_TYPES_DATA}
                    spreadBehaviour="free"
                />
                <View
                    style={stylesheet.switchesContainer}
                >
                    <Switch
                        title={localize("checkBox-toggleLoading")}
                        onPress={() => {
                            setIsLoading(!isLoading);
                        }}
                        spreadBehaviour="free"
                        isActive={isLoading}
                    />
                    <Switch
                        title={localize("checkBox-toggleDisabled")}
                        onPress={() => {
                            setIsDisabled(!isDisabled);
                        }}
                        spreadBehaviour="free"
                        isActive={isDisabled}
                    />
                    <Switch
                        title={localize("checkBox-toggleFlip")}
                        onPress={() => {
                            setIsFlip(!isFlip);
                        }}
                        spreadBehaviour="free"
                        isActive={isFlip}
                    />
                </View>
            </View>
        </View>
    </PageContainer>;
};
export default CheckBoxPage;