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";

export interface WantedPublishPopoverProp {
  popoverConfig?: PopoverProps;
  handleConfirm?: Function;
}

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

export class WantedPublishPopover extends React.Component<
  WantedPublishPopoverProp,
  WantedPublishPopoverState
> {
  constructor(props: WantedPublishPopoverProp) {
    super(props);
    this.state = {
      visible: false,

      current_wanted: null
    };
  }

  handleClose = () => {
    const { handleConfirm } = this.props;
    if (handleConfirm) {
      this.handleUpdateCurrentWanted(
        this.state.current_wanted,
        (value: string) => {
          handleConfirm(Number(value).toFixed(2));
        }
      );
    }
    this.setState({ visible: false });
  };

  clearCurrentWanted = (cb: Function) => {
    this.setState(
      {
        current_wanted: null
      },
      () => cb()
    );
  };

  handleUpdateCurrentWanted = (
    value: string | number | null,
    afterUpdate?: Function
  ) => {
    if (!value) return;
    let result: string | number;
    result = value;
    if (parseInt(`${value}`, 10) === value) {
      // 无小数判断
      result = Number(value);
    }
    if (!result) return;
    if (result > 10000) result = 10000;
    if (result < 5) result = 5;
    this.setState(
      { current_wanted: result },
      () => afterUpdate && afterUpdate(result)
    );
  };

  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) =>
          this.handleUpdateCurrentWanted(v, this.handleClose)
        }
        InputWantedOnBlur={(v: string) => this.handleUpdateCurrentWanted(v)}
        InputWantedClear={() => this.clearCurrentWanted(this.handleClose)}
        CloseFunction={this.handleClose}
      />
    );
  }

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

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

export default WantedPublishPopover;