packageDocumentation module import "./SettingsContainer.scss" ; import * as React from "react" ; import { ActivateSettingsTabEventArgs , ProcessSettingsContainerCloseEventArgs , ProcessSettingsTabActivationEventArgs , SettingsManager , SettingsTabEntry } from "./SettingsManager" ; import { VerticalTabs } from "../tabs/VerticalTabs" ; import { ConditionalBooleanValue } from "@itwin/appui-abstract" ; public export function useSaveBeforeClosingSettingsContainer ( settingsManager , saveFunction ) { React . useEffect ( ( ) => { const handleProcessSettingsContainerClose = ( { closeFunc , closeFuncArgs } ) => { saveFunction ( closeFunc , closeFuncArgs ) ; } ; return settingsManager . onProcessSettingsContainerClose . addListener ( handleProcessSettingsContainerClose ) ; } , [ saveFunction , settingsManager ] ) ; } public export function useSaveBeforeActivatingNewSettingsTab ( settingsManager , saveFunction ) { React . useEffect ( ( ) => { const handleProcessSettingsTabActivation = ( { tabSelectionFunc , requestedSettingsTabId } ) => { saveFunction ( tabSelectionFunc , requestedSettingsTabId ) ; } ; return settingsManager . onProcessSettingsTabActivation . addListener ( handleProcessSettingsTabActivation ) ; } , [ saveFunction , settingsManager ] ) ; } public export interface SettingsContainerProps { tabs : SettingsTabEntry [ ] ; currentSettingsTab ? : SettingsTabEntry ; onSettingsTabSelected ? : ( tab : SettingsTabEntry ) => void ; settingsManager : SettingsManager ; showHeader ? : boolean ; } public export const SettingsContainer = ( { tabs , onSettingsTabSelected , currentSettingsTab , settingsManager , showHeader } ) => { 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 ) ; 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 ( < div className = "core-settings-container" > < div className = "core-settings-container-left" > < VerticalTabs labels = { labels } activeIndex = { activeIndex } onActivateTab = { onActivateTab } / > < /div> < div className = "core-settings-container-right" > { showHeader && < div className = "core-settings-container-right-header" > < span className = "core-settings-container-main-header" > { openTab . label } < /span> { openTab . subLabel && < span className = "core-settings-container-main-sub-header" > { openTab . subLabel } < /span>} < /div>} < div className = "core-settings-container-right-contents" > { openTab . page } < /div> < /div> < /div>); } ;