feat: Add configuration to disable chat emoticons #9889 (#9899)

This commit is contained in:
dimitardelchev93
2021-09-10 01:46:28 +03:00
committed by GitHub
parent 0bad0d9ecf
commit db473dfef5
4 changed files with 62 additions and 21 deletions

View File

@@ -8,6 +8,7 @@ import { isMobileBrowser } from '../../../base/environment/utils';
import { translate } from '../../../base/i18n';
import { Icon, IconPlane, IconSmile } from '../../../base/icons';
import { connect } from '../../../base/redux';
import { areSmileysDisabled } from '../../functions';
import SmileysPanel from './SmileysPanel';
@@ -35,7 +36,13 @@ type Props = {
/**
* Invoked to obtain translated strings.
*/
t: Function
t: Function,
/**
* Whether chat emoticons are disabled.
*/
_areSmileysDisabled: boolean
};
/**
@@ -115,28 +122,31 @@ class ChatInput extends Component<Props, State> {
return (
<div className = { `chat-input-container${this.state.message.trim().length ? ' populated' : ''}` }>
<div id = 'chat-input' >
<div className = 'smiley-input'>
<div id = 'smileysarea'>
<div id = 'smileys'>
<div
aria-expanded = { this.state.showSmileysPanel }
aria-haspopup = 'smileysContainer'
aria-label = { this.props.t('chat.smileysPanel') }
className = 'smiley-button'
onClick = { this._onToggleSmileysPanel }
onKeyDown = { this._onEscHandler }
onKeyPress = { this._onToggleSmileysPanelKeyPress }
role = 'button'
tabIndex = { 0 }>
<Icon src = { IconSmile } />
{ this.props._areSmileysDisabled ? null : (
<div className = 'smiley-input'>
<div id = 'smileysarea'>
<div id = 'smileys'>
<div
aria-expanded = { this.state.showSmileysPanel }
aria-haspopup = 'smileysContainer'
aria-label = { this.props.t('chat.smileysPanel') }
className = 'smiley-button'
onClick = { this._onToggleSmileysPanel }
onKeyDown = { this._onEscHandler }
onKeyPress = { this._onToggleSmileysPanelKeyPress }
role = 'button'
tabIndex = { 0 }>
<Icon src = { IconSmile } />
</div>
</div>
</div>
<div
className = { smileysPanelClassName } >
<SmileysPanel
onSmileySelect = { this._onSmileySelect } />
</div>
</div>
<div className = { smileysPanelClassName }>
<SmileysPanel
onSmileySelect = { this._onSmileySelect } />
</div>
</div>
) }
<div className = 'usrmsg-form'>
<TextareaAutosize
autoComplete = 'off'
@@ -336,4 +346,19 @@ class ChatInput extends Component<Props, State> {
}
}
export default translate(connect()(ChatInput));
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
* @private
* @returns {{
* _areSmileysDisabled: boolean
* }}
*/
const mapStateToProps = state => {
return {
_areSmileysDisabled: areSmileysDisabled(state)
};
};
export default translate(connect(mapStateToProps)(ChatInput));