@eohjsc/react-native-smart-city 0.3.85 → 0.3.86

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.85",
+  "version": "0.3.86",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -108,6 +108,7 @@
     "@formatjs/intl-pluralrules": "^3.4.7",
     "@invertase/react-native-apple-authentication": "^1.1.2",
     "@messageformat/core": "^3.0.0",
+    "@miblanchard/react-native-slider": "^2.2.0",
     "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/cameraroll": "^4.0.0",
@@ -179,6 +180,7 @@
     "react-native-maps-directions": "^1.8.0",
     "react-native-modal": "^11.5.6",
     "react-native-modal-datetime-picker": "^8.9.3",
+    "react-native-new-snap-carousel": "^3.9.3",
     "react-native-onesignal": "^4.3.1",
     "react-native-pager-view": "^5.4.1",
     "react-native-parallax-scroll-view": "^0.21.3",
@@ -190,7 +192,6 @@
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
     "react-native-screens": "^2.9.0",
-    "react-native-snap-carousel": "4.0.0-beta.5",
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
     "react-native-toast-message": "^2.1.1",

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

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useState } from 'react';
 import { View } from 'react-native';
-import Slider from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 import Text from '../../../Text';
 import { HeaderCustom } from '../../../Header';
 import ButtonWrapper from './ButtonWrapper';

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -5,7 +5,7 @@ import styles from './SliderRangeTemplateStyles';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import SvgBrightness from '../../../assets/images/brightness.svg';
-import Slider from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 import { useConfigGlobalState } from '../../iot/states';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
@@ -17,14 +17,8 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   const { config = undefined } = configuration;
 
   const getPercent = useCallback(() => {
-    if (config) {
-      const configValue = configValues[config] || {};
-      const { value = 0 } = configValue;
-      if (value) {
-        return value;
-      }
-    }
-    return 0;
+    const { value } = configValues[config] || { value: 0 };
+    return value;
   }, [config, configValues]);
 
   const [valueBrightness, setValueBrightness] = useState(getPercent());
@@ -32,9 +26,10 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
 
   const onChangeBrightness = useCallback(
     async (value) => {
+      const value_brness = value[0];
       await doAction(
         configuration?.action_data,
-        JSON.stringify({ value_brness: value, value: value })
+        JSON.stringify({ value_brness: value_brness, value: value_brness })
       );
     },
     [configuration?.action_data, doAction]
@@ -45,8 +40,7 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   }, [valueBrightness]);
 
   useEffect(() => {
-    const configValue = configValues[config] || {};
-    const { value = 0 } = configValue;
+    const { value } = configValues[config] || { value: 0 };
     if (value && isFirstTime) {
       setValueBrightness(value);
       setIsFirstTime(false);
@@ -71,7 +65,7 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
       </View>
       <View style={styles.RightBrightness}>
         <Slider
-          style={styles.slider}
+          containerStyle={styles.slider}
           value={valueBrightness}
           onSlidingComplete={onChangeBrightness}
           onValueChange={setValueBrightness}

package/src/commons/ActionGroup/SliderRangeTemplateStyles.js

@@ -15,7 +15,6 @@ export default StyleSheet.create({
   },
   slider: {
     width: 131,
-    transform: [{ scaleY: 2 }],
   },
   trackSlider: {
     height: 8,

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

@@ -5,7 +5,7 @@ import SliderRangeTemplate from '../SliderRangeTemplate';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { useConfigGlobalState } from '../../../iot/states';
-import SliderRange from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 
 jest.mock('../../../iot/Monitor');
 const mockDoAction = jest.fn();
@@ -55,10 +55,10 @@ describe('Test SliderRangeTemplate', () => {
       wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
     const instance = wrapper.root;
-    const silderRange = instance.findAllByType(SliderRange);
+    const silderRange = instance.findAllByType(Slider);
     expect(silderRange).toHaveLength(1);
     await act(async () => {
-      await silderRange[0].props.onSlidingComplete(50);
+      await silderRange[0].props.onSlidingComplete([50]);
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
@@ -80,7 +80,7 @@ describe('Test SliderRangeTemplate', () => {
       wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
     const instance = wrapper.root;
-    const silderRange = instance.findByType(SliderRange);
+    const silderRange = instance.findByType(Slider);
     expect(silderRange.props.value).toBe(50);
   });
 });

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

@@ -14,7 +14,7 @@ import Text from '../../Text';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import Slider from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 import { WheelColorPicker } from '../ColorPickerTemplate';
 import RadioCircle from '../../RadioCircle';
 

package/src/commons/Automate/__test__/ItemAutomate.test.js

@@ -1,24 +1,46 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import Text from '../../Text';
 import ItemAutomate from '../ItemAutomate';
 
-const wrapComponent = (type = 'one_tap') => (
+const wrapComponent = (rest) => (
   <SCProvider initState={mockSCStore({})}>
-    <ItemAutomate type={type} />
+    <ItemAutomate {...rest} />
   </SCProvider>
 );
 
 describe('Test ItemAutomate', () => {
   let tree;
+  let defaultProps = {
+    type: 'one_tap',
+  };
   it('Test render', async () => {
     await act(async () => {
-      tree = await create(wrapComponent());
+      tree = await create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts[0].props.children).toEqual('Launch One-Tap');
   });
+
+  it('Test render TouchableOpacity', async () => {
+    const mockOnPress = jest.fn();
+    defaultProps = {
+      type: 'one_tap',
+      onPress: mockOnPress,
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(defaultProps));
+    });
+    const instance = tree.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      touchableOpacities[0].props.onPress();
+    });
+    expect(mockOnPress).toBeCalledTimes(1);
+  });
 });

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
+
 import MyUnit from '..';
 import MyUnitDevice from '../../../../screens/Unit/components/MyUnitDevice';
 import { AccessibilityLabel } from '../../../../configs/Constants';
@@ -8,12 +9,27 @@ import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
+import Routes from '../../../../utils/Route';
+import { Action } from '../../../../context/actionType';
 
 const mock = new MockAdapter(api.axiosInstance);
 
 const mockedNavigate = jest.fn();
 const mockedDispatch = jest.fn();
 
+const mockSetAction = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useContext: () => ({
+      stateData: mockSCStore({
+        app: { isDeleteUnitSuccessFully: true },
+      }),
+      setAction: mockSetAction,
+    }),
+  };
+});
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -104,5 +120,26 @@ describe('Test MyUnit', () => {
     const instance = tree.root;
     const devices = instance.findAllByType(MyUnitDevice);
     expect(devices).toHaveLength(2);
+
+    const button = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-0`,
+    });
+    await act(async () => {
+      await button.props.onPress(data[0]);
+    });
+    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+      params: { unitId: 1 },
+      screen: Routes.UnitDetail,
+    });
+  });
+
+  it('Test isDeleteUnitSuccessFully', async () => {
+    jest.useFakeTimers();
+    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    jest.runAllTimers();
+    expect(mockSetAction).toBeCalledWith(Action.RESET_DELETE_UNIT_ACTION);
   });
 });

package/src/commons/Dashboard/MyUnit/index.js

@@ -5,8 +5,9 @@ import React, {
   useState,
   useContext,
   useMemo,
+  useRef,
 } from 'react';
-import { View, Image, TouchableOpacity, Dimensions } from 'react-native';
+import { View, TouchableOpacity, Dimensions } from 'react-native';
 import {
   useNavigation,
   useIsFocused,
@@ -14,35 +15,41 @@ import {
 } from '@react-navigation/native';
 import NetInfo from '@react-native-community/netinfo';
 import { BleManager } from 'react-native-ble-plx';
-import Carousel from 'react-native-snap-carousel';
-
 import { API, Colors, Images } from '../../../configs';
 import Text from '../../Text';
 import { fetchWithCache } from '../../../utils/Apis/axios';
+
 import styles from './styles';
 import { Section } from '../../Section';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
 import { useWatchConfigs, useBluetoothConnection } from '../../../hooks/IoT';
-import { SCContext } from '../../../context';
+import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
+
+import Carousel from 'react-native-new-snap-carousel';
 import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
 import { STORAGE_KEY } from '../../../utils/Storage';
 import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
+import FImage from '../../FImage';
 
 let screenWidth = Dimensions.get('window').width;
 
 const bleManager = new BleManager();
 
 const MyUnit = ({ refreshing }) => {
+  const carouselRef = useRef();
   const t = useTranslations();
   const isFocused = useIsFocused();
   const navigation = useNavigation();
   const [myUnits, setMyUnits] = useState([]);
   const [slideIndex, setSlideIndex] = useState(0);
   const { setAction } = useContext(SCContext);
+  const isDeleteUnitSuccessFully = useSCContextSelector(
+    (state) => state.app.isDeleteUnitSuccessFully
+  );
 
   const {
     permissionsRequested: bluetoothPermRequested,
@@ -136,9 +143,13 @@ const MyUnit = ({ refreshing }) => {
             accessibilityLabel={`${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-${index}`}
           >
             <View style={styles.overlay} />
-            <Image
+            <FImage
               style={styles.bgMyUnit}
-              source={{ uri: item.background }}
+              source={
+                item?.background
+                  ? { uri: item.background }
+                  : Images.unitDefaultBackground
+              }
               defaultSource={Images.BgUnit}
               resizeMode="cover"
             />
@@ -158,6 +169,16 @@ const MyUnit = ({ refreshing }) => {
       preloadImagesFromUnits(myUnits, STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS);
   }, [myUnits]);
 
+  useEffect(() => {
+    if (isDeleteUnitSuccessFully) {
+      const to = setTimeout(() => {
+        carouselRef?.current?.snapToItem();
+        setAction(Action.RESET_DELETE_UNIT_ACTION);
+      }, 60);
+      return () => clearTimeout(to);
+    }
+  }, [isDeleteUnitSuccessFully, setAction]);
+
   return (
     <>
       <Section style={styles.boxTxtMyUnit}>
@@ -167,6 +188,7 @@ const MyUnit = ({ refreshing }) => {
         <View style={styles.container}>
           {myUnits.length ? (
             <Carousel
+              ref={carouselRef}
               layout={'default'}
               data={myUnits}
               sliderWidth={screenWidth}

package/src/commons/Device/ProgressBar/__test__/ProgressBar.test.js

@@ -44,6 +44,6 @@ describe('Test ProgressBar', () => {
     const texts = instance.findAllByType(Text);
     expect(texts[0].props.children).toBe('Value bar');
     expect(texts[1].props.children).toEqual(['Max value', ': ', 100]);
-    expect(texts[2].props.children).toEqual([10, '%']);
+    expect(texts[2].props.children).toEqual([10, ' ', undefined]);
   });
 });

package/src/commons/Device/ProgressBar/index.js

@@ -13,7 +13,7 @@ const ProgressBar = memo(({ data = [], item }) => {
   const maxValue = useMemo(() => {
     return Number(item?.configuration?.max_value) || 60;
   }, [item?.configuration?.max_value]);
-  const value = data.length ? data[0].value : 0;
+  const { value = 0, measure, unit } = data.length ? data[0] : {};
   const percent = value / maxValue; // a number between 0 and 1
 
   return (
@@ -36,7 +36,9 @@ const ProgressBar = memo(({ data = [], item }) => {
           borderWidth={0}
           borderRadius={10}
         />
-        <Text style={styles.textValue}>{value}%</Text>
+        <Text style={styles.textValue}>
+          {value} {unit || measure}
+        </Text>
       </View>
     </View>
   );

package/src/commons/Device/ProgressBar/styles.js

@@ -12,6 +12,7 @@ export default StyleSheet.create({
     padding: 12,
     borderRadius: 8,
     borderColor: Colors.Gray4,
+    marginBottom: 12,
   },
   textLabel: {
     paddingHorizontal: 16,

package/src/commons/Device/SonosSpeaker/__test__/SonosSpeaker.test.js

@@ -6,7 +6,7 @@ import { mockSCStore } from '../../../../context/mockStore';
 import Text from '../../../Text';
 import SonosSpeaker from '..';
 import { TouchableOpacity } from 'react-native';
-import Slider from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>

package/src/commons/Device/SonosSpeaker/index.js

@@ -2,7 +2,7 @@ import React, { memo, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { Icon } from '@ant-design/react-native';
-import Slider from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 
 import Text from '../../Text';
 import { Colors } from '../../../configs';

package/src/commons/Device/WindSpeed/Anemometer/index.js

@@ -1,12 +1,13 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import Svg, { Path, Text, Circle } from 'react-native-svg';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Text as ReactText } from 'react-native';
 
 import {
   drawArc,
   polarToCartesian,
 } from '../../../UnitSummary/AirQuality/SegmentedRoundDisplay/helper';
 import { Colors, Fonts } from '../../../../configs';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
 
 const { PI } = Math;
 
@@ -16,12 +17,13 @@ const Anemometer = memo(
     width = 240,
     size = 170,
     strokeWidth = 16,
-    numberOfSection = 4,
+    numberOfSection = 2,
     startAngle = -45,
     endAngle = 225,
     txtColor = Colors.Gray8,
     item,
   }) => {
+    const [isShowToolTip, setIsShowToolTip] = useState(false);
     const center = {
       x: size / 2,
       y: size / 2,
@@ -121,6 +123,38 @@ const Anemometer = memo(
       txtColor,
     ]);
 
+    // eslint-disable-next-line no-shadow
+    const handleShowToolTip = (value) => () => setIsShowToolTip(value);
+
+    const valueSize = useMemo(() => {
+      if ([null, undefined, NaN].includes(value)) {
+        return;
+      }
+      if (value.toString().length < 4) {
+        return [56, 16];
+      }
+      if (value.toString().length < 7) {
+        return [35, 10];
+      }
+      if (value.toString().length < 10) {
+        return [26, 6];
+      }
+      return [20, 2];
+    }, [value]);
+
+    const toolTipTranslateX = useMemo(() => {
+      if (value.toString().length < 4) {
+        return -20;
+      }
+      if (value.toString().length < 6) {
+        return -30;
+      }
+      if (value.toString().length < 8) {
+        return -40;
+      }
+      return -50;
+    }, [value]);
+
     return (
       <View style={styles.standard}>
         <View style={styles.wrapOffset}>
@@ -137,6 +171,41 @@ const Anemometer = memo(
             />
           </Svg>
         </View>
+
+        <View style={styles.textValue}>
+          <Svg width={width} height={width} {...viewBox}>
+            <Text
+              fill={Colors.Lime6}
+              fontSize={valueSize[0]}
+              fontWeight="bold"
+              x={width / 2}
+              y={width / 2 + valueSize[1]}
+              textAnchor="middle"
+              fontFamily={Fonts.Regular}
+              onPressIn={handleShowToolTip(true)}
+              onPressOut={handleShowToolTip(false)}
+            >
+              {value.toString().length > 10
+                ? value.toString().substring(0, 10) + '...'
+                : value}
+            </Text>
+          </Svg>
+          {isShowToolTip && (
+            <View
+              style={{
+                ...styles.toolTip,
+                top: width / 2 - 50,
+                left: width / 2,
+                transform: [{ translateX: toolTipTranslateX }],
+              }}
+              accessibilityLabel={AccessibilityLabel.WRAP_TOOL_TIP}
+            >
+              <ReactText style={styles.textToolTip}>{value}</ReactText>
+              <View style={styles.triangle} />
+            </View>
+          )}
+        </View>
+
         <Svg width={width} height={width} {...viewBox}>
           <Path
             x={(width - size) / 2}
@@ -147,17 +216,6 @@ const Anemometer = memo(
             {...{ d, strokeWidth }}
           />
           {textAngles()}
-          <Text
-            fill={Colors.Lime6}
-            fontSize={48}
-            fontWeight="bold"
-            x={width / 2}
-            y={width / 2 + 16}
-            textAnchor="middle"
-            fontFamily={Fonts.Regular}
-          >
-            {value}
-          </Text>
           <Text
             fill={Colors.Gray8}
             fontSize={16}
@@ -186,4 +244,28 @@ const styles = StyleSheet.create({
     position: 'absolute',
     zIndex: 2,
   },
+  textValue: {
+    position: 'absolute',
+    zIndex: 4,
+  },
+  toolTip: {
+    position: 'absolute',
+    paddingHorizontal: 14,
+    backgroundColor: Colors.Black,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+  },
+  textToolTip: {
+    color: Colors.White,
+  },
+  triangle: {
+    position: 'absolute',
+    bottom: -6,
+    borderTopWidth: 6,
+    borderRightWidth: 4,
+    borderLeftWidth: 4,
+    borderRightColor: Colors.TextTransparent,
+    borderLeftColor: Colors.TextTransparent,
+  },
 });