@eohjsc/react-native-smart-city 0.3.27 → 0.3.28

package/index.js

@@ -19,6 +19,7 @@ import MyUnit from './src/commons/Dashboard/MyUnit';
 import SharedUnit from './src/commons/Unit/SharedUnit';
 import { Action } from './src/context/actionType';
 import { withRemoteControl } from './src/hoc';
+import DevModeStack from './src/navigations/Main';
 
 export {
   AddSubUnitStack,
@@ -44,4 +45,5 @@ export {
   SCWrapper,
   Action,
   withRemoteControl,
+  DevModeStack,
 };

package/package.json

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

package/src/commons/CameraDevice/index.js

@@ -17,7 +17,7 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
 
-const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
+const CameraDevice = ({ station, goToPlayBack }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const { setAction } = useContext(SCContext);
@@ -62,7 +62,6 @@ const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
             }}
             key={`camera-device-${device.id}`}
             cameraName={device.configuration.name}
-            handleFullScreen={handleFullScreen}
             goToPlayBack={goToPlayBack(device, { uri: station?.background })}
             width={standardizeWidth}
             height={standardizeHeight}

package/src/commons/ConnectingProcess/DeviceItem/DeviceItem.js

@@ -3,18 +3,26 @@ import { View } from 'react-native';
 import styles from './DeviceItemStyles';
 import FImage from '../../FImage';
 import _TextInput from '../../Form/TextInput';
+import Images from '../../../configs/Images';
 
-const DeviceItem = memo(({ icon, name, setNewName }) => {
-  return (
-    <View style={styles.container}>
-      {!!icon && <FImage source={{ uri: icon }} style={styles.iconSensor} />}
-      <_TextInput
-        value={name}
-        textInputStyle={styles.textItem}
-        onChange={setNewName}
-      />
-    </View>
-  );
-});
+const DeviceItem = memo(
+  ({ icon, name, setNewName, handleSelectionChange, isSelection }) => {
+    return (
+      <View style={styles.container}>
+        <FImage
+          source={icon ? { uri: icon } : Images.deviceIcon}
+          style={styles.iconSensor}
+        />
+        <_TextInput
+          value={name}
+          textInputStyle={styles.textItem}
+          onChange={setNewName}
+          selection={isSelection && { start: 0, end: 0 }}
+          onSelectionChange={handleSelectionChange}
+        />
+      </View>
+    );
+  }
+);
 
 export default DeviceItem;

package/src/commons/ConnectingProcess/DeviceItem/DeviceItemStyles.js

@@ -20,6 +20,8 @@ export default StyleSheet.create({
     elevation: 6,
     paddingLeft: 30,
     paddingRight: 30,
+    display: 'flex',
+    alignItems: 'center',
   },
   iconSensor: {
     width: 32,

package/src/commons/ConnectingProcess/__test__/DeviceItem.test.js

@@ -13,7 +13,7 @@ describe('Test DeviceItem button', () => {
     const instance = tree.root;
     const image = instance.findAllByType(FImage);
     const text = instance.findAllByType(_TextInput);
-    expect(image).toHaveLength(0);
+    expect(image).toHaveLength(1);
     expect(text).toHaveLength(1);
   });
 });

package/src/commons/ConnectingProcess/index.js

@@ -20,6 +20,8 @@ const ConnectingSuccess = ({
   unit_name,
   newName,
   setNewName,
+  isSelection,
+  handleSelectionChange,
 }) => {
   const t = useTranslations();
   return (
@@ -37,6 +39,8 @@ const ConnectingSuccess = ({
         icon={sensor?.icon_kit}
         name={newName}
         setNewName={setNewName}
+        handleSelectionChange={handleSelectionChange}
+        isSelection={isSelection}
       />
     </View>
   );
@@ -61,6 +65,7 @@ const ConnectingProcess = ({ route }) => {
   const [sensor, setSensor] = useState(null);
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
   const [newName, setNewName] = useState('');
+  const [isSelection, setIsSelection] = useState(true);
 
   const connectingDevice = useCallback(async () => {
     setIsLoading(true);
@@ -166,6 +171,10 @@ const ConnectingProcess = ({ route }) => {
     unit_id,
   ]);
 
+  const handleSelectionChange = useCallback(() => {
+    setIsSelection(false);
+  }, []);
+
   useEffect(() => {
     connectingDevice();
   }, [connectingDevice]);
@@ -185,6 +194,8 @@ const ConnectingProcess = ({ route }) => {
             unit_name={unit_name}
             newName={newName}
             setNewName={setNewName}
+            isSelection={isSelection}
+            handleSelectionChange={handleSelectionChange}
           />
         )}
       </View>

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

@@ -124,7 +124,7 @@ const MyUnit = () => {
         </View>
       );
     },
-    [myUnits.length, goToDetail]
+    [myUnits, goToDetail]
   );
 
   return (

package/src/commons/DevMode/Label.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { memo } from 'react';
+import Text from '../Text';
+import styles from './Styles/LabelStyles';
+
+const Label = ({ name = '', style }) => {
+  return <Text style={[styles.label, style]}>{name}</Text>;
+};
+
+export default memo(Label);

package/src/commons/DevMode/Search.js

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { View, Image, TextInput } from 'react-native';
+import { Images } from '../../configs';
+import t from '../../hooks/Common/useTranslations';
+import styles from './Styles/SearchStyles';
+
+const Search = ({ onSearch }) => {
+  return (
+    <View style={styles.wrap}>
+      <Image source={Images.search} style={styles.icon} />
+      <TextInput
+        style={styles.textInput}
+        placeholder={t('what_are_you_looking_for')}
+        onChangeText={onSearch}
+      />
+    </View>
+  );
+};
+
+export default memo(Search);

package/src/commons/DevMode/Styles/LabelStyles.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  label: {
+    fontSize: 28,
+    fontWeight: 'bold',
+  },
+});

package/src/commons/DevMode/Styles/SearchStyles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    marginVertical: 16,
+  },
+  icon: {},
+  textInput: {
+    flex: 1,
+    height: 36,
+    marginLeft: 5,
+  },
+});

package/src/commons/DevMode/index.js

@@ -0,0 +1,3 @@
+import Label from './Label';
+
+export { Label };

package/src/commons/Form/TextInput.js

@@ -27,6 +27,8 @@ const _TextInput = ({
   selectionColor,
   borderBottomOnly,
   testID,
+  selection,
+  onSelectionChange,
 }) => {
   const errorStyle = !!errorText && styles.errorWrap;
   return (
@@ -64,6 +66,8 @@ const _TextInput = ({
         multiline={multiline}
         selectionColor={selectionColor}
         {...(value ? { value } : {})}
+        selection={selection}
+        onSelectionChange={onSelectionChange}
       />
       {extraText && extraText}
       {!!errorText && <Text style={styles.errorText}>{errorText}</Text>}

package/src/commons/MediaPlayerDetail/index.js

@@ -7,7 +7,6 @@ import React, {
   useMemo,
 } from 'react';
 import {
-  Image,
   View,
   StyleSheet,
   Text,
@@ -34,10 +33,8 @@ const MediaPlayerDetail = ({
   style,
   wrapStyles,
   amount,
-  handleFullScreen,
   isPaused = true,
   goToPlayBack,
-  isShowFullScreenIcon = false,
   width,
   height,
 }) => {
@@ -61,11 +58,6 @@ const MediaPlayerDetail = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [paused]);
 
-  const onFullScreen = useCallback(() => {
-    handleFullScreen && handleFullScreen({ uri, cameraName, thumbnail });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const getWidthHeight = useCallback(() => {
     let newWidth = 0,
       newHeight = 0;
@@ -207,18 +199,6 @@ const MediaPlayerDetail = ({
           {cameraName}
         </Text>
       )}
-      {isShowFullScreenIcon && (
-        <TouchableOpacity
-          onPress={onFullScreen}
-          style={[
-            styles.iconFullScreen,
-            (amount === 4 || amount === 6) && styles.iconFullScreen2,
-          ]}
-          testID={TESTID.SUB_UNIT_FULL_CAMERA}
-        >
-          <Image source={Images.fullscreen} />
-        </TouchableOpacity>
-      )}
     </View>
   );
 };

package/src/commons/Modal/index.js

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

package/src/commons/Tabbar/Styles/indexStyles.js

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+import { isIphoneX } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../configs';
+
+const widthBadge = 20;
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    height: 70,
+    backgroundColor: Colors.White,
+    paddingHorizontal: 10,
+    borderTopWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  label: {
+    textAlign: 'center',
+    fontSize: 12,
+    marginTop: 10,
+    marginBottom: isIphoneX() ? 10 : 0,
+  },
+  wrapTab: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    marginBottom: -8,
+  },
+  wrapIcon: {
+    position: 'relative',
+  },
+  badgeCount: {
+    width: widthBadge,
+    height: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.Red,
+    borderRadius: widthBadge / 2,
+    position: 'absolute',
+    top: -8,
+    right: -8,
+  },
+  txtBadge: {
+    color: Colors.White,
+    fontSize: 12,
+  },
+  iconActive: {
+    tintColor: Colors.Primary,
+  },
+});

package/src/commons/Tabbar/index.js

@@ -0,0 +1,110 @@
+import React, { memo, useEffect } from 'react';
+import { Animated, View, Text, TouchableOpacity, Image } from 'react-native';
+import Routes from '../../utils/Route';
+import { Colors } from '../../configs/Colors';
+import { Constants } from '../../configs/Constants';
+import styles from './Styles/indexStyles';
+import { Images } from '../../configs';
+
+export const getTabBarIcon = (routeName) => {
+  switch (routeName) {
+    case Routes.TemplateStack:
+      return Images.template;
+    case Routes.GatewayStack:
+      return Images.gateway;
+    case Routes.SmartStack:
+      return Images.smart;
+  }
+};
+
+const getWidth = () => (Constants.width - 12) / 3;
+
+const TabBarItem = ({
+  descriptor,
+  route,
+  index,
+  isFocused,
+  navigation,
+  notificationNumber,
+  updateLastSeen,
+}) => {
+  const { options } = descriptor;
+  const label =
+    options.tabBarLabel !== undefined
+      ? options.tabBarLabel
+      : options.title !== undefined
+      ? options.title
+      : route.name;
+  const color = isFocused ? Colors.Primary : Colors.Black;
+
+  const onPress = () => {
+    const event = navigation.emit({
+      type: 'tabPress',
+      target: route.key,
+      canPreventDefault: true,
+    });
+    if (!isFocused && !event.defaultPrevented) {
+      navigation.navigate({
+        name: route.name,
+        merge: true,
+        params: { isMainSource: options.isMainSource },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      Animated.spring(options.tabOffSetValue, {
+        toValue: getWidth() * index,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isFocused, index, options.tabOffSetValue]);
+
+  useEffect(() => {
+    if (isFocused) {
+      if (route.name === Routes.NotificationStack) {
+        updateLastSeen && updateLastSeen();
+      }
+    }
+  }, [isFocused, route.name, updateLastSeen]);
+
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.wrapTab}>
+      <View style={styles.wrapIcon}>
+        <Image
+          style={[styles.icon, isFocused && styles.iconActive]}
+          source={getTabBarIcon(route.name)}
+        />
+        {route.name === Routes.NotificationStack && notificationNumber > 0 && (
+          <View style={styles.badgeCount}>
+            <Text style={styles.txtBadge}>
+              {notificationNumber < 9 ? notificationNumber : '9+'}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      <Text style={[styles.label, { color }]}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const TabBar = ({ state, descriptors, navigation }) => {
+  return (
+    <View style={styles.wrap}>
+      {state.routes.map((route, index) => (
+        <TabBarItem
+          key={index}
+          descriptor={descriptors[route.key]}
+          route={route}
+          index={index}
+          isFocused={state.index === index}
+          navigation={navigation}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default memo(TabBar);

package/src/configs/Colors.js

@@ -133,4 +133,8 @@ export const Colors = {
   BlackTransparent16: 'rgba(0, 0, 0, 0.16)',
   WhiteTransparent8: 'rgba(255, 255, 255, 0.8)',
   BlueTransparent5: 'rgba(230, 247, 255, 0.5)',
+  Neutral: {
+    Neutral3: '#E6E6E6',
+    Neutral5: '#595959',
+  },
 };

package/src/configs/Images.js

@@ -13,4 +13,10 @@ export default {
   shadowButton: require('../Images/Common/shadowButton.png'),
   eye: require('../Images/Common/eye.png'),
   eyeClosed: require('../Images/Common/eye-closed.png'),
+  deviceIcon: require('../Images/Common/device_icon.png'),
+  template: require('../Images/DevMode/template.png'),
+  smart: require('../Images/DevMode/smart.png'),
+  gateway: require('../Images/DevMode/gateway.png'),
+  menu: require('../Images/DevMode/menu.png'),
+  search: require('../Images/DevMode/search.png'),
 };

package/src/navigations/GatewayStack.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import Routes from '../utils/Route';
+import { screenOptions } from './utils';
+import Gateway from '../screens/Gateway';
+
+const Stack = createStackNavigator();
+
+const GatewayStack = memo(() => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name={Routes.Gateway} component={Gateway} />
+    </Stack.Navigator>
+  );
+});
+
+export default GatewayStack;