@eohjsc/react-native-smart-city 0.7.4 → 0.7.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.4",
+  "version": "0.7.7",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Automate/ItemConditionScriptDetail.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import { View, TouchableOpacity, Platform } from 'react-native';
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity } from 'react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -8,28 +8,19 @@ 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,
+  handleShowMenuAction1,
+  refMenuAction1,
 }) => {
   const t = useTranslations();
-  const refMenuAction = useRef();
-  const { navigate } = useNavigation();
-  const { type, config, unit, value_change } = automate;
-  const { end_device_id, unit_id } = value_change || {};
+  const { type, config, unit } = automate;
   /* 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),
@@ -43,25 +34,6 @@ const ItemConditionScriptDetail = ({
     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}>
@@ -81,27 +53,13 @@ const ItemConditionScriptDetail = ({
       </View>
       <View>
         <TouchableOpacity
-          onPress={handleShowMenuAction}
-          ref={refMenuAction}
+          onPress={handleShowMenuAction1}
+          ref={refMenuAction1}
           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>
   );
 };

package/src/configs/AccessibilityLabel.js

@@ -699,6 +699,7 @@ export default {
     'GATEWAY_INFO_BUTTON_GOTO_CONNECTION_METHODS',
   GATEWAY_INFO_BUTTON_DELETE_GATEWAY: 'GATEWAY_INFO_BUTTON_DELETE_GATEWAY',
   MENU_POPPER_MORE: 'MENU_POPPER_MORE',
+  MENU_POPPER_MORE_2: 'MENU_POPPER_MORE_2',
   GATEWAY_CONNECTION_METHODS_TEXT: 'GATEWAY_CONNECTION_METHODS_TEXT',
   //Notification
   CUSTOM_TEXT: 'CUSTOM_TEXT',

package/src/screens/Automate/ScriptDetail/__test__/index.test.js

@@ -178,11 +178,25 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
+    const button = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.ICON_MENU_POPUP &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+
+    const menuActionMore = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE_2
+    );
 
     await act(async () => {
-      await itemAutomate.props.onPress();
+      menuActionMore.props.onItemClick({ doAction: jest.fn() });
+      menuActionMore.props.listMenuItem[1].doAction();
     });
+
     expect(spyToastError).toBeCalledWith(
       getTranslate('en', 'only_owner_has_permission_to_edit_this_script')
     );
@@ -516,8 +530,7 @@ describe('Test ScriptDetail', () => {
     });
     const menuActionMore = instance.find(
       (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.MENU_ACTION_LIST_TOUCHABLE
+        el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE_2
     );
     await act(async () => {
       menuActionMore.props.onItemClick({ doAction: jest.fn() });

package/src/screens/Automate/ScriptDetail/index.js

@@ -43,6 +43,12 @@ const ScriptDetail = ({ route }) => {
   const refMenuAction = useRef();
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
+  const {
+    childRef: childRef1,
+    showingPopover: showingPopover1,
+    showPopoverWithRef: showPopoverWithRef1,
+    hidePopover: hidePopover1,
+  } = usePopover();
   const t = useTranslations();
   const {
     saveAt,
@@ -57,9 +63,19 @@ const ScriptDetail = ({ route }) => {
   const [isShowDelete, setIsShowDelete] = useState(false);
   const [isShowAddAction, setIsShowAddAction] = useState(false);
 
-  const { script, type, name, unit, can_edit, id: automateId } = automate;
+  const {
+    script,
+    type,
+    name,
+    unit,
+    can_edit,
+    id: automateId,
+    value_change,
+  } = automate;
+  const { end_device_id, unit_id } = value_change || {};
   const { enable } = script || {};
   const [enableScript, setEnableScript] = useState(enable);
+  const refMenuAction1 = useRef();
   const onShowActivityLog = useCallback(() => {
     navigate(Routes.ActivityLog, {
       id: automateId,
@@ -75,6 +91,23 @@ const ScriptDetail = ({ route }) => {
     });
   }, [navigate, automateId, type, unit]);
 
+  const handleUpdateAutomate = useCallback(async () => {
+    if (!can_edit) {
+      ToastBottomHelper.error(
+        t('only_owner_has_permission_to_edit_this_script')
+      );
+      return;
+    }
+    if (!enableScript) {
+      ToastBottomHelper.error(t('this_script_has_been_disabled'));
+      return;
+    }
+    navigate(Routes.AddUnknownTypeSmart, {
+      automate,
+      closeScreen: route.name,
+    });
+  }, [automate, can_edit, enableScript, navigate, route.name, t]);
+
   const listMenuItem = useMemo(
     () => [
       { text: t('rename'), doAction: () => setIsShowRename(true) },
@@ -90,6 +123,23 @@ const ScriptDetail = ({ route }) => {
     [t, onShowActivityLog]
   );
 
+  const listMenuItemCondition = useMemo(() => {
+    const items = [
+      { text: t('edit_condition'), doAction: () => handleUpdateAutomate() },
+    ];
+    if (value_change) {
+      items.unshift({
+        text: t('device_display'),
+        doAction: () =>
+          navigate(Routes.DeviceDetail, {
+            unitId: unit_id,
+            sensorId: end_device_id,
+          }),
+      });
+    }
+    return items;
+  }, [t, handleUpdateAutomate, value_change, navigate, unit_id, end_device_id]);
+
   const handleShowMenuAction = useCallback(() => {
     if (!can_edit) {
       ToastBottomHelper.error(
@@ -142,23 +192,6 @@ const ScriptDetail = ({ route }) => {
     }
   }, [automateId, t]);
 
-  const handleUpdateAutomate = useCallback(async () => {
-    if (!can_edit) {
-      ToastBottomHelper.error(
-        t('only_owner_has_permission_to_edit_this_script')
-      );
-      return;
-    }
-    if (!enableScript) {
-      ToastBottomHelper.error(t('this_script_has_been_disabled'));
-      return;
-    }
-    navigate(Routes.AddUnknownTypeSmart, {
-      automate,
-      closeScreen: route.name,
-    });
-  }, [automate, can_edit, enableScript, navigate, route.name, t]);
-
   const handleGoBack = useCallback(async () => {
     if (closeScreen === Routes.UnitDetail) {
       navigate(closeScreen, { unitId: unit });
@@ -224,6 +257,10 @@ const ScriptDetail = ({ route }) => {
     saveAt && fetchAutomateActions();
   }, [saveAt, fetchAutomateActions]);
 
+  const handleShowMenuAction1 = useCallback(() => {
+    showPopoverWithRef1(refMenuAction1);
+  }, [showPopoverWithRef1, refMenuAction1]);
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
@@ -247,7 +284,8 @@ const ScriptDetail = ({ route }) => {
           <ItemConditionScriptDetail
             automate={automate}
             enableScript={enableScript}
-            onPress={handleUpdateAutomate}
+            handleShowMenuAction1={handleShowMenuAction1}
+            refMenuAction1={refMenuAction1}
           />
           {type === AUTOMATE_TYPE.ONE_TAP && enableScript && (
             <TouchableOpacity
@@ -304,10 +342,25 @@ const ScriptDetail = ({ route }) => {
         isTextCenter={false}
         wrapStyle={styles.wrapStyle}
         mode={
+          /* istanbul ignore next */
           Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
         }
         accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE}
       />
+      <MenuActionMore
+        isVisible={showingPopover1}
+        hideMore={hidePopover1}
+        listMenuItem={listMenuItemCondition}
+        childRef={childRef1}
+        onItemClick={onItemClick}
+        isTextCenter={false}
+        wrapStyle={styles.wrapStyle}
+        mode={
+          /* istanbul ignore next */
+          Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
+        }
+        accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE_2}
+      />
       <AddActionScript
         automate={automate}
         numberActionAdded={data.length}