Issue 39: Reduce code duplication

src/components/MultiSelect.tsx

@@ -4,6 +4,7 @@ import { useThemeStyles } from '../styles';
 import type { Data, SelectorRect, MultiSelectProperties } from '../types';
 import SelectionList from './SelectionList';
 import Svg, { Path } from 'react-native-svg';
+import { createMeasureHandler, updatePriorities, renderDropdownArrow } from '../utils/SelectorUtils';
 
 /* Renders a multi-selector component. Takes in props defined in the MultiSelectProperties type. */
 const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => {
@@ -25,21 +26,7 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => {
     props.data.filter((d: Data) =>
     props.defaultValue?.includes(d))
   );
-  const updatePriorities = (data: Data[]) => [
-    ...data.filter((d: Data) => d.priority),
-    ...data.filter((d: Data) => !d.priority),
-  ];
-  const updatePos = (display = false) =>
-    ref.current?.measureInWindow((x, y, width, height) => {
-      setRefRect({
-        x: x,
-        y: y - refRectYOffset,
-        width: props.boxStyle?.width ?? width,
-        height: height + 2*refRectYOffset,
-      });
-      if (display)
-        setListDisplay(true);
-    });
+  const updatePos = createMeasureHandler(ref, setRefRect, setListDisplay, props.boxStyle?.width);
 
   return (
     <View>
@@ -81,17 +68,10 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => {
               {props.placeholderText ?? defaultPlaceholderText}
             </Text>
         }
-        <View style={{ position: 'absolute', right: 0, paddingBottom: 4 }}>
-          {listDisplay ? (
-            // This is the up arrow "ᨈ"
-            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
-              <Path d="M17 14l-5-5-5 5" stroke={props.dropdownArrowColor ?? style.arrow.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            </Svg>) : (
-            // This is the down arrow "ᨆ"
-            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
-              <Path d="M7 10l5 5 5-5" stroke={props.dropdownArrowColor ?? style.arrow.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            </Svg>)}
-        </View>
+        {renderDropdownArrow(
+          listDisplay,
+          props.dropdownArrowColor ?? style.arrow?.color ?? '#000'
+        )}
       </TouchableOpacity>
       <SelectionList
         styles={{

src/components/Select.tsx

@@ -4,6 +4,7 @@ import { useThemeStyles } from '../styles';
 import type { Data, SelectorRect, SelectProperties } from '../types';
 import SelectionList from './SelectionList';
 import Svg, {Path} from 'react-native-svg';
+import { createMeasureHandler, updatePriorities, renderDropdownArrow } from '../utils/SelectorUtils';
 
 /* Renders a selector component. Takes in props defined in the SelectProperties type. */
 const Select = (props: SelectProperties): React.JSX.Element => {
@@ -26,20 +27,7 @@ const Select = (props: SelectProperties): React.JSX.Element => {
       ? props.defaultValue
       : {label: props.placeholderText ?? defaultPlaceholderText}
   );
-  const updatePriorities = (data: Data[]) => [
-    ...data.filter((d: Data) => d.priority),
-    ...data.filter((d: Data) => !d.priority),
-  ];
-  const updatePos = () =>
-    ref.current?.measureInWindow((x, y, width, height) => {
-      setRefRect({
-        x: x,
-        y: y - refRectYOffset,
-        width: props.boxStyle?.width ?? width,
-        height: height + 2*refRectYOffset,
-      });
-      setListDisplay(true);
-    });
+  const updatePos = createMeasureHandler(ref, setRefRect, setListDisplay, props.boxStyle?.width);
 
   return (
     <View>
@@ -51,25 +39,18 @@ const Select = (props: SelectProperties): React.JSX.Element => {
           {opacity: props.disabled ? disabledOpacity : enabledOpacity},
         ]}
         disabled={props.disabled}
-        onPress={updatePos}
+        onPress={() => updatePos(true)}
         ref={ref}
       >
         <Text
           style={[style.selectorText, props.boxTextStyle]}
         >
           {selected.label}
         </Text>
-        <View style={{ position: 'absolute', right: 0, paddingBottom: 4 }}>
-          {listDisplay ? (
-            // This is the up arrow "ᨈ"
-            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
-              <Path d="M17 14l-5-5-5 5" stroke={props.dropdownArrowColor ?? style.arrow.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            </Svg>) : (
-            // This is the down arrow "ᨆ"
-            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
-              <Path d="M7 10l5 5 5-5" stroke={props.dropdownArrowColor ?? style.arrow.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-            </Svg>)}
-        </View>
+        {renderDropdownArrow(
+          listDisplay,
+          props.dropdownArrowColor ?? style.arrow?.color ?? '#000'
+        )}
       </TouchableOpacity>
       <SelectionList
         styles={{

src/utils/SelectorUtils.tsx

@@ -0,0 +1,61 @@
+/* this file has all the common selector utils for Select and MultiSelect */
+import React from 'react';
+import { ColorValue, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import type { Data, SelectorRect } from '../types';
+
+export const createMeasureHandler = (
+    ref: React.RefObject<any>,
+    setRefRect: React.Dispatch<React.SetStateAction<SelectorRect>>,
+    setListDisplay: React.Dispatch<React.SetStateAction<boolean>>,
+    boxStyleWidth?: number | string,
+    refRectYOffset: number = 5,
+) => {
+    return (display = false) => {
+        ref.current?.measureInWindow((x: number, y: number, width: number, height: number) => {
+            setRefRect({
+                x: x,
+                y: y - refRectYOffset,
+                width: boxStyleWidth ?? width,
+                height: height + refRectYOffset * 2,
+            });
+
+            if (display && setListDisplay) {
+                setListDisplay(true);
+            }
+        });
+    }       
+}
+
+export const updatePriorities = (data: Data[]) => [
+    ...data.filter((d: Data) => d.priority),
+    ...data.filter((d: Data) => !d.priority),
+];
+
+export const renderDropdownArrow = (listDisplay: boolean, arrowColor: ColorValue) => (
+    <View style={{ position: 'absolute', right: 0, paddingBottom: 4 }}>
+        {listDisplay ? (
+            // This is the up arrow "ᨈ"
+            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
+                <Path 
+                    d="M17 14l-5-5-5 5" 
+                    stroke={arrowColor} 
+                    strokeWidth={2} 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                />
+            </Svg>) : (
+            // This is the up arrow "ᨆ"
+            <Svg width={25} height={25} viewBox="0 0 25 25" fill="none">
+                <Path 
+                    d="M7 10l5 5 5-5" 
+                    stroke={arrowColor} 
+                    strokeWidth={2} 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                />
+
+            </Svg>
+        )}
+    </View>
+)