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