ipanel-rnapp-ajb-base 1.0.0

package/app/components/iot/AddressActionSheet/index.js

@@ -0,0 +1,91 @@
+import React, {useState} from 'react';
+import {View, Text, StyleSheet, Alert, ScrollView} from 'react-native';
+import ActionSheet, {
+  SheetProps,
+  SheetManager,
+} from 'react-native-actions-sheet';
+import {Icon, Button} from '@rneui/themed';
+import {Cell, Picker} from '../../index';
+import {addRoom, adjustRoom} from '../../../api';
+
+const RoomActionSheet = ({sheetId, payload}) => {
+  let title = '创建家庭';
+  let submitBtnText = '创建';
+
+  const [roomName, setRoomName] = useState('');
+
+  const handleShowAddressPicker = () => {};
+
+  const handleSaveRoom = async () => {
+    if (!roomName) {
+      Alert.alert('请填写家庭名称');
+      return;
+    }
+  };
+
+  return (
+    <>
+      <ActionSheet id={sheetId} isModal={false} useBottomSafeAreaPadding>
+        <View style={styles.title}>
+          <Text style={styles.titleText}>{title}</Text>
+          <View style={styles.closeBtn}>
+            <Icon
+              name="close"
+              type="ionicon"
+              size={28}
+              color="#999"
+              onPress={() => {
+                SheetManager.hide(sheetId);
+              }}
+            />
+          </View>
+        </View>
+
+        <ScrollView keyboardShouldPersistTaps="handled">
+          <Cell
+            type="input"
+            label="家庭名称"
+            value={roomName}
+            placeholder="请输入家庭名称"
+            onChangeText={text => setRoomName(text)}
+          />
+          <Cell
+            type="link"
+            label="家庭位置"
+            value={roomName}
+            onRightPress={handleShowAddressPicker}
+          />
+        </ScrollView>
+
+        <View>
+          <Button title={submitBtnText} size="lg" onPress={handleSaveRoom} />
+        </View>
+      </ActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    position: 'relative',
+    height: 50,
+    paddingHorizontal: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 18,
+    color: '#333',
+  },
+  closeBtn: {
+    position: 'absolute',
+    height: '100%',
+    top: 0,
+    right: 0,
+    width: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default RoomActionSheet;

package/app/components/iot/RoomActionSheet/index.js

@@ -0,0 +1,205 @@
+import React, {useState} from 'react';
+import {View, Text, StyleSheet, Alert} from 'react-native';
+import ActionSheet, {
+  SheetProps,
+  SheetManager,
+} from 'react-native-actions-sheet';
+import {Icon, Button} from '@rneui/themed';
+import {Cell, Picker} from '../../index';
+import {addRoom, adjustRoom} from '../../../api';
+
+const roomTypes = [
+  {
+    name: '公司 会议室',
+    value: 'MEETING',
+  },
+  {
+    name: '公司 办公区',
+    value: 'OFFICE',
+  },
+  {
+    name: '公司 办公室',
+    value: 'OFFICEAREA',
+  },
+  {
+    name: '家庭 客厅',
+    value: 'LIVINGROOM',
+  },
+  {
+    name: '家庭 餐厅',
+    value: 'DININGROOM',
+  },
+  {
+    name: '家庭 主卧',
+    value: 'MASTERBEDROOM',
+  },
+  {
+    name: '家庭 儿童房',
+    value: 'KIDSROOM',
+  },
+  {
+    name: '家庭 客房',
+    value: 'GUESTROOM',
+  },
+  {
+    name: '家庭 书房',
+    value: 'STUDYROOM',
+  },
+  {
+    name: '酒店 客房',
+    value: 'HOTELROOM',
+  },
+];
+
+const roomTypeNames = roomTypes.map(item => item.name);
+
+const RoomActionSheet = ({sheetId, payload}) => {
+  let title = '添加房间';
+  let submitBtnText = '添加';
+
+  let defaultRoomTypeIndex = 0;
+  let defaultRoomType = roomTypes[defaultRoomTypeIndex];
+  let defaultRoomName = '';
+
+  if (payload.type === 'editRoom') {
+    title = '编辑房间';
+    submitBtnText = '保存';
+    const currentRoom = payload.roomData;
+    defaultRoomTypeIndex = roomTypes.findIndex(
+      item => item.value === currentRoom.room_type,
+    );
+    if (defaultRoomTypeIndex > -1) {
+      defaultRoomType = roomTypes[defaultRoomTypeIndex];
+    } else {
+      defaultRoomType = {
+        name: currentRoom.room_type,
+        value: currentRoom.room_type,
+      };
+    }
+    defaultRoomName = currentRoom.room_name;
+  } else {
+    defaultRoomName = roomTypes[0].name.split(' ')[1];
+  }
+
+  const [roomTypeIndex, setRoomTypeIndex] = useState(defaultRoomTypeIndex);
+  const [roomType, setRoomType] = useState(defaultRoomType);
+  const onRightPress = async () => {
+    const result = await SheetManager.show('action-picker', {
+      context: 'global',
+      payload: {
+        title: '选择场所类型',
+        defaultIndex: roomTypeIndex,
+        columns: roomTypes,
+        nameProp: 'name',
+      },
+    });
+
+    if (result) {
+      setRoomTypeIndex(result.index);
+      setRoomType(result.data);
+      console.log(result.data);
+      setRoomName(result.data.name.split(' ')[1]);
+    }
+  };
+
+  const [roomName, setRoomName] = useState(defaultRoomName);
+
+  const handleSaveRoom = async () => {
+    if (!roomName) {
+      Alert.alert('请填写房间名称');
+      return;
+    }
+
+    if (payload.type === 'addRoom') {
+      const result = await addRoom({
+        address_id: payload.addressId,
+        room_name: roomName,
+        room_type: roomType.value,
+      });
+
+      if (result.code === 0) {
+        SheetManager.hide(sheetId, {
+          payload: true,
+        });
+      }
+    } else if (payload.type === 'editRoom') {
+      const result = await adjustRoom({
+        room_id: payload.roomData.room_id,
+        room_name: roomName,
+        room_type: roomType.value,
+      });
+
+      if (result.code === 0) {
+        SheetManager.hide(sheetId, {
+          payload: true,
+        });
+      }
+    }
+  };
+
+  return (
+    <>
+      <ActionSheet id={sheetId} isModal={false} useBottomSafeAreaPadding>
+        <View style={styles.title}>
+          <Text style={styles.titleText}>{title}</Text>
+          <View style={styles.closeBtn}>
+            <Icon
+              name="close"
+              type="ionicon"
+              size={28}
+              color="#999"
+              onPress={() => {
+                SheetManager.hide(sheetId);
+              }}
+            />
+          </View>
+        </View>
+
+        {defaultRoomTypeIndex > -1 && (
+          <Cell
+            type="link"
+            label="场所类型"
+            value={roomType.name}
+            onRightPress={onRightPress}
+          />
+        )}
+        <Cell
+          type="input"
+          label="房间名称"
+          value={roomName}
+          placeholder="请输入房间名称"
+          onChangeText={text => setRoomName(text)}
+        />
+
+        <View>
+          <Button title={submitBtnText} size="lg" onPress={handleSaveRoom} />
+        </View>
+      </ActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    position: 'relative',
+    height: 50,
+    paddingHorizontal: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 18,
+    color: '#333',
+  },
+  closeBtn: {
+    position: 'absolute',
+    height: '100%',
+    top: 0,
+    right: 0,
+    width: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default RoomActionSheet;