68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
|
import React, { useState } from "react";
|
|||
|
|
import DeviceSelection from "./DeviceSelection";
|
|||
|
|
import FriendSelection from "./FriendSelection";
|
|||
|
|
import GroupSelection from "./GroupSelection";
|
|||
|
|
import { Button, Space } from "antd-mobile";
|
|||
|
|
|
|||
|
|
export default function SelectionTest() {
|
|||
|
|
// 设备选择
|
|||
|
|
const [selectedDevices, setSelectedDevices] = useState<string[]>([]);
|
|||
|
|
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false);
|
|||
|
|
|
|||
|
|
// 好友选择
|
|||
|
|
const [selectedFriends, setSelectedFriends] = useState<string[]>([]);
|
|||
|
|
const [friendDialogOpen, setFriendDialogOpen] = useState(false);
|
|||
|
|
|
|||
|
|
// 群组选择
|
|||
|
|
const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
|
|||
|
|
const [groupDialogOpen, setGroupDialogOpen] = useState(false);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: 24 }}>
|
|||
|
|
<h2>选择弹窗测试</h2>
|
|||
|
|
<Space direction="vertical" block>
|
|||
|
|
<div>
|
|||
|
|
<b>DeviceSelection（内嵌输入框+弹窗）</b>
|
|||
|
|
<DeviceSelection
|
|||
|
|
selectedDevices={selectedDevices}
|
|||
|
|
onSelect={setSelectedDevices}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<b>FriendSelection</b>
|
|||
|
|
<Button color="primary" onClick={() => setFriendDialogOpen(true)}>
|
|||
|
|
打开好友选择弹窗
|
|||
|
|
</Button>
|
|||
|
|
<FriendSelection
|
|||
|
|
selectedFriends={selectedFriends}
|
|||
|
|
onSelect={setSelectedFriends}
|
|||
|
|
placeholder="请选择微信好友"
|
|||
|
|
className=""
|
|||
|
|
visible={friendDialogOpen}
|
|||
|
|
onVisibleChange={setFriendDialogOpen}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<b>GroupSelection</b>
|
|||
|
|
<Button color="primary" onClick={() => setGroupDialogOpen(true)}>
|
|||
|
|
打开群组选择弹窗
|
|||
|
|
</Button>
|
|||
|
|
<GroupSelection
|
|||
|
|
selectedGroups={selectedGroups}
|
|||
|
|
onSelect={setSelectedGroups}
|
|||
|
|
placeholder="请选择群聊"
|
|||
|
|
className=""
|
|||
|
|
visible={groupDialogOpen}
|
|||
|
|
onVisibleChange={setGroupDialogOpen}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</Space>
|
|||
|
|
<div style={{ marginTop: 32 }}>
|
|||
|
|
<div>已选设备ID: {selectedDevices.join(", ")}</div>
|
|||
|
|
<div>已选好友ID: {selectedFriends.join(", ")}</div>
|
|||
|
|
<div>已选群组ID: {selectedGroups.join(", ")}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|