Merge branch 'main' into main

[lemmy-ui.git] / src / shared / components / common / sort-select.tsx

diff --git a/src/shared/components/common/sort-select.tsx b/src/shared/components/common/sort-select.tsx
index f54d87d80bfcc2a3de42ac33a685b8f2b8b17f23..656a6c09d3c44b92a26d111ec89c0d2fef3f1510 100644 (file)
--- a/src/shared/components/common/sort-select.tsx
+++ b/src/shared/components/common/sort-select.tsx
@@ -6,7 +6,7 @@ import { Icon } from "./icon";
 
 interface SortSelectProps {
   sort: SortType;
-  onChange?(val: SortType): any;
+  onChange(val: SortType): void;
   hideHot?: boolean;
   hideMostComments?: boolean;
 }
@@ -25,7 +25,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
     super(props, context);
   }
 
-  static getDerivedStateFromProps(props: any): SortSelectState {
+  static getDerivedStateFromProps(props: SortSelectProps): SortSelectState {
     return {
       sort: props.sort,
     };
@@ -39,7 +39,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           name={this.id}
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          className="custom-select w-auto mr-2 mb-2"
+          className="sort-select form-select d-inline-block w-auto me-2"
           aria-label={i18n.t("sort_type")}
         >
           <option disabled aria-hidden="true">
@@ -66,6 +66,9 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           <option disabled aria-hidden="true">
             ─────
           </option>
+          <option value={"TopHour"}>{i18n.t("top_hour")}</option>
+          <option value={"TopSixHour"}>{i18n.t("top_six_hours")}</option>
+          <option value={"TopTwelveHour"}>{i18n.t("top_twelve_hours")}</option>
           <option value={"TopDay"}>{i18n.t("top_day")}</option>
           <option value={"TopWeek"}>{i18n.t("top_week")}</option>
           <option value={"TopMonth"}>{i18n.t("top_month")}</option>
@@ -73,7 +76,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           <option value={"TopAll"}>{i18n.t("top_all")}</option>
         </select>
         <a
-          className="text-muted"
+          className="sort-select-icon text-muted"
           href={sortingHelpUrl}
           rel={relTags}
           title={i18n.t("sorting_help")}
@@ -85,6 +88,6 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
   }
 
   handleSortChange(i: SortSelect, event: any) {
-    i.props.onChange?.(event.target.value);
+    i.props.onChange(event.target.value);
   }
 }