diff --git a/demo/src/examples/Examples.js b/demo/src/examples/Examples.js index a9ee75d0..75321441 100644 --- a/demo/src/examples/Examples.js +++ b/demo/src/examples/Examples.js @@ -21,6 +21,7 @@ const users = [ { id: 'jesse', display: 'Jesse Pinkman', + disabled: true, }, { id: 'gus', diff --git a/demo/src/examples/defaultStyle.js b/demo/src/examples/defaultStyle.js index 1b264aa4..931876a6 100644 --- a/demo/src/examples/defaultStyle.js +++ b/demo/src/examples/defaultStyle.js @@ -46,6 +46,10 @@ export default { '&focused': { backgroundColor: '#cee4e5', }, + '&disabled': { + opacity: '0.3', + cursor: 'default', + }, }, }, } diff --git a/src/MentionsInput.js b/src/MentionsInput.js index 5c7d8b00..bf3b210e 100755 --- a/src/MentionsInput.js +++ b/src/MentionsInput.js @@ -921,10 +921,11 @@ class MentionsInput extends React.Component { } addMention = ( - { id, display }, + { id, display, disabled }, { childIndex, querySequenceStart, querySequenceEnd, plainTextValue } ) => { // Insert mention in the marked up value at the correct position + if(disabled) return; const value = this.props.value || '' const config = readConfigFromChildren(this.props.children) const mentionsChild = Children.toArray(this.props.children)[childIndex] diff --git a/src/Suggestion.js b/src/Suggestion.js index 313d3486..c9216055 100644 --- a/src/Suggestion.js +++ b/src/Suggestion.js @@ -17,6 +17,7 @@ class Suggestion extends Component { id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) .isRequired, display: PropTypes.string, + disabled: PropTypes.string }), ]).isRequired, renderSuggestion: PropTypes.func, @@ -96,7 +97,7 @@ const styled = defaultStyle( { cursor: 'pointer', }, - props => ({ '&focused': props.focused }) + props => ({ '&focused': props.focused, '&disabled': props.disabled }) ) export default styled(Suggestion) diff --git a/src/SuggestionsOverlay.js b/src/SuggestionsOverlay.js index cbdefefe..c612d828 100644 --- a/src/SuggestionsOverlay.js +++ b/src/SuggestionsOverlay.js @@ -127,6 +127,7 @@ class SuggestionsOverlay extends Component { renderSuggestion={renderSuggestion} suggestion={result} focused={isFocused} + disabled={result.disabled} onClick={() => this.select(result, queryInfo)} onMouseEnter={() => this.handleMouseEnter(index)} /> @@ -148,7 +149,9 @@ class SuggestionsOverlay extends Component { } select = (suggestion, queryInfo) => { - this.props.onSelect(suggestion, queryInfo) + if(!suggestion.disabled) { + this.props.onSelect(suggestion, queryInfo) + } } setUlElement = (el) => {