Redesign public hashtag page to use a masonry layout (#9822)

[mastodon.git] / app / javascript / mastodon / components / display_name.js

diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js
index 6bdd06db76041a7f2bed83efe7ed9ba86e132093..acddf77c54361806b5c695c1c2540940daf245a3 100644 (file)
--- a/app/javascript/mastodon/components/display_name.js
+++ b/app/javascript/mastodon/components/display_name.js
@@ -1,25 +1,38 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import escapeTextContentForBrowser from 'escape-html';
-import emojify from '../emoji';
+import PropTypes from 'prop-types';
 
-class DisplayName extends React.PureComponent {
+export default class DisplayName extends React.PureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    others: ImmutablePropTypes.list,
+    localDomain: PropTypes.string,
+  };
 
   render () {
-    const displayName     = this.props.account.get('display_name').length === 0 ? this.props.account.get('username') : this.props.account.get('display_name');
-    const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
+    const { account, others, localDomain } = this.props;
+    const displayNameHtml = { __html: account.get('display_name_html') };
+
+    let suffix;
+
+    if (others && others.size > 1) {
+      suffix = `+${others.size}`;
+    } else {
+      let acct = account.get('acct');
+
+      if (acct.indexOf('@') === -1 && localDomain) {
+        acct = `${acct}@${localDomain}`;
+      }
+
+      suffix = <span className='display-name__account'>@{acct}</span>;
+    }
 
     return (
       <span className='display-name'>
-        <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHTML} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
+        <bdi><strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /></bdi> {suffix}
       </span>
     );
   }
 
-};
-
-DisplayName.propTypes = {
-  account: ImmutablePropTypes.map.isRequired
 }
-
-export default DisplayName;