bilingo-ui/eslib/PriceOptions/index.js

import { h as _slicedToArray, f as _defineProperty, g as _objectSpread2 } from '../_rollupPluginBabelHelpers-22a1b8cb.js';
import React, { useState } from 'react';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import '../_commonjsHelpers-97e6d7b1.js';
import { c as classnames } from '../index-c9837619.js';
import { Input } from 'antd';

var css = ".PriceOptions_options__ifYbC {\n  border-bottom: 1px dashed #00000017;\n}\n.PriceOptions_options__ifYbC p {\n  font-size: 14px;\n  font-weight: 400;\n  color: #616a79;\n  margin-bottom: 20px;\n}\n.PriceOptions_options__ifYbC .PriceOptions_infoItem__246mx {\n  padding-right: 0;\n}\n.PriceOptions_options__ifYbC .PriceOptions_infoItem__246mx .PriceOptions_priceItem__3CPe3 {\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__ifYbC .PriceOptions_infoItem__246mx .PriceOptions_priceItem__3CPe3.PriceOptions_active__154by {\n  background: rgba(255, 50, 102, 0.1);\n  border-radius: 4px;\n  border: 1px solid #ff3266;\n  color: #616a79;\n}\n.PriceOptions_options__ifYbC .PriceOptions_infoItem__246mx .PriceOptions_priceInput__2JFc0 {\n  display: inline-block;\n  min-width: 70px;\n  width: auto;\n  margin: 6px;\n  text-align: center;\n}\n.PriceOptions_options__ifYbC .PriceOptions_infoItem__246mx 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__ifYbC .PriceOptions_infoItem__246mx .PriceOptions_rate__17U-9 {\n  margin-left: 10px;\n}\n.PriceOptions_options__ifYbC .PriceOptions_infoItem__246mx .PriceOptions_rate__17U-9 i {\n  margin-right: 5px;\n  color: #1790FF;\n}\n.PriceOptions_options__ifYbC.PriceOptions_small__2UZ7N {\n  padding: 0 0 12px 0;\n  border-bottom: none;\n}\n.PriceOptions_options__ifYbC.PriceOptions_small__2UZ7N p {\n  margin-bottom: 8px;\n}\n.PriceOptions_options__ifYbC.PriceOptions_small__2UZ7N .PriceOptions_infoItem__246mx {\n  text-align: center;\n}\n.PriceOptions_options__ifYbC.PriceOptions_small__2UZ7N .PriceOptions_infoItem__246mx .PriceOptions_priceItem__3CPe3 {\n  border-radius: 6px;\n  height: 32px;\n  width: 72px;\n  margin: 0 0 12px 19px;\n}\n.PriceOptions_options__ifYbC.PriceOptions_small__2UZ7N .PriceOptions_infoItem__246mx .PriceOptions_priceItem__3CPe3:first-child {\n  margin: 0 0 12px 0px;\n}\n.PriceOptions_options__ifYbC.PriceOptions_small__2UZ7N .PriceOptions_infoItem__246mx .PriceOptions_priceInput__2JFc0 {\n  display: block;\n  width: 254px;\n  border-radius: 6px;\n  height: 32px;\n}\n.PriceOptions_options__ifYbC.PriceOptions_multi__2fM8z {\n  padding: 20px 20px;\n}\n.PriceOptions_options__ifYbC.PriceOptions_multi__2fM8z p {\n  font-size: 14px;\n  font-weight: 400;\n  color: #616a79;\n}\n.PriceOptions_options__ifYbC.PriceOptions_multi__2fM8z .PriceOptions_infoItem__246mx {\n  padding-right: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.PriceOptions_options__ifYbC.PriceOptions_multi__2fM8z .PriceOptions_infoItem__246mx .PriceOptions_priceBtn__1UaE8 {\n  display: flex;\n  justify-content: space-between;\n}\n.PriceOptions_options__ifYbC.PriceOptions_multi__2fM8z .PriceOptions_infoItem__246mx .PriceOptions_priceItem__3CPe3 {\n  display: inline-block;\n  background-color: #fff;\n  width: 74px;\n  height: 36px;\n  line-height: 36px;\n  border-radius: 4px;\n  border: 1px solid #cfcfcf;\n}\n.PriceOptions_options__ifYbC.PriceOptions_multi__2fM8z .PriceOptions_infoItem__246mx .PriceOptions_priceItem__3CPe3.PriceOptions_active__154by {\n  background-color: #fff;\n  color: #FF3266FF;\n  border-radius: 4px;\n  border: 1px solid #ff3266;\n}\n.PriceOptions_options__ifYbC.PriceOptions_multi__2fM8z .PriceOptions_infoItem__246mx .PriceOptions_priceInput__2JFc0 {\n  border-radius: 6px;\n  height: 36px;\n  width: auto;\n}\n";
var styles = {
  "options": "PriceOptions_options__ifYbC",
  "infoItem": "PriceOptions_infoItem__246mx",
  "priceItem": "PriceOptions_priceItem__3CPe3",
  "active": "PriceOptions_active__154by",
  "priceInput": "PriceOptions_priceInput__2JFc0",
  "rate": "PriceOptions_rate__17U-9",
  "small": "PriceOptions_small__2UZ7N",
  "multi": "PriceOptions_multi__2fM8z",
  "priceBtn": "PriceOptions_priceBtn__1UaE8"
};
styleInject(css);

var PriceOptions = function PriceOptions(_ref) {
  var price = _ref.price,
      onPriceChange = _ref.onPriceChange,
      _ref$rowMode = _ref.rowMode,
      rowMode = _ref$rowMode === void 0 ? "single" : _ref$rowMode,
      _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,
      _ref$inputSuffix = _ref.inputSuffix,
      inputSuffix = _ref$inputSuffix === void 0 ? "￥" : _ref$inputSuffix,
      _ref$injectOptions = _ref.injectOptions,
      injectOptions = _ref$injectOptions === void 0 ? {
    priceBtnClass: {},
    priceInputClass: {}
  } : _ref$injectOptions,
      inputRef = _ref.inputRef;
  var defaultOptions = priceOptions;

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

  var _useState3 = useState(''),
      _useState4 = _slicedToArray(_useState3, 2),
      inputPrice = _useState4[0],
      setInputPrice = _useState4[1];

  return React.createElement("div", {
    className: classnames(styles.options, _defineProperty({}, styles.multi, rowMode === "multi"))
  }, withTitle ? titleText || null : null, React.createElement("div", {
    className: styles.infoItem
  }, React.createElement("span", {
    className: styles.priceBtn
  }, defaultOptions.map(function (item) {
    var _objectSpread2$1;

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

      if (Number.isNaN(n)) {
        return;
      }

      setInputPrice("".concat(n * 100));
      onPriceChange(n * 100);
    },
    onClick: function onClick(e) {
      if (!inputStatus) {
        setInputPrice('');
        setInputStatus(true);
      }
    },
    onFocus: function onFocus(e) {
      e.target.placeholder = "";

      if (inputStatus) {
        setInputPrice("".concat(price));
      } else {
        setInputPrice('');
        setInputStatus(true);
      }

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

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

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