X: 1

src/components/selectBox/index.tsx

@@ -1,7 +1,6 @@
 import {
     useImperativeHandle,
     forwardRef,
-    useReducer,
     useEffect,
     useState,
     type Ref,
@@ -114,8 +113,10 @@ function SelectBox<T>({
     });
 
     const {
+        bottomSheetHeaderContainer: bottomSheetHeaderContainerDynamicStyle,
         contentContainer: contentContainerDynamicStyle,
         titleContainer: titleContainerDynamicStyle,
+        itemContainer: itemContainerDynamicStyle,
         hintTextIcon: hintTextIconDynamicStyle,
         contentText: contentTextDynamicStyle,
         cleanButton: cleanButtonDynamicStyle,
@@ -134,7 +135,6 @@ function SelectBox<T>({
         inlineSpaces,
         currentType,
         isDisabled,
-        typography,
         radiuses,
         borders,
         spaces,
@@ -148,28 +148,37 @@ function SelectBox<T>({
     const [
         data,
         setData
-    ] = useReducer<Array<T & SelectedItem>, [Array<T & SelectedItem>]>((_, newState) => {
-        return newState;
-    }, initialData.map((bIItem, bIIndex) => {
-        return {
-            ...bIItem,
-            __title: titleExtractor(bIItem, bIIndex),
-            __key: keyExtractor(bIItem, bIIndex),
-            __originalIndex: bIIndex
-        };
-    }));
+    ] = useState<Array<T & SelectedItem | SelectedItem>>([]);
+
+    const [
+        searchedData,
+        setSearchedData
+    ] = useState<Array<T & SelectedItem | SelectedItem>>([]);
 
     const [
         isActive,
         setIsActive
     ] = useState(false);
 
+    const [
+        searchText,
+        setSearchText
+    ] = useState("");
+
+    const [
+        isLoading,
+        setIsLoading
+    ] = useState(false);
+
+    const [
+        isMoreLoading,
+        setIsMoreLoading
+    ] = useState(false);
+
     const [
         selectedItems,
         setSelectedItems
-    ] = useReducer<Array<SelectedItem>, [Array<SelectedItem>]>((_, newState) => {
-        return newState;
-    }, initialSelectedItems ?? []);
+    ] = useState<Array<SelectedItem>>(initialSelectedItems ?? []);
 
     useImperativeHandle(
         ref,
@@ -191,6 +200,18 @@ function SelectBox<T>({
         }
     }, [isActive]);
 
+    useEffect(() => {
+        if(searchText && searchText.length) {
+
+        }
+    }, [searchText]);
+
+    useEffect(() => {
+        const initData = prepareDatas(initialData, initialSelectedItems);
+
+        setData(initData);
+    }, []);
+
     const titleProps: ITextProps = {
         color: currentType.titleColor,
         variant: "bodyLargeSize"
@@ -226,8 +247,7 @@ function SelectBox<T>({
             return {
                 ...bIItem,
                 __title: titleExtractor(bIItem, bIIndex),
-                __key: keyExtractor(bIItem, bIIndex),
-                __originalIndex: bIIndex
+                __key: keyExtractor(bIItem, bIIndex)
             };
         });
 
@@ -238,7 +258,6 @@ function SelectBox<T>({
 
             return {
                 ...sItem,
-                __originalIndex: _newData[originalDataIndex]?.__originalIndex,
                 __title: _newData[originalDataIndex]?.__title,
                 __key: _newData[originalDataIndex]?.__key
             };
@@ -253,7 +272,6 @@ function SelectBox<T>({
 
             return {
                 ...sItem,
-                __originalIndex: data[originalDataIndex]?.__originalIndex,
                 __title: data[originalDataIndex]?.__title,
                 __key: data[originalDataIndex]?.__key
             };
@@ -262,6 +280,49 @@ function SelectBox<T>({
         setSelectedItems(_newSelectedItems);
     };
 
+    const prepareDatas = (items: Array<T>, sItems?: Array<SelectedItem>) => {
+        const initData: Array<SelectedItem | T & SelectedItem> = [];
+
+        if(sItems && sItems.length) {
+            sItems.forEach((iS) => {
+                const dataIndex = items.findIndex((iD, iDI) => keyExtractor(iD, iDI) === iS.__key);
+
+                if(dataIndex === -1) {
+                    initData.unshift(iS);
+                }
+            });
+        }
+
+        const finalData = items.map((bIItem, bIIndex) => {
+            return {
+                ...bIItem,
+                __title: titleExtractor(bIItem, bIIndex),
+                __key: keyExtractor(bIItem, bIIndex)
+            };
+        });
+
+        return [
+            ...initData,
+            ...finalData
+        ];
+    };
+
+    const selectObject = (selectedItem: T & SelectedItem | SelectedItem) => {
+        const isAlreadySelected = selectedItems.findIndex(sItem => sItem.__key === selectedItem.__key);
+        let _selectedItems = JSON.parse(JSON.stringify(selectedItems));
+
+        if(isAlreadySelected !== -1) {
+            _selectedItems = _selectedItems.filter((sItem: SelectedItem) => sItem.__key !== selectedItem.__key);
+        } else {
+            _selectedItems.push({
+                __title: selectedItem.__title,
+                __key: selectedItem.__key
+            });
+        }
+
+        setSelectedItems(_selectedItems);
+    };
+
     const onFocus = () => {
         if(onFocusProp) onFocusProp();
     };
@@ -512,12 +573,27 @@ function SelectBox<T>({
 
     const renderBottomSheetContent = () => {
         return data.map((item: T, index: number) => {
-            return <TouchableOpacity>
-                {renderOptionIcon ? renderOptionIcon({
-                    item,
-                    index
-                }) : null}
-                <Text></Text>
+            return <TouchableOpacity
+                key={keyExtractor(item, index)}
+                style={[
+                    stylesheet.itemContainer,
+                    itemContainerDynamicStyle
+                ]}
+                onPress={() => {
+                    selectObject();
+                }}
+            >
+                <View
+                    style={[
+                        stylesheet.itemContentContainer
+                    ]}
+                >
+                    {renderOptionIcon ? renderOptionIcon({
+                        item,
+                        index
+                    }) : null}
+                    <Text>Geldi gül mevsimi</Text>
+                </View>
                 <View>
                     <CheckIcon/>
                 </View>
@@ -533,8 +609,15 @@ function SelectBox<T>({
                 setIsActive(false);
             }}
             renderHeader={() => {
-                return <View>
-                    <Text>
+                return <View
+                    style={[
+                        stylesheet.bottomSheetHeaderContainer,
+                        bottomSheetHeaderContainerDynamicStyle
+                    ]}
+                >
+                    <Text
+                        variant="titleMediumSize"
+                    >
                         {title}
                     </Text>
                 </View>;

src/components/selectBox/stylesheet.ts

@@ -113,6 +113,16 @@ const stylesheet = StyleSheet.create({
     contentText: {
         minHeight: 20
     },
+    bottomSheetHeaderContainer: {
+
+    },
+    itemContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    itemContentContainer: {
+        flex: 1
+    },
     cleanButton: {
         justifyContent: "center",
         alignItems: "center",
@@ -163,7 +173,6 @@ export const useStyles = ({
     spreadBehaviour,
     inlineSpaces,
     currentType,
-    typography,
     isDisabled,
     radiuses,
     borders,
@@ -192,10 +201,12 @@ export const useStyles = ({
         contentText: {
 
         } as Mutable<TextStyle>,
-        input: {
-            ...typography.labelLargeSize,
-            color: colors.content.text[currentType.inputColor]
-        } as Mutable<TextStyle>,
+        bottomSheetHeaderContainer: {
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        itemContainer: {
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
         cleanButton: {
             marginLeft: spaces.spacingSm
         } as Mutable<ViewStyle>,
@@ -233,8 +244,6 @@ export const useStyles = ({
 
         styles.overlay.backgroundColor = colors.system.state.overlay.disabled[disableStyleType];
         styles.container.borderColor = colors.system.state.overlay.disabled[disableStyleType];
-
-        styles.input.color = colors.content.text.disabled;
     }
 
     if (spreadBehaviour === "baseline") {

src/components/selectBox/type.ts

@@ -20,7 +20,6 @@ export type ISelectBoxRef<T> = {
 
 export type SelectBoxDynamicStyleType = {
     inlineSpaces: NCoreUIKit.ActivePalette["inlineSpaces"];
-    typography: NCoreUIKit.ActivePalette["typography"];
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spreadBehaviour?: SelectBoxSpreadBehaviour;
     spaces: NCoreUIKit.ActivePalette["spaces"];
@@ -56,7 +55,6 @@ export type SelectBoxComponent = <T>(
 ) => ReactNode;
 
 export type SelectedItem = {
-    __originalIndex: number;
     __title: string;
     __key: string;
 };
@@ -64,9 +62,14 @@ export type SelectedItem = {
 interface ISelectBoxProps<T> {
     onChange?: (selectedItems: Array<SelectedItem>, data: Array<T>) => void;
     titleExtractor: (item: T, index: number) => string;
+    onSearch?: (props: {
+        data: Array<T & SelectedItem | SelectedItem>;
+        selectedItems: Array<SelectedItem>;
+        searchText: string;
+    }) => void;
     keyExtractor: (item: T, index: number) => string;
-    initialSelectedItems?: Array<SelectedItem>;
     spreadBehaviour?: SelectBoxSpreadBehaviour;
+    initialSelectedItems?: Array<SelectedItem>;
     validation?: (text: string) => boolean;
     hintTextContainerStyle?: ViewStyle;
     contentContainerStyle?: ViewStyle;