Keine Beschreibung

index.js 9.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
  4. var React = require('react');
  5. var React__default = _interopDefault(React);
  6. var styleInject_es = require('../style-inject.es-dcee06b6.js');
  7. var defineProperty = require('../defineProperty-ba7cd53d.js');
  8. var index = require('../index-4c407188.js');
  9. var utils = require('../utils-b800dc99.js');
  10. var slicedToArray = require('../slicedToArray-172f4624.js');
  11. var antd = require('antd');
  12. 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 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";
  13. var styles = {
  14. "options": "PriceOptions_options__ifYbC",
  15. "infoItem": "PriceOptions_infoItem__246mx",
  16. "priceItem": "PriceOptions_priceItem__3CPe3",
  17. "active": "PriceOptions_active__154by",
  18. "priceInput": "PriceOptions_priceInput__2JFc0",
  19. "rate": "PriceOptions_rate__17U-9",
  20. "multi": "PriceOptions_multi__2fM8z",
  21. "priceBtn": "PriceOptions_priceBtn__1UaE8"
  22. };
  23. styleInject_es.styleInject(css);
  24. function ownKeys(object, enumerableOnly) {
  25. var keys = Object.keys(object);
  26. if (Object.getOwnPropertySymbols) {
  27. var symbols = Object.getOwnPropertySymbols(object);
  28. if (enumerableOnly) symbols = symbols.filter(function (sym) {
  29. return Object.getOwnPropertyDescriptor(object, sym).enumerable;
  30. });
  31. keys.push.apply(keys, symbols);
  32. }
  33. return keys;
  34. }
  35. function _objectSpread(target) {
  36. for (var i = 1; i < arguments.length; i++) {
  37. var source = arguments[i] != null ? arguments[i] : {};
  38. if (i % 2) {
  39. ownKeys(Object(source), true).forEach(function (key) {
  40. defineProperty._defineProperty(target, key, source[key]);
  41. });
  42. } else if (Object.getOwnPropertyDescriptors) {
  43. Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
  44. } else {
  45. ownKeys(Object(source)).forEach(function (key) {
  46. Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
  47. });
  48. }
  49. }
  50. return target;
  51. }
  52. var PriceOptions = function PriceOptions(_ref) {
  53. var price = _ref.price,
  54. onPriceChange = _ref.onPriceChange,
  55. allowZero = _ref.allowZero,
  56. _ref$rowMode = _ref.rowMode,
  57. rowMode = _ref$rowMode === void 0 ? "single" : _ref$rowMode,
  58. _ref$size = _ref.size,
  59. size = _ref$size === void 0 ? "normal" : _ref$size,
  60. _ref$focusScroll = _ref.focusScroll,
  61. focusScroll = _ref$focusScroll === void 0 ? true : _ref$focusScroll,
  62. _ref$withTitle = _ref.withTitle,
  63. withTitle = _ref$withTitle === void 0 ? true : _ref$withTitle,
  64. _ref$titleText = _ref.titleText,
  65. titleText = _ref$titleText === void 0 ? "Price" : _ref$titleText,
  66. _ref$inputPlaceholder = _ref.inputPlaceholderText,
  67. inputPlaceholderText = _ref$inputPlaceholder === void 0 ? "Others" : _ref$inputPlaceholder,
  68. _ref$priceOptions = _ref.priceOptions,
  69. priceOptions = _ref$priceOptions === void 0 ? [100, 600, 800] : _ref$priceOptions,
  70. _ref$priceRender = _ref.priceRender,
  71. priceRender = _ref$priceRender === void 0 ? function (i) {
  72. return i / 100;
  73. } : _ref$priceRender,
  74. _ref$inputPriceRender = _ref.inputPriceRender,
  75. inputPriceRender = _ref$inputPriceRender === void 0 ? function (i) {
  76. return i ? i / 100 : "";
  77. } : _ref$inputPriceRender,
  78. _ref$inputSuffix = _ref.inputSuffix,
  79. inputSuffix = _ref$inputSuffix === void 0 ? "¥" : _ref$inputSuffix,
  80. _ref$injectOptions = _ref.injectOptions,
  81. injectOptions = _ref$injectOptions === void 0 ? {
  82. priceBtnClass: function priceBtnClass() {
  83. return undefined;
  84. },
  85. priceInputClass: function priceInputClass() {
  86. return undefined;
  87. }
  88. } : _ref$injectOptions,
  89. inputRef = _ref.inputRef;
  90. var defaultOptions = priceOptions;
  91. var _useState = React.useState(false),
  92. _useState2 = slicedToArray._slicedToArray(_useState, 2),
  93. inputStatus = _useState2[0],
  94. setInputStatus = _useState2[1];
  95. var _useState3 = React.useState(''),
  96. _useState4 = slicedToArray._slicedToArray(_useState3, 2),
  97. inputPrice = _useState4[0],
  98. setInputPrice = _useState4[1];
  99. return React__default.createElement("div", {
  100. className: index.classnames(styles.options, _objectSpread(defineProperty._defineProperty({}, styles.multi, rowMode === "multi"), utils.exportStyleSizeClass(styles, size)))
  101. }, withTitle ? titleText || null : null, React__default.createElement("div", {
  102. className: styles.infoItem
  103. }, React__default.createElement("span", {
  104. className: styles.priceBtn
  105. }, defaultOptions.map(function (item) {
  106. var _objectSpread3;
  107. var isActive = price === item && !inputStatus;
  108. return React__default.createElement("span", {
  109. className: index.classnames(_objectSpread((_objectSpread3 = {}, defineProperty._defineProperty(_objectSpread3, styles.priceItem, true), defineProperty._defineProperty(_objectSpread3, styles.active, !injectOptions.priceBtnClass(isActive) && isActive), _objectSpread3), injectOptions.priceBtnClass(isActive))),
  110. key: item,
  111. onClick: function onClick() {
  112. onPriceChange(item);
  113. setInputStatus(false);
  114. }
  115. }, priceRender(item));
  116. })), React__default.createElement(antd.Input, {
  117. ref: inputRef,
  118. className: index.classnames(styles.priceInput, _objectSpread({}, injectOptions.priceInputClass())),
  119. onMouseEnter: function onMouseEnter() {
  120. if (inputStatus && inputRef && inputRef.current) {
  121. inputRef.current.focus();
  122. inputRef.current.select();
  123. }
  124. },
  125. suffix: inputSuffix,
  126. value: inputStatus ? inputPriceRender(inputPrice) : "",
  127. placeholder: inputPlaceholderText,
  128. onChange: function onChange(e) {
  129. var n = +e.target.value;
  130. if (Number.isNaN(n)) {
  131. return;
  132. }
  133. if (!allowZero && n === 0) {
  134. return;
  135. }
  136. setInputPrice("".concat(n * 100));
  137. onPriceChange(n * 100);
  138. },
  139. onClick: function onClick(e) {
  140. if (!inputStatus) {
  141. setInputPrice('');
  142. setInputStatus(true);
  143. }
  144. },
  145. onFocus: function onFocus(e) {
  146. e.target.placeholder = "";
  147. if (inputStatus) {
  148. setInputPrice("".concat(price));
  149. } else {
  150. setInputPrice('');
  151. setInputStatus(true);
  152. }
  153. if (focusScroll) {
  154. e.target.scrollIntoView();
  155. }
  156. },
  157. onBlur: function onBlur(e) {
  158. e.target.placeholder = inputPlaceholderText;
  159. if (inputPrice) {
  160. setInputStatus(true);
  161. } else {
  162. setInputStatus(false);
  163. }
  164. }
  165. })));
  166. };
  167. exports.default = PriceOptions;
  168. //# sourceMappingURL=index.js.map