@dgui/react-shared - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2-beta.1

dist/Providers/DrawerIndexProvider.d.ts

@@ -1,4 +0,4 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
+import { type DrawerIndexProviderProps } from '../Types';
+import { type FunctionComponent } from 'react';
 declare const DrawerIndexProvider: FunctionComponent<DrawerIndexProviderProps>;
 export default DrawerIndexProvider;
-export type DrawerIndexProviderProps = PropsWithChildren<{}>;

dist/Providers/DrawerIndexProvider.js

@@ -29,12 +29,29 @@ "use strict";
 const react_1 = require("react");
-const DrawerIndexProvider = ({ children }) => {
+const DrawerIndexProvider = ({ children, onSelectDrawer, drawerIndex: givenDrawerIndex }) => {
     const [drawerIndex, setDrawerIndex] = (0, react_1.useState)(DrawerIndexContext_1.defaults.drawerIndex);
+    (0, react_1.useEffect)(() => {
+        const safeIndex = Number.isSafeInteger(givenDrawerIndex) &&
+            Number(givenDrawerIndex);
+        if (safeIndex) {
+            setDrawerIndex(safeIndex);
+        }
+    }, [
+        givenDrawerIndex
+    ]);
+    const selectDrawer = (0, react_1.useCallback)((selectedDrawerIndex) => {
+        if (onSelectDrawer) {
+            onSelectDrawer(selectedDrawerIndex);
+        }
+        setDrawerIndex(selectedDrawerIndex);
+    }, [
+        onSelectDrawer
+    ]);
     const value = (0, react_1.useMemo)(() => {
         return {
             drawerIndex,
-            selectDrawer: setDrawerIndex
+            selectDrawer
         };
     }, [
-        setDrawerIndex,
-        drawerIndex
+        drawerIndex,
+        selectDrawer
     ]);
@@ -41,0 +58,0 @@ return ((0, jsx_runtime_1.jsx)(DrawerIndexContext_1.default.Provider, Object.assign({ value: value }, { children: children })));

dist/Providers/DrawerProvider.js

@@ -44,10 +44,24 @@ "use strict";
     const addDrawer = (0, react_1.useCallback)((drawer, position) => {
-        const { drawerId, tabId } = drawer;
+        const { drawerId, tabId } = drawer, restOfDrawer = __rest(drawer, ["drawerId", "tabId"]);
         setDrawers((previousDrawers) => {
-            if (tabId &&
-                previousDrawers[drawerId]) {
-                return previousDrawers;
+            const existingDrawer = previousDrawers[drawerId];
+            if (existingDrawer) {
+                if (tabId) {
+                    const newDrawers = Object.assign(Object.assign({}, previousDrawers), { [drawerId]: Object.assign(Object.assign({}, existingDrawer), { tabs: [
+                                ...existingDrawer.tabs || [],
+                                tabId
+                            ] }) });
+                    return newDrawers;
+                }
+                else {
+                    return previousDrawers;
+                }
             }
+            else if (tabId) {
+                return Object.assign(Object.assign({}, previousDrawers), { [drawerId]: Object.assign(Object.assign({ drawerId }, restOfDrawer), { tabs: [
+                            tabId
+                        ] }) });
+            }
             else {
-                return Object.assign(Object.assign({}, previousDrawers), { [drawerId]: drawer });
+                return Object.assign(Object.assign({}, previousDrawers), { [drawerId]: Object.assign({}, drawer) });
             }
@@ -74,10 +88,24 @@ });
     const removeDrawer = (0, react_1.useCallback)((drawerId) => {
+        let emptyDrawer = true;
         setDrawers((previousDrawers) => {
-            const _a = previousDrawers, _b = drawerId, omit = _a[_b], filteredDrawers = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-            return filteredDrawers;
+            const tabs = previousDrawers[drawerId].tabs;
+            if (tabs &&
+                tabs.length !== 0) {
+                emptyDrawer = false;
+                return previousDrawers;
+            }
+            else {
+                const _a = previousDrawers, _b = drawerId, omit = _a[_b], filteredDrawers = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                return filteredDrawers;
+            }
         });
         setDrawerOrder((previousDrawerOrder) => {
-            return previousDrawerOrder.filter((id) => {
-                return id !== drawerId;
-            });
+            if (emptyDrawer) {
+                return previousDrawerOrder.filter((id) => {
+                    return id !== drawerId;
+                });
+            }
+            else {
+                return previousDrawerOrder;
+            }
         });
@@ -84,0 +112,0 @@ }, []);

dist/Providers/DrawerToggleProvider.d.ts

@@ -1,4 +0,4 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
+import { type DrawerToggleProviderProps } from '../Types';
+import { type FunctionComponent } from 'react';
 declare const DrawerToggleProvider: FunctionComponent<DrawerToggleProviderProps>;
 export default DrawerToggleProvider;
-export type DrawerToggleProviderProps = PropsWithChildren<{}>;

dist/Providers/DrawerToggleProvider.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DrawerToggleContext_1 = __importStar(require("../Contexts/DrawerToggleContext"));
+const DrawerToggleContext_1 = __importDefault(require("../Contexts/DrawerToggleContext"));
 const react_1 = require("react");
-const DrawerToggleProvider = ({ children }) => {
-    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(DrawerToggleContext_1.defaults.drawerOpen);
+const DrawerToggleProvider = ({ children, drawerOpen: givenDrawerOpen, onDrawerToggle }) => {
+    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(givenDrawerOpen);
+    (0, react_1.useEffect)(() => {
+        setDrawerOpen(givenDrawerOpen);
+    }, [
+        givenDrawerOpen
+    ]);
+    const toggleDrawer = (0, react_1.useCallback)((open) => {
+        if (open === undefined) {
+            setDrawerOpen((currentDrawerOpen) => {
+                const toggleOpen = !currentDrawerOpen;
+                if (onDrawerToggle) {
+                    onDrawerToggle(toggleOpen);
+                }
+                return toggleOpen;
+            });
+        }
+        else {
+            if (onDrawerToggle) {
+                onDrawerToggle(open);
+            }
+            setDrawerOpen(open);
+        }
+    }, [
+        onDrawerToggle
+    ]);
     const value = (0, react_1.useMemo)(() => {
         return {
-            drawerOpen,
-            toggleDrawer: (open) => {
-                if (open === undefined) {
-                    setDrawerOpen(!drawerOpen);
-                }
-                else {
-                    setDrawerOpen(open);
-                }
-            }
+            drawerOpen: Boolean(drawerOpen),
+            toggleDrawer
         };
     }, [
         drawerOpen,
-        setDrawerOpen
+        toggleDrawer
     ]);
@@ -47,0 +44,0 @@ return ((0, jsx_runtime_1.jsx)(DrawerToggleContext_1.default.Provider, Object.assign({ value: value }, { children: children })));

dist/Providers/index.d.ts

@@ -1,4 +0,4 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
+import { type ProvidersProps } from '../Types';
+import { type FunctionComponent } from 'react';
 declare const Providers: FunctionComponent<ProvidersProps>;
 export default Providers;
-export type ProvidersProps = PropsWithChildren<{}>;

dist/Providers/index.js

@@ -12,6 +12,6 @@ "use strict";
 const TabProvider_1 = __importDefault(require("./TabProvider"));
-const Providers = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(DrawerToggleProvider_1.default, { children: (0, jsx_runtime_1.jsx)(DrawerProvider_1.default, { children: (0, jsx_runtime_1.jsx)(TabProvider_1.default, { children: (0, jsx_runtime_1.jsx)(DrawerIndexProvider_1.default, { children: (0, jsx_runtime_1.jsx)(TabIndexProvider_1.default, { children: children }) }) }) }) }));
+const Providers = ({ children, drawerIndex, drawerOpen, onDrawerToggle, onSelectDrawer, onSelectTab, tabIndex }) => {
+    return ((0, jsx_runtime_1.jsx)(DrawerToggleProvider_1.default, Object.assign({ drawerOpen: drawerOpen, onDrawerToggle: onDrawerToggle }, { children: (0, jsx_runtime_1.jsx)(DrawerProvider_1.default, { children: (0, jsx_runtime_1.jsx)(TabProvider_1.default, { children: (0, jsx_runtime_1.jsx)(DrawerIndexProvider_1.default, Object.assign({ drawerIndex: drawerIndex, onSelectDrawer: onSelectDrawer }, { children: (0, jsx_runtime_1.jsx)(TabIndexProvider_1.default, Object.assign({ onSelectTab: onSelectTab, tabIndex: tabIndex }, { children: children })) })) }) }) })));
 };
 Providers.displayName = 'SharedProviders';
 exports.default = Providers;

dist/Providers/TabIndexProvider.d.ts

@@ -1,4 +0,4 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
+import { type TabIndexProviderProps } from '../Types';
+import { type FunctionComponent } from 'react';
 declare const TabIndexProvider: FunctionComponent<TabIndexProviderProps>;
 export default TabIndexProvider;
-export type TabIndexProviderProps = PropsWithChildren<{}>;

dist/Providers/TabIndexProvider.js

@@ -29,11 +29,28 @@ "use strict";
 const react_1 = require("react");
-const TabIndexProvider = ({ children }) => {
+const TabIndexProvider = ({ children, onSelectTab, tabIndex: givenTabIndex }) => {
     const [tabIndex, setTabIndex] = (0, react_1.useState)(TabIndexContext_1.defaults.tabIndex);
+    (0, react_1.useEffect)(() => {
+        const safeIndex = Number.isSafeInteger(givenTabIndex) &&
+            Number(givenTabIndex);
+        if (safeIndex) {
+            setTabIndex(safeIndex);
+        }
+    }, [
+        givenTabIndex
+    ]);
+    const selectTab = (0, react_1.useCallback)((selectedTabIndex) => {
+        if (onSelectTab) {
+            onSelectTab(selectedTabIndex);
+        }
+        setTabIndex(selectedTabIndex);
+    }, [
+        onSelectTab
+    ]);
     const value = (0, react_1.useMemo)(() => {
         return {
-            selectTab: setTabIndex,
+            selectTab,
             tabIndex
         };
     }, [
-        setTabIndex,
+        selectTab,
         tabIndex
@@ -40,0 +57,0 @@ ]);

dist/Types.d.ts

@@ -1,12 +0,6 @@
-import { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react';
-export type DigestProps = {
-    drawerIndex?: number;
-    onSelectDrawer?: (tabIndex: number) => void;
-    onSelectTab?: (tabIndex: number) => void;
-    tabIndex?: number;
-};
+import { type PropsWithChildren } from 'react';
 export type DrawerType = {
     drawerId: string;
     swipe?: boolean;
-    tabId?: string;
+    tabs?: string[];
     title?: string;
@@ -24,7 +18,7 @@ };
     drawerIndex: number;
-    selectDrawer: Dispatch<SetStateAction<number>>;
+    selectDrawer: (drawerIndex: number) => void;
 };
 export type DrawerToggleContextProps = {
     drawerOpen: boolean;
-    toggleDrawer: (open?: boolean) => void;
+    toggleDrawer: (open?: boolean | undefined) => void;
 };
@@ -47,3 +41,3 @@ export type TabType = {
 export type TabIndexContextProps = {
-    selectTab: Dispatch<SetStateAction<number>>;
+    selectTab: (tabIndex: number) => void;
     tabIndex: number;
@@ -62,1 +56,21 @@ };
 };
+export type DrawerIndexProviderProps = PropsWithChildren<{
+    drawerIndex?: number;
+    onSelectDrawer?: (tabIndex: number) => void;
+}>;
+export type DrawerToggleProviderProps = PropsWithChildren<{
+    drawerOpen?: boolean;
+    onDrawerToggle?: (drawerOpen?: boolean) => void;
+}>;
+export type TabIndexProviderProps = PropsWithChildren<{
+    onSelectTab?: (tabIndex: number) => void;
+    tabIndex?: number;
+}>;
+export type ProvidersProps = DrawerIndexProviderProps & DrawerToggleProviderProps & PropsWithChildren<{}> & TabIndexProviderProps;
+export type ReactDigestProps = PropsWithChildren<{}> & ProvidersProps;
+export type ReactDigestDrawerProps = Omit<DrawerType, 'tabs'> & PropsWithChildren<{}> & {
+    tabId?: string;
+};
+export type ReactDigestTabProps = PropsWithChildren<{}> & TabType;
+export type ReactDigestAppBarProps = PropsWithChildren<{}>;
+export type ReactDigestDrawerBarProps = PropsWithChildren<{}>;

package.json

@@ -5,3 +5,3 @@ {
 	"license": "LGPL-3.0-or-later",
-	"version": "0.3.1",
+	"version": "0.3.2-beta.1",
 	"private": false,
@@ -55,3 +55,3 @@ "description": "Shared Components for a boilerplate React GUI",
 		"@types/jest": "^29.5.1",
-		"@types/react": "^18.0.37",
+		"@types/react": "^18.0.38",
 		"@types/react-test-renderer": "^18.0.0",
@@ -76,3 +76,3 @@ "cross-env": "^7.0.3",
 	],
-	"gitHead": "e49d7187066263c12e7661daa3ffb5feae6286d6"
+	"gitHead": "d7041d722670220288a98743c02810b000cf8020"
 }

No alert changes

Improved metrics

Total package byte prevSize

75267

3.79%

Lines of code

669

12.44%

No dependency changes