@rpg-engine/long-bow 0.1.76 → 0.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.1.76",
+  "version": "0.1.77",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -61,8 +61,8 @@
     "@storybook/addon-links": "^6.5.9",
     "@storybook/addons": "^6.5.9",
     "@storybook/react": "^6.5.9",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "babel-loader": "^8.2.3",

package/src/components/Multitab/TabsContainer.tsx

@@ -37,9 +37,7 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
         label={tab.label}
         key={`${tab.label}_${index}`}
         onClick={() => setSelectedTab(tab.id)}
-      >
-        {tab.label}
-      </Tab>
+      />
     ));
 
   const onGetContainerType = () => {

package/src/components/ScrollList.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from './DraggableContainer';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IListMenuProps {
+  x: number;
+  y: number;
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+  fontSize?: number;
+  title: string;
+}
+
+export const ListMenu: React.FC<IListMenuProps> = ({
+  options,
+  onSelected,
+  title,
+}) => {
+  return (
+    <ScrollListContainer title={title}>
+      <SkillSplitDiv>
+        <hr className="golden" />
+      </SkillSplitDiv>
+
+      <ListContainer className="rpgui-list-imp">
+        {options.map(params => (
+          <ListElement
+            key={params?.id}
+            onClick={() => {
+              onSelected(params?.id);
+            }}
+          >
+            {params?.text || 'No text'}
+          </ListElement>
+        ))}
+      </ListContainer>
+    </ScrollListContainer>
+  );
+};
+
+const ScrollListContainer = styled(DraggableContainer)`
+  border: 1px solid black;
+  width: 400px;
+  height: 400px;
+  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
+    width: auto;
+    height: auto;
+  }
+`;
+
+const SkillSplitDiv = styled.div`
+  width: 100%;
+  font-size: 11px;
+  margin-bottom: 10px;
+  hr {
+    margin: 0px;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;
+
+const ListContainer = styled.ul`
+  border: none;
+  width: 400px;
+  height: 250px;
+  overflow-y: scroll;
+`;
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/index.tsx

@@ -18,6 +18,7 @@ export * from './components/RPGUIRoot';
 export * from './components/shared/SpriteFromAtlas';
 export * from './components/shared/SpriteIcon';
 export * from './components/SkillProgressBar';
+export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';