+
diff --git a/src/defaultComponents/popups/TabOverflowPopup.tsx b/src/defaultComponents/popups/TabOverflowPopup.tsx
new file mode 100644
index 0000000..7b836ed
--- /dev/null
+++ b/src/defaultComponents/popups/TabOverflowPopup.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { TabOverflowPopupProps } from '../../types/api';
+import { OverflowedTabInfo } from '../../types/internal';
+
+const TabOverflowPopup: React.FC
= ({
+ hiddenTabsToTheLeft,
+ hiddenTabsToTheRight,
+ close,
+ select
+}) => {
+ const createSection = (tabs: OverflowedTabInfo[], title: string) => {
+ return (
+
+ );
+ };
+
+ const handleTabClick = (windowId: string) => {
+ select(windowId);
+ };
+
+ const handleTabClose = (windowId: string) => {
+ close(windowId);
+ };
+
+ return (
+
+ {hiddenTabsToTheLeft.length > 0 && createSection(hiddenTabsToTheLeft, "Open left")}
+ {hiddenTabsToTheLeft.length > 0 && hiddenTabsToTheRight.length > 0 &&
}
+ {hiddenTabsToTheRight.length > 0 && createSection(hiddenTabsToTheRight, "Open right")}
+
+ );
+};
+
+export default TabOverflowPopup;
\ No newline at end of file
diff --git a/src/defaultComponents/tabs/Tab.tsx b/src/defaultComponents/tabs/Tab.tsx
index a52084d..4274329 100644
--- a/src/defaultComponents/tabs/Tab.tsx
+++ b/src/defaultComponents/tabs/Tab.tsx
@@ -1,18 +1,20 @@
import React from "react";
import { TabElementProps } from "../../types/api";
import TabChannelSelector from "../channelSelector/TabChannelSelector";
+import TabMultiChannelSelector from "../channelSelector/multi/TabMultiChannelSelector";
import TabCaption from "./TabCaption";
import TabCaptionEditor from "./TabCaptionEditor";
import TabCloseButton from "./TabCloseButton";
-const Tab: React.FC = ({ caption, selected, close, channels, captionEditor, notifyCaptionBoundsChanged, windowId }) => {
+const Tab: React.FC = ({ caption, selected, close, channels, captionEditor, notifyCaptionBoundsChanged, windowId, pinned }) => {
return
- {channels.visible && }
+ {channels.visible && channels.channelsMode !== "multi" && }
+ {channels.visible && channels.channelsMode === "multi" && }
{captionEditor.show ?
:
}
-
+ {pinned ? <> : }
};
-export default Tab;
\ No newline at end of file
+export default Tab;
diff --git a/src/defaultComponents/tabs/TabHeaderButtons.tsx b/src/defaultComponents/tabs/TabHeaderButtons.tsx
index 99fa4ac..e4c5787 100644
--- a/src/defaultComponents/tabs/TabHeaderButtons.tsx
+++ b/src/defaultComponents/tabs/TabHeaderButtons.tsx
@@ -3,6 +3,7 @@ import { TabHeaderButtonsProps } from "../../types/api";
import CloseButton from "../buttons/CloseButton";
import ExtractButton from "../buttons/ExtractButton";
import FeedbackButton from "../buttons/FeedbackButton";
+import CloneButton from "../buttons/CloneButton";
import LockButton from "../buttons/LockButtons";
import MaximizeButton from "../buttons/MaximizeButton";
import MinimizeButton from "../buttons/MinimizeButton";
@@ -10,8 +11,9 @@ import RestoreButton from "../buttons/RestoreButton";
import StickyButton from "../buttons/StickyButton";
import UnlockButton from "../buttons/UnlockButton";
import CustomButton from "../buttons/CustomButton";
+import OverflowButton from "../buttons/OverflowButton";
-const TabHeaderButtons: React.FC = ({ extract, minimize, maximize, restore, close, lock, unlock, feedback, sticky, customButtons }) => {
+const TabHeaderButtons: React.FC = ({ overflow, extract, minimize, maximize, restore, close, lock, unlock, feedback, clone, sticky, customButtons }) => {
return
{
@@ -21,7 +23,9 @@ const TabHeaderButtons: React.FC = ({ extract, minimize,
}
+ {overflow?.visible && }
{feedback?.visible && }
+ {clone?.visible && }
{sticky?.visible && }
{extract?.visible && }
{lock?.visible && }
diff --git a/src/index.tsx b/src/index.tsx
index 33da5de..d482108 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,178 +1,196 @@
-import CloseButton from "./defaultComponents/buttons/CloseButton";
-import FlatCaptionBar from "./defaultComponents/flatCaptionBar/FlatCaptionBar";
-import GroupCaptionBar from "./defaultComponents/groupCaptionBar/GroupCaptionBar";
-import MaximizeButton from "./defaultComponents/buttons/MaximizeButton";
-import MinimizeButton from "./defaultComponents/buttons/MinimizeButton";
-import Tab from "./defaultComponents/tabs/Tab";
-import TabHeaderButtons from "./defaultComponents/tabs/TabHeaderButtons";
-import TabCaption from "./defaultComponents/tabs/TabCaption";
-import TabCloseButton from "./defaultComponents/tabs/TabCloseButton";
-import GroupElementCreationWrapper from "./GroupElementCreationWrapper";
-import webGroupsManager from "./webGroupsManager";
-import GroupMoveArea from "./defaultComponents/groupCaptionBar/GroupMoveArea";
-import GroupButtons from "./defaultComponents/groupCaptionBar/GroupButtons";
-import FlatMoveArea from "./defaultComponents/flatCaptionBar/FlatMoveArea";
-import FlatButtons from "./defaultComponents/flatCaptionBar/FlatButtons";
-import FlatCaption from "./defaultComponents/flatCaptionBar/FlatCaption";
-import GroupCaption from "./defaultComponents/groupCaptionBar/GroupCaption";
-import FlatChannelSelector from "./defaultComponents/channelSelector/FlatChannelSelector";
-import TabChannelSelector from "./defaultComponents/channelSelector/TabChannelSelector";
-import RestoreButton from "./defaultComponents/buttons/RestoreButton";
-import LockButton from "./defaultComponents/buttons/LockButtons";
-import UnlockButton from "./defaultComponents/buttons/UnlockButton";
-import ExtractButton from "./defaultComponents/buttons/ExtractButton";
-import FeedbackButton from "./defaultComponents/buttons/FeedbackButton";
-import StickyButton from "./defaultComponents/buttons/StickyButton";
-import useIOConnectWindow from "./useIOConnectWindow";
-import CustomButton from "./defaultComponents/buttons/CustomButton";
-import { waitForWindow } from "./utils";
-import useGroupComponentVisibility from "./useGroupComponentVisibility";
-import {
- CloseButtonProps,
- ExtractButtonProps,
- StickyButtonProps,
- FeedbackButtonProps,
- FlatButtonsProps,
- FlatCaptionEditorProps,
- FlatCaptionProps,
- FlatChannelSelectorProps,
- FlatMoveAreaProps,
- GroupButtonsProps,
- GroupCaptionEditorProps,
- GroupMoveAreaProps,
- LockButtonProps,
- MaximizeButtonProps,
- MinimizeButtonProps,
- RestoreButtonProps,
- TabCaptionEditorProps,
- TabCaptionProps,
- TabChannelSelectorProps,
- TabCloseButtonProps,
- UnlockButtonProps,
- UseCaptionEditorOptions,
- UseEditableCaptionOptions
-} from "./types/defaultComponents";
-import {
- AboveTabsProps,
- AboveWindowProps,
- AfterTabsProps,
- BeforeTabsProps,
- BelowTabsProps,
- BelowWindowProps,
- FlatCaptionBarProps,
- FrameLoadingAnimationProps,
- FrameWindowOverlayProps,
- GroupCaptionBarProps,
- GroupComponentVisibilityState,
- GroupOverlayProps,
- GroupProps,
- MoveAreaProps,
- TabElementProps,
- TabHeaderButtonsProps,
- WindowContentOverlayProps,
-} from "./types/api";
-import GroupCaptionEditor from "./defaultComponents/groupCaptionBar/GroupCaptionEditor";
-import FlatCaptionEditor from "./defaultComponents/flatCaptionBar/FlatCaptionEditor";
-import TabCaptionEditor from "./defaultComponents/tabs/TabCaptionEditor";
-import { TargetType } from "./types/internal";
-import useCommitTabCaptionEditingRequested from "./defaultComponents/tabs/useCommitTabCaptionEditingRequested";
-import useCommitGroupCaptionEditingRequested from "./defaultComponents/groupCaptionBar/useCommitGroupCaptionEditingRequested";
-import useCommitFlatCaptionEditingRequested from "./defaultComponents/flatCaptionBar/useCommitFlatCaptionEditingRequested";
-import useEditableCaption from "./defaultComponents/captionEditor/useEditableCaption";
-import useCaptionEditor from "./defaultComponents/captionEditor/useCaptionEditor";
-import FrameLoadingAnimation from "./defaultComponents/loadingAnimation/FrameLoadingAnimation";
-
-
-
-export {
- GroupCaptionBar,
- GroupMoveArea,
- GroupButtons,
- GroupCaptionEditor,
- Tab,
- TabChannelSelector,
- TabCaption,
- TabCloseButton,
- TabCaptionEditor,
- FeedbackButton,
- StickyButton,
- ExtractButton,
- LockButton,
- UnlockButton,
- MinimizeButton,
- RestoreButton,
- MaximizeButton,
- CustomButton,
- CloseButton,
- FlatCaptionBar,
- FlatChannelSelector,
- FlatCaption,
- FlatMoveArea,
- FlatButtons,
- FlatCaptionEditor,
- TabHeaderButtons,
- FrameLoadingAnimation,
- GroupComponentVisibilityState,
- useIOConnectWindow,
- useGroupComponentVisibility,
- waitForWindow,
- useEditableCaption,
- useCaptionEditor,
- useCommitGroupCaptionEditingRequested,
- useCommitFlatCaptionEditingRequested,
- useCommitTabCaptionEditingRequested,
-}
-
-export const getGroupId: () => string = () => webGroupsManager?.getGroupId();
-export const requestPageFocus: () => void = () => webGroupsManager?.requestPageFocus();
-export const requestFrameFocus: (frameId: string) => void = (frameId) => webGroupsManager?.requestFrameFocus(frameId);
-export const requestGroupFocus: () => void = () => webGroupsManager?.requestGroupFocus();
-
-export const onCommitGroupCaptionEditingRequested = (targetId: string, cb: () => void) => webGroupsManager.onCommitCaptionEditingRequested(TargetType.Group, targetId, cb);
-export const onCommitFlatCaptionEditingRequested = (targetId: string, cb: () => void) => webGroupsManager.onCommitCaptionEditingRequested(TargetType.Frame, targetId, cb);
-export const onCommitTabCaptionEditingRequested = (targetId: string, cb: () => void) => webGroupsManager.onCommitCaptionEditingRequested(TargetType.Tab, targetId, cb);
-
-export {
- MoveAreaProps,
- GroupProps,
- GroupCaption,
- GroupCaptionBarProps,
- GroupMoveAreaProps,
- GroupOverlayProps,
- GroupButtonsProps,
- GroupCaptionEditorProps,
- TabElementProps,
- TabChannelSelectorProps,
- TabCaptionProps,
- TabCloseButtonProps,
- TabHeaderButtonsProps,
- TabCaptionEditorProps,
- FlatCaptionBarProps,
- FlatCaptionProps,
- FrameWindowOverlayProps,
- FlatMoveAreaProps,
- FlatChannelSelectorProps,
- FlatButtonsProps,
- FlatCaptionEditorProps,
- StickyButtonProps,
- FeedbackButtonProps,
- ExtractButtonProps,
- LockButtonProps,
- UnlockButtonProps,
- MinimizeButtonProps,
- MaximizeButtonProps,
- RestoreButtonProps,
- CloseButtonProps,
- FrameLoadingAnimationProps,
- UseCaptionEditorOptions,
- UseEditableCaptionOptions,
- AboveWindowProps,
- BelowWindowProps,
- AboveTabsProps,
- BelowTabsProps,
- BeforeTabsProps,
- AfterTabsProps,
- WindowContentOverlayProps
-}
-
-export default GroupElementCreationWrapper;
+import CloseButton from "./defaultComponents/buttons/CloseButton";
+import FlatCaptionBar from "./defaultComponents/flatCaptionBar/FlatCaptionBar";
+import GroupCaptionBar from "./defaultComponents/groupCaptionBar/GroupCaptionBar";
+import MaximizeButton from "./defaultComponents/buttons/MaximizeButton";
+import MinimizeButton from "./defaultComponents/buttons/MinimizeButton";
+import Tab from "./defaultComponents/tabs/Tab";
+import TabHeaderButtons from "./defaultComponents/tabs/TabHeaderButtons";
+import TabCaption from "./defaultComponents/tabs/TabCaption";
+import TabCloseButton from "./defaultComponents/tabs/TabCloseButton";
+import GroupElementCreationWrapper from "./GroupElementCreationWrapper";
+import webGroupsManager from "./webGroupsManager";
+import GroupMoveArea from "./defaultComponents/groupCaptionBar/GroupMoveArea";
+import GroupButtons from "./defaultComponents/groupCaptionBar/GroupButtons";
+import FlatMoveArea from "./defaultComponents/flatCaptionBar/FlatMoveArea";
+import FlatButtons from "./defaultComponents/flatCaptionBar/FlatButtons";
+import FlatCaption from "./defaultComponents/flatCaptionBar/FlatCaption";
+import GroupCaption from "./defaultComponents/groupCaptionBar/GroupCaption";
+import FlatChannelSelector from "./defaultComponents/channelSelector/FlatChannelSelector";
+import TabChannelSelector from "./defaultComponents/channelSelector/TabChannelSelector";
+import RestoreButton from "./defaultComponents/buttons/RestoreButton";
+import LockButton from "./defaultComponents/buttons/LockButtons";
+import UnlockButton from "./defaultComponents/buttons/UnlockButton";
+import ExtractButton from "./defaultComponents/buttons/ExtractButton";
+import FeedbackButton from "./defaultComponents/buttons/FeedbackButton";
+import CloneButton from "./defaultComponents/buttons/CloneButton";
+import StickyButton from "./defaultComponents/buttons/StickyButton";
+import OverflowButton from "./defaultComponents/buttons/OverflowButton";
+import useIOConnectWindow from "./useIOConnectWindow";
+import CustomButton from "./defaultComponents/buttons/CustomButton";
+import { waitForWindow } from "./utils";
+import useGroupComponentVisibility from "./useGroupComponentVisibility";
+import {
+ CloseButtonProps,
+ ExtractButtonProps,
+ StickyButtonProps,
+ FeedbackButtonProps,
+ FlatButtonsProps,
+ FlatCaptionEditorProps,
+ FlatCaptionProps,
+ FlatChannelSelectorProps,
+ FlatMoveAreaProps,
+ GroupButtonsProps,
+ GroupCaptionEditorProps,
+ GroupMoveAreaProps,
+ LockButtonProps,
+ MaximizeButtonProps,
+ MinimizeButtonProps,
+ RestoreButtonProps,
+ TabCaptionEditorProps,
+ TabCaptionProps,
+ TabChannelSelectorProps,
+ TabCloseButtonProps,
+ UnlockButtonProps,
+ UseCaptionEditorOptions,
+ UseEditableCaptionOptions,
+ OverflowButtonProps
+} from "./types/defaultComponents";
+import {
+ AboveTabsProps,
+ AboveWindowProps,
+ AfterTabsProps,
+ BeforeTabsProps,
+ BelowTabsProps,
+ BelowWindowProps,
+ FlatCaptionBarProps,
+ FrameLoadingAnimationProps,
+ FrameWindowOverlayProps,
+ GroupCaptionBarProps,
+ GroupComponentVisibilityState,
+ GroupOverlayProps,
+ GroupProps,
+ HtmlButtonsProps,
+ MoveAreaProps,
+ OpenTabOverflowPopupOptions,
+ TabElementProps,
+ TabHeaderButtonsProps,
+ TabOverflowPopupProps,
+ WindowContentOverlayProps,
+} from "./types/api";
+import GroupCaptionEditor from "./defaultComponents/groupCaptionBar/GroupCaptionEditor";
+import FlatCaptionEditor from "./defaultComponents/flatCaptionBar/FlatCaptionEditor";
+import TabCaptionEditor from "./defaultComponents/tabs/TabCaptionEditor";
+import { Location, TargetType } from "./types/internal";
+import useCommitTabCaptionEditingRequested from "./defaultComponents/tabs/useCommitTabCaptionEditingRequested";
+import useCommitGroupCaptionEditingRequested from "./defaultComponents/groupCaptionBar/useCommitGroupCaptionEditingRequested";
+import useCommitFlatCaptionEditingRequested from "./defaultComponents/flatCaptionBar/useCommitFlatCaptionEditingRequested";
+import useEditableCaption from "./defaultComponents/captionEditor/useEditableCaption";
+import useCaptionEditor from "./defaultComponents/captionEditor/useCaptionEditor";
+import FrameLoadingAnimation from "./defaultComponents/loadingAnimation/FrameLoadingAnimation";
+import HtmlButtons from "./defaultComponents/htmlButtonsBar/buttons";
+import TabOverflowPopup from "./defaultComponents/popups/TabOverflowPopup";
+import TabMultiChannelSelector from "./defaultComponents/channelSelector/multi/TabMultiChannelSelector";
+import FlatMultiChannelSelector from "./defaultComponents/channelSelector/multi/FlatMultiChannelSelector";
+
+export {
+ GroupCaptionBar,
+ GroupMoveArea,
+ GroupButtons,
+ GroupCaptionEditor,
+ Tab,
+ TabChannelSelector,
+ TabCaption,
+ TabCloseButton,
+ TabCaptionEditor,
+ FeedbackButton,
+ CloneButton,
+ StickyButton,
+ ExtractButton,
+ LockButton,
+ UnlockButton,
+ MinimizeButton,
+ RestoreButton,
+ MaximizeButton,
+ CustomButton,
+ CloseButton,
+ FlatCaptionBar,
+ FlatChannelSelector,
+ FlatCaption,
+ FlatMoveArea,
+ FlatButtons,
+ FlatCaptionEditor,
+ TabHeaderButtons,
+ FrameLoadingAnimation,
+ HtmlButtons,
+ TabOverflowPopup,
+ OverflowButton,
+ GroupComponentVisibilityState,
+ TabMultiChannelSelector,
+ FlatMultiChannelSelector,
+ useIOConnectWindow,
+ useGroupComponentVisibility,
+ waitForWindow,
+ useEditableCaption,
+ useCaptionEditor,
+ useCommitGroupCaptionEditingRequested,
+ useCommitFlatCaptionEditingRequested,
+ useCommitTabCaptionEditingRequested,
+}
+
+export const getGroupId: () => string = () => webGroupsManager?.getGroupId();
+export const requestPageFocus: () => void = () => webGroupsManager?.requestPageFocus();
+export const requestFrameFocus: (frameId: string) => void = (frameId) => webGroupsManager?.requestFrameFocus(frameId);
+export const requestGroupFocus: () => void = () => webGroupsManager?.requestGroupFocus();
+export const openTabOverflowPopup: (options: OpenTabOverflowPopupOptions) => void = ({ frameId, location }: OpenTabOverflowPopupOptions) => webGroupsManager.openTabOverflowPopup(frameId, location);
+
+export const onCommitGroupCaptionEditingRequested = (targetId: string, cb: () => void) => webGroupsManager.onCommitCaptionEditingRequested(TargetType.Group, targetId, cb);
+export const onCommitFlatCaptionEditingRequested = (targetId: string, cb: () => void) => webGroupsManager.onCommitCaptionEditingRequested(TargetType.Frame, targetId, cb);
+export const onCommitTabCaptionEditingRequested = (targetId: string, cb: () => void) => webGroupsManager.onCommitCaptionEditingRequested(TargetType.Tab, targetId, cb);
+
+export {
+ MoveAreaProps,
+ GroupProps,
+ GroupCaption,
+ GroupCaptionBarProps,
+ GroupMoveAreaProps,
+ GroupOverlayProps,
+ GroupButtonsProps,
+ GroupCaptionEditorProps,
+ TabElementProps,
+ TabChannelSelectorProps,
+ TabCaptionProps,
+ TabCloseButtonProps,
+ TabHeaderButtonsProps,
+ TabCaptionEditorProps,
+ HtmlButtonsProps,
+ FlatCaptionBarProps,
+ FlatCaptionProps,
+ FrameWindowOverlayProps,
+ FlatMoveAreaProps,
+ FlatChannelSelectorProps,
+ FlatButtonsProps,
+ FlatCaptionEditorProps,
+ OverflowButtonProps,
+ StickyButtonProps,
+ FeedbackButtonProps,
+ ExtractButtonProps,
+ LockButtonProps,
+ UnlockButtonProps,
+ MinimizeButtonProps,
+ MaximizeButtonProps,
+ RestoreButtonProps,
+ CloseButtonProps,
+ FrameLoadingAnimationProps,
+ UseCaptionEditorOptions,
+ UseEditableCaptionOptions,
+ AboveWindowProps,
+ BelowWindowProps,
+ AboveTabsProps,
+ BelowTabsProps,
+ BeforeTabsProps,
+ AfterTabsProps,
+ WindowContentOverlayProps,
+ TabOverflowPopupProps,
+}
+
+export default GroupElementCreationWrapper;
diff --git a/src/types/api.ts b/src/types/api.ts
index ecc565d..1c85938 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -1,5 +1,5 @@
import React from "react";
-import { Bounds, ButtonProps, ToggleButtonProps } from "./internal";
+import { Bounds, ButtonProps, Location, OverflowedTabInfo, StylesOptions, ToggleButtonProps } from "./internal";
import { CustomButtonProps } from "./defaultComponents";
export interface ChannelProps {
@@ -7,6 +7,13 @@ export interface ChannelProps {
selectedChannel: string;
showSelector: (bounds: Bounds) => void;
selectedChannelColor: string;
+ channelsMode: "single" | "multi";
+ selectedChannels: { name: string, color: string }[];
+ channelRestrictions: {
+ read: boolean,
+ write: boolean
+ };
+ channelLabel: string;
}
export interface FrameWindowOverlayProps {
@@ -50,6 +57,14 @@ export interface BelowTabsProps {
selectedWindow: string;
}
+export interface TabOverflowPopupProps {
+ frameId: string;
+ select: (windowId: string) => void;
+ close: (windowId: string) => void;
+ hiddenTabsToTheLeft: OverflowedTabInfo[];
+ hiddenTabsToTheRight: OverflowedTabInfo[];
+}
+
export interface CaptionEditorProps {
show: boolean;
text?: string;
@@ -83,6 +98,7 @@ export interface FlatCaptionBarProps {
moveAreaId: string;
caption: string;
feedback?: ButtonProps;
+ clone?: ButtonProps;
sticky?: ToggleButtonProps;
extract?: ButtonProps;
lock?: ButtonProps;
@@ -104,19 +120,26 @@ export interface TabElementProps {
caption: string;
selected: boolean;
flashing: boolean;
+ pinned: boolean;
close: () => void;
channels: ChannelProps;
notifyCaptionBoundsChanged: (bounds: Bounds) => void;
captionEditor: CaptionEditorProps;
+ addContainerClass: (className: string) => void;
+ removeContainerClass: (className: string) => void;
}
export interface AfterTabsProps {
frameId: string;
selectedWindow: string;
+ hiddenTabsToTheLeft?: OverflowedTabInfo[];
+ hiddenTabsToTheRight?: OverflowedTabInfo[];
}
-export interface TabHeaderButtonsProps {
+interface FrameButtonsProps {
+ overflow?: ButtonProps;
feedback?: ButtonProps;
+ clone?: ButtonProps;
sticky?: ToggleButtonProps;
extract?: ButtonProps;
lock?: ButtonProps;
@@ -130,6 +153,14 @@ export interface TabHeaderButtonsProps {
selectedWindow: string;
}
+export interface TabHeaderButtonsProps extends FrameButtonsProps {
+ hiddenTabsToTheLeft: OverflowedTabInfo[];
+ hiddenTabsToTheRight: OverflowedTabInfo[];
+}
+
+export interface HtmlButtonsProps extends FrameButtonsProps {
+}
+
export interface GroupProps {
components?: {
group?: {
@@ -153,6 +184,19 @@ export interface GroupProps {
After?: React.ComponentType;
Buttons?: React.ComponentType;
Below?: React.ComponentType;
+ OverflowPopup?: React.ComponentType;
+ };
+ html?: {
+ Buttons?: React.ComponentType;
+ }
+ },
+ styles?: {
+ tabs?: {
+ header?: StylesOptions;
+ moveArea?: StylesOptions;
+ },
+ frame?: {
+ element?: StylesOptions;
}
}
}
@@ -163,4 +207,9 @@ export interface MoveAreaProps {
export interface GroupComponentVisibilityState {
groupCaptionBarVisible?: boolean;
-}
\ No newline at end of file
+}
+
+export interface OpenTabOverflowPopupOptions {
+ frameId: string;
+ location: Location;
+}
diff --git a/src/types/defaultComponents.ts b/src/types/defaultComponents.ts
index e1df10e..ac62fe3 100644
--- a/src/types/defaultComponents.ts
+++ b/src/types/defaultComponents.ts
@@ -26,6 +26,10 @@ export interface StickyButtonProps extends ToggleButtonProps {
export interface FeedbackButtonProps extends ButtonProps {
}
+export interface CloneButtonProps extends ButtonProps {
+}
+
+
export interface ExtractButtonProps extends ButtonProps {
}
@@ -38,6 +42,9 @@ export interface UnlockButtonProps extends ButtonProps {
export interface MinimizeButtonProps extends ButtonProps {
}
+export interface OverflowButtonProps extends ButtonProps {
+}
+
export interface MaximizeButtonProps extends ButtonProps {
}
@@ -48,8 +55,8 @@ export interface CloseButtonProps extends ButtonProps {
}
export interface CustomButtonProps extends ButtonProps {
- imageData: string;
- buttonId: string;
+ imageData: string;
+ buttonId: string;
}
export interface BaseButtonProps {
@@ -63,18 +70,62 @@ export interface BaseChannelSelectorProps {
contentClass: string;
selectedChannel: string;
selectedChannelColor: string;
+ direction: string;
+ channelLabel: string;
+}
+
+export interface BaseMultiChannelSelectorProps {
+ showSelector: (bounds: Bounds) => void;
+ outsideClass: string;
+ contentClass: string;
+ selectedChannels: { name: string; color: string }[];
+ channelRestrictions: {
+ read: boolean,
+ write: boolean
+ };
+ channelLabel: string;
}
export interface FlatChannelSelectorProps {
showSelector: (bounds: Bounds) => void;
selectedChannel: string;
selectedChannelColor: string;
+ channelRestrictions: {
+ read: boolean,
+ write: boolean
+ };
+ channelLabel: string;
+}
+
+export interface FlatMultiChannelSelectorProps {
+ showSelector: (bounds: Bounds) => void;
+ selectedChannels: { name: string; color: string }[];
+ channelRestrictions: {
+ read: boolean,
+ write: boolean
+ };
+ channelLabel: string;
}
export interface TabChannelSelectorProps {
showSelector: (bounds: Bounds) => void;
selectedChannel: string;
selectedChannelColor: string;
+ channelRestrictions: {
+ read: boolean,
+ write: boolean
+ };
+ channelLabel: string;
+}
+
+export interface TabMultiChannelSelectorProps {
+ showSelector: (bounds: Bounds) => void;
+ selectedChannels: { name: string; color: string }[];
+ channelRestrictions: {
+ read: boolean,
+ write: boolean
+ };
+ channelLabel: string;
}
export interface FlatCaptionEditorProps {
@@ -93,6 +144,7 @@ export interface FlatMoveAreaProps {
export interface FlatButtonsProps {
feedback?: ButtonProps;
+ clone?: ButtonProps;
sticky?: ToggleButtonProps;
extract?: ButtonProps;
lock?: ButtonProps;
@@ -154,4 +206,4 @@ export interface UseCaptionEditorOptions {
export interface UseEditableCaptionOptions {
notifyBoundsChanged?: (bounds: Bounds) => void;
-}
\ No newline at end of file
+}
diff --git a/src/types/internal.ts b/src/types/internal.ts
index f24d94a..8a15e69 100644
--- a/src/types/internal.ts
+++ b/src/types/internal.ts
@@ -1,5 +1,8 @@
import React from "react";
+type NonMethodKeys = ({ [P in keyof T]: T[P] extends Function ? never : P })[keyof T];
+type NonMethods = Pick>;
+
export interface PortalProps {
parentElement: HTMLElement;
children?: React.ReactNode;
@@ -11,7 +14,7 @@ export interface ButtonProps {
visible: boolean;
}
-export interface ToggleButtonProps extends ButtonProps{
+export interface ToggleButtonProps extends ButtonProps {
isPressed: boolean;
}
@@ -44,7 +47,9 @@ export interface GroupWrapperProps {
onCreateAfterTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void;
onUpdateAfterTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void;
- onCreateTabHeaderButtonsRequested?: (options: CreateTabHeaderButtonsOptions) => void;
+ onCreateTabHeaderButtonsRequested?: (options: CreateButtonsOptions) => void;
+
+ onCreateTabOverflowPopupRequested?: (options: CreateTabOverflowPopupRequestOptions) => void;
onCreateBelowTabsRequested?: (options: CreateFrameElementRequestOptions) => void;
onUpdateBelowTabsRequested?: (options: CreateFrameElementRequestOptions) => void;
@@ -53,6 +58,9 @@ export interface GroupWrapperProps {
onUpdateStandardButtonRequested?: (options: UpdateStandardButtonRequestOptions) => void;
onUpdateCustomButtonsRequested?: (options: UpdateCustomButtonsRequestOptions) => void;
+ onCreateHtmlButtonsRequested?: (options: CreateButtonsOptions) => void;
+ onRemoveHtmlButtonsRequested?: (options: RemoveRequestOptions) => void;
+
onRemoveFrameCaptionBarRequested?: (options: RemoveRequestOptions) => void;
onRemoveFrameWindowOverlayRequested?: (options: RemoveRequestOptions) => void;
onRemoveAboveWindowRequested?: (options: RemoveRequestOptions) => void;
@@ -64,14 +72,24 @@ export interface GroupWrapperProps {
onRemoveTabRequested?: (options: RemoveRequestOptions) => void;
onRemoveAfterTabsComponentRequested?: (options: RemoveRequestOptions) => void;
onRemoveTabHeaderButtonsRequested?: (options: RemoveRequestOptions) => void;
+ onRemoveTabOverflowPopupRequested?: (options: RemoveRequestOptions) => void;
onRemoveBelowTabsRequested?: (options: RemoveRequestOptions) => void;
onShowCaptionEditorRequested?: (targetType: TargetType, targetId: string, text: string) => void;
onCommitCaptionEditingRequested?: (targetType: TargetType, targetId: string) => void;
onHideCaptionEditorRequested?: (targetType: TargetType, targetId: string) => void;
- onShowLoadingAnimationRequested?: (targetType: TargetType ,targetId: string) => void;
- onHideLoadingAnimationRequested?: (targetType: TargetType ,targetId: string) => void;
+ onShowLoadingAnimationRequested?: (targetType: TargetType, targetId: string) => void;
+ onHideLoadingAnimationRequested?: (targetType: TargetType, targetId: string) => void;
+ styles?: {
+ tabs?: {
+ header?: StylesOptions;
+ moveArea?: StylesOptions;
+ },
+ frame?: {
+ element?: StylesOptions;
+ }
+ };
}
export interface CreateGroupCaptionBarRequestOptions extends CreateElementRequestOptions {
@@ -112,60 +130,30 @@ export interface UpdateFrameCaptionBarRequestOptions extends BaseElementOptions
}
-export interface CreateFrameCaptionBarRequestOptions extends CreateFrameElementRequestOptions {
+export interface CreateFrameCaptionBarRequestOptions extends CreateButtonsOptions {
caption: string;
moveAreaId: string;
channelSelectorVisible: boolean;
selectedChannel: string;
selectedChannelColor: string;
- feedback: {
- tooltip: string;
- visible: boolean;
- };
- sticky: {
- tooltip: string;
- visible: boolean;
- isPressed: boolean;
- };
- extract: {
- tooltip: string;
- visible: boolean;
- };
- lock: {
- tooltip: string;
- visible: boolean;
- };
- unlock: {
- tooltip: string;
- visible: boolean;
- };
- minimize: {
- tooltip: string;
- visible: boolean;
- };
- restore: {
- tooltip: string;
- visible: boolean;
- };
- maximize: {
- tooltip: string;
- visible: boolean;
- };
- close: {
- tooltip: string;
- visible: boolean;
- };
captionEditor: {
show: boolean;
text?: string;
};
- customButtons: UpdateCustomButtonOptions[]
+ channelsMode: "single" | "multi";
+ selectedChannels: { name: string; color: string }[];
+ channelRestrictions: {
+ read: boolean,
+ write: boolean
+ };
+ channelLabel: string;
}
export interface CreateTabRequestOptions extends CreateElementRequestOptions {
caption: string;
selected: boolean;
flashing: boolean;
+ pinned: boolean;
channelSelectorVisible: boolean;
selectedChannel: string;
selectedChannelColor: string;
@@ -173,6 +161,13 @@ export interface CreateTabRequestOptions extends CreateElementRequestOptions {
show: boolean;
text?: string;
};
+ channelsMode: "single" | "multi";
+ selectedChannels: { name: string; color: string }[];
+ channelRestrictions: {
+ read: boolean,
+ write: boolean
+ };
+ channelLabel: string;
}
export interface UpdateStandardButtonRequestOptions extends CreateElementRequestOptions {
@@ -192,11 +187,19 @@ export interface UpdateCustomButtonOptions {
imageData: string;
}
-export interface CreateTabHeaderButtonsOptions extends CreateFrameElementRequestOptions {
+export interface CreateButtonsOptions extends CreateFrameElementRequestOptions {
+ overflow: {
+ tooltip: string;
+ visible: boolean;
+ },
feedback: {
tooltip: string;
visible: boolean;
};
+ clone: {
+ tooltip: string;
+ visible: boolean;
+ };
sticky: {
tooltip: string;
visible: boolean;
@@ -230,7 +233,9 @@ export interface CreateTabHeaderButtonsOptions extends CreateFrameElementRequest
tooltip: string;
visible: boolean;
};
- customButtons: UpdateCustomButtonOptions[]
+ customButtons: UpdateCustomButtonOptions[],
+ hiddenTabsToTheLeft: OverflowedTabInfo[];
+ hiddenTabsToTheRight: OverflowedTabInfo[];
}
export interface RemoveRequestOptions {
@@ -251,21 +256,37 @@ export interface CreateFrameElementRequestOptions extends CreateElementRequestOp
selectedWindow: string;
}
+export interface OverflowedTabInfo {
+ title: string;
+ windowId: string;
+}
+
+export interface CreateTabOverflowPopupRequestOptions extends CreateElementRequestOptions {
+ hiddenTabsToTheLeft: OverflowedTabInfo[];
+ hiddenTabsToTheRight: OverflowedTabInfo[];
+}
+
export interface CreateFrameLoadingAnimationRequestOptions extends CreateFrameElementRequestOptions {
show: boolean;
}
-export type UpdateFrameRequestOptions = CreateFrameElementRequestOptions;
+export interface UpdateFrameRequestOptions extends CreateFrameElementRequestOptions {
+ hiddenTabsToTheLeft: OverflowedTabInfo[];
+ hiddenTabsToTheRight: OverflowedTabInfo[];
+}
export enum TargetType {
Group = "group",
Frame = "frame",
TabBar = "tabBar",
- Tab = "tab"
+ Tab = "tab",
+ HtmlButtons = "html"
}
export enum StandardButtons {
+ Overflow = "overflow",
Feedback = "feedback",
+ Clone = "clone",
Sticky = "sticky",
Extract = "extract",
Lock = "lock",
@@ -289,8 +310,10 @@ export interface ElementCreationWrapperState {
beforeTabsZones: { [targetId: string]: CreateFrameElementRequestOptions };
tabElements: { [targetId: string]: CreateTabRequestOptions };
afterTabsZones: { [targetId: string]: CreateFrameElementRequestOptions };
- tabHeaderButtons: { [targetId: string]: CreateTabHeaderButtonsOptions };
+ tabHeaderButtons: { [targetId: string]: CreateButtonsOptions };
+ tabOverflowPopups: { [targetId: string]: CreateTabOverflowPopupRequestOptions };
belowTabsZones: { [targetId: string]: CreateFrameElementRequestOptions };
+ htmlButtons: { [targetId: string]: CreateButtonsOptions };
}
export interface ExternalLibraryFactory {
@@ -308,6 +331,16 @@ export interface ExternalLibraryFactory {
onCaptionEditorVisibleChanged(targetType: TargetType, targetId: string, visible: boolean): void;
onCaptionEditorBoundsChanged(targetType: TargetType, targetId: string, bounds: Bounds): void;
commitCaptionEditing(targetType: TargetType, targetId: string, text: string): void;
+
+ updateTabHeaderStyles(styles: StylesOptions): void;
+ updateTabMoveAreaStyles(styles: StylesOptions): void;
+ updateFrameStyles(styles: StylesOptions): void;
+
+ selectTab(windowId: string): void;
+ openTabOverflowPopup(frameId: string, location: Location): void
+
+ addTabContainerClass(windowId: string, className: string): void;
+ removeTabContainerClass(windowId: string, className: string): void;
}
export interface WebGroupsManager {
@@ -326,7 +359,15 @@ export interface Size {
height: number;
}
-export interface Bounds extends Size {
+export interface Location {
left: number;
top: number;
}
+
+export interface StylesOptions {
+ css?: Partial>;
+ classes?: string[]
+}
+
+export interface Bounds extends Size, Location {
+}
diff --git a/src/webGroupsManager.ts b/src/webGroupsManager.ts
index 44f750b..6822e41 100644
--- a/src/webGroupsManager.ts
+++ b/src/webGroupsManager.ts
@@ -1,4 +1,4 @@
-import { Bounds, StandardButtons, TargetType, WebGroupsManager } from "./types/internal";
+import { Bounds, Location, StandardButtons, StylesOptions, TargetType, WebGroupsManager } from "./types/internal";
import callbackRegistry from "callback-registry";
declare const window: Window & { webGroupsManager: WebGroupsManager };
@@ -55,92 +55,48 @@ class WebGroupsManagerDecorator {
return window.webGroupsManager.externalLibraryFactory.focusGroup();
}
- public closeFrame(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Close);
+ public onCloseButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Close);
}
- public restoreFrame(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Restore);
+ public onRestoreButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Restore);
}
- public maximizeFrame(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Maximize);
+ public onMaximizeButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Maximize);
}
- public minimizeFrame(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Minimize);
+ public onMinimizeButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Minimize);
}
- public lockFrame(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Lock);
+ public onLockButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Lock);
}
- public unlockFrame(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Unlock);
+ public onUnlockButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Unlock);
}
- public feedbackFrame(targetId: string):void{
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Feedback);
+ public onOverflowButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Overflow);
}
- public stickyFrame(targetId: string):void{
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Sticky);
+ public onFeedbackButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Feedback);
}
- public extractFrame(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Extract);
+ public onCloneButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Clone);
}
- public closeTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Close);
+ public onStickyButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Sticky);
}
- public restoreTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Restore);
- }
-
- public maximizeTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Maximize);
- }
-
- public minimizeTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Minimize);
- }
-
- public lockTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Lock);
- }
-
- public unlockTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Unlock);
- }
-
- public feedbackTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Feedback);
- }
-
- public stickyTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Sticky);
- }
-
- public extractTabBar(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Extract);
- }
-
- public closeGroup(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Close);
- }
-
- public restoreGroup(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Restore);
- }
-
- public maximizeGroup(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Maximize);
- }
-
- public minimizeGroup(targetId: string): void {
- window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Minimize);
+ public onExtractButtonClick(targetType: TargetType, targetId: string): void {
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Extract);
}
public closeTab(targetId: string): void {
@@ -202,6 +158,45 @@ class WebGroupsManagerDecorator {
public requestCommitCaptionEditing(targetType: TargetType, targetId: string) {
this.registry.execute(`${targetType}-${targetId}`);
}
+
+ public updateTabHeaderStyles(styles: StylesOptions) {
+ window.webGroupsManager.externalLibraryFactory.updateTabHeaderStyles(styles);
+ }
+
+ public updateTabMoveAreaStyles(styles: StylesOptions) {
+ window.webGroupsManager.externalLibraryFactory.updateTabMoveAreaStyles(styles);
+ }
+
+ public updateFrameStyles(styles: StylesOptions) {
+ window.webGroupsManager.externalLibraryFactory.updateFrameStyles(styles);
+ }
+ public selectTab(windowId: string): void {
+ window.webGroupsManager.externalLibraryFactory.selectTab(windowId);
+ }
+
+ public addTabContainerClass(windowId: string, className: string): void {
+ if (typeof window.webGroupsManager.externalLibraryFactory.addTabContainerClass !== "function") {
+ console.warn("The method addTabContainerClass is not supported by the current version of the library");
+ return;
+ }
+ window.webGroupsManager.externalLibraryFactory.addTabContainerClass(windowId, className);
+ }
+
+ public removeTabContainerClass(windowId: string, className: string): void {
+ if (typeof window.webGroupsManager.externalLibraryFactory.removeTabContainerClass !== "function") {
+ console.warn("The method removeTabContainerClass is not supported by the current version of the library");
+ return;
+ }
+ window.webGroupsManager.externalLibraryFactory.removeTabContainerClass(windowId, className);
+ }
+
+ public openTabOverflowPopup(frameId: string, location: Location): void {
+ if (typeof window.webGroupsManager.externalLibraryFactory.openTabOverflowPopup !== "function") {
+ console.warn("The method openTabOverflowPopup is not supported by the current version of the library");
+ return;
+ }
+ window.webGroupsManager.externalLibraryFactory.openTabOverflowPopup(frameId, location);
+ }
}
export default new WebGroupsManagerDecorator();
\ No newline at end of file
diff --git a/src/webGroupsStore.ts b/src/webGroupsStore.ts
index afc8376..1c2ec1a 100644
--- a/src/webGroupsStore.ts
+++ b/src/webGroupsStore.ts
@@ -3,7 +3,7 @@ import {
CreateFrameCaptionBarRequestOptions,
CreateFrameElementRequestOptions,
CreateGroupCaptionBarRequestOptions,
- CreateTabHeaderButtonsOptions,
+ CreateButtonsOptions,
CreateTabRequestOptions,
ElementCreationWrapperState,
RemoveRequestOptions,
@@ -13,7 +13,9 @@ import {
UpdateStandardButtonRequestOptions,
UpdateFrameRequestOptions,
CreateFrameLoadingAnimationRequestOptions,
- UpdateCustomButtonsRequestOptions
+ UpdateCustomButtonsRequestOptions,
+ CreateTabOverflowPopupRequestOptions,
+ OverflowedTabInfo
} from "./types/internal";
import webGroupsManager from "./webGroupsManager";
@@ -33,8 +35,10 @@ class WebGroupsStore {
tabElements: {}, // dict windowId to create tab elements options
afterTabsZones: {}, // dict frameId to after tabs zones options
tabHeaderButtons: {}, // dict frameId to crate tab header buttons options
+ tabOverflowPopups: {}, // dict frameId to create tab overflow popup options,
belowTabsZones: {}, // dict frameId to create options
frameLoadingAnimations: {}, // dict frameId to create options
+ htmlButtons: {}, // dict frameId to crate html buttons options
}
public subscribe = (cb: () => void) => {
@@ -229,7 +233,7 @@ class WebGroupsStore {
});
}
- public onCreateTabHeaderButtonsRequested = (options: CreateTabHeaderButtonsOptions) => {
+ public onCreateTabHeaderButtonsRequested = (options: CreateButtonsOptions) => {
if (options === this.state.tabHeaderButtons[options.targetId] || !options) {
return;
}
@@ -259,6 +263,52 @@ class WebGroupsStore {
});
}
+ public onCreateHtmlButtonsRequested = (options: CreateButtonsOptions) => {
+ if (options === this.state.htmlButtons[options.targetId] || !options) {
+ return;
+ }
+ this.setState(s => {
+ return {
+ ...s,
+ htmlButtons: {
+ ...s.htmlButtons,
+ [options.targetId]: options
+ }
+ }
+ });
+ }
+
+ public onCreateTabOverflowPopupRequested = (options: CreateTabOverflowPopupRequestOptions) => {
+ if (options === this.state.tabOverflowPopups[options.targetId] || !options) {
+ return;
+ }
+
+ this.setState(s => {
+ return {
+ ...s,
+ tabOverflowPopups: {
+ ...s.tabOverflowPopups,
+ [options.targetId]: options
+ }
+ }
+ });
+ }
+
+ public onUpdateHtmlButtonsRequested = (options: CreateButtonsOptions) => {
+ if (options === this.state.htmlButtons[options.targetId] || !options) {
+ return;
+ }
+ this.setState(s => {
+ return {
+ ...s,
+ htmlButtons: {
+ ...s.htmlButtons,
+ [options.targetId]: { ...s.htmlButtons[options.targetId], ...options }
+ }
+ }
+ });
+ }
+
public onUpdateGroupCaptionBarRequested = (options: UpdateGroupCaptionBarRequestOptions) => {
if (options === this.state.groupCaptionBar) {
return;
@@ -362,7 +412,7 @@ class WebGroupsStore {
});
}
- public onUpdateTabHeaderButtonsRequested = (options: CreateTabHeaderButtonsOptions) => {
+ public onUpdateTabHeaderButtonsRequested = (options: CreateButtonsOptions) => {
if (options === this.state.tabHeaderButtons[options.targetId] || !options) {
return;
}
@@ -401,10 +451,23 @@ class WebGroupsStore {
return;
}
- if (s[stateProp]![targetId] && s[stateProp]![targetId]?.selectedWindow !== selectedWindow) {
+ if (newState[stateProp]![targetId] && newState[stateProp]![targetId]?.selectedWindow !== selectedWindow) {
newState[stateProp] = {
- ...s[stateProp],
- [targetId]: { ...s[stateProp]![targetId], selectedWindow: selectedWindow }
+ ...newState[stateProp],
+ [targetId]: { ...newState[stateProp]![targetId], selectedWindow }
+ }
+ }
+ };
+
+ const updateHiddenTabs = (stateProp: T, targetId: string, hiddenTabsToTheLeft: OverflowedTabInfo[], hiddenTabsToTheRight: OverflowedTabInfo[]) => {
+ const oldHiddenToTheLeft = newState[stateProp]![targetId]?.hiddenTabsToTheLeft;
+ const oldHiddenToTheRight = newState[stateProp]![targetId]?.hiddenTabsToTheRight;
+ newState[stateProp] = {
+ ...newState[stateProp],
+ [targetId]: {
+ ...newState[stateProp]![targetId],
+ hiddenTabsToTheLeft: hiddenTabsToTheLeft || oldHiddenToTheLeft,
+ hiddenTabsToTheRight: hiddenTabsToTheRight || oldHiddenToTheRight
}
}
};
@@ -421,64 +484,85 @@ class WebGroupsStore {
updateSelectionWindow("belowTabsZones", options.targetId, options.selectedWindow);
updateSelectionWindow("frameLoadingAnimations", options.targetId, options.selectedWindow);
+ updateHiddenTabs("afterTabsZones", options.targetId, options.hiddenTabsToTheLeft, options.hiddenTabsToTheRight);
+ updateHiddenTabs("tabHeaderButtons", options.targetId, options.hiddenTabsToTheLeft, options.hiddenTabsToTheRight);
+
return newState;
});
}
public onUpdateStandardButton = (options: UpdateStandardButtonRequestOptions) => {
- const isCaptionBar = options.targetType === TargetType.Group; //this.state.groupCaptionBar?.targetId === options.targetId;
- const isFrame = options.targetType === TargetType.Frame;
- const isTabHeaderButtons = options.targetType === TargetType.TabBar;
-
- if (isCaptionBar) {
- const currentState = this.state.groupCaptionBar || { targetId: options.targetId } as CreateGroupCaptionBarRequestOptions;
- const newOptions = {
- ...currentState,
- [options.buttonId]: {
- ...options
- }
- };
- this.onUpdateGroupCaptionBarRequested(newOptions as UpdateGroupCaptionBarRequestOptions);
- } else if (isFrame && options.targetType === TargetType.Frame) {
- const currentState = this.state.frameCaptionBars[options.targetId] || { targetId: options.targetId } as CreateTabHeaderButtonsOptions;
- const newOptions = {
- ...currentState,
- [options.buttonId]: {
- ...options
- }
- };
- this.onUpdateFrameCaptionBarRequested(newOptions);
- } else if (isTabHeaderButtons && options.targetType === TargetType.TabBar) {
- const currentState = this.state.tabHeaderButtons[options.targetId] || { targetId: options.targetId } as CreateTabHeaderButtonsOptions;
- const newOptions = {
- ...currentState,
- [options.buttonId]: {
- ...options
- }
- };
-
- this.onUpdateTabHeaderButtonsRequested(newOptions);
+ const targetState = { targetId: options.targetId };
+ switch (options.targetType) {
+ case TargetType.Group:
+ const currentGroupState = this.state.groupCaptionBar || targetState as CreateGroupCaptionBarRequestOptions;
+ const newGroupOptions = {
+ ...currentGroupState,
+ [options.buttonId]: {
+ ...options
+ }
+ };
+ this.onUpdateGroupCaptionBarRequested(newGroupOptions);
+ break;
+ case TargetType.Frame:
+ const currentFrameState = this.state.frameCaptionBars[options.targetId] || targetState as CreateFrameCaptionBarRequestOptions;
+ const newFrameOptions = {
+ ...currentFrameState,
+ [options.buttonId]: {
+ ...options
+ }
+ };
+ this.onUpdateFrameCaptionBarRequested(newFrameOptions);
+ break;
+ case TargetType.TabBar:
+ const currentTabButtonsState = this.state.tabHeaderButtons[options.targetId] || targetState as CreateButtonsOptions;
+ const newTabButtonsOptions = {
+ ...currentTabButtonsState,
+ [options.buttonId]: {
+ ...options
+ }
+ };
+ this.onUpdateTabHeaderButtonsRequested(newTabButtonsOptions);
+ break;
+ case TargetType.HtmlButtons:
+ const currentHtmlButtonsState = this.state.htmlButtons[options.targetId] || targetState as CreateButtonsOptions;
+ const newHtmlButtonsOptions = {
+ ...currentHtmlButtonsState,
+ [options.buttonId]: {
+ ...options
+ }
+ };
+ this.onUpdateHtmlButtonsRequested(newHtmlButtonsOptions);
+ break;
}
}
public onUpdateCustomButtons = (options: UpdateCustomButtonsRequestOptions) => {
- const isFrame = options.targetType === TargetType.Frame;
- const isTabHeaderButtons = options.targetType === TargetType.TabBar;
-
- if (isFrame && options.targetType === TargetType.Frame) {
- const currentState = this.state.frameCaptionBars[options.targetId] || { targetId: options.targetId } as CreateTabHeaderButtonsOptions;
- const newOptions = {
- ...currentState,
- ...options
- };
- this.onUpdateFrameCaptionBarRequested(newOptions);
- } else if (isTabHeaderButtons && options.targetType === TargetType.TabBar) {
- const currentState = this.state.tabHeaderButtons.customButtons || { customButtons: options.customButtons } as CreateTabHeaderButtonsOptions;
- const newOptions = {
- ...currentState,
- ...options
- };
- this.onUpdateTabHeaderButtonsRequested(newOptions);
+ switch (options.targetType) {
+ case TargetType.Frame:
+ const currentFrameState = this.state.frameCaptionBars[options.targetId] || { targetId: options.targetId } as CreateButtonsOptions;
+ const newFrameOptions = {
+ ...currentFrameState,
+ ...options
+ };
+ this.onUpdateFrameCaptionBarRequested(newFrameOptions);
+ break;
+ case TargetType.TabBar:
+ const currentTabBarState = this.state.tabHeaderButtons.customButtons || { customButtons: options.customButtons } as CreateButtonsOptions;
+ const newTabBarOptions = {
+ ...currentTabBarState,
+ ...options
+ };
+ this.onUpdateTabHeaderButtonsRequested(newTabBarOptions);
+ break;
+ case TargetType.HtmlButtons:
+ const currentHtmlButtonsState = this.state.htmlButtons.customButtons || { customButtons: options.customButtons } as CreateButtonsOptions;
+ const newHtmlButtonsOptions = {
+ ...currentHtmlButtonsState,
+ ...options
+ };
+ this.onUpdateHtmlButtonsRequested(newHtmlButtonsOptions);
+ break;
}
}
@@ -709,6 +793,44 @@ class WebGroupsStore {
});
}
+ public onRemoveHtmlButtonsRequested = (options: RemoveRequestOptions) => {
+ if (!this.state.htmlButtons[options.targetId]) {
+ return;
+ }
+ this.setState(s => {
+ const newHtmlObj = Object.keys(s.htmlButtons).reduce((acc, targetId) => {
+ if (targetId != options.targetId) {
+ acc[targetId] = s.htmlButtons[targetId];
+ }
+ return acc;
+ }, {});
+
+ return {
+ ...s,
+ htmlButtons: newHtmlObj
+ }
+ });
+ }
+
+ public onRemoveTabOverflowPopupRequested = (options: RemoveRequestOptions) => {
+ if (!this.state.tabOverflowPopups[options.targetId]) {
+ return;
+ }
+ this.setState(s => {
+ const newTabOverflowPopupsObj = Object.keys(s.tabOverflowPopups).reduce((acc, targetId) => {
+ if (targetId != options.targetId) {
+ acc[targetId] = s.tabOverflowPopups[targetId];
+ }
+ return acc;
+ }, {});
+
+ return {
+ ...s,
+ tabOverflowPopups: newTabOverflowPopupsObj
+ }
+ });
+ }
+
public onShowCaptionEditorRequested = (targetType: TargetType, targetId: string, text: string) => {
if (targetType === TargetType.Group) {
this.onShowGroupCaptionEditorRequested(targetId, text);
@@ -733,15 +855,15 @@ class WebGroupsStore {
}
}
- public onShowLoadingAnimationRequested = (targetType: TargetType,targetId: string) => {
- if (targetType === TargetType.Frame) {
+ public onShowLoadingAnimationRequested = (targetType: TargetType, targetId: string) => {
+ if (targetType === TargetType.Frame) {
this.onShowLoadingAnimation(targetId);
- } else {
+ } else {
console.warn(`Loading animation for elements other than Frame are not supported`);
- }
+ }
}
- public onHideLoadingAnimationRequested = (targetType: TargetType,targetId: string) => {
+ public onHideLoadingAnimationRequested = (targetType: TargetType, targetId: string) => {
if (targetType === TargetType.Frame) {
this.onHideLoadingAnimation(targetId);
} else {