@interopio/groups-ui-react 2.4.0 → 2.4.1

package/dist/cjs/types/api.d.ts

@@ -6,6 +6,11 @@ export interface ChannelProps {
     selectedChannel: string;
     showSelector: (bounds: Bounds) => void;
     selectedChannelColor: string;
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface FrameWindowOverlayProps {
     frameId: string;

package/dist/cjs/types/defaultComponents.d.ts

@@ -54,16 +54,28 @@ export interface BaseChannelSelectorProps {
     contentClass: string;
     selectedChannel: string;
     selectedChannelColor: string;
+    direction: string;
+    channelLabel: string;
 }
 export interface FlatChannelSelectorProps {
     showSelector: (bounds: Bounds) => void;
     selectedChannel: string;
     selectedChannelColor: 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 FlatCaptionEditorProps {
     frameId: string;

package/dist/cjs/types/internal.d.ts

@@ -102,6 +102,11 @@ export interface CreateFrameCaptionBarRequestOptions extends CreateButtonsOption
         show: boolean;
         text?: string;
     };
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface CreateTabRequestOptions extends CreateElementRequestOptions {
     caption: string;
@@ -115,6 +120,11 @@ export interface CreateTabRequestOptions extends CreateElementRequestOptions {
         show: boolean;
         text?: string;
     };
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface UpdateStandardButtonRequestOptions extends CreateElementRequestOptions {
     buttonId: StandardButtons;
@@ -177,6 +187,8 @@ export interface CreateButtonsOptions extends CreateFrameElementRequestOptions {
         visible: boolean;
     };
     customButtons: UpdateCustomButtonOptions[];
+    hiddenTabsToTheLeft: OverflowedTabInfo[];
+    hiddenTabsToTheRight: OverflowedTabInfo[];
 }
 export interface RemoveRequestOptions {
     targetId: string;

package/dist/esm/defaultComponents/channelSelector/utils.d.ts

@@ -1 +1,5 @@
 export declare function IsBlackReadable(color: string): boolean;
+export declare function getChannelDirection(channelRestrictions: {
+    read: boolean;
+    write: boolean;
+}): string;

package/dist/esm/index.js

@@ -570,10 +570,30 @@ function IsBlackReadable(color) {
         console.error("Error while checking readable color for '" + color + "'", error);
     }
     return false;
+}
+function getChannelDirection(channelRestrictions) {
+    if (!channelRestrictions) {
+        return "";
+    }
+    if (typeof channelRestrictions.read === "boolean" && typeof channelRestrictions.write === "boolean") {
+        if (channelRestrictions.read && channelRestrictions.write) {
+            return "";
+        }
+        if (channelRestrictions.read) {
+            return "subscribe";
+        }
+        if (channelRestrictions.write) {
+            return "publish";
+        }
+        return "";
+    }
+    else {
+        return "";
+    }
 }
 
 var BaseChannelSelector = function (_a) {
-    var outsideClass = _a.outsideClass, contentClass = _a.contentClass, showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
+    var outsideClass = _a.outsideClass, contentClass = _a.contentClass, showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, direction = _a.direction, channelLabel = _a.channelLabel;
     var ref = useRef(null);
     var wrappedOnClick = function () {
         if (!ref.current) {
@@ -600,13 +620,15 @@ var BaseChannelSelector = function (_a) {
     var style = {
         background: selectedChannelColor
     };
-    return React.createElement("div", { title: selectedChannel !== null && selectedChannel !== void 0 ? selectedChannel : "", ref: ref, style: style, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass },
-        React.createElement("div", { className: className }));
+    return React.createElement("div", { title: selectedChannel !== null && selectedChannel !== void 0 ? selectedChannel : "", ref: ref, style: style, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass }, channelLabel ?
+        React.createElement("div", { className: className + " icon" },
+            channelLabel,
+            direction && React.createElement("i", { className: "icon-" + direction })) : React.createElement("div", { className: className }));
 };
 
 var FlatChannelSelector = function (_a) {
-    var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
-    return React.createElement(BaseChannelSelector, { outsideClass: "t42-frame-caption-bar-element t42-frame-channel-selector", contentClass: "t42-frame-channel-selector-content", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor });
+    var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, channelRestrictions = _a.channelRestrictions, channelLabel = _a.channelLabel;
+    return React.createElement(BaseChannelSelector, { outsideClass: channelLabel ? "t42-frame-caption-bar-element t42-frame-channel-selector t42-channel-selector-direction" : "t42-frame-caption-bar-element t42-frame-channel-selector", contentClass: !channelLabel ? "t42-frame-channel-selector-content" : "", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor, direction: getChannelDirection(channelRestrictions), channelLabel: channelLabel });
 };
 
 var ExtractButton = function (_a) {
@@ -1764,7 +1786,7 @@ var FlatMoveArea = function (_a) {
 var FlatCaptionBar = function (_a) {
     var moveAreaId = _a.moveAreaId, caption = _a.caption, channels = _a.channels, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, rest = __rest(_a, ["moveAreaId", "caption", "channels", "captionEditor", "notifyCaptionBoundsChanged"]);
     return (React.createElement("div", { className: "t42-react-caption-bar" },
-        (channels === null || channels === void 0 ? void 0 : channels.visible) && React.createElement(FlatChannelSelector, { showSelector: channels === null || channels === void 0 ? void 0 : channels.showSelector, selectedChannel: channels === null || channels === void 0 ? void 0 : channels.selectedChannel, selectedChannelColor: channels === null || channels === void 0 ? void 0 : channels.selectedChannelColor }),
+        (channels === null || channels === void 0 ? void 0 : channels.visible) && React.createElement(FlatChannelSelector, { showSelector: channels === null || channels === void 0 ? void 0 : channels.showSelector, selectedChannel: channels === null || channels === void 0 ? void 0 : channels.selectedChannel, selectedChannelColor: channels === null || channels === void 0 ? void 0 : channels.selectedChannelColor, channelRestrictions: channels === null || channels === void 0 ? void 0 : channels.channelRestrictions, channelLabel: channels === null || channels === void 0 ? void 0 : channels.channelLabel }),
         React.createElement(FlatMoveArea, { moveAreaId: moveAreaId }, captionEditor.show ? React.createElement(FlatCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, frameId: rest.frameId })) : React.createElement(FlatCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
         React.createElement(FlatButtons, __assign({}, rest))));
 };
@@ -1805,8 +1827,8 @@ var GroupCaptionBar = function (_a) {
 };
 
 var TabChannelSelector = function (_a) {
-    var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
-    return React.createElement(BaseChannelSelector, { outsideClass: "t42-tab-bar-element t42-tab-channel-selector", contentClass: "t42-tab-channel-selector-content", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor });
+    var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, channelRestrictions = _a.channelRestrictions, channelLabel = _a.channelLabel;
+    return React.createElement(BaseChannelSelector, { outsideClass: channelLabel ? "t42-tab-bar-element t42-tab-channel-selector t42-channel-selector-direction" : "t42-tab-bar-element t42-tab-channel-selector", contentClass: !channelLabel ? "t42-tab-channel-selector-content" : "", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor, direction: getChannelDirection(channelRestrictions), channelLabel: channelLabel });
 };
 
 var TabCaption = function (_a) {
@@ -3016,7 +3038,9 @@ var GroupElementCreationWrapper = function (_a) {
                 showSelector: showSelector,
                 visible: options.channelSelectorVisible,
                 selectedChannel: options.selectedChannel,
-                selectedChannelColor: options.selectedChannelColor
+                selectedChannelColor: options.selectedChannelColor,
+                channelRestrictions: options.channelRestrictions,
+                channelLabel: options.channelLabel
             };
             var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
                     webGroupsManager.commitCaptionEditing(TargetType.Frame, options.targetId, text);
@@ -3134,7 +3158,9 @@ var GroupElementCreationWrapper = function (_a) {
                 showSelector: showSelector,
                 visible: options.channelSelectorVisible,
                 selectedChannel: options.selectedChannel,
-                selectedChannelColor: (_a = options.selectedChannelColor) !== null && _a !== void 0 ? _a : options.selectedChannel // TODO remove the null check when the variable has been added
+                selectedChannelColor: (_a = options.selectedChannelColor) !== null && _a !== void 0 ? _a : options.selectedChannel,
+                channelRestrictions: options.channelRestrictions,
+                channelLabel: options.channelLabel
             };
             var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
                     webGroupsManager.commitCaptionEditing(TargetType.Tab, options.targetId, text);