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 mb-2">
  35         <label
  36           className={`pointer btn btn-outline-secondary
  37             ${this.state.type_ == DataType.Post && "active"}
  38           `}
  39         >
  40           <input
  41             type="radio"
  42             value={DataType.Post}
  43             checked={this.state.type_ == DataType.Post}
  44             onChange={linkEvent(this, this.handleTypeChange)}
  45           />
  46           {i18n.t("posts")}
  47         </label>
  48         <label
  49           className={`pointer btn btn-outline-secondary ${
  50             this.state.type_ == DataType.Comment && "active"
  51           }`}
  52         >
  53           <input
  54             type="radio"
  55             value={DataType.Comment}
  56             checked={this.state.type_ == DataType.Comment}
  57             onChange={linkEvent(this, this.handleTypeChange)}
  58           />
  59           {i18n.t("comments")}
  60         </label>
  61       </div>
  62     );
  63   }
  64
  65   handleTypeChange(i: DataTypeSelect, event: any) {
  66     i.props.onChange?.(Number(event.target.value));
  67   }
  68 }