@eohjsc/react-native-smart-city 0.5.0 → 0.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.5.00",
+  "version": "0.5.02",
   "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/OnOffSimpleTemplateStyle.js

@@ -6,6 +6,7 @@ export default StyleSheet.create({
     paddingVertical: 16,
     paddingHorizontal: 16,
     marginHorizontal: 16,
+    marginBottom: 16,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderRadius: 10,

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) {
@@ -97,7 +96,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   }, [item.template]);
 
   return (
-    <View style={styles.wrap}>
+    <View>
       <Component
         isOn={isOn}
         triggerAction={triggerAction}

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, useRef } 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,105 @@ import { DEVICE_TYPE } from '../../configs/Constants';
 import _TextInput from '../Form/TextInput';
 
 const SliderRangeTemplate = memo(
-  ({ item = {}, doAction, sensor, isWidgetOrder }) => {
-    const t = useTranslations();
-    const { configuration = {}, title, label } = 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 timeout = useRef();
 
-    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) => {
+        clearTimeout(timeout.current);
         await doAction(
           action_data,
-          JSON.stringify({ value_brness: value_brness, value: value_brness })
+          JSON.stringify({ value_brness: number[0], value: number[0] })
         );
+        timeout.current = setTimeout(() => {
+          setProcessing(false);
+        }, 3000);
       },
       [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 () => {
+      clearTimeout(timeout.current);
+      if (value) {
+        const data = parseInt(value, 10);
+        await doAction(
+          action_data,
+          JSON.stringify({
+            value_brness: data,
+            value: data,
+          })
+        );
       }
+      timeout.current = setTimeout(() => {
+        setProcessing(false);
+      }, 3000);
+    }, [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">{title || 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

@@ -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>
           );
         })}

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}>

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

@@ -7,6 +7,7 @@ import { mockSCStore } from '../../../context/mockStore';
 import { useConfigGlobalState } from '../../../iot/states';
 import { Slider } from '@miblanchard/react-native-slider';
 import _TextInput from '../../Form/TextInput';
+import { DEVICE_TYPE } from '../../../configs/Constants';
 
 jest.mock('../../../iot/Monitor');
 const mockDoAction = jest.fn();
@@ -14,9 +15,14 @@ jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: jest.fn(),
 }));
 
-const wrapComponent = (item, doAction, sensor) => (
+const wrapComponent = (item, doAction, sensor, isWidgetOrder = false) => (
   <SCProvider initState={mockSCStore({})}>
-    <SliderRangeTemplate item={item} doAction={doAction} sensor={sensor} />
+    <SliderRangeTemplate
+      item={item}
+      doAction={doAction}
+      sensor={sensor}
+      isWidgetOrder={isWidgetOrder}
+    />
   </SCProvider>
 );
 
@@ -37,26 +43,37 @@ describe('Test SliderRangeTemplate', () => {
     watchMultiConfigs.mockClear();
     mockDoAction.mockClear();
     displayItem = {
-      template: 'ColorPickerTemplate',
+      template: 'slider_range_template',
+      is_configuration_ready: true,
       configuration: {
         config: 5,
         action_data: actionData,
+        min_value: 0,
+        max_value: 100,
       },
-      title: '',
+      label: '',
     };
   });
 
   it('render template SliderRangeTemplate', async () => {
+    jest.useFakeTimers();
     useConfigGlobalState.mockImplementation(() => [{}, jest.fn()]);
     const sensor = { is_managed_by_backend: true, name: 'Sensor' };
     await act(async () => {
       wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
     });
     const instance = wrapper.root;
-    const silderRange = instance.findAllByType(Slider);
-    expect(silderRange).toHaveLength(1);
+    const sliderRange = instance.findByType(Slider);
+    expect(sliderRange.props.value).toBe(0);
+    await act(async () => {
+      await sliderRange.props.onSlidingStart();
+    });
+    await act(async () => {
+      await sliderRange.props.onValueChange([50]);
+    });
     await act(async () => {
-      await silderRange[0].props.onSlidingComplete([50]);
+      await sliderRange.props.onSlidingComplete([50]);
+      jest.runAllTimers();
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       actionData,
@@ -78,8 +95,8 @@ describe('Test SliderRangeTemplate', () => {
       wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
     });
     const instance = wrapper.root;
-    const silderRange = instance.findByType(Slider);
-    expect(silderRange.props.value).toBe(50);
+    const sliderRange = instance.findByType(Slider);
+    expect(sliderRange.props.value).toBe(50);
   });
 
   it('test change input invalid number', async () => {
@@ -91,22 +108,25 @@ describe('Test SliderRangeTemplate', () => {
       },
       jest.fn(),
     ]);
-    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
 
     await act(async () => {
-      wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
+      wrapper = await create(wrapComponent(displayItem, mockDoAction));
     });
     const instance = wrapper.root;
     const textInput = instance.findByType(_TextInput);
     expect(textInput.props.value).toEqual('50');
 
     await act(async () => {
-      await textInput.props.onChange('aaaa');
+      await textInput.props.onChange('');
+    });
+    await act(async () => {
+      await textInput.props.onEndEditing('');
     });
     expect(textInput.props.value).toEqual('50'); // not change value
   });
 
-  it('test change input called doAction', async () => {
+  it('test change input text called doAction', async () => {
+    jest.useFakeTimers();
     useConfigGlobalState.mockImplementation(() => [
       {
         5: {
@@ -115,19 +135,21 @@ describe('Test SliderRangeTemplate', () => {
       },
       jest.fn(),
     ]);
-    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
 
     await act(async () => {
-      wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
+      wrapper = await create(wrapComponent(displayItem, mockDoAction));
     });
 
     const instance = wrapper.root;
     let textInput = instance.findByType(_TextInput);
-
+    await act(async () => {
+      await textInput.props.onFocus();
+    });
     await act(async () => {
       await textInput.props.onChange('60');
     });
     await act(async () => {
+      await textInput.props.onEndEditing('60');
       jest.runAllTimers();
     });
     expect(mockDoAction).toHaveBeenCalledWith(
@@ -135,4 +157,38 @@ describe('Test SliderRangeTemplate', () => {
       JSON.stringify({ value_brness: 60, value: 60 })
     );
   });
+
+  it('render template SliderRangeTemplate not ready', async () => {
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        5: {
+          value: 50,
+        },
+      },
+      jest.fn(),
+    ]);
+    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
+    displayItem.is_configuration_ready = false;
+    displayItem.configuration = {};
+    displayItem.label = undefined;
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const sliderRange = instance.findByType(Slider);
+    expect(sliderRange.props.value).toBe(0);
+  });
+
+  it('render template SliderRangeTemplate sensor device_type LG_THINQ and isWidgetOrder change position', async () => {
+    useConfigGlobalState.mockImplementation(() => [{}, jest.fn()]);
+    const sensor = { device_type: DEVICE_TYPE.LG_THINQ };
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(displayItem, mockDoAction, sensor, true)
+      );
+    });
+    const instance = wrapper.root;
+    const sliderRange = instance.findByType(Slider);
+    expect(sliderRange.props.value).toBe(0);
+  });
 });