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

package/src/commons/Modal/ModalBottom.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { ModalCustom } from '.';
+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';
+
+const ModalBottom = ({
+  isVisible,
+  title = '',
+  modalStyle,
+  wrapStyle,
+  children,
+  cancelColor = Colors.Primary,
+  removeColor = Colors.Primary,
+  onClose,
+  onRemove,
+}) => {
+  const t = useTranslations();
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useStatusBarPreview(
+      isVisible ? Colors.BlackTransparent5 : Colors.TextTransparent
+    );
+  }, [isVisible]);
+
+  return (
+    <ModalCustom isVisible={isVisible} style={[styles.modal, modalStyle]}>
+      <View style={[styles.wrap, wrapStyle]}>
+        <Text type="H4" semibold color={Colors.Gray9} style={styles.padding16}>
+          {title}
+        </Text>
+        <View style={styles.viewSeparated} />
+        {children}
+        <View style={styles.viewBottom}>
+          <Text onPress={onClose} type="H4" semibold color={cancelColor}>
+            {t('cancel')}
+          </Text>
+          <Text onPress={onRemove} type="H4" semibold color={removeColor}>
+            {t('remove')}
+          </Text>
+        </View>
+      </View>
+    </ModalCustom>
+  );
+};
+
+export default ModalBottom;

package/src/commons/Modal/ModalFullVideo.js

@@ -13,6 +13,7 @@ const ModalFullVideo = ({
   data,
   resizeMode = 'cover',
   onClose,
+  uri,
 }) => {
   useEffect(() => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -27,7 +28,7 @@ const ModalFullVideo = ({
     >
       <View style={styles.modalContent}>
         <MediaPlayerDetail
-          uri={data?.uri}
+          uri={uri || data?.uri}
           thumbnail={data?.thumbnail}
           style={styles.camera}
           wrapStyles={styles.wrapStyles}

package/src/commons/Modal/Styles/ModalBottomStyles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+    padding: 0,
+  },
+  wrap: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: 24,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    paddingTop: 24,
+    backgroundColor: Colors.White,
+  },
+  padding16: {
+    paddingHorizontal: 16,
+  },
+  viewSeparated: {
+    height: 1,
+    backgroundColor: Colors.Gray4,
+    marginTop: 16,
+  },
+  viewBottom: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 67,
+    marginTop: 8,
+  },
+});

package/src/commons/Modal/__test__/ModalBottom.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from 'react-native';
+import { create } from 'react-test-renderer';
+import { act } from 'react-test-renderer';
+import { ModalBottom } from '../';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (isVisible) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ModalBottom isVisible={isVisible} />
+  </SCProvider>
+);
+
+describe('Test ModalBottom', () => {
+  let tree;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  it('Test render with isVisible', async () => {
+    await act(() => {
+      tree = create(wrapComponent(true));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(5);
+  });
+
+  it('Test render without isVisible', async () => {
+    await act(() => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(5);
+  });
+});

package/src/commons/Modal/index.js

@@ -1,4 +1,5 @@
 import ModalCustom from './ModalCustom';
 import ModalFullVideo from './ModalFullVideo';
+import ModalBottom from './ModalBottom';
 
-export { ModalCustom, ModalFullVideo };
+export { ModalCustom, ModalFullVideo, ModalBottom };

package/src/commons/NavBar/index.js

@@ -10,7 +10,7 @@ import Station from '../../screens/Unit/Station';
 import MenuActionMore from '../MenuActionMore';
 
 const NavBar = memo(
-  ({ listMenuItem, listStation, onSnapToItem, indexStation }) => {
+  ({ listMenuItem, listStation, onSnapToItem, indexStation, style }) => {
     const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
       usePopover();
     const refMenuAction = useRef();
@@ -18,7 +18,7 @@ const NavBar = memo(
 
     return (
       <>
-        <View style={styles.wrap}>
+        <View style={[styles.wrap, style]}>
           <View style={styles.wrapTitle}>
             <Station
               listStation={listStation}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import { RowItem } from '../index';
+
+describe('Test RowUser', () => {
+  let tree;
+  test('create RowUser', () => {
+    act(() => {
+      tree = renderer.create(<RowItem text="Text" type="primary" />);
+    });
+    const instance = tree.root;
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons.length).toEqual(1);
+  });
+});

package/src/commons/RowItem/index.js

@@ -0,0 +1,61 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs';
+import Text from '../Text';
+import styles from './styles';
+import { CircleView } from '../CircleView';
+
+const arrColor = [
+  Colors.GeekBlue3,
+  Colors.Purple3,
+  Colors.Orange3,
+  Colors.Volcano3,
+  Colors.Blue9,
+  Colors.Green3,
+  Colors.Cyan2,
+];
+export const RowItem = memo(
+  ({
+    index = 0,
+    type, //primary | disable | undefined
+    leftIcon,
+    text,
+    subtext,
+    subtextColor = Colors.Gray6,
+    rightComponent,
+    onPress,
+  }) => {
+    const circleColorTypes = {
+      primary: 'primary',
+      disable: 'disable',
+      noneBG: 'none',
+    };
+    const circleColor = type
+      ? circleColorTypes[type]
+      : arrColor[index % arrColor.length];
+
+    return (
+      <>
+        <View style={styles.wrapItem}>
+          <TouchableOpacity onPress={onPress} disabled={type === 'disable'}>
+            <View style={styles.Border}>
+              <View style={styles.paddingLeft16}>
+                <CircleView size={40} backgroundColor={circleColor} center>
+                  {leftIcon}
+                </CircleView>
+              </View>
+              <View style={styles.columeFlex}>
+                <Text style={styles.titleName}> {text}</Text>
+                <Text style={styles.status}> {subtext}</Text>
+              </View>
+              {!!rightComponent && (
+                <View style={styles.endFlex}>{rightComponent}</View>
+              )}
+            </View>
+          </TouchableOpacity>
+        </View>
+      </>
+    );
+  }
+);

package/src/commons/RowItem/styles.js

@@ -0,0 +1,53 @@
+import { Colors } from '../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  columeFlex: {
+    paddingLeft: 16,
+    flexDirection: 'column',
+  },
+  rowFlex: {
+    flexDirection: 'row',
+  },
+  endFlex: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    paddingRight: 16,
+  },
+  Border: {
+    display: 'flex',
+    width: '100%',
+    borderWidth: 0,
+    borderColor: Colors.Gray4,
+    borderBottomWidth: 1,
+    borderStyle: 'solid',
+    flexDirection: 'row',
+    paddingTop: 16,
+    paddingBottom: 16,
+  },
+  titleName: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    color: Colors.Gray9,
+  },
+  status: {
+    fontSize: 12,
+    lineHeight: 20,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    color: Colors.Gray7,
+  },
+  container: {
+    paddingTop: 0,
+  },
+  paddingLeft16: {
+    paddingLeft: 16,
+  },
+});

package/src/commons/SelectActionCard/SelectActionStyles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrapcontent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  card: {
+    marginTop: 16,
+    marginBottom: 0,
+  },
+  mt4: {
+    marginTop: 4,
+  },
+});

package/src/commons/SelectActionCard/index.js

@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+
+import { Card } from '../CardShadow';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './SelectActionStyles';
+
+const SelectActionCard = memo(({ title, action, onPress }) => {
+  return (
+    <Card style={styles.card}>
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.wrapcontent}>
+          <View>
+            <Text type="Body" color={Colors.Gray7}>
+              {title}
+            </Text>
+            <Text bold type="H4" style={styles.mt4}>
+              {action}
+            </Text>
+          </View>
+          <IconOutline name="right" size={20} />
+        </View>
+      </TouchableOpacity>
+    </Card>
+  );
+});
+
+export default SelectActionCard;

package/src/commons/Sharing/DevicePermissionsCheckbox.js

@@ -1,6 +1,6 @@
 import React, { memo, useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import RadioCircle from '../RadioCircle';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -30,6 +30,7 @@ const DevicePermissionsCheckbox = ({
   selectedIndexes,
   onSelectIndexes,
 }) => {
+  const t = useTranslations();
   const sensorHasData = !!sensor.read_configs.length || !!sensor.actions.length;
 
   const [selectIndexes, setSelectIndexes] = useState(selectedIndexes); // [-1] all , [1, 2 ,3] some , [] no

package/src/commons/Sharing/MemberList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 
@@ -12,6 +12,8 @@ const MemberList = ({
   currentUserId, //user is using app
   onPressRemove,
 }) => {
+  const t = useTranslations();
+
   return (
     <View style={styles.box}>
       {!!dataMember.length &&

package/src/commons/Sharing/RowMember.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -19,6 +19,7 @@ const arrColor = [
 ];
 const RowMember = memo(
   ({ member, index, ownerId, currentUserId, onPressRemove }) => {
+    const t = useTranslations();
     const canRemoveMember = useMemo(
       () => ownerId === currentUserId && member.id !== ownerId,
       [currentUserId, member.id, ownerId]
@@ -30,7 +31,7 @@ const RowMember = memo(
           : member.id === currentUserId
           ? [t('me'), Colors.Gray6]
           : ['', ''],
-      [currentUserId, member.id, ownerId]
+      [currentUserId, member.id, ownerId, t]
     );
     const paddingBottom = role ? 16 : 23;
 

package/src/commons/Sharing/StationDevicePermissions.js

@@ -1,7 +1,7 @@
 import React, { memo, useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import SensorIcon from '../../../assets/images/Device/sensor.svg';
@@ -14,6 +14,7 @@ import DoorInactive from '../../../assets/images/Device/door-inactive.svg';
 import DevicePermissionsCheckbox from './DevicePermissionsCheckbox';
 
 const StationDevicePermissions = memo(({ dataStation, onselectSensor }) => {
+  const t = useTranslations();
   const [listChosen, setListChosen] = useState({}); // { sensorId : indexConfigChoosen , ...}
   const [expandedIndex, setExpandedIndex] = useState(-1);
 

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -14,82 +14,86 @@ import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
 import Text from '../../commons/Text';
 
-const WrapHeaderScrollable = memo(
-  ({
-    children,
-    title,
-    subTitle,
-    rightComponent,
-    loading = false,
-    onRefresh,
-    styleScrollView,
-    contentContainerStyle,
-    onLoadMore,
-    headerAniStyle,
-  }) => {
-    const animatedScrollYValue = useRef(new Animated.Value(0)).current;
-    const [loadingMore, setLoadingMore] = useState(false);
-    const loadMore = useCallback(() => {
-      if (onLoadMore) {
-        setLoadingMore(true);
-        onLoadMore(() => setLoadingMore(false));
-      }
-    }, [onLoadMore]);
+const WrapHeaderScrollable = ({
+  children,
+  title,
+  subTitle,
+  rightComponent,
+  loading = false,
+  onRefresh,
+  styleScrollView,
+  contentContainerStyle,
+  onLoadMore,
+  headerAniStyle,
+  headerAniCenterStyle,
+  onGoBack,
+}) => {
+  const animatedScrollYValue = useRef(new Animated.Value(0)).current;
+  const [loadingMore, setLoadingMore] = useState(false);
+  const loadMore = useCallback(() => {
+    if (onLoadMore) {
+      setLoadingMore(true);
+      onLoadMore(() => setLoadingMore(false));
+    }
+  }, [onLoadMore]);
 
-    return (
-      <SafeAreaView style={[styles.container, headerAniStyle]}>
-        <HeaderAni
-          scrollY={animatedScrollYValue}
-          title={title}
-          rightComponent={rightComponent}
-          headerStyle={headerAniStyle}
-        />
-        <Animated.ScrollView
-          scrollEventThrottle={16}
-          onScroll={Animated.event(
-            [{ nativeEvent: { contentOffset: { y: animatedScrollYValue } } }],
-            {
-              useNativeDriver: false,
-            }
-          )}
-          style={[styles.scrollView, styleScrollView]}
-          contentContainerStyle={[
-            styles.contentContainerStyle,
-            contentContainerStyle && contentContainerStyle,
-          ]}
-          refreshControl={
-            <RefreshControl
-              refreshing={loading}
-              onRefresh={onRefresh}
-              progressViewOffset={heightHeader}
-            />
+  return (
+    <SafeAreaView style={[styles.container, headerAniStyle]}>
+      <HeaderAni
+        scrollY={animatedScrollYValue}
+        title={title}
+        rightComponent={rightComponent}
+        headerAniCenterStyle={headerAniCenterStyle}
+        headerStyle={headerAniStyle}
+        onLeft={onGoBack}
+      />
+      <Animated.ScrollView
+        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: animatedScrollYValue } } }],
+          {
+            useNativeDriver: false,
           }
-          contentInset={{
-            top: heightHeader - (isIphoneX() ? 32 : 0),
-          }}
-          contentOffset={{
-            y: -heightHeader,
-          }}
-          showsVerticalScrollIndicator={false}
-          onMomentumScrollEnd={loadMore}
-        >
-          {!!subTitle && (
-            <Text type={'Body'} color={Colors.Gray8} style={styles.subTitle}>
-              {subTitle}
-            </Text>
-          )}
-          {children}
-          {loadingMore && (
-            <View style={styles.bottomLoading}>
-              <ActivityIndicator size="small" color={Colors.Black} />
-            </View>
-          )}
-        </Animated.ScrollView>
-      </SafeAreaView>
-    );
-  }
-);
-export default WrapHeaderScrollable;
+        )}
+        style={[styles.scrollView, styleScrollView]}
+        contentContainerStyle={[
+          styles.contentContainerStyle,
+          contentContainerStyle && contentContainerStyle,
+        ]}
+        refreshControl={
+          <RefreshControl
+            refreshing={loading}
+            onRefresh={onRefresh}
+            progressViewOffset={heightHeader}
+          />
+        }
+        contentInset={{
+          top: heightHeader - (isIphoneX() ? 32 : 0),
+        }}
+        contentOffset={{
+          y: -heightHeader,
+        }}
+        showsVerticalScrollIndicator={false}
+        onMomentumScrollEnd={loadMore}
+      >
+        {!!subTitle && (
+          <Text type={'Body'} color={Colors.Gray8} style={styles.subTitle}>
+            {subTitle}
+          </Text>
+        )}
+        {children}
+        {loadingMore && (
+          <View style={styles.bottomLoading}>
+            <ActivityIndicator size="small" color={Colors.Black} />
+          </View>
+        )}
+      </Animated.ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default memo(WrapHeaderScrollable);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

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

@@ -2,6 +2,18 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 import DevicePermissionsCheckbox from '../DevicePermissionsCheckbox';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (sensor, mockFunction) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DevicePermissionsCheckbox
+      sensor={sensor}
+      selectedIndexes={[1]}
+      onSelectIndexes={mockFunction}
+    />
+  </SCProvider>
+);
 
 jest.mock('axios');
 describe('Test DevicePermissionsCheckbox', () => {
@@ -13,15 +25,9 @@ describe('Test DevicePermissionsCheckbox', () => {
     actions: [13],
   };
   const mockFunction = jest.fn();
-  test('test create DevicePermissionsCheckbox', () => {
-    act(() => {
-      tree = renderer.create(
-        <DevicePermissionsCheckbox
-          sensor={sensor}
-          selectedIndexes={[1]}
-          onSelectIndexes={mockFunction}
-        />
-      );
+  test('test create DevicePermissionsCheckbox', async () => {
+    await act(() => {
+      tree = renderer.create(wrapComponent(sensor, mockFunction));
     });
     const instance = tree.root;
     const dropdownButtons = instance.findAllByType(TouchableOpacity);