@eohjsc/react-native-smart-city 0.7.3-rc9 → 0.7.4

package/assets/images/Map/LocationPin.svg

@@ -0,0 +1,10 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2900_24288)">
+<path d="M15 2.5C10.1625 2.5 6.25 6.4125 6.25 11.25C6.25 13.425 6.875 15.4625 8.0125 17.3C9.2 19.225 10.7625 20.875 11.9625 22.8C12.55 23.7375 12.975 24.6125 13.425 25.625C13.75 26.3125 14.0125 27.5 15 27.5C15.9875 27.5 16.25 26.3125 16.5625 25.625C17.025 24.6125 17.4375 23.7375 18.025 22.8C19.225 20.8875 20.7875 19.2375 21.975 17.3C23.125 15.4625 23.75 13.425 23.75 11.25C23.75 6.4125 19.8375 2.5 15 2.5ZM15 14.6875C13.275 14.6875 11.875 13.2875 11.875 11.5625C11.875 9.8375 13.275 8.4375 15 8.4375C16.725 8.4375 18.125 9.8375 18.125 11.5625C18.125 13.2875 16.725 14.6875 15 14.6875Z" fill="#BFBFBF"/>
+</g>
+<defs>
+<clipPath id="clip0_2900_24288">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.3-rc9",
+  "version": "0.7.4",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -59,6 +59,7 @@
   "license": "MIT",
   "licenseFilename": "LICENSE",
   "dependencies": {
+    "@ant-design/icons-react-native": "^2.3.2",
     "@babel/core": "^7.12.9",
     "@babel/helper-environment-visitor": "^7.16.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -118,6 +119,7 @@
     "lodash": "^4.17.19",
     "lottie-react-native": "^6.7.2",
     "metro-react-native-babel-preset": "0.73.9",
+    "md5": "^2.3.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
     "node-html-parser": "^2.0.2",
@@ -173,7 +175,7 @@
     "react-native-reanimated": "3.8.1",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
-    "react-native-screens": "^3.32.0",
+    "react-native-screens": "3.32.0",
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
     "react-native-svg-transformer": "^0.14.3",

package/src/commons/Action/__test__/ItemQuickAction.test.js

@@ -1,8 +1,8 @@
+import { IconOutline } from '@ant-design/icons-react-native';
 import { factory } from 'factory-girl';
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import Toast from 'react-native-toast-message';
-import AntDesign from 'react-native-vector-icons/AntDesign';
 import { act, create } from 'react-test-renderer';
 import { Colors } from '../../../configs';
 import { AccessibilityLabel } from '../../../configs/Constants';
@@ -94,7 +94,7 @@ describe('Test ItemQuickAction', () => {
       await buttonOnActionPress.props.onPress();
     });
 
-    const icon = instance.findByType(AntDesign);
+    const icon = instance.findByType(IconOutline);
     expect(icon.props.color).toEqual(Colors.TextGray);
   });
 

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 import Text from '../Text';
@@ -116,7 +116,7 @@ const NumberUpDownActionTemplate = ({
           onPress={doActionDown}
           accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_DOWN}
         >
-          <AntDesign name="down" size={32} color={Colors.Primary} />
+          <IconOutline name="down" size={32} color={Colors.Primary} />
         </TouchableOpacity>
 
         <Text accessibilityLabel={'text_format'} type="H2">
@@ -132,7 +132,7 @@ const NumberUpDownActionTemplate = ({
           onPress={doActionUp}
           accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_UP}
         >
-          <AntDesign name="up" size={32} color={Colors.Primary} />
+          <IconOutline name="up" size={32} color={Colors.Primary} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/ButtonWrapper.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Switch, View } from 'react-native';
 import styles from './ButtonWrapperStyles';
 import Text from '../../../Text';
@@ -28,7 +28,7 @@ const ButtonWrapper = memo(
           </View>
         ) : (
           <View style={styles.wrapHeadline}>
-            <AntDesign name={'lock'} size={20} color={Colors.Gray9} />
+            <IconOutline name={'lock'} size={20} color={Colors.Gray9} />
             <Text style={styles.textAutoLock}>
               {isButtonEnable ? t('auto_lock_enabled') : t('auto_lock_when')}
             </Text>
@@ -49,7 +49,7 @@ const ButtonWrapper = memo(
             <Text type="Body" style={styles.textValue}>
               {t('instant')}
             </Text>
-            <AntDesign name="right" size={20} color={Colors.Gray7} />
+            <IconOutline name="right" size={20} color={Colors.Gray7} />
           </View>
         )}
         {isButtonReLockTiming && (

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { TextInput, View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import Text from '../../../Text';
@@ -39,7 +39,7 @@ const PasscodeList = memo(() => {
       <View style={styles.wrap}>
         <View style={styles.searchBox}>
           <View>
-            <AntDesign name="search" size={24} style={styles.search} />
+            <IconOutline name="search" size={24} style={styles.search} />
           </View>
           <TextInput
             placeholder={t('search')}
@@ -58,7 +58,7 @@ const PasscodeList = memo(() => {
               <Text style={styles.textCode}>{item.code}</Text>
               <Text style={styles.textName}>{item.name}</Text>
             </View>
-            <AntDesign name="right" size={20} color={Colors.Gray8} />
+            <IconOutline name="right" size={20} color={Colors.Gray8} />
           </TouchableOpacity>
         ))}
       </View>

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/ButtonWrapper.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Text, TouchableOpacity, View } from 'react-native';
 
 import { RadioCircle } from '../../..';
@@ -50,7 +50,7 @@ const ButtonWrapper = memo(
         {isButtonChooseUser && (
           <TouchableOpacity style={styles.buttonValue}>
             <Text style={styles.value}>{value}</Text>
-            <AntDesign name="right" size={20} color={Colors.Gray8} />
+            <IconOutline name="right" size={20} color={Colors.Gray8} />
           </TouchableOpacity>
         )}
         {isButtonSetTime && (

package/src/commons/ActionGroup/OnOffTemplate/OnOffSimpleTemplate.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Switch } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import Text from '../../Text';
 import styles from './OnOffSimpleTemplateStyle';
@@ -15,7 +15,7 @@ const OnOffSimpleTemplate = ({
   return (
     <View style={styles.wrap}>
       <View style={styles.iconAndText}>
-        <AntDesign name="poweroff" size={20} style={styles.marginRight} />
+        <IconOutline name="poweroff" size={20} style={styles.marginRight} />
         <Text type="H4">{actionGroup.title}</Text>
       </View>
       {isOn !== null && (

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { View, TouchableOpacity, ScrollView } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 import Text from '../../commons/Text';
@@ -139,7 +139,7 @@ const OptionsDropdownActionTemplate = ({
         >
           {displaySelected}
         </Text>
-        <AntDesign name="right" size={20} />
+        <IconOutline name="right" size={20} />
       </TouchableOpacity>
       <AlertAction
         visible={stateAlert.visible}

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -48,18 +48,20 @@ const SliderRangeTemplate = memo(
       clearTimeout(timeout.current);
       if (value) {
         const data = parseInt(value, 10);
+        const numericValue = Math.min(max_value, Math.max(min_value, data));
+        setValue(numericValue);
         await doAction(
           action_data,
           JSON.stringify({
-            value_brness: data,
-            value: data,
+            value_brness: numericValue,
+            value: numericValue,
           })
         );
       }
       timeout.current = setTimeout(() => {
         setProcessing(false);
       }, 3000);
-    }, [action_data, doAction, value]);
+    }, [action_data, doAction, max_value, min_value, value]);
 
     useEffect(() => {
       if (!processing) {
@@ -72,12 +74,10 @@ const SliderRangeTemplate = memo(
 
     const onInputChange = (text) => {
       if (text === '' || isNaN(text)) {
-        setValue(min_value);
+        setValue(0);
         return;
       }
-
-      const numericValue = Number(text);
-      setValue(Math.min(max_value, Math.max(min_value, numericValue)));
+      setValue(Number(text));
     };
 
     return (

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -5,7 +5,7 @@ import styles from './SmartTiviActionTemplateStyles';
 import Text from '../../Text';
 import { Colors } from '../../../configs';
 import { SMART_TIVI_BUTTON } from '../../../configs/Constants';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import CircleButton from './component/CircleButton';
 import RectangleButton from './component/RectangleButton';
 import ControlPlay from './component/ControlPlay';
@@ -97,7 +97,7 @@ const SmartTiviActionTemplate = memo(
               <CircleButton
                 type="small"
                 icon={
-                  <AntDesign
+                  <IconOutline
                     name="poweroff"
                     size={20}
                     color={Colors.Gray6}

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/CircleButton.js

@@ -3,7 +3,7 @@ import { TouchableOpacity, View, Image } from 'react-native';
 import styles from './CircleButtonStyles';
 import Text from '../../../Text';
 import { Colors, Images } from '../../../../configs';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const CircleButton = memo(
@@ -46,7 +46,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.UP_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretup'} />
+                <IconOutline size={14} name={'caret-up'} />
               </TouchableOpacity>
             </View>
             <View style={styles.bodyMultipleButton}>
@@ -57,7 +57,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.LEFT_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretleft'} />
+                <IconOutline size={14} name={'caret-left'} />
               </TouchableOpacity>
               <TouchableOpacity
                 style={[styles.okButton]}
@@ -77,7 +77,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.RIGHT_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caret-right'} />
+                <IconOutline size={14} name={'caret-right'} />
               </TouchableOpacity>
             </View>
             <View style={styles.footerMultipleButton}>
@@ -88,7 +88,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.DOWN_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretdown'} />
+                <IconOutline size={14} name={'caret-down'} />
               </TouchableOpacity>
             </View>
           </View>

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlay.js

@@ -6,7 +6,7 @@ import styles from './ControlPlayStyles';
 import { Pause } from './Icon';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ControlPlay = memo(
   ({ onPressPrev, onPressStop, onPressNext, wrapStyle }) => {
@@ -19,9 +19,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON
           }
         >
-          <AntDesign
+          <IconOutline
             size={32}
-            name={'stepbackward'}
+            name={'backward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />
@@ -42,9 +42,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON
           }
         >
-          <AntDesign
+          <IconOutline
             size={32}
-            name={'stepforward'}
+            name={'forward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
 import { useConfigGlobalState } from '../../iot/states';
 import styles from './TerminalBoxTemplateStyle';
@@ -174,7 +174,7 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
           disabled={!value}
         >
-          <AntDesign name="send" size={25} />
+          <IconOutline name="send" size={25} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
 import { AlertAction } from '../../commons';
 import { useDropdownAction } from './hooks/useDropdownAction';
@@ -48,7 +48,7 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           onPress={onShowAlert}
           accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
         >
-          <AntDesign name="edit" size={25} />
+          <IconOutline name="edit" size={25} />
         </TouchableOpacity>
       </View>
       <AlertAction

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Switch, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 import { watchMultiConfigs } from '../../iot/Monitor';
@@ -183,7 +183,10 @@ const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
           <Text>{title}</Text>
           {configuration.config_hour && configuration.config_minute && (
             <View style={styles.wrapTimer}>
-              <AntDesign style={styles.iconClockCircle} name={'clock-circle'} />
+              <IconOutline
+                style={styles.iconClockCircle}
+                name={'clock-circle'}
+              />
               <Text type="Label" color={Colors.Gray7}>
                 {textTimer ? textTimer : t('set_time')}
               </Text>
@@ -193,7 +196,7 @@ const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
         {configuration.config_hour && !configuration.config_minute && (
           <View style={styles.timerButton}>
             <Text style={styles.textTimerEndLine}>{textTimer}</Text>
-            <AntDesign name="right" size={20} />
+            <IconOutline name="right" size={20} />
           </View>
         )}
       </TouchableOpacity>

package/src/commons/ActionGroup/TwoButtonTemplate/index.js

@@ -1,4 +1,4 @@
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import React, { memo, useState, useCallback, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
@@ -122,7 +122,7 @@ const TwoButtonTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
             key={index}
           >
             <View style={styles.smallCircle}>
-              <AntDesign
+              <IconOutline
                 name={button?.isCheckOnOff ? button?.icon_on : button?.icon_off}
                 size={44}
                 color={button?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}

package/src/commons/ActionGroup/__test__/index.test.js

@@ -413,7 +413,7 @@ describe('Test ActionGroup', () => {
             config: 5,
             is_on_value: 0,
             action: 'action1-47b3-43f6-ba45-83cd1cf5d8f2',
-            icon: 'upcircle',
+            icon: 'up-circle',
             text: 'Text',
             action_data: actionData,
           },
@@ -421,7 +421,7 @@ describe('Test ActionGroup', () => {
             config: 6,
             is_on_value: 0,
             action: 'action2-47b3-43f6-ba45-83cd1cf5d8f2',
-            icon: 'upcircle',
+            icon: 'up-circle',
             text: 'Text',
             action_data: actionData,
           },

package/src/commons/ActionGroup/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import Text from '../Text';
 import OneBigButtonTemplate from './OneBigButtonTemplate';
 import ThreeButtonTemplate from './ThreeButtonTemplate';
@@ -74,4 +74,4 @@ const ActionGroup = (params = {}) => {
   );
 };
 
-export default memo(ActionGroup);
+export default ActionGroup;

package/src/commons/Automate/ItemAutomate.js

@@ -1,72 +1,40 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import styles from './ItemAutomateStyles';
 import { AUTOMATES } from '../../configs/Constants';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { generateAutomationConditionText } from '../../screens/Automate/ScriptDetail/utils';
-import { useGetEvaluateValue } from '../../screens/Device/hooks/useEvaluateValue';
 
 const ItemAutomate = ({
   automate,
   isSelected = false,
-  disabledOnPress = false,
   index,
   setSelectedIndex,
-  onPress,
-  enableScript = true,
 }) => {
   const t = useTranslations();
-  const item = AUTOMATES[automate?.type];
-  const isItemOneTap = AUTOMATES[automate?.type] === AUTOMATES.one_tap;
-  const Icon = item?.icon;
-  const valueEvaluations = useGetEvaluateValue(automate?.config, automate.unit);
-
-  const textCondition = useMemo(() => {
-    return generateAutomationConditionText(automate, valueEvaluations, t);
-  }, [automate, t, valueEvaluations]);
-
-  const renderText = useMemo(() => {
-    if (textCondition) {
-      return textCondition;
-    } else if (isSelected && isItemOneTap) {
-      return t('quick_button_create_at_dashboard');
-    } else {
-      return t(item?.explanation);
-    }
-  }, [isItemOneTap, isSelected, item?.explanation, t, textCondition]);
+  const { type } = automate;
+  const item = AUTOMATES[type];
+  /* istanbul ignore next */
+  const { icon: Icon, title, explanation } = item || {};
 
   const handleSelectIndex = useCallback(() => {
-    if (onPress) {
-      onPress();
-      return;
-    }
-    if (!setSelectedIndex) {
-      return;
-    }
-
     setSelectedIndex(index);
-  }, [index, setSelectedIndex, onPress]);
+  }, [index, setSelectedIndex]);
 
   return (
     <TouchableOpacity
       onPress={handleSelectIndex}
-      disabled={disabledOnPress}
       style={[styles.wrap, isSelected && styles.active]}
     >
       <View style={styles.row}>
         <View style={styles.wrapIcon}>{!!Icon && <Icon />}</View>
         <View style={styles.wrapTitle}>
-          <Text
-            type="H4"
-            bold
-            color={enableScript ? Colors.Black : Colors.Gray7}
-          >
-            {t(item?.title)}
+          <Text type="H4" bold color={Colors.Black}>
+            {t(title)}
           </Text>
           <Text type="Label" color={Colors.Gray8} numberOfLines={1}>
-            {renderText}
+            {t(explanation)}
           </Text>
         </View>
       </View>

package/src/commons/Automate/ItemConditionScriptDetail.js

@@ -0,0 +1,109 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { View, TouchableOpacity, Platform } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './ItemConditionScriptDetailStyles';
+import { AccessibilityLabel, AUTOMATES } from '../../configs/Constants';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { generateAutomationConditionText } from '../../screens/Automate/ScriptDetail/utils';
+import { useGetEvaluateValue } from '../../screens/Device/hooks/useEvaluateValue';
+import MenuActionMore from '../MenuActionMore';
+import { usePopover } from '../../hooks/Common';
+import Routes from '../../utils/Route';
+import { useNavigation } from '@react-navigation/native';
+import { PopoverMode } from 'react-native-popover-view';
+
+const ItemConditionScriptDetail = ({
+  automate,
+  onPress,
+  enableScript = true,
+}) => {
+  const t = useTranslations();
+  const refMenuAction = useRef();
+  const { navigate } = useNavigation();
+  const { type, config, unit, value_change } = automate;
+  const { end_device_id, unit_id } = value_change || {};
+  /* istanbul ignore next */
+  const item = AUTOMATES[type] || {};
+  const { icon: Icon, title } = item;
+  const valueEvaluations = useGetEvaluateValue(config, unit);
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+
+  const textCondition = useMemo(
+    () => generateAutomationConditionText(automate, valueEvaluations, t),
+    [automate, valueEvaluations, t]
+  );
+
+  const renderText = useMemo(() => {
+    if (textCondition) {
+      return textCondition;
+    }
+    return t('quick_button_create_at_dashboard');
+  }, [textCondition, t]);
+
+  const handleShowMenuAction = useCallback(() => {
+    showPopoverWithRef(refMenuAction);
+  }, [showPopoverWithRef]);
+
+  const listMenuItem = useMemo(() => {
+    const items = [{ text: t('edit_condition'), doAction: onPress }];
+    if (value_change) {
+      items.unshift({
+        text: t('device_display'),
+        doAction: () =>
+          navigate(Routes.DeviceDetail, {
+            unitId: unit_id,
+            sensorId: end_device_id,
+          }),
+      });
+    }
+    return items;
+  }, [value_change, t, onPress, navigate, unit_id, end_device_id]);
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.col}>
+        <View style={styles.wrapIcon}>{Icon && <Icon />}</View>
+        <View style={styles.wrapTitle}>
+          <Text
+            type="H4"
+            bold
+            color={enableScript ? Colors.Black : Colors.Gray7}
+          >
+            {t(title)}
+          </Text>
+          <Text type="Label" color={Colors.Gray8} numberOfLines={1}>
+            {renderText}
+          </Text>
+        </View>
+      </View>
+      <View>
+        <TouchableOpacity
+          onPress={handleShowMenuAction}
+          ref={refMenuAction}
+          accessibilityLabel={AccessibilityLabel.ICON_MENU_POPUP}
+        >
+          <MaterialIcons name="more-vert" size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        onItemClick={(object) => object.doAction()}
+        isTextCenter={false}
+        wrapStyle={styles.wrapStyle}
+        mode={
+          /* istanbul ignore next */
+          Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
+        }
+        accessibilityLabel={AccessibilityLabel.MENU_ACTION_LIST_TOUCHABLE}
+      />
+    </View>
+  );
+};
+
+export default ItemConditionScriptDetail;