@itwin/core-react 4.0.0-dev.3 → 4.0.0-dev.6

package/lib/esm/core-react/settings/SettingsContainer.js

@@ -1,116 +1,116 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Settings
- */
-import "./SettingsContainer.scss";
-import * as React from "react";
-import { VerticalTabs } from "../tabs/VerticalTabs";
-import { ConditionalBooleanValue } from "@itwin/appui-abstract";
-/*  ---------------------------------------------------------------------------------------------------
-// A typical implementation of a saveFunction callback
-const saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {
-  if (dataIsDirty) {
-    // prompt user to save changes passing in function and arguments to call after saving changes.
-    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}
-      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);
-    return;
-  }
-  afterSaveFunction(args);
-}, []);
----------------------------------------------------------------------------------------------------------- */
-/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
- * @public
- */
-export function useSaveBeforeClosingSettingsContainer(settingsManager, saveFunction) {
-    React.useEffect(() => {
-        const handleProcessSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
-            saveFunction(closeFunc, closeFuncArgs);
-        };
-        return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);
-    }, [saveFunction, settingsManager]);
-}
-/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
- * @public
- */
-export function useSaveBeforeActivatingNewSettingsTab(settingsManager, saveFunction) {
-    React.useEffect(() => {
-        const handleProcessSettingsTabActivation = ({ tabSelectionFunc, requestedSettingsTabId }) => {
-            saveFunction(tabSelectionFunc, requestedSettingsTabId);
-        };
-        return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);
-    }, [saveFunction, settingsManager]);
-}
-/**
- * SettingsContainer component that displays Setting Tabs on Left and the P
- * Note: that SettingsContainer is not rendered if tabs array is empty
- * @public
- */
-export const SettingsContainer = ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader }) => {
-    // sort the tabs based on itemPriority
-    tabs = tabs.sort((a, b) => a.itemPriority - b.itemPriority);
-    const [openTab, setOpenTab] = React.useState(() => {
-        if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))
-            return currentSettingsTab;
-        else
-            return tabs[0];
-    });
-    const processTabSelection = React.useCallback((tab) => {
-        if (ConditionalBooleanValue.getValue(tab.isDisabled))
-            return;
-        onSettingsTabSelected && onSettingsTabSelected(tab);
-        setOpenTab(tab);
-    }, [onSettingsTabSelected]);
-    const processTabSelectionById = React.useCallback((tabId) => {
-        const tabToActivate = tabs.find((tab) => tab.tabId === tabId);
-        tabToActivate && processTabSelection(tabToActivate);
-    }, [processTabSelection, tabs]);
-    const onActivateTab = React.useCallback((tabIndex) => {
-        const selectedTab = tabs[tabIndex];
-        if (openTab && openTab.pageWillHandleCloseRequest)
-            settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId: selectedTab.tabId, tabSelectionFunc: processTabSelectionById });
-        else
-            processTabSelection(selectedTab);
-    }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);
-    React.useEffect(() => {
-        const handleActivateSettingsTab = ({ settingsTabId }) => {
-            const idToFind = settingsTabId.toLowerCase();
-            let tabToActivate = tabs.find((tab) => tab.tabId.toLowerCase() === idToFind);
-            if (!tabToActivate)
-                tabToActivate = tabs.find((tab) => tab.label.toLowerCase() === idToFind);
-            // istanbul ignore else
-            if (tabToActivate) {
-                if (openTab && openTab.pageWillHandleCloseRequest)
-                    settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId: tabToActivate.tabId, tabSelectionFunc: processTabSelectionById });
-                else
-                    processTabSelection(tabToActivate);
-            }
-        };
-        return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);
-    }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);
-    React.useEffect(() => {
-        const handleSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
-            if (openTab && openTab.pageWillHandleCloseRequest)
-                settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });
-            else
-                closeFunc(closeFuncArgs);
-        };
-        return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);
-    }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);
-    const labels = tabs.map((tab) => {
-        return { label: tab.label, subLabel: tab.subLabel, icon: tab.icon,
-            tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled) };
-    });
-    const activeIndex = tabs.findIndex((tab) => tab.tabId === openTab.tabId);
-    return (React.createElement("div", { className: "core-settings-container" },
-        React.createElement("div", { className: "core-settings-container-left" },
-            React.createElement(VerticalTabs, { labels: labels, activeIndex: activeIndex, onActivateTab: onActivateTab })),
-        React.createElement("div", { className: "core-settings-container-right" },
-            showHeader && React.createElement("div", { className: "core-settings-container-right-header" },
-                React.createElement("span", { className: "core-settings-container-main-header" }, openTab.label),
-                openTab.subLabel && React.createElement("span", { className: "core-settings-container-main-sub-header" }, openTab.subLabel)),
-            React.createElement("div", { className: "core-settings-container-right-contents" }, openTab.page))));
-};
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Settings
+ */
+import "./SettingsContainer.scss";
+import * as React from "react";
+import { VerticalTabs } from "../tabs/VerticalTabs";
+import { ConditionalBooleanValue } from "@itwin/appui-abstract";
+/*  ---------------------------------------------------------------------------------------------------
+// A typical implementation of a saveFunction callback
+const saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {
+  if (dataIsDirty) {
+    // prompt user to save changes passing in function and arguments to call after saving changes.
+    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}
+      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);
+    return;
+  }
+  afterSaveFunction(args);
+}, []);
+---------------------------------------------------------------------------------------------------------- */
+/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.
+ * @public
+ */
+export function useSaveBeforeClosingSettingsContainer(settingsManager, saveFunction) {
+    React.useEffect(() => {
+        const handleProcessSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
+            saveFunction(closeFunc, closeFuncArgs);
+        };
+        return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);
+    }, [saveFunction, settingsManager]);
+}
+/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.
+ * @public
+ */
+export function useSaveBeforeActivatingNewSettingsTab(settingsManager, saveFunction) {
+    React.useEffect(() => {
+        const handleProcessSettingsTabActivation = ({ tabSelectionFunc, requestedSettingsTabId }) => {
+            saveFunction(tabSelectionFunc, requestedSettingsTabId);
+        };
+        return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);
+    }, [saveFunction, settingsManager]);
+}
+/**
+ * SettingsContainer component that displays Setting Tabs on Left and the P
+ * Note: that SettingsContainer is not rendered if tabs array is empty
+ * @public
+ */
+export const SettingsContainer = ({ tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader }) => {
+    // sort the tabs based on itemPriority
+    tabs = tabs.sort((a, b) => a.itemPriority - b.itemPriority);
+    const [openTab, setOpenTab] = React.useState(() => {
+        if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))
+            return currentSettingsTab;
+        else
+            return tabs[0];
+    });
+    const processTabSelection = React.useCallback((tab) => {
+        if (ConditionalBooleanValue.getValue(tab.isDisabled))
+            return;
+        onSettingsTabSelected && onSettingsTabSelected(tab);
+        setOpenTab(tab);
+    }, [onSettingsTabSelected]);
+    const processTabSelectionById = React.useCallback((tabId) => {
+        const tabToActivate = tabs.find((tab) => tab.tabId === tabId);
+        tabToActivate && processTabSelection(tabToActivate);
+    }, [processTabSelection, tabs]);
+    const onActivateTab = React.useCallback((tabIndex) => {
+        const selectedTab = tabs[tabIndex];
+        if (openTab && openTab.pageWillHandleCloseRequest)
+            settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId: selectedTab.tabId, tabSelectionFunc: processTabSelectionById });
+        else
+            processTabSelection(selectedTab);
+    }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);
+    React.useEffect(() => {
+        const handleActivateSettingsTab = ({ settingsTabId }) => {
+            const idToFind = settingsTabId.toLowerCase();
+            let tabToActivate = tabs.find((tab) => tab.tabId.toLowerCase() === idToFind);
+            if (!tabToActivate)
+                tabToActivate = tabs.find((tab) => tab.label.toLowerCase() === idToFind);
+            // istanbul ignore else
+            if (tabToActivate) {
+                if (openTab && openTab.pageWillHandleCloseRequest)
+                    settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId: tabToActivate.tabId, tabSelectionFunc: processTabSelectionById });
+                else
+                    processTabSelection(tabToActivate);
+            }
+        };
+        return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);
+    }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);
+    React.useEffect(() => {
+        const handleSettingsContainerClose = ({ closeFunc, closeFuncArgs }) => {
+            if (openTab && openTab.pageWillHandleCloseRequest)
+                settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });
+            else
+                closeFunc(closeFuncArgs);
+        };
+        return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);
+    }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);
+    const labels = tabs.map((tab) => {
+        return { label: tab.label, subLabel: tab.subLabel, icon: tab.icon,
+            tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled) };
+    });
+    const activeIndex = tabs.findIndex((tab) => tab.tabId === openTab.tabId);
+    return (React.createElement("div", { className: "core-settings-container" },
+        React.createElement("div", { className: "core-settings-container-left" },
+            React.createElement(VerticalTabs, { labels: labels, activeIndex: activeIndex, onActivateTab: onActivateTab })),
+        React.createElement("div", { className: "core-settings-container-right" },
+            showHeader && React.createElement("div", { className: "core-settings-container-right-header" },
+                React.createElement("span", { className: "core-settings-container-main-header" }, openTab.label),
+                openTab.subLabel && React.createElement("span", { className: "core-settings-container-main-sub-header" }, openTab.subLabel)),
+            React.createElement("div", { className: "core-settings-container-right-contents" }, openTab.page))));
+};
 //# sourceMappingURL=SettingsContainer.js.map

package/lib/esm/core-react/settings/SettingsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsContainer.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Settings\n */\n\nimport \"./SettingsContainer.scss\";\nimport * as React from \"react\";\nimport { ActivateSettingsTabEventArgs, ProcessSettingsContainerCloseEventArgs, ProcessSettingsTabActivationEventArgs, SettingsManager, SettingsTabEntry } from \"./SettingsManager\";\nimport { VerticalTabs } from \"../tabs/VerticalTabs\";\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\n\n/*  ---------------------------------------------------------------------------------------------------\n// A typical implementation of a saveFunction callback\nconst saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\n  if (dataIsDirty) {\n    // prompt user to save changes passing in function and arguments to call after saving changes.\n    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}\n      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);\n    return;\n  }\n  afterSaveFunction(args);\n}, []);\n---------------------------------------------------------------------------------------------------------- */\n\n/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.\n * @public\n */\nexport function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void) {\n  React.useEffect (()=>{\n    const handleProcessSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\n      saveFunction (closeFunc, closeFuncArgs);\n    };\n    return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);\n  }, [saveFunction, settingsManager]);\n}\n\n/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.\n * @public\n */\nexport function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void) {\n  React.useEffect (()=>{\n    const handleProcessSettingsTabActivation = ({tabSelectionFunc, requestedSettingsTabId}: ProcessSettingsTabActivationEventArgs) => {\n      saveFunction (tabSelectionFunc, requestedSettingsTabId);\n    };\n    return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);\n  }, [saveFunction, settingsManager]);\n}\n\n/**\n * @public\n */\nexport interface SettingsContainerProps {\n  tabs: SettingsTabEntry[];\n  // sets tab to set as active tab\n  currentSettingsTab?: SettingsTabEntry;\n  // If plugging into a SPA and you need to modify the route, you can pass in additional logic here\n  onSettingsTabSelected?: (tab: SettingsTabEntry) => void;\n  // The SettingsManager that can have event handlers registered against it so pages can save its settings before the page is closed.\n  settingsManager: SettingsManager;\n  // if true show tab label as header above page contents.\n  showHeader?: boolean;\n}\n\n/**\n * SettingsContainer component that displays Setting Tabs on Left and the P\n * Note: that SettingsContainer is not rendered if tabs array is empty\n * @public\n */\nexport const SettingsContainer = ({tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader}: SettingsContainerProps) => {\n  // sort the tabs based on itemPriority\n  tabs = tabs.sort((a, b)=> a.itemPriority - b.itemPriority);\n\n  const [openTab, setOpenTab] = React.useState(()=>{\n    if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))\n      return currentSettingsTab;\n    else\n      return tabs[0];\n  });\n\n  const processTabSelection = React.useCallback((tab: SettingsTabEntry) => {\n    if (ConditionalBooleanValue.getValue(tab.isDisabled))\n      return;\n    onSettingsTabSelected && onSettingsTabSelected(tab);\n    setOpenTab(tab);\n  }, [onSettingsTabSelected]);\n\n  const processTabSelectionById = React.useCallback((tabId: string) => {\n    const tabToActivate = tabs.find((tab)=>tab.tabId === tabId);\n    tabToActivate && processTabSelection (tabToActivate);\n  }, [processTabSelection, tabs]);\n\n  const onActivateTab =  React.useCallback((tabIndex: number) => {\n    const selectedTab = tabs[tabIndex];\n    if (openTab && openTab.pageWillHandleCloseRequest)\n      settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:selectedTab.tabId, tabSelectionFunc: processTabSelectionById});\n    else\n      processTabSelection(selectedTab);\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);\n\n  React.useEffect (()=>{\n    const handleActivateSettingsTab = ({settingsTabId}: ActivateSettingsTabEventArgs) => {\n      const idToFind = settingsTabId.toLowerCase();\n      let tabToActivate = tabs.find((tab)=>tab.tabId.toLowerCase() === idToFind);\n      if (!tabToActivate)\n        tabToActivate = tabs.find((tab)=>tab.label.toLowerCase() === idToFind);\n      // istanbul ignore else\n      if (tabToActivate) {\n        if (openTab && openTab.pageWillHandleCloseRequest)\n          settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:tabToActivate.tabId, tabSelectionFunc: processTabSelectionById});\n        else\n          processTabSelection(tabToActivate);\n      }\n    };\n\n    return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\n\n  React.useEffect (()=>{\n    const handleSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\n      if (openTab && openTab.pageWillHandleCloseRequest)\n        settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });\n      else\n        closeFunc(closeFuncArgs);\n    };\n    return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);\n  }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\n\n  const labels=tabs.map((tab)=> {\n    return {label:tab.label, subLabel: tab.subLabel, icon: tab.icon,\n      tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled)};\n  });\n  const activeIndex = tabs.findIndex((tab)=>tab.tabId === openTab.tabId);\n  return (\n    <div className=\"core-settings-container\">\n      <div className=\"core-settings-container-left\">\n        <VerticalTabs labels={labels} activeIndex={activeIndex} onActivateTab={onActivateTab} />\n      </div>\n      <div className=\"core-settings-container-right\">\n        {showHeader && <div className=\"core-settings-container-right-header\">\n          <span className=\"core-settings-container-main-header\">{openTab.label}</span>\n          {openTab.subLabel && <span className=\"core-settings-container-main-sub-header\">{openTab.subLabel}</span>}\n        </div>}\n        <div className=\"core-settings-container-right-contents\">\n          {openTab.page}\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"SettingsContainer.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsContainer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;;;;;;;;;;6GAW6G;AAE7G;;GAEG;AACH,MAAM,UAAU,qCAAqC,CAAC,eAAgC,EAAE,YAA2E;IACjK,KAAK,CAAC,SAAS,CAAE,GAAE,EAAE;QACnB,MAAM,mCAAmC,GAAG,CAAC,EAAC,SAAS,EAAE,aAAa,EAAyC,EAAE,EAAE;YACjH,YAAY,CAAE,SAAS,EAAE,aAAa,CAAC,CAAC;QAC1C,CAAC,CAAC;QACF,OAAO,eAAe,CAAC,+BAA+B,CAAC,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC1G,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;AACtC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qCAAqC,CAAC,eAAgC,EAAE,YAA8F;IACpL,KAAK,CAAC,SAAS,CAAE,GAAE,EAAE;QACnB,MAAM,kCAAkC,GAAG,CAAC,EAAC,gBAAgB,EAAE,sBAAsB,EAAwC,EAAE,EAAE;YAC/H,YAAY,CAAE,gBAAgB,EAAE,sBAAsB,CAAC,CAAC;QAC1D,CAAC,CAAC;QACF,OAAO,eAAe,CAAC,8BAA8B,CAAC,WAAW,CAAC,kCAAkC,CAAC,CAAC;IACxG,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;AACtC,CAAC;AAiBD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAC,IAAI,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,eAAe,EAAE,UAAU,EAAyB,EAAE,EAAE;IAC1I,sCAAsC;IACtC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAC,EAAE,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAE,EAAE;QAC/C,IAAI,kBAAkB,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,kBAAkB,CAAC,UAAU,CAAC;YACxF,OAAO,kBAAkB,CAAC;;YAE1B,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAAqB,EAAE,EAAE;QACtE,IAAI,uBAAuB,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;YAClD,OAAO;QACT,qBAAqB,IAAI,qBAAqB,CAAC,GAAG,CAAC,CAAC;QACpD,UAAU,CAAC,GAAG,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QAClE,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAC,EAAE,CAAA,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAC5D,aAAa,IAAI,mBAAmB,CAAE,aAAa,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC;IAEhC,MAAM,aAAa,GAAI,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QAC5D,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,OAAO,IAAI,OAAO,CAAC,0BAA0B;YAC/C,eAAe,CAAC,8BAA8B,CAAC,IAAI,CAAC,EAAE,sBAAsB,EAAC,WAAW,CAAC,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAC,CAAC,CAAC;;YAE5I,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnF,KAAK,CAAC,SAAS,CAAE,GAAE,EAAE;QACnB,MAAM,yBAAyB,GAAG,CAAC,EAAC,aAAa,EAA+B,EAAE,EAAE;YAClF,MAAM,QAAQ,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;YAC7C,IAAI,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAC,EAAE,CAAA,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,CAAC;YAC3E,IAAI,CAAC,aAAa;gBAChB,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAC,EAAE,CAAA,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,CAAC;YACzE,uBAAuB;YACvB,IAAI,aAAa,EAAE;gBACjB,IAAI,OAAO,IAAI,OAAO,CAAC,0BAA0B;oBAC/C,eAAe,CAAC,8BAA8B,CAAC,IAAI,CAAC,EAAE,sBAAsB,EAAC,aAAa,CAAC,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAC,CAAC,CAAC;;oBAE9I,mBAAmB,CAAC,aAAa,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QAEF,OAAO,eAAe,CAAC,qBAAqB,CAAC,WAAW,CAAC,yBAAyB,CAAC,CAAC;IACtF,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1H,KAAK,CAAC,SAAS,CAAE,GAAE,EAAE;QACnB,MAAM,4BAA4B,GAAG,CAAC,EAAC,SAAS,EAAE,aAAa,EAAyC,EAAE,EAAE;YAC1G,IAAI,OAAO,IAAI,OAAO,CAAC,0BAA0B;gBAC/C,eAAe,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC;;gBAEnF,SAAS,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC,CAAC;QACF,OAAO,eAAe,CAAC,wBAAwB,CAAC,WAAW,CAAC,4BAA4B,CAAC,CAAC;IAC5F,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;IAEjG,MAAM,MAAM,GAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAC,EAAE;QAC3B,OAAO,EAAC,KAAK,EAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI;YAC7D,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,uBAAuB,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,EAAC,CAAC;IACxG,CAAC,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAC,EAAE,CAAA,GAAG,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;IACvE,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,6BAAK,SAAS,EAAC,8BAA8B;YAC3C,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,GAAI,CACpF;QACN,6BAAK,SAAS,EAAC,+BAA+B;YAC3C,UAAU,IAAI,6BAAK,SAAS,EAAC,sCAAsC;gBAClE,8BAAM,SAAS,EAAC,qCAAqC,IAAE,OAAO,CAAC,KAAK,CAAQ;gBAC3E,OAAO,CAAC,QAAQ,IAAI,8BAAM,SAAS,EAAC,yCAAyC,IAAE,OAAO,CAAC,QAAQ,CAAQ,CACpG;YACN,6BAAK,SAAS,EAAC,wCAAwC,IACpD,OAAO,CAAC,IAAI,CACT,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Settings\r\n */\r\n\r\nimport \"./SettingsContainer.scss\";\r\nimport * as React from \"react\";\r\nimport { ActivateSettingsTabEventArgs, ProcessSettingsContainerCloseEventArgs, ProcessSettingsTabActivationEventArgs, SettingsManager, SettingsTabEntry } from \"./SettingsManager\";\r\nimport { VerticalTabs } from \"../tabs/VerticalTabs\";\r\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\n\r\n/*  ---------------------------------------------------------------------------------------------------\r\n// A typical implementation of a saveFunction callback\r\nconst saveChanges = React.useCallback((afterSaveFunction: (args: any) => void, args?: any) => {\r\n  if (dataIsDirty) {\r\n    // prompt user to save changes passing in function and arguments to call after saving changes.\r\n    ModalDialogManager.openDialog(<CustomSavePromptModalDialog customProps={customProps}\r\n      onDialogCloseArgs={args} onDialogClose={afterSaveFunction} />);\r\n    return;\r\n  }\r\n  afterSaveFunction(args);\r\n}, []);\r\n---------------------------------------------------------------------------------------------------------- */\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before the Setting Container is closed.\r\n * @public\r\n */\r\nexport function useSaveBeforeClosingSettingsContainer(settingsManager: SettingsManager, saveFunction: (closeFunc: (args: any) => void, closeFuncArgs?: any) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      saveFunction (closeFunc, closeFuncArgs);\r\n    };\r\n    return settingsManager.onProcessSettingsContainerClose.addListener(handleProcessSettingsContainerClose);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/** Hook to use within Settings Page component to allow saving the current page's data before loading to the requested Setting Tab's page.\r\n * @public\r\n */\r\nexport function useSaveBeforeActivatingNewSettingsTab(settingsManager: SettingsManager, saveFunction: (tabSelectionFunc: (args: any) => void, requestedSettingsTabId?: string) => void) {\r\n  React.useEffect (()=>{\r\n    const handleProcessSettingsTabActivation = ({tabSelectionFunc, requestedSettingsTabId}: ProcessSettingsTabActivationEventArgs) => {\r\n      saveFunction (tabSelectionFunc, requestedSettingsTabId);\r\n    };\r\n    return settingsManager.onProcessSettingsTabActivation.addListener(handleProcessSettingsTabActivation);\r\n  }, [saveFunction, settingsManager]);\r\n}\r\n\r\n/**\r\n * @public\r\n */\r\nexport interface SettingsContainerProps {\r\n  tabs: SettingsTabEntry[];\r\n  // sets tab to set as active tab\r\n  currentSettingsTab?: SettingsTabEntry;\r\n  // If plugging into a SPA and you need to modify the route, you can pass in additional logic here\r\n  onSettingsTabSelected?: (tab: SettingsTabEntry) => void;\r\n  // The SettingsManager that can have event handlers registered against it so pages can save its settings before the page is closed.\r\n  settingsManager: SettingsManager;\r\n  // if true show tab label as header above page contents.\r\n  showHeader?: boolean;\r\n}\r\n\r\n/**\r\n * SettingsContainer component that displays Setting Tabs on Left and the P\r\n * Note: that SettingsContainer is not rendered if tabs array is empty\r\n * @public\r\n */\r\nexport const SettingsContainer = ({tabs, onSettingsTabSelected, currentSettingsTab, settingsManager, showHeader}: SettingsContainerProps) => {\r\n  // sort the tabs based on itemPriority\r\n  tabs = tabs.sort((a, b)=> a.itemPriority - b.itemPriority);\r\n\r\n  const [openTab, setOpenTab] = React.useState(()=>{\r\n    if (currentSettingsTab && !ConditionalBooleanValue.getValue(currentSettingsTab.isDisabled))\r\n      return currentSettingsTab;\r\n    else\r\n      return tabs[0];\r\n  });\r\n\r\n  const processTabSelection = React.useCallback((tab: SettingsTabEntry) => {\r\n    if (ConditionalBooleanValue.getValue(tab.isDisabled))\r\n      return;\r\n    onSettingsTabSelected && onSettingsTabSelected(tab);\r\n    setOpenTab(tab);\r\n  }, [onSettingsTabSelected]);\r\n\r\n  const processTabSelectionById = React.useCallback((tabId: string) => {\r\n    const tabToActivate = tabs.find((tab)=>tab.tabId === tabId);\r\n    tabToActivate && processTabSelection (tabToActivate);\r\n  }, [processTabSelection, tabs]);\r\n\r\n  const onActivateTab =  React.useCallback((tabIndex: number) => {\r\n    const selectedTab = tabs[tabIndex];\r\n    if (openTab && openTab.pageWillHandleCloseRequest)\r\n      settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:selectedTab.tabId, tabSelectionFunc: processTabSelectionById});\r\n    else\r\n      processTabSelection(selectedTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleActivateSettingsTab = ({settingsTabId}: ActivateSettingsTabEventArgs) => {\r\n      const idToFind = settingsTabId.toLowerCase();\r\n      let tabToActivate = tabs.find((tab)=>tab.tabId.toLowerCase() === idToFind);\r\n      if (!tabToActivate)\r\n        tabToActivate = tabs.find((tab)=>tab.label.toLowerCase() === idToFind);\r\n      // istanbul ignore else\r\n      if (tabToActivate) {\r\n        if (openTab && openTab.pageWillHandleCloseRequest)\r\n          settingsManager.onProcessSettingsTabActivation.emit({ requestedSettingsTabId:tabToActivate.tabId, tabSelectionFunc: processTabSelectionById});\r\n        else\r\n          processTabSelection(tabToActivate);\r\n      }\r\n    };\r\n\r\n    return settingsManager.onActivateSettingsTab.addListener(handleActivateSettingsTab);\r\n  }, [openTab, processTabSelection, processTabSelectionById, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  React.useEffect (()=>{\r\n    const handleSettingsContainerClose = ({closeFunc, closeFuncArgs}: ProcessSettingsContainerCloseEventArgs) => {\r\n      if (openTab && openTab.pageWillHandleCloseRequest)\r\n        settingsManager.onProcessSettingsContainerClose.emit({ closeFunc, closeFuncArgs });\r\n      else\r\n        closeFunc(closeFuncArgs);\r\n    };\r\n    return settingsManager.onCloseSettingsContainer.addListener(handleSettingsContainerClose);\r\n  }, [openTab, processTabSelection, settingsManager, settingsManager.onActivateSettingsTab, tabs]);\r\n\r\n  const labels=tabs.map((tab)=> {\r\n    return {label:tab.label, subLabel: tab.subLabel, icon: tab.icon,\r\n      tooltip: tab.tooltip, tabId: tab.tabId, disabled: ConditionalBooleanValue.getValue(tab.isDisabled)};\r\n  });\r\n  const activeIndex = tabs.findIndex((tab)=>tab.tabId === openTab.tabId);\r\n  return (\r\n    <div className=\"core-settings-container\">\r\n      <div className=\"core-settings-container-left\">\r\n        <VerticalTabs labels={labels} activeIndex={activeIndex} onActivateTab={onActivateTab} />\r\n      </div>\r\n      <div className=\"core-settings-container-right\">\r\n        {showHeader && <div className=\"core-settings-container-right-header\">\r\n          <span className=\"core-settings-container-main-header\">{openTab.label}</span>\r\n          {openTab.subLabel && <span className=\"core-settings-container-main-sub-header\">{openTab.subLabel}</span>}\r\n        </div>}\r\n        <div className=\"core-settings-container-right-contents\">\r\n          {openTab.page}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"]}

package/lib/esm/core-react/settings/SettingsContainer.scss

@@ -1,66 +1,65 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-@import "../style/themecolors";
-
-div.core-settings-container {
-  display: flex;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-
-  .core-settings-container-left {
-    min-width: 15em;
-    height: 100%;
-    overflow: auto;
-    > .uicore-tabs-vertical {
-      font-size: 16px;
-    }
-  }
-  .core-settings-container-right {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background: var(--buic-background-dialog);
-    align-content: center;
-
-    .core-settings-container-right-header {
-      display: flex;
-      width: 100%;
-      height: calc(var(--iui-font-size-4) * 2);
-      font-size: var(--iui-font-size-4);
-      font-weight: var(--iui-font-weight-semibold);
-      padding-left: 15px;
-      align-items: center;
-
-      .core-settings-container-main-sub-header {
-        position: relative;
-        padding-left: 20px;
-
-        &::before {
-          content: "-";
-          position: absolute;
-          left: 10px;
-          transform: translateX(-50%);
-        }
-      }
-    }
-
-    .core-settings-container-right-contents {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+@import "../style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+div.core-settings-container {
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+
+  .core-settings-container-left {
+    min-width: 15em;
+    height: 100%;
+    overflow: auto;
+    >.uicore-tabs-vertical {
+      font-size: 16px;
+    }
+  }
+  .core-settings-container-right {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--buic-background-dialog);
+    align-content: center;
+
+    .core-settings-container-right-header {
+      display: flex;
+      width: 100%;
+      height: ($iui-font-size-title * 2);
+      font-size: $iui-font-size-title;
+      font-weight: $iui-font-weight-semibold;
+      padding-left: 15px;
+      align-items: center;
+
+      .core-settings-container-main-sub-header {
+        position: relative;
+        padding-left: 20px;
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 10px;
+          transform: translateX(-50%);
+        }
+      }
+    }
+
+    .core-settings-container-right-contents {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+}