diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 6b7670246..53ba2b0b1 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -50,7 +50,7 @@ $composition-container-height: 60px; align-items: center; background-color: $session-shade-4; padding: 0px $session-margin-md; - min-height: $composition-container-height; + min-height: min-content; & > .session-icon-button { margin-right: $session-margin-sm; diff --git a/ts/components/session/SessionCompositionBox.tsx b/ts/components/session/SessionCompositionBox.tsx index a82b1dda7..7ce3656d1 100644 --- a/ts/components/session/SessionCompositionBox.tsx +++ b/ts/components/session/SessionCompositionBox.tsx @@ -6,7 +6,7 @@ import { SessionEmojiPanel } from './SessionEmojiPanel'; interface Props { placeholder?: string; - onSendMessage: any; + sendMessage: any; } interface State { @@ -16,6 +16,7 @@ interface State { export class SessionCompositionBox extends React.Component { private textarea: React.RefObject; + private fileInput: React.RefObject; constructor(props: any) { super(props); @@ -26,6 +27,11 @@ export class SessionCompositionBox extends React.Component { }; this.textarea = React.createRef(); + this.fileInput = React.createRef(); + + this.onKeyUp = this.onKeyUp.bind(this); + + this.onChooseAttachment = this.onChooseAttachment.bind(this); this.toggleEmojiPanel = this.toggleEmojiPanel.bind(this); } @@ -38,7 +44,14 @@ export class SessionCompositionBox extends React.Component { + + + {
@@ -78,4 +92,41 @@ export class SessionCompositionBox extends React.Component { showEmojiPanel: !this.state.showEmojiPanel, }); } + + + private onChooseAttachment() { + this.fileInput.current?.click(); + } + + private onChoseAttachment() { + + } + + private onKeyUp(event: any) { + console.log(`[vince][msg] Event: `, event); + console.log(`[vince][msg] Key `, event.key); + console.log(`[vince][msg] KeyCode `, event.keyCode); + console.log(`[vince][msg] AltKey `, event.altKey); + console.log(`[vince][msg] Ctrl: `, event.ctrlKey); + console.log(`[vince][msg] Shift: `, event.shiftKey); + + if (event.key === 'Enter' && !event.shiftKey) { + // If shift, newline. Else send message. + event.preventDefault(); + + // FIXME VINCE: Get emoiji, attachments, etc + const messageBody = this.textarea.current?.value; + const attachments = this.fileInput.current?.value; + + + + // this.props.sendMessage( + + // ); + } + + } + + + } diff --git a/ts/components/session/SessionConversation.tsx b/ts/components/session/SessionConversation.tsx index 79c18e1e5..e5d6164e6 100644 --- a/ts/components/session/SessionConversation.tsx +++ b/ts/components/session/SessionConversation.tsx @@ -36,7 +36,6 @@ export class SessionConversation extends React.Component { super(props); const conversationKey = this.props.conversations.selectedConversation; - const conversation = this.props.conversations.conversationLookup[conversationKey]; const unreadCount = conversation.unreadCount; @@ -74,8 +73,6 @@ export class SessionConversation extends React.Component { doneInitialScroll: true, }); }, 100); - - console.log(`[vince][info] HeaderProps:`, this.getHeaderProps()); } public componentDidUpdate(){ @@ -97,21 +94,18 @@ export class SessionConversation extends React.Component { render() { console.log(`[vince][info] Props`, this.props); - console.log(`[vince][info] Unread: `, this.state.unreadCount); - console.log(`[vince][info] Messages:`, this.state.messages); - - // const headerProps = this.props.getHeaderProps; const { messages, conversationKey, doneInitialScroll } = this.state; const loading = !doneInitialScroll || messages.length === 0; const conversation = this.props.conversations.conversationLookup[conversationKey]; + const conversationModel = window.getConversationByKey(conversationKey); const isRss = conversation.isRss; return (
- {this.renderHeader(conversation)} + {this.renderHeader()}
{ { !isRss && ( null} + sendMessage={conversationModel.sendMessage} /> )} @@ -178,49 +172,51 @@ export class SessionConversation extends React.Component { } - public renderHeader(conversation: any) { + public renderHeader() { + const headerProps = this.getHeaderProps(); + return ( null} - onDeleteMessages={() => null} - onDeleteContact={() => null} - onResetSession={() => null} - onCloseOverlay={() => null} - onDeleteSelectedMessages={() => null} - onArchive={() => null} - onMoveToInbox={() => null} - onShowSafetyNumber={() => null} - onShowAllMedia={() => null} - onShowGroupMembers={() => null} - onGoBack={() => null} - onBlockUser={() => null} - onUnblockUser={() => null} - onClearNickname={() => null} - onChangeNickname={() => null} - onCopyPublicKey={() => null} - onLeaveGroup={() => null} - onAddModerators={() => null} - onRemoveModerators={() => null} - onInviteFriends={() => null} + isGroup={headerProps.isGroup} + isArchived={headerProps.isArchived} + isPublic={headerProps.isPublic} + isRss={headerProps.isRss} + amMod={headerProps.amMod} + members={headerProps.members} + showBackButton={headerProps.showBackButton} + timerOptions={headerProps.timerOptions} + isBlocked={headerProps.isBlocked} + hasNickname={headerProps.hasNickname} + isFriendRequestPending={headerProps.isFriendRequestPending} + isOnline={headerProps.isOnline} + selectedMessages={headerProps.selectedMessages} + onSetDisappearingMessages={headerProps.onSetDisappearingMessages} + onDeleteMessages={headerProps.onDeleteMessages} + onDeleteContact={headerProps.onDeleteContact} + onResetSession={headerProps.onResetSession} + onCloseOverlay={headerProps.onCloseOverlay} + onDeleteSelectedMessages={headerProps.onDeleteSelectedMessages} + onArchive={headerProps.onArchive} + onMoveToInbox={headerProps.onMoveToInbox} + onShowSafetyNumber={headerProps.onShowSafetyNumber} + onShowAllMedia={headerProps.onShowAllMedia} + onShowGroupMembers={headerProps.onShowGroupMembers} + onGoBack={headerProps.onGoBack} + onBlockUser={headerProps.onBlockUser} + onUnblockUser={headerProps.onUnblockUser} + onClearNickname={headerProps.onClearNickname} + onChangeNickname={headerProps.onChangeNickname} + onCopyPublicKey={headerProps.onCopyPublicKey} + onLeaveGroup={headerProps.onLeaveGroup} + onAddModerators={headerProps.onAddModerators} + onRemoveModerators={headerProps.onRemoveModerators} + onInviteFriends={headerProps.onInviteFriends} /> ); } @@ -407,7 +403,7 @@ export class SessionConversation extends React.Component { topUnreadMessage?.scrollIntoView(); } - public scrollToBottom(instant = false) { + public scrollToBottom() { // FIXME VINCE: Smooth scrolling that isn't slow@! // this.messagesEndRef.current?.scrollIntoView( // { behavior: firstLoad ? 'auto' : 'smooth' } @@ -418,12 +414,8 @@ export class SessionConversation extends React.Component { } public getHeaderProps() { - const conversationKey = this.props.conversations.selectedConversation; + const {conversationKey} = this.state; const conversation = window.getConversationByKey(conversationKey); - - console.log(`[vince][info] Key:`, conversationKey); - console.log(`[vince][info] Conversation`, conversation); - console.log(`[vince] Manual: `, ); const expireTimer = conversation.get('expireTimer'); const expirationSettingName = expireTimer