@eohjsc/react-native-smart-city 0.7.22 → 0.7.23

package/package.json

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

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -91,6 +91,9 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
 
   const setMessages = useCallback(
     (configMessages) => {
+      if (!Array.isArray(configMessages)) {
+        return;
+      }
       let messages = [];
       configMessages.map((configMessage) => {
         const type = configMessage.id === from_config.id ? 'from' : 'to';

package/src/commons/ActionTemplate/OnOffButtonAction.js

@@ -1,11 +1,20 @@
 import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Text from '../Text';
 import styles from './OnOffButtonActionStyles';
 
-const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
-  const { text_on, text_off, action_on, action_off } = configuration;
+const OnOffButtonAction = ({
+  title,
+  configuration,
+  onPress,
+  onPressToggle,
+  template,
+}) => {
+  const t = useTranslations();
+  const { action_on, action_off, text_on, text_off } = configuration;
+
   const onPressActionOn = useCallback(() => {
     onPress &&
       onPress({
@@ -14,6 +23,7 @@ const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
         action: action_on,
         action_off: null,
         template,
+        is_toggle: false,
       });
   }, [onPress, configuration, text_on, action_on, template]);
 
@@ -25,9 +35,21 @@ const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
         action: action_off,
         action_on: null,
         template,
+        is_toggle: false,
       });
   }, [onPress, configuration, text_off, action_off, template]);
 
+  const onPressActionToggle = useCallback(() => {
+    onPressToggle &&
+      onPressToggle({
+        ...configuration,
+        action_on_data: null,
+        action_off_data: null,
+        template,
+        is_toggle: true,
+      });
+  }, [onPressToggle, configuration, template]);
+
   return (
     <>
       <TouchableOpacity
@@ -39,7 +61,7 @@ const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
           style={styles.textWithLine}
           accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
         >
-          {title} {text_on}
+          {`${title} - ${text_on}`}
         </Text>
       </TouchableOpacity>
       <TouchableOpacity
@@ -51,7 +73,19 @@ const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
           style={styles.textWithLine}
           accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
         >
-          {title} {text_off}
+          {`${title} - ${text_off}`}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={onPressActionToggle}
+        accessibilityLabel={AccessibilityLabel.TOGGLE_BUTTON}
+      >
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {`${title} - ${t('toggle')}`}
         </Text>
       </TouchableOpacity>
     </>

package/src/commons/ActionTemplate/OnOffSimpleAction.js

@@ -1,34 +1,54 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
-import Text from '../Text';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import Text from '../Text';
 import styles from './OnOffSimpleActionStyles';
-import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
-const OnOffSimpleAction = ({ configuration, onPress, template }) => {
+const OnOffSimpleAction = ({
+  title,
+  configuration,
+  onPress,
+  onPressToggle,
+  template,
+}) => {
   const t = useTranslations();
-  const { action_on, action_off } = configuration;
-  const onPressActionOn = () => {
+  const { action_on, action_off, text_on, text_off } = configuration;
+
+  const onPressActionOn = useCallback(() => {
     onPress &&
       onPress({
         ...configuration,
-        name: t('text_on'),
+        name: text_on,
         action: action_on,
         action_off: null,
         template,
+        is_toggle: false,
       });
-  };
+  }, [onPress, configuration, text_on, action_on, template]);
 
-  const onPressActionOff = () => {
+  const onPressActionOff = useCallback(() => {
     onPress &&
       onPress({
         ...configuration,
-        name: t('text_off'),
+        name: text_off,
         action: action_off,
         action_on: null,
         template,
+        is_toggle: false,
       });
-  };
+  }, [onPress, configuration, text_off, action_off, template]);
+
+  const onPressActionToggle = useCallback(() => {
+    onPressToggle &&
+      onPressToggle({
+        ...configuration,
+        action_on_data: null,
+        action_off_data: null,
+        template,
+        is_toggle: true,
+      });
+  }, [onPressToggle, configuration, template]);
 
   return (
     <>
@@ -36,16 +56,36 @@ const OnOffSimpleAction = ({ configuration, onPress, template }) => {
         accessibilityLabel={AccessibilityLabel.ON_OFF_SIMPLE_ACTION_ON}
         onPress={onPressActionOn}
       >
-        <Text type="H4" style={styles.textWithLine}>
-          {t('text_on')}
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {`${title} - ${text_on}`}
         </Text>
       </TouchableOpacity>
       <TouchableOpacity
         accessibilityLabel={AccessibilityLabel.ON_OFF_SIMPLE_ACTION_OFF}
         onPress={onPressActionOff}
       >
-        <Text type="H4" style={styles.textWithLine}>
-          {t('text_off')}
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {`${title} - ${text_off}`}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        accessibilityLabel={AccessibilityLabel.ON_OFF_SIMPLE_ACTION_TOGGLE}
+        onPress={onPressActionToggle}
+      >
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {`${title} - ${t('toggle')}`}
         </Text>
       </TouchableOpacity>
     </>

package/src/commons/ActionTemplate/OnOffSmartLockAction.js

@@ -1,10 +1,19 @@
 import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Text from '../Text';
 import styles from './OnOffSmartLockActionStyles';
 
-const OnOffSmartLockAction = ({ configuration, onPress, template }) => {
-  const { action_off, action_on, text_off, text_on } = configuration || {};
+const OnOffSmartLockAction = ({
+  title,
+  configuration,
+  onPress,
+  onPressToggle,
+  template,
+}) => {
+  const t = useTranslations();
+  const { action_on, action_off, text_on, text_off } = configuration;
 
   const onPressActionOpen = useCallback(() => {
     onPress &&
@@ -14,6 +23,7 @@ const OnOffSmartLockAction = ({ configuration, onPress, template }) => {
         action: action_on,
         action_off: null,
         template,
+        is_toggle: false,
       });
   }, [onPress, configuration, text_on, action_on, template]);
 
@@ -25,20 +35,48 @@ const OnOffSmartLockAction = ({ configuration, onPress, template }) => {
         action: action_off,
         action_on: null,
         template,
+        is_toggle: false,
       });
   }, [onPress, configuration, text_off, action_off, template]);
 
+  const onPressActionToggle = useCallback(() => {
+    onPressToggle &&
+      onPressToggle({
+        ...configuration,
+        action_on_data: null,
+        action_off_data: null,
+        template,
+        is_toggle: true,
+      });
+  }, [onPressToggle, configuration, template]);
+
   return (
     <>
+      <TouchableOpacity onPress={onPressActionOpen}>
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {`${title} - ${text_on}`}
+        </Text>
+      </TouchableOpacity>
       <TouchableOpacity onPress={onPressActionClose}>
-        <Text type="H4" style={styles.textWithLine}>
-          {text_off}
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {`${title} - ${text_off}`}
         </Text>
       </TouchableOpacity>
-
-      <TouchableOpacity onPress={onPressActionOpen}>
-        <Text type="H4" style={styles.textWithLine}>
-          {text_on}
+      <TouchableOpacity onPress={onPressActionToggle}>
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {`${title} - ${t('toggle')}`}
         </Text>
       </TouchableOpacity>
     </>

package/src/commons/ActionTemplate/SwitchButtonAction.js

@@ -1,11 +1,20 @@
 import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Text from '../Text';
 import styles from './OnOffButtonActionStyles';
 
-const SwitchButtonAction = ({ title, configuration, onPress, template }) => {
-  const { text_on, text_off, action_on, action_off } = configuration;
+const SwitchButtonAction = ({
+  title,
+  configuration,
+  onPress,
+  onPressToggle,
+  template,
+}) => {
+  const t = useTranslations();
+  const { action_on, action_off, text_on, text_off } = configuration;
+
   const onPressActionOn = useCallback(() => {
     onPress &&
       onPress({
@@ -14,6 +23,7 @@ const SwitchButtonAction = ({ title, configuration, onPress, template }) => {
         action: action_on,
         action_off: null,
         template,
+        is_toggle: false,
       });
   }, [onPress, configuration, text_on, action_on, template]);
 
@@ -25,9 +35,21 @@ const SwitchButtonAction = ({ title, configuration, onPress, template }) => {
         action: action_off,
         action_on: null,
         template,
+        is_toggle: false,
       });
   }, [onPress, configuration, text_off, action_off, template]);
 
+  const onPressActionToggle = useCallback(() => {
+    onPressToggle &&
+      onPressToggle({
+        ...configuration,
+        action_on_data: null,
+        action_off_data: null,
+        template,
+        is_toggle: true,
+      });
+  }, [onPressToggle, configuration, template]);
+
   return (
     <>
       <TouchableOpacity onPress={onPressActionOn}>
@@ -36,7 +58,7 @@ const SwitchButtonAction = ({ title, configuration, onPress, template }) => {
           style={styles.textWithLine}
           accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
         >
-          {title} {text_on}
+          {`${title} - ${text_on}`}
         </Text>
       </TouchableOpacity>
       <TouchableOpacity onPress={onPressActionOff}>
@@ -45,7 +67,16 @@ const SwitchButtonAction = ({ title, configuration, onPress, template }) => {
           style={styles.textWithLine}
           accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
         >
-          {title} {text_off}
+          {`${title} - ${text_off}`}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={onPressActionToggle}>
+        <Text
+          type="H4"
+          style={styles.textWithLine}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {`${title} - ${t('toggle')}`}
         </Text>
       </TouchableOpacity>
     </>

package/src/commons/ActionTemplate/ThreeButtonAction.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
 import Text from '../Text';
 import styles from './ThreeButtonActionStyles';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const ThreeButtonAction = ({ configuration, onPress, template }) => {
   const { text1, text2, text3, action1, action2, action3 } = configuration;
@@ -34,19 +35,28 @@ const ThreeButtonAction = ({ configuration, onPress, template }) => {
 
   return (
     <>
-      <TouchableOpacity onPress={onPressAction1}>
+      <TouchableOpacity
+        onPress={onPressAction1}
+        accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_1}
+      >
         <Text type="H4" style={styles.textWithLine}>
           {text1}
         </Text>
       </TouchableOpacity>
 
-      <TouchableOpacity onPress={onPressAction2}>
+      <TouchableOpacity
+        onPress={onPressAction2}
+        accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_2}
+      >
         <Text type="H4" style={styles.textWithLine}>
           {text2}
         </Text>
       </TouchableOpacity>
 
-      <TouchableOpacity onPress={onPressAction3}>
+      <TouchableOpacity
+        onPress={onPressAction3}
+        accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_3}
+      >
         <Text type="H4" style={styles.textWithLine}>
           {text3}
         </Text>

package/src/commons/ActionTemplate/__test__/OnOffButtonAction.test.js

@@ -8,11 +8,12 @@ import { mockSCStore } from '../../../context/mockStore';
 import Text from '../../Text';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 
-const wrapComponent = (configuration, onPress) => (
+const wrapComponent = (configuration, onPress, onPressToggle) => (
   <SCProvider initState={mockSCStore({})}>
     <OnOffButtonAction
       configuration={configuration}
       onPress={onPress}
+      onPressToggle={onPressToggle}
       title={'Cong tac 1'}
       template={'on_off_button_action_template'}
     />
@@ -30,26 +31,64 @@ describe('Test OnOffButtonAction', () => {
       action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
     };
     const mockFuntion = jest.fn();
+    const mockToggle = jest.fn();
     await act(async () => {
-      tree = await renderer.create(wrapComponent(configuration, mockFuntion));
+      tree = await renderer.create(
+        wrapComponent(configuration, mockFuntion, mockToggle)
+      );
     });
     const instance = tree.root;
     const touchOpacity = instance.findAllByType(TouchableOpacity);
 
-    expect(touchOpacity).toHaveLength(2);
+    expect(touchOpacity).toHaveLength(3);
     await act(async () => {
       touchOpacity[0].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_on,
+      action: configuration.action_on,
+      action_off: null,
+      template: 'on_off_button_action_template',
+      is_toggle: false,
+    });
+    expect(mockToggle).not.toHaveBeenCalled();
+
+    mockFuntion.mockClear();
+    await act(async () => {
       touchOpacity[1].props.onPress();
     });
-    expect(mockFuntion).toHaveBeenCalled();
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_off,
+      action: configuration.action_off,
+      action_on: null,
+      template: 'on_off_button_action_template',
+      is_toggle: false,
+    });
+    expect(mockToggle).not.toHaveBeenCalled();
+
+    mockFuntion.mockClear();
+    await act(async () => {
+      touchOpacity[2].props.onPress();
+    });
+    expect(mockFuntion).not.toHaveBeenCalled();
+    expect(mockToggle).toHaveBeenCalledWith({
+      ...configuration,
+      action_on_data: null,
+      action_off_data: null,
+      template: 'on_off_button_action_template',
+      is_toggle: true,
+    });
 
     const textTitle = instance.findAll(
       (el) =>
         el.props.accessibilityLabel ===
           AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
     );
-    expect(textTitle).toHaveLength(2);
-    expect(textTitle[0].props.children).toEqual(['Cong tac 1', ' ', 'On']);
-    expect(textTitle[1].props.children).toEqual(['Cong tac 1', ' ', 'Off']);
+    expect(textTitle).toHaveLength(3);
+    expect(textTitle[0].props.children).toEqual('Cong tac 1 - On');
+    expect(textTitle[1].props.children).toEqual('Cong tac 1 - Off');
+    expect(textTitle[2].props.children).toEqual('Cong tac 1 - Toggle');
   });
 });

package/src/commons/ActionTemplate/__test__/OnOffSimpleAction.test.js

@@ -5,10 +5,18 @@ import { TouchableOpacity } from 'react-native';
 import OnOffSimpleAction from '../OnOffSimpleAction';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import Text from '../../Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 
-const wrapComponent = (configuration, onPress) => (
+const wrapComponent = (configuration, onPress, onPressToggle) => (
   <SCProvider initState={mockSCStore({})}>
-    <OnOffSimpleAction configuration={configuration} onPress={onPress} />
+    <OnOffSimpleAction
+      configuration={configuration}
+      onPress={onPress}
+      onPressToggle={onPressToggle}
+      title={'Cong tac 1'}
+      template={'OnOffSimpleActionTemplate'}
+    />
   </SCProvider>
 );
 
@@ -16,19 +24,71 @@ describe('Test OnOffSimpleAction', () => {
   let tree;
 
   it('test onPress', async () => {
-    const configuration = {};
+    const configuration = {
+      text_on: 'On',
+      text_off: 'Off',
+      action_off: 'f49e1577-493d-4bae-a9ab-3b0f96a4ec52',
+      action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
+    };
     const mockFuntion = jest.fn();
+    const mockToggle = jest.fn();
     await act(async () => {
-      tree = await renderer.create(wrapComponent(configuration, mockFuntion));
+      tree = await renderer.create(
+        wrapComponent(configuration, mockFuntion, mockToggle)
+      );
     });
     const instance = tree.root;
     const touchOpacity = instance.findAllByType(TouchableOpacity);
 
-    expect(touchOpacity).toHaveLength(2);
+    expect(touchOpacity).toHaveLength(3);
     await act(async () => {
       touchOpacity[0].props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_on,
+      action: configuration.action_on,
+      action_off: null,
+      template: 'OnOffSimpleActionTemplate',
+      is_toggle: false,
+    });
+    expect(mockToggle).not.toHaveBeenCalled();
+
+    mockFuntion.mockClear();
+    await act(async () => {
       touchOpacity[1].props.onPress();
     });
-    expect(mockFuntion).toHaveBeenCalled();
+    expect(mockFuntion).toHaveBeenCalledWith({
+      ...configuration,
+      name: configuration.text_off,
+      action: configuration.action_off,
+      action_on: null,
+      template: 'OnOffSimpleActionTemplate',
+      is_toggle: false,
+    });
+    expect(mockToggle).not.toHaveBeenCalled();
+
+    mockFuntion.mockClear();
+    await act(async () => {
+      touchOpacity[2].props.onPress();
+    });
+    expect(mockFuntion).not.toHaveBeenCalled();
+    expect(mockToggle).toHaveBeenCalledWith({
+      ...configuration,
+      action_on_data: null,
+      action_off_data: null,
+      template: 'OnOffSimpleActionTemplate',
+      is_toggle: true,
+    });
+
+    const textTitle = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
+    );
+    expect(textTitle).toHaveLength(3);
+    expect(textTitle[0].props.children).toEqual('Cong tac 1 - On');
+    expect(textTitle[1].props.children).toEqual('Cong tac 1 - Off');
+    expect(textTitle[2].props.children).toEqual('Cong tac 1 - Toggle');
   });
 });