option to customize navigation names as per the component props
This commit is contained in:
@@ -67,6 +67,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
|
|||||||
type ViewComponentEntry<P> = {
|
type ViewComponentEntry<P> = {
|
||||||
component: React.ComponentType<P>;
|
component: React.ComponentType<P>;
|
||||||
extraProps?: (ctx: RouterContext) => Partial<P>;
|
extraProps?: (ctx: RouterContext) => Partial<P>;
|
||||||
|
navigationMap?: Record<string, string>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const VIEW_COMPONENTS: Record<View, ViewComponentEntry<any>> = {
|
const VIEW_COMPONENTS: Record<View, ViewComponentEntry<any>> = {
|
||||||
@@ -76,6 +77,9 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
|
|||||||
|
|
||||||
login: {
|
login: {
|
||||||
component: Login,
|
component: Login,
|
||||||
|
navigationMap: {
|
||||||
|
open_register: 'onRegister',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
register: {
|
register: {
|
||||||
@@ -88,6 +92,9 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
|
|||||||
|
|
||||||
article: {
|
article: {
|
||||||
component: ArticleView,
|
component: ArticleView,
|
||||||
|
navigationMap: {
|
||||||
|
open_editor: 'onEdit',
|
||||||
|
},
|
||||||
extraProps: ({ ui, articles }) => ({
|
extraProps: ({ ui, articles }) => ({
|
||||||
article: articles[ui.selectedArticle!],
|
article: articles[ui.selectedArticle!],
|
||||||
}) satisfies Partial<ArticleViewProps>,
|
}) satisfies Partial<ArticleViewProps>,
|
||||||
@@ -110,9 +117,13 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
|
|||||||
|
|
||||||
const renderView = () => {
|
const renderView = () => {
|
||||||
const entry = VIEW_COMPONENTS[ui.view];
|
const entry = VIEW_COMPONENTS[ui.view];
|
||||||
|
const navigationMap= entry['navigationMap'] || {}
|
||||||
const ViewComponent = entry.component;
|
const ViewComponent = entry.component;
|
||||||
|
|
||||||
const childNav = navigateToChildren(ui.view);
|
const childNav = navigateToChildren(
|
||||||
|
ui.view,
|
||||||
|
navigationMap
|
||||||
|
);
|
||||||
|
|
||||||
const ctx: RouterContext = {
|
const ctx: RouterContext = {
|
||||||
ui,
|
ui,
|
||||||
|
|||||||
@@ -28,11 +28,10 @@ const CoverImage = styled('img')({
|
|||||||
export default function ArticleView({
|
export default function ArticleView({
|
||||||
article,
|
article,
|
||||||
onBack,
|
onBack,
|
||||||
open_editor,
|
onEdit,
|
||||||
}: ArticleViewProps) {
|
}: ArticleViewProps) {
|
||||||
|
|
||||||
const { currentUser } = useAuth();
|
const { currentUser } = useAuth();
|
||||||
const onEdit = open_editor;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ArticleContainer>
|
<ArticleContainer>
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ export interface RegisterProps {
|
|||||||
export interface ArticleViewProps {
|
export interface ArticleViewProps {
|
||||||
article: ArticleModel;
|
article: ArticleModel;
|
||||||
onBack: () => void;
|
onBack: () => void;
|
||||||
open_editor: () => void;
|
onEdit: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ArticleEditorProps {
|
export interface ArticleEditorProps {
|
||||||
|
|||||||
@@ -57,12 +57,18 @@ export function useViewRouter(setUI: any) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// auto child navigators from children[]
|
// auto child navigators from children[]
|
||||||
const navigateToChildren = (view: View) => {
|
const navigateToChildren = (
|
||||||
|
view: View,
|
||||||
|
navigationMap?: Record<string, string>,
|
||||||
|
) => {
|
||||||
const node = VIEW_TREE[view];
|
const node = VIEW_TREE[view];
|
||||||
const funcs: Record<string, () => void> = {};
|
const funcs: Record<string, () => void> = {};
|
||||||
|
|
||||||
node.children?.forEach((child) => {
|
node.children?.forEach((child) => {
|
||||||
funcs[`open_${child}`] = () => navigate(child);
|
const funcName = `open_${child}`;
|
||||||
|
const customFuncName = navigationMap?.[funcName];
|
||||||
|
funcs[funcName] = () => navigate(child);
|
||||||
|
if (customFuncName) funcs[customFuncName] = () => navigate(child);
|
||||||
});
|
});
|
||||||
|
|
||||||
return funcs;
|
return funcs;
|
||||||
|
|||||||
Reference in New Issue
Block a user