mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
add send button and remove emojiPicker
This commit is contained in:
parent
2d2dbc69e5
commit
02f2acb774
@ -11,7 +11,6 @@
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
padding: calc(var(--spacer) / 4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.postbox .editable {
|
.postbox .editable {
|
||||||
@ -23,6 +22,7 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
padding: calc(var(--spacer) / 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.postbox .editable:empty:before {
|
.postbox .editable:empty:before {
|
||||||
@ -64,3 +64,26 @@
|
|||||||
color: currentColor;
|
color: currentColor;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sendButton {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
width: 41px;
|
||||||
|
height: 41px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-left: 1px solid var(--border-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sendButton:disabled {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sendButton .icon {
|
||||||
|
width: 24px;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import React, { useRef, useState, KeyboardEvent } from 'react'
|
import React, { useRef, useState, useMemo, KeyboardEvent } from 'react'
|
||||||
import styles from './Postbox.module.css'
|
import styles from './Postbox.module.css'
|
||||||
import { EmojiClickData } from 'emoji-picker-react'
|
|
||||||
import { useOrbis } from '@context/Orbis'
|
import { useOrbis } from '@context/Orbis'
|
||||||
import EmojiPicker from '../EmojiPicker'
|
import SendIcon from '@images/send.svg'
|
||||||
import { accountTruncate } from '@utils/web3'
|
import { accountTruncate } from '@utils/web3'
|
||||||
import { didToAddress, sleep } from '@utils/orbis'
|
import { didToAddress, sleep } from '@utils/orbis'
|
||||||
|
|
||||||
@ -19,8 +18,6 @@ export default function Postbox({
|
|||||||
cancelReplyTo?: () => void
|
cancelReplyTo?: () => void
|
||||||
callback: (value: IOrbisMessage) => void
|
callback: (value: IOrbisMessage) => void
|
||||||
}) {
|
}) {
|
||||||
const [focusOffset, setFocusOffset] = useState<number | undefined>()
|
|
||||||
const [focusNode, setFocusNode] = useState<Node | undefined>()
|
|
||||||
const [isSending, setIsSending] = useState<boolean>(false)
|
const [isSending, setIsSending] = useState<boolean>(false)
|
||||||
|
|
||||||
const postBoxArea = useRef(null)
|
const postBoxArea = useRef(null)
|
||||||
@ -34,26 +31,21 @@ export default function Postbox({
|
|||||||
setNewConversation
|
setNewConversation
|
||||||
} = useOrbis()
|
} = useOrbis()
|
||||||
|
|
||||||
const saveCaretPos = () => {
|
const isDisabled = useMemo(() => {
|
||||||
const sel = document.getSelection()
|
if (!conversationId || isSending || isCreatingConvo) {
|
||||||
if (sel) {
|
return true
|
||||||
setFocusOffset(sel.focusOffset)
|
|
||||||
setFocusNode(sel.focusNode)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const restoreCaretPos = () => {
|
return false
|
||||||
postBoxArea.current.focus()
|
}, [conversationId, isSending, isCreatingConvo])
|
||||||
const sel = document.getSelection()
|
|
||||||
sel.collapse(focusNode, focusOffset)
|
|
||||||
}
|
|
||||||
|
|
||||||
const share = async () => {
|
const share = async () => {
|
||||||
if (!account || isSending) return false
|
if (!account || isSending || postBoxArea.current.innerText.trim() === '')
|
||||||
|
return false
|
||||||
|
|
||||||
setIsSending(true)
|
setIsSending(true)
|
||||||
|
|
||||||
const body = postBoxArea.current.innerText
|
const body = postBoxArea.current.innerText.trim()
|
||||||
postBoxArea.current.innerText = ''
|
postBoxArea.current.innerText = ''
|
||||||
|
|
||||||
let _conversationId = conversationId
|
let _conversationId = conversationId
|
||||||
@ -117,22 +109,6 @@ export default function Postbox({
|
|||||||
|
|
||||||
if (isSending && isCreatingConvo) {
|
if (isSending && isCreatingConvo) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === 'Enter' && !e.shiftKey) {
|
|
||||||
// Don't generate a new line
|
|
||||||
e.preventDefault()
|
|
||||||
share()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onEmojiClick = (emojiData: EmojiClickData) => {
|
|
||||||
if (focusOffset === undefined || focusNode === undefined) {
|
|
||||||
postBoxArea.current.innerText += emojiData.emoji
|
|
||||||
} else {
|
|
||||||
restoreCaretPos()
|
|
||||||
document.execCommand('insertHTML', false, emojiData.emoji)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -160,13 +136,18 @@ export default function Postbox({
|
|||||||
contentEditable={true}
|
contentEditable={true}
|
||||||
data-placeholder="Type your message here..."
|
data-placeholder="Type your message here..."
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
onKeyUp={saveCaretPos}
|
|
||||||
onMouseUp={saveCaretPos}
|
|
||||||
style={{
|
style={{
|
||||||
pointerEvents: isSending || isCreatingConvo ? 'none' : 'auto'
|
pointerEvents: isSending || isCreatingConvo ? 'none' : 'auto'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<EmojiPicker onEmojiClick={onEmojiClick} />
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.sendButton}
|
||||||
|
onClick={share}
|
||||||
|
disabled={isDisabled}
|
||||||
|
>
|
||||||
|
<SendIcon className={styles.icon} />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user