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

import {
    useLayoutEffect,
    useState
} from "react";
import {
    StyleSheet,
    View
} from "react-native";
import {
    NCoreUIKitCoreComplexProvider,
    type ActivityStatusType,
    type IUserShortcutProps,
    STATUS_CHEAT_SHEET,
    NCoreUIKitTheme,
    PageContainer,
    UserShortcut,
    CodeViewer,
    SelectBox,
    TextInput,
    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 STATUS_INDICATOR_TYPES_DATA = Object.keys(STATUS_CHEAT_SHEET).map((type) => ({
    __title: type.charAt(0).toUpperCase() + type.slice(1),
    __key: type
}));

const SPREAD_BEHAVIOURS: Array<NonNullable<IUserShortcutProps["spreadBehaviour"]>> = [
    "baseline",
    "stretch",
    "free"
];

const SPREAD_BEHAVIOURS_DATA = SPREAD_BEHAVIOURS.map((type) => ({
    __title: type ? type.charAt(0).toUpperCase() + type.slice(1) : "None",
    __key: type
}));

const VARIANT_TYPES: Array<NonNullable<IUserShortcutProps["variant"]>> = [
    "default",
    "compact"
];

const VARIANT_TYPES_DATA = VARIANT_TYPES.map((type) => ({
    __title: type.charAt(0).toUpperCase() + type.slice(1),
    __key: type
}));

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

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

    const bgColorKeys = Object.keys(colors.content.container);

    const [
        statusIndicatorTypeIndex,
        setStatusIndicatorTypeIndex
    ] = useState(Object.keys(STATUS_CHEAT_SHEET).findIndex(e => e === "online"));

    const [
        spreadBehaviourIndex,
        setSpreadBehaviourIndex
    ] = useState(0);

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

    const [
        backgroundColor,
        setBackgroundColor
    ] = useState<NonNullable<IUserShortcutProps["backgroundColor"]>>("mid");

    const BACKGROUND_COLORS_DATA = [
        "transparent",
        ...bgColorKeys
    ].map((color) => ({
        __title: color.charAt(0).toUpperCase() + color.slice(1),
        __key: color
    }));

    const [
        statusText,
        setStatusText
    ] = useState("");

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

    const [
        subTitle,
        setSubTitle
    ] = useState("Product Designer");

    const [
        title,
        setTitle
    ] = useState("Furkan Atakan BOZKURT");

    const [
        isShowLoginButtonWhenNoSession,
        setIsShowLoginButtonWhenNoSession
    ] = useState(true);

    const [
        isWorkWithCoreComplex,
        setIsWorkWithCoreComplex
    ] = useState(false);

    const [
        isShowRegisterButton,
        setIsShowRegisterButton
    ] = useState(false);

    const [
        isShowLogoutButton,
        setIsShowLogoutButton
    ] = useState(true);

    const [
        isShowArrowButton,
        setIsShowArrowButton
    ] = useState(true);

    const [
        isSessionActive,
        setIsSessionActive
    ] = useState(true);

    useLayoutEffect(() => {
        navigation.setOptions({
            headerTitle: "UserShortcut",
            headerShown: true
        });
    }, [
        navigation
    ]);

    const statusIndicatorType = Object.keys(STATUS_CHEAT_SHEET)[statusIndicatorTypeIndex] as ActivityStatusType;
    const spreadBehaviour = SPREAD_BEHAVIOURS[spreadBehaviourIndex];
    const variant = VARIANT_TYPES[variantIndex];

    const styles = StyleSheet.create({
        controlsContainer: {
            gap: spaces.spacingMd
        },
        rowContainer: {
            flexDirection: "row",
            alignItems: "center",
            display: "flex"
        }
    });

    return <PageContainer
        isScrollable={true}
    >
        <View
            style={{
                paddingHorizontal: spaces.spacingMd,
                paddingVertical: spaces.spacingLg
            }}
        >
            <View
                style={{
                    borderColor: colors.content.container.mid,
                    paddingHorizontal: spaces.spacingMd,
                    paddingVertical: spaces.spacingLg,
                    marginBottom: spaces.spacingXl,
                    borderRadius: spaces.spacingMd,
                    borderWidth: borders.line,
                    justifyContent: "center",
                    alignItems: "center"
                }}
            >
                <NCoreUIKitCoreComplexProvider
                    privateKeyID="test"
                    rsaPublicKey="test"
                    privateKey="test"
                    appID="test"
                >
                    <UserShortcut
                        isShowLoginButtonWhenNoSession={isShowLoginButtonWhenNoSession}
                        actionButtons={[
                            {
                                onPress: () => console.log("Profile pressed"),
                                title: "Profile"
                            },
                            {
                                onPress: () => console.log("Settings pressed"),
                                title: "Settings"
                            }
                        ]}
                        avatarProps={{
                            statusIndicatorType: statusIndicatorType,
                            title
                        }}
                        isWorkWithCoreComplex={isWorkWithCoreComplex}
                        isShowRegisterButton={isShowRegisterButton}
                        isShowLogoutButton={isShowLogoutButton}
                        onLogoutPress={(response, error) => {
                            console.log("Logout pressed", {
                                response,
                                error
                            });
                        }}
                        isShowArrowButton={isShowArrowButton}
                        onRegisterPress={() => {
                            console.log("Register pressed");
                        }}
                        onLoginPress={() => {
                            console.log("Login pressed");
                        }}
                        backgroundColor={backgroundColor}
                        spreadBehaviour={spreadBehaviour}
                        isSessionActive={isSessionActive}
                        onPress={() => {
                            console.log("Card pressed");
                        }}
                        isDisabled={isDisabled}
                        statusText={statusText}
                        subTitle={subTitle}
                        variant={variant}
                        title={title}
                    />
                </NCoreUIKitCoreComplexProvider>
            </View>
            <View
                style={{
                    marginBottom: spaces.spacingXl
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    Controls
                </Text>
                <View
                    style={styles.controlsContainer}
                >
                    <View
                        style={[
                            styles.rowContainer,
                            {
                                gap: spaces.spacingMd
                            }
                        ]}
                    >
                        <SelectBox
                            onChange={(selectedItems) => {
                                if (selectedItems.length > 0) {
                                    const index = Object.keys(STATUS_CHEAT_SHEET).indexOf(selectedItems[0]!.__key as ActivityStatusType);
                                    if (index !== -1) {
                                        setStatusIndicatorTypeIndex(index);
                                    }
                                }
                            }}
                            initialSelectedItems={
                                STATUS_INDICATOR_TYPES_DATA[statusIndicatorTypeIndex]
                                    ? [
                                        STATUS_INDICATOR_TYPES_DATA[statusIndicatorTypeIndex]!
                                    ]
                                    : []
                            }
                            keyExtractor={(item) => item.__key as string}
                            titleExtractor={(item) => item.__title}
                            data={STATUS_INDICATOR_TYPES_DATA}
                            title="Status Indicator"
                            spreadBehaviour="free"
                        />
                        <SelectBox
                            initialSelectedItems={
                                SPREAD_BEHAVIOURS_DATA[spreadBehaviourIndex]
                                    ? [
                                        {
                                            ...SPREAD_BEHAVIOURS_DATA[spreadBehaviourIndex]!,
                                            __key: SPREAD_BEHAVIOURS_DATA[spreadBehaviourIndex]!.__key as NonNullable<IUserShortcutProps["spreadBehaviour"]>
                                        }
                                    ]
                                    : []
                            }
                            onChange={(selectedItems) => {
                                if (selectedItems.length > 0) {
                                    const index = SPREAD_BEHAVIOURS.indexOf(selectedItems[0]!.__key as NonNullable<IUserShortcutProps["spreadBehaviour"]>);
                                    if (index !== -1) setSpreadBehaviourIndex(index);
                                }
                            }}
                            keyExtractor={(item) => item.__key as string}
                            titleExtractor={(item) => item.__title}
                            data={SPREAD_BEHAVIOURS_DATA}
                            title="Spread Behaviour"
                            spreadBehaviour="free"
                        />
                    </View>
                    <View
                        style={[
                            styles.rowContainer,
                            {
                                gap: spaces.spacingMd
                            }
                        ]}
                    >
                        <SelectBox
                            onChange={(selectedItems) => {
                                if (selectedItems.length > 0) {
                                    const index = VARIANT_TYPES.indexOf(selectedItems[0]!.__key as NonNullable<IUserShortcutProps["variant"]>);
                                    if (index !== -1) setVariantIndex(index);
                                }
                            }}
                            initialSelectedItems={
                                VARIANT_TYPES_DATA[variantIndex]
                                    ? [
                                        {
                                            ...VARIANT_TYPES_DATA[variantIndex]!,
                                            __key: VARIANT_TYPES_DATA[variantIndex]!.__key as NonNullable<IUserShortcutProps["variant"]>
                                        }
                                    ]
                                    : []
                            }
                            keyExtractor={(item) => item.__key as string}
                            titleExtractor={(item) => item.__title}
                            data={VARIANT_TYPES_DATA}
                            spreadBehaviour="free"
                            title="Variant"
                        />
                        <SelectBox
                            onChange={(selectedItems) => {
                                if (selectedItems.length > 0) {
                                    setBackgroundColor(selectedItems[0]!.__key as NonNullable<IUserShortcutProps["backgroundColor"]>);
                                }
                            }}
                            initialSelectedItems={
                                BACKGROUND_COLORS_DATA.filter(i => i.__key === backgroundColor).length > 0
                                    ? [
                                        {
                                            ...BACKGROUND_COLORS_DATA.find(i => i.__key === backgroundColor)!,
                                            __key: backgroundColor as string
                                        }
                                    ]
                                    : []
                            }
                            keyExtractor={(item) => item.__key as string}
                            titleExtractor={(item) => item.__title}
                            data={BACKGROUND_COLORS_DATA}
                            title="Background Color"
                            spreadBehaviour="free"
                        />
                    </View>
                    <TextInput
                        spreadBehaviour="stretch"
                        onChangeText={setTitle}
                        title="Title"
                        value={title}
                    />
                    <TextInput
                        onChangeText={setSubTitle}
                        spreadBehaviour="stretch"
                        title="Sub Title"
                        value={subTitle}
                    />
                    <TextInput
                        onChangeText={setStatusText}
                        spreadBehaviour="stretch"
                        title="Status Text"
                        value={statusText}
                    />
                    <View
                        style={[
                            styles.rowContainer,
                            {
                                gap: spaces.spacingMd
                            }
                        ]}
                    >
                        <Switch
                            onPress={() => setIsDisabled(!isDisabled)}
                            spreadBehaviour="baseline"
                            isActive={isDisabled}
                            title="Disabled"
                        />
                        <Switch
                            onPress={() => setIsWorkWithCoreComplex(!isWorkWithCoreComplex)}
                            isActive={isWorkWithCoreComplex}
                            title="isWorkWithCoreComplex"
                            spreadBehaviour="baseline"
                        />
                    </View>
                    <View
                        style={[
                            styles.rowContainer,
                            {
                                gap: spaces.spacingMd
                            }
                        ]}
                    >
                        <Switch
                            onPress={() => setIsShowLogoutButton(!isShowLogoutButton)}
                            isActive={isShowLogoutButton}
                            spreadBehaviour="baseline"
                            title="isShowLogoutButton"
                        />
                        <Switch
                            onPress={() => setIsShowArrowButton(!isShowArrowButton)}
                            isActive={isShowArrowButton}
                            spreadBehaviour="baseline"
                            title="isShowArrowButton"
                        />
                    </View>
                    <View
                        style={[
                            styles.rowContainer,
                            {
                                gap: spaces.spacingMd
                            }
                        ]}
                    >
                        <Switch
                            onPress={() => setIsShowLoginButtonWhenNoSession(!isShowLoginButtonWhenNoSession)}
                            isActive={isShowLoginButtonWhenNoSession}
                            title="isShowLoginButtonWhenNoSession"
                            spreadBehaviour="baseline"
                        />
                        <Switch
                            onPress={() => setIsSessionActive(!isSessionActive)}
                            spreadBehaviour="baseline"
                            isActive={isSessionActive}
                            title="isSessionActive"
                        />
                    </View>
                    <View
                        style={[
                            styles.rowContainer,
                            {
                                gap: spaces.spacingMd
                            }
                        ]}
                    >
                        <Switch
                            onPress={() => setIsShowRegisterButton(!isShowRegisterButton)}
                            isActive={isShowRegisterButton}
                            title="isShowRegisterButton"
                            spreadBehaviour="baseline"
                        />
                    </View>
                </View>
            </View>
            <View
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    Usage
                </Text>
                <CodeViewer
                    code={"import {\n    UserShortcut\n} from \"ncore-ui-kit\";\n\n<UserShortcut\n    avatarProps={{\n        title: \"Murat Enes\",\n        statusIndicatorType: \"online\"\n    }}\n    onPress={() => {\n        // open bottom sheet\n    }}\n    subTitle=\"Product Designer\"\n    statusText=\"Online\"\n    title=\"Murat Enes\"\n/>"}
                    language="tsx"
                />
            </View>
        </View>
    </PageContainer>;
};
export default UserShortcutPage;