bilingo-ui/lib/PriceOptions/index.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var _commonjsHelpers = require('../_commonjsHelpers-4ed3570f.js');
var React = require('react');
var React__default = _interopDefault(React);
var index = require('../index-c2424ad4.js');
var styleInject_es = require('../style-inject.es-dcee06b6.js');
var utils = require('../utils-ed518bfc.js');
var antd = require('antd');
require('antd/lib/button/style');

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_es.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,
      inputRef = _ref.inputRef;
  var defaultOptions = [100, 600, 800]; // 控制是否为其他金额输入情况

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

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

    return React__default.createElement("span", {
      className: index.classnames((_classnames = {}, _commonjsHelpers._defineProperty(_classnames, styles.priceItem, true), _commonjsHelpers._defineProperty(_classnames, styles.active, price === item && !inputStatus), _classnames)),
      key: item,
      onClick: function onClick() {
        onPriceChange(item);
        setInputStatus(false);
      }
    }, utils.formatMoney(item / 100, 0), "\xA5");
  })), React__default.createElement(antd.Input, {
    ref: inputRef,
    onMouseEnter: function onMouseEnter() {
      if (inputStatus && inputRef && inputRef.current) {
        inputRef.current.focus();
        inputRef.current.select();
      }
    },
    suffix: "\xA5",
    className: styles.priceInput,
    value: inputStatus ? price / 100 || "" : "",
    placeholder: "Others",
    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) {
      if (focusScroll) {
        e.target.scrollIntoView();
      }
    }
  })));
};

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