@firecms/core 3.0.0-canary.61 → 3.0.0-canary.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/index.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from "./core";
2
+ export * from "./app";
2
3
  export * from "./types";
3
4
  export * from "./form";
4
5
  export * from "./preview";
@@ -1,16 +0,0 @@
1
- /**
2
- * Props used in case you need to override the default drawer
3
- * @group Core
4
- */
5
- export type DrawerProps = {
6
- hovered: boolean;
7
- drawerOpen: boolean;
8
- openDrawer: () => void;
9
- closeDrawer: () => void;
10
- autoOpenDrawer?: boolean;
11
- };
12
- /**
13
- * Default drawer used in the CMS
14
- * @group Core
15
- */
16
- export declare function Drawer(): import("react/jsx-runtime").JSX.Element;
@@ -1,51 +0,0 @@
1
- import React from "react";
2
- import { DrawerProps } from "./Drawer";
3
- import { FireCMSAppBarProps } from "../components";
4
- export declare const DRAWER_WIDTH = 280;
5
- export declare function useDrawer(): DrawerProps;
6
- /**
7
- * @group Core
8
- */
9
- export interface ScaffoldProps<ExtraAppbarProps = object> {
10
- /**
11
- * Name of the app, displayed as the main title and in the tab title
12
- */
13
- name?: React.ReactNode;
14
- /**
15
- * Logo to be displayed in the drawer of the CMS
16
- */
17
- logo?: string;
18
- /**
19
- * Whether to include the drawer in the scaffold
20
- */
21
- includeDrawer?: boolean;
22
- /**
23
- * You can define a custom drawer to be displayed in the scaffold.
24
- * Use the hook `useDrawer` to access the context values.
25
- */
26
- drawer?: React.ReactNode;
27
- /**
28
- * Open the drawer on hover
29
- */
30
- autoOpenDrawer?: boolean;
31
- /**
32
- * The AppBar component to be used in the scaffold.
33
- */
34
- FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
35
- /**
36
- * Additional props passed to the custom AppBar
37
- */
38
- fireCMSAppBarProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
39
- }
40
- /**
41
- * This view acts as a scaffold for FireCMS.
42
- *
43
- * It is in charge of displaying the navigation drawer, top bar and main
44
- * collection views.
45
- * This component needs a parent {@link FireCMS}
46
- *
47
- * @param props
48
- * @constructor
49
- * @group Core
50
- */
51
- export declare const Scaffold: React.NamedExoticComponent<React.PropsWithChildren<ScaffoldProps<object>>>;
@@ -1,139 +0,0 @@
1
- import React, { useCallback } from "react";
2
-
3
- import { useLargeLayout, useNavigationController } from "../hooks";
4
-
5
- import { useNavigate } from "react-router-dom";
6
- import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
7
- import { IconForView } from "../util";
8
- import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
9
- import { useAnalyticsController } from "../hooks/useAnalyticsController";
10
- import { useDrawer } from "./Scaffold";
11
- import { DrawerNavigationItem } from "./DrawerNavigationItem";
12
-
13
- /**
14
- * Props used in case you need to override the default drawer
15
- * @group Core
16
- */
17
- export type DrawerProps = {
18
- hovered: boolean,
19
- drawerOpen: boolean,
20
- openDrawer: () => void,
21
- closeDrawer: () => void,
22
- autoOpenDrawer?: boolean
23
- }
24
-
25
- /**
26
- * Default drawer used in the CMS
27
- * @group Core
28
- */
29
- export function Drawer() {
30
-
31
- const {
32
- hovered,
33
- drawerOpen,
34
- closeDrawer,
35
- } = useDrawer();
36
-
37
- const analyticsController = useAnalyticsController();
38
- const navigation = useNavigationController();
39
-
40
- const tooltipsOpen = hovered && !drawerOpen;
41
- const largeLayout = useLargeLayout();
42
- const navigate = useNavigate();
43
-
44
- const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
45
-
46
- if (!navigation.topLevelNavigation)
47
- throw Error("Navigation not ready in Drawer");
48
-
49
- const {
50
- navigationEntries,
51
- groups
52
- }: TopNavigationResult = navigation.topLevelNavigation;
53
-
54
- const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
55
- const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
56
-
57
- const buildGroupHeader = useCallback((group?: string) => {
58
- if (!drawerOpen) return <div className="h-12 w-full"/>;
59
- return <div
60
- className="pt-8 pl-6 pr-8 pb-2 flex flex-row items-center">
61
- <Typography variant={"caption"}
62
- color={"secondary"}
63
- className="font-medium flex-grow line-clamp-1">
64
- {group ? group.toUpperCase() : "Views".toUpperCase()}
65
- </Typography>
66
-
67
- </div>;
68
- }, [drawerOpen]);
69
-
70
- const onClick = (view: TopNavigationEntry) => {
71
- const eventName: CMSAnalyticsEvent = view.type === "collection"
72
- ? "drawer_navigate_to_collection"
73
- : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
74
- analyticsController.onAnalyticsEvent?.(eventName, { url: view.url });
75
- if (!largeLayout)
76
- closeDrawer();
77
- };
78
-
79
- return (
80
- <>
81
-
82
- <div className={"flex-grow overflow-scroll no-scrollbar"}>
83
-
84
- {groupsWithoutAdmin.map((group) => (
85
- <React.Fragment
86
- key={`drawer_group_${group}`}>
87
- {buildGroupHeader(group)}
88
- {Object.values(navigationEntries)
89
- .filter(e => e.group === group)
90
- .map((view, index) =>
91
- <DrawerNavigationItem
92
- key={`navigation_${index}`}
93
- icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
94
- tooltipsOpen={tooltipsOpen}
95
- drawerOpen={drawerOpen}
96
- onClick={() => onClick(view)}
97
- url={view.url}
98
- name={view.name}/>)}
99
- </React.Fragment>
100
- ))}
101
-
102
- </div>
103
-
104
- {adminViews.length > 0 && <Menu
105
- open={adminMenuOpen}
106
- onOpenChange={setAdminMenuOpen}
107
- trigger={
108
- <IconButton
109
- shape={"square"}
110
- className={"m-4 text-gray-900 dark:text-white w-fit"}>
111
- <Tooltip title={"Admin"}
112
- open={tooltipsOpen}
113
- side={"right"} sideOffset={28}>
114
- <MoreVertIcon/>
115
- </Tooltip>
116
- {drawerOpen && <div
117
- className={cls(
118
- drawerOpen ? "opacity-100" : "opacity-0 hidden",
119
- "mx-4 font-inherit text-inherit"
120
- )}>
121
- ADMIN
122
- </div>}
123
- </IconButton>}
124
- >
125
- {adminViews.map((entry, index) =>
126
- <MenuItem
127
- onClick={(event) => {
128
- event.preventDefault();
129
- navigate(entry.path);
130
- }}
131
- key={`navigation_${index}`}>
132
- {<IconForView collectionOrView={entry.view}/>}
133
- {entry.name}
134
- </MenuItem>)}
135
-
136
- </Menu>}
137
- </>
138
- );
139
- }