85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
import { Tab } from "mdui"
|
|
import useEventListener from "../useEventListener.ts"
|
|
import Message from "./Message.jsx"
|
|
import MessageContainer from "./MessageContainer.jsx"
|
|
|
|
import * as React from 'react'
|
|
|
|
export default function ChatFragment({ ...props } = {}) {
|
|
const messageList = React.useState([])
|
|
|
|
const [tabItemSelected, setTabItemSelected] = React.useState('Chat')
|
|
const tabRef: React.MutableRefObject<Tab | null> = React.useRef(null)
|
|
useEventListener(tabRef, 'change', (event) => {
|
|
setTabItemSelected((event.target as HTMLElement as Tab).value as string)
|
|
})
|
|
|
|
return (
|
|
<div style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflowY: 'auto',
|
|
}} {...props}>
|
|
<mdui-tabs ref={tabRef} value="Chat" style={{
|
|
position: 'sticky',
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
}}>
|
|
<mdui-tab value="Chat">Title</mdui-tab>
|
|
<mdui-tab value="Settings">設定</mdui-tab>
|
|
|
|
<mdui-tab-panel slot="panel" value="Chat" style={{
|
|
display: tabItemSelected == "Chat" ? "flex" : "none",
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
}}>
|
|
<div style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
marginTop: "15px"
|
|
}}>
|
|
<mdui-button variant="text">加載更多</mdui-button>
|
|
</div>
|
|
<MessageContainer>
|
|
</MessageContainer>
|
|
{
|
|
// 输入框
|
|
}
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
paddingBottom: '0.1rem',
|
|
paddingTop: '0.1rem',
|
|
height: '4rem',
|
|
position: 'sticky',
|
|
bottom: '2px',
|
|
marginLeft: '5px',
|
|
marginRight: '4px',
|
|
backgroundColor: 'rgb(var(--mdui-color-background))',
|
|
}}>
|
|
<mdui-text-field variant="outlined" placeholder="喵呜~" autosize max-rows={1} style={{
|
|
marginRight: '10px',
|
|
}}></mdui-text-field>
|
|
<mdui-button-icon slot="end-icon" icon="more_vert" style={{
|
|
marginRight: '6px',
|
|
}}></mdui-button-icon>
|
|
<mdui-button-icon icon="send" style={{
|
|
marginRight: '7px',
|
|
}}></mdui-button-icon>
|
|
</div>
|
|
</mdui-tab-panel>
|
|
<mdui-tab-panel slot="panel" value="Settings" style={{
|
|
display: tabItemSelected == "Settings" ? "flex" : "none",
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
}}>
|
|
Work in progress...
|
|
</mdui-tab-panel>
|
|
</mdui-tabs>
|
|
</div>
|
|
)
|
|
}
|