import {
useEffect
} from "react";
import {
Platform,
View
} from "react-native";
import type RootStackParamList from "./type";
import stylesheet from "./stylesheet";
import {
NCoreUIKitEmbeddedMenu,
NCoreUIKitLocalize,
NCoreUIKitTheme,
PaletteSwitcher,
LocaleSwitcher,
ThemeSwitcher,
MainHeader
} from "ncore-ui-kit";
import {
NavigationContainer,
type LinkingOptions,
getStateFromPath,
useNavigation
} from "@react-navigation/native";
import TypesOverridePage from "../pages/coreFeatures/typesOverride";
import {
type NativeStackNavigationProp,
createNativeStackNavigator
} from "@react-navigation/native-stack";
import {
ComponentIcon,
SettingsIcon,
GoalIcon,
HomeIcon
} from "lucide-react-native";
import NotificationIndicatorPage from "../pages/components/notificationIndicator";
import HighlightButtonPage from "../pages/components/highlightButton";
import PaletteSwitcherPage from "../pages/components/paletteSwitcher";
import LocaleExamplesPage from "../pages/coreFeatures/localeExamples";
import DateTimePickerPage from "../pages/components/dateTimePicker";
import LocaleSwitcherPage from "../pages/components/localeSwitcher";
import MarkdownEditorPage from "../pages/components/markdownEditor";
import MarkdownViewerPage from "../pages/components/markdownViewer";
import ThemeExamplesPage from "../pages/coreFeatures/themeExamples";
import DateTimeSheetPage from "../pages/components/dateTimeSheet";
import MonthSelectorPage from "../pages/components/monthSelector";
import PageContainerPage from "../pages/components/pageContainer";
import SystemToolbarPage from "../pages/components/systemToolbar";
import TextAreaInputPage from "../pages/components/textAreaInput";
import ThemeSwitcherPage from "../pages/components/themeSwitcher";
import DefaultJSONsPage from "../pages/coreFeatures/defaultJSONs";
import DateSelectorPage from "../pages/components/dateSelector";
import EmbeddedMenuPage from "../pages/components/embeddedMenu";
import NumericInputPage from "../pages/components/numericInput";
import TimeSelectorPage from "../pages/components/timeSelector";
import WebScrollbarPage from "../pages/components/webScrollbar";
import YearSelectorPage from "../pages/components/yearSelector";
import AvatarGroupPage from "../pages/components/avatarGroup";
import BottomSheetPage from "../pages/components/bottomSheet";
import RadioButtonPage from "../pages/components/radioButton";
import SelectSheetPage from "../pages/components/selectSheet";
import ToolsUsagePage from "../pages/coreFeatures/toolsUsage";
import CodeEditorPage from "../pages/components/codeEditor";
import CodeViewerPage from "../pages/components/codeViewer";
import MainHeaderPage from "../pages/components/mainHeader";
import SelectBoxPage from "../pages/components/selectBox";
import SeperatorPage from "../pages/components/seperator";
import StateCardPage from "../pages/components/stateCard";
import TextInputPage from "../pages/components/textInput";
import ImplementationPage from "../pages/implementation";
import CheckBoxPage from "../pages/components/checkBox";
import SiteLogoPage from "../pages/components/siteLogo";
import SnackBarPage from "../pages/components/snackBar";
import LoadingPage from "../pages/components/loading";
import RowCardPage from "../pages/components/rowCard";
import StickerPage from "../pages/components/sticker";
import TooltipPage from "../pages/components/tooltip";
import InstallationPage from "../pages/installation";
import AvatarPage from "../pages/components/avatar";
import ButtonPage from "../pages/components/button";
import DialogPage from "../pages/components/dialog";
import HeaderPage from "../pages/components/header";
import SwitchPage from "../pages/components/switch";
import ModalPage from "../pages/components/modal";
import ToastPage from "../pages/components/toast";
import ChipPage from "../pages/components/chip";
import MenuPage from "../pages/components/menu";
import TextPage from "../pages/components/text";
import Home from "../pages/home";
const RootStack = createNativeStackNavigator();
const ComponentsStack = createNativeStackNavigator();
const GettingStartedStack = createNativeStackNavigator();
const CoreFeaturesStack = createNativeStackNavigator();
const CoreFeaturesNav = () => {
return
;
};
const GettingStartedNav = () => {
return
;
};
const ComponentsNav = () => {
return
;
};
const RenderHomeIcon = ({
color
}: {
color: keyof NCoreUIKit.IconContentColors;
}) => {
const {
colors
} = NCoreUIKitTheme.useContext();
return ;
};
const RenderComponentIcon = ({
color
}: {
color: keyof NCoreUIKit.IconContentColors;
}) => {
const {
colors
} = NCoreUIKitTheme.useContext();
return ;
};
const RenderGettingStartedIcon = ({
color
}: {
color: keyof NCoreUIKit.IconContentColors;
}) => {
const {
colors
} = NCoreUIKitTheme.useContext();
return ;
};
const RenderCoreFeaturesIcon = ({
color
}: {
color: keyof NCoreUIKit.IconContentColors;
}) => {
const {
colors
} = NCoreUIKitTheme.useContext();
return ;
};
const RootNav = () => {
const {
activeTheme,
spaces
} = NCoreUIKitTheme.useContext();
const {
localize
} = NCoreUIKitLocalize.useContext();
const navigation = useNavigation>();
useEffect(() => {
const currentMenuStatus = Platform.OS === "web" ? window.localStorage.getItem("main-menu-status") : "false";
NCoreUIKitEmbeddedMenu.load({
isCollapse: currentMenuStatus === "true" ? true : false,
buttons: [
{
icon: ({
color
}) => ,
redirectMain: "Home",
isUseLocalize: true,
title: "home"
},
{
subButtons: [
{
redirectMain: "GettingStarted",
redirectSub: "Installation",
title: "installation",
isUseLocalize: true
},
{
redirectMain: "GettingStarted",
redirectSub: "Implementation",
title: "implementation",
isUseLocalize: true
}
],
icon: ({
color
}) => ,
redirectMain: "GettingStarted",
title: "gettingStarted",
isCollapsible: true,
isUseLocalize: true
},
{
subButtons: [
{
redirectMain: "CoreFeatures",
redirectSub: "ToolsUsage",
title: "toolsUsage",
isUseLocalize: true
},
{
redirectMain: "CoreFeatures",
redirectSub: "ThemeExamples",
title: "themeExamples",
isUseLocalize: true
},
{
redirectSub: "LocaleExamples",
redirectMain: "CoreFeatures",
title: "localeExamples",
isUseLocalize: true
},
{
redirectMain: "CoreFeatures",
redirectSub: "TypesOverride",
title: "typesOverride",
isUseLocalize: true
},
{
redirectMain: "CoreFeatures",
redirectSub: "DefaultJSONs",
title: "defaultJSONs",
isUseLocalize: true
}
],
icon: ({
color
}) => ,
redirectMain: "CoreFeatures",
title: "coreFeatures",
isCollapsible: true,
isUseLocalize: true
},
{
subButtons: [
{
redirectMain: "Components",
redirectSub: "Text",
title: "Text"
},
{
redirectMain: "Components",
redirectSub: "Button",
title: "Button"
},
{
redirectSub: "HighlightButton",
redirectMain: "Components",
title: "HighlightButton"
},
{
redirectMain: "Components",
redirectSub: "TextInput",
title: "TextInput"
},
{
redirectSub: "TextAreaInput",
redirectMain: "Components",
title: "TextAreaInput"
},
{
redirectSub: "NumericInput",
redirectMain: "Components",
title: "NumericInput"
},
{
redirectMain: "Components",
redirectSub: "SelectBox",
title: "SelectBox"
},
{
redirectMain: "Components",
redirectSub: "SelectSheet",
title: "SelectSheet"
},
{
redirectMain: "Components",
redirectSub: "CheckBox",
title: "CheckBox"
},
{
redirectMain: "Components",
redirectSub: "RadioButton",
title: "RadioButton"
},
{
redirectMain: "Components",
redirectSub: "Switch",
title: "Switch"
},
{
redirectSub: "DateTimePicker",
redirectMain: "Components",
title: "DateTimePicker"
},
{
redirectSub: "DateTimeSheet",
redirectMain: "Components",
title: "DateTimeSheet"
},
{
redirectSub: "DateSelector",
redirectMain: "Components",
title: "DateSelector"
},
{
redirectSub: "TimeSelector",
redirectMain: "Components",
title: "TimeSelector"
},
{
redirectSub: "MonthSelector",
redirectMain: "Components",
title: "MonthSelector"
},
{
redirectSub: "YearSelector",
redirectMain: "Components",
title: "YearSelector"
},
{
redirectMain: "Components",
redirectSub: "Avatar",
title: "Avatar"
},
{
redirectMain: "Components",
redirectSub: "AvatarGroup",
title: "AvatarGroup"
},
{
redirectMain: "Components",
redirectSub: "CodeViewer",
title: "CodeViewer"
},
{
redirectMain: "Components",
redirectSub: "CodeEditor",
title: "CodeEditor",
isUseLocalize: true
},
{
redirectSub: "SystemToolbar",
redirectMain: "Components",
title: "SystemToolbar",
isUseLocalize: true
},
{
redirectMain: "Components",
redirectSub: "Chip",
title: "Chip"
},
{
redirectMain: "Components",
redirectSub: "Sticker",
title: "Sticker"
},
{
redirectMain: "Components",
redirectSub: "RowCard",
title: "RowCard"
},
{
redirectMain: "Components",
redirectSub: "StateCard",
title: "StateCard"
},
{
redirectMain: "Components",
redirectSub: "Dialog",
title: "Dialog"
},
{
redirectMain: "Components",
redirectSub: "Modal",
title: "Modal"
},
{
redirectMain: "Components",
redirectSub: "BottomSheet",
title: "BottomSheet"
},
{
redirectMain: "Components",
redirectSub: "SnackBar",
title: "SnackBar"
},
{
redirectMain: "Components",
redirectSub: "Toast",
title: "Toast"
},
{
redirectMain: "Components",
redirectSub: "Tooltip",
title: "Tooltip"
},
{
redirectMain: "Components",
redirectSub: "Loading",
title: "Loading"
},
{
redirectSub: "NotificationIndicator",
title: "NotificationIndicator",
redirectMain: "Components"
},
{
redirectSub: "MarkdownViewer",
redirectMain: "Components",
title: "MarkdownViewer"
},
{
redirectSub: "MarkdownEditor",
redirectMain: "Components",
title: "MarkdownEditor"
},
{
redirectMain: "Components",
redirectSub: "Seperator",
title: "Seperator"
},
{
redirectMain: "Components",
redirectSub: "SiteLogo",
title: "SiteLogo"
},
{
redirectSub: "WebScrollbar",
redirectMain: "Components",
title: "WebScrollbar"
},
{
redirectSub: "PageContainer",
redirectMain: "Components",
title: "PageContainer"
},
{
redirectMain: "Components",
redirectSub: "Header",
title: "Header"
},
{
redirectMain: "Components",
redirectSub: "MainHeader",
title: "MainHeader"
},
{
redirectMain: "Components",
redirectSub: "Menu",
title: "Menu"
},
{
redirectSub: "EmbeddedMenu",
redirectMain: "Components",
title: "EmbeddedMenu"
},
{
redirectSub: "ThemeSwitcher",
redirectMain: "Components",
title: "ThemeSwitcher"
},
{
redirectSub: "PaletteSwitcher",
redirectMain: "Components",
title: "PaletteSwitcher"
},
{
redirectSub: "LocaleSwitcher",
redirectMain: "Components",
title: "LocaleSwitcher"
}
],
redirectMain: "Components",
icon: ({
color
}) => ,
isCollapsible: true,
isUseLocalize: true,
title: "components"
}
],
isWorkWithSafeAreaView: false,
siteLogoProps: {
title: localize("menu"),
isShowIcon: false
},
isAutoClosed: true,
id: "main-menu"
});
NCoreUIKitLocalize.addEventListener("state", updateLocaleStorage);
NCoreUIKitEmbeddedMenu.addEventListener("state", updateStorage);
NCoreUIKitTheme.addEventListener("state", updateThemeStorage);
}, []);
const updateStorage = () => {
if(Platform.OS === "web") {
const data = NCoreUIKitEmbeddedMenu.state.data;
if(data && data.length) {
const currentMenu = data.find(dI => dI.id === "main-menu");
if(currentMenu) {
window.localStorage.setItem("main-menu-status", String(currentMenu.isCollapse));
}
}
}
};
const updateLocaleStorage = () => {
if(Platform.OS === "web") {
const localeData = NCoreUIKitLocalize.state;
if(localeData) {
window.localStorage.setItem("locale", JSON.stringify(localeData));
}
}
};
const updateThemeStorage = () => {
if(Platform.OS === "web") {
const themeData = NCoreUIKitTheme.state;
if(themeData) {
window.localStorage.setItem("theme", JSON.stringify(themeData));
}
}
};
return {
navigation.navigate("Home");
},
imageProps: {
resizeMode: "stretch"
},
title: "NİBGAT® | NCore",
isWorkWithAction: true,
isWorkWithFlex1: true
}}
renderRight={() => {
return
;
}}
isWorkWithSeperator={true}
isWorkWithSticky={true}
glassEffect={5}
>
;
};
const Navigation = () => {
return `${options?.title ?? route?.name ?? "Home"} || NCore - Design System | UI Kit`
}}
linking={{
config: {
screens: {
Components: {
screens: {
NotificationIndicator: "notificationindicator",
HighlightButton: "highlightbutton",
PaletteSwitcher: "paletteswitcher",
DateTimePicker: "datetimepicker",
LocaleSwitcher: "localeswitcher",
MarkdownEditor: "markdowneditor",
MarkdownViewer: "markdownviewer",
DateTimeSheet: "datetimesheet",
MonthSelector: "monthselector",
PageContainer: "pagecontainer",
SystemToolbar: "systemtoolber",
TextAreaInput: "textareainput",
ThemeSwitcher: "themeswitcher",
DateSelector: "dateselector",
EmbeddedMenu: "embeddedmenu",
NumericInput: "numericinput",
TimeSelector: "timeselector",
WebScrollbar: "webscrollbar",
YearSelector: "yearselector",
AvatarGroup: "avatargroup",
BottomSheet: "bottomsheet",
RadioButton: "radiobutton",
SelectSheet: "selectsheet",
CodeEditor: "codeeditor",
CodeViewer: "codeviewer",
MainHeader: "mainheader",
SelectBox: "selectbox",
Seperator: "seperator",
StateCard: "statecard",
TextInput: "textinput",
CheckBox: "checkbox",
SiteLogo: "sitelogo",
SnackBar: "snackbar",
Loading: "loading",
RowCard: "rowcard",
Sticker: "sticker",
Tooltip: "tooltip",
Avatar: "avatar",
Button: "button",
Dialog: "dialog",
Header: "header",
Switch: "switch",
Modal: "modal",
Toast: "toast",
Chip: "chip",
Menu: "menu",
Text: "text"
},
path: "components"
},
CoreFeatures: {
screens: {
LocaleExamples: "localeexamples",
ThemeExamples: "themeexamples",
TypesOverride: "typesoverride",
DefaultJSONs: "defaultjsons",
ToolsUsage: "toolsusage"
},
path: "corefeatures"
},
GettingStarted: {
screens: {
Implementation: "implementation",
Installation: "installation"
},
path: "gettingstarted"
},
Home: "home"
}
},
getStateFromPath: (path, options) => {
return getStateFromPath(path.toLowerCase(), options);
},
prefixes: [
"http://localhost:3000",
"https://ncore.nibgat.space"
]
} as LinkingOptions}
>
;
};
export default Navigation;