How to use react-mosaic-component - 10 common examples

_openSiblingPanel = (panelType: string, siblingConfigCreator: (PanelConfig) => PanelConfig) => {
      const siblingComponent = PanelList.getComponentForType(panelType);
      if (!siblingComponent) {
        return;
      }
      const defaultSiblingConfig = siblingComponent.defaultConfig;

      const panelConfigById = this.props.store.getState().panels.savedProps;
      const { mosaicActions, mosaicWindowActions } = this.context;
      const ownPath = mosaicWindowActions.getPath();

      // Try to find a sibling summary panel and update it with the `siblingConfig`.
      const siblingPathEnd = ownPath[ownPath.length - 1] === "first" ? "second" : "first";
      const siblingPath = ownPath.slice(0, ownPath.length - 1).concat(siblingPathEnd);
      const siblingId = getNodeAtPath(mosaicActions.getRoot(), siblingPath);
      if (typeof siblingId === "string" && getPanelTypeFromId(siblingId) === panelType) {
        const siblingConfig: PanelConfig = { ...defaultSiblingConfig, ...(panelConfigById[siblingId]: any) };
        this.props.savePanelConfig({
          id: siblingId,
          config: siblingConfigCreator(siblingConfig),
          defaultConfig: defaultSiblingConfig,
        });
        return;
      }

      // Otherwise, open a new panel.
      const newPanelPath = ownPath.concat("second");
      mosaicWindowActions.split({ type: panelType }).then(() => {
        const newPanelId = getNodeAtPath(mosaicActions.getRoot(), newPanelPath);
        this.props.savePanelConfig({
          id: newPanelId,

function changePanelLayout(state: PanelsState, layout: any): PanelsState {
  // filter saved props in case a panel was removed from the layout
  // we don't want it saved props hanging around forever
  const savedProps = pick(state.savedProps, getLeaves(layout));
  return { ...state, savedProps, layout };
}

determineWorkspaceLayout() {
    const { windows, layout } = this.props;
    const sortedWindows = toPairs(windows)
      .sort((a, b) => a.layoutOrder - b.layoutOrder).map(val => val[0]);
    const leaveKeys = getLeaves(layout);
    // Windows were added
    if (!sortedWindows.every(e => leaveKeys.includes(e))) {
      // No current layout, so just generate a new one
      if (leaveKeys.length < 2) {
        return createBalancedTreeFromLeaves(sortedWindows);
      }
      // Add new windows to layout
      const addedWindows = difference(sortedWindows, leaveKeys);
      const newLayout = new MosaicLayout(layout);
      newLayout.addWindows(addedWindows);
      return newLayout.layout;
    }
    // Windows were removed (perhaps in a different Workspace). We don't have a
    // way to reconfigure.. so we have to random generate
    if (!leaveKeys.every(e => sortedWindows.includes(e))) {
      return createBalancedTreeFromLeaves(sortedWindows);

// Windows were added
    if (!sortedWindows.every(e => leaveKeys.includes(e))) {
      // No current layout, so just generate a new one
      if (leaveKeys.length < 2) {
        return createBalancedTreeFromLeaves(sortedWindows);
      }
      // Add new windows to layout
      const addedWindows = difference(sortedWindows, leaveKeys);
      const newLayout = new MosaicLayout(layout);
      newLayout.addWindows(addedWindows);
      return newLayout.layout;
    }
    // Windows were removed (perhaps in a different Workspace). We don't have a
    // way to reconfigure.. so we have to random generate
    if (!leaveKeys.every(e => sortedWindows.includes(e))) {
      return createBalancedTreeFromLeaves(sortedWindows);
    }
    return layout;
  }

determineWorkspaceLayout() {
    const { windows, layout } = this.props;
    const sortedWindows = toPairs(windows)
      .sort((a, b) => a.layoutOrder - b.layoutOrder).map(val => val[0]);
    const leaveKeys = getLeaves(layout);
    // Windows were added
    if (!sortedWindows.every(e => leaveKeys.includes(e))) {
      // No current layout, so just generate a new one
      if (leaveKeys.length < 2) {
        return createBalancedTreeFromLeaves(sortedWindows);
      }
      // Add new windows to layout
      const addedWindows = difference(sortedWindows, leaveKeys);
      const newLayout = new MosaicLayout(layout);
      newLayout.addWindows(addedWindows);
      return newLayout.layout;
    }
    // Windows were removed (perhaps in a different Workspace). We don't have a
    // way to reconfigure.. so we have to random generate
    if (!leaveKeys.every(e => sortedWindows.includes(e))) {
      return createBalancedTreeFromLeaves(sortedWindows);
    }
    return layout;
  }

// HOC to integrate mosaic drag functionality into any other component
class MosaicDragHandle extends Component {
  static contextTypes = {
    mosaicWindowActions: PropTypes.any,
    mosaicActions: PropTypes.any,
    mosaicId: PropTypes.any,
  };

  render() {
    const { children, connectDragSource } = this.props;
    return connectDragSource(children);
  }
}

// connect the drag handle to react dnd
const ConnectedDragHandle = DragSource(MosaicDragType.WINDOW, dragSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
}))(MosaicDragHandle);

export default ConnectedDragHandle;

const { position, path } = dropResult;

    // dropping outside mosiac does nothing
    if (!position || !path) {
      return;
    }
    props.onDrop({
      panelType: props.panel.type,
      panelConfig: props.panel.panelConfig,
      position,
      path,
    });
  },
};
// boilerplate required by react-dnd
const DraggablePanelItem = DragSource(MosaicDragType.WINDOW, dragConfig, (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
  };
})(PanelItem);

type OwnProps = {|
  onPanelSelect: (panelType: string, panelConfig?: PanelConfig) => void,
  selectedPanelType?: string,
|};
type Props = {
  ...OwnProps,
  mosaicId: string,
  mosaicLayout: any, // this is the opaque mosiac layout config object
  changePanelLayout: (panelLayout: any) => void,
  savePanelConfig: (SaveConfigPayload) => void,
};

first = addedWindowIds[i];
        second = destination;
      }
      const update = {
        path,
        spec: {
          $set: {
            direction,
            first,
            second,
          },
        },
      };
      // We cannot batch the updates together because we need to recalculate
      // the new location for each new window
      this.layout = updateTree(this.layout, [update]);
    });
  }

endDrag: (props, monitor, component) => {
    const { hideTimer } = monitor.getItem();
    // If the hide call hasn't happened yet, cancel it
    window.clearTimeout(hideTimer);

    const { mosaicWindowActions, mosaicActions } = component.context;
    const type = getPanelTypeFromMosiac(mosaicWindowActions, mosaicActions);

    getGlobalHooks().onPanelDrag(type);
    const ownPath = component.context.mosaicWindowActions.getPath();
    const dropResult = monitor.getDropResult() || {};
    const { position, path: destinationPath } = dropResult;
    if (position != null && destinationPath != null && !_.isEqual(destinationPath, ownPath)) {
      mosaicActions.updateTree(createDragToUpdates(mosaicActions.getRoot(), ownPath, destinationPath, position));
    } else {
      mosaicActions.updateTree([
        {
          path: _.dropRight(ownPath),
          spec: {
            splitPercentage: {
              $set: null,
            },
          },
        },
      ]);
    }
  },
};

mosaicWindowActions.split({ type: panelType }).then(() => {
        const newPanelId = getNodeAtPath(mosaicActions.getRoot(), newPanelPath);
        this.props.savePanelConfig({
          id: newPanelId,
          config: siblingConfigCreator(defaultSiblingConfig),
          defaultConfig: defaultSiblingConfig,
        });
      });
    };