@etsoo/toolpad 1.0.30 → 1.0.32

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.
Files changed (6) hide show
  1. package/build/cjs/PageContainer/PageContainer.d.ts +4 -0
  2. package/build/cjs/PageContainer/PageContainer.js +18 -13
  3. package/build/mjs/PageContainer/PageContainer.d.ts +4 -0
  4. package/build/mjs/PageContainer/PageContainer.js +18 -13
  5. package/package.json +1 -1
  6. package/src/PageContainer/PageContainer.tsx +34 -13
package/build/cjs/PageContainer/PageContainer.d.ts CHANGED
@@ -42,6 +42,10 @@ type PageContainerBarProps = {
42
42
  * The props used for each slot inside.
43
43
  */
44
44
  slotProps?: PageContainerSlotProps;
45
+ /**
46
+ * The component that renders the actions toolbar.
47
+ */
48
+ titleBar?: false | ((title: string) => React.ReactNode);
45
49
  };
46
50
  export type PageContainerProps = React.PropsWithChildren<StackProps & PageContainerBarProps>;
47
51
  /**
package/build/cjs/PageContainer/PageContainer.js CHANGED
@@ -88,16 +88,19 @@ function PageDataContextProvider(props) {
88
88
  return (0, jsx_runtime_1.jsx)(exports.PageDataContext.Provider, { value: { state, dispatch }, ...rest });
89
89
  }
90
90
  function PageContainerBar(props) {
91
- const { slots, slotProps } = props;
91
+ const { slots, slotProps, titleBar } = props;
92
92
  const { state } = React.useContext(exports.PageDataContext);
93
+ const stateRef = React.useRef(state);
94
+ if (state !== stateRef.current)
95
+ stateRef.current = state;
93
96
  const activePage = (0, useActivePage_1.useActivePage)();
94
97
  React.useEffect(() => {
95
98
  return () => {
96
99
  // Reset the state when the component unmounts
97
- state.breadcrumbs = undefined;
98
- state.page = undefined;
99
- state.pageHeader = undefined;
100
- state.title = undefined;
100
+ stateRef.current.breadcrumbs = undefined;
101
+ stateRef.current.page = undefined;
102
+ stateRef.current.pageHeader = undefined;
103
+ stateRef.current.title = undefined;
101
104
  };
102
105
  }, [activePage?.sourcePath]);
103
106
  const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar_1.PageContainerToolbar;
@@ -107,19 +110,21 @@ function PageContainerBar(props) {
107
110
  externalSlotProps: slotProps?.toolbar,
108
111
  additionalProps: {}
109
112
  });
110
- const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
111
- const title = state.title ?? activePage?.title ?? "";
112
- const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
113
+ const breadcrumbs = stateRef.current.breadcrumbs ?? activePage?.breadcrumbs ?? [];
114
+ const title = stateRef.current.title ?? activePage?.title ?? "";
115
+ const pageHeader = stateRef.current.pageHeader ?? activePage?.pageHeader ?? null;
116
+ // No page header
113
117
  if (pageHeader === false)
114
118
  return undefined;
119
+ // Custom page header
115
120
  if (pageHeader != null)
116
121
  return pageHeader;
117
- if (state.page) {
118
- breadcrumbs.push({ title: state.page, path: "#" });
122
+ if (stateRef.current.page) {
123
+ breadcrumbs.push({ title: stateRef.current.page, path: "#" });
119
124
  }
120
125
  return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.default, { "aria-label": "breadcrumb", children: breadcrumbs.map((item, index) => {
121
126
  return index < breadcrumbs.length - 1 ? ((0, jsx_runtime_1.jsx)(Link_1.default, { component: Link_2.Link, underline: "hover", color: "inherit", href: item.path, children: (0, navigation_1.getItemTitle)(item) }, item.path)) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.primary", children: (0, navigation_1.getItemTitle)(item) }, item.path));
122
- }) })), (0, jsx_runtime_1.jsxs)(PageContentHeader, { children: [title ? (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h4", children: title }) : null, (0, jsx_runtime_1.jsx)(ToolbarComponent, { ...toolbarSlotProps })] })] }));
127
+ }) })), (0, jsx_runtime_1.jsxs)(PageContentHeader, { children: [typeof titleBar === "function" ? (titleBar(title)) : titleBar === false ? undefined : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h4", children: title })), (0, jsx_runtime_1.jsx)(ToolbarComponent, { ...toolbarSlotProps })] })] }));
123
128
  }
124
129
  /**
125
130
  * A container component to provide a title and breadcrumbs for your pages.
@@ -133,6 +138,6 @@ function PageContainerBar(props) {
133
138
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
134
139
  */
135
140
  function PageContainer(props) {
136
- const { children, slots, slotProps, ...rest } = props;
137
- return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [(0, jsx_runtime_1.jsx)(PageContainerBar, { slots: slots, slotProps: slotProps }), children] }));
141
+ const { children, slots, slotProps, titleBar, ...rest } = props;
142
+ return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [(0, jsx_runtime_1.jsx)(PageContainerBar, { slots: slots, slotProps: slotProps, titleBar: titleBar }), children] }));
138
143
  }
package/build/mjs/PageContainer/PageContainer.d.ts CHANGED
@@ -42,6 +42,10 @@ type PageContainerBarProps = {
42
42
  * The props used for each slot inside.
43
43
  */
44
44
  slotProps?: PageContainerSlotProps;
45
+ /**
46
+ * The component that renders the actions toolbar.
47
+ */
48
+ titleBar?: false | ((title: string) => React.ReactNode);
45
49
  };
46
50
  export type PageContainerProps = React.PropsWithChildren<StackProps & PageContainerBarProps>;
47
51
  /**
package/build/mjs/PageContainer/PageContainer.js CHANGED
@@ -47,16 +47,19 @@ export function PageDataContextProvider(props) {
47
47
  return _jsx(PageDataContext.Provider, { value: { state, dispatch }, ...rest });
48
48
  }
49
49
  function PageContainerBar(props) {
50
- const { slots, slotProps } = props;
50
+ const { slots, slotProps, titleBar } = props;
51
51
  const { state } = React.useContext(PageDataContext);
52
+ const stateRef = React.useRef(state);
53
+ if (state !== stateRef.current)
54
+ stateRef.current = state;
52
55
  const activePage = useActivePage();
53
56
  React.useEffect(() => {
54
57
  return () => {
55
58
  // Reset the state when the component unmounts
56
- state.breadcrumbs = undefined;
57
- state.page = undefined;
58
- state.pageHeader = undefined;
59
- state.title = undefined;
59
+ stateRef.current.breadcrumbs = undefined;
60
+ stateRef.current.page = undefined;
61
+ stateRef.current.pageHeader = undefined;
62
+ stateRef.current.title = undefined;
60
63
  };
61
64
  }, [activePage?.sourcePath]);
62
65
  const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
@@ -66,19 +69,21 @@ function PageContainerBar(props) {
66
69
  externalSlotProps: slotProps?.toolbar,
67
70
  additionalProps: {}
68
71
  });
69
- const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
70
- const title = state.title ?? activePage?.title ?? "";
71
- const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
72
+ const breadcrumbs = stateRef.current.breadcrumbs ?? activePage?.breadcrumbs ?? [];
73
+ const title = stateRef.current.title ?? activePage?.title ?? "";
74
+ const pageHeader = stateRef.current.pageHeader ?? activePage?.pageHeader ?? null;
75
+ // No page header
72
76
  if (pageHeader === false)
73
77
  return undefined;
78
+ // Custom page header
74
79
  if (pageHeader != null)
75
80
  return pageHeader;
76
- if (state.page) {
77
- breadcrumbs.push({ title: state.page, path: "#" });
81
+ if (stateRef.current.page) {
82
+ breadcrumbs.push({ title: stateRef.current.page, path: "#" });
78
83
  }
79
84
  return (_jsxs(Stack, { children: [breadcrumbs && (_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: breadcrumbs.map((item, index) => {
80
85
  return index < breadcrumbs.length - 1 ? (_jsx(Link, { component: ToolpadLink, underline: "hover", color: "inherit", href: item.path, children: getItemTitle(item) }, item.path)) : (_jsx(Typography, { color: "text.primary", children: getItemTitle(item) }, item.path));
81
- }) })), _jsxs(PageContentHeader, { children: [title ? _jsx(Typography, { variant: "h4", children: title }) : null, _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] }));
86
+ }) })), _jsxs(PageContentHeader, { children: [typeof titleBar === "function" ? (titleBar(title)) : titleBar === false ? undefined : (_jsx(Typography, { variant: "h4", children: title })), _jsx(ToolbarComponent, { ...toolbarSlotProps })] })] }));
82
87
  }
83
88
  /**
84
89
  * A container component to provide a title and breadcrumbs for your pages.
@@ -92,7 +97,7 @@ function PageContainerBar(props) {
92
97
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
93
98
  */
94
99
  function PageContainer(props) {
95
- const { children, slots, slotProps, ...rest } = props;
96
- return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [_jsx(PageContainerBar, { slots: slots, slotProps: slotProps }), children] }));
100
+ const { children, slots, slotProps, titleBar, ...rest } = props;
101
+ return (_jsxs(Stack, { sx: { mx: 3, my: 2 }, spacing: 2, ...rest, children: [_jsx(PageContainerBar, { slots: slots, slotProps: slotProps, titleBar: titleBar }), children] }));
97
102
  }
98
103
  export { PageContainer };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/toolpad",
3
- "version": "1.0.30",
3
+ "version": "1.0.32",
4
4
  "author": "ETSOO",
5
5
  "description": "Dashboard framework extention based on Toolpad Core",
6
6
  "main": "build/cjs/index.js",
package/src/PageContainer/PageContainer.tsx CHANGED
@@ -99,26 +99,34 @@ type PageContainerBarProps = {
99
99
  * The components used for each slot inside.
100
100
  */
101
101
  slots?: PageContainerSlots;
102
+
102
103
  /**
103
104
  * The props used for each slot inside.
104
105
  */
105
106
  slotProps?: PageContainerSlotProps;
107
+
108
+ /**
109
+ * The component that renders the actions toolbar.
110
+ */
111
+ titleBar?: false | ((title: string) => React.ReactNode);
106
112
  };
107
113
 
108
114
  function PageContainerBar(props: PageContainerBarProps) {
109
- const { slots, slotProps } = props;
115
+ const { slots, slotProps, titleBar } = props;
110
116
 
111
117
  const { state } = React.useContext(PageDataContext);
118
+ const stateRef = React.useRef(state);
119
+ if (state !== stateRef.current) stateRef.current = state;
112
120
 
113
121
  const activePage = useActivePage();
114
122
 
115
123
  React.useEffect(() => {
116
124
  return () => {
117
125
  // Reset the state when the component unmounts
118
- state.breadcrumbs = undefined;
119
- state.page = undefined;
120
- state.pageHeader = undefined;
121
- state.title = undefined;
126
+ stateRef.current.breadcrumbs = undefined;
127
+ stateRef.current.page = undefined;
128
+ stateRef.current.pageHeader = undefined;
129
+ stateRef.current.title = undefined;
122
130
  };
123
131
  }, [activePage?.sourcePath]);
124
132
 
@@ -130,15 +138,20 @@ function PageContainerBar(props: PageContainerBarProps) {
130
138
  additionalProps: {}
131
139
  });
132
140
 
133
- const breadcrumbs = state.breadcrumbs ?? activePage?.breadcrumbs ?? [];
134
- const title = state.title ?? activePage?.title ?? "";
135
- const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
141
+ const breadcrumbs =
142
+ stateRef.current.breadcrumbs ?? activePage?.breadcrumbs ?? [];
143
+ const title = stateRef.current.title ?? activePage?.title ?? "";
144
+ const pageHeader =
145
+ stateRef.current.pageHeader ?? activePage?.pageHeader ?? null;
136
146
 
147
+ // No page header
137
148
  if (pageHeader === false) return undefined;
149
+
150
+ // Custom page header
138
151
  if (pageHeader != null) return pageHeader;
139
152
 
140
- if (state.page) {
141
- breadcrumbs.push({ title: state.page, path: "#" });
153
+ if (stateRef.current.page) {
154
+ breadcrumbs.push({ title: stateRef.current.page, path: "#" });
142
155
  }
143
156
 
144
157
  return (
@@ -165,7 +178,11 @@ function PageContainerBar(props: PageContainerBarProps) {
165
178
  </Breadcrumbs>
166
179
  )}
167
180
  <PageContentHeader>
168
- {title ? <Typography variant="h4">{title}</Typography> : null}
181
+ {typeof titleBar === "function" ? (
182
+ titleBar(title)
183
+ ) : titleBar === false ? undefined : (
184
+ <Typography variant="h4">{title}</Typography>
185
+ )}
169
186
  <ToolbarComponent {...toolbarSlotProps} />
170
187
  </PageContentHeader>
171
188
  </Stack>
@@ -188,11 +205,15 @@ export type PageContainerProps = React.PropsWithChildren<
188
205
  * - [PageContainer API](https://mui.com/toolpad/core/api/page-container)
189
206
  */
190
207
  function PageContainer(props: PageContainerProps) {
191
- const { children, slots, slotProps, ...rest } = props;
208
+ const { children, slots, slotProps, titleBar, ...rest } = props;
192
209
 
193
210
  return (
194
211
  <Stack sx={{ mx: 3, my: 2 }} spacing={2} {...rest}>
195
- <PageContainerBar slots={slots} slotProps={slotProps} />
212
+ <PageContainerBar
213
+ slots={slots}
214
+ slotProps={slotProps}
215
+ titleBar={titleBar}
216
+ />
196
217
  {children}
197
218
  </Stack>
198
219
  );