@eohjsc/react-native-smart-city 0.3.28 → 0.3.31

package/package.json

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

package/src/commons/Action/ItemQuickAction.js

@@ -88,6 +88,7 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
   return (
     <TouchableOpacity
       testID={TESTID.ITEM_QUICK_ACTION_PRESS}
+      accessibilityLabel={`${TESTID.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}`}
       onPress={onActionPress}
     >
       <View style={wrapperStyle}>

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -1,41 +1,55 @@
-import React, { memo, useState, useEffect } from 'react';
+import React, {
+  memo,
+  useState,
+  useEffect,
+  useContext,
+  useCallback,
+} from 'react';
 import { View } from 'react-native';
 import styles from './ColorPickerTemplateStyles';
 import ColorPicker from 'react-native-wheel-color-picker';
 import { useConfigGlobalState } from '../../iot/states';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
 
-let isFirstTime = true;
-
-const WheelColorPicker = ({ valueColor, onChangeColor }) => {
+const WheelColorPicker = ({ valueColor, onChangeColor, onStart }) => {
   return (
     <ColorPicker
       style={styles.colorPicker}
       sliderHidden={true}
       swatches={false}
       color={valueColor}
+      onInteractionStart={onStart}
       onColorChangeComplete={onChangeColor}
       thumbSize={16}
     />
   );
 };
 
-const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const { configuration } = actionGroup;
+let isFirstTime = true;
+const ColorPickerTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
+  const { configuration = {} } = actionGroup;
   const [valueColorComplete, setValueColorComplete] = useState('');
   const [configValues] = useConfigGlobalState('configValues');
+  const { setAction } = useContext(SCContext);
 
-  const onChangeColor = (color) => {
-    const to = setTimeout(() => {
-      isFirstTime = false;
-      clearTimeout(to);
-    }, 1000);
+  const onChangeColor = useCallback(
+    (color) => {
+      setAction(Action.SET_LOCK_VIEW_PICK_COLOR, false);
+      const to = setTimeout(() => {
+        isFirstTime = false;
+        clearTimeout(to);
+      }, 1000);
 
-    !isFirstTime &&
-      doAction(
-        configuration?.action_color_data,
-        JSON.stringify({ value: color })
-      );
-  };
+      !isFirstTime &&
+        doAction(
+          configuration?.action_color_data,
+          JSON.stringify({ value: color })
+        );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [configuration?.action_color_data, doAction]
+  );
 
   useEffect(() => {
     const { config } = configuration;
@@ -50,11 +64,16 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
     return () => (isFirstTime = true);
   }, []);
 
+  const onStartPickColor = useCallback(() => {
+    setAction(Action.SET_LOCK_VIEW_PICK_COLOR, true);
+  }, [setAction]);
+
   return (
     <View style={styles.viewPickColor}>
       <WheelColorPicker
         valueColor={valueColorComplete}
         onChangeColor={onChangeColor}
+        onStart={onStartPickColor}
       />
     </View>
   );

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -16,7 +16,6 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     action_on_data,
     is_display_lock,
     text1,
-    text2,
     text3,
     text_door_lock,
   } = configuration || {};
@@ -56,7 +55,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
       {
         style: styles.buttonActionCurtainCenter,
         icon: Images.buttonPauseCurtain,
-        text: text2,
+        text: '',
         onPress: onButtonStopPress,
         testID: TESTID.BUTTON_TEMPLATE_2,
       },

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -10,16 +10,21 @@ import styles from './NumberUpDownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
 import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
 
-const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
-  const { configuration, title } = actionGroup;
+const NumberUpDownActionTemplate = ({
+  actionGroup = {},
+  doAction,
+  sensor = {},
+}) => {
+  const { configuration = {}, title } = actionGroup;
   const {
     action_data,
     max_value,
     min_value,
-    text_format,
+    text_format = '',
     config,
     allow_config_store_value,
   } = configuration;
+  const { device_type, is_managed_by_backend } = sensor;
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
@@ -41,7 +46,7 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const doActionAndWatchConfig = useCallback(
     async (actionData, actionValue) => {
       let data = actionValue;
-      if (sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME) {
+      if (device_type !== DEVICE_TYPE.GOOGLE_HOME) {
         data = { temperature: actionValue };
         if (allow_config_store_value && config) {
           data.config_id = config;
@@ -50,7 +55,7 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         data = JSON.stringify(data);
       }
       await doAction(actionData, data);
-      if (!sensor?.is_managed_by_backend) {
+      if (!is_managed_by_backend) {
         return;
       }
       if (!config) {
@@ -58,13 +63,13 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
       }
 
       config &&
-        sensor.device_type === DEVICE_TYPE.LG_THINQ &&
+        device_type === DEVICE_TYPE.LG_THINQ &&
         watchMultiConfigs([config]);
     },
     [
       doAction,
-      sensor?.is_managed_by_backend,
-      sensor.device_type,
+      is_managed_by_backend,
+      device_type,
       allow_config_store_value,
       config,
     ]

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

@@ -1,7 +1,6 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { Section } from '../../Section';
 import Text from '../../Text';
 import styles from './OnOffSmartLockStyle';
 import ButtonLock from '../../../../assets/images/Device/button-lock.svg';
@@ -11,10 +10,12 @@ import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
 
-const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
+const OnOffSmartLock = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
   const t = useTranslations();
-  const { configuration } = actionGroup;
-  const { action_on_data, action_off_data } = configuration;
+  const { configuration = {} } = actionGroup;
+  const { action_on_data, action_off_data, config, is_on_value } =
+    configuration;
+  const { is_managed_by_backend, device_type } = sensor;
   const [isUnlock, setisUnlock] = useState(true);
   const [configValues] = useConfigGlobalState('configValues');
 
@@ -27,10 +28,10 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
         const dataUnlock = { door_lock: 1 };
         await doAction(action_off_data, JSON.stringify(dataUnlock));
       }
-      if (sensor?.is_managed_by_backend) {
-        configuration.config &&
-          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
-          watchMultiConfigs([configuration.config]);
+      if (is_managed_by_backend) {
+        config &&
+          device_type === DEVICE_TYPE.LG_THINQ &&
+          watchMultiConfigs([config]);
       }
     }
   }, [
@@ -38,54 +39,46 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
     action_on_data,
     doAction,
     isUnlock,
-    configuration,
-    sensor?.is_managed_by_backend,
-    sensor.device_type,
+    config,
+    is_managed_by_backend,
+    device_type,
   ]);
 
-  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
+  useUnwatchLGDeviceConfigControl(sensor, [config]);
 
   useEffect(() => {
-    const { is_on_value, config } = configuration;
     const configValue = configValues[config];
     if (is_on_value && is_on_value.length) {
       setisUnlock(is_on_value.includes(configValue?.value));
     } else {
       setisUnlock(configValue?.value);
     }
-  }, [configValues, configuration]);
+  }, [config, configValues, configuration, is_on_value]);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.wrap}>
-        <Section style={styles.section}>
-          <View style={styles.wrapController}>
-            <Text style={styles.textController}>{t('controller')}</Text>
-          </View>
-          <View>
-            <TouchableOpacity
-              onPress={handleActionSmartLock}
-              testID={TESTID.BUTTON_ON_OFF}
-              style={styles.wrapButtonSmartLock}
-            >
-              {isUnlock ? (
-                <ButtonLock style={styles.buttonSmartLock} />
-              ) : (
-                <ButtonUnLock style={styles.buttonSmartLock} />
-              )}
-              <Text style={styles.textSmartLock}>
-                {t(isUnlock ? 'lock' : 'unlock')}
-              </Text>
-            </TouchableOpacity>
-          </View>
-          <View style={styles.wrapStatus}>
-            <Text style={styles.textStatus}>
-              {t(isUnlock ? 'door_is_open' : 'door_is_close')}
-            </Text>
-          </View>
-        </Section>
+    <>
+      <View>
+        <TouchableOpacity
+          onPress={handleActionSmartLock}
+          testID={TESTID.BUTTON_ON_OFF}
+          style={styles.wrapButtonSmartLock}
+        >
+          {isUnlock ? (
+            <ButtonLock style={styles.buttonSmartLock} />
+          ) : (
+            <ButtonUnLock style={styles.buttonSmartLock} />
+          )}
+          <Text style={styles.textSmartLock}>
+            {t(isUnlock ? 'lock' : 'unlock')}
+          </Text>
+        </TouchableOpacity>
       </View>
-    </SafeAreaView>
+      <View style={styles.wrapStatus}>
+        <Text style={styles.textStatus}>
+          {t(isUnlock ? 'door_is_open' : 'door_is_close')}
+        </Text>
+      </View>
+    </>
   );
 });
 

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLockStyle.js

@@ -28,6 +28,7 @@ export default StyleSheet.create({
     borderRadius: 10,
     borderColor: Colors.Gray4,
     borderWidth: 1,
+    marginTop: 10,
   },
   buttonSmartLock: {
     marginTop: 14,

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

@@ -8,8 +8,9 @@ import styles from './OnOffButtonTemplateStyle';
 import { TESTID } from '../../../configs/Constants';
 
 const OnOffButtonTemplate = memo(
-  ({ isOn, triggerAction, actionGroup, isLight = false }) => {
-    const { configuration, id } = actionGroup;
+  ({ isOn, triggerAction, actionGroup = {}, isLight = false }) => {
+    const { configuration = {}, id } = actionGroup;
+    const { icon_on, icon_off, text_on, text_off } = configuration;
 
     return (
       <>
@@ -18,10 +19,11 @@ const OnOffButtonTemplate = memo(
             style={styles.bigCircle}
             onPress={triggerAction}
             testID={`${TESTID.ON_OFF_BUTTON}-${id}`}
+            accessibilityLabel={`${TESTID.ON_OFF_BUTTON}-${id}`}
           >
             <View style={styles.smallCircle}>
               <Icon
-                name={isOn ? configuration.icon_on : configuration.icon_off}
+                name={isOn ? icon_on : icon_off}
                 size={44}
                 color={isOn ? Colors.Green7 : Colors.Gray6}
               />
@@ -31,8 +33,9 @@ const OnOffButtonTemplate = memo(
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
                 testID={`${TESTID.SENSOR_STATUS}-${id}`}
+                accessibilityLabel={`${TESTID.SENSOR_STATUS}-${id}`}
               >
-                {isOn ? configuration.text_on : configuration.text_off}
+                {isOn ? text_on : text_off}
               </Text>
             </View>
           </TouchableOpacity>

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

@@ -20,8 +20,8 @@ const getComponent = (template) => {
   }
 };
 
-const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const { configuration } = actionGroup;
+const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
+  const { configuration = {} } = actionGroup;
   const { action_data, action_on_data, action_off_data } = configuration;
 
   // eslint-disable-next-line no-unused-vars

package/src/commons/ActionGroup/OneBigButtonTemplate.js

@@ -6,9 +6,9 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 import styles from './OneBigButtonTemplateStyle';
 
-const OneBigButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const { configuration } = actionGroup;
-  const { text, action_data } = configuration || {};
+const OneBigButtonTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
+  const { configuration = {} } = actionGroup;
+  const { text, action_data, icon } = configuration;
 
   const onPressDoAction = useCallback(() => {
     doAction(action_data, null);
@@ -19,7 +19,7 @@ const OneBigButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
       <View style={styles.barrierControlContainer}>
         <TouchableOpacity style={styles.bigCircle} onPress={onPressDoAction}>
           <View style={styles.smallCircle}>
-            <Icon name={configuration.icon} size={44} color={Colors.Green7} />
+            <Icon name={icon} size={44} color={Colors.Green7} />
             <Text style={styles.textBig}>{text}</Text>
           </View>
         </TouchableOpacity>

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -24,38 +24,48 @@ function getOptionValue(option) {
   return option.value_int;
 }
 
-const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
+const OptionsDropdownActionTemplate = ({
+  actionGroup = {},
+  doAction,
+  sensor = {},
+}) => {
   const t = useTranslations();
-  const { configuration, title } = actionGroup;
-  const { action_data, options, icon_kit_data, icon, icon_outlined } =
-    configuration;
+  const { configuration = {}, title } = actionGroup;
+  const {
+    action_data,
+    options = [],
+    icon_kit_data,
+    icon,
+    icon_outlined,
+    config,
+  } = configuration;
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
   const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
   const selectedOption = useMemo(() => {
-    const currentValue = configValues[configuration.config]?.value;
+    const currentValue = configValues[config]?.value;
     if (currentValue === null || currentValue === undefined) {
-      return configuration.options[0];
+      return options[0];
     }
 
-    for (let i = 0; i < configuration.options.length; i++) {
-      const option = configuration.options[i];
+    for (let i = 0; i < options.length; i++) {
+      const option = options[i];
       const value = getOptionValue(option);
       if (value === currentValue) {
         return option;
       }
     }
-    return configuration.options[0];
-  }, [configValues, configuration.config, configuration.options]);
+    return options[0];
+  }, [configValues, config, options]);
 
   const { stateAlert, hideAlertAction, onShowAlert } = useDropdownAction();
   const [selectedIndex, setSelectedIndex] = useState(
-    configuration.options.indexOf(selectedOption)
+    options.indexOf(selectedOption)
   );
 
   useEffect(() => {
-    setSelectedIndex(configuration.options.indexOf(selectedOption));
-  }, [configuration.options, selectedOption]);
+    setSelectedIndex(options.indexOf(selectedOption));
+  }, [options, selectedOption]);
 
   const onDone = useCallback(() => {
     const newOption = options[selectedIndex];
@@ -68,14 +78,14 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
 
     doAction(action_data, data);
     if (sensor?.is_managed_by_backend) {
-      configuration.config &&
+      config &&
         sensor.device_type === DEVICE_TYPE.LG_THINQ &&
-        watchMultiConfigs([configuration.config]);
+        watchMultiConfigs([config]);
     }
     hideAlertAction();
   }, [
     action_data,
-    configuration.config,
+    config,
     doAction,
     hideAlertAction,
     options,
@@ -89,11 +99,11 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
   const displaySelected = useMemo(() => {
-    if (!configuration.config) {
+    if (!config) {
       return t('not_available');
     }
     return selectedOption.text;
-  }, [configuration?.config, selectedOption?.text, t]);
+  }, [config, selectedOption?.text, t]);
 
   const iconSvg = useMemo(() => {
     switch (icon) {

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
+import React, { memo, useCallback, useState, useEffect } from 'react';
 import { View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './SliderRangeTemplateStyles';
@@ -8,35 +8,43 @@ import SvgBrightness from '../../../assets/images/brightness.svg';
 import SliderRange from 'react-native-slider';
 import { useConfigGlobalState } from '../../iot/states';
 
-const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
+const SliderRangeTemplate = memo(({ actionGroup = {}, doAction }) => {
   const t = useTranslations();
-  const { configuration } = actionGroup;
+  const { configuration = {} } = actionGroup;
   const [valueBrightness, setValueBrightness] = useState(0);
   const [valueBrightnessTemp, setValueBrightnessTemp] = useState(0);
+  const [isFirstTime, setIsFirstTime] = useState(true);
+
   const [configValues] = useConfigGlobalState('configValues');
 
   const onChangeBrightness = useCallback(
-    (value) => {
-      doAction(
+    async (value) => {
+      await doAction(
         configuration?.action_brightness_data,
         JSON.stringify({ value_brness: value })
       );
+      await setValueBrightness(value);
+      await setValueBrightnessTemp(value);
     },
     [configuration?.action_brightness_data, doAction]
   );
 
-  const percentBrightness = useMemo(() => {
-    return valueBrightnessTemp || valueBrightness || 0;
-  }, [valueBrightness, valueBrightnessTemp]);
-
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    let valueBrness = configValue?.value;
-    if (valueBrness >= 0 && valueBrightness >= 0) {
-      setValueBrightness(valueBrness);
+    if (configValue?.value >= 0 && isFirstTime) {
+      setValueBrightness(configValue?.value);
+      setIsFirstTime(false);
+    } else if (configValue?.value === valueBrightnessTemp) {
+      setValueBrightness(valueBrightnessTemp);
     }
-  }, [configuration.config, configValues, configuration, valueBrightness]);
+  }, [
+    configuration.config,
+    configValues,
+    configuration,
+    isFirstTime,
+    valueBrightnessTemp,
+  ]);
 
   return (
     <View style={styles.viewBrightness}>
@@ -49,9 +57,9 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
       <View style={styles.RightBrightness}>
         <View style={styles.slider}>
           <SliderRange
-            value={valueBrightnessTemp}
+            value={valueBrightness}
             onSlidingComplete={onChangeBrightness}
-            onValueChange={setValueBrightnessTemp}
+            onValueChange={setValueBrightness}
             step={1}
             minimumValue={0}
             maximumValue={100}
@@ -64,7 +72,7 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
         </View>
         <View style={styles.valuePercent}>
           <Text type="Label" style={styles.textValuePercent}>
-            {`${percentBrightness}%`}
+            {`${valueBrightness}%`}
           </Text>
         </View>
       </View>