Merge pull request #11129 from notbakaneko/feature/ts-store-supporter-tag

Convert StoreSupporterTag to typescript

Author: nanaya

resources/css/bem/store-slider.less

@@ -11,7 +11,6 @@
 
   // inset slider to prevent overflows making the page wider.
   // the 2px is to add a gap between the callout and the page edge.
-  padding: 0 ((@callout-extension / 2) - (@callout-padding * 2) + 2px);
   padding: 0 (@slider-callout--width / 2 - @gutter-v2 + 2px);
 
   @media @desktop {
@@ -76,18 +75,15 @@
     text-align: center;
     border-radius: 10px;
 
-    .js-store--disabled & {
+    &--active {
+      background-color: @osu-colour-pink-1;
+    }
+
+    &--disabled {
       background-color: @osu-colour-b1;
       pointer-events: none;
       cursor: default;
     }
-
-    &.js-slider-preset--active {
-      background-color: @osu-colour-pink-1;
-      .js-store--disabled & {
-        background-color: @osu-colour-b1;
-      }
-    }
   }
 
   &__presets {
@@ -108,16 +104,19 @@
 
   .ui-slider {
     background-color: @osu-colour-b3;
-    .js-store--disabled & {
-      .ui-slider-handle, .ui-slider-range {
-        background-color: @osu-colour-b1;
-      }
-    }
+
     .ui-slider-handle {
       background-color: @osu-colour-pink-1;
     }
+
     .ui-slider-range {
       background-color: @osu-colour-pink-1;
     }
+
+    &--disabled {
+      .ui-slider-handle, .ui-slider-range {
+        background-color: @osu-colour-b1;
+      }
+    }
   }
 }

resources/js/_classes/store-supporter-tag-price.coffee

@@ -5,7 +5,6 @@ import 'app-deps';
 
 import 'jquery-pubsub.coffee';
 
-import '_classes/store-supporter-tag-price.coffee';
 import '_classes/timeout.coffee';
 
 import 'spoilerbox.coffee';

resources/js/components/user-card-store.tsx

@@ -32,7 +32,6 @@ import PostPreview from 'core-legacy/post-preview'
 import Search from 'core-legacy/search'
 import StickyFooter from 'core-legacy/sticky-footer'
 import { StoreCheckout } from 'core-legacy/store-checkout'
-import StoreSupporterTag from 'core-legacy/store-supporter-tag'
 import SyncHeight from 'core-legacy/sync-height'
 import TooltipDefault from 'core-legacy/tooltip-default'
 import { hideLoadingOverlay, showLoadingOverlay } from 'utils/loading-overlay'
@@ -60,7 +59,6 @@ $(document).on 'submit', 'form', (e) ->
 
 $(document).on 'turbolinks:load', ->
   BeatmapPack.initialize()
-  StoreSupporterTag.initialize()
   StoreCheckout.initialize()
 
 # ensure currentUser is updated early enough.

resources/js/core-legacy/store-supporter-tag.coffee

@@ -15,7 +15,6 @@ import RankingUserFilter from 'components/ranking-user-filter';
 import RankingVariantFilter from 'components/ranking-variant-filter';
 import SpotlightSelectOptions from 'components/spotlight-select-options';
 import { UserCard } from 'components/user-card';
-import { UserCardStore } from 'components/user-card-store';
 import { startListening, UserCardTooltip } from 'components/user-card-tooltip';
 import { UserCards } from 'components/user-cards';
 import { WikiSearch } from 'components/wiki-search';
@@ -25,8 +24,10 @@ import core from 'osu-core-singleton';
 import QuickSearch from 'quick-search/main';
 import QuickSearchWorker from 'quick-search/worker';
 import * as React from 'react';
+import StoreSupporterTag from 'store/store-supporter-tag';
 import { parseJson } from 'utils/json';
 import { mapBy } from 'utils/map';
+import { getInt } from 'utils/math';
 
 function reqJson<T>(input: string|undefined): T {
   // This will throw when input is missing and thus parsing empty string.
@@ -106,17 +107,22 @@ core.reactTurbolinks.register('ranking-variant-filter', () => (
   <RankingVariantFilter {...parseJson('json-variant-filter')} />
 ));
 
+core.reactTurbolinks.register('store-supporter-tag', (container) => {
+  const maxMessageLength = getInt(container.dataset.maxMessageLength);
+  if (maxMessageLength == null) {
+    throw new Error('missing maxMessageLength');
+  }
+
+  return <StoreSupporterTag maxMessageLength={maxMessageLength} />;
+});
+
 core.reactTurbolinks.register('user-card', (container) => (
   <UserCard
     modifiers={reqJson(container.dataset.modifiers ?? 'null')}
     user={container.dataset.isCurrentUser === '1' ? core.currentUser : reqJson(container.dataset.user ?? 'null')}
   />
 ));
 
-core.reactTurbolinks.register('user-card-store', (container) => (
-  <UserCardStore user={reqJson(container.dataset.user)} />
-));
-
 core.reactTurbolinks.register('user-card-tooltip', (container) => (
   <UserCardTooltip
     container={container}