@itwin/appui-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/appui-react/statusfields/MessageCenter.js

@@ -1,123 +1,123 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Notification
- */
-import * as React from "react";
-import { OutputMessagePriority } from "@itwin/core-frontend";
-import { FooterPopup, MessageCenter, MessageCenterDialog, MessageCenterMessage, MessageCenterTab } from "@itwin/appui-layout-react";
-import { MessageManager } from "../messages/MessageManager";
-import { MessageSpan } from "../messages/MessageSpan";
-import { UiFramework } from "../UiFramework";
-import { Icon } from "@itwin/core-react";
-import classnames from "classnames";
-/** Enum for the [[MessageCenterField]] active tab
- * @internal
- */
-var MessageCenterActiveTab;
-(function (MessageCenterActiveTab) {
-    MessageCenterActiveTab[MessageCenterActiveTab["AllMessages"] = 0] = "AllMessages";
-    MessageCenterActiveTab[MessageCenterActiveTab["Problems"] = 1] = "Problems";
-})(MessageCenterActiveTab || (MessageCenterActiveTab = {}));
-/** Message Center Field React component.
- * @public
- */
-export class MessageCenterField extends React.Component {
-    constructor(p) {
-        super(p);
-        this._indicator = React.createRef();
-        this._title = UiFramework.translate("messageCenter.messages");
-        this._handleMessagesUpdatedEvent = () => {
-            // istanbul ignore else
-            if (this._unloadMessagesUpdatedHandler)
-                this.setState({ messageCount: MessageManager.messages.length });
-        };
-        this._handleOpenMessageCenterEvent = () => {
-            this.setIsOpen(true);
-        };
-        this._handleClose = () => {
-            this.setIsOpen(false);
-        };
-        this._handleOutsideClick = (e) => {
-            if (!this._indicator.current ||
-                !(e.target instanceof Node) ||
-                this._indicator.current.contains(e.target))
-                return;
-            this._handleClose();
-        };
-        this._handleMessageIndicatorClick = () => {
-            this.setIsOpen(!this.state.isOpen);
-        };
-        this._changeActiveTab = (tab) => {
-            this.setState({ activeTab: tab });
-        };
-        this.state = {
-            activeTab: MessageCenterActiveTab.AllMessages,
-            target: null,
-            messageCount: MessageManager.messages.length,
-            isOpen: false,
-        };
-    }
-    /** @internal */
-    componentDidMount() {
-        this._unloadMessagesUpdatedHandler = MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent, this);
-        this._removeOpenMessagesCenterHandler = MessageManager.onOpenMessageCenterEvent.addListener(this._handleOpenMessageCenterEvent, this);
-        MessageManager.registerAnimateOutToElement(this._indicator.current);
-    }
-    /** @internal */
-    componentWillUnmount() {
-        // istanbul ignore else
-        if (this._unloadMessagesUpdatedHandler) {
-            this._unloadMessagesUpdatedHandler();
-            this._unloadMessagesUpdatedHandler = undefined;
-        }
-        // istanbul ignore else
-        if (this._removeOpenMessagesCenterHandler) {
-            this._removeOpenMessagesCenterHandler();
-            this._removeOpenMessagesCenterHandler = undefined;
-        }
-    }
-    render() {
-        const tooltip = `${this.state.messageCount} ${this._title}`;
-        const divStyle = { ...this.props.style, height: "100%" };
-        const footerMessages = (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: this.props.className, style: divStyle, title: tooltip },
-                React.createElement(MessageCenter, { indicatorRef: this._indicator, label: this._title, onClick: this._handleMessageIndicatorClick }, this.state.messageCount.toString())),
-            React.createElement(FooterPopup, { isOpen: this.state.isOpen, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this._indicator.current },
-                React.createElement(MessageCenterDialog, { prompt: UiFramework.translate("messageCenter.prompt"), tabs: React.createElement(React.Fragment, null,
-                        React.createElement(MessageCenterTab, { isActive: this.state.activeTab === MessageCenterActiveTab.AllMessages, onClick: () => this._changeActiveTab(MessageCenterActiveTab.AllMessages) }, UiFramework.translate("messageCenter.all")),
-                        React.createElement(MessageCenterTab, { isActive: this.state.activeTab === MessageCenterActiveTab.Problems, onClick: () => this._changeActiveTab(MessageCenterActiveTab.Problems) }, UiFramework.translate("messageCenter.errors"))), title: this._title }, this.getMessages()))));
-        return footerMessages;
-    }
-    getMessages() {
-        const messages = MessageManager.messages.slice(0).reverse();
-        const tabRows = new Array();
-        messages.forEach((details, index) => {
-            /* istanbul ignore else */
-            if (this.state.activeTab === MessageCenterActiveTab.AllMessages || this.isProblemStatus(details.priority)) {
-                const iconClassName = classnames("icon", "notifymessage-icon");
-                const iconSpec = MessageManager.getIconSpecFromDetails(details);
-                const message = details.briefMessage;
-                tabRows.push(React.createElement(MessageCenterMessage, { key: index.toString(), icon: React.createElement(Icon, { iconSpec: iconSpec, className: iconClassName }) },
-                    React.createElement(MessageSpan, { message: message }),
-                    details.detailedMessage &&
-                        React.createElement(React.Fragment, null,
-                            React.createElement("br", null),
-                            React.createElement(MessageSpan, { className: "iui-text-small", message: details.detailedMessage }))));
-            }
-        });
-        return tabRows;
-    }
-    isProblemStatus(priority) {
-        // See priority values in DgnPlatform defined in NotificationManager
-        if (priority === OutputMessagePriority.Error || priority === OutputMessagePriority.Fatal)
-            return true;
-        return false;
-    }
-    setIsOpen(isOpen) {
-        this.setState({ isOpen });
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Notification
+ */
+import * as React from "react";
+import { OutputMessagePriority } from "@itwin/core-frontend";
+import { FooterPopup, MessageCenter, MessageCenterDialog, MessageCenterMessage, MessageCenterTab } from "@itwin/appui-layout-react";
+import { MessageManager } from "../messages/MessageManager";
+import { MessageSpan } from "../messages/MessageSpan";
+import { UiFramework } from "../UiFramework";
+import { Icon } from "@itwin/core-react";
+import classnames from "classnames";
+/** Enum for the [[MessageCenterField]] active tab
+ * @internal
+ */
+var MessageCenterActiveTab;
+(function (MessageCenterActiveTab) {
+    MessageCenterActiveTab[MessageCenterActiveTab["AllMessages"] = 0] = "AllMessages";
+    MessageCenterActiveTab[MessageCenterActiveTab["Problems"] = 1] = "Problems";
+})(MessageCenterActiveTab || (MessageCenterActiveTab = {}));
+/** Message Center Field React component.
+ * @public
+ */
+export class MessageCenterField extends React.Component {
+    constructor(p) {
+        super(p);
+        this._indicator = React.createRef();
+        this._title = UiFramework.translate("messageCenter.messages");
+        this._handleMessagesUpdatedEvent = () => {
+            // istanbul ignore else
+            if (this._unloadMessagesUpdatedHandler)
+                this.setState({ messageCount: MessageManager.messages.length });
+        };
+        this._handleOpenMessageCenterEvent = () => {
+            this.setIsOpen(true);
+        };
+        this._handleClose = () => {
+            this.setIsOpen(false);
+        };
+        this._handleOutsideClick = (e) => {
+            if (!this._indicator.current ||
+                !(e.target instanceof Node) ||
+                this._indicator.current.contains(e.target))
+                return;
+            this._handleClose();
+        };
+        this._handleMessageIndicatorClick = () => {
+            this.setIsOpen(!this.state.isOpen);
+        };
+        this._changeActiveTab = (tab) => {
+            this.setState({ activeTab: tab });
+        };
+        this.state = {
+            activeTab: MessageCenterActiveTab.AllMessages,
+            target: null,
+            messageCount: MessageManager.messages.length,
+            isOpen: false,
+        };
+    }
+    /** @internal */
+    componentDidMount() {
+        this._unloadMessagesUpdatedHandler = MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent, this);
+        this._removeOpenMessagesCenterHandler = MessageManager.onOpenMessageCenterEvent.addListener(this._handleOpenMessageCenterEvent, this);
+        MessageManager.registerAnimateOutToElement(this._indicator.current);
+    }
+    /** @internal */
+    componentWillUnmount() {
+        // istanbul ignore else
+        if (this._unloadMessagesUpdatedHandler) {
+            this._unloadMessagesUpdatedHandler();
+            this._unloadMessagesUpdatedHandler = undefined;
+        }
+        // istanbul ignore else
+        if (this._removeOpenMessagesCenterHandler) {
+            this._removeOpenMessagesCenterHandler();
+            this._removeOpenMessagesCenterHandler = undefined;
+        }
+    }
+    render() {
+        const tooltip = `${this.state.messageCount} ${this._title}`;
+        const divStyle = { ...this.props.style, height: "100%" };
+        const footerMessages = (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: this.props.className, style: divStyle, title: tooltip },
+                React.createElement(MessageCenter, { indicatorRef: this._indicator, label: this._title, onClick: this._handleMessageIndicatorClick }, this.state.messageCount.toString())),
+            React.createElement(FooterPopup, { isOpen: this.state.isOpen, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this._indicator.current },
+                React.createElement(MessageCenterDialog, { prompt: UiFramework.translate("messageCenter.prompt"), tabs: React.createElement(React.Fragment, null,
+                        React.createElement(MessageCenterTab, { isActive: this.state.activeTab === MessageCenterActiveTab.AllMessages, onClick: () => this._changeActiveTab(MessageCenterActiveTab.AllMessages) }, UiFramework.translate("messageCenter.all")),
+                        React.createElement(MessageCenterTab, { isActive: this.state.activeTab === MessageCenterActiveTab.Problems, onClick: () => this._changeActiveTab(MessageCenterActiveTab.Problems) }, UiFramework.translate("messageCenter.errors"))), title: this._title }, this.getMessages()))));
+        return footerMessages;
+    }
+    getMessages() {
+        const messages = MessageManager.messages.slice(0).reverse();
+        const tabRows = new Array();
+        messages.forEach((details, index) => {
+            /* istanbul ignore else */
+            if (this.state.activeTab === MessageCenterActiveTab.AllMessages || this.isProblemStatus(details.priority)) {
+                const iconClassName = classnames("icon", "notifymessage-icon");
+                const iconSpec = MessageManager.getIconSpecFromDetails(details);
+                const message = details.briefMessage;
+                tabRows.push(React.createElement(MessageCenterMessage, { key: index.toString(), icon: React.createElement(Icon, { iconSpec: iconSpec, className: iconClassName }) },
+                    React.createElement(MessageSpan, { message: message }),
+                    details.detailedMessage &&
+                        React.createElement(React.Fragment, null,
+                            React.createElement("br", null),
+                            React.createElement(MessageSpan, { className: "iui-text-small", message: details.detailedMessage }))));
+            }
+        });
+        return tabRows;
+    }
+    isProblemStatus(priority) {
+        // See priority values in DgnPlatform defined in NotificationManager
+        if (priority === OutputMessagePriority.Error || priority === OutputMessagePriority.Fatal)
+            return true;
+        return false;
+    }
+    setIsOpen(isOpen) {
+        this.setState({ isOpen });
+    }
+}
 //# sourceMappingURL=MessageCenter.js.map

package/lib/esm/appui-react/statusfields/SectionsField.d.ts

@@ -1,17 +1,17 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-/// <reference types="react" />
-import "./SectionsField.scss";
-import { CommonProps } from "@itwin/core-react";
-/** Sections Status Field Props
- * @beta
- */
-export interface SectionsStatusFieldProps extends CommonProps {
-    hideWhenUnused?: boolean;
-}
-/** Status Field for showing section extra tools for clearing and showing manipulators
- * @beta
- */
-export declare function SectionsStatusField(props: SectionsStatusFieldProps): JSX.Element;
+/** @packageDocumentation
+ * @module StatusBar
+ */
+/// <reference types="react" />
+import "./SectionsField.scss";
+import { CommonProps } from "@itwin/core-react";
+/** Sections Status Field Props
+ * @beta
+ */
+export interface SectionsStatusFieldProps extends CommonProps {
+    hideWhenUnused?: boolean;
+}
+/** Status Field for showing section extra tools for clearing and showing manipulators
+ * @beta
+ */
+export declare function SectionsStatusField(props: SectionsStatusFieldProps): JSX.Element;
 //# sourceMappingURL=SectionsField.d.ts.map

package/lib/esm/appui-react/statusfields/SectionsField.js

@@ -1,77 +1,77 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./SectionsField.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Dialog, FooterPopup, TitleBar } from "@itwin/appui-layout-react";
-import { IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider } from "@itwin/core-frontend";
-import { Button, ToggleSwitch } from "@itwin/itwinui-react";
-import { useActiveViewport } from "../hooks/useActiveViewport";
-import { UiFramework } from "../UiFramework";
-import { StatusBarLabelIndicator } from "../statusbar/LabelIndicator";
-import { IconSpecUtilities } from "@itwin/appui-abstract";
-import svgSectionTool from "@bentley/icons-generic/icons/section-tool.svg";
-/** Status Field for showing section extra tools for clearing and showing manipulators
- * @beta
- */
-export function SectionsStatusField(props) {
-    const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [
-        UiFramework.translate("tools.sectionTools"),
-        UiFramework.translate("tools.sectionClear"),
-        UiFramework.translate("tools.sectionShowHandles")
-    ], []);
-    const activeViewport = useActiveViewport();
-    const [showIndicator, setShowIndicator] = React.useState(false);
-    const [isPopupOpen, setPopupOpen] = React.useState(false);
-    const targetDiv = React.useRef(null);
-    const classes = (showIndicator) ? "uifw-indicator-fade-in" : "uifw-indicator-fade-out";
-    const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
-    React.useEffect(() => {
-        // istanbul ignore next
-        const onClipChanged = (viewport, _eventType, _provider) => {
-            if (viewport !== activeViewport)
-                return;
-            setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));
-            const isClipActive = !!activeViewport.view.getViewClip();
-            setShowIndicator(isClipActive || !props.hideWhenUnused);
-        };
-        const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();
-        setShowIndicator(clipActive || !props.hideWhenUnused);
-        setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));
-        ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
-        return () => {
-            // Get or create static ViewClipDecorationProvider
-            ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
-        };
-    }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
-    // istanbul ignore next
-    const toggleManipulators = async (e) => {
-        if (activeViewport) {
-            setHasManipulatorsShown(e.target.checked);
-            await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);
-        }
-    };
-    // istanbul ignore next
-    const handleClear = async () => {
-        await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());
-        setPopupOpen(false);
-    };
-    const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgSectionTool);
-    return (React.createElement("div", { className: "uifw-section-footer-popup-container" }, showIndicator &&
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: targetDiv, title: toolTip },
-                React.createElement(StatusBarLabelIndicator, { className: classes, iconSpec: iconSpec, onClick: () => setPopupOpen(!isPopupOpen) })),
-            React.createElement(FooterPopup, { target: targetDiv.current, onClose: () => setPopupOpen(false), isOpen: isPopupOpen },
-                React.createElement(Dialog, { titleBar: React.createElement(TitleBar, { title: toolTip }) },
-                    React.createElement("div", { className: "uifw-sections-footer-contents" },
-                        React.createElement(Button, { onClick: handleClear }, clearLabel),
-                        React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
-                            React.createElement("div", { className: classnames("uifw-sections-label") }, showHandlesLabel),
-                            React.createElement(ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown }))))))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SectionsField.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Dialog, FooterPopup, TitleBar } from "@itwin/appui-layout-react";
+import { IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider } from "@itwin/core-frontend";
+import { Button, ToggleSwitch } from "@itwin/itwinui-react";
+import { useActiveViewport } from "../hooks/useActiveViewport";
+import { UiFramework } from "../UiFramework";
+import { StatusBarLabelIndicator } from "../statusbar/LabelIndicator";
+import { IconSpecUtilities } from "@itwin/appui-abstract";
+import svgSectionTool from "@bentley/icons-generic/icons/section-tool.svg";
+/** Status Field for showing section extra tools for clearing and showing manipulators
+ * @beta
+ */
+export function SectionsStatusField(props) {
+    const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [
+        UiFramework.translate("tools.sectionTools"),
+        UiFramework.translate("tools.sectionClear"),
+        UiFramework.translate("tools.sectionShowHandles")
+    ], []);
+    const activeViewport = useActiveViewport();
+    const [showIndicator, setShowIndicator] = React.useState(false);
+    const [isPopupOpen, setPopupOpen] = React.useState(false);
+    const targetDiv = React.useRef(null);
+    const classes = (showIndicator) ? "uifw-field-fade-in" : "uifw-field-fade-out";
+    const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
+    React.useEffect(() => {
+        // istanbul ignore next
+        const onClipChanged = (viewport, _eventType, _provider) => {
+            if (viewport !== activeViewport)
+                return;
+            setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));
+            const isClipActive = !!activeViewport.view.getViewClip();
+            setShowIndicator(isClipActive || !props.hideWhenUnused);
+        };
+        const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();
+        setShowIndicator(clipActive || !props.hideWhenUnused);
+        setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));
+        ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
+        return () => {
+            // Get or create static ViewClipDecorationProvider
+            ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
+        };
+    }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
+    // istanbul ignore next
+    const toggleManipulators = async (e) => {
+        if (activeViewport) {
+            setHasManipulatorsShown(e.target.checked);
+            await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);
+        }
+    };
+    // istanbul ignore next
+    const handleClear = async () => {
+        await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());
+        setPopupOpen(false);
+    };
+    const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgSectionTool);
+    return (React.createElement("div", { className: "uifw-section-footer-popup-container" }, showIndicator &&
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: targetDiv, title: toolTip },
+                React.createElement(StatusBarLabelIndicator, { className: classes, iconSpec: iconSpec, onClick: () => setPopupOpen(!isPopupOpen) })),
+            React.createElement(FooterPopup, { target: targetDiv.current, onClose: () => setPopupOpen(false), isOpen: isPopupOpen },
+                React.createElement(Dialog, { titleBar: React.createElement(TitleBar, { title: toolTip }) },
+                    React.createElement("div", { className: "uifw-sections-footer-contents" },
+                        React.createElement(Button, { onClick: handleClear }, clearLabel),
+                        React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
+                            React.createElement("div", { className: classnames("uifw-sections-label") }, showHandlesLabel),
+                            React.createElement(ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown }))))))));
+}
 //# sourceMappingURL=SectionsField.js.map

package/lib/esm/appui-react/statusfields/SectionsField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.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 StatusBar\r\n */\r\n\r\nimport \"./SectionsField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Dialog, FooterPopup, TitleBar } from \"@itwin/appui-layout-react\";\r\nimport { ClipEventType, IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider, Viewport } from \"@itwin/core-frontend\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Button, ToggleSwitch } from \"@itwin/itwinui-react\";\r\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\r\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport svgSectionTool from \"@bentley/icons-generic/icons/section-tool.svg\";\r\n\r\n/** Sections Status Field Props\r\n * @beta\r\n */\r\nexport interface SectionsStatusFieldProps extends CommonProps {\r\n  hideWhenUnused?: boolean;\r\n}\r\n\r\n/** Status Field for showing section extra tools for clearing and showing manipulators\r\n * @beta\r\n */\r\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\r\n  const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [\r\n    UiFramework.translate(\"tools.sectionTools\"),\r\n    UiFramework.translate(\"tools.sectionClear\"),\r\n    UiFramework.translate(\"tools.sectionShowHandles\")], []);\r\n  const activeViewport = useActiveViewport();\r\n  const [showIndicator, setShowIndicator] = React.useState(false);\r\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\r\n  const targetDiv = React.useRef<HTMLDivElement>(null);\r\n  const classes = (showIndicator) ? \"uifw-indicator-fade-in\" : \"uifw-indicator-fade-out\";\r\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    // istanbul ignore next\r\n    const onClipChanged = (viewport: Viewport, _eventType: ClipEventType, _provider: ViewClipDecorationProvider) => {\r\n      if (viewport !== activeViewport)\r\n        return;\r\n\r\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\r\n      const isClipActive = !!activeViewport.view.getViewClip();\r\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\r\n    };\r\n\r\n    const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();\r\n    setShowIndicator(clipActive || !props.hideWhenUnused);\r\n    setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));\r\n\r\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);\r\n    return () => {\r\n      // Get or create static ViewClipDecorationProvider\r\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);\r\n    };\r\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\r\n\r\n  // istanbul ignore next\r\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (activeViewport) {\r\n      setHasManipulatorsShown(e.target.checked);\r\n      await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);\r\n    }\r\n  };\r\n\r\n  // istanbul ignore next\r\n  const handleClear = async () => {\r\n    await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());\r\n    setPopupOpen(false);\r\n  };\r\n  const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgSectionTool);\r\n\r\n  return (\r\n    <div className=\"uifw-section-footer-popup-container\">\r\n      {showIndicator &&\r\n        <>\r\n          <div ref={targetDiv} title={toolTip}>\r\n            <StatusBarLabelIndicator\r\n              className={classes}\r\n              iconSpec={iconSpec}\r\n              onClick={() => setPopupOpen(!isPopupOpen)}\r\n            />\r\n          </div>\r\n          <FooterPopup\r\n            target={targetDiv.current}\r\n            onClose={() => setPopupOpen(false)}\r\n            isOpen={isPopupOpen}>\r\n            <Dialog\r\n              titleBar={\r\n                <TitleBar title={toolTip} />\r\n              }>\r\n              <div className=\"uifw-sections-footer-contents\">\r\n                <Button onClick={handleClear}>{clearLabel}</Button>\r\n                <div className=\"uifw-uifw-sections-toggle-container\">\r\n                  <div className={classnames(\"uifw-sections-label\")}>{showHandlesLabel}</div>\r\n                  <ToggleSwitch className=\"uifw-sections-toggle\" onChange={toggleManipulators} checked={hasManipulatorsShown} />\r\n                </div>\r\n              </div>\r\n            </Dialog>\r\n          </FooterPopup>\r\n        </>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.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 StatusBar\r\n */\r\n\r\nimport \"./SectionsField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Dialog, FooterPopup, TitleBar } from \"@itwin/appui-layout-react\";\r\nimport { ClipEventType, IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider, Viewport } from \"@itwin/core-frontend\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Button, ToggleSwitch } from \"@itwin/itwinui-react\";\r\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\r\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport svgSectionTool from \"@bentley/icons-generic/icons/section-tool.svg\";\r\n\r\n/** Sections Status Field Props\r\n * @beta\r\n */\r\nexport interface SectionsStatusFieldProps extends CommonProps {\r\n  hideWhenUnused?: boolean;\r\n}\r\n\r\n/** Status Field for showing section extra tools for clearing and showing manipulators\r\n * @beta\r\n */\r\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\r\n  const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [\r\n    UiFramework.translate(\"tools.sectionTools\"),\r\n    UiFramework.translate(\"tools.sectionClear\"),\r\n    UiFramework.translate(\"tools.sectionShowHandles\")], []);\r\n  const activeViewport = useActiveViewport();\r\n  const [showIndicator, setShowIndicator] = React.useState(false);\r\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\r\n  const targetDiv = React.useRef<HTMLDivElement>(null);\r\n  const classes = (showIndicator) ? \"uifw-field-fade-in\" : \"uifw-field-fade-out\";\r\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    // istanbul ignore next\r\n    const onClipChanged = (viewport: Viewport, _eventType: ClipEventType, _provider: ViewClipDecorationProvider) => {\r\n      if (viewport !== activeViewport)\r\n        return;\r\n\r\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\r\n      const isClipActive = !!activeViewport.view.getViewClip();\r\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\r\n    };\r\n\r\n    const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();\r\n    setShowIndicator(clipActive || !props.hideWhenUnused);\r\n    setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));\r\n\r\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);\r\n    return () => {\r\n      // Get or create static ViewClipDecorationProvider\r\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);\r\n    };\r\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\r\n\r\n  // istanbul ignore next\r\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (activeViewport) {\r\n      setHasManipulatorsShown(e.target.checked);\r\n      await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);\r\n    }\r\n  };\r\n\r\n  // istanbul ignore next\r\n  const handleClear = async () => {\r\n    await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());\r\n    setPopupOpen(false);\r\n  };\r\n  const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgSectionTool);\r\n\r\n  return (\r\n    <div className=\"uifw-section-footer-popup-container\">\r\n      {showIndicator &&\r\n        <>\r\n          <div ref={targetDiv} title={toolTip}>\r\n            <StatusBarLabelIndicator\r\n              className={classes}\r\n              iconSpec={iconSpec}\r\n              onClick={() => setPopupOpen(!isPopupOpen)}\r\n            />\r\n          </div>\r\n          <FooterPopup\r\n            target={targetDiv.current}\r\n            onClose={() => setPopupOpen(false)}\r\n            isOpen={isPopupOpen}>\r\n            <Dialog\r\n              titleBar={\r\n                <TitleBar title={toolTip} />\r\n              }>\r\n              <div className=\"uifw-sections-footer-contents\">\r\n                <Button onClick={handleClear}>{clearLabel}</Button>\r\n                <div className=\"uifw-uifw-sections-toggle-container\">\r\n                  <div className={classnames(\"uifw-sections-label\")}>{showHandlesLabel}</div>\r\n                  <ToggleSwitch className=\"uifw-sections-toggle\" onChange={toggleManipulators} checked={hasManipulatorsShown} />\r\n                </div>\r\n              </div>\r\n            </Dialog>\r\n          </FooterPopup>\r\n        </>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/esm/appui-react/statusfields/SelectionInfo.d.ts

@@ -1,27 +1,27 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./SelectionInfo.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Defines properties supported by the SelectionInfo Field Component.
- */
-interface SelectionInfoFieldProps extends CommonProps {
-    selectionCount: number;
-}
-/**
- * Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- */
-declare class SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {
-    constructor(props: SelectionInfoFieldProps);
-    render(): React.ReactNode;
-}
-/**
- * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- * This React component is Redux connected.
- * @public
- */ export declare const SelectionInfoField: import("react-redux").ConnectedComponent<typeof SelectionInfoFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionInfoFieldComponent> & SelectionInfoFieldProps, "selectionCount">>;
-export {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SelectionInfo.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Defines properties supported by the SelectionInfo Field Component.
+ */
+interface SelectionInfoFieldProps extends CommonProps {
+    selectionCount: number;
+}
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ */
+declare class SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {
+    constructor(props: SelectionInfoFieldProps);
+    render(): React.ReactNode;
+}
+/**
+ * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * This React component is Redux connected.
+ * @public
+ */ export declare const SelectionInfoField: import("react-redux").ConnectedComponent<typeof SelectionInfoFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionInfoFieldComponent> & SelectionInfoFieldProps, "selectionCount">>;
+export {};
 //# sourceMappingURL=SelectionInfo.d.ts.map

package/lib/esm/appui-react/statusfields/SelectionInfo.js

@@ -1,46 +1,46 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./SelectionInfo.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { connect } from "react-redux";
-import { Icon } from "@itwin/core-react";
-import { FooterIndicator } from "@itwin/appui-layout-react";
-import { UiFramework } from "../UiFramework";
-import { SvgCursor } from "@itwin/itwinui-icons-react";
-/**
- * Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- */
-class SelectionInfoFieldComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        return (React.createElement(FooterIndicator, { className: classnames("uifw-statusFields-selectionInfo", this.props.className), style: this.props.style },
-            React.createElement(Icon, { iconSpec: React.createElement(SvgCursor, null) }),
-            this.props.selectionCount.toString()));
-    }
-}
-/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
-function mapStateToProps(state) {
-    const frameworkState = state[UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
-    /* istanbul ignore next */
-    if (!frameworkState)
-        return undefined;
-    return { selectionCount: frameworkState.sessionState.numItemsSelected };
-}
-// we declare the variable and export that rather than using export default.
-/**
- * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- * This React component is Redux connected.
- * @public
- */ // eslint-disable-next-line @typescript-eslint/naming-convention
-export const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SelectionInfo.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Icon } from "@itwin/core-react";
+import { FooterIndicator } from "@itwin/appui-layout-react";
+import { UiFramework } from "../UiFramework";
+import { SvgCursor } from "@itwin/itwinui-icons-react";
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ */
+class SelectionInfoFieldComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(FooterIndicator, { className: classnames("uifw-statusFields-selectionInfo", this.props.className), style: this.props.style },
+            React.createElement(Icon, { iconSpec: React.createElement(SvgCursor, null) }),
+            this.props.selectionCount.toString()));
+    }
+}
+/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
+function mapStateToProps(state) {
+    const frameworkState = state[UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { selectionCount: frameworkState.sessionState.numItemsSelected };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * This React component is Redux connected.
+ * @public
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+export const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);
 //# sourceMappingURL=SelectionInfo.js.map