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   state: DataTypeSelectState = {
  19     type_: this.props.type_,
  20   };
  21
  22   constructor(props: any, context: any) {
  23     super(props, context);
  24   }
  25
  26   static getDerivedStateFromProps(props: any): DataTypeSelectProps {
  27     return {
  28       type_: props.type_,
  29     };
  30   }
  31
  32   render() {
  33     return (
  34       <div className="btn-group btn-group-toggle flex-wrap">
  35         <label
  36           className={`pointer btn btn-outline-secondary
  37             ${this.state.type_ == DataType.Post && "active"}
  38           `}
  39         >
  40           <input
  41             type="radio"
  42             className="btn-check"
  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             className="btn-check"
  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 }