@rpg-engine/long-bow 0.4.1 → 0.4.3

package/src/components/RelativeListMenu.tsx

@@ -1,90 +1,90 @@
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { useOutsideClick } from '../hooks/useOutsideAlerter';
-import ModalPortal from './Abstractions/ModalPortal';
-
-interface IListMenuOption {
-  id: string;
-  text: string;
-}
-
-export interface IRelativeMenuProps {
-  options: IListMenuOption[];
-  onSelected: (selectedOptionId: string) => void;
-  fontSize?: number;
-  onOutsideClick?: () => void;
-  pos: { x: number; y: number };
-}
-
-export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
-  options,
-  onSelected,
-  onOutsideClick,
-  fontSize = 0.8,
-  pos,
-}) => {
-  const ref = useRef(null);
-
-  useOutsideClick(ref, 'relative-context-menu');
-
-  useEffect(() => {
-    document.addEventListener('clickOutside', event => {
-      const e = event as CustomEvent;
-
-      if (e.detail.id === 'relative-context-menu') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
-      }
-    });
-
-    return () => {
-      document.removeEventListener('clickOutside', _e => {});
-    };
-  }, []);
-
-  return (
-    <ModalPortal>
-      <Container fontSize={fontSize} ref={ref} {...pos}>
-        <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
-          {options.map((params, index) => (
-            <ListElement
-              key={params?.id || index}
-              onPointerDown={() => {
-                onSelected(params?.id);
-              }}
-            >
-              {params?.text || 'No text'}
-            </ListElement>
-          ))}
-        </ul>
-      </Container>
-    </ModalPortal>
-  );
-};
-
-interface IContainerProps {
-  fontSize?: number;
-  x: number;
-  y: number;
-}
-
-const Container = styled.div<IContainerProps>`
-  position: absolute;
-  top: ${props => props.y}px;
-  left: ${props => props.x}px;
-
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  justify-content: start;
-  align-items: flex-start;
-
-  li {
-    font-size: ${props => props.fontSize}em;
-  }
-`;
-
-const ListElement = styled.li`
-  margin-right: 0.5rem;
-`;
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { useOutsideClick } from '../hooks/useOutsideAlerter';
+import ModalPortal from './Abstractions/ModalPortal';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IRelativeMenuProps {
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+  fontSize?: number;
+  onOutsideClick?: () => void;
+  pos: { x: number; y: number };
+}
+
+export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
+  options,
+  onSelected,
+  onOutsideClick,
+  fontSize = 0.8,
+  pos,
+}) => {
+  const ref = useRef(null);
+
+  useOutsideClick(ref, 'relative-context-menu');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'relative-context-menu') {
+        if (onOutsideClick) {
+          onOutsideClick();
+        }
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  return (
+    <ModalPortal>
+      <Container fontSize={fontSize} ref={ref} {...pos}>
+        <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
+          {options.map((params, index) => (
+            <ListElement
+              key={params?.id || index}
+              onPointerDown={() => {
+                onSelected(params?.id);
+              }}
+            >
+              {params?.text || 'No text'}
+            </ListElement>
+          ))}
+        </ul>
+      </Container>
+    </ModalPortal>
+  );
+};
+
+interface IContainerProps {
+  fontSize?: number;
+  x: number;
+  y: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  position: absolute;
+  top: ${props => props.y}px;
+  left: ${props => props.x}px;
+
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  justify-content: start;
+  align-items: flex-start;
+
+  li {
+    font-size: ${props => props.fontSize}em;
+  }
+`;
+
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/components/ScrollList.tsx

@@ -1,79 +1,79 @@
-import React from 'react';
-import styled from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
-import { uiFonts } from '../constants/uiFonts';
-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={uuidv4()}
-            onPointerDown={() => {
-              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%;
-  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;
-  font-size: ${uiFonts.size.small};
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import { uiFonts } from '../constants/uiFonts';
+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={uuidv4()}
+            onPointerDown={() => {
+              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%;
+  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;
+  font-size: ${uiFonts.size.small};
+`;