@rpg-engine/long-bow 0.5.65 → 0.5.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.65",
+  "version": "0.5.66",
   "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/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>
 );