Port 349cae0b57 to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
fusagiko / takayamaki
1 year ago
committed by
Claire
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