@rpg-engine/long-bow 0.1.794 → 0.2.2

package/src/components/ListMenu.tsx

@@ -1,65 +1,65 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface IListMenuOption {
-  id: string;
-  text: string;
-}
-
-export interface IListMenuProps {
-  x: number;
-  y: number;
-  options: IListMenuOption[];
-  onSelected: (selectedOptionId: string) => void;
-  fontSize?: number;
-}
-
-export const ListMenu: React.FC<IListMenuProps> = ({
-  options,
-  onSelected,
-  x,
-  y,
-  fontSize = 0.8,
-}) => {
-  return (
-    <Container x={x} y={y} fontSize={fontSize}>
-      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
-        {options.map((params, index) => (
-          <ListElement
-            key={params?.id || index}
-            onClick={() => {
-              onSelected(params?.id);
-            }}
-          >
-            {params?.text || 'No text'}
-          </ListElement>
-        ))}
-      </ul>
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  x?: number;
-  y?: number;
-  fontSize?: number;
-}
-
-const Container = styled.div<IContainerProps>`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  justify-content: start;
-  align-items: flex-start;
-  position: absolute;
-  top: ${props => props.y || 0}px;
-  left: ${props => props.x || 0}px;
-
-  li {
-    font-size: ${props => props.fontSize}em;
-  }
-`;
-
-const ListElement = styled.li`
-  margin-right: 0.5rem;
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IListMenuProps {
+  x: number;
+  y: number;
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+  fontSize?: number;
+}
+
+export const ListMenu: React.FC<IListMenuProps> = ({
+  options,
+  onSelected,
+  x,
+  y,
+  fontSize = 0.8,
+}) => {
+  return (
+    <Container x={x} y={y} fontSize={fontSize}>
+      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
+        {options.map((params, index) => (
+          <ListElement
+            key={params?.id || index}
+            onClick={() => {
+              onSelected(params?.id);
+            }}
+          >
+            {params?.text || 'No text'}
+          </ListElement>
+        ))}
+      </ul>
+    </Container>
+  );
+};
+
+interface IContainerProps {
+  x?: number;
+  y?: number;
+  fontSize?: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: start;
+  align-items: flex-start;
+  position: absolute;
+  top: ${props => props.y || 0}px;
+  left: ${props => props.x || 0}px;
+
+  li {
+    font-size: ${props => props.fontSize}em;
+  }
+`;
+
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/components/Multitab/Tab.tsx

@@ -1,57 +1,57 @@
-import React from 'react';
-import styled from 'styled-components';
-import { MultitabType } from './TabsContainer';
-
-export interface ISingleTab {
-  active: boolean;
-  label: string;
-  onClick: () => void;
-  type: MultitabType;
-}
-
-export const Tab: React.FC<ISingleTab> = ({ active, label, onClick, type }) => {
-  return (
-    <CustomTab activeTab={active} onClick={onClick} className={type}>
-      <p>{label}</p>
-    </CustomTab>
-  );
-};
-
-interface ICustomTab {
-  activeTab: boolean;
-}
-
-const CustomTab = styled.div<ICustomTab>`
-  width: 120px;
-  color: white;
-  font-size: 0.8rem;
-
-  &.gray {
-    border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
-    border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
-    border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
-    background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
-  }
-
-  &.brown {
-    border-left: 0.25rem solid #996d55;
-    border-right: 0.25rem solid #996d55;
-    border-top: 0.25rem solid #996d55;
-    background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
-  }
-
-  margin-right: 10px;
-  p {
-    text-align: center;
-    font-size: 0.6rem;
-
-    opacity: ${props => (props.activeTab ? '1' : '0.5')};
-  }
-
-  border-radius: 5px 5px 0 0;
-
-  z-index: ${props => (props.activeTab ? 1 : -1)};
-
-  position: relative;
-  top: 0.3rem;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { MultitabType } from './TabsContainer';
+
+export interface ISingleTab {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+  type: MultitabType;
+}
+
+export const Tab: React.FC<ISingleTab> = ({ active, label, onClick, type }) => {
+  return (
+    <CustomTab activeTab={active} onClick={onClick} className={type}>
+      <p>{label}</p>
+    </CustomTab>
+  );
+};
+
+interface ICustomTab {
+  activeTab: boolean;
+}
+
+const CustomTab = styled.div<ICustomTab>`
+  width: 120px;
+  color: white;
+  font-size: 0.8rem;
+
+  &.gray {
+    border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
+  }
+
+  &.brown {
+    border-left: 0.25rem solid #996d55;
+    border-right: 0.25rem solid #996d55;
+    border-top: 0.25rem solid #996d55;
+    background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
+  }
+
+  margin-right: 10px;
+  p {
+    text-align: center;
+    font-size: 0.6rem;
+
+    opacity: ${props => (props.activeTab ? '1' : '0.5')};
+  }
+
+  border-radius: 5px 5px 0 0;
+
+  z-index: ${props => (props.activeTab ? 1 : -1)};
+
+  position: relative;
+  top: 0.3rem;
+`;

package/src/components/Multitab/TabBody.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  id: string;
-  children: React.ReactNode;
-}
-
-export const TabBody: React.FC<IProps> = ({ id, children }) => {
-  return <Container data-tab-id={id}>{children}</Container>;
-};
-
-const Container = styled.div``;
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const TabBody: React.FC<IProps> = ({ id, children }) => {
+  return <Container data-tab-id={id}>{children}</Container>;
+};
+
+const Container = styled.div``;

package/src/components/Multitab/TabsContainer.tsx

@@ -1,97 +1,97 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { DraggableContainer } from '../DraggableContainer';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { Tab } from './Tab';
-
-interface ITab {
-  label: string;
-  id: string;
-}
-
-export enum MultitabType {
-  Brown = 'brown',
-  Gray = 'gray',
-}
-
-export interface ITabsContainer {
-  children: React.ReactNode;
-  onCloseButton?: () => void;
-  tabs: ITab[];
-  type: MultitabType;
-}
-
-export const TabsContainer: React.FC<ITabsContainer> = ({
-  children,
-  onCloseButton,
-  tabs,
-  type = MultitabType.Brown,
-}) => {
-  const [selectedTab, setSelectedTab] = useState(tabs[0].id); //by default the first one
-
-  const onRenderTabs = () =>
-    tabs.map((tab, index) => (
-      <Tab
-        type={type}
-        active={selectedTab === tab.id}
-        label={tab.label}
-        key={`${tab.label}_${index}`}
-        onClick={() => setSelectedTab(tab.id)}
-      />
-    ));
-
-  const onGetContainerType = () => {
-    switch (type) {
-      case 'brown':
-        return RPGUIContainerTypes.FramedGold;
-      case 'gray':
-        return RPGUIContainerTypes.Framed;
-      default:
-        return RPGUIContainerTypes.Framed;
-    }
-  };
-
-  return (
-    <DraggableContainer
-      onCloseButton={onCloseButton}
-      type={onGetContainerType()}
-    >
-      {onRenderTabs()}
-      <BodyContainer selectedTab={selectedTab} className={type}>
-        {children}
-      </BodyContainer>
-    </DraggableContainer>
-  );
-};
-
-interface IBodyContainer {
-  selectedTab: string;
-}
-
-const BodyContainer = styled.div<IBodyContainer>`
-  display: flex; 
-  width: 100%;
-  height: 100%;
-  justify-content: space-between;
-
-  /* hide everything that is not data-tab-id selectedTab */
-  & > *:not([data-tab-id=${props => props.selectedTab}]) {
-    display: none;
-  }
-
-  &.brown {
-  border: 0.25rem solid #996D55;
-  background-color: #BF886A;
-  }
-  
-
-  &.gray {
-    border: 0.25rem solid rgba(0, 0, 0, 0.25);
-    background-color: #4E4A4E;
-  }
- 
-
-  border-radius: 5px; 
-  padding: 0.5rem; 
-   
-`;
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Tab } from './Tab';
+
+interface ITab {
+  label: string;
+  id: string;
+}
+
+export enum MultitabType {
+  Brown = 'brown',
+  Gray = 'gray',
+}
+
+export interface ITabsContainer {
+  children: React.ReactNode;
+  onCloseButton?: () => void;
+  tabs: ITab[];
+  type: MultitabType;
+}
+
+export const TabsContainer: React.FC<ITabsContainer> = ({
+  children,
+  onCloseButton,
+  tabs,
+  type = MultitabType.Brown,
+}) => {
+  const [selectedTab, setSelectedTab] = useState(tabs[0].id); //by default the first one
+
+  const onRenderTabs = () =>
+    tabs.map((tab, index) => (
+      <Tab
+        type={type}
+        active={selectedTab === tab.id}
+        label={tab.label}
+        key={`${tab.label}_${index}`}
+        onClick={() => setSelectedTab(tab.id)}
+      />
+    ));
+
+  const onGetContainerType = () => {
+    switch (type) {
+      case 'brown':
+        return RPGUIContainerTypes.FramedGold;
+      case 'gray':
+        return RPGUIContainerTypes.Framed;
+      default:
+        return RPGUIContainerTypes.Framed;
+    }
+  };
+
+  return (
+    <DraggableContainer
+      onCloseButton={onCloseButton}
+      type={onGetContainerType()}
+    >
+      {onRenderTabs()}
+      <BodyContainer selectedTab={selectedTab} className={type}>
+        {children}
+      </BodyContainer>
+    </DraggableContainer>
+  );
+};
+
+interface IBodyContainer {
+  selectedTab: string;
+}
+
+const BodyContainer = styled.div<IBodyContainer>`
+  display: flex; 
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+
+  /* hide everything that is not data-tab-id selectedTab */
+  & > *:not([data-tab-id=${props => props.selectedTab}]) {
+    display: none;
+  }
+
+  &.brown {
+  border: 0.25rem solid #996D55;
+  background-color: #BF886A;
+  }
+  
+
+  &.gray {
+    border: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background-color: #4E4A4E;
+  }
+ 
+
+  border-radius: 5px; 
+  padding: 0.5rem; 
+   
+`;