@rpg-engine/long-bow 0.7.26 → 0.7.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.26",
+  "version": "0.7.27",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Multitab/TabsContainer.tsx

@@ -29,6 +29,7 @@ export interface ITabsContainer {
     imgSrc?: string;
     imgWidth?: string;
   };
+  isDraggableModal: boolean;
 }
 
 export const TabsContainer: React.FC<ITabsContainer> = ({
@@ -36,9 +37,10 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
   onCloseButton,
   tabs,
   type = MultitabType.Brown,
-  styles = {}, // default to an empty object to avoid undefined errors
+  styles = {},
+  isDraggableModal = false,
 }) => {
-  const [selectedTab, setSelectedTab] = useState(tabs[0].id); // by default the first one
+  const [selectedTab, setSelectedTab] = useState(tabs[0].id);
 
   const onRenderTabs = () =>
     tabs.map((tab, index) => (
@@ -62,20 +64,8 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
     }
   };
 
-  return (
-    <DraggableContainer
-      onCloseButton={onCloseButton}
-      type={onGetContainerType()}
-      cancelDrag=".tabs-container *" // Disable drag on all elements inside .tabs-container
-      width={styles?.width} // use optional chaining
-      height={styles?.height}
-      minWidth={styles?.minWidth}
-      minHeight={styles?.minHeight}
-      className={styles?.className}
-      title={styles?.title}
-      imgSrc={styles?.imgSrc}
-      imgWidth={styles?.imgWidth}
-    >
+  const TabsCore = () => (
+    <>
       {onRenderTabs()}
       <BodyContainer
         selectedTab={selectedTab}
@@ -83,7 +73,38 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
       >
         {children}
       </BodyContainer>
-    </DraggableContainer>
+    </>
+  );
+
+  if (isDraggableModal) {
+    return (
+      <DraggableContainer
+        onCloseButton={onCloseButton}
+        type={onGetContainerType()}
+        cancelDrag=".tabs-container *"
+        width={styles?.width}
+        height={styles?.height}
+        minWidth={styles?.minWidth}
+        minHeight={styles?.minHeight}
+        className={styles?.className}
+        title={styles?.title}
+        imgSrc={styles?.imgSrc}
+        imgWidth={styles?.imgWidth}
+      >
+        {TabsCore()}
+      </DraggableContainer>
+    );
+  }
+
+  return (
+    <NonDraggableWrapper
+      width={styles?.width}
+      height={styles?.height}
+      minWidth={styles?.minWidth}
+      minHeight={styles?.minHeight}
+    >
+      {TabsCore()}
+    </NonDraggableWrapper>
   );
 };
 
@@ -92,6 +113,7 @@ interface IBodyContainer {
 }
 
 const BodyContainer = styled.div<IBodyContainer>`
+
   display: flex; 
   width: 100%;
   height: 100%;
@@ -115,3 +137,23 @@ const BodyContainer = styled.div<IBodyContainer>`
   border-radius: 5px; 
   padding: 0.5rem; 
 `;
+
+interface INonDraggableWrapperProps {
+  width?: string;
+  height?: string;
+  minWidth?: string;
+  minHeight?: string;
+}
+
+const NonDraggableWrapper = styled.div<INonDraggableWrapperProps>`
+  height: ${props => props.height || 'auto'};
+  width: ${props => props.width || '50%'};
+  min-width: ${props => props.minWidth || 'auto'};
+  min-height: ${props => props.minHeight || 'auto'};
+  display: flex;
+  flex-wrap: wrap;
+  image-rendering: pixelated;
+  overflow-y: hidden;
+  padding-top: 1.5rem;
+  position: relative;
+`;