@rpg-engine/long-bow 0.5.54 → 0.5.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.54",
+  "version": "0.5.56",
   "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",

package/src/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -21,37 +21,19 @@ export const Dropdown: React.FC<IDropdownProps> = ({
 }) => {
   const dropdownId = uuidv4();
 
-  const [selectedValue, setSelectedValue] = useState<string>('');
+  const [selectedValue, setSelectedValue] = useState<string>(options[0].value);
   const [selectedOption, setSelectedOption] = useState<string | JSX.Element>(
-    ''
+    options[0].option
   );
   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);
+  const handleSelection = (value: string, option: string | JSX.Element) => {
+    if (value !== selectedValue) {
+      setSelectedValue(value);
+      setSelectedOption(option);
+      onChange(value);
     }
-  }, [selectedValue]);
+  };
 
   return (
     <Container onMouseLeave={() => setOpened(false)} width={width}>
@@ -64,20 +46,17 @@ export const Dropdown: React.FC<IDropdownProps> = ({
       </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>
-          );
-        })}
+        {options.map(option => (
+          <li
+            key={option.id}
+            onPointerUp={() => {
+              handleSelection(option.value, option.option);
+              setOpened(false);
+            }}
+          >
+            {option.option}
+          </li>
+        ))}
       </DropdownOptions>
     </Container>
   );