@rpg-engine/long-bow 0.4.7 → 0.4.9

package/src/components/DraggableContainer.tsx

@@ -1,180 +1,183 @@
-import React, { useEffect, useRef } from 'react';
-import Draggable from 'react-draggable';
-import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-import { useOutsideClick } from '../hooks/useOutsideAlerter';
-import { IPosition } from '../types/eventTypes';
-import { RPGUIContainerTypes } from './RPGUIContainer';
-
-export interface IDraggableContainerProps {
-  children: React.ReactNode;
-  width?: string;
-  height?: string;
-  className?: string;
-  type?: RPGUIContainerTypes;
-  title?: string;
-  imgSrc?: string;
-  imgWidth?: string;
-  onCloseButton?: () => void;
-  cancelDrag?: string;
-  onPositionChange?: (position: IPosition) => void;
-  onPositionChangeEnd?: (position: IPosition) => void;
-  onPositionChangeStart?: (position: IPosition) => void;
-  onOutsideClick?: () => void;
-  initialPosition?: IPosition;
-  scale?: number;
-}
-
-export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
-  children,
-  width = '50%',
-  height,
-  className,
-  type = RPGUIContainerTypes.FramedGold,
-  onCloseButton,
-  title,
-  imgSrc,
-  imgWidth = '20px',
-  cancelDrag,
-  onPositionChange,
-  onPositionChangeEnd,
-  onPositionChangeStart,
-  onOutsideClick,
-  initialPosition = { x: 0, y: 0 },
-  scale,
-}) => {
-  const draggableRef = useRef(null);
-
-  useOutsideClick(draggableRef, 'item-container');
-
-  useEffect(() => {
-    document.addEventListener('clickOutside', event => {
-      const e = event as CustomEvent;
-
-      if (e.detail.id === 'item-container') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
-      }
-    });
-
-    return () => {
-      document.removeEventListener('clickOutside', _e => {});
-    };
-  }, []);
-
-  return (
-    <Draggable
-      cancel={`.container-close,${cancelDrag}`}
-      onDrag={(_e, data) => {
-        if (onPositionChange) {
-          onPositionChange({
-            x: data.x,
-            y: data.y,
-          });
-        }
-      }}
-      onStop={(_e, data) => {
-        if (onPositionChangeEnd) {
-          onPositionChangeEnd({
-            x: data.x,
-            y: data.y,
-          });
-        }
-      }}
-      onStart={(_e, data) => {
-        if (onPositionChangeStart) {
-          onPositionChangeStart({
-            x: data.x,
-            y: data.y,
-          });
-        }
-      }}
-      defaultPosition={initialPosition}
-      scale={scale}
-    >
-      <Container
-        ref={draggableRef}
-        width={width}
-        height={height || 'auto'}
-        className={`rpgui-container ${type} ${className}`}
-      >
-        {title && (
-          <TitleContainer className="drag-handler">
-            <Title>
-              {imgSrc && <Icon src={imgSrc} width={imgWidth} />}
-              {title}
-            </Title>
-          </TitleContainer>
-        )}
-        {onCloseButton && (
-          <CloseButton
-            className="container-close"
-            onPointerDown={onCloseButton}
-          >
-            X
-          </CloseButton>
-        )}
-
-        {children}
-      </Container>
-    </Draggable>
-  );
-};
-
-interface IContainerProps {
-  width: string;
-  height: string;
-}
-
-const Container = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-  display: flex;
-  flex-wrap: wrap;
-  image-rendering: pixelated;
-
-  &.rpgui-container {
-    padding-top: 1.5rem;
-  }
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  top: 3px;
-  right: 0px;
-  color: white;
-  z-index: 22;
-  font-size: 1.1rem;
-  @media (max-width: 950px) {
-    font-size: 1.7rem;
-    padding: 12px;
-  }
-`;
-
-const TitleContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-const Title = styled.h1`
-  color: white;
-  z-index: 22;
-  font-size: ${uiFonts.size.large};
-`;
-
-interface ICustomIconProps {
-  width: string;
-}
-
-const Icon = styled.img`
-  color: white;
-  z-index: 22;
-  font-size: ${uiFonts.size.xsmall};
-  width: ${(props: ICustomIconProps) => props.width};
-  margin-right: 0.5rem;
-`;
+import React, { useEffect, useRef } from 'react';
+import Draggable from 'react-draggable';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+import { useOutsideClick } from '../hooks/useOutsideAlerter';
+import { IPosition } from '../types/eventTypes';
+import { RPGUIContainerTypes } from './RPGUIContainer';
+
+export interface IDraggableContainerProps {
+  children: React.ReactNode;
+  width?: string;
+  height?: string;
+  className?: string;
+  type?: RPGUIContainerTypes;
+  title?: string;
+  imgSrc?: string;
+  imgWidth?: string;
+  onCloseButton?: () => void;
+  cancelDrag?: string;
+  onPositionChange?: (position: IPosition) => void;
+  onPositionChangeEnd?: (position: IPosition) => void;
+  onPositionChangeStart?: (position: IPosition) => void;
+  onOutsideClick?: () => void;
+  initialPosition?: IPosition;
+  scale?: number;
+  dragDisabled?: boolean;
+}
+
+export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
+  children,
+  width = '50%',
+  height,
+  className,
+  type = RPGUIContainerTypes.FramedGold,
+  onCloseButton,
+  title,
+  imgSrc,
+  imgWidth = '20px',
+  cancelDrag,
+  onPositionChange,
+  onPositionChangeEnd,
+  onPositionChangeStart,
+  onOutsideClick,
+  initialPosition = { x: 0, y: 0 },
+  scale,
+  dragDisabled = false,
+}) => {
+  const draggableRef = useRef(null);
+
+  useOutsideClick(draggableRef, 'item-container');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'item-container') {
+        if (onOutsideClick) {
+          onOutsideClick();
+        }
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  return (
+    <Draggable
+      cancel={`.container-close,${cancelDrag}`}
+      disabled={dragDisabled}
+      onDrag={(_e, data) => {
+        if (onPositionChange) {
+          onPositionChange({
+            x: data.x,
+            y: data.y,
+          });
+        }
+      }}
+      onStop={(_e, data) => {
+        if (onPositionChangeEnd) {
+          onPositionChangeEnd({
+            x: data.x,
+            y: data.y,
+          });
+        }
+      }}
+      onStart={(_e, data) => {
+        if (onPositionChangeStart) {
+          onPositionChangeStart({
+            x: data.x,
+            y: data.y,
+          });
+        }
+      }}
+      defaultPosition={initialPosition}
+      scale={scale}
+    >
+      <Container
+        ref={draggableRef}
+        width={width}
+        height={height || 'auto'}
+        className={`rpgui-container ${type} ${className}`}
+      >
+        {title && (
+          <TitleContainer className="drag-handler">
+            <Title>
+              {imgSrc && <Icon src={imgSrc} width={imgWidth} />}
+              {title}
+            </Title>
+          </TitleContainer>
+        )}
+        {onCloseButton && (
+          <CloseButton
+            className="container-close"
+            onPointerDown={onCloseButton}
+          >
+            X
+          </CloseButton>
+        )}
+
+        {children}
+      </Container>
+    </Draggable>
+  );
+};
+
+interface IContainerProps {
+  width: string;
+  height: string;
+}
+
+const Container = styled.div<IContainerProps>`
+  height: ${props => props.height};
+  width: ${({ width }) => width};
+  display: flex;
+  flex-wrap: wrap;
+  image-rendering: pixelated;
+
+  &.rpgui-container {
+    padding-top: 1.5rem;
+  }
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 3px;
+  right: 0px;
+  color: white;
+  z-index: 22;
+  font-size: 1.1rem;
+  @media (max-width: 950px) {
+    font-size: 1.7rem;
+    padding: 12px;
+  }
+`;
+
+const TitleContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const Title = styled.h1`
+  color: white;
+  z-index: 22;
+  font-size: ${uiFonts.size.large};
+`;
+
+interface ICustomIconProps {
+  width: string;
+}
+
+const Icon = styled.img`
+  color: white;
+  z-index: 22;
+  font-size: ${uiFonts.size.xsmall};
+  width: ${(props: ICustomIconProps) => props.width};
+  margin-right: 0.5rem;
+`;

package/src/components/Dropdown.tsx

@@ -1,106 +1,114 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
-
-export interface IOptionsProps {
-  id: number;
-  value: string;
-  option: string | JSX.Element;
-}
-
-export interface IDropdownProps {
-  options: IOptionsProps[];
-  width?: string;
-  onChange: (value: string) => void;
-}
-
-export const Dropdown: React.FC<IDropdownProps> = ({
-  options,
-  width,
-  onChange,
-}) => {
-  const dropdownId = uuidv4();
-
-  const [selectedValue, setSelectedValue] = useState<string>('');
-  const [selectedOption, setSelectedOption] = useState<string | JSX.Element>(
-    ''
-  );
-  const [opened, setOpened] = useState<boolean>(false);
-
-  useEffect(() => {
-    const firstOption = options[0];
-
-    if (firstOption) {
-      let change = !selectedValue;
-      if (!change) {
-        change = options.filter((o) => o.value === selectedValue).length < 1;
-      }
-
-      /**
-       * make a selection if there is no selected value already present
-       * or if there is a selected value but its not in new options
-       */
-      if (change) {
-        setSelectedValue(firstOption.value);
-        setSelectedOption(firstOption.option);
-      }
-    }
-  }, [options]);
-
-  useEffect(() => {
-    if (selectedValue) {
-      onChange(selectedValue);
-    }
-  }, [selectedValue]);
-
-  return (
-    <Container onMouseLeave={() => setOpened(false)} width={width}>
-      <DropdownSelect
-        id={`dropdown-${dropdownId}`}
-        className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
-        onPointerDown={() => setOpened((prev) => !prev)}
-      >
-        <label>▼</label> {selectedOption}
-      </DropdownSelect>
-
-      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
-        {options.map((option) => {
-          return (
-            <li
-              key={option.id}
-              onPointerDown={() => {
-                setSelectedValue(option.value);
-                setSelectedOption(option.option);
-                setOpened(false);
-              }}
-            >
-              {option.option}
-            </li>
-          );
-        })}
-      </DropdownOptions>
-    </Container>
-  );
-};
-
-const Container = styled.div<{ width: string | undefined }>`
-  position: relative;
-  width: ${(props) => props.width || '100%'};
-`;
-
-const DropdownSelect = styled.p`
-  width: 100%;
-  box-sizing: border-box;
-`;
-
-const DropdownOptions = styled.ul<{
-  opened: boolean;
-}>`
-  position: absolute;
-  width: 100%;
-  display: ${(props) => (props.opened ? 'block' : 'none')};
-  box-sizing: border-box;
-  @media (max-width: 768px) {
-    padding: 8px 0;
-  }
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface IOptionsProps {
+  id: number;
+  value: string;
+  option: string | JSX.Element;
+}
+
+export interface IDropdownProps {
+  options: IOptionsProps[];
+  width?: string;
+  onChange: (value: string) => void;
+}
+
+export const Dropdown: React.FC<IDropdownProps> = ({
+  options,
+  width,
+  onChange,
+}) => {
+  const dropdownId = uuidv4();
+
+  const [selectedValue, setSelectedValue] = useState<string>('');
+  const [selectedOption, setSelectedOption] = useState<string | JSX.Element>(
+    ''
+  );
+  const [opened, setOpened] = useState<boolean>(false);
+
+  useEffect(() => {
+    const firstOption = options[0];
+
+    if (firstOption) {
+      let change = !selectedValue;
+      if (!change) {
+        change = options.filter(o => o.value === selectedValue).length < 1;
+      }
+
+      /**
+       * make a selection if there is no selected value already present
+       * or if there is a selected value but its not in new options
+       */
+      if (change) {
+        setSelectedValue(firstOption.value);
+        setSelectedOption(firstOption.option);
+      }
+    }
+  }, [options]);
+
+  useEffect(() => {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+
+  return (
+    <Container onMouseLeave={() => setOpened(false)} width={width}>
+      <DropdownSelect
+        id={`dropdown-${dropdownId}`}
+        className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
+        onPointerUp={() => setOpened(prev => !prev)}
+      >
+        <label>▼</label> {selectedOption}
+      </DropdownSelect>
+
+      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+        {options.map(option => {
+          return (
+            <li
+              key={option.id}
+              onPointerUp={() => {
+                setSelectedValue(option.value);
+                setSelectedOption(option.option);
+                setOpened(false);
+              }}
+            >
+              {option.option}
+            </li>
+          );
+        })}
+      </DropdownOptions>
+    </Container>
+  );
+};
+
+const Container = styled.div<{ width: string | undefined }>`
+  position: relative;
+  width: ${props => props.width || '100%'};
+`;
+
+const DropdownSelect = styled.p`
+  width: 100%;
+  box-sizing: border-box;
+
+  label {
+    display: inline-block;
+    transform: translateY(-2px);
+  }
+`;
+
+const DropdownOptions = styled.ul<{
+  opened: boolean;
+}>`
+  position: absolute;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  display: ${props => (props.opened ? 'block' : 'none')};
+  box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    padding: 8px 0;
+  }
+`;

package/src/components/DropdownSelectorContainer.tsx

@@ -1,42 +1,42 @@
-import React from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-import { Dropdown } from './Dropdown';
-
-interface IDropdownSelectorOption {
-  id: string;
-  name: string;
-}
-
-export interface IDropdownSelectorContainer {
-  onChange: (id: string) => void;
-  options: IDropdownSelectorOption[];
-  details?: string;
-  title: string;
-}
-
-export const DropdownSelectorContainer: React.FC<IDropdownSelectorContainer> = ({
-  title,
-  onChange,
-  options,
-  details,
-}) => {
-  return (
-    <div>
-      <p>{title}</p>
-      <Dropdown
-        options={options.map((option, index) => ({
-          option: option.name,
-          value: option.id,
-          id: index,
-        }))}
-        onChange={onChange}
-      />
-      <Details>{details}</Details>
-    </div>
-  );
-};
-
-const Details = styled.p`
-  font-size: ${uiFonts.size.xsmall} !important;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+import { Dropdown } from './Dropdown';
+
+interface IDropdownSelectorOption {
+  id: string;
+  name: string;
+}
+
+export interface IDropdownSelectorContainer {
+  onChange: (id: string) => void;
+  options: IDropdownSelectorOption[];
+  details?: string;
+  title: string;
+}
+
+export const DropdownSelectorContainer: React.FC<IDropdownSelectorContainer> = ({
+  title,
+  onChange,
+  options,
+  details,
+}) => {
+  return (
+    <div>
+      <p>{title}</p>
+      <Dropdown
+        options={options.map((option, index) => ({
+          option: option.name,
+          value: option.id,
+          id: index,
+        }))}
+        onChange={onChange}
+      />
+      <Details>{details}</Details>
+    </div>
+  );
+};
+
+const Details = styled.p`
+  font-size: ${uiFonts.size.xsmall} !important;
+`;