@rpg-engine/long-bow 0.5.65 → 0.5.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.65",
+  "version": "0.5.67",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.14",
+    "@rpg-engine/shared": "^0.9.19",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",
@@ -94,6 +94,7 @@
     "react-draggable": "^4.4.5",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^4.7.1",
+    "react-spinners": "^0.13.8",
     "rollup-plugin-image-files": "^1.4.2",
     "rpgui": "^1.0.3"
   }

package/src/components/AsyncDropdown.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { BeatLoader } from 'react-spinners';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import { uiColors } from '../constants/uiColors';
+
+export interface IAsyncDropdownOptionsProps {
+  id: number;
+  value: string;
+  option: string | JSX.Element;
+}
+
+export interface IAsyncDropdownProps {
+  options: IAsyncDropdownOptionsProps[];
+  width?: string;
+  onChange: (value: string) => void;
+  defaultValue?: string;
+}
+
+export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
+  options,
+  width,
+  onChange,
+  defaultValue,
+}) => {
+  const dropdownId = uuidv4();
+
+  const [selectedValue, setSelectedValue] = useState<string>(
+    defaultValue || options?.[0]?.value
+  );
+  const [selectedOption, setSelectedOption] = useState<string | JSX.Element>(
+    options?.find(option => option.value === defaultValue)?.option ||
+      options?.[0]?.option
+  );
+  const [opened, setOpened] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (defaultValue) {
+      setSelectedValue(defaultValue);
+      setSelectedOption(
+        //@ts-ignore
+        options?.find(option => option.value === defaultValue)?.option
+      );
+    } else if (options?.length > 0) {
+      setSelectedValue(options[0].value);
+      setSelectedOption(options[0].option);
+    }
+  }, [options, defaultValue]);
+
+  const handleSelection = (value: string, option: string | JSX.Element) => {
+    if (value !== selectedValue) {
+      setSelectedValue(value);
+      setSelectedOption(option);
+      onChange(value);
+    }
+  };
+
+  return (
+    <Container onMouseLeave={() => setOpened(false)} width={width}>
+      <DropdownSelect
+        id={`dropdown-${dropdownId}`}
+        className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
+        onPointerUp={() => setOpened(prev => !prev)}
+      >
+        <DropdownDisplay>
+          <DropdownLabel>▼</DropdownLabel> {selectedOption}
+          {!options.length && <BeatLoader size={4} color={uiColors.white} />}
+        </DropdownDisplay>
+      </DropdownSelect>
+
+      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+        {options?.map(option => (
+          <li
+            key={option.id}
+            onPointerUp={() => {
+              handleSelection(option.value, option.option);
+              setOpened(false);
+            }}
+          >
+            {option.option}
+          </li>
+        ))}
+      </DropdownOptions>
+    </Container>
+  );
+};
+
+const DropdownDisplay = styled.span`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-items: center;
+`;
+
+const DropdownLabel = styled.label`
+  margin-right: 0.5rem;
+`;
+
+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/Dropdown.tsx

@@ -12,22 +12,16 @@ export interface IDropdownProps {
   options: IOptionsProps[];
   width?: string;
   onChange: (value: string) => void;
-  defaultValue?: string;
-  triggerChangeOnMount?: boolean;
 }
 
 export const Dropdown: React.FC<IDropdownProps> = ({
   options,
   width,
   onChange,
-  defaultValue,
-  triggerChangeOnMount = true,
 }) => {
   const dropdownId = uuidv4();
 
-  const [selectedValue, setSelectedValue] = useState<string>(
-    defaultValue || ''
-  );
+  const [selectedValue, setSelectedValue] = useState<string>('');
   const [selectedOption, setSelectedOption] = useState<string | JSX.Element>(
     ''
   );
@@ -54,17 +48,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   }, [options]);
 
   useEffect(() => {
-    if (defaultValue) {
-      const option = options.find(o => o.value === defaultValue);
-      if (option) {
-        setSelectedValue(option.value);
-        setSelectedOption(option.option);
-      }
-    }
-  }, [defaultValue]);
-
-  useEffect(() => {
-    if (selectedValue && triggerChangeOnMount) {
+    if (selectedValue) {
       onChange(selectedValue);
     }
   }, [selectedValue]);

package/src/components/ImageCarousel/SimpleImageCarousel.tsx

@@ -1,66 +1,59 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import SelectArrow from '../Arrow/SelectArrow';
 
 export interface ISimpleImageCarousel {
-  basePath: string;
-  imagesSrc: string[];
+  images: string[];
   styles?: React.CSSProperties;
   autoCycle?: boolean;
   autoCycleDelay?: number;
   stopAutoCyclingOnInteraction?: boolean;
 }
 
-export const SimpleImageCarousel = ({
-  basePath,
-  imagesSrc,
+export const SimpleImageCarousel: React.FC<ISimpleImageCarousel> = ({
+  images,
   styles,
   autoCycle = false,
   autoCycleDelay = 3000,
   stopAutoCyclingOnInteraction = false,
-}: ISimpleImageCarousel) => {
+}) => {
   const [currentImage, setCurrentImage] = useState(0);
-  const isInteracted = useRef<boolean>(false);
+  const [autoCycleId, setAutoCycleId] = useState<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
-    let timer: NodeJS.Timeout | null = null;
+  const handleLeftClick = () => {
+    setCurrentImage(
+      prevImage => (prevImage - 1 + images.length) % images.length
+    );
+    if (stopAutoCyclingOnInteraction && autoCycleId) {
+      clearInterval(autoCycleId);
+      setAutoCycleId(null);
+    }
+  };
 
-    if (autoCycle && !isInteracted.current) {
-      timer = setInterval(() => {
-        if (stopAutoCyclingOnInteraction && isInteracted.current) {
-          clearInterval(timer!);
-          return;
-        }
+  const handleRightClick = () => {
+    setCurrentImage(prevImage => (prevImage + 1) % images.length);
+    if (stopAutoCyclingOnInteraction && autoCycleId) {
+      clearInterval(autoCycleId);
+      setAutoCycleId(null);
+    }
+  };
 
-        handleRightClick(true);
+  useEffect(() => {
+    if (autoCycle) {
+      const id = setInterval(() => {
+        setCurrentImage(prevImage => (prevImage + 1) % images.length);
       }, autoCycleDelay);
+      setAutoCycleId(id);
     }
 
     return () => {
-      if (timer) {
-        clearInterval(timer);
+      if (autoCycleId) {
+        clearInterval(autoCycleId);
       }
     };
-  }, [autoCycle, autoCycleDelay]);
-
-  const handleLeftClick = () => {
-    isInteracted.current = true;
-    setCurrentImage(oldImage =>
-      oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1
-    );
-  };
-
-  const handleRightClick = (isAutomatedClick: boolean = false) => {
-    if (!isAutomatedClick) {
-      isInteracted.current = true;
-    }
-
-    setCurrentImage(oldImage =>
-      oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1
-    );
-  };
+  }, [autoCycle, autoCycleDelay, images.length]);
 
-  const hasMoreThanOneImage = imagesSrc.length > 1;
+  const hasMoreThanOneImage = images.length > 1;
 
   return (
     <ImageContainer style={styles}>
@@ -73,8 +66,8 @@ export const SimpleImageCarousel = ({
       <Carousel>
         <FadeInCarouselImg
           key={currentImage}
-          src={`${basePath}/${imagesSrc[currentImage]}`}
-          alt={imagesSrc[currentImage]}
+          src={images[currentImage]}
+          alt={`Image ${currentImage}`}
         />
       </Carousel>
     </ImageContainer>

package/src/index.tsx

@@ -1,3 +1,4 @@
+export * from './components/AsyncDropdown';
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';

package/src/stories/Dropdown.stories.tsx

@@ -14,9 +14,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<IDropdownProps> = args => (
+const Template: Story<IDropdownProps> = (args) => (
   <RPGUIRoot>
-    <Dropdown {...args} defaultValue="Elfo" />
+    <Dropdown {...args} />
   </RPGUIRoot>
 );
 

package/src/stories/SimpleImageCarousel.stories.tsx

@@ -7,6 +7,8 @@ import {
 } from '../components/ImageCarousel/SimpleImageCarousel';
 
 import styled from 'styled-components';
+import image1 from '../assets/images/backpack.png';
+import image2 from '../assets/images/depot.png';
 import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
 
 const meta: Meta = {
@@ -37,8 +39,7 @@ const CenteredContainer = styled.div`
 export const SimpleImageCarouselStory = Template.bind({});
 
 SimpleImageCarouselStory.args = {
-  imagesSrc: ['./images/backpack.png', './images/depot.png'],
-  basePath: 'http://localhost:6006',
+  images: [image1, image2],
   autoCycle: true,
   stopAutoCyclingOnInteraction: true,
 };