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>
|
||
);
|
||
}
|