disable drag if stop is the last added action

src/Components/Icon/index.js

@@ -2,10 +2,15 @@ import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 import { useContext } from "react";
 import { AppContext } from "../../utils";
 
-export default function MyIcon({ style, name, color, size }) {
+export default function MyIcon({ style, name, color, size, disabled }) {
   const appContext = useContext(AppContext);
 
-  const iconColor = color === undefined ? appContext.appTheme.icon : color;
+  const iconColor =
+    disabled === true
+      ? (color = appContext.appTheme.iconDisabled)
+      : color === undefined
+      ? appContext.appTheme.icon
+      : color;
 
   return <Icon style={style} name={name} color={iconColor} size={size} />;
 }

src/Screens/Device/scene.js

@@ -8,7 +8,7 @@ import {
   GetDevice,
   VibrateShort,
 } from "../../utils";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useState } from "react";
 import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
 import { useTranslation } from "react-i18next";
@@ -130,6 +130,23 @@ export default function SceneView({ navigation }) {
     );
   };
 
+  const lastSceneAction = deviceSceneActions[deviceSceneActions.length - 1];
+
+  console.log(
+    "lastSceneAction",
+    lastSceneAction?.type === Constants.actionType.stop
+  );
+
+  /*
+) : (
+                <ActionListItem
+                  navigation={navigation}
+                  device={device}
+                  item={deviceSceneActions[deviceSceneActions.length - 1]}
+                />
+              )}
+  */
+
   return (
     <>
       {device.selectedScene === "" ? (
@@ -171,29 +188,45 @@ export default function SceneView({ navigation }) {
             />
           }
           ListFooterComponent={
-            <MyTextButton
-              title={t("screens.device.scenes.buttonAddAction")}
-              styleContainer={[
-                {
-                  alignItems: "center",
-                  marginTop: 10,
-                },
-                AppStyles.appBottom,
-              ]}
-              style={{ padding: 8 }}
-              actionColor={
-                deviceSceneActions === undefined ||
-                deviceSceneActions.length === 0
-              }
-              onPress={() =>
-                navigation.navigate("modalAddSceneAction", {
-                  deviceFirmwareVersion: device.firmware.version,
-                })
-              }
-              iconName="plus-circle-outline"
-            />
+            <>
+              {lastSceneAction?.type !== Constants.actionType.stop ? (
+                <MyTextButton
+                  title={t("screens.device.scenes.buttonAddAction")}
+                  styleContainer={[
+                    {
+                      alignItems: "center",
+                      marginTop: 10,
+                    },
+                    AppStyles.appBottom,
+                  ]}
+                  style={{ padding: 8 }}
+                  actionColor={
+                    deviceSceneActions === undefined ||
+                    deviceSceneActions.length === 0
+                  }
+                  onPress={() =>
+                    navigation.navigate("modalAddSceneAction", {
+                      deviceFirmwareVersion: device.firmware.version,
+                    })
+                  }
+                  iconName="plus-circle-outline"
+                />
+              ) : (
+                <ActionListItem
+                  drag={false}
+                  navigation={navigation}
+                  device={device}
+                  item={lastSceneAction}
+                />
+              )}
+            </>
           }
           renderItem={({ item, drag }) => {
+            // the item for stop will be rendered on the footer of the FlatList to prevent dragging other actions below the stop
+            if (item.type === Constants.actionType.stop) {
+              return null;
+            }
+
             return (
               <ScaleDecorator>
                 <ActionListItem
@@ -519,14 +552,23 @@ function ActionListItem({ drag, navigation, device, item }) {
             </View>
           </View>
 
+          {console.log("drag", drag)}
           <TouchableOpacity
+            disabled={drag === false}
             onLongPress={() => {
+              // darg will be null if stop is rendered on the footer of the FlatList
+              if (!drag) return;
+
               drag();
               VibrateShort();
             }}
             style={{ padding: 4 }}
           >
-            <MyIcon name="menu" size={20} />
+            <MyIcon
+              name="menu"
+              size={20}
+              disabled={drag === false}
+            />
           </TouchableOpacity>
         </View>
 

src/utils.js

@@ -102,6 +102,7 @@ const DarkAppTheme = {
   divider: "#434443",
   textInputBottomColor: "#b2b3b3",
   icon: "#ddd",
+  iconDisabled: "#b2b3b3",
   switch: {
     trackColorTrue: "#01d064",
     trackColorFalse: "#b2b3b3",
@@ -152,6 +153,7 @@ const LightAppTheme = {
   divider: "#ddd",
   textInputBottomColor: "#b2b3b3",
   icon: "#000",
+  iconDisabled: "#b2b3b3",
   switch: {
     trackColorTrue: "#01d064",
     trackColorFalse: "#b2b3b3",