@rpg-engine/long-bow 0.5.53 → 0.5.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.53",
+  "version": "0.5.55",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -21,37 +21,29 @@ export const Dropdown: React.FC<IDropdownProps> = ({
 }) => {
   const dropdownId = uuidv4();
 
-  const [selectedValue, setSelectedValue] = useState<string>('');
+  const firstOption = useMemo(() => options[0], [options]);
+  const [selectedValue, setSelectedValue] = useState<string>(
+    firstOption ? firstOption.value : ''
+  );
   const [selectedOption, setSelectedOption] = useState<string | JSX.Element>(
-    ''
+    firstOption ? firstOption.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;
-      }
+    const optionValues = new Set(options.map(option => option.value));
 
-      /**
-       * 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);
-      }
+    if (!selectedValue || !optionValues.has(selectedValue)) {
+      setSelectedValue(firstOption.value);
+      setSelectedOption(firstOption.option);
     }
-  }, [options]);
+  }, [firstOption, options, selectedValue]);
 
   useEffect(() => {
     if (selectedValue) {
       onChange(selectedValue);
     }
-  }, [selectedValue]);
+  }, [selectedValue, onChange]);
 
   return (
     <Container onMouseLeave={() => setOpened(false)} width={width}>
@@ -64,20 +56,18 @@ 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={() => {
+              setSelectedValue(option.value);
+              setSelectedOption(option.option);
+              setOpened(false);
+            }}
+          >
+            {option.option}
+          </li>
+        ))}
       </DropdownOptions>
     </Container>
   );

package/src/components/SkillsContainer.tsx

@@ -126,6 +126,10 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
       //@ts-ignore
       const skillDetails = (skill[key] as unknown) as ISkillDetails;
 
+      if (!skillDetails) {
+        continue;
+      }
+
       output.push(
         <SkillProgressBar
           key={key}