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

import {
    useLayoutEffect,
    useState
} from "react";
import {
    StyleSheet,
    View
} from "react-native";
import {
    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 UserShortcutPage = () => {
    const {
        borders,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

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

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

    const [
        statusIndicatorTypeIndex,
        setStatusIndicatorTypeIndex
    ] = useState(0);

    const [
        spreadBehaviourIndex,
        setSpreadBehaviourIndex
    ] = 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");

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

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

    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"
                }}
            >
                <UserShortcut
                    actionButtons={[
                        {
                            onPress: () => console.log("Profile pressed"),
                            title: "Profile"
                        },
                        {
                            onPress: () => console.log("Settings pressed"),
                            title: "Settings"
                        }
                    ]}
                    avatarProps={{
                        statusIndicatorType: statusIndicatorType,
                        title
                    }}
                    onLogoutPress={() => {
                        console.log("Logout pressed");
                    }}
                    spreadBehaviour={spreadBehaviour}
                    backgroundColor={backgroundColor}
                    onPress={() => {
                        console.log("Card pressed");
                    }}
                    isDisabled={isDisabled}
                    statusText={statusText}
                    subTitle={subTitle}
                    title={title}
                />
            </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) {
                                    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"
                        />
                    </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;