src/shared/components/listing-type-select.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { ListingType } from "lemmy-js-client";
   3 import { UserService } from "../services";
   4 import { randomStr } from "../utils";
   5 import { i18n } from "../i18next";
   6
   7 interface ListingTypeSelectProps {
   8   type_: ListingType;
   9   showLocal?: boolean;
  10   onChange?(val: ListingType): any;
  11 }
  12
  13 interface ListingTypeSelectState {
  14   type_: ListingType;
  15 }
  16
  17 export class ListingTypeSelect extends Component<
  18   ListingTypeSelectProps,
  19   ListingTypeSelectState
  20 > {
  21   private id = `listing-type-input-${randomStr()}`;
  22
  23   private emptyState: ListingTypeSelectState = {
  24     type_: this.props.type_,
  25   };
  26
  27   constructor(props: any, context: any) {
  28     super(props, context);
  29     this.state = this.emptyState;
  30   }
  31
  32   static getDerivedStateFromProps(props: any): ListingTypeSelectProps {
  33     return {
  34       type_: props.type_,
  35       showLocal: props.showLocal,
  36     };
  37   }
  38
  39   render() {
  40     return (
  41       <div class="btn-group btn-group-toggle flex-wrap mb-2">
  42         <label
  43           className={`btn btn-outline-secondary
  44             ${this.state.type_ == ListingType.Subscribed && "active"}
  45             ${
  46               UserService.Instance.localUserView == undefined
  47                 ? "disabled"
  48                 : "pointer"
  49             }
  50           `}
  51         >
  52           <input
  53             id={`${this.id}-subscribed`}
  54             type="radio"
  55             value={ListingType.Subscribed}
  56             checked={this.state.type_ == ListingType.Subscribed}
  57             onChange={linkEvent(this, this.handleTypeChange)}
  58             disabled={UserService.Instance.localUserView == undefined}
  59           />
  60           {i18n.t("subscribed")}
  61         </label>
  62         {this.props.showLocal && (
  63           <label
  64             className={`pointer btn btn-outline-secondary ${
  65               this.state.type_ == ListingType.Local && "active"
  66             }`}
  67           >
  68             <input
  69               id={`${this.id}-local`}
  70               type="radio"
  71               value={ListingType.Local}
  72               checked={this.state.type_ == ListingType.Local}
  73               onChange={linkEvent(this, this.handleTypeChange)}
  74             />
  75             {i18n.t("local")}
  76           </label>
  77         )}
  78         <label
  79           className={`pointer btn btn-outline-secondary ${
  80             (this.state.type_ == ListingType.All && "active") ||
  81             (!this.props.showLocal &&
  82               this.state.type_ == ListingType.Local &&
  83               "active")
  84           }`}
  85         >
  86           <input
  87             id={`${this.id}-all`}
  88             type="radio"
  89             value={ListingType.All}
  90             checked={this.state.type_ == ListingType.All}
  91             onChange={linkEvent(this, this.handleTypeChange)}
  92           />
  93           {i18n.t("all")}
  94         </label>
  95       </div>
  96     );
  97   }
  98
  99   handleTypeChange(i: ListingTypeSelect, event: any) {
 100     i.props.onChange(event.target.value);
 101   }
 102 }