Port 349cae0b57
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
parent
ea1f9b4223
commit
7d9b7f28b8
18 changed files with 140 additions and 99 deletions
@ -1,83 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
|
||||||
import PropTypes from 'prop-types'; |
|
||||||
import classNames from 'classnames'; |
|
||||||
import { autoPlayGif } from 'flavours/glitch/initial_state'; |
|
||||||
import Skeleton from 'flavours/glitch/components/skeleton'; |
|
||||||
|
|
||||||
export default class DisplayName extends React.PureComponent { |
|
||||||
|
|
||||||
static propTypes = { |
|
||||||
account: ImmutablePropTypes.map, |
|
||||||
others: ImmutablePropTypes.list, |
|
||||||
localDomain: PropTypes.string, |
|
||||||
inline: PropTypes.bool, |
|
||||||
}; |
|
||||||
|
|
||||||
handleMouseEnter = ({ currentTarget }) => { |
|
||||||
if (autoPlayGif) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
const emojis = currentTarget.querySelectorAll('.custom-emoji'); |
|
||||||
|
|
||||||
for (var i = 0; i < emojis.length; i++) { |
|
||||||
let emoji = emojis[i]; |
|
||||||
emoji.src = emoji.getAttribute('data-original'); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
handleMouseLeave = ({ currentTarget }) => { |
|
||||||
if (autoPlayGif) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
const emojis = currentTarget.querySelectorAll('.custom-emoji'); |
|
||||||
|
|
||||||
for (var i = 0; i < emojis.length; i++) { |
|
||||||
let emoji = emojis[i]; |
|
||||||
emoji.src = emoji.getAttribute('data-static'); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
render () { |
|
||||||
const { others, localDomain, inline } = this.props; |
|
||||||
|
|
||||||
let displayName, suffix, account; |
|
||||||
|
|
||||||
if (others && others.size > 1) { |
|
||||||
displayName = others.take(2).map(a => <bdi key={a.get('id')}><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi>).reduce((prev, cur) => [prev, ', ', cur]); |
|
||||||
|
|
||||||
if (others.size - 2 > 0) { |
|
||||||
suffix = `+${others.size - 2}`; |
|
||||||
} |
|
||||||
} else if ((others && others.size > 0) || this.props.account) { |
|
||||||
if (others && others.size > 0) { |
|
||||||
account = others.first(); |
|
||||||
} else { |
|
||||||
account = this.props.account; |
|
||||||
} |
|
||||||
|
|
||||||
let acct = account.get('acct'); |
|
||||||
|
|
||||||
if (acct.indexOf('@') === -1 && localDomain) { |
|
||||||
acct = `${acct}@${localDomain}`; |
|
||||||
} |
|
||||||
|
|
||||||
displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>; |
|
||||||
suffix = <span className='display-name__account'>@{acct}</span>; |
|
||||||
} else { |
|
||||||
displayName = <bdi><strong className='display-name__html'><Skeleton width='10ch' /></strong></bdi>; |
|
||||||
suffix = <span className='display-name__account'><Skeleton width='7ch' /></span>; |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<span className={classNames('display-name', { inline })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> |
|
||||||
{displayName} |
|
||||||
{inline ? ' ' : null} |
|
||||||
{suffix} |
|
||||||
</span> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
@ -0,0 +1,124 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import classNames from 'classnames'; |
||||||
|
|
||||||
|
import type { List } from 'immutable'; |
||||||
|
|
||||||
|
import type { Account } from 'flavours/glitch/types/resources'; |
||||||
|
|
||||||
|
import { autoPlayGif } from '../initial_state'; |
||||||
|
|
||||||
|
import Skeleton from './skeleton'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
account: Account; |
||||||
|
others: List<Account>; |
||||||
|
localDomain: string; |
||||||
|
inline?: boolean; |
||||||
|
} |
||||||
|
export class DisplayName extends React.PureComponent<Props> { |
||||||
|
handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({ |
||||||
|
currentTarget, |
||||||
|
}) => { |
||||||
|
if (autoPlayGif) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const emojis = |
||||||
|
currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji'); |
||||||
|
|
||||||
|
emojis.forEach((emoji) => { |
||||||
|
const originalSrc = emoji.getAttribute('data-original'); |
||||||
|
if (originalSrc != null) emoji.src = originalSrc; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
handleMouseLeave: React.ReactEventHandler<HTMLSpanElement> = ({ |
||||||
|
currentTarget, |
||||||
|
}) => { |
||||||
|
if (autoPlayGif) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const emojis = |
||||||
|
currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji'); |
||||||
|
|
||||||
|
emojis.forEach((emoji) => { |
||||||
|
const staticSrc = emoji.getAttribute('data-static'); |
||||||
|
if (staticSrc != null) emoji.src = staticSrc; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { others, localDomain, inline } = this.props; |
||||||
|
|
||||||
|
let displayName: React.ReactNode, suffix: React.ReactNode, account: Account; |
||||||
|
|
||||||
|
if (others && others.size > 1) { |
||||||
|
displayName = others |
||||||
|
.take(2) |
||||||
|
.map((a) => ( |
||||||
|
<bdi key={a.get('id')}> |
||||||
|
<strong |
||||||
|
className='display-name__html' |
||||||
|
dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} |
||||||
|
/> |
||||||
|
</bdi> |
||||||
|
)) |
||||||
|
.reduce((prev, cur) => [prev, ', ', cur]); |
||||||
|
|
||||||
|
if (others.size - 2 > 0) { |
||||||
|
suffix = `+${others.size - 2}`; |
||||||
|
} |
||||||
|
} else if ((others && others.size > 0) || this.props.account) { |
||||||
|
if (others && others.size > 0) { |
||||||
|
account = others.first(); |
||||||
|
} else { |
||||||
|
account = this.props.account; |
||||||
|
} |
||||||
|
|
||||||
|
let acct = account.get('acct'); |
||||||
|
|
||||||
|
if (acct.indexOf('@') === -1 && localDomain) { |
||||||
|
acct = `${acct}@${localDomain}`; |
||||||
|
} |
||||||
|
|
||||||
|
displayName = ( |
||||||
|
<bdi> |
||||||
|
<strong |
||||||
|
className='display-name__html' |
||||||
|
dangerouslySetInnerHTML={{ |
||||||
|
__html: account.get('display_name_html'), |
||||||
|
}} |
||||||
|
/> |
||||||
|
</bdi> |
||||||
|
); |
||||||
|
suffix = <span className='display-name__account'>@{acct}</span>; |
||||||
|
} else { |
||||||
|
displayName = ( |
||||||
|
<bdi> |
||||||
|
<strong className='display-name__html'> |
||||||
|
<Skeleton width='10ch' /> |
||||||
|
</strong> |
||||||
|
</bdi> |
||||||
|
); |
||||||
|
suffix = ( |
||||||
|
<span className='display-name__account'> |
||||||
|
<Skeleton width='7ch' /> |
||||||
|
</span> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<span |
||||||
|
className={classNames('display-name', { inline })} |
||||||
|
onMouseEnter={this.handleMouseEnter} |
||||||
|
onMouseLeave={this.handleMouseLeave} |
||||||
|
> |
||||||
|
{displayName} |
||||||
|
{inline ? ' ' : null} |
||||||
|
{suffix} |
||||||
|
</span> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue