@eohjsc/react-native-smart-city 0.3.41 → 0.3.44

package/src/screens/Unit/ManageUnit.js

@@ -1,25 +1,21 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { View, TouchableOpacity, Image, Platform } from 'react-native';
-import Animated from 'react-native-reanimated';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { View, TouchableOpacity, Image } from 'react-native';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors, API, Images } from '../../configs';
 import Routes from '../../utils/Route';
 import { ToastBottomHelper } from '../../utils/Utils';
 import { createFormData, axiosPatch } from '../../utils/Apis/axios';
 import useBoolean from '../../hooks/Common/useBoolean';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
-
-import { AlertAction, ViewButtonBottom, ImagePicker } from '../../commons';
+import { AlertAction, ImagePicker } from '../../commons';
 import Text from '../../commons/Text';
 import _TextInput from '../../commons/Form/TextInput';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
-
 import { useIsOwnerOfUnit } from '../../hooks/Common';
 import { AccessibilityLabel } from '../../configs/Constants';
 import styles from './ManageUnitStyles';
 import { useNavigation } from '@react-navigation/native';
-import { ModalCustom } from '../../commons/Modal';
 import ButtonWrapper from './components/ButtonWrapper';
 
 const ManageUnit = ({ route }) => {
@@ -143,12 +139,7 @@ const ManageUnit = ({ route }) => {
     });
   }, [navigation, unit]);
 
-  const [transY] = useKeyboardAnimated(-16);
-  const animatedStyle = Platform.select({
-    ios: {
-      marginBottom: transY,
-    },
-  });
+  const transY = useKeyboardAnimated();
 
   const options = {
     mediaType: 'photo',
@@ -255,42 +246,29 @@ const ManageUnit = ({ route }) => {
           </Text>
         </TouchableOpacity>
       )}
-      <ModalCustom
-        isVisible={showEdit}
-        onBackButtonPress={setHideEdit}
-        onBackdropPress={setHideEdit}
-        style={styles.modalContainer}
+      <AlertAction
+        visible={showEdit}
+        hideModal={setHideEdit}
+        title={t('rename_unit')}
+        leftButtonTitle={t('cancel')}
+        leftButtonClick={setHideEdit}
+        rightButtonTitle={t('rename')}
+        rightButtonClick={goRename}
+        transY={transY}
         accessibilityLabel={AccessibilityLabel.MANAGE_UNIT_MODAL_RENAME}
       >
-        <Animated.View style={[styles.popoverStyle, animatedStyle]}>
-          <View style={styles.modalWrapper}>
-            <View style={styles.modalHeader}>
-              <Text semibold style={styles.modalHeaderText}>
-                {t('rename_unit')}
-              </Text>
-            </View>
-            <_TextInput
-              maxLength={50}
-              defaultValue={unitData?.name}
-              onChange={(value) => setUnitName(value)}
-              textInputStyle={styles.textInputStyle}
-              wrapStyle={styles.textInputWrapStyle}
-              selectionColor={Colors.Primary}
-              accessibilityLabel={
-                AccessibilityLabel.MANAGE_UNIT_MODAL_RENAME_INPUT_NAME
-              }
-            />
-
-            <ViewButtonBottom
-              leftTitle={t('cancel')}
-              onLeftClick={setHideEdit}
-              rightTitle={t('rename')}
-              onRightClick={goRename}
-              accessibilityLabelPrefix={AccessibilityLabel.PREFIX.MANAGE_UNIT}
-            />
-          </View>
-        </Animated.View>
-      </ModalCustom>
+        <_TextInput
+          maxLength={50}
+          defaultValue={unitData?.name}
+          onChange={(value) => setUnitName(value)}
+          textInputStyle={styles.textInputStyle}
+          wrapStyle={styles.textInputWrapStyle}
+          selectionColor={Colors.Primary}
+          accessibilityLabel={
+            AccessibilityLabel.MANAGE_UNIT_MODAL_RENAME_INPUT_NAME
+          }
+        />
+      </AlertAction>
       <AlertAction
         visible={showRemove}
         hideModal={setHideRemove}

package/src/screens/Unit/ManageUnitStyles.js

@@ -41,10 +41,6 @@ export default StyleSheet.create({
   rightButtonStyle: {
     color: Colors.Gray7,
   },
-  modalContainer: {
-    flex: 1,
-    margin: 0,
-  },
   popoverStyle: {
     width: '100%',
     backgroundColor: Colors.White,

package/src/screens/Unit/__test__/ManageUnit.test.js

@@ -12,6 +12,7 @@ import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
 import { API } from '../../../configs';
 import { getTranslate } from '../../../utils/I18n';
+import { AlertAction } from '../../../commons';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -138,15 +139,11 @@ describe('Test Manage Unit', () => {
     await act(async () => {
       await changeName[0].props.onPress();
     });
-    const bottomButton = instance.find(
-      (item) =>
-        item.props.accessibilityLabel ===
-        `${AccessibilityLabel.PREFIX.MANAGE_UNIT}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
-    );
+    const alertActions = instance.findAllByType(AlertAction);
     mock.onPatch(API.UNIT.MANAGE_UNIT(1)).reply(200, {});
     await act(async () => {
       await inputRename[0].props.onChange('input station');
-      await bottomButton.props.onPress();
+      await alertActions[0].props.rightButtonClick();
     });
     expect(Toast.show).toBeCalledWith({
       position: 'bottom',
@@ -194,16 +191,11 @@ describe('Test Manage Unit', () => {
       await changeName[0].props.onPress();
     });
 
-    const bottomButton = instance.find(
-      (item) =>
-        item.props.accessibilityLabel ===
-        `${AccessibilityLabel.PREFIX.MANAGE_UNIT}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
-    );
-    mock.onPatch(API.UNIT.MANAGE_UNIT(1)).reply(200);
-
+    const alertActions = instance.findAllByType(AlertAction);
+    mock.onPatch(API.UNIT.MANAGE_UNIT(1)).reply(200, {});
     await act(async () => {
       await inputRename[0].props.onChange('input station');
-      await bottomButton.props.onPress();
+      await alertActions[0].props.rightButtonClick();
     });
 
     expect(mockedDispatch).not.toBeCalled();

package/src/utils/I18n/translations/en.json

@@ -444,9 +444,9 @@
   "insufficient_water_input": "Insufficient water input.",
   "check_water_leak": "Check for water leak.",
   "exceed_5_filter": "Exceed 5hrs filtering. Tank is not yet full.",
-  "exceed_%{hour}_filter": "Exceed %{hour}hrs filtering. Tank is not yet full.",
+  "exceed_{hour}_filter": "Exceed {hour}hrs filtering. Tank is not yet full.",
   "tank_is_full": "Tank is full.",
-  "%{number}_filter_need_to_be_replaced": "%{number} filters need to be replaced.",
+  "{number}_filter_need_to_be_replaced": "{number} filters need to be replaced.",
   "replace_all_filters": "Replace all filters.",
   "directions": "Directions",
   "save": "Save",
@@ -1038,6 +1038,8 @@
   "select_all": "Select All",
   "turn_off_device": "Turn off device",
   "turn_off_device_when_scan_qr_guide": "Turn off the device you want to add new before scanning the QR code. Press ‘’OK’’ to continue.",
+  "turn_on_device": "Turn on device",
+  "turn_on_device_after_change_address_success": "Turn on the device you want to connect. Press ‘’OK’’ to continue.",
   "connect_to_router": "Connect to the Router",
   "connect_router_content": "Please plug in the gateway and connect it to the router, making sure your phone and the gateway are under the same network. Then, comfirm that the light is on and press “Next”",
   "turn_on_zigbee_device": "Turn on zigbee device",
@@ -1058,5 +1060,9 @@
   "connecting_modbus_device": "Connecting to modbus device",
   "connecting_zigbee_device": "Connecting to zigbee device",
   "connecting_to_gateway": "Connecting to gateway",
+  "select_network": "Select your home network.",
+  "wrong_wifi_password": "Wrong wifi's password",
+  "fail_add_modbus_device": "Fail to add modbus device",
+  "fail_add_zigbee_device": "Fail to add zigbee device",
   "click_here_to_setup_device": "Click here to setup device"
 }

package/src/utils/I18n/translations/vi.json

@@ -53,9 +53,9 @@
   "insufficient_water_input": "Thiếu nước đầu vào.",
   "check_water_leak": "Kiểm tra rò rỉ nước.",
   "exceed_5_filter": "Lọc liên tục 5h nhưng bình không đầy",
-  "exceed_%{hour}_filter": "Lọc liên tục %{hour}h nhưng bình không đầy",
+  "exceed_{hour}_filter": "Lọc liên tục {hour}h nhưng bình không đầy",
   "tank_is_full": "Nước đầy.",
-  "%{number}_filter_need_to_be_replaced": "%{number} lõi lọc cần được thay thế.",
+  "{number}_filter_need_to_be_replaced": "{number} lõi lọc cần được thay thế.",
   "replace_all_filters": "Tất cả lõi lọc cần được thay thế.",
   "auth_already_have_an_account": "Bạn đã có tài khoản? ",
   "tds_information": "Chỉ số TDS",
@@ -1036,6 +1036,8 @@
   "select_all": "Chọn tất cả",
   "turn_off_device": "Tắt thiết bị",
   "turn_off_device_when_scan_qr_guide": "Tắt thiết bị bạn muốn thêm mới trước khi quét mã QR. Nhấn ‘’OK’’ để tiếp tục.",
+  "turn_on_device": "Turn on device",
+  "turn_on_device_after_change_address_success": "Bật thiết bị bạn muốn kết nối. Nhấn ‘’OK’’ để tiếp tục.",
   "connect_to_router": "Kết nối với Bộ định tuyến",
   "connect_router_content": "Vui lòng cắm cổng vào và kết nối nó với bộ định tuyến, đảm bảo rằng điện thoại của bạn và cổng kết nối nằm trong cùng một mạng. Sau đó, xác nhận rằng đèn đã sáng và nhấn “Tiếp theo”",
   "turn_on_zigbee_device": "Bật thiết bị zigbee",
@@ -1056,5 +1058,9 @@
   "connecting_modbus_device": "Kết nối với thiết bị modbus",
   "connecting_zigbee_device": "Kết nối với thiết bị zigbee",
   "connecting_to_gateway": "Kết nối với gateway",
+  "select_network": "Chọn mạng của bạn.",
+  "wrong_wifi_password": "Sai mật khẩu wifi",
+  "fail_add_modbus_device": "Không thêm được thiết bị modbus",
+  "fail_add_zigbee_device": "Không thêm được thiết bị zigbee",
   "click_here_to_setup_device": "Chọn thiết bị thêm vào phòng"
 }

package/src/hooks/Common/useKeyboardShowTranslation.js

@@ -1,120 +0,0 @@
-import {
-  Clock,
-  Value,
-  interpolate,
-  Extrapolate,
-  Easing,
-  cond,
-  clockRunning,
-  set,
-  startClock,
-  timing,
-  debug,
-  stopClock,
-  block,
-} from 'react-native-reanimated';
-import { useMemo, useCallback, useEffect, useState } from 'react';
-import { Keyboard, Platform } from 'react-native';
-export const runTiming = (clock, value, dest, duration) => {
-  const state = {
-    finished: new Value(0),
-    position: new Value(0),
-    time: new Value(0),
-    frameTime: new Value(0),
-  };
-
-  const config = {
-    duration: duration || 200,
-    toValue: new Value(0),
-    easing: Easing.inOut(Easing.ease),
-  };
-
-  return block([
-    cond(
-      clockRunning(clock),
-      [
-        // if the clock is already running we update the toValue, in case a new dest has been passed in
-        set(config.toValue, dest),
-      ],
-      [
-        // if the clock isn't running we reset all the animation params and start the clock
-        set(state.finished, 0),
-        set(state.time, 0),
-        set(state.position, value),
-        set(state.frameTime, 0),
-        set(config.toValue, dest),
-        startClock(clock),
-      ]
-    ),
-    // we run the step here that is going to update position
-    timing(clock, state, config),
-    // if the animation is over we stop the clock
-    cond(state.finished, debug('stop clock', stopClock(clock))),
-    // we made the block return the updated position
-    state.position,
-  ]);
-};
-
-export const useKeyboardShowTranslation = () => {
-  const clock = new Clock();
-  const [height, setHeight] = useState(0);
-  const marginStart = useMemo(() => new Value(0), []);
-  const marginEnd = useMemo(() => new Value(0), []);
-  const _keyboardWillHide = useCallback(() => {
-    marginStart.setValue(marginEnd);
-    marginEnd.setValue(0);
-  }, [marginStart, marginEnd]);
-  const _keyboardWillShow = useCallback(
-    (e) => {
-      marginStart.setValue(marginEnd);
-      marginEnd.setValue(e.endCoordinates.height);
-      setHeight(e.endCoordinates.height);
-    },
-    [marginEnd, marginStart]
-  );
-
-  const transY = runTiming(clock, marginStart, marginEnd);
-  const transOutY = interpolate(transY, {
-    inputRange: [0, height],
-    outputRange: [0, 200],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const opacity = interpolate(transY, {
-    inputRange: [0, height],
-    outputRange: [1, 0],
-    extrapolate: Extrapolate.CLAMP,
-  });
-
-  const action = Platform.OS === 'ios' ? 'Will' : 'Did';
-  const animatedStyle = Platform.select({
-    ios: {
-      marginBottom: transY,
-    },
-  });
-  const transOutStyle = {
-    transform: [{ translateY: transOutY }],
-  };
-  const opacityStyle = {
-    opacity: opacity,
-  };
-
-  useEffect(() => {
-    // @ts-ignore
-    Keyboard.addListener('keyboard' + action + 'Hide', _keyboardWillHide);
-    // @ts-ignore
-    Keyboard.addListener('keyboard' + action + 'Show', _keyboardWillShow);
-    // cleanup function
-    return () => {
-      Keyboard.removeListener('keyboard' + action + 'Show', _keyboardWillShow);
-      Keyboard.removeListener('keyboard' + action + 'Hide', _keyboardWillHide);
-    };
-  }, [_keyboardWillHide, _keyboardWillShow, action]);
-
-  return {
-    transY,
-    animatedStyle,
-    opacity,
-    opacityStyle,
-    transOutStyle,
-  };
-};

package/src/utils/runTiming.js

@@ -1,52 +0,0 @@
-import {
-  Easing,
-  Value,
-  cond,
-  clockRunning,
-  set,
-  startClock,
-  timing,
-  debug,
-  stopClock,
-  block,
-} from 'react-native-reanimated';
-
-export function runTiming(clock, value, dest, duration) {
-  const state = {
-    finished: new Value(0),
-    position: new Value(0),
-    time: new Value(0),
-    frameTime: new Value(0),
-  };
-
-  const config = {
-    duration: duration || 200,
-    toValue: new Value(0),
-    easing: Easing.inOut(Easing.ease),
-  };
-
-  return block([
-    cond(
-      clockRunning(clock),
-      [
-        // if the clock is already running we update the toValue, in case a new dest has been passed in
-        set(config.toValue, dest),
-      ],
-      [
-        // if the clock isn't running we reset all the animation params and start the clock
-        set(state.finished, 0),
-        set(state.time, 0),
-        set(state.position, value),
-        set(state.frameTime, 0),
-        set(config.toValue, dest),
-        startClock(clock),
-      ]
-    ),
-    // we run the step here that is going to update position
-    timing(clock, state, config),
-    // if the animation is over we stop the clock
-    cond(state.finished, debug('stop clock', stopClock(clock))),
-    // we made the block return the updated position
-    state.position,
-  ]);
-}