Feature: UserShortcut component completed.

example/src/pages/components/avatar/index.tsx

@@ -8,6 +8,7 @@ import {
 import stylesheet from "./stylesheet";
 import {
     NCoreUIKitLocalize,
+    STATUS_CHEAT_SHEET,
     NCoreUIKitTheme,
     PageContainer,
     CodeViewer,
@@ -26,22 +27,16 @@ import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
 import type {
+    ActivityStatusType,
     IAvatarProps
 } from "ncore-ui-kit";
 
 const AVATAR_SIZES: Array<IAvatarProps["size"]> = [
-    "small",
     "medium",
-    "large",
     "xLarge",
-    "xSmall"
-];
-const AVATAR_STATUS_INDICATOR_TYPES: Array<IAvatarProps["statusIndicatorType"]> = [
-    "online",
-    "offline",
-    "busy",
-    "away",
-    "idle"
+    "xSmall",
+    "large",
+    "small"
 ];
 
 const AVATAR_SIZES_DATA = AVATAR_SIZES.map((item) => ({
@@ -49,11 +44,13 @@ const AVATAR_SIZES_DATA = AVATAR_SIZES.map((item) => ({
     __key: item as string
 }));
 
+const AVATAR_STATUS_INDICATOR_TYPES = Object.keys(STATUS_CHEAT_SHEET) as Array<ActivityStatusType>;
+
 const AVATAR_STATUS_INDICATOR_TYPES_DATA = AVATAR_STATUS_INDICATOR_TYPES.map(
     (item) => ({
         __title: item as string,
         __key: item as string
-    }),
+    })
 );
 
 const AvatarPage = () => {
@@ -239,7 +236,7 @@ const AvatarPage = () => {
                             const index =
                                     AVATAR_STATUS_INDICATOR_TYPES.indexOf(
                                         selectedItems[0]!
-                                            .__key as IAvatarProps["statusIndicatorType"],
+                                            .__key as ActivityStatusType,
                                     );
                             if (index !== -1)
                                 setStatusIndicatorIndex(index);

example/src/pages/components/userShortcut/index.tsx

@@ -44,6 +44,16 @@ const SPREAD_BEHAVIOURS_DATA = SPREAD_BEHAVIOURS.map((type) => ({
     __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,
@@ -58,13 +68,18 @@ const UserShortcutPage = () => {
     const [
         statusIndicatorTypeIndex,
         setStatusIndicatorTypeIndex
-    ] = useState(0);
+    ] = useState(Object.keys(STATUS_CHEAT_SHEET).findIndex(e => e === "online"));
 
     const [
         spreadBehaviourIndex,
         setSpreadBehaviourIndex
     ] = useState(0);
 
+    const [
+        variantIndex,
+        setVariantIndex
+    ] = useState(0);
+
     const [
         backgroundColor,
         setBackgroundColor
@@ -139,6 +154,7 @@ const UserShortcutPage = () => {
 
     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: {
@@ -210,8 +226,8 @@ const UserShortcutPage = () => {
                         onLoginPress={() => {
                             console.log("Login pressed");
                         }}
-                        spreadBehaviour={spreadBehaviour}
                         backgroundColor={backgroundColor}
+                        spreadBehaviour={spreadBehaviour}
                         isSessionActive={isSessionActive}
                         onPress={() => {
                             console.log("Card pressed");
@@ -219,6 +235,7 @@ const UserShortcutPage = () => {
                         isDisabled={isDisabled}
                         statusText={statusText}
                         subTitle={subTitle}
+                        variant={variant}
                         title={title}
                     />
                 </NCoreUIKitCoreComplexProvider>
@@ -301,6 +318,29 @@ const UserShortcutPage = () => {
                             }
                         ]}
                     >
+                        <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) {

example/src/pages/coreFeatures/defaultJSONs/index.tsx

@@ -65,12 +65,9 @@ const DefaultJSONs = () => {
     );
 
     const localeCode = JSON.stringify(
-        defaultLocaleJSON.map((localeObj) => {
-            return {
-                ...localeObj,
-                translations: Object.fromEntries(Object.entries(localeObj.translations).slice(0, 3))
-            };
-        }),
+        [
+            defaultLocaleJSON[0]
+        ],
         null,
         4
     );

example/src/pages/home/stylesheet.ts

@@ -1,6 +1,9 @@
 import {
     StyleSheet
 } from "react-native";
+import {
+    webStyle
+} from "ncore-ui-kit";
 
 const stylesheet = StyleSheet.create({
     rowContainer: {
@@ -18,7 +21,10 @@ const stylesheet = StyleSheet.create({
     },
     contentContainer: {
         justifyContent: "center",
-        alignItems: "center"
+        alignItems: "center",
+        ...webStyle({
+            userSelect: "none"
+        })
     },
     previewContainer: {
         justifyContent: "center",

src/components/avatar/stylesheet.ts

@@ -130,7 +130,7 @@ export const useStyles = ({
             width: currentSize.size
         } as Mutable<ImageStyle>,
         statusIndicator: {
-            backgroundColor: colors.content.icon[STATUS_CHEAT_SHEET[statusIndicatorType]],
+            backgroundColor: colors.content.icon[STATUS_CHEAT_SHEET[statusIndicatorType].icon],
             borderColor: colors.content.container[avatarBackgroundColor],
             borderRadius: currentSize.statusIndicatorSize / 2,
             height: currentSize.statusIndicatorSize,

src/components/userShortcut/index.tsx

@@ -40,6 +40,7 @@ const UserShortcut = ({
     isShowArrowButton = true,
     backgroundColor = "mid",
     isSessionActive = true,
+    variant = "default",
     onRegisterPress,
     actionButtons,
     onLogoutPress,
@@ -84,7 +85,7 @@ const UserShortcut = ({
 
     const resolvedStatusColor = statusColor || (
         avatarProps?.statusIndicatorType ?
-            STATUS_CHEAT_SHEET[avatarProps.statusIndicatorType] as keyof NCoreUIKit.TextContentColors
+            STATUS_CHEAT_SHEET[avatarProps.statusIndicatorType].text as keyof NCoreUIKit.TextContentColors
         :
             "success"
     );
@@ -167,7 +168,7 @@ const UserShortcut = ({
     };
 
     const renderContent = () => {
-        if(isNoSession) {
+        if(isNoSession || variant === "compact") {
             return null;
         }
 
@@ -187,6 +188,10 @@ const UserShortcut = ({
     };
 
     const renderAction = () => {
+        if(variant === "compact") {
+            return null;
+        }
+
         if(isNoSession) {
             if(!isShowLoginButtonWhenNoSession && !isShowRegisterButton) {
                 return null;
@@ -378,6 +383,10 @@ const UserShortcut = ({
                 }
 
                 if(onPress) onPress();
+
+                if(variant === "compact" && isShowArrowButton && !isNoSession) {
+                    setIsBottomSheetOpen(!isBottomSheetOpen);
+                }
             }}
             style={[
                 style,
@@ -392,11 +401,14 @@ const UserShortcut = ({
                 <Avatar
                     {...(isNoSession ? {
                         ...avatarProps,
-                        statusIndicatorType: undefined,
+                        isStatusIndicator: false,
                         title: undefined,
                         url: undefined
-                    } : avatarProps)}
-                    size="small"
+                    } : {
+                        ...avatarProps,
+                        isStatusIndicator: avatarProps?.isStatusIndicator ?? !!resolvedStatusText
+                    })}
+                    size="medium"
                 />
                 {renderBadges()}
             </View>

src/components/userShortcut/type.ts

@@ -35,6 +35,7 @@ interface IUserShortcutProps {
     spreadBehaviour?: UserShortcutSpreadBehaviour;
     isShowLoginButtonWhenNoSession?: boolean;
     avatarProps?: Omit<IAvatarProps, "size">;
+    variant?: "default" | "compact";
     isWorkWithCoreComplex?: boolean;
     isShowRegisterButton?: boolean;
     actionButtons?: IButtonProps[];

src/types/index.ts

@@ -277,6 +277,8 @@ declare global {
                 screen: string
             }) => void;
             getState: () => NavigationState;
+            canGoBack: () => boolean;
+            goBack: () => void;
         };
     }
 }

src/utils/index.ts

@@ -13,12 +13,30 @@ const dimensions = Dimensions.get("window");
 export const windowHeight = dimensions.height;
 export const windowWidth = dimensions.width;
 
-export const STATUS_CHEAT_SHEET: Record<ActivityStatusType, keyof NCoreUIKit.IconContentColors> = {
-    "online": "success",
-    "away": "warning",
-    "busy": "danger",
-    "offline": "low",
-    "idle": "info"
+export const STATUS_CHEAT_SHEET: Record<ActivityStatusType, {
+    icon: keyof NCoreUIKit.IconContentColors;
+    text: keyof NCoreUIKit.TextContentColors;
+}> = {
+    "away": {
+        icon: "warning",
+        text: "warning"
+    },
+    "offline": {
+        icon: "default",
+        text: "low"
+    },
+    "online": {
+        icon: "success",
+        text: "success"
+    },
+    "busy": {
+        icon: "danger",
+        text: "danger"
+    },
+    "idle": {
+        icon: "info",
+        text: "info"
+    }
 };
 
 export const webStyle = <T extends AllStyles>(styles: T): ViewStyle => {