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

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

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

    const [
        isWorkWithPortal,
        setIsWorkWithPortal
    ] = useState<boolean>(true);

    const [
        isSwipeClose,
        setIsSwipeClose
    ] = useState<boolean>(true);

    const [
        isShowHandle,
        setIsShowHandle
    ] = useState<boolean>(true);

    const [
        isActive,
        setIsActive
    ] = useState<boolean>(false);

    useLayoutEffect(() => {
        navigation.setOptions({
            header: () => <Header
                title={localize("bottomSheet-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.marginContainer}
                variant="bodyMediumSize"
                color="mid"
            >
                {localize("bottomSheet-desc")}
            </Text>
            <View
                style={[
                    stylesheet.paddedMarginContainer,
                    {
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        borderRadius: radiuses.form,
                        borderWidth: borders.line,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Button
                    title={localize("bottomSheet-openSheet")}
                    onPress={() => setIsActive(true)}
                />
            </View>
            <View
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    {localize("usage")}
                </Text>
                <CodeViewer
                    code={"import {\n    BottomSheet\n} from \"ncore-ui-kit\";\n\n<BottomSheet\n    isActive={isActive}\n    onClose={() => setIsActive(false)}\n>\n    <Text>BottomSheet Content</Text>\n</BottomSheet>"}
                    language="tsx"
                />
            </View>
            <View
                style={[
                    stylesheet.rowSpaceBetween,
                    {
                        gap: spaces.spacingMd
                    }
                ]}
            >
                <View
                    style={stylesheet.rowSpaceBetween2}
                >
                    <Switch
                        title={localize(
                            "bottomSheet-toggleSwipeClose",
                        )}
                        onPress={() => {
                            setIsSwipeClose(!isSwipeClose);
                        }}
                        isActive={isSwipeClose}
                        spreadBehaviour="free"
                    />
                    <Switch
                        title={localize(
                            "bottomSheet-toggleShowHandle",
                        )}
                        onPress={() => {
                            setIsShowHandle(!isShowHandle);
                        }}
                        isActive={isShowHandle}
                        spreadBehaviour="free"
                    />
                    <Switch
                        title={localize("bottomSheet-togglePortal")}
                        onPress={() => {
                            setIsWorkWithPortal(!isWorkWithPortal);
                        }}
                        isActive={isWorkWithPortal}
                        spreadBehaviour="free"
                    />
                </View>
            </View>
        </View>
        <BottomSheet
            isWorkWithPortal={isWorkWithPortal}
            onClose={() => setIsActive(false)}
            isSwipeClose={isSwipeClose}
            isShowHandle={isShowHandle}
            isActive={isActive}
        >
            <View
                style={{
                    padding: spaces.spacingMd
                }}
            >
                <Text
                    style={[
                        stylesheet.centeredText,
                        {
                            marginBottom: spaces.spacingMd
                        }
                    ]}
                >
                    {localize("bottomSheet-content")}
                </Text>
                <Button
                    title={localize("bottomSheet-close")}
                    onPress={() => setIsActive(false)}
                    spreadBehaviour="stretch"
                    type="danger"
                />
            </View>
        </BottomSheet>
    </PageContainer>;
};
export default BottomSheetPage;