Feature: cleanAll and selectAll functions added to SelectSheet and SelectBox.

example/src/pages/home/index.tsx

@@ -94,11 +94,11 @@ const Home = () => {
             isShowSubTitle={true}
             isMultipleSelect={true}
             maxChoice={-1}
+            minChoice={0}
             initialSelectedItems={[{
                 __title: X[0]?.t as string,
                 __key: `${X[0]?.t}-0`
             }]}
-            minChoice={2}
             isSearchable={true}
             title="Deneme Box"
             isRequired={true}

src/components/checkBox/stylesheet.ts

@@ -187,7 +187,6 @@ export const useStyles = ({
     }
 
     if (spreadBehaviour === "baseline") {
-        styles.contentContainer.alignSelf = spreadBehaviour;
         styles.container.alignSelf = spreadBehaviour;
         styles.container.width = "auto";
     } else if (spreadBehaviour === "stretch") {

src/components/selectBox/index.tsx

@@ -59,6 +59,7 @@ function SelectBox<T>({
     renderLoadingIcon : LoadingIconComponentProp,
     rightIcon: RightIconComponentProp,
     hintTextIcon: HintTextIconProp,
+    isShowSelectSheetTools = true,
     spreadBehaviour = "baseline",
     isShowHintTextIcon = false,
     customSelectSheetLocalize,
@@ -89,6 +90,7 @@ function SelectBox<T>({
     isShowSubTitle,
     cleanIconStyle,
     titleExtractor,
+    maxChoice = -1,
     keyExtractor,
     contentStyle,
     customTheme,
@@ -97,7 +99,6 @@ function SelectBox<T>({
     isOptional,
     renderItem,
     customKey,
-    maxChoice,
     minChoice,
     iconStyle,
     onChange,
@@ -425,10 +426,6 @@ function SelectBox<T>({
             let isProcessPerm = false;
 
             if(isMultipleSelect) {
-                if(!maxChoice) {
-                    throw new Error("If you want to use the \"isMultipleSelect\" prop, you must be provide \"maxChoice\" prop.");
-                }
-
                 if(_selectedItems.length < maxChoice || maxChoice === -1) {
                     isProcessPerm = true;
                 } else {
@@ -463,6 +460,54 @@ function SelectBox<T>({
         }
     };
 
+    const cleanAll = () => {
+        if(minChoice) {
+            console.error("minChoice must be 0 or undefined for cleanAll function.");
+            return;
+        }
+
+        if(isWorkWithRealtime) {
+            setSelectedItems([]);
+        } else {
+            setTempSelectedItems([]);
+        }
+    };
+
+    const selectAll = () => {
+        if(maxChoice !== -1) {
+            console.error("maxChoice must be -1 for selectAll function.");
+            return;
+        }
+
+        const _selectedItems = JSON.parse(JSON.stringify(mainSelectedItems));
+
+        if(searchText && searchText.length) {
+            searchedData.forEach(searchedItem => {
+                if(mainSelectedItems.findIndex(sI => sI.__key === searchedItem.__key) === -1) {
+                    _selectedItems.push({
+                        __title: searchedItem.__title,
+                        __key: searchedItem.__key
+                    });
+                }
+            });
+        } else {
+            data.forEach(dataItem => {
+                if(mainSelectedItems.findIndex(sI => sI.__key === dataItem.__key) === -1) {
+                    _selectedItems.push({
+                        __title: dataItem.__title,
+                        __key: dataItem.__key
+                    });
+                }
+            });
+        }
+
+        if(isWorkWithRealtime) {
+            setSelectedItems(_selectedItems);
+        } else {
+            setTempSelectedItems(_selectedItems);
+        }
+    };
+
     const onFocus = () => {
         if(onFocusProp) onFocusProp();
     };
@@ -754,6 +799,7 @@ function SelectBox<T>({
             customLocalize={customSelectSheetLocalize}
             isWorkWithRealtime={isWorkWithRealtime}
             mainSelectedItems={mainSelectedItems}
+            isShowTools={isShowSelectSheetTools}
             customTheme={customSelectSheetTheme}
             isMultipleSelect={isMultipleSelect}
             renderOptionIcon={renderOptionIcon}
@@ -769,7 +815,10 @@ function SelectBox<T>({
             searchText={searchText}
             renderItem={renderItem}
             maxChoice={maxChoice}
+            minChoice={minChoice}
             isLoading={isLoading}
+            selectAll={selectAll}
+            cleanAll={cleanAll}
             isActive={isActive}
             cancel={cancel}
             title={title}

src/components/selectBox/type.ts

@@ -14,6 +14,8 @@ export type ISelectBoxRef<T> = {
     updateData: (newData: Array<T>, newSelectedItems: Array<SelectedItem>) => void;
     updateSelections: (newSelectedItems: Array<SelectedItem>) => void;
     cleanSelections: () => void;
+    selectAll: () => void;
+    cleanAll: () => void;
     cancel: () => void;
     focus: () => void;
     blur: () => void;
@@ -116,6 +118,7 @@ interface ISelectBoxProps<T> {
     customLocalize?: {
         activeLocale?: NCoreUIKit.LocaleKey;
     };
+    isShowSelectSheetTools?: boolean;
     isWorkWithRealtime?: boolean;
     isMultipleSelect?: boolean;
     cleanIconStyle?: ViewStyle;

src/components/selectSheet/index.tsx

@@ -21,10 +21,12 @@ import TextInput from "../textInput";
 import Loading from "../loading";
 import Button from "../button";
 import Text from "../text";
+import CheckBox from "../checkBox";
 
 function SelectSheet<T>({
     LoadingIconComponentProp,
     isWorkWithRealtime,
+    isShowTools = true,
     mainSelectedItems,
     isMultipleSelect,
     renderOptionIcon,
@@ -42,7 +44,10 @@ function SelectSheet<T>({
     renderItem,
     searchText,
     maxChoice,
+    minChoice,
     isLoading,
+    selectAll,
+    cleanAll,
     isActive,
     cancel,
     title,
@@ -213,34 +218,41 @@ function SelectSheet<T>({
     };
 
     const renderTools = () => {
+        if(!isShowTools) {
+            return null;
+        }
+
+        if(!isMultipleSelect) {
+            return null;
+        }
+
+        if(minChoice && maxChoice !== -1) {
+            return null;
+        }
+
         return <View
             style={[
                 stylesheet.toolsContainer,
                 toolsContainerDynamicStyle
             ]}
         >
-            <Button
+            {!minChoice ? <CheckBox
+                isChecked={mainSelectedItems.length === 0 ? "checked" : null}
                 title={localize("clean-all")}
-                variant="ghost"
-                type="neutral"
-                style={{
-                    paddingStart: spaces.spacingSm
-                }}
+                spreadBehaviour="free"
                 onPress={() => {
-
+                    cleanAll();
                 }}
-            />
-            <Button
+            /> : null}
+            {maxChoice === -1 ? <CheckBox
+                isChecked={data.length === mainSelectedItems.length ? "checked" : mainSelectedItems.length ? "partially" : null}
                 title={localize("select-all")}
-                variant="ghost"
-                type="neutral"
-                style={{
-                    paddingEnd: spaces.spacingSm
-                }}
+                spreadBehaviour="free"
+                isFlip={!minChoice}
                 onPress={() => {
-
+                    selectAll();
                 }}
-            />
+            /> : null}
         </View>;
     };
 

src/components/selectSheet/stylesheet.ts

@@ -81,7 +81,7 @@ export const useStyles = ({
             padding: spaces.spacingMd
         } as Mutable<ViewStyle>,
         toolsContainer: {
-
+            marginTop: spaces.spacingSm
         } as Mutable<ViewStyle>
     };
 

src/components/selectSheet/type.ts

@@ -61,8 +61,12 @@ interface ISelectSheetProps<T> {
     isWorkWithRealtime: boolean;
     isMultipleSelect?: boolean;
     isSearchable?: boolean;
+    isShowTools?: boolean;
+    selectAll: () => void;
     selectBoxKey: string;
+    cleanAll: () => void;
     maxChoice?: number;
+    minChoice?: number;
     searchText: string;
     isLoading: boolean;
     cancel: () => void;