Clean up ShowMoreLink

nanaya · nanaya · commit aab7d4f1bfae · 2021-05-14T17:08:46.000+09:00
- remove currently un-typeable ref (probably related to [1] or [2]) - remove `any` typings [1] microsoft/TypeScript#10717 [2] microsoft/TypeScript#21759
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<any>: 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<any>) => {
-  if (!props.hasMore && !props.loading) {
-    return null;
-  }
+export default class ShowMoreLink extends React.PureComponent<Props> {
+  static defaultProps = {
+    hasMore: false,
+    loading: false,
+  };
 
-  const icon = <span className={`fas fa-angle-${props.direction ?? 'down'}`} />;
+  render() {
+    if (!this.props.hasMore && !this.props.loading) {
+      return null;
+    }
 
-  const children = (
-    <>
-      <span className={`${bn}__spinner`}>
-        <Spinner />
-      </span>
-      <span className={`${bn}__label`}>
-        <span className={`${bn}__label-icon ${bn}__label-icon--left`}>
-          {icon}
-        </span>
+    const sharedProps = {
+      children: this.children(),
+      className: classWithModifiers(bn, this.props.modifiers),
+    };
 
-        <span className={`${bn}__label-text`}>
-          {props.label ?? osu.trans('common.buttons.show_more')}
-          {props.remaining != null && ` (${props.remaining})`}
-        </span>
+    if (this.props.loading) {
+      return <span data-disabled='1' {...sharedProps} />;
+    }
 
-        <span className={`${bn}__label-icon ${bn}__label-icon--right`}>
-          {icon}
-        </span>
-      </span>
-    </>
-  );
+    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 <button onClick={onClick} type='button' {...sharedProps} />;
+    }
 
-  if (props.loading) {
-    return <span data-disabled='1' {...sharedProps} />;
+    return <a href={this.props.url} onClick={onClick} {...sharedProps} />;
   }
 
-  const url = props.url;
-  let onClick = props.callback;
+  private children() {
+    const icon = <span className={`fas fa-angle-${this.props.direction ?? 'down'}`} />;
 
-  if (onClick == null && url == null) {
-    onClick = () => $.publish(props.event, props.data);
-  }
+    return (
+      <>
+        <span className={`${bn}__spinner`}>
+          <Spinner />
+        </span>
+        <span className={`${bn}__label`}>
+          <span className={`${bn}__label-icon ${bn}__label-icon--left`}>
+            {icon}
+          </span>
 
-  if (url == null) {
-    return <button onClick={onClick} type='button' {...sharedProps} />;
-  } else {
-    return <a href={url} onClick={onClick} {...sharedProps} />;
-  }
-});
+          <span className={`${bn}__label-text`}>
+            {this.props.label ?? osu.trans('common.buttons.show_more')}
+            {this.props.remaining != null && ` (${this.props.remaining})`}
+          </span>
 
-export { ShowMoreLink };
+          <span className={`${bn}__label-icon ${bn}__label-icon--right`}>
+            {icon}
+          </span>
+        </span>
+      </>
+    );
+  }
+}
