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;