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

import {
    useLayoutEffect,
    useState
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    SelectBox,
    Loading,
    Header
    ,
    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 {
    ILoadingProps
} from "ncore-ui-kit";

const SIZES: Array<ILoadingProps["size"]> = [
    16,
    24,
    32
];

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

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

    const [
        sizeIndex,
        setSizeIndex
    ] = useState<number>(1);

    useLayoutEffect(() => {
        navigation.setOptions({
            header: () => (
                <Header
                    title={localize("loading-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("loading-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
                    }}
                >
                    <Loading size={SIZES[sizeIndex]} />
                </View>
                <View
                    style={{
                        justifyContent: "space-between",
                        gap: spaces.spacingMd,
                        flexDirection: "row",
                        flexWrap: "wrap",
                        width: "100%"
                    }}
                >
                    <SelectBox
                        onChange={(selectedItems) => {
                            if (selectedItems.length > 0) {
                                const index = SIZES.indexOf(
                                    Number(
                                        selectedItems[0]!.__key,
                                    ) as ILoadingProps["size"],
                                );
                                if (index !== -1) setSizeIndex(index);
                            }
                        }}
                        initialSelectedItems={
                            SIZES_DATA[sizeIndex] ? [SIZES_DATA[sizeIndex]] : []
                        }
                        title={localize("loading-changeSize")}
                        titleExtractor={(item) => item.__title}
                        keyExtractor={(item) => item.__key}
                        spreadBehaviour="free"
                        data={SIZES_DATA}
                    />
                </View>
            </View>
        </PageContainer>
    );
};
export default LoadingPage;