@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

package/src/commons/Explore/__test__/LocationItem.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import LocationItem from '../LocationItem';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (item, mockFunc, margin) => (
+  <SCProvider initState={mockSCStore({})}>
+    <LocationItem item={item} onPress={mockFunc} margin={margin} />
+  </SCProvider>
+);
+
+let tree;
+describe('Test LocationItem', () => {
+  test('render LocationItem', async () => {
+    const item = { background: '', name: '', address: '', distance: '' };
+    const margin = { marginLeft: 10 };
+    const mockFunc = jest.fn();
+    await act(() => {
+      tree = renderer.create(wrapComponent(item, mockFunc, margin));
+    });
+    const instance = tree.root;
+    const button = instance.findAllByType(TouchableOpacity);
+    expect(button.length).toEqual(1);
+    act(() => {
+      button[0].props.onPress();
+    });
+    expect(mockFunc).toBeCalledTimes(1);
+  });
+});

package/src/commons/Header/HeaderCustom.js

@@ -1,10 +1,11 @@
-import React, { memo, useRef } from 'react';
+import React, { memo, useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
 import { Icon } from '@ant-design/react-native';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const HeaderCustom = ({
   title = '',
@@ -15,15 +16,29 @@ const HeaderCustom = ({
   isShowSeparator = false,
   isDisableRefresh = false,
   titleStyles,
+  isShowClose = false,
+  onGoBack,
+  onClose,
 }) => {
+  const t = useTranslations();
   const { goBack } = useNavigation();
   const refMenuAction = useRef();
   const refAddAction = useRef();
   const handleAddAction = () => {};
   const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
+  const handleGoback = () => {
+    onGoBack && onGoBack();
+    goBack();
+  };
+
+  const handleClose = useCallback(() => {
+    onClose ? onClose() : alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <View style={[styles.wrap, isShowSeparator && styles.separator]}>
-      <TouchableOpacity style={styles.buttonBack} onPress={goBack}>
+      <TouchableOpacity style={styles.buttonBack} onPress={handleGoback}>
         <Image source={Images.arrowBack} style={styles.iconBack} />
       </TouchableOpacity>
       <View style={styles.wrapTitle}>
@@ -65,6 +80,11 @@ const HeaderCustom = ({
             <Icon name={'plus'} size={27} color={Colors.Black} />
           </TouchableOpacity>
         )}
+        {isShowClose && (
+          <TouchableOpacity style={styles.buttonAdd} onPress={handleClose}>
+            <Icon name={'close'} size={24} color={Colors.Black} />
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );

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

@@ -1,6 +1,6 @@
 import { Colors } from '../../../configs';
-import { getStatusBarHeight } from '../../../configs/Constants';
 import { StyleSheet } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 export default StyleSheet.create({
   wrap: {
@@ -10,7 +10,7 @@ export default StyleSheet.create({
     paddingLeft: 7,
     paddingRight: 10,
     paddingBottom: 6,
-    paddingTop: getStatusBarHeight(),
+    paddingTop: getStatusBarHeight() + 10,
   },
   separator: {
     borderBottomWidth: 0.5,

package/src/commons/Header/__test__/HeaderCT.test.js

@@ -3,10 +3,18 @@ import { TouchableOpacity } from 'react-native';
 import { act } from '@testing-library/react-hooks';
 import { create } from 'react-test-renderer';
 import { HeaderCustom } from '..';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockOnRefresh = jest.fn();
 const mockShowPopoverWithRef = jest.fn();
 
+const wrapComponent = (defaultProps) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HeaderCustom {...defaultProps} />
+  </SCProvider>
+);
+
 describe('Test HeaderCustom', () => {
   let tree;
   let defaultProps = {
@@ -18,7 +26,7 @@ describe('Test HeaderCustom', () => {
 
   it('Test not render right', () => {
     act(() => {
-      tree = create(<HeaderCustom {...defaultProps} />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
@@ -28,7 +36,7 @@ describe('Test HeaderCustom', () => {
   it('Test render right', () => {
     defaultProps = { ...defaultProps, isShowRight: true };
     act(() => {
-      tree = create(<HeaderCustom {...defaultProps} />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
@@ -45,10 +53,10 @@ describe('Test HeaderCustom', () => {
 
   it('Test render without props', () => {
     act(() => {
-      tree = create(<HeaderCustom />);
+      tree = create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const TouchableOpacityElement = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacityElement).toHaveLength(1);
+    expect(TouchableOpacityElement).toHaveLength(3);
   });
 });

package/src/commons/HeaderAni/index.js

@@ -8,12 +8,19 @@ import Text from '../../commons/Text';
 import { Colors } from '../../configs';
 
 const default_height = 44;
-const paddingIos = getStatusBarHeight();
+const paddingIos = getStatusBarHeight() + 10;
 export const title_height = 44;
 export const heightHeader = default_height + title_height + paddingIos;
 
 const HeaderAni = memo(
-  ({ scrollY, onLeft, title, rightComponent, headerStyle }) => {
+  ({
+    scrollY,
+    onLeft,
+    title,
+    rightComponent,
+    headerStyle,
+    headerAniCenterStyle,
+  }) => {
     const { goBack } = useNavigation();
     const onPressLeft = useCallback(() => {
       if (onLeft) {
@@ -22,6 +29,9 @@ const HeaderAni = memo(
         goBack();
       }
     }, [goBack, onLeft]);
+
+    const headerX = headerAniCenterStyle ? 75 : 16;
+
     const titleTransformY = scrollY.interpolate({
       inputRange: [0, 2 * title_height],
       outputRange: [0, -title_height],
@@ -29,7 +39,7 @@ const HeaderAni = memo(
     });
     const titleTransformX = scrollY.interpolate({
       inputRange: [0, 2 * title_height],
-      outputRange: [0, 16],
+      outputRange: [0, headerX],
       extrapolate: 'clamp',
     });
     const titleScale = scrollY.interpolate({
@@ -44,9 +54,18 @@ const HeaderAni = memo(
     });
 
     const titleMarginRight = rightComponent ? 80 : 0;
+    const checkHeaderAniCenterStyle = headerAniCenterStyle
+      ? styles.containerNoneBorder
+      : styles.container;
 
     return (
-      <Animated.View style={[styles.container, { height: headerHeightAnim }]}>
+      <Animated.View
+        style={[
+          checkHeaderAniCenterStyle,
+          headerStyle,
+          { height: headerHeightAnim },
+        ]}
+      >
         <View style={styles.header}>
           <TouchableOpacity style={styles.btnBack} onPress={onPressLeft}>
             <Icon name={'left'} size={27} color={Colors.Gray9} />
@@ -90,7 +109,8 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    // zIndex: 2,
+    alignItems: 'center',
+    zIndex: 2,
   },
   btnBack: {
     height: default_height,
@@ -115,6 +135,17 @@ const styles = StyleSheet.create({
     zIndex: 3,
     paddingTop: paddingIos,
   },
+  containerNoneBorder: {
+    backgroundColor: Colors.White,
+    width: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 100,
+    zIndex: 3,
+    paddingTop: paddingIos,
+  },
   content: {
     position: 'absolute',
     width: '100%',

package/src/commons/HorizontalPicker/index.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useRef, useState, memo } from 'react';
+import { View, Animated } from 'react-native';
+import { Constants, Colors } from '../../configs';
+import Text from '../Text';
+import styles from './styles';
+
+let isCanChangeValue = false;
+
+const HorizontalPicker = ({
+  width = Constants.width,
+  onChangeValue,
+  minimum = 0,
+  maximum = 100,
+  segmentSpacing = 20,
+  step = 10,
+  stepColor = Colors.Gray7,
+  stepHeight = 40,
+  stepWidth = 2,
+  normalColor = Colors.Gray7,
+  normalHeight = 20,
+  normalWidth = 2,
+  style,
+  value = 0,
+}) => {
+  const scrollViewRef = useRef();
+  const [scrollX] = useState(new Animated.Value(0));
+
+  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
+          style={{
+            width: spacerWidth,
+          }}
+        />
+        {data.map((i, index) => {
+          const isStep = i % step === 0;
+          return (
+            <View key={index}>
+              <View
+                key={i}
+                // eslint-disable-next-line react-native/no-inline-styles
+                style={{
+                  backgroundColor: isStep ? stepColor : normalColor,
+                  height: isStep ? stepHeight : normalHeight,
+                  width: isStep ? stepWidth : normalWidth,
+                  borderRadius: isStep ? stepWidth / 2 : normalWidth / 2,
+                  marginRight: i === maximum ? 0 : segmentSpacing,
+                }}
+              />
+              {isStep && (
+                <Text
+                  color={Colors.Gray7}
+                  style={[styles.time, time < 10 && styles.time2]}
+                >
+                  {time++}
+                </Text>
+              )}
+            </View>
+          );
+        })}
+        <View
+          style={{
+            width: (width - stepWidth) / 2,
+          }}
+        />
+      </View>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maximum, minimum, time]);
+
+  useEffect(() => {
+    const scrollListener = scrollX.addListener(({ value }) => {
+      isCanChangeValue && onChangeValue && onChangeValue(value);
+    });
+    return () => scrollX.removeListener(scrollListener);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, isCanChangeValue, scrollViewRef]);
+
+  useEffect(() => {
+    return () => (isCanChangeValue = false);
+  }, []);
+
+  return (
+    <View style={[styles.container, style]}>
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        horizontal
+        contentContainerStyle={styles.contentContainerStyle}
+        bounces={false}
+        showsHorizontalScrollIndicator={false}
+        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: { x: scrollX },
+              },
+            },
+          ],
+          { useNativeDriver: true }
+        )}
+      >
+        {renderTime}
+      </Animated.ScrollView>
+
+      <View style={[styles.indicator]} pointerEvents="none">
+        <View style={styles.childIndicator} />
+      </View>
+    </View>
+  );
+};
+
+export default memo(HorizontalPicker);

package/src/commons/HorizontalPicker/styles.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  contentContainerStyle: {
+    justifyContent: 'flex-end',
+  },
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  time: {
+    position: 'absolute',
+    top: 20,
+    width: 50,
+    fontSize: 10,
+    marginLeft: 1,
+  },
+  time2: {
+    left: 2,
+  },
+  indicator: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  step: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  normal: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    marginTop: 4,
+  },
+  container: {
+    height: 80,
+    marginTop: 80,
+  },
+  childrenIndicator: {
+    width: 12,
+    height: 80,
+    borderRadius: 8,
+    backgroundColor: Colors.Primary,
+  },
+  childIndicator: {
+    width: 12,
+    height: 80,
+    backgroundColor: Colors.Primary,
+    borderRadius: 8,
+  },
+});

package/src/commons/ImagePicker/__test__/ImagePicker.test.js

@@ -3,6 +3,23 @@ import renderer, { act } from 'react-test-renderer';
 
 import ImagePicker from '../index';
 import ButtonPopup from '../../ButtonPopup';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (options) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ImagePicker
+      showImagePicker={true}
+      setShowImagePicker={''}
+      setImageUrl={'setImageUrl'}
+      optionsCapture={options}
+      optionsSelect={{
+        mediaType: 'photo',
+        quality: 1,
+      }}
+    />
+  </SCProvider>
+);
 
 describe('Test ImagePicker', () => {
   let tree;
@@ -13,7 +30,7 @@ describe('Test ImagePicker', () => {
   test('create ImagePicker', () => {
     Platform.OS = 'android';
     act(() => {
-      tree = renderer.create(<ImagePicker />);
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);
@@ -29,18 +46,7 @@ describe('Test ImagePicker', () => {
       saveToPhotos: true,
     };
     act(() => {
-      tree = renderer.create(
-        <ImagePicker
-          showImagePicker={true}
-          setShowImagePicker={''}
-          setImageUrl={'setImageUrl'}
-          optionsCapture={options}
-          optionsSelect={{
-            mediaType: 'photo',
-            quality: 1,
-          }}
-        />
-      );
+      tree = renderer.create(wrapComponent(options));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(ButtonPopup);

package/src/commons/ImagePicker/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Platform, PermissionsAndroid } from 'react-native';
 import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import ButtonPopup from '../ButtonPopup';
 
@@ -12,6 +12,8 @@ const ImagePicker = ({
   optionsCapture,
   optionsSelect,
 }) => {
+  const t = useTranslations();
+
   const requestCameraPermission = useCallback(async () => {
     if (Platform.OS === 'android') {
       try {

package/src/commons/MediaPlayer/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
 import { Colors, Images } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
@@ -93,6 +93,7 @@ const PreviewPlayer = memo(({ uri, start }) => {
 });
 
 const MediaPlayer = memo(({ uri, previewUri, thumbnail, style }) => {
+  const t = useTranslations();
   const [started, setStarted] = useState(false);
   const [paused, setPaused] = useState(true);
 

package/src/commons/MediaPlayerDetail/__test__/MediaPlayerDetail.test.js

@@ -3,20 +3,26 @@ import { act, create } from 'react-test-renderer';
 import { TouchableOpacity, Text } from 'react-native';
 import MediaPlayerDetail from '../index';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <MediaPlayerDetail
+      uri={'rtsp://admin:hd111111:1111111/Streaming/Channels/101/'}
+      key={'camera-1'}
+      thumbnail={{ uri: 'https://abc.com/image.png' }}
+      cameraName={'cameraName'}
+    />
+  </SCProvider>
+);
 
 describe('Test MediaPlayerDetail', () => {
   let wrapper;
 
   test('MediaPlayerDetail render when onTap setPause', async () => {
     await act(async () => {
-      wrapper = await create(
-        <MediaPlayerDetail
-          uri={'rtsp://admin:hd111111:1111111/Streaming/Channels/101/'}
-          key={'camera-1'}
-          thumbnail={{ uri: 'https://abc.com/image.png' }}
-          cameraName={'cameraName'}
-        />
-      );
+      wrapper = await create(wrapComponent());
     });
     const instance = wrapper.root;
     const buttons = instance.findAllByType(TouchableOpacity);

package/src/commons/MediaPlayerDetail/index.js

@@ -2,13 +2,14 @@ import React, { memo, useCallback, useState, useEffect } from 'react';
 import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
 import { Colors, Constants, Images } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
 import styles from './MediaPlayerDetailStyles';
 import FImage from '../../commons/FImage';
+import { TESTID } from '../../configs/Constants';
 
 const MediaPlayerDetail = memo(
   ({
@@ -25,6 +26,7 @@ const MediaPlayerDetail = memo(
     goToPlayBack,
     isShowFullScreenIcon = false,
   }) => {
+    const t = useTranslations();
     const [paused, setPaused] = useState(isPaused);
     const onTapPause = useCallback(() => {
       setPaused(false);
@@ -150,6 +152,7 @@ const MediaPlayerDetail = memo(
           <TouchableOpacity
             onPress={onFullScreen}
             style={styles.iconFullScreen}
+            testID={TESTID.SUB_UNIT_FULL_CAMERA}
           >
             <Image source={Images.fullscreen} />
           </TouchableOpacity>

package/src/commons/MenuActionAddnew/__test__/MenuActionAddNew.test.js

@@ -1,41 +1,32 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import { ImageButton, MenuActionAddnew } from '../../index';
 
+const wrapComponent = (dataActions) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MenuActionAddnew dataActions={dataActions} />
+  </SCProvider>
+);
+
 const item = (id) => ({ id, image: '', text: '' });
 
 describe('Test MenuActionAddNew', () => {
   const dataActions = [item(1), item(2)];
   let wrapper;
 
-  test('create MenuActionAddNew', () => {
-    act(() => {
-      wrapper = create(<MenuActionAddnew dataActions={dataActions} />);
-    });
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  test('create MenuActionAddNew list data > 3', () => {
-    dataActions.push(item(3));
-    act(() => {
-      wrapper = create(<MenuActionAddnew dataActions={dataActions} />);
-    });
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
   test('onItemClick MenuActionAddNew', () => {
     const mockFunc = jest.fn();
     act(() => {
-      wrapper = create(
-        <MenuActionAddnew dataActions={dataActions} onItemClick={mockFunc} />
-      );
+      wrapper = create(wrapComponent(dataActions));
     });
     const instance = wrapper.root;
     const imageButtons = instance.findAllByType(ImageButton);
     act(() => {
       imageButtons[0].props.onPress();
     });
-    expect(imageButtons.length).toEqual(3);
-    expect(mockFunc.mock.calls.length).toBe(1);
+    expect(imageButtons.length).toEqual(2);
+    expect(mockFunc.mock.calls.length).toBe(0);
   });
 });

package/src/commons/MenuActionAddnew/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 import Modal from 'react-native-modal';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../Text';
@@ -10,6 +10,7 @@ import ImageButton from '../ImageButton';
 const keyExtractor = (item) => item.id.toString();
 const MenuActionAddnew = memo(
   ({ visible, hideModal, dataActions, onItemClick }) => {
+    const t = useTranslations();
     const numColumns = dataActions.length < 3 ? dataActions.length : 3;
 
     const onPress = useCallback(