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

package/src/commons/HorizontalPicker/index.js

@@ -1,11 +1,9 @@
-import React, { useEffect, useMemo, useRef, useState, memo } from 'react';
-import { View, Animated } from 'react-native';
-import { Constants, Colors } from '../../configs';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, View } from 'react-native';
+import { Colors, Constants } from '../../configs';
 import Text from '../Text';
 import styles from './styles';
 
-let isCanChangeValue = false;
-
 const HorizontalPicker = ({
   width = Constants.width,
   onChangeValue,
@@ -24,14 +22,40 @@ const HorizontalPicker = ({
 }) => {
   const scrollViewRef = useRef();
   const [scrollX] = useState(new Animated.Value(0));
+  const [max, setMax] = useState(maximum);
+
+  const data = useMemo(() => {
+    const array = [];
+    const numberOfSteps = Math.floor((max - minimum) / step);
+    for (let i = 0; i <= numberOfSteps; i++) {
+      array.push(minimum + i * step);
+    }
+    return array;
+  }, [max, minimum, step]);
+
+  useEffect(() => {
+    if (minimum >= maximum) {
+      setMax(minimum + 10 * step);
+    } else {
+      setMax(maximum);
+    }
+  }, [minimum, maximum, step]);
+
+  useEffect(() => {
+    if (maximum) {
+      return;
+    }
+    setMax((prev) => {
+      if (value + 10 * step > prev) {
+        return value + 10 * step;
+      }
+      return prev;
+    });
+  }, [maximum, value, setMax, step]);
 
   const spacerWidth = (width - stepWidth) / 2;
-  let time = useMemo(() => minimum, [minimum]);
 
   const renderTime = useMemo(() => {
-    const data = [...Array(maximum - minimum + 1).keys()].map(
-      (i) => i + minimum
-    );
     return (
       <View style={[styles.wrap]}>
         <View
@@ -40,9 +64,9 @@ const HorizontalPicker = ({
           }}
         />
         {data.map((i, index) => {
-          const isStep = i % step === 0;
+          const isStep = index % 10 === 0;
           return (
-            <View key={index}>
+            <View key={index} accessibilityLabel={`x-${index}`}>
               <View
                 key={i}
                 // eslint-disable-next-line react-native/no-inline-styles
@@ -51,15 +75,12 @@ const HorizontalPicker = ({
                   height: isStep ? stepHeight : normalHeight,
                   width: isStep ? stepWidth : normalWidth,
                   borderRadius: isStep ? stepWidth / 2 : normalWidth / 2,
-                  marginRight: i === maximum ? 0 : segmentSpacing,
+                  marginRight: i === data.length - 1 ? 0 : segmentSpacing,
                 }}
               />
               {isStep && (
-                <Text
-                  color={Colors.Gray7}
-                  style={[styles.time, time < 10 && styles.time2]}
-                >
-                  {time++}
+                <Text color={Colors.Gray7} style={[styles.time, styles.time2]}>
+                  {i}
                 </Text>
               )}
             </View>
@@ -72,34 +93,40 @@ const HorizontalPicker = ({
         />
       </View>
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [maximum, minimum, time]);
+  }, [
+    data,
+    normalColor,
+    normalHeight,
+    normalWidth,
+    segmentSpacing,
+    spacerWidth,
+    stepColor,
+    stepHeight,
+    stepWidth,
+    width,
+  ]);
 
   useEffect(() => {
     const scrollListener = scrollX.addListener(({ value: scrollValue }) => {
-      isCanChangeValue && onChangeValue && onChangeValue(scrollValue);
+      if (!onChangeValue) {
+        return;
+      }
+      const newValue = Math.round(scrollValue / step / 12.8) * step;
+      onChangeValue(newValue + minimum);
     });
     return () => scrollX.removeListener(scrollListener);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [minimum, onChangeValue, scrollX, step]);
 
   useEffect(() => {
-    if (!isCanChangeValue && scrollViewRef && scrollViewRef.current) {
-      const to1 = setTimeout(() => {
-        scrollViewRef.current.scrollTo({ x: value * 128 });
-        clearTimeout(to1);
-      }, 300);
-      const to2 = setTimeout(() => {
-        isCanChangeValue = true;
-        clearTimeout(to2);
-      }, 1000);
-    }
+    setTimeout(() => {
+      scrollViewRef.current &&
+        scrollViewRef.current.scrollTo({
+          x: value * step * 12.8,
+          animated: false,
+        });
+    }, 10);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, isCanChangeValue, scrollViewRef]);
-
-  useEffect(() => {
-    return () => (isCanChangeValue = false);
-  }, []);
+  }, [scrollViewRef.current]); // this is preload default data, run only once
 
   return (
     <View style={[styles.container, style]}>
@@ -131,4 +158,4 @@ const HorizontalPicker = ({
   );
 };
 
-export default memo(HorizontalPicker);
+export default HorizontalPicker;

package/src/commons/IconComponent/index.js

@@ -12,6 +12,7 @@ const IconComponent = memo(
     size = 30,
     iconSize = 30,
     style,
+    antIconStyle,
     color,
     colorInActive,
     active,
@@ -70,7 +71,7 @@ const IconComponent = memo(
           name={displayIcon}
           color={colorIcon}
           size={iconSize}
-          style={[extraStyle, style]}
+          style={[extraStyle, antIconStyle || style]}
         />
       );
     } else {
@@ -84,7 +85,7 @@ const IconComponent = memo(
           name={iconCT}
           color={colorIcon}
           size={iconSize}
-          style={[extraStyle, style]}
+          style={[extraStyle, antIconStyle || style]}
         />
       );
     }

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

@@ -4,6 +4,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { TouchableOpacity } from 'react-native';
 import MediaPlay from '../index';
+import VLCPlayer from 'react-native-vlc-media-player/VLCPlayer';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -17,9 +18,9 @@ describe('Test MediaPlayer', () => {
   beforeAll(() => {
     jest.useFakeTimers();
     props = {
-      uri: 'uri',
+      uri: 'http://uri',
       previewUri: 'previewUri',
-      thumbnail: 'thumbnail',
+      thumbnail: { uri: 'thumbnail' },
       background: 'background',
     };
   });
@@ -28,11 +29,15 @@ describe('Test MediaPlayer', () => {
     await act(async () => {
       tree = await create(wrapComponent(props));
     });
+    await act(async () => {
+      jest.runOnlyPendingTimers();
+    });
     const instance = tree.root;
     const pauseButton = instance.findByType(TouchableOpacity);
     await act(async () => {
       await pauseButton.props.onPress();
     });
-    jest.runAllTimers();
+    const player = instance.findByType(VLCPlayer);
+    expect(player.props.paused).toBeFalsy();
   });
 });

package/src/commons/MediaPlayer/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import VLCPlayer from 'react-native-vlc-media-player/VLCPlayer';
 
@@ -117,12 +117,16 @@ const MediaPlayer = memo(
       setPaused((p) => !p);
     }, []);
 
-    const imageSource =
-      thumbnail || thumbnail?.uri
-        ? thumbnail
-        : background
-        ? background
-        : Images.BgDevice;
+    const imageSource = useMemo(() => {
+      if (thumbnail) {
+        return thumbnail;
+      }
+      if (background) {
+        return background;
+      }
+      return Images.BgDevice;
+    }, [background, thumbnail]);
+
     return (
       <View style={styles.wrap}>
         <View style={styles.loadingWrap}>

package/src/commons/MenuActionMore/index.js

@@ -1,11 +1,12 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { TouchableOpacity, ScrollView } from 'react-native';
-import Popover from '../Popover';
+import { PopoverMode } from 'react-native-popover-view';
 
+import Popover from '../Popover';
 import styles from './MenuActionMoreStyles';
 import Text from '../Text';
 import { AccessibilityLabel } from '../../configs/Constants';
-import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
+import { setStatusBarPreview } from '../../hooks/Common/useStatusBar';
 import { Colors } from '../../configs';
 
 const MenuActionMore = memo(
@@ -20,6 +21,7 @@ const MenuActionMore = memo(
     idLabelPopover,
     idLabelScrollView,
     idLabelItem = AccessibilityLabel.SUB_UNIT_NAME,
+    mode = PopoverMode.RN_MODAL,
   }) => {
     const [isDisable, setIsDisable] = useState(false);
     const onPress = useCallback(
@@ -36,8 +38,7 @@ const MenuActionMore = memo(
     );
 
     useEffect(() => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useStatusBarPreview(
+      setStatusBarPreview(
         isVisible ? Colors.BlackTransparent5 : Colors.TextTransparent
       );
     }, [isVisible]);
@@ -51,6 +52,7 @@ const MenuActionMore = memo(
         isVisible={isVisible}
         arrowStyle={styles.wrap}
         accessibilityLabel={idLabelPopover}
+        mode={mode}
       >
         <ScrollView
           scrollIndicatorInsets={{ right: 1 }}

package/src/commons/Modal/ModalBottom.js

@@ -5,7 +5,7 @@ import styles from './Styles/ModalBottomStyles';
 import Text from '../Text';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
-import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
+import { setStatusBarPreview } from '../../hooks/Common/useStatusBar';
 
 const ModalBottom = ({
   isVisible,
@@ -21,8 +21,7 @@ const ModalBottom = ({
   const t = useTranslations();
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useStatusBarPreview(
+    setStatusBarPreview(
       isVisible ? Colors.BlackTransparent5 : Colors.TextTransparent
     );
   }, [isVisible]);

package/src/commons/Modal/ModalCustom.js

@@ -1,12 +1,11 @@
 import React, { useEffect } from 'react';
 import Modal from 'react-native-modal';
 import { Colors } from '../../configs';
-import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
+import { setStatusBarPreview } from '../../hooks/Common/useStatusBar';
 
 const ModalCustom = (props) => {
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useStatusBarPreview(
+    setStatusBarPreview(
       props.isVisible ? Colors.BlackTransparent3_5 : Colors.TextTransparent
     );
   }, [props.isVisible]);

package/src/commons/NavBar/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useRef } from 'react';
+import React, { useRef } from 'react';
 import { Icon } from '@ant-design/react-native';
 import { View, TouchableOpacity } from 'react-native';
 
@@ -9,55 +9,53 @@ import { AccessibilityLabel } from '../../configs/Constants';
 import Station from '../../screens/Unit/Station';
 import MenuActionMore from '../MenuActionMore';
 
-const NavBar = memo(
-  ({
-    listMenuItem,
-    listStation,
-    onSnapToItem,
-    indexStation,
-    style,
-    idLabelScrollView,
-    idLabelItem,
-    idLabelIconBars,
-  }) => {
-    const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
-      usePopover();
-    const refMenuAction = useRef();
-    const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
+const NavBar = ({
+  listMenuItem,
+  listStation,
+  onSnapToItem,
+  indexStation,
+  style,
+  idLabelScrollView,
+  idLabelItem,
+  idLabelIconBars,
+}) => {
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+  const refMenuAction = useRef();
+  const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
 
-    return (
-      <>
-        <View style={[styles.wrap, style]}>
-          <View style={styles.wrapTitle}>
-            <Station
-              listStation={listStation}
-              onSnapToItem={onSnapToItem}
-              indexStation={indexStation}
-            />
-          </View>
-          <TouchableOpacity
-            style={styles.btnBack}
-            onPress={handleShowMenuAction}
-            ref={refMenuAction}
-            accessibilityLabel={idLabelIconBars}
-          >
-            <Icon name={'bars'} size={19} color={Colors.Black} />
-          </TouchableOpacity>
+  return (
+    <>
+      <View style={[styles.wrap, style]}>
+        <View style={styles.wrapTitle}>
+          <Station
+            listStation={listStation}
+            onSnapToItem={onSnapToItem}
+            indexStation={indexStation}
+          />
         </View>
-        <MenuActionMore
-          isVisible={showingPopover}
-          hideMore={hidePopover}
-          listMenuItem={listMenuItem}
-          childRef={childRef}
-          onItemClick={onSnapToItem}
-          isTextCenter={false}
-          idLabelPopover={AccessibilityLabel.NAVBAR_MENU_ACTION_MORE}
-          wrapStyle={styles.wrapStyle}
-          idLabelScrollView={idLabelScrollView}
-          idLabelItem={idLabelItem}
-        />
-      </>
-    );
-  }
-);
+        <TouchableOpacity
+          style={styles.btnBack}
+          onPress={handleShowMenuAction}
+          ref={refMenuAction}
+          accessibilityLabel={idLabelIconBars}
+        >
+          <Icon name={'bars'} size={19} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        onItemClick={onSnapToItem}
+        isTextCenter={false}
+        idLabelPopover={AccessibilityLabel.NAVBAR_MENU_ACTION_MORE}
+        wrapStyle={styles.wrapStyle}
+        idLabelScrollView={idLabelScrollView}
+        idLabelItem={idLabelItem}
+      />
+    </>
+  );
+};
 export default NavBar;

package/src/commons/OneTapTemplate/NumberUpDownActionTemplate.js

@@ -106,7 +106,7 @@ const NumberUpDownActionTemplate = ({ device, item = {}, onSelectAction }) => {
       >
         <View style={styles.popoverStyle}>
           <View>
-            <Text type="H4" bold style={styles.textwithline}>
+            <Text type="H4" bold style={styles.textWithLine}>
               {t('set_temperature')}
             </Text>
             <View style={styles.modalContent}>

package/src/commons/OneTapTemplate/NumberUpDownActionTemplateStyles.js

@@ -7,7 +7,7 @@ export default StyleSheet.create({
     backgroundColor: Colors.White,
     borderRadius: 10,
   },
-  textwithline: {
+  textWithLine: {
     paddingLeft: 16,
     paddingRight: 16,
     paddingBottom: 16,

package/src/commons/OneTapTemplate/OptionsDropdownActionTemplate.js

@@ -77,7 +77,7 @@ const OptionsDropdownActionTemplate = ({ device, item, onSelectAction }) => {
       >
         <View style={styles.popoverStyle}>
           <View>
-            <Text type="H4" bold style={styles.textwithline}>
+            <Text type="H4" bold style={styles.textWithLine}>
               {title ? title : t('options')}
             </Text>
             <View style={styles.wrapContent}>

package/src/commons/OneTapTemplate/OptionsDropdownActionTemplateStyles.js

@@ -7,7 +7,7 @@ export default StyleSheet.create({
     backgroundColor: Colors.White,
     borderRadius: 10,
   },
-  textwithline: {
+  textWithLine: {
     paddingLeft: 16,
     paddingRight: 16,
     paddingBottom: 16,

package/src/commons/OneTapTemplate/StatesGridActionTemplate.js

@@ -37,7 +37,7 @@ const ActionItem = ({
       onPress={handleSelectAction}
       accessibilityLabel={AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM}
     >
-      <Text type="H4" style={styles.textwithline}>
+      <Text type="H4" style={styles.textWithLine}>
         {item.text}
       </Text>
     </TouchableOpacity>

package/src/commons/OneTapTemplate/StatesGridActionTemplateStyles.js

@@ -11,7 +11,7 @@ export default StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
   },
-  textwithline: {
+  textWithLine: {
     paddingBottom: 16,
     paddingTop: 16,
     borderBottomWidth: 1,

package/src/commons/PreventAccess/index.js

@@ -15,7 +15,7 @@ const PreventAccess = memo(({ headerBodyText, visible, hidePreventAccess }) => {
   const dataText = useMemo(() => {
     return {
       headerText: t('note'),
-      bodyText: t('This {name} was removed!', {
+      bodyText: t('This_name_was_removed', {
         name: headerBodyText ? headerBodyText : '',
       }),
       endOfText: t('back'),

package/src/commons/Sharing/StationDevicePermissions.js

@@ -1,4 +1,4 @@
-import React, { memo, useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -13,7 +13,7 @@ import DoorInactive from '../../../assets/images/Device/door-inactive.svg';
 
 import DevicePermissionsCheckbox from './DevicePermissionsCheckbox';
 
-const StationDevicePermissions = memo(({ dataStation, onselectSensor }) => {
+const StationDevicePermissions = ({ dataStation, onselectSensor }) => {
   const t = useTranslations();
   const [listChosen, setListChosen] = useState({}); // { sensorId : indexConfigChoosen , ...}
   const [expandedIndex, setExpandedIndex] = useState(-1);
@@ -122,12 +122,12 @@ const StationDevicePermissions = memo(({ dataStation, onselectSensor }) => {
           <Text style={styles.textEmpty}>{t('no_device')}</Text>
         )}
         {dataStation.sensors.map((device, index) => (
-          <RowDevice sensor={device} index={index} />
+          <RowDevice sensor={device} index={index} key={device.id} />
         ))}
       </View>
     </>
   );
-});
+};
 
 const styles = StyleSheet.create({
   box: {

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -1,11 +1,11 @@
-import React, { useRef, useCallback, useState, memo } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import {
-  RefreshControl,
-  StyleSheet,
   Animated,
-  View,
   Platform,
+  RefreshControl,
   SafeAreaView,
+  StyleSheet,
+  View,
 } from 'react-native';
 import { ActivityIndicator } from '@ant-design/react-native';
 import { isIphoneX } from 'react-native-iphone-x-helper';
@@ -109,7 +109,7 @@ const WrapHeaderScrollable = ({
   );
 };
 
-export default memo(WrapHeaderScrollable);
+export default WrapHeaderScrollable;
 
 const styles = StyleSheet.create({
   container: {

package/src/commons/Sharing/__test__/DevicePermissionsCheckbox.test.js

@@ -20,8 +20,8 @@ describe('Test DevicePermissionsCheckbox', () => {
   let sensor = {
     icon: 'caret-down',
     id: 10,
-    read_configs: [1],
-    actions: [13],
+    read_configs: [{ id: 1 }],
+    actions: [{ id: 13 }],
   };
   const mockFunction = jest.fn();
   it('test create DevicePermissionsCheckbox', async () => {

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -89,21 +89,17 @@ const ItemOneTap = memo(
       const iconKit = script?.icon_kit;
       if (iconKit) {
         return <FImage source={{ uri: iconKit }} style={styles.iconSensor} />;
-      } else if (type === AUTOMATE_TYPE.ONE_TAP) {
+      }
+      if (type === AUTOMATE_TYPE.ONE_TAP) {
         return <OneTap />;
-      } else if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
+      }
+      if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
         return <ValueChange />;
-      } else if (
-        [
-          AUTOMATE_TYPE.EVENT,
-          AUTOMATE_TYPE.EVENT_ACTION,
-          AUTOMATE_TYPE.EVENT_SENSOR,
-        ].includes(type)
-      ) {
+      }
+      if ([AUTOMATE_TYPE.EVENT].includes(type)) {
         return <Event />;
-      } else {
-        return <Schedule />;
       }
+      return <Schedule />;
     };
     const activateAt = activate_at
       ? timeDifference(new Date(), moment(activate_at), true)

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -8,6 +8,7 @@ import SubUnitAutomate from '..';
 import {
   AUTOMATE_TYPE,
   AccessibilityLabel,
+  AUTOMATE_TABS,
 } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
@@ -50,7 +51,7 @@ let data = {
           },
         },
       ],
-      type: AUTOMATE_TYPE.ONE_TAP,
+      type: AUTOMATE_TABS.SCENARIO,
     },
   ],
 };
@@ -78,7 +79,11 @@ describe('test Item', () => {
       await item[0].props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewOneTap, {
-      type: 'one_tap',
+      automate: {
+        type: 'one_tap',
+        unit: undefined,
+      },
+      closeScreen: undefined,
     });
     mockedNavigate.mockClear();
 
@@ -198,8 +203,8 @@ describe('test Item', () => {
     data.type = 'schedule';
     data.listAutomate = [
       {
-        text: AUTOMATE_TYPE.AUTOMATION,
-        type: AUTOMATE_TYPE.AUTOMATION,
+        text: AUTOMATE_TABS.AUTOMATION,
+        type: AUTOMATE_TABS.AUTOMATION,
         data: [
           {
             id: 1,
@@ -233,8 +238,8 @@ describe('test Item', () => {
       await item[0].props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewAutoSmart, {
-      type: AUTOMATE_TYPE.VALUE_CHANGE,
-      unit: undefined,
+      automate: { type: AUTOMATE_TYPE.VALUE_CHANGE, unit: undefined },
+      closeScreen: undefined,
     });
     mockedNavigate.mockClear();