@etsoo/toolpad 1.0.32 → 1.0.34

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 (4) hide show
  1. package/build/cjs/PageContainer/PageContainer.js +10 -13
  2. package/build/mjs/PageContainer/PageContainer.js +10 -13
  3. package/package.json +1 -1
  4. package/src/PageContainer/PageContainer.tsx +12 -14
package/build/cjs/PageContainer/PageContainer.js CHANGED
@@ -89,20 +89,16 @@ function PageDataContextProvider(props) {
89
89
  }
90
90
  function PageContainerBar(props) {
91
91
  const { slots, slotProps, titleBar } = props;
92
- const { state } = React.useContext(exports.PageDataContext);
93
- const stateRef = React.useRef(state);
94
- if (state !== stateRef.current)
95
- stateRef.current = state;
92
+ const { state, dispatch } = React.useContext(exports.PageDataContext);
96
93
  const activePage = (0, useActivePage_1.useActivePage)();
97
94
  React.useEffect(() => {
98
95
  return () => {
99
96
  // Reset the state when the component unmounts
100
- stateRef.current.breadcrumbs = undefined;
101
- stateRef.current.page = undefined;
102
- stateRef.current.pageHeader = undefined;
103
- stateRef.current.title = undefined;
97
+ dispatch({});
98
+ console.log("PageContainerBar unmounted", activePage?.sourcePath);
104
99
  };
105
100
  }, [activePage?.sourcePath]);
101
+ console.log("PageContainerBar", activePage?.sourcePath, state);
106
102
  const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar_1.PageContainerToolbar;
107
103
  const toolbarSlotProps = (0, useSlotProps_1.default)({
108
104
  elementType: ToolbarComponent,
@@ -110,17 +106,18 @@ function PageContainerBar(props) {
110
106
  externalSlotProps: slotProps?.toolbar,
111
107
  additionalProps: {}
112
108
  });
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;
109
+ const breadcrumbs = [...(state.breadcrumbs ?? activePage?.breadcrumbs ?? [])];
110
+ const title = state.title ?? activePage?.title ?? "";
111
+ const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
112
+ console.log("PageContainerBar", activePage?.sourcePath, title, breadcrumbs);
116
113
  // No page header
117
114
  if (pageHeader === false)
118
115
  return undefined;
119
116
  // Custom page header
120
117
  if (pageHeader != null)
121
118
  return pageHeader;
122
- if (stateRef.current.page) {
123
- breadcrumbs.push({ title: stateRef.current.page, path: "#" });
119
+ if (state.page) {
120
+ breadcrumbs.push({ title: state.page, path: "#" });
124
121
  }
125
122
  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) => {
126
123
  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));
package/build/mjs/PageContainer/PageContainer.js CHANGED
@@ -48,20 +48,16 @@ export function PageDataContextProvider(props) {
48
48
  }
49
49
  function PageContainerBar(props) {
50
50
  const { slots, slotProps, titleBar } = props;
51
- const { state } = React.useContext(PageDataContext);
52
- const stateRef = React.useRef(state);
53
- if (state !== stateRef.current)
54
- stateRef.current = state;
51
+ const { state, dispatch } = React.useContext(PageDataContext);
55
52
  const activePage = useActivePage();
56
53
  React.useEffect(() => {
57
54
  return () => {
58
55
  // Reset the state when the component unmounts
59
- stateRef.current.breadcrumbs = undefined;
60
- stateRef.current.page = undefined;
61
- stateRef.current.pageHeader = undefined;
62
- stateRef.current.title = undefined;
56
+ dispatch({});
57
+ console.log("PageContainerBar unmounted", activePage?.sourcePath);
63
58
  };
64
59
  }, [activePage?.sourcePath]);
60
+ console.log("PageContainerBar", activePage?.sourcePath, state);
65
61
  const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
66
62
  const toolbarSlotProps = useSlotProps({
67
63
  elementType: ToolbarComponent,
@@ -69,17 +65,18 @@ function PageContainerBar(props) {
69
65
  externalSlotProps: slotProps?.toolbar,
70
66
  additionalProps: {}
71
67
  });
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;
68
+ const breadcrumbs = [...(state.breadcrumbs ?? activePage?.breadcrumbs ?? [])];
69
+ const title = state.title ?? activePage?.title ?? "";
70
+ const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
71
+ console.log("PageContainerBar", activePage?.sourcePath, title, breadcrumbs);
75
72
  // No page header
76
73
  if (pageHeader === false)
77
74
  return undefined;
78
75
  // Custom page header
79
76
  if (pageHeader != null)
80
77
  return pageHeader;
81
- if (stateRef.current.page) {
82
- breadcrumbs.push({ title: stateRef.current.page, path: "#" });
78
+ if (state.page) {
79
+ breadcrumbs.push({ title: state.page, path: "#" });
83
80
  }
84
81
  return (_jsxs(Stack, { children: [breadcrumbs && (_jsx(Breadcrumbs, { "aria-label": "breadcrumb", children: breadcrumbs.map((item, index) => {
85
82
  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));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/toolpad",
3
- "version": "1.0.32",
3
+ "version": "1.0.34",
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
@@ -114,22 +114,20 @@ type PageContainerBarProps = {
114
114
  function PageContainerBar(props: PageContainerBarProps) {
115
115
  const { slots, slotProps, titleBar } = props;
116
116
 
117
- const { state } = React.useContext(PageDataContext);
118
- const stateRef = React.useRef(state);
119
- if (state !== stateRef.current) stateRef.current = state;
117
+ const { state, dispatch } = React.useContext(PageDataContext);
120
118
 
121
119
  const activePage = useActivePage();
122
120
 
123
121
  React.useEffect(() => {
124
122
  return () => {
125
123
  // Reset the state when the component unmounts
126
- stateRef.current.breadcrumbs = undefined;
127
- stateRef.current.page = undefined;
128
- stateRef.current.pageHeader = undefined;
129
- stateRef.current.title = undefined;
124
+ dispatch({});
125
+ console.log("PageContainerBar unmounted", activePage?.sourcePath);
130
126
  };
131
127
  }, [activePage?.sourcePath]);
132
128
 
129
+ console.log("PageContainerBar", activePage?.sourcePath, state);
130
+
133
131
  const ToolbarComponent = slots?.toolbar ?? PageContainerToolbar;
134
132
  const toolbarSlotProps = useSlotProps({
135
133
  elementType: ToolbarComponent,
@@ -138,11 +136,11 @@ function PageContainerBar(props: PageContainerBarProps) {
138
136
  additionalProps: {}
139
137
  });
140
138
 
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;
139
+ const breadcrumbs = [...(state.breadcrumbs ?? activePage?.breadcrumbs ?? [])];
140
+ const title = state.title ?? activePage?.title ?? "";
141
+ const pageHeader = state.pageHeader ?? activePage?.pageHeader ?? null;
142
+
143
+ console.log("PageContainerBar", activePage?.sourcePath, title, breadcrumbs);
146
144
 
147
145
  // No page header
148
146
  if (pageHeader === false) return undefined;
@@ -150,8 +148,8 @@ function PageContainerBar(props: PageContainerBarProps) {
150
148
  // Custom page header
151
149
  if (pageHeader != null) return pageHeader;
152
150
 
153
- if (stateRef.current.page) {
154
- breadcrumbs.push({ title: stateRef.current.page, path: "#" });
151
+ if (state.page) {
152
+ breadcrumbs.push({ title: state.page, path: "#" });
155
153
  }
156
154
 
157
155
  return (