ncore-ui-kit/example/mobile/src/pages/home/index.tsx

import {
    Fragment,
    useState,
    useRef
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitBottomSheet,
    NotificationIndicator,
    getNCoreUIKitVersion,
    type IBottomSheetRef,
    NCoreUIKitSnackBar,
    NCoreUIKitDialog,
    NCoreUIKitToast,
    NCoreUIKitTheme,
    DateTimePicker,
    MarkdownViewer,
    PageContainer,
    TextAreaInput,
    BottomSheet,
    RadioButton,
    TextInput,
    SelectBox,
    StateCard,
    CheckBox,
    RowCard,
    Button,
    Dialog,
    Switch,
    Text,
    Sticker,
    Chip
} from "ncore-ui-kit-mobile";
import {
    useNavigation
} from "@react-navigation/native";
import type {
    NativeStackNavigationProp
} from "@react-navigation/native-stack";
import type RootStackParamList from "../../navigation/type";
import {
    ChevronRight as ChevronRightIcon,
    HomeIcon
} from "lucide-react-native";
import moment from "moment";

const X = [
    {
        t: "xdfç.öhfdşkhdfşlhkfdşlhkdfşklhjmdfkhl3",
        p: "ydfguıy8ı*pğ34erdx",
        n: 90
    },
    {
        t: "3t4uh5ıe6ıo6eıo6eoke6ıoke6ker6kr4ok",
        p: "y3w46pjbd57ykdr",
        n: 91
    },
    {
        t: "xr*-0k4wkh-5w40k0*wek95ujk9*",
        p: "y467o5*3evghe5",
        n: 92
    },
    {
        t: "x-40*tyg*0w4kyh*w0ko45u*ko0w",
        p: "y3şçwl78570*fg",
        n: 93
    },
    {
        t: "*wrüsjh*ü9kws4*h0okdfhdhdfurdkex",
        p: "yt7ıtot7ot",
        n: 94
    },
    {
        t: "x2-0*4woy-*w4opyu-*23wou*0wık*0jk",
        p: "yasfa33",
        n: 95
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    },
    {
        t: "x vmönöpwoı6-pğfş -*235*çda",
        p: "ydfasdfasf",
        n: 96
    }
];

const Home = () => {
    const {
        colors
    } = NCoreUIKitTheme.useContext();

    const bottomSheetRef = useRef<IBottomSheetRef>(null);

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

    const [
        isCheckboxActive,
        setIsCheckboxActive
    ] = useState<"partially" | "checked" | null>("checked");

    const [
        isDialogActive,
        setIsDialogActive
    ] = useState(false);

    const [
        isRadioActive,
        setIsRadioActive
    ] = useState(false);

    const [
        isSwitchActive,
        setIsSwitchActive
    ] = useState(false);

    return <PageContainer
        scrollViewStyle={stylesheet.container}
        isScrollable={true}
        scrollViewProps={{
            showsHorizontalScrollIndicator: false,
            showsVerticalScrollIndicator: false,
            contentContainerStyle: {
                backgroundColor: colors.content.container.default,
                ...stylesheet.contentContainer
            }
        }}
        renderOverlays={() => {
            return <Fragment>
                <Dialog
                    isVisible={isDialogActive}
                    content="etgweı09gı9w0eg"
                    title="Merhaba Dünya!"
                    contentJustify="centered"
                    modalProps={{
                        isWorkWithPortal: false
                    }}
                    onOverlayPress={({
                        closeAnimation
                    }) => {
                        closeAnimation(() => setIsDialogActive(false));
                    }}
                    variant="yes-no"
                    secondaryButtonProps={{
                        title: "sdfgsdg",
                        onPress: () => {

                        }
                    }}
                    primaryButtonProps={{
                        onPress: ({
                            closeAnimation
                        }) => {
                            closeAnimation(() => setIsDialogActive(false));
                        }
                    }}
                />
                <BottomSheet
                    ref={bottomSheetRef}
                    renderHeader={() => {
                        return <View
                            style={[
                                {
                                    backgroundColor: "blue",
                                    padding: 20
                                }
                            ]}
                        >
                            <Text>Burası header.</Text>
                        </View>;
                    }}
                    isCanFullScreenOnSwipe={true}
                    isWorkWithPortal={false}
                    snapPoint={300}
                    key="ahmet"
                >
                    <Button
                        title="Open Toast"
                        variant="filled"
                        type="warning"
                        onPress={() => {
                            NCoreUIKitToast.open({
                                title: "sdgfsdgsdg",
                                type: "danger"
                            });
                        }}
                    />
                    <Button
                        onPress={() => {
                            navigation.navigate("TestSubPage");
                        }}
                        title="Git."
                    />
                    {[
                        0,
                        1,
                        2,
                        3,
                        4,
                        5,
                        6,
                        7,
                        8,
                        9,
                        10,
                        11,
                        12,
                        13,
                        14,
                        15,
                        16,
                        17,
                        18,
                        19,
                        20,
                        21,
                        22,
                        23,
                        24,
                        25,
                        26,
                        27,
                        28,
                        29,
                        30,
                        31,
                        32,
                        33,
                        34,
                        35
                    ].map((it) => {
                        return <View
                            key={`fds-${it}`}
                            style={{
                                backgroundColor: `rgb(${it * 10}, ${it > 30 ? it * 5 : "0"}, ${it > 20 ? it * 4 : "0"})`,
                                height: 150
                            }}
                        />;
                    })}
                    <Text>Deneme 123</Text>
                    <Text>Deneme 123</Text>
                    <Text>Deneme 123</Text>
                    <Text>Deneme 123</Text>
                    <Text>Deneme 123</Text>
                    <Text>Deneme 123</Text>
                    <Text>Deneme 123</Text>
                    <Text>Deneme 123</Text>
                </BottomSheet>
            </Fragment>;
        }}
    >
        <Chip
            spreadBehaviour="free"
            title="test"
            isLoading={false}
            isDisabled={false}
            icon={({
                customColor,
                style,
                color,
                size
            }) => <HomeIcon
                color={customColor ? customColor : colors.content.icon[color]}
                size={size}
                style={style}
            />}
        />
        <Sticker
            spreadBehaviour="free"
            title="test"
            icon={({
                style,
                color,
                size
            }) => <HomeIcon
                color={colors.content.icon[color]}
                size={size}
                style={style}
            />}
        />
        <StateCard
            title="Deneme"
            subTitle="Bu bir alt metindir ve uzun olması gerekmektedir. Ne kadar uzun olursa o kadar iyidir."
            icon={({
                color,
                size
            }) => <HomeIcon
                color={colors.content.icon[color]}
                size={size}
            />}
            action={{
                title: "Me Action",
                size: "small",
                onPress: () => {

                }
            }}
        />
        <DateTimePicker
            minDate={moment().subtract(2, "years").toDate()}
            maxDate={moment().add(15, "years").toDate()}
            isWorkWithRealtime={false}
            isWorkWithSeconds={true}
            isCleanEnabled={true}
            variant="range"
            initialDateRange={{
                start: moment().subtract(2, "days").startOf("day").toDate(),
                end: moment().add(6, "days").endOf("day").toDate()
            }}
            initialDate={new Date()}
        />
        <MarkdownViewer
            content={`
# Merhaba Furkan!.

Nabersin ?

<center>
<link href="https://www.nibgat.com">
## Deneme **title** 2
</link>

\`\`\`
safasfasfasf
\`\`\`
</center>
iyisindir **umarım.**

\`\`\`
Ahmet buraya gel.


Geldin mi ?
\`\`\`

<<
Burası alıntı metnidir.
>>

* Merhaba __madd__e1.
- Deneme madde2.

[Alt text için deneme](https://static.vecteezy.com/system/resources/thumbnails/060/843/811/small/close-up-of-raindrops-on-leaves-hd-background-luxury-hd-wallpaper-image-trendy-background-illustration-free-photo.jpg)<100%x200>--cover--`}
        />
        <NotificationIndicator
            type="danger"
            title={53}
        >
            <Button
                size="small"
                icon={({
                    color
                }) => <HomeIcon
                    color={colors.content.icon[color]}
                />}
                onPress={() => {

                }}
            />
        </NotificationIndicator>
        <Switch
            spreadBehaviour="stretch"
            isActive={isSwitchActive}
            title="dsgojksdgpojk"
            subTitle="SJFAJdfa"
            isDisabled={false}
            onPress={() => {
                setIsSwitchActive(!isSwitchActive);
            }}
        />
        <RowCard
            title="Merhaba"
            icon={({
                color
            }) => <HomeIcon
                color={colors.content.icon[color]}
            />}
            rightIcon={({
                color
            }) => <ChevronRightIcon
                color={colors.content.icon[color]}
            />}
        />
        <RadioButton
            isChecked={isRadioActive}
            title="sadfasfsafasf"
            isDisabled={false}
            subTitle="asfgsaf"
            onPress={() => {
                setIsRadioActive(!isRadioActive);
            }}
        />
        <CheckBox
            isChecked={isCheckboxActive}
            title="sadfasfsafasf"
            isDisabled={false}
            subTitle="asfgsaf"
            onPress={() => {
                setIsCheckboxActive(isCheckboxActive === "checked" ? null : isCheckboxActive === null ? "partially" : "checked");
            }}
        />
        <TextAreaInput
            isUpdateOnRealtime={true}
            spreadBehaviour="stretch"
            placeholder="efsdg"
            maxLength={300}
            title="Merhaba"
            type="success"
            isCleanEnabled={true}
            icon={({
                color
            }) => <HomeIcon
                color={colors.content.icon[color]}
            />}
        />
        <SelectBox
            keyExtractor={(data, index) => `${data.t}-${index}`}
            titleExtractor={(data) => data.t}
            initialSelectedItems={[{
                __title: X[0]?.t as string,
                __key: `${X[0]?.t}-0`
            }]}
            subTitle="Deneme Subtitle"
            // isWorkWithRealtime={false}
            isWorkWithRealtime={false}
            spreadBehaviour="baseline"
            isMultipleSelect={true}
            isShowSubTitle={true}
            hintText="Test deneme"
            isCleanEnabled={true}
            maxChoice={-1}
            minChoice={0}
            isSearchable={true}
            title="Deneme Box"
            isRequired={true}
            data={X}
            onMoreLoad={(props) => {
                console.log("More Loaded:", props);
            }}
        />
        <TextInput
            variant="hidden"
            placeholder="dsagdsag"
        />
        <Text>Version: v{getNCoreUIKitVersion()}</Text>
        <Button
            onPress={() => {
                navigation.navigate("TestSubPage");
            }}
            title="Open Test Sub Page"
            variant="filled"
            spreadBehaviour="stretch"
        />
        <Button
            onPress={() => {
                bottomSheetRef.current?.open();
            }}
            type="success"
            title="Open Local BottomSheet"
            variant="filled"
        />
        <Button
            onPress={() => {
                NCoreUIKitBottomSheet.open({
                    children: <View>
                        <Text>Deneme 123</Text>
                        <Text>Deneme 123</Text>
                        <Text>Deneme 123</Text>
                        <Text>Deneme 123</Text>
                        <Text>Deneme 123</Text>
                        <Text>Deneme 123</Text>
                    </View>
                });
            }}
            type="success"
            title="Open BottomSheet"
            variant="filled"
        />
        <Button
            onPress={() => {
                setIsDialogActive(!isDialogActive);
            }}
            type="neutral"
            title="Open Local Dialog"
            variant="filled"
        />
        <Button
            title="Open Snackbar"
            variant="filled"
            type="danger"
            onPress={() => {
                NCoreUIKitSnackBar.open({
                    title: "sdgdsgs",
                    icon: ({
                        color
                    }) => <HomeIcon color={colors.content.icon[color ? color : "default"]}/>
                });
            }}
        />
        <Button
            onPress={() => {
                NCoreUIKitDialog.open({
                    content: "etgweı09gı9w0eg",
                    title: "Merhaba Dünya!",
                    isVisible: true,
                    onOverlayPress: ({
                        closeAnimation
                    }) => {
                        closeAnimation();
                    },
                    variant: "info",
                    secondaryButtonProps: {
                        title: "sdfgsdg",
                        onPress: () => {

                        }
                    },
                    primaryButtonProps: {
                        onPress: ({
                            closeAnimation
                        }) => {
                            closeAnimation();
                        }
                    }
                });
            }}
            type="neutral"
            title="Open Dialog"
            variant="filled"
        />
        <Button
            title="Open Toast"
            variant="filled"
            type="warning"
            onPress={() => {
                NCoreUIKitToast.open({
                    title: "sdgfsdgsdafs sdlşlgkdfşiklh",
                    subTitle: "tr9uıdgfss 0dgklsd",
                    isShowAction: true,
                    icon: ({
                        color
                    }) => <HomeIcon color={colors.content.icon[color ? color : "default"]}/>
                });
            }}
        />
    </PageContainer>;
};
export default Home;