1- import { useRef , useEffect } from 'react' ;
1+ import { useRef , useEffect , useState , forwardRef , useImperativeHandle } from 'react' ;
22import { useSelector } from 'react-redux' ;
33import cn from 'classnames' ;
44
55import { GlobalState } from 'src/store/types' ;
66
7+ import { getCaretIndex , isFirefox , updateCaret , insertNodeAtCaret , getSelection } from '../../../../../../utils/contentEditable'
78const send = require ( '../../../../../../../assets/send_button.svg' ) as string ;
9+ const emoji = require ( '../../../../../../../assets/icon-smiley.svg' ) as string ;
10+ const brRegex = / < b r > / g;
811
912import './style.scss' ;
1013
@@ -14,41 +17,123 @@ type Props = {
1417 autofocus : boolean ;
1518 sendMessage : ( event : any ) => void ;
1619 buttonAlt : string ;
20+ onPressEmoji : ( ) => void ;
21+ onChangeSize : ( event : any ) => void ;
1722 onTextInputChange ?: ( event : any ) => void ;
1823}
1924
20- function Sender ( { sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt } : Props ) {
25+ function Sender ( { sendMessage, placeholder, disabledInput, autofocus, onTextInputChange, buttonAlt, onPressEmoji , onChangeSize } : Props , ref ) {
2126 const showChat = useSelector ( ( state : GlobalState ) => state . behavior . showChat ) ;
22- const inputRef = useRef < HTMLSpanElement > ( null ) ;
27+ const inputRef = useRef < HTMLDivElement > ( null ! ) ;
28+ const refContainer = useRef < HTMLDivElement > ( null ) ;
29+ const [ enter , setEnter ] = useState ( false )
30+ const [ firefox , setFirefox ] = useState ( false ) ;
31+ const [ height , setHeight ] = useState ( 0 )
2332 // @ts -ignore
2433 useEffect ( ( ) => { if ( showChat && autofocus ) inputRef . current ?. focus ( ) ; } , [ showChat ] ) ;
34+ useEffect ( ( ) => { setFirefox ( isFirefox ( ) ) } , [ ] )
35+
36+ useImperativeHandle ( ref , ( ) => {
37+ return {
38+ onSelectEmoji : handlerOnSelectEmoji ,
39+ } ;
40+ } ) ;
2541
2642 const handlerOnChange = ( event ) => {
2743 onTextInputChange && onTextInputChange ( event )
2844 }
2945
3046 const handlerSendMessage = ( ) => {
31- const { current } = inputRef
32- if ( current ? .innerHTML ) {
33- sendMessage ( current . innerText ) ;
34- current . innerHTML = ''
47+ const el = inputRef . current ;
48+ if ( el . innerHTML ) {
49+ sendMessage ( el . innerText ) ;
50+ el . innerHTML = ''
3551 }
3652 }
3753
54+ const handlerOnSelectEmoji = ( emoji ) => {
55+ const el = inputRef . current ;
56+ const { start, end } = getSelection ( el )
57+ if ( el . innerHTML ) {
58+ const firstPart = el . innerHTML . substring ( 0 , start ) ;
59+ const secondPart = el . innerHTML . substring ( end ) ;
60+ el . innerHTML = ( `${ firstPart } ${ emoji . native } ${ secondPart } )
61+ } else {
62+ el . innerHTML = emoji . native
63+ }
64+ updateCaret ( el , start , emoji . native . length )
65+ }
66+
3867 const handlerOnKeyPress = ( event ) => {
68+ const el = inputRef . current ;
69+
3970 if ( event . charCode == 13 && ! event . shiftKey ) {
4071 event . preventDefault ( )
4172 handlerSendMessage ( ) ;
4273 }
74+ if ( event . charCode === 13 && event . shiftKey ) {
75+ event . preventDefault ( )
76+ insertNodeAtCaret ( el ) ;
77+ setEnter ( true )
78+ }
79+ }
80+
81+ // TODO use a context for checkSize and toggle picker
82+ const checkSize = ( ) => {
83+ const senderEl = refContainer . current
84+ if ( senderEl && height !== senderEl . clientHeight ) {
85+ const { clientHeight} = senderEl ;
86+ setHeight ( clientHeight )
87+ onChangeSize ( clientHeight ? clientHeight - 1 : 0 )
88+ }
89+ }
90+
91+ const handlerOnKeyUp = ( event ) => {
92+ const el = inputRef . current ;
93+ if ( ! el ) return true ;
94+ // Conditions need for firefox
95+ if ( firefox && event . key === 'Backspace' ) {
96+ if ( el . innerHTML . length === 1 && enter ) {
97+ el . innerHTML = '' ;
98+ setEnter ( false ) ;
99+ }
100+ else if ( brRegex . test ( el . innerHTML ) ) {
101+ el . innerHTML = el . innerHTML . replace ( brRegex , '' ) ;
102+ }
103+ }
104+ checkSize ( ) ;
105+ }
106+
107+ const handlerOnKeyDown = ( event ) => {
108+ const el = inputRef . current ;
109+
110+ if ( event . key === 'Backspace' && el ) {
111+ const caretPosition = getCaretIndex ( inputRef . current ) ;
112+ const character = el . innerHTML . charAt ( caretPosition - 1 ) ;
113+ if ( character === "\n" ) {
114+ event . preventDefault ( ) ;
115+ event . stopPropagation ( ) ;
116+ el . innerHTML = ( el . innerHTML . substring ( 0 , caretPosition - 1 ) + el . innerHTML . substring ( caretPosition ) )
117+ updateCaret ( el , caretPosition , - 1 )
118+ }
119+ }
120+ }
121+
122+ const handlerPressEmoji = ( ) => {
123+ onPressEmoji ( ) ;
124+ checkSize ( ) ;
43125 }
44126
45127 return (
46- < div className = "rcw-sender" >
128+ < div ref = { refContainer } className = "rcw-sender" >
129+ < button className = 'rcw-picker-btn' type = "submit" onClick = { handlerPressEmoji } >
130+ < img src = { emoji } className = "rcw-picker-icon" alt = "" />
131+ </ button >
47132 < div className = { cn ( 'rcw-new-message' , {
48133 'rcw-message-disable' : disabledInput ,
49134 } )
50135 } >
51- < span
136+ < div
52137 spellCheck
53138 className = "rcw-input"
54139 role = "textbox"
@@ -57,7 +142,10 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
57142 placeholder = { placeholder }
58143 onInput = { handlerOnChange }
59144 onKeyPress = { handlerOnKeyPress }
145+ onKeyUp = { handlerOnKeyUp }
146+ onKeyDown = { handlerOnKeyDown }
60147 />
148+
61149 </ div >
62150 < button type = "submit" className = "rcw-send" onClick = { handlerSendMessage } >
63151 < img src = { send } className = "rcw-send-icon" alt = { buttonAlt } />
@@ -66,4 +154,4 @@ function Sender({ sendMessage, placeholder, disabledInput, autofocus, onTextInpu
66154 ) ;
67155}
68156
69- export default Sender ;
157+ export default forwardRef ( Sender ) ;
0 commit comments