@bryntum/core-react-thin 7.1.1

package/src/BryntumFullscreenButton.tsx

@@ -0,0 +1,45 @@
+/**
+ * React Fullscreen button wrapper
+ */
+
+import React, { createRef, Component, ReactNode } from 'react';
+import { Button, Fullscreen } from '@bryntum/core-thin';
+
+export class BryntumFullscreenButton extends Component {
+
+    private elRef = createRef<HTMLDivElement>();
+    private button?:  Button;
+
+    componentDidMount(): void {
+        if (Fullscreen.enabled) {
+            this.button = new Button({
+                adopt     : this.elRef.current as HTMLElement,
+                icon      : 'b-icon b-icon-fullscreen',
+                tooltip   : 'Fullscreen',
+                rendition : 'text',
+                onClick() {
+                    if (Fullscreen.enabled) {
+                        if (!Fullscreen.isFullscreen) {
+                            Fullscreen.request(document.body);
+                        }
+                        else {
+                            Fullscreen.exit();
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    componentWillUnmount(): void {
+        if (this.button) {
+            this.button.destroy();
+        }
+    }
+
+    render(): ReactNode {
+        return (
+            <div ref={this.elRef} />
+        );
+    }
+}