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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.92",
+  "version": "0.3.94",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -129,6 +129,7 @@
     "@testing-library/react-hooks": "^6.0.0",
     "apisauce": "^2.1.5",
     "axios": "^0.19.2",
+    "base-64": "^1.0.0",
     "deprecated-react-native-prop-types": "^2.3.0",
     "dotenv": "^8.2.0",
     "google-libphonenumber": "^3.2.10",
@@ -143,8 +144,10 @@
     "patch-package": "^6.2.2",
     "pluralize": "^8.0.0",
     "postinstall": "^0.7.0",
+    "precompiled-mqtt": "^4.3.14-beta",
     "pusher-js": "^7.4.0",
     "pusher-js-auth": "^4.0.1",
+    "python-struct": "^1.1.3",
     "querystring": "^0.2.0",
     "react-content-loader": "^6.0.3",
     "react-dom": "^17.0.1",
@@ -161,6 +164,7 @@
     "react-native-calendars": "^1.1266.0",
     "react-native-chart-kit": "^6.5.0",
     "react-native-credit-card-input": "^0.4.1",
+    "react-native-crypto-aes-cbc": "^1.1.1",
     "react-native-dash": "^0.0.11",
     "react-native-deep-linking": "^2.2.0",
     "react-native-device-info": "^10.3.0",

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -77,8 +77,8 @@ const SliderRangeTemplate = memo(
           doAction(
             action_data,
             JSON.stringify({
-              value_brness: parseInt(value),
-              value: parseInt(value),
+              value_brness: parseInt(value, 10),
+              value: parseInt(value, 10),
             })
           );
         }, 300);

package/src/commons/AlertAction/index.js

@@ -80,6 +80,8 @@ const AlertAction = ({
             styleButtonLeft={boxLeftButtonStyle}
             styleButtonRight={boxRightButtonStyle}
             accessibilityLabelPrefix={accessibilityLabelPrefix}
+            wrapStyle={styles.wrapViewButtonStyle}
+            disableKeyBoardAnimated
           />
         </View>
       </Animated.View>
@@ -121,6 +123,9 @@ const styles = StyleSheet.create({
   descriptionText: {
     paddingHorizontal: 16,
   },
+  wrapViewButtonStyle: {
+    position: 'relative',
+  },
 });
 
 export default AlertAction;

package/src/commons/BottomButtonView/index.js

@@ -1,7 +1,8 @@
-import React, { memo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import React, { memo, useState, useEffect } from 'react';
+import { StyleSheet, Animated, Easing, Platform } from 'react-native';
 
 import { AccessibilityLabel } from '../../configs/Constants';
+import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import Button from '../Button';
 
 const BottomButtonView = memo(
@@ -20,13 +21,28 @@ const BottomButtonView = memo(
     typeMain = 'primary',
     typeSecondary = 'cancel',
     accessibilityLabelPrefix = '',
+    disableBackgroundMainButton = false,
+    disableBackgroundSecondButton = false,
   }) => {
+    const transY = useKeyboardAnimated();
+    const [keyboardAnim] = useState(new Animated.Value(0));
+
+    useEffect(() => {
+      Animated.timing(keyboardAnim, {
+        toValue: transY,
+        duration: Platform.OS === 'ios' ? 220 : 0,
+        easing: Easing.linear(),
+        useNativeDriver: false,
+      }).start();
+    }, [keyboardAnim, transY]);
+
     return (
-      <View
+      <Animated.View
         style={[
           typeMain === 'CardShadow'
             ? styleCustom.container1
             : styleCustom.container,
+          { bottom: keyboardAnim },
           rowButton && styleCustom.horizontalContainer,
           style,
         ]}
@@ -42,6 +58,7 @@ const BottomButtonView = memo(
             textType={textTypeMain}
             style={rowButton && styleCustom.buttonMainRow}
             accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.BOTTOM_VIEW_MAIN}`}
+            disableBackground={disableBackgroundMainButton}
           />
         )}
         {secondaryTitle && (
@@ -56,9 +73,10 @@ const BottomButtonView = memo(
                 : styleCustom.buttonSecondaryColumn
             }
             accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.BOTTOM_VIEW_SECONDARY}`}
+            disableBackground={disableBackgroundSecondButton}
           />
         )}
-      </View>
+      </Animated.View>
     );
   }
 );

package/src/commons/Button/index.js

@@ -133,6 +133,7 @@ export default ({
   textSemiBold = true,
   style,
   accessibilityLabel,
+  disableBackground = false,
 }) => {
   const styleButton = ButtonStyle[type];
   const textColor = TextColor[type];
@@ -153,6 +154,7 @@ export default ({
         isCardShadow && styles.buttonLeft,
         styleButton,
         style,
+        disableBackground && styles.disableBackground,
       ]}
       onPress={onPress}
       disabled={isDisabled}
@@ -202,4 +204,7 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     backgroundColor: Colors.Gray1,
   },
+  disableBackground: {
+    backgroundColor: Colors.Transparent,
+  },
 });

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -9,7 +9,6 @@ import { RowUser } from '../../RowUser';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from '../../../screens/EmergencyContacts/hook';
 import { useIsFocused } from '@react-navigation/native';
-import _ from 'lodash';
 
 const { standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth + 86
@@ -17,6 +16,7 @@ const { standardizeHeight } = standardizeCameraScreenSize(
 
 const EmergencyDetail = memo(({ item }) => {
   const t = useTranslations();
+  const { uri, preview_uri } = item?.configuration?.camera;
   const groupId = item?.configuration?.device?.group?.id;
   const isFocused = useIsFocused();
   const { listContacts, getListContacts } = useEmeragencyContacts();
@@ -35,8 +35,10 @@ const EmergencyDetail = memo(({ item }) => {
       <View style={styles.first}>
         <Text type="H4">{t('camera')}</Text>
         <MediaPlayer
-          uri={_.get(item, 'configuration.uri', '')}
+          uri={uri}
+          previewUri={preview_uri}
           style={styles.camera}
+          key={'camera-emergency'}
         />
       </View>
       <View style={styles.second}>

package/src/commons/Device/Emergency/__test__/EmergencyDetail.test.js

@@ -28,8 +28,10 @@ describe('Test EmergencyDetail', () => {
   it('create EmergencyDetail', async () => {
     const item = {
       configuration: {
-        uri: '123',
-        preview_uri: '123',
+        camera: {
+          uri: '123',
+          preview_uri: '123',
+        },
         device: {
           group: {
             id: 1,

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

@@ -28,7 +28,9 @@ const ProgressBar = memo(({ data = [], item }) => {
 
       <View style={styles.wrapProgressBar}>
         <Progress.Bar
-          style={styles.processBar}
+          style={styles.progressBar}
+          width={null}
+          height={40}
           progress={percent}
           unfilledColor={Colors.Blue15}
         />

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

@@ -24,10 +24,8 @@ export default StyleSheet.create({
     fontWeight: 'bold',
     textTransform: 'uppercase',
   },
-  processBar: {
+  progressBar: {
     flex: 1,
-    width: '100%',
-    height: 40,
     color: Colors.Blue16,
     borderWidth: 0,
     borderRadius: 10,
@@ -40,6 +38,5 @@ export default StyleSheet.create({
   },
   textValue: {
     marginLeft: 8,
-    width: 45,
   },
 });

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

@@ -178,7 +178,7 @@ const Anemometer = memo(
         </View>
 
         <View style={styles.textValue}>
-          {value && (
+          {!!value && (
             <Svg width={width} height={width} {...viewBox}>
               <Text
                 fill={Colors.Lime6}

package/src/commons/Header/HeaderCustom.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
@@ -11,7 +11,6 @@ import { AccessibilityLabel } from '../../configs/Constants';
 
 const HeaderCustom = ({
   title = '',
-  isShowAdd = false,
   isShowRight = false,
   onRefresh,
   showPopoverWithRef,
@@ -33,18 +32,18 @@ const HeaderCustom = ({
   const t = useTranslations();
   const { goBack } = useNavigation();
   const refMenuAction = useRef();
-  const refAddAction = useRef();
-  const handleAddAction = () => {};
   const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
   const handleGoback = () => {
-    onGoBack && onGoBack();
-    goBack();
+    if (onGoBack) {
+      onGoBack();
+    } else {
+      goBack();
+    }
   };
 
   const handleClose = useCallback(() => {
     onClose ? onClose() : notImplemented(t);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onClose, t]);
 
   return (
     <View
@@ -102,15 +101,6 @@ const HeaderCustom = ({
             </TouchableOpacity>
           </>
         )}
-        {isShowAdd && (
-          <TouchableOpacity
-            style={styles.buttonAdd}
-            onPress={handleAddAction}
-            ref={refAddAction}
-          >
-            <Icon name={'plus'} size={27} color={Colors.Black} />
-          </TouchableOpacity>
-        )}
         {isShowClose && (
           <TouchableOpacity style={styles.buttonAdd} onPress={handleClose}>
             <Icon name={'close'} size={24} color={Colors.Black} />
@@ -122,4 +112,4 @@ const HeaderCustom = ({
   );
 };
 
-export default memo(HeaderCustom);
+export default HeaderCustom;

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import moment from 'moment';
@@ -17,144 +17,99 @@ import { axiosPost } from '../../../utils/Apis/axios';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../utils/Route';
-import { useGetIdUser } from '../../../hooks/Common';
-import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
+import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
 
-const ItemOneTap = memo(
-  ({ isOwner, automate = {}, unit, wrapSyles, onPressItem }) => {
-    const { navigate } = useNavigation();
-    const {
-      id,
-      type,
-      user,
-      script,
-      activate_at,
-      condition,
-      config,
-      value,
-      author = '',
-    } = automate;
-    const t = useTranslations();
-    const idUser = useGetIdUser();
-
-    const textCondition = useMemo(() => {
-      if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
-        let _condition;
-        if (condition === '>') {
-          _condition = 'higher_than';
-        } else if (condition === '<') {
-          _condition = 'lower_than';
-        } else if (condition === '=') {
-          _condition = 'equal';
-        }
-        return `${config} ${t(_condition)} ${value}`;
-      }
-      return null;
-    }, [condition, config, t, type, value]);
+const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
+  const { navigate } = useNavigation();
+  const { id, type, script, activate_at, author = '' } = automate;
+  const t = useTranslations();
 
-    const goToDetail = useCallback(() => {
-      navigate(Routes.ScriptDetail, {
-        id,
-        automate,
-        name: script?.name,
-        type: type,
-        havePermission: isOwner || user === idUser,
-        unit,
-        textCondition,
-      });
-    }, [
-      automate,
-      isOwner,
-      user,
-      idUser,
-      navigate,
+  const goToDetail = useCallback(() => {
+    navigate(Routes.ScriptDetail, {
       id,
-      script,
-      type,
-      unit,
-      textCondition,
-    ]);
+      preAutomate: automate,
+    });
+  }, [automate, navigate, id]);
 
-    const handleScriptAction = useCallback(async () => {
-      const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
-      if (success) {
-        ToastBottomHelper.success(t('Activated successfully.'));
-      } else {
-        ToastBottomHelper.error(t('Activation failed.'));
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]);
+  const handleScriptAction = useCallback(async () => {
+    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+    if (success) {
+      ToastBottomHelper.success(t('activated_successfully'));
+    } else {
+      ToastBottomHelper.error(t('activation_failed'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
 
-    const displayIcon = () => {
-      const iconKit = script?.icon_kit;
-      if (iconKit) {
-        return <FImage source={{ uri: iconKit }} style={styles.iconSensor} />;
-      }
-      if (type === AUTOMATE_TYPE.ONE_TAP) {
-        return <OneTap />;
-      }
-      if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
-        return <ValueChange />;
-      }
-      if ([AUTOMATE_TYPE.EVENT].includes(type)) {
-        return <Event />;
-      }
-      return <Schedule />;
-    };
-    const activateAt = activate_at
-      ? timeDifference(new Date(), moment(activate_at), true)
-      : null;
-    return (
-      <TouchableWithoutFeedback
-        onPress={onPressItem || goToDetail}
-        accessibilityLabel={`${AccessibilityLabel.AUTOMATE_SCRIPT_NAME}-${id}`}
-      >
-        <View style={[styles.container, wrapSyles]}>
-          <View style={styles.boxIcon}>
-            {displayIcon()}
-            {type === AUTOMATE_TYPE.ONE_TAP && (
-              <TouchableOpacity
-                accessibilityLabel={AccessibilityLabel.AUTOMATE_SCRIPT_ACTION}
-                onPress={handleScriptAction}
-              >
-                <CheckCircle />
-              </TouchableOpacity>
-            )}
-          </View>
-          <TouchableOpacity
-            accessibilityLabel={AccessibilityLabel.GO_DETAIL}
-            onPress={onPressItem || goToDetail}
+  const displayIcon = () => {
+    const iconKit = script?.icon_kit;
+    if (iconKit) {
+      return <FImage source={{ uri: iconKit }} style={styles.iconSensor} />;
+    }
+    if (type === AUTOMATE_TYPE.ONE_TAP) {
+      return <OneTap />;
+    }
+    if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
+      return <ValueChange />;
+    }
+    if ([AUTOMATE_TYPE.EVENT].includes(type)) {
+      return <Event />;
+    }
+    return <Schedule />;
+  };
+  const activateAt = activate_at
+    ? timeDifference(new Date(), moment(activate_at), true)
+    : null;
+  return (
+    <TouchableWithoutFeedback
+      onPress={onPressItem || goToDetail}
+      accessibilityLabel={`${AccessibilityLabel.AUTOMATE_SCRIPT_NAME}-${id}`}
+    >
+      <View style={[styles.container, wrapSyles]}>
+        <View style={styles.boxIcon}>
+          {displayIcon()}
+          {type === AUTOMATE_TYPE.ONE_TAP && (
+            <TouchableOpacity
+              accessibilityLabel={AccessibilityLabel.AUTOMATE_SCRIPT_ACTION}
+              onPress={handleScriptAction}
+            >
+              <CheckCircle />
+            </TouchableOpacity>
+          )}
+        </View>
+        <TouchableOpacity
+          accessibilityLabel={AccessibilityLabel.GO_DETAIL}
+          onPress={onPressItem || goToDetail}
+        >
+          <Text
+            numberOfLines={1}
+            semibold
+            size={14}
+            color={Colors.Gray9}
+            type="Body"
+            style={styles.name}
           >
+            {script?.name}
+          </Text>
+          <Text numberOfLines={1} type={'Label'} color={Colors.Gray7}>
+            {t('created_by', { name: author })}
+          </Text>
+          <View style={styles.descriptionContainer}>
             <Text
               numberOfLines={1}
               semibold
-              size={14}
-              color={Colors.Gray9}
-              type="Body"
-              style={styles.name}
+              size={12}
+              color={Colors.Gray8}
+              type="Label"
             >
-              {script?.name}
-            </Text>
-            <Text numberOfLines={1} type={'Label'} color={Colors.Gray7}>
-              {`${t('create_by')} ${author}`}
+              {activateAt && t('activated_time', { time: activateAt })}
             </Text>
-            <View style={styles.descriptionContainer}>
-              <Text
-                numberOfLines={1}
-                semibold
-                size={12}
-                color={Colors.Gray8}
-                type="Label"
-              >
-                {activateAt && t('activated_time', { time: activateAt })}
-              </Text>
-              <IconOutline name="right" size={12} />
-            </View>
-          </TouchableOpacity>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
-);
+            <IconOutline name="right" size={12} />
+          </View>
+        </TouchableOpacity>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+});
 
 export default ItemOneTap;