bilingo-ui/eslib/PriceOptions/index.js

import { i as _slicedToArray, _ as _defineProperty } from '../_commonjsHelpers-aeb41076.js';
import React, { useState } from 'react';
import { c as classnames } from '../index-7951fb2f.js';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { Input } from 'antd';

var css = ".PriceOptions_options__J-ZSS {\n  padding: 20px 50px;\n  border-bottom: 1px dashed #00000017;\n}\n.PriceOptions_options__J-ZSS p {\n  font-size: 14px;\n  font-weight: 400;\n  color: #616a79;\n  margin-bottom: 20px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a {\n  padding-right: 0;\n  margin-bottom: -12px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n  background: rgba(243, 243, 243, 0.14);\n  border-radius: 4px;\n  border: 1px solid #cfcfcf;\n  font-size: 14px;\n  font-weight: 600;\n  color: #616a79;\n  display: inline-block;\n  text-align: center;\n  vertical-align: top;\n  height: 30px;\n  width: 70px;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 6px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2.PriceOptions_active__3WyAU {\n  background: rgba(255, 50, 102, 0.1);\n  border-radius: 4px;\n  border: 1px solid #ff3266;\n  color: #616a79;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n  display: inline-block;\n  min-width: 70px;\n  width: auto;\n  margin: 6px;\n  text-align: center;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  height: 30px;\n  width: 50px;\n  vertical-align: top;\n  padding: 0 5px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_rate__QgHQ3 {\n  margin-left: 10px;\n}\n.PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_rate__QgHQ3 i {\n  margin-right: 5px;\n  color: #1790FF;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl {\n  padding: 0 0 12px 0;\n  border-bottom: none;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl p {\n  margin-bottom: 8px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a {\n  text-align: center;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n  border-radius: 6px;\n  height: 32px;\n  width: 72px;\n  margin: 0 0 12px 19px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2:first-child {\n  margin: 0 0 12px 0px;\n}\n.PriceOptions_options__J-ZSS.PriceOptions_small__2-wzl .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n  display: block;\n  width: 254px;\n  border-radius: 6px;\n  height: 32px;\n}\n@media (max-width: 768px) {\n  .PriceOptions_options__J-ZSS {\n    padding: 20px 20px;\n  }\n  .PriceOptions_options__J-ZSS p {\n    font-size: 14px;\n    font-weight: 400;\n    color: #616a79;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a {\n    padding-right: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceBtn__Xz4m_ {\n    display: flex;\n    justify-content: space-between;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2 {\n    display: inline-block;\n    background-color: #fff;\n    width: 74px;\n    height: 36px;\n    line-height: 36px;\n    border-radius: 6px;\n    border: 1px solid #cfcfcf;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceItem__rJ9o2.PriceOptions_active__3WyAU {\n    background-color: #fff;\n    color: #FF3266FF;\n    border-radius: 4px;\n    border: 1px solid #ff3266;\n  }\n  .PriceOptions_options__J-ZSS .PriceOptions_infoItem__3IL3a .PriceOptions_priceInput__1MrVy {\n    border-radius: 6px;\n    height: 36px;\n    width: auto;\n  }\n}\n";
var styles = {"options":"PriceOptions_options__J-ZSS","infoItem":"PriceOptions_infoItem__3IL3a","priceItem":"PriceOptions_priceItem__rJ9o2","active":"PriceOptions_active__3WyAU","priceInput":"PriceOptions_priceInput__1MrVy","rate":"PriceOptions_rate__QgHQ3","small":"PriceOptions_small__2-wzl","priceBtn":"PriceOptions_priceBtn__Xz4m_"};
styleInject(css);

var PriceOptions = function PriceOptions(_ref) {
  var price = _ref.price,
      onPriceChange = _ref.onPriceChange,
      _ref$size = _ref.size,
      _ref$focusScroll = _ref.focusScroll,
      focusScroll = _ref$focusScroll === void 0 ? true : _ref$focusScroll,
      _ref$withTitle = _ref.withTitle,
      withTitle = _ref$withTitle === void 0 ? true : _ref$withTitle,
      _ref$titleText = _ref.titleText,
      titleText = _ref$titleText === void 0 ? "Price" : _ref$titleText,
      _ref$inputPlaceholder = _ref.inputPlaceholderText,
      inputPlaceholderText = _ref$inputPlaceholder === void 0 ? "Others" : _ref$inputPlaceholder,
      _ref$priceOptions = _ref.priceOptions,
      priceOptions = _ref$priceOptions === void 0 ? [100, 600, 800] : _ref$priceOptions,
      _ref$priceRender = _ref.priceRender,
      priceRender = _ref$priceRender === void 0 ? function (i) {
    return i / 100;
  } : _ref$priceRender,
      _ref$inputPriceRender = _ref.inputPriceRender,
      inputPriceRender = _ref$inputPriceRender === void 0 ? function (i) {
    return i ? i / 100 : "";
  } : _ref$inputPriceRender,
      inputRef = _ref.inputRef;
  var defaultOptions = priceOptions; // 控制是否为其他金额输入情况

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      inputStatus = _useState2[0],
      setInputStatus = _useState2[1];

  return React.createElement("div", {
    className: classnames(styles.options)
  }, withTitle ? titleText || null : null, React.createElement("div", {
    className: styles.infoItem
  }, React.createElement("span", {
    className: styles.priceBtn
  }, defaultOptions.map(function (item) {
    var _classnames;

    return React.createElement("span", {
      className: classnames((_classnames = {}, _defineProperty(_classnames, styles.priceItem, true), _defineProperty(_classnames, styles.active, price === item && !inputStatus), _classnames)),
      key: item,
      onClick: function onClick() {
        onPriceChange(item);
        setInputStatus(false);
      }
    }, priceRender(item));
  })), React.createElement(Input, {
    ref: inputRef,
    onMouseEnter: function onMouseEnter() {
      if (inputStatus && inputRef && inputRef.current) {
        inputRef.current.focus();
        inputRef.current.select();
      }
    },
    suffix: "\xA5",
    className: styles.priceInput,
    value: inputStatus ? inputPriceRender(price) : "",
    placeholder: inputPlaceholderText,
    onChange: function onChange(e) {
      var n = +e.target.value;

      if (Number.isNaN(n)) {
        return;
      } // 测试暂时改成1分


      onPriceChange(n * 100);
    },
    onClick: function onClick(e) {
      onPriceChange(0);
      setInputStatus(true);
    },
    onFocus: function onFocus(e) {
      e.target.placeholder = "";
      setInputStatus(true);

      if (focusScroll) {
        e.target.scrollIntoView();
      }
    },
    onBlur: function onBlur(e) {
      e.target.placeholder = inputPlaceholderText;

      if (price) {
        setInputStatus(true);
      } else {
        setInputStatus(false);
      }
    }
  })));
};

export default PriceOptions;
//# sourceMappingURL=index.js.map