From 7d9b7f28b85be297ff512ffdb6ec9262506b601d Mon Sep 17 00:00:00 2001 From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com> Date: Wed, 10 May 2023 06:08:54 +0900 Subject: [PATCH] [Glitch] Add type annotation for DisplayName component Port 349cae0b57ee65475a70311863959e7a0cf53065 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/account.jsx | 2 +- .../glitch/components/display_name.jsx | 83 ------------ .../glitch/components/display_name.tsx | 124 ++++++++++++++++++ .../glitch/components/status_header.jsx | 2 +- .../components/moved_note.jsx | 2 +- .../components/autosuggest_account.jsx | 2 +- .../directory/components/account_card.jsx | 2 +- .../components/account.jsx | 2 +- .../components/account_authorize.jsx | 2 +- .../list_adder/components/account.jsx | 2 +- .../list_editor/components/account.jsx | 2 +- .../components/follow_request.jsx | 2 +- .../picture_in_picture/components/header.jsx | 2 +- .../report/components/status_check_box.jsx | 2 +- .../status/components/detailed_status.jsx | 2 +- .../features/ui/components/actions_modal.jsx | 2 +- .../features/ui/components/boost_modal.jsx | 2 +- .../ui/components/favourite_modal.jsx | 2 +- 18 files changed, 140 insertions(+), 99 deletions(-) delete mode 100644 app/javascript/flavours/glitch/components/display_name.jsx create mode 100644 app/javascript/flavours/glitch/components/display_name.tsx diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index e9f04fcda7..66b7e3e4a3 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { Avatar } from './avatar'; -import DisplayName from './display_name'; +import { DisplayName } from './display_name'; import Permalink from './permalink'; import { IconButton } from './icon_button'; import { defineMessages, injectIntl } from 'react-intl'; diff --git a/app/javascript/flavours/glitch/components/display_name.jsx b/app/javascript/flavours/glitch/components/display_name.jsx deleted file mode 100644 index fceca5d961..0000000000 --- a/app/javascript/flavours/glitch/components/display_name.jsx +++ /dev/null @@ -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 => ).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 = ; - suffix = @{acct}; - } else { - displayName = ; - suffix = ; - } - - return ( - - {displayName} - {inline ? ' ' : null} - {suffix} - - ); - } - -} diff --git a/app/javascript/flavours/glitch/components/display_name.tsx b/app/javascript/flavours/glitch/components/display_name.tsx new file mode 100644 index 0000000000..4dfc51c785 --- /dev/null +++ b/app/javascript/flavours/glitch/components/display_name.tsx @@ -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; + localDomain: string; + inline?: boolean; +} +export class DisplayName extends React.PureComponent { + handleMouseEnter: React.ReactEventHandler = ({ + currentTarget, + }) => { + if (autoPlayGif) { + return; + } + + const emojis = + currentTarget.querySelectorAll('img.custom-emoji'); + + emojis.forEach((emoji) => { + const originalSrc = emoji.getAttribute('data-original'); + if (originalSrc != null) emoji.src = originalSrc; + }); + }; + + handleMouseLeave: React.ReactEventHandler = ({ + currentTarget, + }) => { + if (autoPlayGif) { + return; + } + + const emojis = + currentTarget.querySelectorAll('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) => ( + + + + )) + .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 = ( + + + + ); + suffix = @{acct}; + } else { + displayName = ( + + + + + + ); + suffix = ( + + + + ); + } + + return ( + + {displayName} + {inline ? ' ' : null} + {suffix} + + ); + } +} diff --git a/app/javascript/flavours/glitch/components/status_header.jsx b/app/javascript/flavours/glitch/components/status_header.jsx index 8813d19b9c..8f54613579 100644 --- a/app/javascript/flavours/glitch/components/status_header.jsx +++ b/app/javascript/flavours/glitch/components/status_header.jsx @@ -6,7 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; // Mastodon imports. import { Avatar } from './avatar'; import AvatarOverlay from './avatar_overlay'; -import DisplayName from './display_name'; +import { DisplayName } from './display_name'; export default class StatusHeader extends React.PureComponent { diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx index 908b70c5f2..7d025ed418 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx @@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import AvatarOverlay from '../../../components/avatar_overlay'; -import DisplayName from '../../../components/display_name'; +import { DisplayName } from '../../../components/display_name'; import { Icon } from 'flavours/glitch/components/icon'; export default class MovedNote extends ImmutablePureComponent { diff --git a/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx index 8b79692502..db17c6e727 100644 --- a/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.jsx b/app/javascript/flavours/glitch/features/directory/components/account_card.jsx index 79543389c6..da11f881fc 100644 --- a/app/javascript/flavours/glitch/features/directory/components/account_card.jsx +++ b/app/javascript/flavours/glitch/features/directory/components/account_card.jsx @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { makeGetAccount } from 'flavours/glitch/selectors'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import Permalink from 'flavours/glitch/components/permalink'; import { IconButton } from 'flavours/glitch/components/icon_button'; import Button from 'flavours/glitch/components/button'; diff --git a/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx b/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx index e15bc14222..4eeffc402b 100644 --- a/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx +++ b/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx @@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; import { makeGetAccount } from 'flavours/glitch/selectors'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import Permalink from 'flavours/glitch/components/permalink'; import { IconButton } from 'flavours/glitch/components/icon_button'; import { injectIntl, defineMessages } from 'react-intl'; diff --git a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx index b2dfc5dbb3..31e79f042e 100644 --- a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx +++ b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Permalink from 'flavours/glitch/components/permalink'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import { IconButton } from 'flavours/glitch/components/icon_button'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; diff --git a/app/javascript/flavours/glitch/features/list_adder/components/account.jsx b/app/javascript/flavours/glitch/features/list_adder/components/account.jsx index 64522a3a86..0e4b098d92 100644 --- a/app/javascript/flavours/glitch/features/list_adder/components/account.jsx +++ b/app/javascript/flavours/glitch/features/list_adder/components/account.jsx @@ -4,7 +4,7 @@ import { makeGetAccount } from '../../../selectors'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { Avatar } from '../../../components/avatar'; -import DisplayName from '../../../components/display_name'; +import { DisplayName } from '../../../components/display_name'; import { injectIntl } from 'react-intl'; const makeMapStateToProps = () => { diff --git a/app/javascript/flavours/glitch/features/list_editor/components/account.jsx b/app/javascript/flavours/glitch/features/list_editor/components/account.jsx index 69fbaf5042..b94b7e3f62 100644 --- a/app/javascript/flavours/glitch/features/list_editor/components/account.jsx +++ b/app/javascript/flavours/glitch/features/list_editor/components/account.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import { IconButton } from 'flavours/glitch/components/icon_button'; import { defineMessages } from 'react-intl'; diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx index d7c229404b..c61f656f69 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import Permalink from 'flavours/glitch/components/permalink'; import { IconButton } from 'flavours/glitch/components/icon_button'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx index b9c72c276c..43a910c505 100644 --- a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx +++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import { IconButton } from 'flavours/glitch/components/icon_button'; import { Link } from 'react-router-dom'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import { defineMessages, injectIntl } from 'react-intl'; const messages = defineMessages({ diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.jsx b/app/javascript/flavours/glitch/features/report/components/status_check_box.jsx index 6b74aafeea..92ccd4092f 100644 --- a/app/javascript/flavours/glitch/features/report/components/status_check_box.jsx +++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import StatusContent from 'flavours/glitch/components/status_content'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; import Option from './option'; import MediaAttachments from 'flavours/glitch/components/media_attachments'; diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx index 992dd677dd..e36ab818fc 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { Avatar } from 'flavours/glitch/components/avatar'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import StatusContent from 'flavours/glitch/components/status_content'; import MediaGallery from 'flavours/glitch/components/media_gallery'; import AttachmentList from 'flavours/glitch/components/attachment_list'; diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx index 6a98e8b533..cf4bf46343 100644 --- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx @@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import StatusContent from 'flavours/glitch/components/status_content'; import { Avatar } from 'flavours/glitch/components/avatar'; import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import classNames from 'classnames'; import { IconButton } from 'flavours/glitch/components/icon_button'; diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx index 31ae4f68fc..6128df2496 100644 --- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx @@ -7,7 +7,7 @@ import Button from 'flavours/glitch/components/button'; import StatusContent from 'flavours/glitch/components/status_content'; import { Avatar } from 'flavours/glitch/components/avatar'; import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import AttachmentList from 'flavours/glitch/components/attachment_list'; import { Icon } from 'flavours/glitch/components/icon'; import ImmutablePureComponent from 'react-immutable-pure-component'; diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx index 4090b65003..766a35c866 100644 --- a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx @@ -6,7 +6,7 @@ import Button from 'flavours/glitch/components/button'; import StatusContent from 'flavours/glitch/components/status_content'; import { Avatar } from 'flavours/glitch/components/avatar'; import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; -import DisplayName from 'flavours/glitch/components/display_name'; +import { DisplayName } from 'flavours/glitch/components/display_name'; import AttachmentList from 'flavours/glitch/components/attachment_list'; import { Icon } from 'flavours/glitch/components/icon'; import ImmutablePureComponent from 'react-immutable-pure-component';