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

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