src/shared/components/common/data-type-select.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { i18n } from "../../i18next";
   3 import { DataType } from "../../interfaces";
   4
   5 interface DataTypeSelectProps {
   6   type_: DataType;
   7   onChange?(val: DataType): any;
   8 }
   9
  10 interface DataTypeSelectState {
  11   type_: DataType;
  12 }
  13
  14 export class DataTypeSelect extends Component<
  15   DataTypeSelectProps,
  16   DataTypeSelectState
  17 > {
  18   private emptyState: DataTypeSelectState = {
  19     type_: this.props.type_,
  20   };
  21
  22   constructor(props: any, context: any) {
  23     super(props, context);
  24     this.state = this.emptyState;
  25   }
  26
  27   static getDerivedStateFromProps(props: any): DataTypeSelectProps {
  28     return {
  29       type_: props.type_,
  30     };
  31   }
  32
  33   render() {
  34     return (
  35       <div class="btn-group btn-group-toggle flex-wrap mb-2">
  36         <label
  37           className={`pointer btn btn-outline-secondary
  38             ${this.state.type_ == DataType.Post && "active"}
  39           `}
  40         >
  41           <input
  42             type="radio"
  43             value={DataType.Post}
  44             checked={this.state.type_ == DataType.Post}
  45             onChange={linkEvent(this, this.handleTypeChange)}
  46           />
  47           {i18n.t("posts")}
  48         </label>
  49         <label
  50           className={`pointer btn btn-outline-secondary ${
  51             this.state.type_ == DataType.Comment && "active"
  52           }`}
  53         >
  54           <input
  55             type="radio"
  56             value={DataType.Comment}
  57             checked={this.state.type_ == DataType.Comment}
  58             onChange={linkEvent(this, this.handleTypeChange)}
  59           />
  60           {i18n.t("comments")}
  61         </label>
  62       </div>
  63     );
  64   }
  65
  66   handleTypeChange(i: DataTypeSelect, event: any) {
  67     i.props.onChange(Number(event.target.value));
  68   }
  69 }