bilingo-ui/eslib/PriceOptions/index.js

import React, { useState } from 'react';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { _ as _defineProperty } from '../defineProperty-18999f8e.js';
import '../_commonjsHelpers-97e6d7b1.js';
import { c as classnames } from '../index-c9837619.js';
import { e as exportStyleSizeClass } from '../utils-6b513b37.js';
import { _ as _slicedToArray } from '../slicedToArray-4cd9e6d3.js';
import { Input } from 'antd';

var css = ".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  height: 72px;\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_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  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: 1px solid #ff3266;\n}\n.PriceOptions_options__ifYbC.PriceOptions_multi__2fM8z .PriceOptions_infoItem__246mx .PriceOptions_priceInput__2JFc0 {\n  width: 222px;\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",
  "multi": "PriceOptions_multi__2fM8z",
  "priceBtn": "PriceOptions_priceBtn__1UaE8"
};
styleInject(css);

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

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,
      size = _ref$size === void 0 ? "normal" : _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: function priceBtnClass() {
      return undefined;
    },
    priceInputClass: function priceInputClass() {
      return undefined;
    }
  } : _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, _objectSpread(_defineProperty({}, styles.multi, rowMode === "multi"), exportStyleSizeClass(styles, size)))
  }, withTitle ? titleText || null : null, React.createElement("div", {
    className: styles.infoItem
  }, React.createElement("span", {
    className: styles.priceBtn
  }, defaultOptions.map(function (item) {
    var _objectSpread3;

    return React.createElement("span", {
      className: classnames(_objectSpread((_objectSpread3 = {}, _defineProperty(_objectSpread3, styles.priceItem, true), _defineProperty(_objectSpread3, styles.active, price === item && !inputStatus), _objectSpread3), injectOptions.priceBtnClass(price === item && !inputStatus))),
      key: item,
      onClick: function onClick() {
        onPriceChange(item);
        setInputStatus(false);
      }
    }, priceRender(item));
  })), React.createElement(Input, {
    ref: inputRef,
    className: classnames(styles.priceInput, _objectSpread({}, 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