bilingo-ui/src/components/Payment/WantedPublishPopover/index.tsx

import React from "react";
import { Popover } from "antd";
import { PopoverProps } from "antd/lib/popover";
import WantedPublishView from "../WantedPublishView";

import popClose from "../assets/icon/close@2x.png";
import styles from "./WantedPublishPopover.less";
import {
  WatnedPublishBase,
  WatnedPublishBaseP
} from "@components/Payment/BaseClassComponents/WantedPublish";

export interface WantedPublishPopoverProp extends WatnedPublishBaseP {
  popoverConfig?: PopoverProps;
}

export interface WantedPublishPopoverState {
  visible: boolean;
  current_wanted: number | string | null;
}

export class WantedPublishPopover extends WatnedPublishBase<
  WantedPublishPopoverProp,
  WantedPublishPopoverState
> {
  constructor(props: WantedPublishPopoverProp) {
    super(props);
    this.state = {
      visible: false,
      current_wanted: null
    };
  }

  handleConfirmButton = (containerRef?: React.RefObject<any>) => {
    const { handleConfirm } = this.props;
    if (handleConfirm) {
      const value = this.formatCurrentWanted(this.state.current_wanted);
      handleConfirm(this.formatResult(value), containerRef);
    }
    this.setState({ visible: false });
  };

  renderInitView() {
    const { current_wanted } = this.state;
    return (
      <WantedPublishView
        type="pop"
        current_wanted={current_wanted}
        InputWantedValueChange={(v: string) =>
          this.setState({ current_wanted: v })
        }
        InputWantedPressEnter={(v: string) => {
          const value = this.formatCurrentWanted(v);
          if (this.props.handleConfirm)
            this.props.handleConfirm(this.formatResult(value));
          this.setState({ current_wanted: value, visible: false });
        }}
        InputWantedOnBlur={(v: string) => {
          const value = this.formatCurrentWanted(v);
          this.setState({ current_wanted: value });
        }}
        InputWantedClear={() => {
          this.setState(
            {
              current_wanted: null
            },
            () => {
              if (this.props.handleConfirm) this.props.handleConfirm(null);
              this.setState({ visible: false });
            }
          );
        }}
        InputWantedConfirm={this.handleConfirmButton}
        {...this.props.viewConfig}
      />
    );
  }

  render() {
    const { children, popoverConfig = {}, currentWanted } = this.props;

    return (
      <Popover
        placement="left"
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={(value: boolean) => {
          if (value && currentWanted) {
            this.setState({ current_wanted: +currentWanted });
          }
          this.setState({ visible: value });
        }}
        {...popoverConfig}
        content={
          <div className={styles.wantedWrapper}>
            <div role="button" tabIndex={1} className={styles.closeBtnWrapper}>
              <div
                className={styles.closeBtn}
                onClick={() => {
                  this.setState({ visible: false });
                }}
              >
                <img src={popClose} alt="close wanted button" />
              </div>
            </div>
            {this.renderInitView()}
          </div>
        }
      >
        {children}
      </Popover>
    );
  }
}

export default WantedPublishPopover;