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

package/package.json

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

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/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 (
       <>
@@ -22,7 +23,7 @@ const OnOffButtonTemplate = memo(
           >
             <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}
               />
@@ -34,7 +35,7 @@ const OnOffButtonTemplate = memo(
                 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

@@ -8,9 +8,9 @@ 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);

package/src/commons/ActionGroup/ThreeButtonTemplate.js

@@ -1,15 +1,12 @@
 import React, { memo, useCallback, useState } from 'react';
 import { TouchableOpacity, View, Switch } from 'react-native';
 import { Icon } from '@ant-design/react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './ThreeButtonTemplateStyle';
 import Text from '../Text';
 import { TESTID } from '../../configs/Constants';
 import { Colors } from '../../configs';
-import { Card } from '../../commons/CardShadow';
 
-const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const t = useTranslations();
+const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
   const { configuration } = actionGroup;
   const {
     text1,
@@ -20,7 +17,12 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     action3_data,
     action_off_data,
     action_on_data,
-  } = configuration;
+    icon1,
+    icon2,
+    icon3,
+    text_door_lock,
+    is_display_lock,
+  } = configuration || {};
   const [lock, setLock] = useState(false);
   const iconCustom = (icon) => {
     return icon === 'stop' ? (
@@ -60,7 +62,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
             style={styles.textLockDoor}
             testID={TESTID.TEXT_DOOR_LOOK_ON_OFF}
           >
-            {configuration.text_door_lock}{' '}
+            {`${text_door_lock} `}
           </Text>
         </View>
         <Switch
@@ -75,60 +77,48 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   };
   return (
     <>
-      <Card title={actionGroup.title ? actionGroup.title : t('controller')}>
-        <View style={styles.wrap}>
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_1}
-            style={styles.buttonActionDoor}
-            onPress={onButton1Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              <Icon
-                name={configuration.icon1}
-                size={30}
-                color={Colors.Primary}
-              />
-            </View>
-            <Text style={styles.text}>{text1}</Text>
-          </TouchableOpacity>
+      <View style={styles.wrap}>
+        <TouchableOpacity
+          testID={TESTID.BUTTON_TEMPLATE_1}
+          style={styles.buttonActionDoor}
+          onPress={onButton1Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>
+            <Icon name={icon1} size={30} color={Colors.Primary} />
+          </View>
+          <Text style={styles.text}>{text1}</Text>
+        </TouchableOpacity>
 
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_2}
-            style={styles.buttonActionDoor}
-            onPress={onButton2Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              {iconCustom(configuration.icon2)}
-            </View>
-            <Text style={styles.text}>{text2}</Text>
-          </TouchableOpacity>
+        <TouchableOpacity
+          testID={TESTID.BUTTON_TEMPLATE_2}
+          style={styles.buttonActionDoor}
+          onPress={onButton2Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>{iconCustom(icon2)}</View>
+          <Text style={styles.text}>{text2}</Text>
+        </TouchableOpacity>
 
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_3}
-            style={styles.buttonActionDoor}
-            onPress={onButton3Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              <Icon
-                name={configuration.icon3}
-                size={30}
-                color={Colors.Primary}
-              />
-            </View>
-            <Text style={styles.text}>{text3}</Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.lockSwitch}>
-          {configuration.is_display_lock &&
-            itemLock(
-              lock ? 'lock' : 'unlock',
-              lock ? Colors.Primary : Colors.Gray6
-            )}
-        </View>
-      </Card>
+        <TouchableOpacity
+          testID={TESTID.BUTTON_TEMPLATE_3}
+          style={styles.buttonActionDoor}
+          onPress={onButton3Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>
+            <Icon name={icon3} size={30} color={Colors.Primary} />
+          </View>
+          <Text style={styles.text}>{text3}</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.lockSwitch}>
+        {is_display_lock &&
+          itemLock(
+            lock ? 'lock' : 'unlock',
+            lock ? Colors.Primary : Colors.Gray6
+          )}
+      </View>
     </>
   );
 });