From aab7d4f1bfae558b8f67c495737e84676ed130a4 Mon Sep 17 00:00:00 2001 From: nanaya Date: Fri, 14 May 2021 17:07:00 +0900 Subject: [PATCH] Clean up ShowMoreLink - remove currently un-typeable ref (probably related to [1] or [2]) - remove `any` typings [1] https://github.com/microsoft/TypeScript/issues/10717 [2] https://github.com/Microsoft/TypeScript/issues/21759 --- .../_components/comment-show-more.coffee | 2 +- .../coffee/react/_components/comment.coffee | 2 +- .../coffee/react/beatmaps/paginator.coffee | 23 ++-- .../coffee/react/changelog-index/main.coffee | 2 +- .../coffee/react/mp-history/content.coffee | 2 +- .../coffee/react/profile-page/beatmaps.coffee | 2 +- .../react/profile-page/historical.coffee | 2 +- .../coffee/react/profile-page/kudosu.coffee | 2 +- .../react/profile-page/recent-activity.coffee | 2 +- .../react/profile-page/top-ranks.coffee | 2 +- .../assets/lib/chat/conversation-view.tsx | 2 +- resources/assets/lib/landing-news.tsx | 2 +- resources/assets/lib/news-index/main.tsx | 2 +- .../lib/notification-widget/item-group.tsx | 2 +- .../assets/lib/notification-widget/main.tsx | 2 +- .../assets/lib/notifications-index/main.tsx | 2 +- resources/assets/lib/show-more-link.tsx | 104 +++++++++--------- 17 files changed, 82 insertions(+), 75 deletions(-) diff --git a/resources/assets/coffee/react/_components/comment-show-more.coffee b/resources/assets/coffee/react/_components/comment-show-more.coffee index dc3a1cf71b2..ec145a9eb0e 100644 --- a/resources/assets/coffee/react/_components/comment-show-more.coffee +++ b/resources/assets/coffee/react/_components/comment-show-more.coffee @@ -4,7 +4,7 @@ import core from 'osu-core-singleton' import * as React from 'react' import { button, div, span } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' import { Spinner } from 'spinner' diff --git a/resources/assets/coffee/react/_components/comment.coffee b/resources/assets/coffee/react/_components/comment.coffee index 48741484636..7b1e5ca5fe8 100644 --- a/resources/assets/coffee/react/_components/comment.coffee +++ b/resources/assets/coffee/react/_components/comment.coffee @@ -10,7 +10,7 @@ import core from 'osu-core-singleton' import * as React from 'react' import { a, button, div, span, textarea } from 'react-dom-factories' import { ReportReportable } from 'report-reportable' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' import { Spinner } from 'spinner' import UserAvatar from 'user-avatar' import { classWithModifiers } from 'utils/css' diff --git a/resources/assets/coffee/react/beatmaps/paginator.coffee b/resources/assets/coffee/react/beatmaps/paginator.coffee index db99f165029..48e487930e8 100644 --- a/resources/assets/coffee/react/beatmaps/paginator.coffee +++ b/resources/assets/coffee/react/beatmaps/paginator.coffee @@ -3,8 +3,8 @@ import core from 'osu-core-singleton' import * as React from 'react' -import { div, a, span, i } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import { div } from 'react-dom-factories' +import ShowMoreLink from 'show-more-link' el = React.createElement export class Paginator extends React.PureComponent @@ -13,7 +13,7 @@ export class Paginator extends React.PureComponent @throttledAutoPagerOnScroll = _.throttle(@autoPagerOnScroll, 500) @autoPagerTriggerDistance = 3000 - @autoPagerTarget = React.createRef() + @lineRef = React.createRef() componentDidMount: => @@ -28,18 +28,19 @@ export class Paginator extends React.PureComponent render: => - el ShowMoreLink, - loading: @props.loading - callback: @showMore - hasMore: @props.more - ref: @autoPagerTarget - modifiers: ['beatmapsets', 't-ddd'] + el React.Fragment, null, + div ref: @lineRef + el ShowMoreLink, + loading: @props.loading + callback: @showMore + hasMore: @props.more + modifiers: ['beatmapsets', 't-ddd'] autoPagerOnScroll: => - return if @props.error? || !@props.more || @props.loading || !@autoPagerTarget.current? + return if @props.error? || !@props.more || @props.loading || !@lineRef.current? - currentTarget = @autoPagerTarget.current.getBoundingClientRect().top + currentTarget = @lineRef.current.getBoundingClientRect().top target = document.documentElement.clientHeight + @autoPagerTriggerDistance return if currentTarget > target diff --git a/resources/assets/coffee/react/changelog-index/main.coffee b/resources/assets/coffee/react/changelog-index/main.coffee index 999c9bfac37..7720374b898 100644 --- a/resources/assets/coffee/react/changelog-index/main.coffee +++ b/resources/assets/coffee/react/changelog-index/main.coffee @@ -6,7 +6,7 @@ import { ChangelogHeaderStreams } from 'changelog-header-streams' import HeaderV4 from 'header-v4' import * as React from 'react' import { button, div, h1, p, span } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' el = React.createElement groupChangelogBuilds = (builds) -> diff --git a/resources/assets/coffee/react/mp-history/content.coffee b/resources/assets/coffee/react/mp-history/content.coffee index c0bbbe1f9d4..24b8f001c4f 100644 --- a/resources/assets/coffee/react/mp-history/content.coffee +++ b/resources/assets/coffee/react/mp-history/content.coffee @@ -5,7 +5,7 @@ import { Event } from './event' import { Game } from './game' import * as React from 'react' import { button, div, h3 } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' import { classWithModifiers } from 'utils/css' el = React.createElement diff --git a/resources/assets/coffee/react/profile-page/beatmaps.coffee b/resources/assets/coffee/react/profile-page/beatmaps.coffee index eaa8e122718..95da09835c4 100644 --- a/resources/assets/coffee/react/profile-page/beatmaps.coffee +++ b/resources/assets/coffee/react/profile-page/beatmaps.coffee @@ -6,7 +6,7 @@ import BeatmapsetPanel from 'beatmapset-panel' import { observable } from 'mobx' import * as React from 'react' import { div, h2, h3, ul, li, a, p, pre, span } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' el = React.createElement sections = [ diff --git a/resources/assets/coffee/react/profile-page/historical.coffee b/resources/assets/coffee/react/profile-page/historical.coffee index c23fc87b57b..e7a28446bde 100644 --- a/resources/assets/coffee/react/profile-page/historical.coffee +++ b/resources/assets/coffee/react/profile-page/historical.coffee @@ -6,7 +6,7 @@ import { ExtraHeader } from './extra-header' import { PlayDetailList } from 'play-detail-list' import * as React from 'react' import { a, div, h2, h3, img, p, small, span } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' el = React.createElement diff --git a/resources/assets/coffee/react/profile-page/kudosu.coffee b/resources/assets/coffee/react/profile-page/kudosu.coffee index c23ad3795df..c17fa01c4d3 100644 --- a/resources/assets/coffee/react/profile-page/kudosu.coffee +++ b/resources/assets/coffee/react/profile-page/kudosu.coffee @@ -4,7 +4,7 @@ import { ExtraHeader } from './extra-header' import * as React from 'react' import { a, div, h3, ul, li, p, span } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' import { StringWithComponent } from 'string-with-component' import { ValueDisplay } from 'value-display' el = React.createElement diff --git a/resources/assets/coffee/react/profile-page/recent-activity.coffee b/resources/assets/coffee/react/profile-page/recent-activity.coffee index 4b8d8a8a5b5..1067d2e5bc7 100644 --- a/resources/assets/coffee/react/profile-page/recent-activity.coffee +++ b/resources/assets/coffee/react/profile-page/recent-activity.coffee @@ -5,7 +5,7 @@ import { AchievementBadge } from './achievement-badge' import { ExtraHeader } from './extra-header' import * as React from 'react' import { div, li, p, ul } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' import TimeWithTooltip from 'time-with-tooltip' el = React.createElement diff --git a/resources/assets/coffee/react/profile-page/top-ranks.coffee b/resources/assets/coffee/react/profile-page/top-ranks.coffee index e5396e56aa2..826ed92886f 100644 --- a/resources/assets/coffee/react/profile-page/top-ranks.coffee +++ b/resources/assets/coffee/react/profile-page/top-ranks.coffee @@ -5,7 +5,7 @@ import { ExtraHeader } from './extra-header' import { PlayDetailList } from 'play-detail-list' import * as React from 'react' import { div, h2, h3, ul, li, a, p, pre, span } from 'react-dom-factories' -import { ShowMoreLink } from 'show-more-link' +import ShowMoreLink from 'show-more-link' el = React.createElement export class TopRanks extends React.PureComponent diff --git a/resources/assets/lib/chat/conversation-view.tsx b/resources/assets/lib/chat/conversation-view.tsx index 1fd74201a23..69b4820cabc 100644 --- a/resources/assets/lib/chat/conversation-view.tsx +++ b/resources/assets/lib/chat/conversation-view.tsx @@ -8,7 +8,7 @@ import { disposeOnUnmount, inject, observer } from 'mobx-react'; import Message from 'models/chat/message'; import * as moment from 'moment'; import * as React from 'react'; -import { ShowMoreLink } from 'show-more-link'; +import ShowMoreLink from 'show-more-link'; import { Spinner } from 'spinner'; import RootDataStore from 'stores/root-data-store'; import { StringWithComponent } from 'string-with-component'; diff --git a/resources/assets/lib/landing-news.tsx b/resources/assets/lib/landing-news.tsx index 95f13c6e7d9..b9f58726f35 100644 --- a/resources/assets/lib/landing-news.tsx +++ b/resources/assets/lib/landing-news.tsx @@ -5,7 +5,7 @@ import { route } from 'laroute'; import * as _ from 'lodash'; import PostItem from 'news-index/post-item'; import * as React from 'react'; -import { ShowMoreLink } from 'show-more-link'; +import ShowMoreLink from 'show-more-link'; export function LandingNews({posts}: {posts: PostJson[]}) { return ( diff --git a/resources/assets/lib/news-index/main.tsx b/resources/assets/lib/news-index/main.tsx index 08cc2926204..ce63601a4f3 100644 --- a/resources/assets/lib/news-index/main.tsx +++ b/resources/assets/lib/news-index/main.tsx @@ -9,7 +9,7 @@ import * as _ from 'lodash'; import NewsHeader from 'news-header'; import NewsSidebar from 'news-sidebar/main'; import * as React from 'react'; -import { ShowMoreLink } from 'show-more-link'; +import ShowMoreLink from 'show-more-link'; import PostItem from './post-item'; interface Props { diff --git a/resources/assets/lib/notification-widget/item-group.tsx b/resources/assets/lib/notification-widget/item-group.tsx index 115f31461b0..a2c3f9ab576 100644 --- a/resources/assets/lib/notification-widget/item-group.tsx +++ b/resources/assets/lib/notification-widget/item-group.tsx @@ -11,7 +11,7 @@ import { NotificationContext } from 'notifications-context'; import NotificationDeleteButton from 'notifications/notification-delete-button'; import NotificationReadButton from 'notifications/notification-read-button'; import * as React from 'react'; -import { ShowMoreLink } from 'show-more-link'; +import ShowMoreLink from 'show-more-link'; import Item from './item'; import ItemCompact from './item-compact'; diff --git a/resources/assets/lib/notification-widget/main.tsx b/resources/assets/lib/notification-widget/main.tsx index 49ccfbe049b..7e759ace1df 100644 --- a/resources/assets/lib/notification-widget/main.tsx +++ b/resources/assets/lib/notification-widget/main.tsx @@ -11,7 +11,7 @@ import NotificationController from 'notifications/notification-controller'; import NotificationReadButton from 'notifications/notification-read-button'; import core from 'osu-core-singleton'; import * as React from 'react'; -import { ShowMoreLink } from 'show-more-link'; +import ShowMoreLink from 'show-more-link'; import Stack from './stack'; interface Link { diff --git a/resources/assets/lib/notifications-index/main.tsx b/resources/assets/lib/notifications-index/main.tsx index 4327c9f82c8..fa29cde9d58 100644 --- a/resources/assets/lib/notifications-index/main.tsx +++ b/resources/assets/lib/notifications-index/main.tsx @@ -15,7 +15,7 @@ import NotificationDeleteButton from 'notifications/notification-delete-button'; import NotificationReadButton from 'notifications/notification-read-button'; import core from 'osu-core-singleton'; import * as React from 'react'; -import { ShowMoreLink } from 'show-more-link'; +import ShowMoreLink from 'show-more-link'; @observer export class Main extends React.Component { diff --git a/resources/assets/lib/show-more-link.tsx b/resources/assets/lib/show-more-link.tsx index a7a1ed677cf..b1843e4fc63 100644 --- a/resources/assets/lib/show-more-link.tsx +++ b/resources/assets/lib/show-more-link.tsx @@ -3,74 +3,80 @@ import * as React from 'react'; import { Spinner } from 'spinner'; +import { classWithModifiers, Modifiers } from 'utils/css'; const bn = 'show-more-link'; interface Props { callback?: () => void; - data?: any; + data?: unknown; direction?: string; - event?: any; - hasMore?: boolean; + event?: string; + hasMore: boolean; label?: string; - loading?: boolean; - modifiers?: string[]; + loading: boolean; + modifiers?: Modifiers; remaining?: number; url?: string; } -// re RefObject: this thing returns three different type of things and I couldn't figure out how to type it. -const ShowMoreLink = React.forwardRef((props: Props, ref: React.RefObject) => { - if (!props.hasMore && !props.loading) { - return null; - } +export default class ShowMoreLink extends React.PureComponent { + static defaultProps = { + hasMore: false, + loading: false, + }; - const icon = ; + render() { + if (!this.props.hasMore && !this.props.loading) { + return null; + } - const children = ( - <> - - - - - - {icon} - + const sharedProps = { + children: this.children(), + className: classWithModifiers(bn, this.props.modifiers), + }; - - {props.label ?? osu.trans('common.buttons.show_more')} - {props.remaining != null && ` (${props.remaining})`} - + if (this.props.loading) { + return ; + } - - {icon} - - - - ); + let onClick = this.props.callback; - const sharedProps = { - children, - className: osu.classWithModifiers(bn, props.modifiers), - ref, - }; + if (onClick == null && this.props.url == null && this.props.event != null) { + const event = this.props.event; + onClick = () => $.publish(event, this.props.data); + } + + if (this.props.url == null) { + return