@eohjsc/react-native-smart-city 0.3.90 → 0.3.92

package/package.json

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

package/src/Images/Common/reorder.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 15H21V13H3V15ZM3 19H21V17H3V19ZM3 11H21V9H3V11ZM3 5V7H21V5H3Z" fill="#262626"/>
+</svg>

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

@@ -18,7 +18,7 @@ export default StyleSheet.create({
   textYourDoor: {
     fontSize: 12,
     color: Colors.Gray8,
-    maginBottom: 16,
+    marginBottom: 16,
   },
   slider: {
     marginTop: 20,

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/__test__/index.test.js

@@ -46,7 +46,9 @@ describe('Test AutoLock', () => {
 
     const instance = tree.root;
     const switchs = instance.findByType(Switch);
-    await switchs.props.onValueChange();
+    await act(async () => {
+      await switchs.props.onValueChange();
+    });
 
     const { buttonEnable, buttonInstant, buttonRelockTiming } =
       getElement(instance);

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { View } from 'react-native';
 import { Slider } from '@miblanchard/react-native-slider';
 import Text from '../../../Text';
@@ -9,7 +9,7 @@ import styles from './AutoLockStyles';
 import t from '../../../../hooks/Common/useTranslations';
 import { Colors } from '../../../../configs';
 
-const AutoLock = memo(() => {
+const AutoLock = () => {
   const [isEnabled, setIsEnabled] = useState(false);
 
   const handleToggleSwitch = useCallback(() => {
@@ -52,6 +52,6 @@ const AutoLock = memo(() => {
       </View>
     </View>
   );
-});
+};
 
 export default AutoLock;

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/__test__/index.test.js

@@ -7,16 +7,7 @@ import { SCProvider } from '../../../../../context';
 import PasscodeList from '../index';
 import { TouchableOpacity } from 'react-native';
 import Routes from '../../../../../utils/Route';
-
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
+import { useNavigation } from '@react-navigation/native';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -27,6 +18,8 @@ const wrapComponent = () => (
 describe('Test SetupGeneratePasscode', () => {
   let tree;
 
+  const mockNavigate = useNavigation().navigate;
+
   beforeEach(() => {
     mockNavigate.mockClear();
   });

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

@@ -52,6 +52,7 @@ const PasscodeList = memo(() => {
             onPress={handleClickButton(item)}
             style={styles.buttonWrapper}
             accessibilityLabel={AccessibilityLabel.PASSCODE_LIST}
+            key={item.code}
           >
             <View>
               <Text style={styles.textCode}>{item.code}</Text>

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

@@ -89,7 +89,7 @@ export default StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 32,
+    paddingBottom: getBottomSpace() || 32,
     paddingTop: 29,
     backgroundColor: Colors.White,
     borderColor: Colors.ShadownTransparent,

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

@@ -1,15 +1,14 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { Switch, View } from 'react-native';
 
 import Text from '../../Text';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { useConfigGlobalState } from '../../../iot/states';
 
 const SwitchButtonTemplate = memo(
-  ({ isOn, triggerAction, actionGroup = {}, isLight = false, doAction }) => {
-    const [_isOn, setIsOn] = useState(isOn);
-
+  ({ actionGroup = {}, isLight = false, doAction }) => {
     const { configuration = {}, id } = actionGroup;
     const {
       action_off_data,
@@ -18,8 +17,13 @@ const SwitchButtonTemplate = memo(
       text_off,
       color_on,
       color_off,
+      config,
     } = configuration;
 
+    const [configValues] = useConfigGlobalState('configValues');
+    const configValue = configValues[config];
+    const [_isOn, setIsOn] = useState(configValue?.value);
+
     const onChangeSwitch = useCallback(() => {
       if (_isOn) {
         setIsOn(false);
@@ -30,6 +34,10 @@ const SwitchButtonTemplate = memo(
       setIsOn(true);
     }, [action_off_data, action_on_data, doAction, _isOn]);
 
+    useEffect(() => {
+      configValue && setIsOn(configValue?.value);
+    }, [configValue]);
+
     return (
       <>
         <View style={styles.barrierControlContainer}>
@@ -37,7 +45,7 @@ const SwitchButtonTemplate = memo(
             trackColor={{ false: color_off, true: color_on }}
             ios_backgroundColor={_isOn ? color_on : color_off}
             onValueChange={onChangeSwitch}
-            value={_isOn}
+            value={!!_isOn}
           />
           <Text
             style={[

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -1,91 +1,122 @@
-import React, { memo, useCallback, useState, useEffect } from 'react';
+import React, {
+  memo,
+  useCallback,
+  useState,
+  useEffect,
+  useMemo,
+  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';
-import SvgBrightness from '../../../assets/images/brightness.svg';
-import { Slider } from '@miblanchard/react-native-slider';
 import { useConfigGlobalState } from '../../iot/states';
 import { DEVICE_TYPE } from '../../configs/Constants';
+import _TextInput from '../Form/TextInput';
+
+const SliderRangeTemplate = memo(
+  ({ actionGroup = {}, doAction, sensor, item }) => {
+    const t = useTranslations();
+    const { configuration = {} } = actionGroup;
+    const [configValues] = useConfigGlobalState('configValues');
+    const {
+      config = undefined,
+      min_value = 0,
+      max_value = 100,
+      action_data,
+    } = configuration;
+    const timeout = useRef(null);
 
-let percentTemp = 0;
-const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
-  const t = useTranslations();
-  const { configuration = {} } = actionGroup;
-  const [configValues] = useConfigGlobalState('configValues');
-  const { config = undefined } = configuration;
+    const getPercent = useCallback(() => {
+      return configValues[config]?.value || 0;
+    }, [config, configValues]);
 
-  const getPercent = useCallback(() => {
-    const { value } = configValues[config] || { value: 0 };
-    return value;
-  }, [config, configValues]);
+    const [valueBrightness, setValueBrightness] = useState(getPercent());
+
+    const onChangeBrightness = useCallback(
+      async (value) => {
+        const value_brness = value[0];
+        await doAction(
+          action_data,
+          JSON.stringify({ value_brness: value_brness, value: value_brness })
+        );
+      },
+      [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 [valueBrightness, setValueBrightness] = useState(getPercent());
-  const [isFirstTime, setIsFirstTime] = useState(true);
+    const getTextInputValue = useMemo(() => {
+      if ([null, undefined, NaN].includes(valueBrightness)) {
+        return 0;
+      }
 
-  const onChangeBrightness = useCallback(
-    async (value) => {
-      const value_brness = value[0];
-      await doAction(
-        configuration?.action_data,
-        JSON.stringify({ value_brness: value_brness, value: value_brness })
-      );
-    },
-    [configuration?.action_data, doAction]
-  );
+      return valueBrightness;
+    }, [valueBrightness]);
 
-  useEffect(() => {
-    percentTemp = valueBrightness;
-  }, [valueBrightness]);
+    const onValueChange = (value) => setValueBrightness(value[0]);
 
-  useEffect(() => {
-    const { value } = configValues[config] || { value: 0 };
-    if (value && isFirstTime) {
+    const onInputChange = (value) => {
+      if (isNaN(value)) {
+        return;
+      }
       setValueBrightness(value);
-      setIsFirstTime(false);
-      return;
-    }
-    if (sensor?.device_type !== DEVICE_TYPE.LG_THINQ) {
-      if (percentTemp !== value) {
-        setValueBrightness(value);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
       }
-      percentTemp = value;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [configValues]);
+      if (value !== '') {
+        timeout.current = setTimeout(() => {
+          doAction(
+            action_data,
+            JSON.stringify({
+              value_brness: parseInt(value),
+              value: parseInt(value),
+            })
+          );
+        }, 300);
+      }
+    };
 
-  return (
-    <View style={styles.viewBrightness}>
-      <View style={styles.LeftBrightness}>
-        <SvgBrightness />
+    return (
+      <View style={styles.viewBrightness}>
         <Text type="H4" style={styles.LeftTextBrightness}>
-          {actionGroup.title || t('brightness')}
+          {actionGroup?.title || item?.label || t('brightness')}
         </Text>
-      </View>
-      <View style={styles.RightBrightness}>
-        <Slider
-          containerStyle={styles.slider}
-          value={valueBrightness}
-          onSlidingComplete={onChangeBrightness}
-          onValueChange={setValueBrightness}
-          step={1}
-          minimumValue={0}
-          maximumValue={100}
-          thumbTintColor={Colors.Gray3}
-          minimumTrackTintColor={Colors.Primary}
-          maximumTrackTintColor={Colors.Gray4}
-          trackStyle={styles.trackSlider}
-          thumbStyle={styles.thumbSlider}
-        />
-        <View style={styles.valuePercent}>
-          <Text type="Label" style={styles.textValuePercent}>
-            {`${valueBrightness}%`}
-          </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}
+            minimumTrackTintColor={Colors.Primary}
+            maximumTrackTintColor={Colors.Gray3}
+            trackStyle={styles.trackSlider}
+            thumbStyle={styles.thumbSlider}
+            containerStyle={styles.slider}
+          />
+          <_TextInput
+            keyboardType="numeric"
+            style={styles.text}
+            wrapStyle={styles.wrapInputStyle}
+            textInputStyle={styles.textInputStyle}
+            value={getTextInputValue.toString()}
+            onChange={onInputChange}
+          />
         </View>
       </View>
-    </View>
-  );
-});
+    );
+  }
+);
 
 export default SliderRangeTemplate;

package/src/commons/ActionGroup/SliderRangeTemplateStyles.js

@@ -6,44 +6,44 @@ export default StyleSheet.create({
     marginBottom: 16,
     marginHorizontal: 16,
     padding: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-around',
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderRadius: 10,
   },
-  slider: {
-    width: 131,
-  },
   trackSlider: {
-    height: 8,
-    borderRadius: 30,
+    height: 4,
   },
   thumbSlider: {
-    backgroundColor: Colors.Primary,
-    width: 20,
-    height: 20,
-  },
-  valuePercent: {
-    width: 45,
-    flexDirection: 'row',
-    paddingLeft: 16,
+    backgroundColor: Colors.White,
+    borderColor: Colors.Primary,
+    borderWidth: 3,
   },
-  textValuePercent: {
-    width: 45,
-  },
-  LeftBrightness: {
-    flex: 1,
+  wrap: {
     flexDirection: 'row',
     alignItems: 'center',
+    width: '100%',
+    flexWrap: 'nowrap',
   },
-  LeftTextBrightness: {
-    paddingTop: 4,
-    paddingLeft: 8,
+  text: {
+    marginTop: 8,
   },
-  RightBrightness: {
-    flexDirection: 'row',
-    alignItems: 'center',
+  slider: {
+    width: '77%',
+  },
+  wrapInputStyle: {
+    marginTop: 0,
+    width: '23%',
+  },
+  textInputStyle: {
+    marginTop: 0,
+    marginLeft: 10,
+    borderRadius: 4,
+    paddingTop: 5,
+    paddingBottom: 5,
+    paddingHorizontal: 20,
+
+    shadowColor: Colors.Gray13,
+    borderColor: Colors.Gray5,
+    borderWidth: 1,
   },
 });

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -38,6 +38,7 @@ const GridItem = ({ item, doAction, sensor }) => {
   } = item;
   const buttonOnOffStyle = active ? buttonStyle.ON : buttonStyle.OFF;
   const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
+
   const doActionAndWatchConfig = useCallback(
     (actionData) => {
       let data = null;
@@ -76,9 +77,10 @@ const GridItem = ({ item, doAction, sensor }) => {
       case 'air-dry-1':
         return <SvgAirDry width={24} height={24} />;
       default:
-        return () => <></>;
+        return null;
     }
   }, [icon]);
+
   return (
     <View
       accessibilityLabel={AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM}
@@ -142,6 +144,7 @@ const StatesGridActionTemplate = ({
       >
         {options.map((item, index) => (
           <GridItem
+            key={index}
             item={item}
             index={index}
             doAction={doAction}

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

@@ -19,7 +19,7 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-describe('Test NumberUpDownActionTemplate', () => {
+describe('Test NumberUpDownTemplate', () => {
   const action_data = {
     color: '#00979D',
     command_prefer_over_bluetooth: true,

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

@@ -77,6 +77,7 @@ describe('Test OnOffTemplate', () => {
 
   beforeEach(() => {
     watchMultiConfigs.mockClear();
+    jest.useFakeTimers();
 
     actionGroup = {
       template: 'OnOffSimpleActionTemplate',
@@ -265,7 +266,9 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await template[0].props.triggerAction();
     });
-    jest.runAllTimers();
+    await act(async () => {
+      jest.runAllTimers();
+    });
     expect(mockDoAction).toHaveBeenCalledWith(action_data, {
       value: 0,
       state: 0,

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

@@ -6,6 +6,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { useConfigGlobalState } from '../../../iot/states';
 import { Slider } from '@miblanchard/react-native-slider';
+import _TextInput from '../../Form/TextInput';
 
 jest.mock('../../../iot/Monitor');
 const mockDoAction = jest.fn();
@@ -36,6 +37,7 @@ describe('Test SliderRangeTemplate', () => {
   };
 
   beforeEach(() => {
+    jest.useFakeTimers();
     watchMultiConfigs.mockClear();
     mockDoAction.mockClear();
     actionGroup = {
@@ -83,4 +85,58 @@ describe('Test SliderRangeTemplate', () => {
     const silderRange = instance.findByType(Slider);
     expect(silderRange.props.value).toBe(50);
   });
+
+  it('test change input invalid number', async () => {
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        5: {
+          value: 50,
+        },
+      },
+      jest.fn(),
+    ]);
+    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
+
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const textInput = instance.findByType(_TextInput);
+    expect(textInput.props.value).toEqual('50');
+
+    await act(async () => {
+      await textInput.props.onChange('aaaa');
+    });
+    expect(textInput.props.value).toEqual('50'); // not change value
+  });
+
+  it('test change input called doAction', async () => {
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        5: {
+          value: 50,
+        },
+      },
+      jest.fn(),
+    ]);
+    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
+
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+
+    const instance = wrapper.root;
+    let textInput = instance.findByType(_TextInput);
+
+    await act(async () => {
+      await textInput.props.onChange('60');
+    });
+    await act(async () => {
+      jest.runAllTimers();
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      action_data,
+      JSON.stringify({ value_brness: 60, value: 60 })
+    );
+  });
 });

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

@@ -20,7 +20,7 @@ describe('Test StatesGridActionTemplate', () => {
     configuration: {
       options: [
         {
-          config: true,
+          config: 1,
           active: false,
           text: 'item 1',
           icon_kit_data: 'icon_kit_data',
@@ -28,7 +28,7 @@ describe('Test StatesGridActionTemplate', () => {
           action_data: mockActionData,
         },
         {
-          config: false,
+          config: 2,
           active: true,
           text: 'item 2',
           icon_kit_data: 'icon_kit_data',

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

@@ -1,13 +1,23 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
+import { Switch } from 'react-native';
 
 import { mockSCStore } from '../../../context/mockStore';
 import { SCProvider } from '../../../context';
 import SwitchButtonTemplate from '../OnOffTemplate/SwitchButtonTemplate';
+import { useConfigGlobalState } from '../../../iot/states';
 
-const wrapComponent = (actionGroup, mockDoAction) => (
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: jest.fn(),
+}));
+
+const wrapComponent = (actionGroup, mockDoAction, isOn) => (
   <SCProvider initState={mockSCStore({})}>
-    <SwitchButtonTemplate actionGroup={actionGroup} doAction={mockDoAction} />
+    <SwitchButtonTemplate
+      actionGroup={actionGroup}
+      doAction={mockDoAction}
+      isOn={isOn}
+    />
   </SCProvider>
 );
 
@@ -50,37 +60,64 @@ describe('Test SwitchButtonTemplate', () => {
       action_off_data: action_off_data,
       icon_off: 'caret-up',
       text_off: 'OFF',
+      config: 1,
     },
   };
   let wrapper;
 
-  const assertRender = async () => {
+  const assertRender = async (state) => {
     const mockDoAction = jest.fn();
 
     await act(async () => {
-      wrapper = create(wrapComponent(actionGroup, mockDoAction));
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction));
     });
 
     const renderJson = wrapper.toJSON();
+    const switchButton = wrapper.root.findByType(Switch);
+
     expect(renderJson[1].props?.visible).toEqual(false);
     expect(renderJson[1]?.type).toEqual('Modal');
+    expect(switchButton.props.value).toEqual(state);
   };
 
   it('render state on', async () => {
-    await assertRender(true, 'ON');
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        1: {
+          value: 1,
+        },
+      },
+      jest.fn(),
+    ]);
+    await assertRender(true);
   });
 
   it('render state off', async () => {
-    await assertRender(false, 'OFF');
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        1: {
+          value: 0,
+        },
+      },
+      jest.fn(),
+    ]);
+    await assertRender(false);
   });
 
   const assertActionCall = async (state, action_data) => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = create(wrapComponent(actionGroup, mockDoAction));
+      wrapper = await create(wrapComponent(actionGroup, 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 () => {