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

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