Merge pull request #209 from murat-encord/add-toggle-additional-options-action

add toggleAdditionalOptions action

Author: nomcopter

README.md

@@ -258,6 +258,10 @@ export interface MosaicWindowProps<T extends MosaicKey> {
    * A callback that triggers when a user toggles the additional controls
    */
   onAdditionalControlsToggle?: (toggle: boolean) => void;
+  /**
+   * Disables the overlay that blocks interaction with the window when additional controls are open
+   */
+  disableAdditionalControlsOverlay?: boolean;
   /**
    * Whether or not a user should be able to drag windows around
    */
@@ -367,9 +371,10 @@ export interface MosaicWindowActions {
    */
   replaceWithNew: () => Promise<void>;
   /**
-   * Sets the open state for the tray that holds additional controls
+   * Sets the open state for the tray that holds additional controls.
+   * Pass 'toggle' to invert the current state.
    */
-  setAdditionalControlsOpen: (open: boolean) => void;
+  setAdditionalControlsOpen: (open: boolean | 'toggle') => void;
   /**
    * Returns the path to this window
    */

src/MosaicWindow.tsx

@@ -33,6 +33,7 @@ export interface MosaicWindowProps<T extends MosaicKey> {
   additionalControls?: React.ReactNode;
   additionalControlButtonText?: string;
   onAdditionalControlsToggle?: (toggle: boolean) => void;
+  disableAdditionalControlsOverlay?: boolean;
   draggable?: boolean;
   createNode?: CreateNode<T>;
   renderPreview?: (props: MosaicWindowProps<T>) => JSX.Element;
@@ -98,6 +99,7 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<
       connectDropTarget,
       connectDragPreview,
       draggedMosaicId,
+      disableAdditionalControlsOverlay,
     } = this.props;
 
     return (
@@ -112,7 +114,14 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<
           >
             {this.renderToolbar()}
             <div className="mosaic-window-body">{this.props.children}</div>
-            <div className="mosaic-window-body-overlay" onClick={() => this.setAdditionalControlsOpen(false)} />
+            {!disableAdditionalControlsOverlay && (
+              <div
+                className="mosaic-window-body-overlay"
+                onClick={() => {
+                  this.setAdditionalControlsOpen(false);
+                }}
+              />
+            )}
             <div className="mosaic-window-additional-actions-bar">{additionalControls}</div>
             {connectDragPreview(renderPreview!(this.props))}
             <div className="drop-target-container">
@@ -221,7 +230,9 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<
     return Promise.resolve(createNode!(...args)).then((node) => mosaicActions.replaceWith(path, node));
   };
 
-  private setAdditionalControlsOpen = (additionalControlsOpen: boolean) => {
+  private setAdditionalControlsOpen = (additionalControlsOpenOption: boolean | 'toggle') => {
+    const additionalControlsOpen =
+      additionalControlsOpenOption === 'toggle' ? !this.state.additionalControlsOpen : additionalControlsOpenOption;
     this.setState({ additionalControlsOpen });
     this.props.onAdditionalControlsToggle?.(additionalControlsOpen);
   };

src/contextTypes.ts

@@ -76,9 +76,10 @@ export interface MosaicWindowActions {
    */
   replaceWithNew: (...args: any[]) => Promise<void>;
   /**
-   * Sets the open state for the tray that holds additional controls
+   * Sets the open state for the tray that holds additional controls.
+   * Pass 'toggle' to invert the current state.
    */
-  setAdditionalControlsOpen: (open: boolean) => void;
+  setAdditionalControlsOpen: (open: boolean | 'toggle') => void;
   /**
    * Returns the path to this window
    */