Thibaut Girka
6 years ago
committed by
ThibG
parent
a243567a3e
commit
47faf47ed5
@ -0,0 +1,42 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import unicodeMapping from 'flavours/glitch/util/emoji/emoji_unicode_mapping_light'; |
||||||
|
|
||||||
|
const assetHost = process.env.CDN_HOST || ''; |
||||||
|
|
||||||
|
export default class AutosuggestEmoji extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
emoji: PropTypes.object.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
render () { |
||||||
|
const { emoji } = this.props; |
||||||
|
let url; |
||||||
|
|
||||||
|
if (emoji.custom) { |
||||||
|
url = emoji.imageUrl; |
||||||
|
} else { |
||||||
|
const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')]; |
||||||
|
|
||||||
|
if (!mapping) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
url = `${assetHost}/emoji/${mapping.filename}.svg`; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='emoji'> |
||||||
|
<img |
||||||
|
className='emojione' |
||||||
|
src={url} |
||||||
|
alt={emoji.native || emoji.colons} |
||||||
|
/> |
||||||
|
|
||||||
|
{emoji.colons} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,224 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import AutosuggestAccountContainer from 'flavours/glitch/features/compose/containers/autosuggest_account_container'; |
||||||
|
import AutosuggestEmoji from './autosuggest_emoji'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { isRtl } from 'flavours/glitch/util/rtl'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
import Textarea from 'react-textarea-autosize'; |
||||||
|
import classNames from 'classnames'; |
||||||
|
|
||||||
|
const textAtCursorMatchesToken = (str, caretPosition) => { |
||||||
|
let word; |
||||||
|
|
||||||
|
let left = str.slice(0, caretPosition).search(/[^\s\u200B]+$/); |
||||||
|
let right = str.slice(caretPosition).search(/[\s\u200B]/); |
||||||
|
|
||||||
|
if (right < 0) { |
||||||
|
word = str.slice(left); |
||||||
|
} else { |
||||||
|
word = str.slice(left, right + caretPosition); |
||||||
|
} |
||||||
|
|
||||||
|
if (!word || word.trim().length < 3 || ['@', ':', '#'].indexOf(word[0]) === -1) { |
||||||
|
return [null, null]; |
||||||
|
} |
||||||
|
|
||||||
|
word = word.trim().toLowerCase(); |
||||||
|
|
||||||
|
if (word.length > 0) { |
||||||
|
return [left, word]; |
||||||
|
} else { |
||||||
|
return [null, null]; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export default class AutosuggestTextarea extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
value: PropTypes.string, |
||||||
|
suggestions: ImmutablePropTypes.list, |
||||||
|
disabled: PropTypes.bool, |
||||||
|
placeholder: PropTypes.string, |
||||||
|
onSuggestionSelected: PropTypes.func.isRequired, |
||||||
|
onSuggestionsClearRequested: PropTypes.func.isRequired, |
||||||
|
onSuggestionsFetchRequested: PropTypes.func.isRequired, |
||||||
|
onChange: PropTypes.func.isRequired, |
||||||
|
onKeyUp: PropTypes.func, |
||||||
|
onKeyDown: PropTypes.func, |
||||||
|
onPaste: PropTypes.func.isRequired, |
||||||
|
autoFocus: PropTypes.bool, |
||||||
|
}; |
||||||
|
|
||||||
|
static defaultProps = { |
||||||
|
autoFocus: true, |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
suggestionsHidden: false, |
||||||
|
selectedSuggestion: 0, |
||||||
|
lastToken: null, |
||||||
|
tokenStart: 0, |
||||||
|
}; |
||||||
|
|
||||||
|
onChange = (e) => { |
||||||
|
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart); |
||||||
|
|
||||||
|
if (token !== null && this.state.lastToken !== token) { |
||||||
|
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart }); |
||||||
|
this.props.onSuggestionsFetchRequested(token); |
||||||
|
} else if (token === null) { |
||||||
|
this.setState({ lastToken: null }); |
||||||
|
this.props.onSuggestionsClearRequested(); |
||||||
|
} |
||||||
|
|
||||||
|
this.props.onChange(e); |
||||||
|
} |
||||||
|
|
||||||
|
onKeyDown = (e) => { |
||||||
|
const { suggestions, disabled } = this.props; |
||||||
|
const { selectedSuggestion, suggestionsHidden } = this.state; |
||||||
|
|
||||||
|
if (disabled) { |
||||||
|
e.preventDefault(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (e.which === 229 || e.isComposing) { |
||||||
|
// Ignore key events during text composition
|
||||||
|
// e.key may be a name of the physical key even in this case (e.x. Safari / Chrome on Mac)
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
switch(e.key) { |
||||||
|
case 'Escape': |
||||||
|
if (suggestions.size === 0 || suggestionsHidden) { |
||||||
|
document.querySelector('.ui').parentElement.focus(); |
||||||
|
} else { |
||||||
|
e.preventDefault(); |
||||||
|
this.setState({ suggestionsHidden: true }); |
||||||
|
} |
||||||
|
|
||||||
|
break; |
||||||
|
case 'ArrowDown': |
||||||
|
if (suggestions.size > 0 && !suggestionsHidden) { |
||||||
|
e.preventDefault(); |
||||||
|
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) }); |
||||||
|
} |
||||||
|
|
||||||
|
break; |
||||||
|
case 'ArrowUp': |
||||||
|
if (suggestions.size > 0 && !suggestionsHidden) { |
||||||
|
e.preventDefault(); |
||||||
|
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) }); |
||||||
|
} |
||||||
|
|
||||||
|
break; |
||||||
|
case 'Enter': |
||||||
|
case 'Tab': |
||||||
|
// Select suggestion
|
||||||
|
if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) { |
||||||
|
e.preventDefault(); |
||||||
|
e.stopPropagation(); |
||||||
|
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion)); |
||||||
|
} |
||||||
|
|
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
if (e.defaultPrevented || !this.props.onKeyDown) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.props.onKeyDown(e); |
||||||
|
} |
||||||
|
|
||||||
|
onBlur = () => { |
||||||
|
this.setState({ suggestionsHidden: true }); |
||||||
|
} |
||||||
|
|
||||||
|
onSuggestionClick = (e) => { |
||||||
|
const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index')); |
||||||
|
e.preventDefault(); |
||||||
|
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion); |
||||||
|
this.textarea.focus(); |
||||||
|
} |
||||||
|
|
||||||
|
componentWillReceiveProps (nextProps) { |
||||||
|
if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) { |
||||||
|
this.setState({ suggestionsHidden: false }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setTextarea = (c) => { |
||||||
|
this.textarea = c; |
||||||
|
} |
||||||
|
|
||||||
|
onPaste = (e) => { |
||||||
|
if (e.clipboardData && e.clipboardData.files.length === 1) { |
||||||
|
this.props.onPaste(e.clipboardData.files); |
||||||
|
e.preventDefault(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
renderSuggestion = (suggestion, i) => { |
||||||
|
const { selectedSuggestion } = this.state; |
||||||
|
let inner, key; |
||||||
|
|
||||||
|
if (typeof suggestion === 'object') { |
||||||
|
inner = <AutosuggestEmoji emoji={suggestion} />; |
||||||
|
key = suggestion.id; |
||||||
|
} else if (suggestion[0] === '#') { |
||||||
|
inner = suggestion; |
||||||
|
key = suggestion; |
||||||
|
} else { |
||||||
|
inner = <AutosuggestAccountContainer id={suggestion} />; |
||||||
|
key = suggestion; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div role='button' tabIndex='0' key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={this.onSuggestionClick}> |
||||||
|
{inner} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props; |
||||||
|
const { suggestionsHidden } = this.state; |
||||||
|
const style = { direction: 'ltr' }; |
||||||
|
|
||||||
|
if (isRtl(value)) { |
||||||
|
style.direction = 'rtl'; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='autosuggest-textarea'> |
||||||
|
<label> |
||||||
|
<span style={{ display: 'none' }}>{placeholder}</span> |
||||||
|
|
||||||
|
<Textarea |
||||||
|
inputRef={this.setTextarea} |
||||||
|
className='autosuggest-textarea__textarea' |
||||||
|
disabled={disabled} |
||||||
|
placeholder={placeholder} |
||||||
|
autoFocus={autoFocus} |
||||||
|
value={value} |
||||||
|
onChange={this.onChange} |
||||||
|
onKeyDown={this.onKeyDown} |
||||||
|
onKeyUp={onKeyUp} |
||||||
|
onBlur={this.onBlur} |
||||||
|
onPaste={this.onPaste} |
||||||
|
style={style} |
||||||
|
aria-autocomplete='list' |
||||||
|
/> |
||||||
|
</label> |
||||||
|
|
||||||
|
<div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}> |
||||||
|
{suggestions.map(this.renderSuggestion)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import Avatar from 'flavours/glitch/components/avatar'; |
||||||
|
import DisplayName from 'flavours/glitch/components/display_name'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
|
||||||
|
export default class AutosuggestAccount extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
account: ImmutablePropTypes.map.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
render () { |
||||||
|
const { account } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='account small' title={account.get('acct')}> |
||||||
|
<div className='account__avatar-wrapper'><Avatar account={account} size={24} /></div> |
||||||
|
<DisplayName account={account} inline /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { connect } from 'react-redux'; |
||||||
|
import AutosuggestAccount from '../components/autosuggest_account'; |
||||||
|
import { makeGetAccount } from 'flavours/glitch/selectors'; |
||||||
|
|
||||||
|
const makeMapStateToProps = () => { |
||||||
|
const getAccount = makeGetAccount(); |
||||||
|
|
||||||
|
const mapStateToProps = (state, { id }) => ({ |
||||||
|
account: getAccount(state, id), |
||||||
|
}); |
||||||
|
|
||||||
|
return mapStateToProps; |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(makeMapStateToProps)(AutosuggestAccount); |
||||||
@ -1,312 +0,0 @@ |
|||||||
// Package imports.
|
|
||||||
import PropTypes from 'prop-types'; |
|
||||||
import React from 'react'; |
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
|
||||||
import { |
|
||||||
defineMessages, |
|
||||||
FormattedMessage, |
|
||||||
} from 'react-intl'; |
|
||||||
import Textarea from 'react-textarea-autosize'; |
|
||||||
|
|
||||||
// Components.
|
|
||||||
import EmojiPicker from 'flavours/glitch/features/emoji_picker'; |
|
||||||
import ComposerTextareaIcons from './icons'; |
|
||||||
import ComposerTextareaSuggestions from './suggestions'; |
|
||||||
|
|
||||||
// Utils.
|
|
||||||
import { isRtl } from 'flavours/glitch/util/rtl'; |
|
||||||
import { |
|
||||||
assignHandlers, |
|
||||||
hiddenComponent, |
|
||||||
} from 'flavours/glitch/util/react_helpers'; |
|
||||||
|
|
||||||
// Messages.
|
|
||||||
const messages = defineMessages({ |
|
||||||
placeholder: { |
|
||||||
defaultMessage: 'What is on your mind?', |
|
||||||
id: 'compose_form.placeholder', |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
// Handlers.
|
|
||||||
const handlers = { |
|
||||||
|
|
||||||
// When blurring the textarea, suggestions are hidden.
|
|
||||||
handleBlur () { |
|
||||||
this.setState({ suggestionsHidden: true }); |
|
||||||
}, |
|
||||||
|
|
||||||
// When the contents of the textarea change, we have to pull up new
|
|
||||||
// autosuggest suggestions if applicable, and also change the value
|
|
||||||
// of the textarea in our store.
|
|
||||||
handleChange ({ |
|
||||||
target: { |
|
||||||
selectionStart, |
|
||||||
value, |
|
||||||
}, |
|
||||||
}) { |
|
||||||
const { |
|
||||||
onChange, |
|
||||||
onSuggestionsFetchRequested, |
|
||||||
onSuggestionsClearRequested, |
|
||||||
} = this.props; |
|
||||||
const { lastToken } = this.state; |
|
||||||
|
|
||||||
// This gets the token at the caret location, if it begins with an
|
|
||||||
// `@` (mentions) or `:` (shortcodes).
|
|
||||||
const left = value.slice(0, selectionStart).search(/[^\s\u200B]+$/); |
|
||||||
const right = value.slice(selectionStart).search(/[\s\u200B]/); |
|
||||||
const token = function () { |
|
||||||
switch (true) { |
|
||||||
case left < 0 || !/[@:#]/.test(value[left]): |
|
||||||
return null; |
|
||||||
case right < 0: |
|
||||||
return value.slice(left); |
|
||||||
default: |
|
||||||
return value.slice(left, right + selectionStart).trim().toLowerCase(); |
|
||||||
} |
|
||||||
}(); |
|
||||||
|
|
||||||
// We only request suggestions for tokens which are at least 3
|
|
||||||
// characters long.
|
|
||||||
if (onSuggestionsFetchRequested && token && token.length >= 3) { |
|
||||||
if (lastToken !== token) { |
|
||||||
this.setState({ |
|
||||||
lastToken: token, |
|
||||||
selectedSuggestion: 0, |
|
||||||
tokenStart: left, |
|
||||||
}); |
|
||||||
onSuggestionsFetchRequested(token); |
|
||||||
} |
|
||||||
} else { |
|
||||||
this.setState({ lastToken: null }); |
|
||||||
if (onSuggestionsClearRequested) { |
|
||||||
onSuggestionsClearRequested(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Updates the value of the textarea.
|
|
||||||
if (onChange) { |
|
||||||
onChange(value); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// Handles a click on an autosuggestion.
|
|
||||||
handleClickSuggestion (index) { |
|
||||||
const { textarea } = this; |
|
||||||
const { |
|
||||||
onSuggestionSelected, |
|
||||||
suggestions, |
|
||||||
} = this.props; |
|
||||||
const { |
|
||||||
lastToken, |
|
||||||
tokenStart, |
|
||||||
} = this.state; |
|
||||||
onSuggestionSelected(tokenStart, lastToken, suggestions.get(index)); |
|
||||||
textarea.focus(); |
|
||||||
}, |
|
||||||
|
|
||||||
// Handles a keypress. If the autosuggestions are visible, we need
|
|
||||||
// to allow keypresses to navigate and sleect them.
|
|
||||||
handleKeyDown (e) { |
|
||||||
const { |
|
||||||
disabled, |
|
||||||
onSubmit, |
|
||||||
onSecondarySubmit, |
|
||||||
onSuggestionSelected, |
|
||||||
suggestions, |
|
||||||
} = this.props; |
|
||||||
const { |
|
||||||
lastToken, |
|
||||||
suggestionsHidden, |
|
||||||
selectedSuggestion, |
|
||||||
tokenStart, |
|
||||||
} = this.state; |
|
||||||
|
|
||||||
// Keypresses do nothing if the composer is disabled.
|
|
||||||
if (disabled) { |
|
||||||
e.preventDefault(); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
// We submit the status on control/meta + enter.
|
|
||||||
if (onSubmit && e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { |
|
||||||
onSubmit(); |
|
||||||
} |
|
||||||
|
|
||||||
// Submit the status with secondary visibility on alt + enter.
|
|
||||||
if (onSecondarySubmit && e.keyCode === 13 && e.altKey) { |
|
||||||
onSecondarySubmit(); |
|
||||||
} |
|
||||||
|
|
||||||
// Switches over the pressed key.
|
|
||||||
switch(e.key) { |
|
||||||
|
|
||||||
// On arrow down, we pick the next suggestion.
|
|
||||||
case 'ArrowDown': |
|
||||||
if (suggestions && suggestions.size > 0 && !suggestionsHidden) { |
|
||||||
e.preventDefault(); |
|
||||||
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) }); |
|
||||||
} |
|
||||||
return; |
|
||||||
|
|
||||||
// On arrow up, we pick the previous suggestion.
|
|
||||||
case 'ArrowUp': |
|
||||||
if (suggestions && suggestions.size > 0 && !suggestionsHidden) { |
|
||||||
e.preventDefault(); |
|
||||||
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) }); |
|
||||||
} |
|
||||||
return; |
|
||||||
|
|
||||||
// On enter or tab, we select the suggestion.
|
|
||||||
case 'Enter': |
|
||||||
case 'Tab': |
|
||||||
if (onSuggestionSelected && lastToken !== null && suggestions && suggestions.size > 0 && !suggestionsHidden) { |
|
||||||
e.preventDefault(); |
|
||||||
e.stopPropagation(); |
|
||||||
onSuggestionSelected(tokenStart, lastToken, suggestions.get(selectedSuggestion)); |
|
||||||
} |
|
||||||
return; |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// When the escape key is released, we either close the suggestions
|
|
||||||
// window or focus the UI.
|
|
||||||
handleKeyUp ({ key }) { |
|
||||||
const { suggestionsHidden } = this.state; |
|
||||||
if (key === 'Escape') { |
|
||||||
if (!suggestionsHidden) { |
|
||||||
this.setState({ suggestionsHidden: true }); |
|
||||||
} else { |
|
||||||
document.querySelector('.ui').parentElement.focus(); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// Handles the pasting of images into the composer.
|
|
||||||
handlePaste (e) { |
|
||||||
const { onPaste } = this.props; |
|
||||||
let d; |
|
||||||
if (onPaste && (d = e.clipboardData) && (d = d.files).length === 1) { |
|
||||||
onPaste(d); |
|
||||||
e.preventDefault(); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// Saves a reference to the textarea.
|
|
||||||
handleRefTextarea (textarea) { |
|
||||||
this.textarea = textarea; |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
// The component.
|
|
||||||
export default class ComposerTextarea extends React.Component { |
|
||||||
|
|
||||||
// Constructor.
|
|
||||||
constructor (props) { |
|
||||||
super(props); |
|
||||||
assignHandlers(this, handlers); |
|
||||||
this.state = { |
|
||||||
suggestionsHidden: false, |
|
||||||
selectedSuggestion: 0, |
|
||||||
lastToken: null, |
|
||||||
tokenStart: 0, |
|
||||||
}; |
|
||||||
|
|
||||||
// Instance variables.
|
|
||||||
this.textarea = null; |
|
||||||
} |
|
||||||
|
|
||||||
// When we receive new suggestions, we unhide the suggestions window
|
|
||||||
// if we didn't have any suggestions before.
|
|
||||||
componentWillReceiveProps (nextProps) { |
|
||||||
const { suggestions } = this.props; |
|
||||||
const { suggestionsHidden } = this.state; |
|
||||||
if (nextProps.suggestions && nextProps.suggestions !== suggestions && nextProps.suggestions.size > 0 && suggestionsHidden) { |
|
||||||
this.setState({ suggestionsHidden: false }); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Rendering.
|
|
||||||
render () { |
|
||||||
const { |
|
||||||
handleBlur, |
|
||||||
handleChange, |
|
||||||
handleClickSuggestion, |
|
||||||
handleKeyDown, |
|
||||||
handleKeyUp, |
|
||||||
handlePaste, |
|
||||||
handleRefTextarea, |
|
||||||
} = this.handlers; |
|
||||||
const { |
|
||||||
advancedOptions, |
|
||||||
autoFocus, |
|
||||||
disabled, |
|
||||||
intl, |
|
||||||
onPickEmoji, |
|
||||||
suggestions, |
|
||||||
value, |
|
||||||
} = this.props; |
|
||||||
const { |
|
||||||
selectedSuggestion, |
|
||||||
suggestionsHidden, |
|
||||||
} = this.state; |
|
||||||
|
|
||||||
// The result.
|
|
||||||
return ( |
|
||||||
<div className='composer--textarea'> |
|
||||||
<label> |
|
||||||
<span {...hiddenComponent}><FormattedMessage {...messages.placeholder} /></span> |
|
||||||
<ComposerTextareaIcons |
|
||||||
advancedOptions={advancedOptions} |
|
||||||
intl={intl} |
|
||||||
/> |
|
||||||
<Textarea |
|
||||||
aria-autocomplete='list' |
|
||||||
autoFocus={autoFocus} |
|
||||||
className='textarea' |
|
||||||
disabled={disabled} |
|
||||||
inputRef={handleRefTextarea} |
|
||||||
onBlur={handleBlur} |
|
||||||
onChange={handleChange} |
|
||||||
onKeyDown={handleKeyDown} |
|
||||||
onKeyUp={handleKeyUp} |
|
||||||
onPaste={handlePaste} |
|
||||||
placeholder={intl.formatMessage(messages.placeholder)} |
|
||||||
value={value} |
|
||||||
style={{ direction: isRtl(value) ? 'rtl' : 'ltr' }} |
|
||||||
/> |
|
||||||
</label> |
|
||||||
<EmojiPicker onPickEmoji={onPickEmoji} /> |
|
||||||
<ComposerTextareaSuggestions |
|
||||||
hidden={suggestionsHidden} |
|
||||||
onSuggestionClick={handleClickSuggestion} |
|
||||||
suggestions={suggestions} |
|
||||||
value={selectedSuggestion} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
// Props.
|
|
||||||
ComposerTextarea.propTypes = { |
|
||||||
advancedOptions: ImmutablePropTypes.map, |
|
||||||
autoFocus: PropTypes.bool, |
|
||||||
disabled: PropTypes.bool, |
|
||||||
intl: PropTypes.object.isRequired, |
|
||||||
onChange: PropTypes.func, |
|
||||||
onPaste: PropTypes.func, |
|
||||||
onPickEmoji: PropTypes.func, |
|
||||||
onSubmit: PropTypes.func, |
|
||||||
onSecondarySubmit: PropTypes.func, |
|
||||||
onSuggestionsClearRequested: PropTypes.func, |
|
||||||
onSuggestionsFetchRequested: PropTypes.func, |
|
||||||
onSuggestionSelected: PropTypes.func, |
|
||||||
suggestions: ImmutablePropTypes.list, |
|
||||||
value: PropTypes.string, |
|
||||||
}; |
|
||||||
|
|
||||||
// Default props.
|
|
||||||
ComposerTextarea.defaultProps = { autoFocus: true }; |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
// Package imports.
|
|
||||||
import PropTypes from 'prop-types'; |
|
||||||
import React from 'react'; |
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
|
||||||
|
|
||||||
// Components.
|
|
||||||
import ComposerTextareaSuggestionsItem from './item'; |
|
||||||
|
|
||||||
// The component.
|
|
||||||
export default function ComposerTextareaSuggestions ({ |
|
||||||
hidden, |
|
||||||
onSuggestionClick, |
|
||||||
suggestions, |
|
||||||
value, |
|
||||||
}) { |
|
||||||
|
|
||||||
// The result.
|
|
||||||
return ( |
|
||||||
<div |
|
||||||
className='composer--textarea--suggestions' |
|
||||||
hidden={hidden || !suggestions || suggestions.isEmpty()} |
|
||||||
> |
|
||||||
{!hidden && suggestions ? suggestions.map( |
|
||||||
(suggestion, index) => ( |
|
||||||
<ComposerTextareaSuggestionsItem |
|
||||||
index={index} |
|
||||||
key={typeof suggestion === 'object' ? suggestion.id : suggestion} |
|
||||||
onClick={onSuggestionClick} |
|
||||||
selected={index === value} |
|
||||||
suggestion={suggestion} |
|
||||||
/> |
|
||||||
) |
|
||||||
) : null} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
ComposerTextareaSuggestions.propTypes = { |
|
||||||
hidden: PropTypes.bool, |
|
||||||
onSuggestionClick: PropTypes.func, |
|
||||||
suggestions: ImmutablePropTypes.list, |
|
||||||
value: PropTypes.number, |
|
||||||
}; |
|
||||||
@ -1,118 +0,0 @@ |
|||||||
// Package imports.
|
|
||||||
import classNames from 'classnames'; |
|
||||||
import PropTypes from 'prop-types'; |
|
||||||
import React from 'react'; |
|
||||||
|
|
||||||
// Components.
|
|
||||||
import AccountContainer from 'flavours/glitch/containers/account_container'; |
|
||||||
|
|
||||||
// Utils.
|
|
||||||
import { unicodeMapping } from 'flavours/glitch/util/emoji'; |
|
||||||
import { assignHandlers } from 'flavours/glitch/util/react_helpers'; |
|
||||||
|
|
||||||
// Gets our asset host from the environment, if available.
|
|
||||||
const assetHost = process.env.CDN_HOST || ''; |
|
||||||
|
|
||||||
// Handlers.
|
|
||||||
const handlers = { |
|
||||||
|
|
||||||
// Handles a click on a suggestion.
|
|
||||||
handleClick (e) { |
|
||||||
const { |
|
||||||
index, |
|
||||||
onClick, |
|
||||||
} = this.props; |
|
||||||
if (onClick) { |
|
||||||
e.preventDefault(); |
|
||||||
e.stopPropagation(); // Prevents following account links
|
|
||||||
onClick(index); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// This prevents the focus from changing, which would mess with
|
|
||||||
// our suggestion code.
|
|
||||||
handleMouseDown (e) { |
|
||||||
e.preventDefault(); |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
// The component.
|
|
||||||
export default class ComposerTextareaSuggestionsItem extends React.Component { |
|
||||||
|
|
||||||
// Constructor.
|
|
||||||
constructor (props) { |
|
||||||
super(props); |
|
||||||
assignHandlers(this, handlers); |
|
||||||
} |
|
||||||
|
|
||||||
// Rendering.
|
|
||||||
render () { |
|
||||||
const { |
|
||||||
handleMouseDown, |
|
||||||
handleClick, |
|
||||||
} = this.handlers; |
|
||||||
const { |
|
||||||
selected, |
|
||||||
suggestion, |
|
||||||
} = this.props; |
|
||||||
const computedClass = classNames('composer--textarea--suggestions--item', { selected }); |
|
||||||
|
|
||||||
// If the suggestion is an object, then we render an emoji.
|
|
||||||
// Otherwise, we render a hashtag if it starts with #, or an account.
|
|
||||||
let inner; |
|
||||||
if (typeof suggestion === 'object') { |
|
||||||
let url; |
|
||||||
if (suggestion.custom) { |
|
||||||
url = suggestion.imageUrl; |
|
||||||
} else { |
|
||||||
const mapping = unicodeMapping[suggestion.native] || unicodeMapping[suggestion.native.replace(/\uFE0F$/, '')]; |
|
||||||
if (mapping) { |
|
||||||
url = `${assetHost}/emoji/${mapping.filename}.svg`; |
|
||||||
} |
|
||||||
} |
|
||||||
if (url) { |
|
||||||
inner = ( |
|
||||||
<div className='emoji'> |
|
||||||
<img |
|
||||||
alt={suggestion.native || suggestion.colons} |
|
||||||
className='emojione' |
|
||||||
src={url} |
|
||||||
/> |
|
||||||
{suggestion.colons} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
} else if (suggestion[0] === '#') { |
|
||||||
inner = suggestion; |
|
||||||
} else { |
|
||||||
inner = ( |
|
||||||
<AccountContainer |
|
||||||
id={suggestion} |
|
||||||
small |
|
||||||
/> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
// The result.
|
|
||||||
return ( |
|
||||||
<div |
|
||||||
className={computedClass} |
|
||||||
onMouseDown={handleMouseDown} |
|
||||||
onClickCapture={handleClick} // Jumps in front of contents
|
|
||||||
role='button' |
|
||||||
tabIndex='0' |
|
||||||
> |
|
||||||
{ inner } |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
// Props.
|
|
||||||
ComposerTextareaSuggestionsItem.propTypes = { |
|
||||||
index: PropTypes.number, |
|
||||||
onClick: PropTypes.func, |
|
||||||
selected: PropTypes.bool, |
|
||||||
suggestion: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue