@eohjsc/react-native-smart-city 0.3.53 → 0.3.55

package/src/screens/AddNewGateway/ConnectingWifiGuideStyles.js

@@ -1,4 +1,3 @@
-import { Platform } from 'react-native';
 import { Dimensions, StyleSheet } from 'react-native';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
 import { Colors } from '../../configs';
@@ -58,11 +57,13 @@ export default StyleSheet.create({
     lineHeight: 24,
   },
   bottomButtonView: {
-    marginBottom:
-      getBottomSpace() +
-      Platform.select({
-        android: 10,
-        ios: -10,
-      }),
+    marginBottom: getBottomSpace(),
+  },
+  loading: {
+    width: 40,
+    height: 40,
+  },
+  backgroundLoading: {
+    backgroundColor: Colors.Gray21,
   },
 });

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -22,9 +22,33 @@ const RenameNewDevices = memo(({ route }) => {
 
   const { unitId, subUnit, chipId, sensorId, addDeviceType } =
     route?.params || {};
-
+  const [selectedItem, setSelectedItem] = useState({});
+  const [isCanRename, setIsCanRename] = useState(false);
   const [info, setInfo] = useState({});
 
+  const renameLabel = AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE;
+
+  const scrollViewHeight = useMemo(() => {
+    const baseHeight = 40;
+    let contentItems = 0;
+
+    if (addDeviceType !== 'gateway') {
+      info?.sensors?.map(
+        (sensor) => (contentItems += sensor?.end_devices?.length)
+      );
+      if (contentItems === 1) {
+        return 90;
+      }
+      if (contentItems === 2) {
+        return 180;
+      }
+      if (contentItems > 2) {
+        return 270;
+      }
+    }
+    return baseHeight + contentItems * 25;
+  }, [addDeviceType, info.sensors]);
+
   const onPressDone = useCallback(async () => {
     await axiosPost(API.CHIP.RENAME_DEVICES(info.id), info);
     const resetAction = CommonActions.reset({
@@ -92,19 +116,114 @@ const RenameNewDevices = memo(({ route }) => {
     });
   };
 
-  const scrollviewHeight = useMemo(() => {
-    const baseHeight = 40;
-    let contentItems = 1;
+  const ItemDevice = useCallback(
+    ({
+      item,
+      onPress,
+      isFocus = false,
+      isGateway = false,
+      accessibilityLabelTextInput,
+      onChange,
+      onSubmitEditing,
+    }) => {
+      const isCanRenameItem = isGateway
+        ? item?.can_rename && isCanRename
+        : isFocus;
+      return (
+        <TouchableOpacity
+          style={[styles.boxDevice, isGateway && styles.marginTop16]}
+          accessibilityLabel={`${renameLabel}-button-${item?.id}`}
+          onPress={onPress}
+        >
+          {isGateway ? (
+            <GatewayIcon width={43} height={43} />
+          ) : (
+            <IconComponent icon={item?.icon} iconKit={item?.icon_kit} />
+          )}
+          <View style={styles.viewTextInput}>
+            {isCanRenameItem ? (
+              <_TextInput
+                wrapStyle={styles.marginTop0}
+                autoFocus={isCanRenameItem}
+                accessibilityLabel={accessibilityLabelTextInput}
+                value={item?.name}
+                textInputStyle={[styles.textItem, styles.textInputRename]}
+                onChange={onChange}
+                onSubmitEditing={onSubmitEditing}
+              />
+            ) : (
+              <Text
+                type="H4"
+                color={Colors.Gray9}
+                style={styles.textStation}
+                accessibilityLabel={`${renameLabel}-chip-name`}
+                numberOfLines={1}
+              >
+                {item?.name}
+              </Text>
+            )}
+          </View>
+        </TouchableOpacity>
+      );
+    },
+    [isCanRename, renameLabel]
+  );
+  const handleOnPressGatewayItem = useCallback(() => {
+    setIsCanRename(!isCanRename);
+  }, [isCanRename]);
 
-    if (addDeviceType !== 'gateway') {
-      info?.sensors?.map(
-        (sensor) => (contentItems += sensor?.end_devices?.length)
+  const handleOnPressDeviceItem = useCallback(
+    (item) => () => {
+      setSelectedItem(item);
+    },
+    []
+  );
+
+  const renderListItem = useMemo(() => {
+    if (addDeviceType === 'gateway') {
+      return (
+        <ItemDevice
+          item={info}
+          onPress={handleOnPressGatewayItem}
+          onSubmitEditing={handleOnPressGatewayItem}
+          isGateway
+          accessibilityLabelTextInput={`${renameLabel}-chip`}
+          onChange={updateItemName('chip')}
+        />
       );
     }
-    return baseHeight + contentItems * 43;
-  }, [addDeviceType, info.sensors]);
-
-  const renameLabel = AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE;
+    return (
+      <View style={[styles.devicesWrapper, { height: scrollViewHeight }]}>
+        <ScrollView>
+          {(info?.sensors || []).map((sensor, sensor_index) =>
+            (sensor?.end_devices || []).map((end_device, end_device_index) => (
+              <ItemDevice
+                onSubmitEditing={handleOnPressDeviceItem(end_device?.id)}
+                key={`${end_device?.id}`}
+                item={end_device}
+                onPress={handleOnPressDeviceItem(end_device)}
+                isFocus={end_device?.id === selectedItem?.id}
+                accessibilityLabelTextInput={`${renameLabel}-end_device-${end_device?.id}`}
+                onChange={updateItemName(
+                  'end_device',
+                  sensor_index,
+                  end_device_index
+                )}
+              />
+            ))
+          )}
+        </ScrollView>
+      </View>
+    );
+  }, [
+    addDeviceType,
+    scrollViewHeight,
+    info,
+    handleOnPressGatewayItem,
+    renameLabel,
+    handleOnPressDeviceItem,
+    selectedItem,
+  ]);
 
   return (
     <View style={styles.container}>
@@ -114,66 +233,24 @@ const RenameNewDevices = memo(({ route }) => {
         isCanBack={false}
       />
       <View style={styles.content}>
-        <IconOutline name="check-circle" size={28} color={Colors.Green6} />
-        <Text semibold color={Colors.Black} size={20} style={styles.textStatus}>
-          {t('successfully_connected')}
-        </Text>
-        <Text size={14} color={Colors.Gray9} style={styles.textStation}>
-          {subUnit?.name}
-        </Text>
-        <View style={{ ...styles.devicesWrapper, height: scrollviewHeight }}>
-          <ScrollView>
-            {addDeviceType === 'gateway' ? (
-              <View style={styles.boxDevice}>
-                <GatewayIcon width={43} height={43} />
-                {info.can_rename ? (
-                  <_TextInput
-                    accessibilityLabel={`${renameLabel}-chip`}
-                    value={info.name}
-                    textInputStyle={styles.textItem}
-                    onChange={updateItemName('chip')}
-                  />
-                ) : (
-                  <Text
-                    size={14}
-                    color={Colors.Gray9}
-                    style={styles.textStation}
-                    accessibilityLabel={`${renameLabel}-chip-name`}
-                  >
-                    {info.name}
-                  </Text>
-                )}
-              </View>
-            ) : (
-              !!info?.sensors?.length &&
-              info.sensors.map((sensor, sensor_index) =>
-                (sensor?.end_devices || []).map(
-                  (end_device, end_device_index) => (
-                    <View style={styles.boxDevice} key={`${end_device?.id}`}>
-                      <IconComponent
-                        icon={end_device?.icon}
-                        iconKit={end_device?.icon_kit}
-                      />
-                      <_TextInput
-                        accessibilityLabel={`${renameLabel}-end_device-${end_device?.id}`}
-                        value={end_device?.name}
-                        textInputStyle={styles.textItem}
-                        onChange={updateItemName(
-                          'end_device',
-                          sensor_index,
-                          end_device_index
-                        )}
-                      />
-                    </View>
-                  )
-                )
-              )
-            )}
-          </ScrollView>
+        <View style={styles.viewIconSuccess}>
+          <IconOutline name="check-circle" size={28} color={Colors.Green6} />
+          <Text
+            semibold
+            color={Colors.Black}
+            size={20}
+            style={styles.textStatus}
+          >
+            {t('successfully_connected')}
+          </Text>
+          <Text size={14} color={Colors.Gray9}>
+            {subUnit?.name}
+          </Text>
+          {renderListItem}
+          <Text size={16} color={Colors.Gray8} style={styles.textRename}>
+            {t('click_on_box_to_rename_device')}
+          </Text>
         </View>
-        <Text size={16} color={Colors.Gray8} style={styles.textRename}>
-          {t('click_on_box_to_rename_device')}
-        </Text>
       </View>
       <TouchableOpacity
         style={styles.btnDone}

package/src/screens/AddNewGateway/RenameNewDevicesStyles.js

@@ -9,31 +9,36 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   boxDevice: {
-    width: 250,
+    width: 275,
     flexDirection: 'row',
+    alignItems: 'center',
     paddingLeft: 16,
     borderWidth: 1,
     borderRadius: 10,
     borderColor: Colors.Gray4,
     backgroundColor: Colors.White,
-    alignItems: 'center',
     marginBottom: 16,
+    padding: 16,
   },
   device: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+  viewTextInput: {
+    flex: 1,
+  },
   textItem: {
     borderWidth: 0,
-    textAlign: 'center',
-    marginTop: -20,
     fontSize: 16,
     lineHeight: 24,
-    maxWidth: 170,
+    textAlign: 'left',
+    paddingTop: 0,
+    marginTop: 0,
+    paddingBottom: 8,
   },
   content: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 24,
   },
@@ -48,23 +53,37 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   textStation: {
-    lineHeight: 22,
-    marginBottom: 8,
-  },
-  textDeviceName: {
-    marginLeft: 8,
+    textAlign: 'left',
+    paddingLeft: 16,
   },
   textRename: {
     marginTop: 16,
   },
-  textInput: {
+  devicesWrapper: {
+    marginTop: 16,
+    paddingHorizontal: 16,
+  },
+  textInputRename: {
+    paddingRight: 0,
+  },
+  marginTop0: {
     marginTop: 0,
   },
-  wrapRename: {
-    marginHorizontal: 16,
+  viewIconSuccess: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 32,
   },
-  devicesWrapper: {
-    paddingHorizontal: 16,
+  marginTop16: {
+    marginTop: 16,
+  },
+  flex1: {
+    flex: 1,
+  },
+  contentContainerScrollView: {
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
   },
 });