Merge pull request #206 from TRA-Tech/fix/add-defaultvalue-prop-dropdown

fix:add default value prop

Author: KaganYrk

src/components/Dropdown/Dropdown.tsx

@@ -27,12 +27,12 @@ const Dropdown: FCCWD<DrowdownProps> = (
     autoPosition = true,
     size = 'medium',
     disabled,
-    value,
+    defaultValue = {},
     testID,
     theme },
 ) => {
   const [visible, setVisible] = useState(false);
-  const [selectedObject, setSelectedObject] = useState(value || {});
+  const [selectedObject, setSelectedObject] = useState(defaultValue);
   const [cord, setCord] = useState({ x: 0, y: 0, height: 0, width: 0 });
   const { statusTheme, componentTheme } = useComponentTheme(
     theme,
@@ -86,12 +86,6 @@ const Dropdown: FCCWD<DrowdownProps> = (
     openAnimation.value = withSpring(visible ? 1 : 0);
   }, [visible]);
 
-  useEffect(() => {
-    if (value) {
-      setSelectedObject(value);
-    }
-  }, [value]);
-
   return (
     <View testID={testID} style={[containerStyle, { zIndex: visible ? 1000 : 0 }]}>
       <TouchableOpacity

src/components/Dropdown/MultipleSelectDropdown.tsx

@@ -36,13 +36,13 @@ const MultipleDropdown: FCCWD<MultipleDropdownProps> = (
     disabled,
     testID,
     theme,
-    value,
+    defaultValue = [],
     size = 'medium',
     completeButtonLabelStyle,
     completeButtonLabel },
 ) => {
   const [visible, setVisible] = useState(false);
-  const [selectedObjects, setSelectedObjects] = useState(value || []);
+  const [selectedObjects, setSelectedObjects] = useState(defaultValue);
   const [cord, setCord] = useState({ x: 0, y: 0, height: 0, width: 0 });
   const openAnimation = useSharedValue(0);
   const dataWithID = useRef();
@@ -84,6 +84,7 @@ const MultipleDropdown: FCCWD<MultipleDropdownProps> = (
     const selectedObjectsTemp = [...selectedObjects];
 
     const valueIndex = selectedObjectsTemp.findIndex(obj => displayedRowValue(obj) === displayedRowValue(value));
+    console.log(valueIndex);
 
     if (valueIndex > -1) {
       selectedObjectsTemp.splice(valueIndex, 1);
@@ -120,10 +121,10 @@ const MultipleDropdown: FCCWD<MultipleDropdownProps> = (
   }, [data]);
 
   useEffect(() => {
-    if (value) {
-      setSelectedObjects(value);
+    if (defaultValue.length > 0) {
+      setSelectedObjects(defaultValue);
     }
-  }, [value]);
+  }, []);
 
   return (
     <View testID={testID} style={[containerStyle, { zIndex: visible ? 1000 : 0 }]}>

src/types.ts

@@ -378,6 +378,10 @@ export type DrowdownProps = {
         *Function to be called whenever an item is selected in the dropdown
     */
     onSelect?: (item: any) => void,
+    /**
+        *Default value to be pre-selected in the dropdown
+    */
+        defaultValue?: any,
     /**
         *Additional styles to apply to the text inside each item in the dropdown
     */