@eohjsc/react-native-smart-city 0.5.6 → 0.5.7-rc1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.5.6",
+  "version": "0.5.7-rc1",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -161,6 +161,7 @@
     "react-native-bootsplash": "^2.2.5",
     "react-native-calendars": "^1.1266.0",
     "react-native-chart-kit": "^6.5.0",
+    "react-native-charts-wrapper": "^0.6.0",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-crypto-aes-cbc": "^1.1.1",
     "react-native-dash": "^0.0.11",

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

@@ -4,11 +4,19 @@ import React, { memo, useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
-import { AccessibilityLabel } from '../../../configs/Constants';
+import { AccessibilityLabel, BUTTON_TYPE } from '../../../configs/Constants';
 import IconComponent from '../../IconComponent';
 
 const OnOffButtonTemplate = memo(
-  ({ isOn, triggerAction, actionGroup = {}, isLight = false, item }) => {
+  ({
+    isOn,
+    triggerAction,
+    triggerOnAction,
+    triggerOffAction,
+    actionGroup = {},
+    isLight = false,
+    item,
+  }) => {
     const {
       icon_on,
       icon_off,
@@ -16,7 +24,9 @@ const OnOffButtonTemplate = memo(
       icon_kit_off_data,
       text_on,
       text_off,
+      button_type,
     } = actionGroup;
+
     const icon = useMemo(() => {
       if (isOn) {
         return icon_kit_on_data?.icon || icon_on;
@@ -24,12 +34,26 @@ const OnOffButtonTemplate = memo(
       return icon_kit_off_data?.icon || icon_off;
     }, [isOn, icon_on, icon_off, icon_kit_on_data, icon_kit_off_data]);
 
+    const attrs = useMemo(() => {
+      if (button_type === BUTTON_TYPE.PUSH_BUTTON) {
+        return {
+          onPressIn: triggerOnAction,
+          onPressOut: triggerOffAction,
+          activeOpacity: 0.7,
+        };
+      } else {
+        return {
+          onPress: triggerAction,
+        };
+      }
+    }, [button_type, triggerAction, triggerOffAction, triggerOnAction]);
+
     return (
       <>
         <View style={styles.barrierControlContainer}>
           <TouchableOpacity
             style={styles.bigCircle}
-            onPress={triggerAction}
+            {...attrs}
             accessibilityLabel={`${AccessibilityLabel.ON_OFF_BUTTON}-${item?.id}`}
           >
             <View style={styles.smallCircle}>

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

@@ -50,40 +50,53 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
 
   const [isOn, setIsOn] = useState(false);
 
+  const realTrigger = useCallback(
+    async (action_data, config_value) => {
+      if (!action_data) {
+        return;
+      }
+      let data;
+      if (
+        allow_config_store_value &&
+        config &&
+        device_type !== DEVICE_TYPE.GOOGLE_HOME
+      ) {
+        data = {
+          config_id: config,
+          config_value: config_value,
+        };
+      }
+      await doAction(action_data, data);
+      if (
+        is_managed_by_backend &&
+        config &&
+        device_type === DEVICE_TYPE.LG_THINQ
+      ) {
+        watchMultiConfigs([config]);
+      }
+    },
+    [
+      allow_config_store_value,
+      config,
+      device_type,
+      doAction,
+      is_managed_by_backend,
+    ]
+  );
+
   const triggerAction = useCallback(async () => {
     const action_data = isOn ? action_off_data : action_on_data;
-    if (!action_data) {
-      return;
-    }
-    let data;
-    if (
-      allow_config_store_value &&
-      config &&
-      device_type !== DEVICE_TYPE.GOOGLE_HOME
-    ) {
-      data = {
-        config_id: config,
-        config_value: isOn ? 0 : 1,
-      };
-    }
-    await doAction(action_data, data);
-    if (
-      is_managed_by_backend &&
-      config &&
-      device_type === DEVICE_TYPE.LG_THINQ
-    ) {
-      watchMultiConfigs([config]);
-    }
-  }, [
-    isOn,
-    action_off_data,
-    action_on_data,
-    allow_config_store_value,
-    config,
-    device_type,
-    doAction,
-    is_managed_by_backend,
-  ]);
+    const config_value = isOn ? 0 : 1;
+    realTrigger(action_data, config_value);
+  }, [isOn, action_off_data, action_on_data, realTrigger]);
+
+  const triggerOnAction = useCallback(async () => {
+    realTrigger(action_on_data, 1);
+  }, [action_on_data, realTrigger]);
+
+  const triggerOffAction = useCallback(async () => {
+    realTrigger(action_off_data, 0);
+  }, [action_off_data, realTrigger]);
 
   useUnwatchLGDeviceConfigControl(sensor, [config]);
 
@@ -100,6 +113,8 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
       <Component
         isOn={isOn}
         triggerAction={triggerAction}
+        triggerOnAction={triggerOnAction}
+        triggerOffAction={triggerOffAction}
         actionGroup={configuration}
         disabled={!action_on_data && !action_off_data}
         item={item}

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

@@ -11,7 +11,7 @@ import moment from 'moment';
 
 import ActionGroup from '..';
 import Text from '../../Text';
-import { AccessibilityLabel } from '../../../configs/Constants';
+import { AccessibilityLabel, BUTTON_TYPE } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { Slider } from '@miblanchard/react-native-slider';
@@ -347,6 +347,45 @@ describe('Test ActionGroup', () => {
     expect(mockDoAction).toHaveBeenCalledTimes(1);
   });
 
+  it('render ActionGroup on_off_button_action_template button type push button', async () => {
+    const mockDoAction = jest.fn();
+    const actionGroup = {
+      template: 'on_off_button_action_template',
+      configuration: {
+        action_on_data: 'action_on_data',
+        action_off_data: 'action_off_data',
+        icon_on: 'caret-up',
+        text_on: 'ON',
+        icon_off: 'caret-up',
+        text_off: 'OFF',
+        button_type: BUTTON_TYPE.PUSH_BUTTON,
+      },
+      title: 'Power',
+    };
+    await act(async () => {
+      wrapper = renderer.create(
+        wrapComponent(actionGroup, mockDoAction, sensor)
+      );
+    });
+    const instance = wrapper.root;
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons.length).toEqual(1);
+    await act(async () => {
+      buttons[0].props.onPressIn();
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      actionGroup.configuration.action_on_data,
+      undefined
+    );
+    await act(async () => {
+      buttons[0].props.onPressOut();
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      actionGroup.configuration.action_off_data,
+      undefined
+    );
+  });
+
   it('render ActionGroup NumberUpDownActionTemplate watch config value null', async () => {
     const mockDoAction = jest.fn();
     const actionGroup = {

package/src/configs/Constants.js

@@ -272,3 +272,8 @@ export const CHART_GROUP_TYPE = {
   MONTH: 'month',
   YEAR: 'year',
 };
+
+export const BUTTON_TYPE = {
+  TOGGLE_BUTTON: 'toggle_button',
+  PUSH_BUTTON: 'push_button',
+};

package/src/screens/Automate/EditActionsList/UpdateNotifyScript.js

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import _TextInput from '../../../commons/Form/TextInput';
 import styles from './Styles/indexStyles';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
-import { View } from 'react-native';
+import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';
 import { axiosPut } from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
 import { ToastBottomHelper } from '../../../utils/Utils';
@@ -77,36 +77,38 @@ const UpdateNotifyScript = ({
   }, [message, newValue, title]);
 
   return (
-    <>
-      <_TextInput
-        label={t('update_title_notification')}
-        placeholder={t('title_notification')}
-        onChange={onChangeTitle}
-        textInputStyle={styles.textTitle}
-        value={newValue.newTitle}
-        accessibilityLabel={AccessibilityLabel.AUTOMATE_TITLE_NOTIFY}
-        autoFocus
-      />
-      <_TextInput
-        label={t('update_message_notification')}
-        placeholder={t('message_notification')}
-        onChange={onChangeMessage}
-        textInputStyle={styles.textMessage}
-        value={newValue.newMessage}
-        accessibilityLabel={AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY}
-        multiline={true}
-        maxLength={255}
-      />
-      <View style={styles.wrapBottom}>
-        <BottomButtonView
-          mainTitle={t('update_now')}
-          onPressMain={onPressSave}
-          typeMain={canSave ? 'primary' : 'disabled'}
-          accessibilityLabel={AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST}
-          disableKeyBoardAnimated
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+      <View>
+        <_TextInput
+          label={t('update_title_notification')}
+          placeholder={t('title_notification')}
+          onChange={onChangeTitle}
+          textInputStyle={styles.textTitle}
+          value={newValue.newTitle}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_TITLE_NOTIFY}
+          autoFocus
         />
+        <_TextInput
+          label={t('update_message_notification')}
+          placeholder={t('message_notification')}
+          onChange={onChangeMessage}
+          textInputStyle={styles.textMessage}
+          value={newValue.newMessage}
+          accessibilityLabel={AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY}
+          multiline={true}
+          maxLength={255}
+        />
+        <View style={styles.wrapBottom}>
+          <BottomButtonView
+            mainTitle={t('update_now')}
+            onPressMain={onPressSave}
+            typeMain={canSave ? 'primary' : 'disabled'}
+            accessibilityLabel={AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST}
+            disableKeyBoardAnimated
+          />
+        </View>
       </View>
-    </>
+    </TouchableWithoutFeedback>
   );
 };