@atlaskit/mention
Version:
A React component used to display user profiles in a list for 'Mention' functionality
105 lines • 3.02 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import { isResolvingMentionProvider } from '../../api/MentionResource';
import { isPromise, MentionNameStatus } from '../../types';
import Mention, { UNKNOWN_USER_ID } from './';
import debug from '../../util/logger';
export default class ResourcedMention extends React.PureComponent {
constructor(_props) {
super(_props);
_defineProperty(this, "handleMentionProvider", props => {
const {
id,
mentionProvider,
text
} = props;
if (mentionProvider) {
mentionProvider.then(provider => {
const newState = {
isHighlighted: provider.shouldHighlightMention({
id
})
};
if (!text && isResolvingMentionProvider(provider)) {
const nameDetail = provider.resolveMentionName(id);
if (isPromise(nameDetail)) {
nameDetail.then(nameDetailResult => {
this.setStateSafely({
resolvedMentionName: this.processName(nameDetailResult)
});
});
} else {
newState.resolvedMentionName = this.processName(nameDetail);
}
}
this.setStateSafely(newState);
}).catch(() => {
this.setStateSafely({
isHighlighted: false
});
});
} else {
this.setStateSafely({
isHighlighted: false
});
}
});
this._isMounted = false;
this.state = {
isHighlighted: false
};
}
componentDidMount() {
this.handleMentionProvider(this.props);
this._isMounted = true;
}
componentWillUnmount() {
this._isMounted = false;
}
UNSAFE_componentWillReceiveProps(nextProps) {
const {
props
} = this;
if (props.id !== nextProps.id || props.mentionProvider !== nextProps.mentionProvider) {
this.handleMentionProvider(nextProps);
}
}
setStateSafely(newState) {
if (!this._isMounted) {
debug('[ResourcedMention]: cannot setState when component is unmounted.');
return;
}
this.setState(newState);
}
processName(name) {
let mentionName;
switch (name.status) {
case MentionNameStatus.OK:
mentionName = name.name || '';
break;
case MentionNameStatus.SERVICE_ERROR:
case MentionNameStatus.UNKNOWN:
default:
mentionName = UNKNOWN_USER_ID;
break;
}
return `@${mentionName}`;
}
render() {
const {
props,
state
} = this;
return /*#__PURE__*/React.createElement(Mention, {
id: props.id,
text: props.text || state.resolvedMentionName || '',
isHighlighted: state.isHighlighted,
accessLevel: props.accessLevel,
localId: props.localId,
onClick: props.onClick,
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
ssrPlaceholderId: props.ssrPlaceholderId
});
}
}