@eohjsc/react-native-smart-city 0.4.99 → 0.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.99",
+  "version": "0.5.01",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -198,7 +198,7 @@
     "react-native-toast-message": "^2.1.1",
     "react-native-udp": "4.1.3",
     "react-native-version-check": "^3.4.2",
-    "react-native-vlc-media-player": "^1.0.41",
+    "react-native-vlc-media-player": "^1.0.67",
     "react-native-webview": "11.22.7",
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",

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

@@ -7,7 +7,6 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
-    paddingVertical: 50,
   },
   bigCircle: {
     backgroundColor: Colors.Gray2,

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Switch, View } from 'react-native';
 
 import Text from '../../Text';
@@ -7,10 +7,9 @@ import styles from './OnOffButtonTemplateStyle';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import { useConfigGlobalState } from '../../../iot/states';
 
-const SwitchButtonTemplate = memo(
-  ({ item = {}, isLight = false, doAction }) => {
-    const { configuration = {}, id } = item;
-    const {
+const SwitchButtonTemplate = memo(({ item, doAction }) => {
+  const {
+    configuration: {
       action_off_data,
       action_on_data,
       text_on,
@@ -18,54 +17,67 @@ const SwitchButtonTemplate = memo(
       color_on,
       color_off,
       config,
-    } = configuration;
+      is_on_value,
+    } = {},
+    id,
+  } = item;
 
-    const [configValues] = useConfigGlobalState('configValues');
-    const configValue = configValues[config];
-    const [_isOn, setIsOn] = useState(configValue?.value);
+  const [configValues] = useConfigGlobalState('configValues');
+  const configValue = configValues[config]?.value;
+  const [isOn, setIsOn] = useState();
+  const getIsOnValue = useCallback(() => {
+    if (is_on_value && is_on_value.length > 0) {
+      return is_on_value.includes(configValue);
+    }
+    return !!configValue;
+  }, [configValue, is_on_value]);
 
-    const onChangeSwitch = useCallback(() => {
-      if (_isOn) {
-        setIsOn(false);
+  useEffect(() => {
+    setIsOn(getIsOnValue());
+  }, [getIsOnValue]);
+
+  const onValueChange = useCallback(() => {
+    setIsOn((prevIsOn) => {
+      const newState = !prevIsOn;
+      if (newState) {
+        doAction(action_on_data, null);
+      } else {
         doAction(action_off_data, null);
-        return;
       }
-      doAction(action_on_data, null);
-      setIsOn(true);
-    }, [action_off_data, action_on_data, doAction, _isOn]);
-
-    useEffect(() => {
-      configValue && setIsOn(configValue?.value);
-    }, [configValue]);
+      return newState;
+    });
+  }, [action_off_data, action_on_data, doAction]);
 
-    return (
-      <>
-        <View style={styles.barrierControlContainer}>
-          <Switch
-            trackColor={{ false: color_off, true: color_on }}
-            ios_backgroundColor={_isOn ? color_on : color_off}
-            onValueChange={onChangeSwitch}
-            value={!!_isOn}
-          />
-          <Text
-            style={[
-              styles.textBig,
-              { color: _isOn ? Colors.Gray8 : Colors.Gray6 },
-            ]}
-            accessibilityLabel={`${AccessibilityLabel.SENSOR_STATUS}-${id}`}
-          >
-            {_isOn ? text_on : text_off}
-          </Text>
-        </View>
+  const trackColor = useMemo(
+    () => ({ false: color_off, true: color_on }),
+    [color_off, color_on]
+  );
+  const backgroundColor = useMemo(
+    () => (isOn ? color_on : color_off),
+    [color_off, color_on, isOn]
+  );
 
-        {!!item.title && !isLight && (
-          <Text type="H3" semibold center>
-            {item.title}
-          </Text>
-        )}
-      </>
-    );
-  }
-);
+  return (
+    <>
+      <View style={styles.barrierControlContainer}>
+        <Switch
+          trackColor={trackColor}
+          ios_backgroundColor={backgroundColor}
+          onValueChange={onValueChange}
+          value={isOn}
+        />
+        <Text
+          style={[
+            styles.textBig,
+            { color: isOn ? Colors.Gray8 : Colors.Gray6 },
+          ]}
+          accessibilityLabel={`${AccessibilityLabel.SENSOR_STATUS}-${id}`}
+        >
+          {isOn ? text_on : text_off}
+        </Text>
+      </View>
+    </>
+  );
+});
 
 export default SwitchButtonTemplate;

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

@@ -7,7 +7,6 @@ import { useConfigGlobalState } from '../../../iot/states';
 import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import OnOffButtonTemplate from './OnOffButtonTemplate';
 import OnOffSimpleTemplate from './OnOffSimpleTemplate';
-import styles from './styles';
 
 const getComponent = (template) => {
   switch (template) {
@@ -50,19 +49,9 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   }, [config, configValues, is_on_value]);
 
   const [isOn, setIsOn] = useState(false);
-  const [tempIsOn, setTempIsOn] = useState(getIsOnValue());
-  const [timeoutId, setTimeoutId] = useState();
-  const [needUpdateTempIsOn, setNeedUpdateTempIsOn] = useState(false);
-
-  const refreshTempIsOn = useCallback(() => {
-    const timeout = setTimeout(() => {
-      setNeedUpdateTempIsOn(true);
-    }, 7000);
-    setTimeoutId(timeout);
-  }, []);
 
   const triggerAction = useCallback(async () => {
-    const action_data = tempIsOn ? action_off_data : action_on_data;
+    const action_data = isOn ? action_off_data : action_on_data;
     if (!action_data) {
       return;
     }
@@ -77,11 +66,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
         config_value: isOn ? 0 : 1,
       };
     }
-    clearTimeout(timeoutId);
     await doAction(action_data, data);
-    setTempIsOn((prev) => !prev);
-    setNeedUpdateTempIsOn(false);
-    refreshTempIsOn();
     if (
       is_managed_by_backend &&
       config &&
@@ -90,17 +75,14 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
       watchMultiConfigs([config]);
     }
   }, [
-    tempIsOn,
+    isOn,
     action_off_data,
     action_on_data,
     allow_config_store_value,
     config,
     device_type,
-    timeoutId,
     doAction,
-    refreshTempIsOn,
     is_managed_by_backend,
-    isOn,
   ]);
 
   useUnwatchLGDeviceConfigControl(sensor, [config]);
@@ -109,24 +91,14 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
     setIsOn(getIsOnValue());
   }, [getIsOnValue]);
 
-  useEffect(() => {
-    needUpdateTempIsOn && setTempIsOn(getIsOnValue());
-  }, [getIsOnValue, needUpdateTempIsOn]);
-
-  useEffect(() => {
-    if (device_type !== DEVICE_TYPE.LG_THINQ) {
-      setTempIsOn(getIsOnValue());
-    }
-  }, [getIsOnValue, device_type]);
-
   const Component = useMemo(() => {
     return getComponent(item.template);
   }, [item.template]);
 
   return (
-    <View style={styles.wrap}>
+    <View>
       <Component
-        isOn={tempIsOn}
+        isOn={isOn}
         triggerAction={triggerAction}
         actionGroup={configuration}
         disabled={!action_on_data && !action_off_data}

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -1,15 +1,7 @@
-import React, {
-  memo,
-  useCallback,
-  useState,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { memo, useCallback, useState, useEffect } from 'react';
 import { Slider } from '@miblanchard/react-native-slider';
 
 import { View } from 'react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './SliderRangeTemplateStyles';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -18,101 +10,98 @@ import { DEVICE_TYPE } from '../../configs/Constants';
 import _TextInput from '../Form/TextInput';
 
 const SliderRangeTemplate = memo(
-  ({ item = {}, doAction, sensor, isWidgetOrder }) => {
-    const t = useTranslations();
-    const { configuration = {} } = item;
+  ({ item, doAction, sensor, isWidgetOrder }) => {
+    const { configuration, label = 'Slider range' } = item;
     const [configValues] = useConfigGlobalState('configValues');
-    const {
-      config = undefined,
-      min_value = 0,
-      max_value = 100,
-      action_data,
-    } = configuration;
-    const timeout = useRef(null);
+    const { config, min_value, max_value, action_data } = configuration;
+    const [value, setValue] = useState();
+    const [processing, setProcessing] = useState(false);
 
-    const getPercent = useCallback(() => {
-      return configValues[config]?.value || 0;
-    }, [config, configValues]);
+    const onSlidingStart = useCallback(() => {
+      setProcessing(true);
+    }, []);
 
-    const [valueBrightness, setValueBrightness] = useState(getPercent());
+    const onSlidingChange = useCallback(async (number) => {
+      setValue(number[0]);
+    }, []);
 
-    const onChangeBrightness = useCallback(
-      async (value) => {
-        const value_brness = value[0];
+    const onSlidingComplete = useCallback(
+      async (number) => {
         await doAction(
           action_data,
-          JSON.stringify({ value_brness: value_brness, value: value_brness })
+          JSON.stringify({ value_brness: number[0], value: number[0] })
         );
+        setProcessing(false);
       },
       [action_data, doAction]
     );
 
-    useEffect(() => {
-      const value = configValues[config]?.value || 0;
-      if (sensor?.device_type !== DEVICE_TYPE.LG_THINQ) {
-        setValueBrightness(value);
-      }
-    }, [config, configValues, sensor?.device_type]);
+    const onFocus = useCallback(() => {
+      setProcessing(true);
+    }, []);
 
-    const getTextInputValue = useMemo(() => {
-      if ([null, undefined, NaN].includes(valueBrightness)) {
-        /* istanbul ignore next */
-        return 0;
+    const onEndEditing = useCallback(async () => {
+      if (value) {
+        const data = parseInt(value, 10);
+        await doAction(
+          action_data,
+          JSON.stringify({
+            value_brness: data,
+            value: data,
+          })
+        );
       }
+      setProcessing(false);
+    }, [action_data, doAction, value]);
 
-      return valueBrightness;
-    }, [valueBrightness]);
-
-    const onValueChange = (value) => setValueBrightness(value[0]);
+    useEffect(() => {
+      if (!processing) {
+        if (sensor?.device_type !== DEVICE_TYPE.LG_THINQ) {
+          const configValue = configValues[config]?.value || 0;
+          setValue(configValue);
+        }
+      }
+    }, [config, configValues, processing, sensor?.device_type]);
 
-    const onInputChange = (value) => {
-      if (isNaN(value)) {
+    const onInputChange = (text) => {
+      if (text === '' || isNaN(text)) {
+        setValue(min_value);
         return;
       }
-      setValueBrightness(value);
-      if (timeout.current) {
-        /* istanbul ignore next */
-        clearTimeout(timeout.current);
-      }
-      if (value !== '') {
-        timeout.current = setTimeout(() => {
-          doAction(
-            action_data,
-            JSON.stringify({
-              value_brness: parseInt(value, 10),
-              value: parseInt(value, 10),
-            })
-          );
-        }, 300);
-      }
+
+      const numericValue = Number(text);
+      setValue(Math.min(max_value, Math.max(min_value, numericValue)));
     };
 
     return (
       <View
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
-        <Text type="H4">{item?.title || item?.label || t('brightness')}</Text>
+        <Text type="H4">{label}</Text>
         <View style={styles.wrap}>
           <Slider
             step={1}
             minimumValue={min_value}
             maximumValue={max_value}
-            value={valueBrightness < min_value ? min_value : valueBrightness}
-            onValueChange={onValueChange}
-            onSlidingComplete={onChangeBrightness}
+            value={value}
             minimumTrackTintColor={Colors.Primary}
             maximumTrackTintColor={Colors.Gray3}
             trackStyle={styles.trackSlider}
             thumbStyle={styles.thumbSlider}
             containerStyle={styles.slider}
+            onSlidingStart={onSlidingStart}
+            onValueChange={onSlidingChange}
+            onSlidingComplete={onSlidingComplete}
           />
           <_TextInput
             keyboardType="numeric"
             style={styles.text}
             wrapStyle={styles.wrapInputStyle}
             textInputStyle={styles.textInputStyle}
-            value={getTextInputValue.toString()}
+            value={String(value)}
+            onFocus={onFocus}
             onChange={onInputChange}
+            onEndEditing={onEndEditing}
           />
         </View>
       </View>

package/src/commons/ActionGroup/SliderRangeTemplateStyles.js

@@ -29,11 +29,11 @@ export default StyleSheet.create({
     marginTop: 8,
   },
   slider: {
-    width: '77%',
+    width: '75%',
   },
   wrapInputStyle: {
     marginTop: 0,
-    width: '23%',
+    width: '25%',
   },
   textInputStyle: {
     marginTop: 0,
@@ -41,8 +41,6 @@ export default StyleSheet.create({
     borderRadius: 4,
     paddingTop: 5,
     paddingBottom: 5,
-    paddingHorizontal: 20,
-
     shadowColor: Colors.Gray13,
     borderColor: Colors.Gray5,
     borderWidth: 1,

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -68,14 +68,14 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
     setValue(e);
   };
 
-  const fromValue = useMemo(() => {
-    return configValues[from_config?.id];
-  }, [configValues, from_config]);
-
   const toValue = useMemo(() => {
     return configValues[to_config?.id];
   }, [configValues, to_config]);
 
+  const fromValue = useMemo(() => {
+    return configValues[from_config?.id];
+  }, [configValues, from_config]);
+
   const configs = useMemo(() => {
     if (!from_config || !to_config) {
       return [];
@@ -96,8 +96,8 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
         const type = configMessage.id === from_config.id ? 'from' : 'to';
         messages = [
           ...messages,
-          ...configMessage.data.map((item) => {
-            return { x: item.x, y: item.y, type };
+          ...configMessage.data.map((object) => {
+            return { x: object.x, y: object.y, type };
           }),
         ];
       });
@@ -147,14 +147,14 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
         }
         style={styles.scrollView}
       >
-        {allMessages.map((item, index) => {
+        {allMessages.map((object, index) => {
           return (
             <View
               key={index}
-              style={item.type === 'to' ? styles.to : styles.from}
+              style={object.type === 'to' ? styles.to : styles.from}
             >
-              <Text>{item.y}</Text>
-              <Text>{moment(item.x).format('DD/MM/YYYY HH:mm:ss')}</Text>
+              <Text>{object.y}</Text>
+              <Text>{moment(object.x).format('DD/MM/YYYY HH:mm:ss')}</Text>
             </View>
           );
         })}
@@ -172,7 +172,7 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
           disabled={!value}
         >
-          <IconOutline name="send" size={20} />
+          <IconOutline name="send" size={25} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/TerminalBoxTemplateStyle.js

@@ -24,7 +24,10 @@ export default StyleSheet.create({
     width: '100%',
   },
   iconAndTextOption: {
+    justifyContent: 'center',
     marginTop: 25,
+    width: 40,
+    height: 40,
   },
   wrapInputStyle: {
     marginRight: 14,

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -30,8 +30,8 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
     setValue(e);
   };
   const valueText = useMemo(() => {
-    return configValues[config.id]?.value || '';
-  }, [config.id, configValues]);
+    return configValues[config?.id]?.value || ''; // config undefined when is_configuration_ready = False
+  }, [config?.id, configValues]);
 
   return (
     <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
@@ -40,33 +40,35 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
       </View>
 
       <View style={styles.iconAndText}>
-        <Text type="H4">{valueText}</Text>
+        <Text style={styles.textValue} type="H4">
+          {valueText}
+        </Text>
         <TouchableOpacity
           style={styles.iconAndTextOption}
           onPress={onShowAlert}
           accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
         >
-          <IconOutline name="edit" size={20} />
+          <IconOutline name="edit" size={25} />
         </TouchableOpacity>
-        <AlertAction
-          visible={stateAlert.visible}
-          hideModal={hideAlertAction}
-          title={t('enter_parameters')}
-          message={stateAlert.message}
-          leftButtonTitle={stateAlert.leftButton}
-          leftButtonClick={hideAlertAction}
-          rightButtonTitle={stateAlert.rightButton}
-          rightButtonClick={onDone}
-          rightDisabled={!value}
-          transY={transY}
-        >
-          <_TextInput
-            wrapStyle={styles.wrapInputStyle}
-            value={value}
-            onChange={onInputChange}
-          />
-        </AlertAction>
       </View>
+      <AlertAction
+        visible={stateAlert.visible}
+        hideModal={hideAlertAction}
+        title={t('enter_parameters')}
+        message={stateAlert.message}
+        leftButtonTitle={stateAlert.leftButton}
+        leftButtonClick={hideAlertAction}
+        rightButtonTitle={stateAlert.rightButton}
+        rightButtonClick={onDone}
+        rightDisabled={!value}
+        transY={transY}
+      >
+        <_TextInput
+          wrapStyle={styles.wrapInputStyle}
+          value={value}
+          onChange={onInputChange}
+        />
+      </AlertAction>
     </View>
   );
 };

package/src/commons/ActionGroup/TextBoxTemplateStyle.js

@@ -24,6 +24,9 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  textValue: {
+    width: '80%',
+  },
   iconAndTextOption: {
     flex: 1,
     flexDirection: 'row',