bilingo-ui/src/components/Payment/Common/PriceOptions/index.tsx

import React, { useState } from "react";
import { Input } from "antd";
import classnames from "classnames";
import { formatMoney } from "../../Utils/utils";

import styles from "./PriceOptions.less";

const FormattedMessage = ({ id }: any) => id;

type Props = {
  price: number;
  onPriceChange: (v: number) => void;
  size: "small" | "normal" | "large";
  focusScroll: boolean;
  withTitle: boolean;
  inputRef: React.RefObject<Input>;
};

const PriceOptions = ({
  price,
  onPriceChange,
  size = "normal",
  focusScroll = true,
  withTitle = true,
  inputRef
}: Props) => {
  const defaultOptions = [100, 600, 800];
  // 控制是否为其他金额输入情况
  const [inputStatus, setInputStatus] = useState(false);

  return (
    <div
      className={classnames(styles.options, {
        [styles[size]]: true
      })}
    >
      {withTitle ? (
        <p>
          <FormattedMessage id="pay.price.select.text" />
        </p>
      ) : null}
      <div className={styles.infoItem} style={{ marginBottom: "-12px" }}>
        <span className={styles.priceBtn}>
          {defaultOptions.map(item => (
            <span
              className={classnames({
                [styles.priceItem]: true,
                [styles.active]: price === item && !inputStatus
              })}
              key={item}
              onClick={() => {
                onPriceChange(item);
                setInputStatus(false);
              }}
            >
              <FormattedMessage id={`${formatMoney(item/100, 0)}¥`} />
            </span>
          ))}
        </span>
        <Input
          ref={inputRef}
          onMouseEnter={() => {
            if (inputStatus && inputRef && inputRef.current) {
              inputRef.current.focus();
              inputRef.current.select();
            }
          }}
          suffix="¥"
          className={styles.priceInput}
          value={inputStatus ? price / 100 || "" : ""}
          placeholder="Others"
          onChange={e => {
            const n = +e.target.value;
            if (Number.isNaN(n)) {
              return;
            }
            // 测试暂时改成1分
            onPriceChange(n * 100);
          }}
          onClick={e => {
            onPriceChange(0);
            setInputStatus(true);
          }}
          onFocus={e => {
            if (focusScroll) {
              e.target.scrollIntoView();
            }
          }}
        />
      </div>
    </div>
  );
};

export default PriceOptions;