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

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.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) {
@@ -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 } 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 = {}, 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 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">{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,12 +43,15 @@ 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: '',
     };
   });
 
@@ -53,10 +62,16 @@ describe('Test SliderRangeTemplate', () => {
       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 silderRange[0].props.onSlidingComplete([50]);
+      await sliderRange.props.onSlidingStart();
+    });
+    await act(async () => {
+      await sliderRange.props.onValueChange([50]);
+    });
+    await act(async () => {
+      await sliderRange.props.onSlidingComplete([50]);
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       actionData,
@@ -78,8 +93,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 +106,24 @@ 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 () => {
     useConfigGlobalState.mockImplementation(() => [
       {
         5: {
@@ -115,24 +132,59 @@ 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 () => {
-      jest.runAllTimers();
+      await textInput.props.onEndEditing('60');
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       actionData,
       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);
+  });
 });

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

@@ -13,7 +13,7 @@ jest.mock('../../../iot/states', () => ({
 
 const wrapComponent = (item, mockDoAction, isOn) => (
   <SCProvider initState={mockSCStore({})}>
-    <SwitchButtonTemplate item={item} doAction={mockDoAction} isOn={isOn} />
+    <SwitchButtonTemplate item={item} doAction={mockDoAction} />
   </SCProvider>
 );
 
@@ -76,7 +76,23 @@ describe('Test SwitchButtonTemplate', () => {
     expect(switchButton.props.value).toEqual(state);
   };
 
-  it('render state on', async () => {
+  const assertActionCall = async (action_data) => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction));
+    });
+    expect(mockDoAction).not.toHaveBeenCalled();
+    const root = wrapper.root;
+
+    const item = root.findByType(Switch);
+    await act(async () => {
+      item.props.onValueChange();
+    });
+
+    expect(mockDoAction).toHaveBeenCalledWith(action_data, null);
+  };
+
+  it('render state on action off', async () => {
     useConfigGlobalState.mockImplementation(() => [
       {
         1: {
@@ -86,9 +102,10 @@ describe('Test SwitchButtonTemplate', () => {
       jest.fn(),
     ]);
     await assertRender(true);
+    await assertActionCall(actionOffData);
   });
 
-  it('render state off', async () => {
+  it('render state off action on', async () => {
     useConfigGlobalState.mockImplementation(() => [
       {
         1: {
@@ -98,29 +115,20 @@ describe('Test SwitchButtonTemplate', () => {
       jest.fn(),
     ]);
     await assertRender(false);
+    await assertActionCall(actionOnData);
   });
 
-  const assertActionCall = async (state, action_data) => {
-    const mockDoAction = jest.fn();
-    await act(async () => {
-      wrapper = await create(wrapComponent(displayItem, mockDoAction, state));
-    });
-    expect(mockDoAction).not.toHaveBeenCalled();
-    const root = wrapper.root;
-
-    const item = root.findByType(Switch);
-    await act(async () => {
-      item.props.onValueChange();
-    });
-
-    expect(mockDoAction).toHaveBeenCalledWith(action_data, null);
-  };
-
-  it('action state on', async () => {
-    await assertActionCall(true, actionOffData);
-  });
-
-  it('action state off', async () => {
-    await assertActionCall(false, actionOnData);
+  it('render with is_on_value 0 action on', async () => {
+    displayItem.configuration.is_on_value = [0];
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        1: {
+          value: 1,
+        },
+      },
+      jest.fn(),
+    ]);
+    await assertRender(false);
+    await assertActionCall(actionOnData);
   });
 });

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

@@ -120,6 +120,25 @@ describe('Test TextBoxTemplate', () => {
     const instance = wrapper.root;
     const views = instance.findAllByType(View);
 
+    expect(views[0].props.style).toEqual({
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      padding: 16,
+    });
+  });
+  it('render template is_configuration_ready = False', async () => {
+    const mockDoAction = jest.fn();
+    displayItem = {
+      is_configuration_ready: false,
+      configuration: {},
+    };
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, true));
+    });
+    const instance = wrapper.root;
+    const views = instance.findAllByType(View);
+
     expect(views[0].props.style).toEqual({
       flex: 1,
       flexDirection: 'row',

package/src/commons/Device/RainningSensor/CurrentRainSensor.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
@@ -8,54 +8,62 @@ import Text from '../../../commons/Text';
 import IconComponent from '../../IconComponent';
 import images from '../../../configs/Images';
 import FImage from '../../FImage';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
-const CurrentRainSensor = memo(
-  ({
-    data = [],
-    isWidgetOrder,
-    size = 180,
-    textType = 'H2',
-    iconSize = 30,
-  }) => {
-    const item = data.length
-      ? data[0]
-      : {
-          evaluate: {},
-        };
-    const { text, backgroundColor, borderColor, icon, icon_kit_data } =
-      item.evaluate || {};
+const CurrentRainSensor = ({
+  data = [],
+  isWidgetOrder,
+  size = 180,
+  textType = 'H2',
+  iconSize = 30,
+}) => {
+  const t = useTranslations();
+  const item = useMemo(
+    () => (data.length ? data[0] : { evaluate: {} }),
+    [data]
+  );
 
+  if (!item.evaluate) {
     return (
       <View style={[styles.standard, isWidgetOrder && styles.marginBottomZero]}>
-        <CircleView
-          size={size}
-          backgroundColor={backgroundColor}
-          borderWidth={2}
-          borderColor={borderColor}
-          style={styles.center}
-        >
-          <LinearGradient
-            style={styles.linearView}
-            colors={[Colors.TransparentWhite, 'white']}
-            start={{ x: 1, y: 0 }}
-            end={{ x: 1, y: 1 }}
-          />
-          {icon_kit_data?.icon || icon ? (
-            <IconComponent size={iconSize} icon={icon_kit_data?.icon || icon} />
-          ) : (
-            <FImage
-              source={images.activeCurrentSensor}
-              style={styles.iconDefault}
-            />
-          )}
-          <Text type={textType} style={styles.text}>
-            {text}
-          </Text>
-        </CircleView>
+        <Text>{t('widget_have_not_been_shared', { widget: 'Circle' })}</Text>
       </View>
     );
   }
-);
+
+  const { text, backgroundColor, borderColor, icon, icon_kit_data } =
+    item.evaluate;
+
+  return (
+    <View style={[styles.standard, isWidgetOrder && styles.marginBottomZero]}>
+      <CircleView
+        size={size}
+        backgroundColor={backgroundColor}
+        borderWidth={2}
+        borderColor={borderColor}
+        style={styles.center}
+      >
+        <LinearGradient
+          style={styles.linearView}
+          colors={[Colors.TransparentWhite, 'white']}
+          start={{ x: 1, y: 0 }}
+          end={{ x: 1, y: 1 }}
+        />
+        {icon_kit_data?.icon || icon ? (
+          <IconComponent size={iconSize} icon={icon_kit_data?.icon || icon} />
+        ) : (
+          <FImage
+            source={images.activeCurrentSensor}
+            style={styles.iconDefault}
+          />
+        )}
+        <Text type={textType} style={styles.text}>
+          {text}
+        </Text>
+      </CircleView>
+    </View>
+  );
+};
 
 export default CurrentRainSensor;
 
@@ -68,9 +76,6 @@ const styles = StyleSheet.create({
   marginBottomZero: {
     marginBottom: 0,
   },
-  flatlistContent: {
-    paddingHorizontal: 16,
-  },
   center: {
     alignItems: 'center',
     justifyContent: 'center',

package/src/commons/Form/TextInput.js

@@ -30,6 +30,7 @@ const _TextInput = ({
   selection,
   onSelectionChange,
   accessibilityLabelError,
+  onEndEditing,
 }) => {
   const errorStyle = !!errorText && styles.errorWrap;
   return (
@@ -69,6 +70,7 @@ const _TextInput = ({
         {...(value ? { value } : {})}
         selection={selection}
         onSelectionChange={onSelectionChange}
+        onEndEditing={onEndEditing}
       />
       {extraText && extraText}
       {!!errorText && (

package/src/commons/Header/Styles/HeaderCustomStyles.js

@@ -10,7 +10,7 @@ export default StyleSheet.create({
     paddingLeft: 7,
     paddingRight: 10,
     paddingBottom: 6,
-    paddingTop: getStatusBarHeight() + 10,
+    paddingTop: getStatusBarHeight() + 20,
   },
   separator: {
     borderBottomWidth: 0.5,

package/src/commons/HeaderAni/index.js

@@ -10,7 +10,7 @@ import { AccessibilityLabel } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
 const default_height = 45;
-const paddingIos = getStatusBarHeight() + 10;
+const paddingIos = getStatusBarHeight() + 20;
 export const title_height = 44;
 export const heightHeader = default_height + title_height + paddingIos;
 

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -126,7 +126,6 @@ const styles = StyleSheet.create({
     ...Theme.center,
   },
   subTitle: {
-    marginHorizontal: 16,
-    marginBottom: 16,
+    margin: 16,
   },
 });

package/src/screens/Automate/AddNewAction/SetupScriptDelay.js

@@ -45,7 +45,7 @@ const SetupScriptDelay = ({ route }) => {
   }, [automateId, navigate, delay, t]);
 
   const canSave = useMemo(() => {
-    const value = parseInt(delay);
+    const value = parseInt(delay, 10);
     if (!Number.isInteger(value) || value <= 0 || value > 3600) {
       return false;
     }

package/src/screens/Automate/Components/InputName.js

@@ -15,8 +15,13 @@ const InputName = ({ title, placeholder }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const [name, setName] = useState(automate?.name);
-
+  const [processing, setProcessing] = useState(false);
   const handleContinue = useCallback(async () => {
+    if (processing) {
+      /* istanbul ignore next */
+      return;
+    }
+    setProcessing(true);
     Keyboard.dismiss();
 
     const params = {
@@ -37,7 +42,8 @@ const InputName = ({ title, placeholder }) => {
         },
       });
     }
-  }, [automate, name, navigate, closeScreen]);
+    setProcessing(false);
+  }, [processing, automate, name, navigate, closeScreen]);
 
   return (
     <NewActionWrapper

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

@@ -83,7 +83,7 @@ const EditActionsList = memo(() => {
     paddedIndex,
     icon,
     content,
-    onPressRemove,
+    onPress,
     isActive,
     drag,
   }) => (
@@ -103,7 +103,7 @@ const EditActionsList = memo(() => {
         <View style={styles.contentItem}>{content}</View>
         <TouchableOpacity
           accessibilityLabel={AccessibilityLabel.BUTTON_REMOVE_EDIT_ACTION_LIST}
-          onPress={onPressRemove}
+          onPress={onPress}
           style={styles.closeButton}
         >
           <Close />
@@ -148,7 +148,7 @@ const EditActionsList = memo(() => {
               </Text>
             </>
           }
-          onPressRemove={() => onPressRemove(item)}
+          onPress={() => onPressRemove(item)}
           isActive={isActive}
           drag={drag}
         />
@@ -176,7 +176,7 @@ const EditActionsList = memo(() => {
               </Text>
             </>
           }
-          onPressRemove={() => onPressRemove(item)}
+          onPress={() => onPressRemove(item)}
           isActive={isActive}
           drag={drag}
         />
@@ -203,7 +203,7 @@ const EditActionsList = memo(() => {
               </Text>
             </>
           }
-          onPressRemove={() => onPressRemove(item)}
+          onPress={() => onPressRemove(item)}
           isActive={isActive}
           drag={drag}
         />

package/src/screens/Automate/OneTap/__test__/AddNewOneTap.test.js

@@ -38,6 +38,7 @@ describe('test OneTap', () => {
         unit: { id: 1 },
         isMultiUnits: false,
         isAutomateTab: false,
+        closeScreen: Routes.ScriptDetail,
       },
     };
 
@@ -66,15 +67,28 @@ describe('test OneTap', () => {
       await inputName[0].props.onChangeText('Tap to up');
     });
 
-    const item = instance.findAll(
+    const item = instance.find(
       (el) =>
         el.props.accessibilityLabel === AccessibilityLabel.BOTTOM_VIEW_MAIN &&
         el.type === TouchableOpacity
     );
 
-    expect(item).toHaveLength(1);
     await act(async () => {
-      await item[0].props.onPress();
+      await item.props.onPress();
+    });
+
+    expect(mockedNavigate).toHaveBeenCalledWith({
+      merge: true,
+      name: Routes.ScriptDetail,
+      params: {
+        newAutomate: {
+          id: 1,
+          script: { id: 1, name: 'William Miller' },
+          type: 'one_tap',
+          unit: 1,
+          weekday_repeat: [],
+        },
+      },
     });
   });
 

package/src/screens/Device/components/SensorDisplayItem.js

@@ -22,7 +22,11 @@ import { useEvaluateValue } from '../hooks/useEvaluateValue';
 import styles from '../styles';
 import { DetailHistoryChart } from './DetailHistoryChart';
 import VisualChart from './VisualChart';
-
+import { standardizeCameraScreenSize } from '../../../utils/Utils';
+import { Device } from '../../../configs';
+const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
+  Device.screenWidth - 32
+);
 export const SensorDisplayItem = ({
   item = {},
   sensor,
@@ -147,8 +151,8 @@ export const SensorDisplayItem = ({
             }}
             key={`camera-device-${id}`}
             cameraName={name}
-            width="100%"
-            height="100%"
+            width={standardizeWidth}
+            height={standardizeHeight}
           />
         </View>
       );

package/src/screens/Device/detail.js

@@ -512,7 +512,7 @@ const DeviceDetail = ({ route }) => {
         const { configs, options, config, from_config, to_config } =
           configuration;
 
-        configs?.forEach((config) => configIdsSet.add(config.id));
+        configs?.forEach((object) => configIdsSet.add(object.id));
         options?.forEach((option) => configIdsSet.add(option.config));
 
         if (config) {

package/src/screens/Unit/ManageUnitStyles.js

@@ -18,7 +18,7 @@ export default StyleSheet.create({
     bottom: 0,
     borderWidth: 0,
     alignSelf: 'center',
-    paddingBottom: 16 + getBottomSpace(),
+    paddingBottom: 20 + getBottomSpace(),
   },
   boxImage: {
     flexDirection: 'row',

package/src/utils/I18n/translations/en.js

@@ -1464,6 +1464,8 @@ export default {
   end_devices_added: 'end devices added',
   bellow_widget_is_not_configured: 'Bellow widget is not configured',
   bellow_widget_is_wrongly_configured: 'Bellow widget is wrongly configured',
+  widget_have_not_been_shared:
+    '{widget} widget have not been shared. Please contact the owner',
   'customize...': 'Customize...',
   uri_invalid: 'URI invalid',
   when_value_is: 'When value is',

package/src/utils/I18n/translations/vi.js

@@ -1474,6 +1474,8 @@ export default {
   end_devices_added: 'thiết bị được thêm vào',
   bellow_widget_is_not_configured: 'Tiện ích bên dưới chưa được cấu hình',
   bellow_widget_is_wrongly_configured: 'Tiện ích bên dưới được cấu hình sai',
+  widget_have_not_been_shared:
+    'Tiện ích {widget} chưa được chia sẽ. Vui lòng liên hệ với chủ sở hữu',
   'customize...': 'Tùy chỉnh...',
   uri_invalid: 'URI không hợp lệ',
   when_value_is: 'Khi giá trị là',

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

@@ -1,7 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  wrap: {
-    marginBottom: 16,
-  },
-});