@itwin/appui-react 4.0.0-dev.11 → 4.0.0-dev.13

package/lib/cjs/appui-react/navigationaids/SheetNavigationAid.js

@@ -1,188 +1,188 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module NavigationAids
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SheetNavigationAid = exports.SheetNavigationAidControl = void 0;
-require("./SheetNavigationAid.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const core_frontend_1 = require("@itwin/core-frontend");
-const components_react_1 = require("@itwin/components-react");
-const imodel_components_react_1 = require("@itwin/imodel-components-react");
-const UiFramework_1 = require("../UiFramework");
-const ViewUtilities_1 = require("../utils/ViewUtilities");
-const NavigationAidControl_1 = require("./NavigationAidControl");
-const SheetsModalFrontstage_1 = require("./SheetsModalFrontstage");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-/** A Sheet Navigation Aid control.
- * @alpha
- */
-class SheetNavigationAidControl extends NavigationAidControl_1.NavigationAidControl {
-    constructor(info, options) {
-        super(info, options);
-        this.reactNode = React.createElement(SheetNavigationAid, { iModelConnection: options.imodel });
-    }
-    // istanbul ignore next
-    getSize() { return "96px"; }
-}
-exports.SheetNavigationAidControl = SheetNavigationAidControl;
-SheetNavigationAidControl.navigationAidId = "SheetNavigationAid";
-/** A Sheet Navigation Aid.
- * @alpha
- */
-class SheetNavigationAid extends React.Component {
-    constructor(props) {
-        super(props);
-        this._isMounted = false;
-        /** @internal */
-        this.state = {
-            index: 0,
-            sheetData: [],
-        };
-        /** Sets index of newly selected card */
-        this._handleCardSelected = (event) => {
-            event && this.setState({
-                index: event.index,
-            });
-        };
-        /** Updates view to the next lowest index in sheetData */
-        // istanbul ignore next
-        this._handleOnClickLeftArrow = () => {
-            this.setState((prevState) => ({ index: prevState.index <= 0 ? prevState.sheetData.length - 1 : prevState.index - 1 }), async () => this._updateView());
-        };
-        /** Updates view to next highest index in sheetData */
-        // istanbul ignore next
-        this._handleOnClickRightArrow = () => {
-            this.setState((prevState) => ({ index: (prevState.index + 1) % prevState.sheetData.length }), async () => this._updateView());
-        };
-        /** Handles a Viewport change & synchs the index */
-        // istanbul ignore next
-        this._handleSelectedViewportChanged = (args) => {
-            if (args.current) {
-                this._handleViewportChanged(args.current);
-            }
-        };
-        // istanbul ignore next
-        this._handleViewIdChanged = (args) => {
-            if (this._viewport === args.viewport)
-                this._handleViewportChanged(args.viewport);
-        };
-        /** Handles a Viewport change & synchs the index */
-        // istanbul ignore next
-        this._handleViewportChanged = (viewport) => {
-            const className = ViewUtilities_1.ViewUtilities.getBisBaseClass(viewport.view.classFullName);
-            if (ViewUtilities_1.ViewUtilities.isSheet(className)) {
-                this._viewport = viewport;
-                const viewId = this._viewport.view.id.toString();
-                const index = this.state.sheetData.findIndex((sheetData) => {
-                    return (viewId === sheetData.viewId);
-                });
-                if (index >= 0)
-                    this.setState({ index });
-            }
-        };
-        /** Opens a new SheetsModelFrontstage on sheetName click */
-        // istanbul ignore next
-        this._handleOnClickSheetName = () => {
-            UiFramework_1.UiFramework.frontstages.openModalFrontstage(this.modalFrontstage());
-        };
-        this._viewport = core_frontend_1.IModelApp.viewManager.selectedView;
-    }
-    /** Adds listeners when components mounts */
-    async componentDidMount() {
-        this._isMounted = true;
-        SheetsModalFrontstage_1.CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);
-        imodel_components_react_1.ViewportComponentEvents.onViewIdChangedEvent.addListener(this._handleViewIdChanged);
-        core_frontend_1.IModelApp.viewManager.onSelectedViewportChanged.addListener(this._handleSelectedViewportChanged);
-        const stateData = await this._setupSheets();
-        if (this._isMounted)
-            this.setState(stateData);
-    }
-    /** Removes listeners when component will unmount */
-    componentWillUnmount() {
-        this._isMounted = false;
-        SheetsModalFrontstage_1.CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);
-        imodel_components_react_1.ViewportComponentEvents.onViewIdChangedEvent.removeListener(this._handleViewIdChanged);
-        core_frontend_1.IModelApp.viewManager.onSelectedViewportChanged.removeListener(this._handleSelectedViewportChanged);
-    }
-    /** Queries for sheet info and sets as sheetData */
-    async _setupSheets() {
-        const stateData = {
-            index: 0,
-            sheetData: [],
-        };
-        // istanbul ignore else
-        if (!this.props.iModelConnection || !this.props.iModelConnection.views.getViewList)
-            return stateData;
-        // istanbul ignore next
-        let viewId = "";
-        // istanbul ignore next
-        if (this._viewport) {
-            viewId = this._viewport.view.id.toString();
-        }
-        // istanbul ignore next
-        const sheets = await this.props.iModelConnection.views.getViewList({ from: "BisCore.SheetViewDefinition" });
-        // istanbul ignore next
-        sheets.forEach((viewSpec, index) => {
-            stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });
-            if (viewSpec.id === viewId)
-                stateData.index = index;
-        });
-        // istanbul ignore next
-        return stateData;
-    }
-    /** @internal */
-    render() {
-        const name = (this.state.sheetData.length > 0) ? /* istanbul ignore next */ this.state.sheetData[this.state.index].name : "";
-        const sheet = UiFramework_1.UiFramework.translate("general.sheet");
-        const ofStr = components_react_1.UiComponents.translate("general.of");
-        const leftIndex = this.state.index === 0 ? this.state.sheetData.length - 1 : /* istanbul ignore next */ this.state.index - 1;
-        const rightIndex = this.state.index >= this.state.sheetData.length - 1 ? 0 : /* istanbul ignore next */ this.state.index + 1;
-        const leftTitle = this.state.sheetData[leftIndex] ? /* istanbul ignore next */ this.state.sheetData[leftIndex].name : undefined;
-        const rightTitle = this.state.sheetData[rightIndex] ? /* istanbul ignore next */ this.state.sheetData[rightIndex].name : undefined;
-        let content;
-        // istanbul ignore if
-        if (this.state.sheetData.length > 0) {
-            content = (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "sheet-title" }, sheet),
-                React.createElement("div", { className: "sheet-name", title: name, onClick: this._handleOnClickSheetName, role: "button", tabIndex: -1 }, name),
-                React.createElement("div", { className: "sheet-container" },
-                    React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", onClick: this._handleOnClickLeftArrow, tabIndex: -1, title: leftTitle },
-                        React.createElement(itwinui_icons_react_1.SvgChevronLeft, null)),
-                    React.createElement("div", null,
-                        this.state.index + 1,
-                        " ",
-                        ofStr,
-                        " ",
-                        this.state.sheetData.length),
-                    React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", onClick: this._handleOnClickRightArrow, role: "button", tabIndex: -1, title: rightTitle },
-                        React.createElement(itwinui_icons_react_1.SvgChevronRight, null)))));
-        }
-        else {
-            content = React.createElement(itwinui_react_1.ProgressRadial, { size: "x-small", indeterminate: true });
-        }
-        return (React.createElement("div", { className: (0, classnames_1.default)("uifw-sheet-navigation", this.props.className), style: this.props.style },
-            React.createElement("div", { className: "gradient" }),
-            content));
-    }
-    /** Updates view to currently set sheet */
-    // istanbul ignore next
-    async _updateView() {
-        const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);
-        if (this._viewport)
-            this._viewport.changeView(viewState);
-    }
-    /** Creates a new SheetsModalFrontstage */
-    // istanbul ignore next
-    modalFrontstage() {
-        return new SheetsModalFrontstage_1.SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);
-    }
-}
-exports.SheetNavigationAid = SheetNavigationAid;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetNavigationAid = exports.SheetNavigationAidControl = void 0;
+require("./SheetNavigationAid.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_frontend_1 = require("@itwin/core-frontend");
+const components_react_1 = require("@itwin/components-react");
+const imodel_components_react_1 = require("@itwin/imodel-components-react");
+const UiFramework_1 = require("../UiFramework");
+const ViewUtilities_1 = require("../utils/ViewUtilities");
+const NavigationAidControl_1 = require("./NavigationAidControl");
+const SheetsModalFrontstage_1 = require("./SheetsModalFrontstage");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/** A Sheet Navigation Aid control.
+ * @alpha
+ */
+class SheetNavigationAidControl extends NavigationAidControl_1.NavigationAidControl {
+    constructor(info, options) {
+        super(info, options);
+        this.reactNode = React.createElement(SheetNavigationAid, { iModelConnection: options.imodel });
+    }
+    // istanbul ignore next
+    getSize() { return "96px"; }
+}
+SheetNavigationAidControl.navigationAidId = "SheetNavigationAid";
+exports.SheetNavigationAidControl = SheetNavigationAidControl;
+/** A Sheet Navigation Aid.
+ * @alpha
+ */
+class SheetNavigationAid extends React.Component {
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        /** @internal */
+        this.state = {
+            index: 0,
+            sheetData: [],
+        };
+        /** Sets index of newly selected card */
+        this._handleCardSelected = (event) => {
+            event && this.setState({
+                index: event.index,
+            });
+        };
+        /** Updates view to the next lowest index in sheetData */
+        // istanbul ignore next
+        this._handleOnClickLeftArrow = () => {
+            this.setState((prevState) => ({ index: prevState.index <= 0 ? prevState.sheetData.length - 1 : prevState.index - 1 }), async () => this._updateView());
+        };
+        /** Updates view to next highest index in sheetData */
+        // istanbul ignore next
+        this._handleOnClickRightArrow = () => {
+            this.setState((prevState) => ({ index: (prevState.index + 1) % prevState.sheetData.length }), async () => this._updateView());
+        };
+        /** Handles a Viewport change & synchs the index */
+        // istanbul ignore next
+        this._handleSelectedViewportChanged = (args) => {
+            if (args.current) {
+                this._handleViewportChanged(args.current);
+            }
+        };
+        // istanbul ignore next
+        this._handleViewIdChanged = (args) => {
+            if (this._viewport === args.viewport)
+                this._handleViewportChanged(args.viewport);
+        };
+        /** Handles a Viewport change & synchs the index */
+        // istanbul ignore next
+        this._handleViewportChanged = (viewport) => {
+            const className = ViewUtilities_1.ViewUtilities.getBisBaseClass(viewport.view.classFullName);
+            if (ViewUtilities_1.ViewUtilities.isSheet(className)) {
+                this._viewport = viewport;
+                const viewId = this._viewport.view.id.toString();
+                const index = this.state.sheetData.findIndex((sheetData) => {
+                    return (viewId === sheetData.viewId);
+                });
+                if (index >= 0)
+                    this.setState({ index });
+            }
+        };
+        /** Opens a new SheetsModelFrontstage on sheetName click */
+        // istanbul ignore next
+        this._handleOnClickSheetName = () => {
+            UiFramework_1.UiFramework.frontstages.openModalFrontstage(this.modalFrontstage());
+        };
+        this._viewport = core_frontend_1.IModelApp.viewManager.selectedView;
+    }
+    /** Adds listeners when components mounts */
+    async componentDidMount() {
+        this._isMounted = true;
+        SheetsModalFrontstage_1.CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);
+        imodel_components_react_1.ViewportComponentEvents.onViewIdChangedEvent.addListener(this._handleViewIdChanged);
+        core_frontend_1.IModelApp.viewManager.onSelectedViewportChanged.addListener(this._handleSelectedViewportChanged);
+        const stateData = await this._setupSheets();
+        if (this._isMounted)
+            this.setState(stateData);
+    }
+    /** Removes listeners when component will unmount */
+    componentWillUnmount() {
+        this._isMounted = false;
+        SheetsModalFrontstage_1.CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);
+        imodel_components_react_1.ViewportComponentEvents.onViewIdChangedEvent.removeListener(this._handleViewIdChanged);
+        core_frontend_1.IModelApp.viewManager.onSelectedViewportChanged.removeListener(this._handleSelectedViewportChanged);
+    }
+    /** Queries for sheet info and sets as sheetData */
+    async _setupSheets() {
+        const stateData = {
+            index: 0,
+            sheetData: [],
+        };
+        // istanbul ignore else
+        if (!this.props.iModelConnection || !this.props.iModelConnection.views.getViewList)
+            return stateData;
+        // istanbul ignore next
+        let viewId = "";
+        // istanbul ignore next
+        if (this._viewport) {
+            viewId = this._viewport.view.id.toString();
+        }
+        // istanbul ignore next
+        const sheets = await this.props.iModelConnection.views.getViewList({ from: "BisCore.SheetViewDefinition" });
+        // istanbul ignore next
+        sheets.forEach((viewSpec, index) => {
+            stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });
+            if (viewSpec.id === viewId)
+                stateData.index = index;
+        });
+        // istanbul ignore next
+        return stateData;
+    }
+    /** @internal */
+    render() {
+        const name = (this.state.sheetData.length > 0) ? /* istanbul ignore next */ this.state.sheetData[this.state.index].name : "";
+        const sheet = UiFramework_1.UiFramework.translate("general.sheet");
+        const ofStr = components_react_1.UiComponents.translate("general.of");
+        const leftIndex = this.state.index === 0 ? this.state.sheetData.length - 1 : /* istanbul ignore next */ this.state.index - 1;
+        const rightIndex = this.state.index >= this.state.sheetData.length - 1 ? 0 : /* istanbul ignore next */ this.state.index + 1;
+        const leftTitle = this.state.sheetData[leftIndex] ? /* istanbul ignore next */ this.state.sheetData[leftIndex].name : undefined;
+        const rightTitle = this.state.sheetData[rightIndex] ? /* istanbul ignore next */ this.state.sheetData[rightIndex].name : undefined;
+        let content;
+        // istanbul ignore if
+        if (this.state.sheetData.length > 0) {
+            content = (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "sheet-title" }, sheet),
+                React.createElement("div", { className: "sheet-name", title: name, onClick: this._handleOnClickSheetName, role: "button", tabIndex: -1 }, name),
+                React.createElement("div", { className: "sheet-container" },
+                    React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", onClick: this._handleOnClickLeftArrow, tabIndex: -1, title: leftTitle },
+                        React.createElement(itwinui_icons_react_1.SvgChevronLeft, null)),
+                    React.createElement("div", null,
+                        this.state.index + 1,
+                        " ",
+                        ofStr,
+                        " ",
+                        this.state.sheetData.length),
+                    React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", onClick: this._handleOnClickRightArrow, role: "button", tabIndex: -1, title: rightTitle },
+                        React.createElement(itwinui_icons_react_1.SvgChevronRight, null)))));
+        }
+        else {
+            content = React.createElement(itwinui_react_1.ProgressRadial, { size: "x-small", indeterminate: true });
+        }
+        return (React.createElement("div", { className: (0, classnames_1.default)("uifw-sheet-navigation", this.props.className), style: this.props.style },
+            React.createElement("div", { className: "gradient" }),
+            content));
+    }
+    /** Updates view to currently set sheet */
+    // istanbul ignore next
+    async _updateView() {
+        const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);
+        if (this._viewport)
+            this._viewport.changeView(viewState);
+    }
+    /** Creates a new SheetsModalFrontstage */
+    // istanbul ignore next
+    modalFrontstage() {
+        return new SheetsModalFrontstage_1.SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);
+    }
+}
+exports.SheetNavigationAid = SheetNavigationAid;
 //# sourceMappingURL=SheetNavigationAid.js.map

package/lib/cjs/appui-react/navigationaids/SheetNavigationAid.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetNavigationAid.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/SheetNavigationAid.tsx"],"names":[],"mappings":"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","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 NavigationAids\r\n */\r\n\r\nimport \"./SheetNavigationAid.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { IModelApp, IModelConnection, ScreenViewport, SelectedViewportChangedArgs } from \"@itwin/core-frontend\";\r\nimport { UiComponents } from \"@itwin/components-react\";\r\nimport { ViewIdChangedEventArgs, ViewportComponentEvents } from \"@itwin/imodel-components-react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\r\nimport { ModalFrontstageInfo } from \"../framework/FrameworkFrontstages\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { ViewUtilities } from \"../utils/ViewUtilities\";\r\nimport { NavigationAidControl } from \"./NavigationAidControl\";\r\nimport { CardContainer, CardSelectedEventArgs, SheetsModalFrontstage } from \"./SheetsModalFrontstage\";\r\nimport { IconButton, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** A Sheet Navigation Aid control.\r\n * @alpha\r\n */\r\nexport class SheetNavigationAidControl extends NavigationAidControl {\r\n  public static navigationAidId = \"SheetNavigationAid\";\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n    this.reactNode = <SheetNavigationAid iModelConnection={options.imodel} />;\r\n  }\r\n\r\n  // istanbul ignore next\r\n  public override getSize(): string | undefined { return \"96px\"; }\r\n}\r\n\r\n/** Data displayed about sheet\r\n * @alpha\r\n */\r\nexport interface SheetData {\r\n  name: string;\r\n  viewId: string;\r\n}\r\n\r\n/** Properties for the [[SheetNavigationAid]] component\r\n * @alpha\r\n */\r\nexport interface SheetNavigationProps extends CommonProps {\r\n  iModelConnection: IModelConnection;\r\n}\r\n\r\n/** @internal */\r\ninterface SheetNavigationState {\r\n  index: number;\r\n  sheetData: SheetData[];\r\n}\r\n\r\n/** A Sheet Navigation Aid.\r\n * @alpha\r\n */\r\nexport class SheetNavigationAid extends React.Component<SheetNavigationProps, SheetNavigationState> {\r\n  private _isMounted = false;\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<SheetNavigationState> = {\r\n    index: 0,\r\n    sheetData: [],\r\n  };\r\n\r\n  private _viewport: ScreenViewport | undefined;\r\n\r\n  constructor(props: SheetNavigationProps) {\r\n    super(props);\r\n\r\n    this._viewport = IModelApp.viewManager.selectedView;\r\n  }\r\n\r\n  /** Adds listeners when components mounts */\r\n  public override async componentDidMount() {\r\n    this._isMounted = true;\r\n\r\n    CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);\r\n    ViewportComponentEvents.onViewIdChangedEvent.addListener(this._handleViewIdChanged);\r\n\r\n    IModelApp.viewManager.onSelectedViewportChanged.addListener(this._handleSelectedViewportChanged);\r\n\r\n    const stateData = await this._setupSheets();\r\n\r\n    if (this._isMounted)\r\n      this.setState(stateData);\r\n  }\r\n\r\n  /** Removes listeners when component will unmount */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n\r\n    CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);\r\n    ViewportComponentEvents.onViewIdChangedEvent.removeListener(this._handleViewIdChanged);\r\n\r\n    IModelApp.viewManager.onSelectedViewportChanged.removeListener(this._handleSelectedViewportChanged);\r\n  }\r\n\r\n  /** Queries for sheet info and sets as sheetData */\r\n  private async _setupSheets(): Promise<SheetNavigationState> {\r\n    const stateData: SheetNavigationState = {\r\n      index: 0,\r\n      sheetData: [],\r\n    };\r\n\r\n    // istanbul ignore else\r\n    if (!this.props.iModelConnection || !this.props.iModelConnection.views.getViewList)\r\n      return stateData;\r\n\r\n    // istanbul ignore next\r\n    let viewId = \"\";\r\n    // istanbul ignore next\r\n    if (this._viewport) {\r\n      viewId = this._viewport.view.id.toString();\r\n    }\r\n\r\n    // istanbul ignore next\r\n    const sheets = await this.props.iModelConnection.views.getViewList({ from: \"BisCore.SheetViewDefinition\" });\r\n    // istanbul ignore next\r\n    sheets.forEach((viewSpec: IModelConnection.ViewSpec, index: number) => {\r\n      stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });\r\n      if (viewSpec.id === viewId)\r\n        stateData.index = index;\r\n    });\r\n\r\n    // istanbul ignore next\r\n    return stateData;\r\n  }\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const name = (this.state.sheetData.length > 0) ? /* istanbul ignore next */ this.state.sheetData[this.state.index].name : \"\";\r\n    const sheet = UiFramework.translate(\"general.sheet\");\r\n    const ofStr = UiComponents.translate(\"general.of\");\r\n    const leftIndex = this.state.index === 0 ? this.state.sheetData.length - 1 : /* istanbul ignore next */ this.state.index - 1;\r\n    const rightIndex = this.state.index >= this.state.sheetData.length - 1 ? 0 : /* istanbul ignore next */this.state.index + 1;\r\n    const leftTitle = this.state.sheetData[leftIndex] ? /* istanbul ignore next */ this.state.sheetData[leftIndex].name : undefined;\r\n    const rightTitle = this.state.sheetData[rightIndex] ? /* istanbul ignore next */ this.state.sheetData[rightIndex].name : undefined;\r\n\r\n    let content: React.ReactNode;\r\n    // istanbul ignore if\r\n    if (this.state.sheetData.length > 0) {\r\n      content = (\r\n        <>\r\n          <div className=\"sheet-title\">{sheet}</div>\r\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n          <div className=\"sheet-name\" title={name} onClick={this._handleOnClickSheetName}\r\n            role=\"button\" tabIndex={-1}>\r\n            {name}\r\n          </div>\r\n          <div className=\"sheet-container\">\r\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n            <IconButton size=\"small\" styleType=\"borderless\" onClick={this._handleOnClickLeftArrow}\r\n              tabIndex={-1} title={leftTitle}><SvgChevronLeft /></IconButton>\r\n            <div>{this.state.index + 1} {ofStr} {this.state.sheetData.length}</div>\r\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n            <IconButton size=\"small\" styleType=\"borderless\"  onClick={this._handleOnClickRightArrow}\r\n              role=\"button\" tabIndex={-1} title={rightTitle}><SvgChevronRight /></IconButton>\r\n          </div>\r\n        </>\r\n      );\r\n    } else {\r\n      content = <ProgressRadial size=\"x-small\" indeterminate />;\r\n    }\r\n\r\n    return (\r\n      <div className={classnames(\"uifw-sheet-navigation\", this.props.className)} style={this.props.style}>\r\n        <div className=\"gradient\"></div>\r\n        {content}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Sets index of newly selected card */\r\n  private _handleCardSelected = (event: CardSelectedEventArgs) => {\r\n    event && this.setState({\r\n      index: event.index,\r\n    });\r\n  };\r\n\r\n  /** Updates view to the next lowest index in sheetData */\r\n  // istanbul ignore next\r\n  private _handleOnClickLeftArrow = () => {\r\n    this.setState(\r\n      (prevState) => ({ index: prevState.index <= 0 ? prevState.sheetData.length - 1 : prevState.index - 1 }),\r\n      async () => this._updateView());\r\n  };\r\n\r\n  /** Updates view to next highest index in sheetData */\r\n  // istanbul ignore next\r\n  private _handleOnClickRightArrow = () => {\r\n    this.setState(\r\n      (prevState) => ({ index: (prevState.index + 1) % prevState.sheetData.length }),\r\n      async () => this._updateView());\r\n  };\r\n\r\n  /** Handles a Viewport change & synchs the index */\r\n  // istanbul ignore next\r\n  private _handleSelectedViewportChanged = (args: SelectedViewportChangedArgs) => {\r\n    if (args.current) {\r\n      this._handleViewportChanged(args.current);\r\n    }\r\n  };\r\n\r\n  // istanbul ignore next\r\n  private _handleViewIdChanged = (args: ViewIdChangedEventArgs) => {\r\n    if (this._viewport === args.viewport)\r\n      this._handleViewportChanged(args.viewport as ScreenViewport);\r\n  };\r\n\r\n  /** Handles a Viewport change & synchs the index */\r\n  // istanbul ignore next\r\n  private _handleViewportChanged = (viewport: ScreenViewport) => {\r\n    const className = ViewUtilities.getBisBaseClass(viewport.view.classFullName);\r\n\r\n    if (ViewUtilities.isSheet(className)) {\r\n      this._viewport = viewport;\r\n\r\n      const viewId = this._viewport.view.id.toString();\r\n\r\n      const index = this.state.sheetData.findIndex((sheetData: SheetData) => {\r\n        return (viewId === sheetData.viewId);\r\n      });\r\n\r\n      if (index >= 0)\r\n        this.setState({ index });\r\n    }\r\n  };\r\n\r\n  /** Updates view to currently set sheet */\r\n  // istanbul ignore next\r\n  private async _updateView() {\r\n    const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);\r\n    if (this._viewport)\r\n      this._viewport.changeView(viewState);\r\n  }\r\n\r\n  /** Creates a new SheetsModalFrontstage */\r\n  // istanbul ignore next\r\n  private modalFrontstage(): ModalFrontstageInfo {\r\n    return new SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);\r\n  }\r\n\r\n  /** Opens a new SheetsModelFrontstage on sheetName click */\r\n  // istanbul ignore next\r\n  private _handleOnClickSheetName = () => {\r\n    UiFramework.frontstages.openModalFrontstage(this.modalFrontstage());\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"SheetNavigationAid.js","sourceRoot":"","sources":["../../../../src/appui-react/navigationaids/SheetNavigationAid.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 NavigationAids\n */\n\nimport \"./SheetNavigationAid.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { IModelApp, IModelConnection, ScreenViewport, SelectedViewportChangedArgs } from \"@itwin/core-frontend\";\nimport { UiComponents } from \"@itwin/components-react\";\nimport { ViewIdChangedEventArgs, ViewportComponentEvents } from \"@itwin/imodel-components-react\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\nimport { ModalFrontstageInfo } from \"../framework/FrameworkFrontstages\";\nimport { UiFramework } from \"../UiFramework\";\nimport { ViewUtilities } from \"../utils/ViewUtilities\";\nimport { NavigationAidControl } from \"./NavigationAidControl\";\nimport { CardContainer, CardSelectedEventArgs, SheetsModalFrontstage } from \"./SheetsModalFrontstage\";\nimport { IconButton, ProgressRadial } from \"@itwin/itwinui-react\";\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\n\n/** A Sheet Navigation Aid control.\n * @alpha\n */\nexport class SheetNavigationAidControl extends NavigationAidControl {\n  public static navigationAidId = \"SheetNavigationAid\";\n\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n    this.reactNode = <SheetNavigationAid iModelConnection={options.imodel} />;\n  }\n\n  // istanbul ignore next\n  public override getSize(): string | undefined { return \"96px\"; }\n}\n\n/** Data displayed about sheet\n * @alpha\n */\nexport interface SheetData {\n  name: string;\n  viewId: string;\n}\n\n/** Properties for the [[SheetNavigationAid]] component\n * @alpha\n */\nexport interface SheetNavigationProps extends CommonProps {\n  iModelConnection: IModelConnection;\n}\n\n/** @internal */\ninterface SheetNavigationState {\n  index: number;\n  sheetData: SheetData[];\n}\n\n/** A Sheet Navigation Aid.\n * @alpha\n */\nexport class SheetNavigationAid extends React.Component<SheetNavigationProps, SheetNavigationState> {\n  private _isMounted = false;\n\n  /** @internal */\n  public override readonly state: Readonly<SheetNavigationState> = {\n    index: 0,\n    sheetData: [],\n  };\n\n  private _viewport: ScreenViewport | undefined;\n\n  constructor(props: SheetNavigationProps) {\n    super(props);\n\n    this._viewport = IModelApp.viewManager.selectedView;\n  }\n\n  /** Adds listeners when components mounts */\n  public override async componentDidMount() {\n    this._isMounted = true;\n\n    CardContainer.onCardSelectedEvent.addListener(this._handleCardSelected);\n    ViewportComponentEvents.onViewIdChangedEvent.addListener(this._handleViewIdChanged);\n\n    IModelApp.viewManager.onSelectedViewportChanged.addListener(this._handleSelectedViewportChanged);\n\n    const stateData = await this._setupSheets();\n\n    if (this._isMounted)\n      this.setState(stateData);\n  }\n\n  /** Removes listeners when component will unmount */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n\n    CardContainer.onCardSelectedEvent.removeListener(this._handleCardSelected);\n    ViewportComponentEvents.onViewIdChangedEvent.removeListener(this._handleViewIdChanged);\n\n    IModelApp.viewManager.onSelectedViewportChanged.removeListener(this._handleSelectedViewportChanged);\n  }\n\n  /** Queries for sheet info and sets as sheetData */\n  private async _setupSheets(): Promise<SheetNavigationState> {\n    const stateData: SheetNavigationState = {\n      index: 0,\n      sheetData: [],\n    };\n\n    // istanbul ignore else\n    if (!this.props.iModelConnection || !this.props.iModelConnection.views.getViewList)\n      return stateData;\n\n    // istanbul ignore next\n    let viewId = \"\";\n    // istanbul ignore next\n    if (this._viewport) {\n      viewId = this._viewport.view.id.toString();\n    }\n\n    // istanbul ignore next\n    const sheets = await this.props.iModelConnection.views.getViewList({ from: \"BisCore.SheetViewDefinition\" });\n    // istanbul ignore next\n    sheets.forEach((viewSpec: IModelConnection.ViewSpec, index: number) => {\n      stateData.sheetData.push({ name: viewSpec.name, viewId: viewSpec.id });\n      if (viewSpec.id === viewId)\n        stateData.index = index;\n    });\n\n    // istanbul ignore next\n    return stateData;\n  }\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const name = (this.state.sheetData.length > 0) ? /* istanbul ignore next */ this.state.sheetData[this.state.index].name : \"\";\n    const sheet = UiFramework.translate(\"general.sheet\");\n    const ofStr = UiComponents.translate(\"general.of\");\n    const leftIndex = this.state.index === 0 ? this.state.sheetData.length - 1 : /* istanbul ignore next */ this.state.index - 1;\n    const rightIndex = this.state.index >= this.state.sheetData.length - 1 ? 0 : /* istanbul ignore next */this.state.index + 1;\n    const leftTitle = this.state.sheetData[leftIndex] ? /* istanbul ignore next */ this.state.sheetData[leftIndex].name : undefined;\n    const rightTitle = this.state.sheetData[rightIndex] ? /* istanbul ignore next */ this.state.sheetData[rightIndex].name : undefined;\n\n    let content: React.ReactNode;\n    // istanbul ignore if\n    if (this.state.sheetData.length > 0) {\n      content = (\n        <>\n          <div className=\"sheet-title\">{sheet}</div>\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n          <div className=\"sheet-name\" title={name} onClick={this._handleOnClickSheetName}\n            role=\"button\" tabIndex={-1}>\n            {name}\n          </div>\n          <div className=\"sheet-container\">\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <IconButton size=\"small\" styleType=\"borderless\" onClick={this._handleOnClickLeftArrow}\n              tabIndex={-1} title={leftTitle}><SvgChevronLeft /></IconButton>\n            <div>{this.state.index + 1} {ofStr} {this.state.sheetData.length}</div>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n            <IconButton size=\"small\" styleType=\"borderless\"  onClick={this._handleOnClickRightArrow}\n              role=\"button\" tabIndex={-1} title={rightTitle}><SvgChevronRight /></IconButton>\n          </div>\n        </>\n      );\n    } else {\n      content = <ProgressRadial size=\"x-small\" indeterminate />;\n    }\n\n    return (\n      <div className={classnames(\"uifw-sheet-navigation\", this.props.className)} style={this.props.style}>\n        <div className=\"gradient\"></div>\n        {content}\n      </div>\n    );\n  }\n\n  /** Sets index of newly selected card */\n  private _handleCardSelected = (event: CardSelectedEventArgs) => {\n    event && this.setState({\n      index: event.index,\n    });\n  };\n\n  /** Updates view to the next lowest index in sheetData */\n  // istanbul ignore next\n  private _handleOnClickLeftArrow = () => {\n    this.setState(\n      (prevState) => ({ index: prevState.index <= 0 ? prevState.sheetData.length - 1 : prevState.index - 1 }),\n      async () => this._updateView());\n  };\n\n  /** Updates view to next highest index in sheetData */\n  // istanbul ignore next\n  private _handleOnClickRightArrow = () => {\n    this.setState(\n      (prevState) => ({ index: (prevState.index + 1) % prevState.sheetData.length }),\n      async () => this._updateView());\n  };\n\n  /** Handles a Viewport change & synchs the index */\n  // istanbul ignore next\n  private _handleSelectedViewportChanged = (args: SelectedViewportChangedArgs) => {\n    if (args.current) {\n      this._handleViewportChanged(args.current);\n    }\n  };\n\n  // istanbul ignore next\n  private _handleViewIdChanged = (args: ViewIdChangedEventArgs) => {\n    if (this._viewport === args.viewport)\n      this._handleViewportChanged(args.viewport as ScreenViewport);\n  };\n\n  /** Handles a Viewport change & synchs the index */\n  // istanbul ignore next\n  private _handleViewportChanged = (viewport: ScreenViewport) => {\n    const className = ViewUtilities.getBisBaseClass(viewport.view.classFullName);\n\n    if (ViewUtilities.isSheet(className)) {\n      this._viewport = viewport;\n\n      const viewId = this._viewport.view.id.toString();\n\n      const index = this.state.sheetData.findIndex((sheetData: SheetData) => {\n        return (viewId === sheetData.viewId);\n      });\n\n      if (index >= 0)\n        this.setState({ index });\n    }\n  };\n\n  /** Updates view to currently set sheet */\n  // istanbul ignore next\n  private async _updateView() {\n    const viewState = await this.props.iModelConnection.views.load(this.state.sheetData[this.state.index].viewId);\n    if (this._viewport)\n      this._viewport.changeView(viewState);\n  }\n\n  /** Creates a new SheetsModalFrontstage */\n  // istanbul ignore next\n  private modalFrontstage(): ModalFrontstageInfo {\n    return new SheetsModalFrontstage(this.state.sheetData, this.props.iModelConnection, this.state.index);\n  }\n\n  /** Opens a new SheetsModelFrontstage on sheetName click */\n  // istanbul ignore next\n  private _handleOnClickSheetName = () => {\n    UiFramework.frontstages.openModalFrontstage(this.modalFrontstage());\n  };\n}\n"]}

package/lib/cjs/appui-react/navigationaids/SheetNavigationAid.scss

@@ -1,67 +1,67 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/index";
-
-.uifw-sheet-navigation {
-  height: 96px;
-  width: 96px;
-  box-sizing: border-box;
-  border-color: $buic-background-widget-stroke;
-  border-width: 1px;
-  border-radius: var(--iui-border-radius-1);
-  border-style: solid;
-  color: var(--iui-color-text);
-  background: $buic-background-window;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-
-  > .sheet-title {
-    font-size: 12px;
-    font-weight: bold;
-  }
-
-  > .sheet-name {
-    cursor: pointer;
-    font-size: 11px;
-    z-index: 1;
-    height: 46px;
-    overflow: hidden;
-    margin: 0 2px;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  > .sheet-container {
-    flex: 1 1 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 11px;
-
-    > * {
-      text-align: center;
-    }
-  }
-
-  > .gradient {
-    background: linear-gradient(
-      to bottom,
-      $buic-button-gradient1,
-      $buic-button-gradient2
-    );
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-
-    display: none;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/index";
+
+.uifw-sheet-navigation {
+  height: 96px;
+  width: 96px;
+  box-sizing: border-box;
+  border-color: $buic-background-widget-stroke;
+  border-width: 1px;
+  border-radius: var(--iui-border-radius-1);
+  border-style: solid;
+  color: var(--iui-color-text);
+  background: $buic-background-window;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  > .sheet-title {
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  > .sheet-name {
+    cursor: pointer;
+    font-size: 11px;
+    z-index: 1;
+    height: 46px;
+    overflow: hidden;
+    margin: 0 2px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  > .sheet-container {
+    flex: 1 1 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 11px;
+
+    > * {
+      text-align: center;
+    }
+  }
+
+  > .gradient {
+    background: linear-gradient(
+      to bottom,
+      $buic-button-gradient1,
+      $buic-button-gradient2
+    );
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    display: none;
+  }
+}