dev&build: 调整Price组件

eslib/PriceOptions/index.d.ts

@@ -14,8 +14,8 @@ interface Props {
     inputPriceRender?: Function;
     inputSuffix?: string | JSX.Element[] | JSX.Element;
     injectOptions?: {
-        priceBtnClass: any;
-        priceInputClass: any;
+        priceBtnClass: (isActive: boolean) => any;
+        priceInputClass: Function;
     };
     inputRef: React.RefObject<any>;
 }

eslib/PriceOptions/index.js

@@ -7,7 +7,7 @@ import { e as exportStyleSizeClass } from '../utils-6b513b37.js';
 import { _ as _slicedToArray } from '../slicedToArray-4cd9e6d3.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_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 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",
@@ -83,8 +83,12 @@ var PriceOptions = function PriceOptions(_ref) {
       inputSuffix = _ref$inputSuffix === void 0 ? "￥" : _ref$inputSuffix,
       _ref$injectOptions = _ref.injectOptions,
       injectOptions = _ref$injectOptions === void 0 ? {
-    priceBtnClass: {},
-    priceInputClass: {}
+    priceBtnClass: function priceBtnClass() {
+      return undefined;
+    },
+    priceInputClass: function priceInputClass() {
+      return undefined;
+    }
   } : _ref$injectOptions,
       inputRef = _ref.inputRef;
   var defaultOptions = priceOptions;
@@ -109,7 +113,7 @@ var PriceOptions = function PriceOptions(_ref) {
     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)),
+      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);
@@ -118,7 +122,7 @@ var PriceOptions = function PriceOptions(_ref) {
     }, priceRender(item));
   })), React.createElement(Input, {
     ref: inputRef,
-    className: classnames(styles.priceInput, _objectSpread({}, injectOptions.priceInputClass)),
+    className: classnames(styles.priceInput, _objectSpread({}, injectOptions.priceInputClass())),
     onMouseEnter: function onMouseEnter() {
       if (inputStatus && inputRef && inputRef.current) {
         inputRef.current.focus();

lib/PriceOptions/index.d.ts

@@ -14,8 +14,8 @@ interface Props {
     inputPriceRender?: Function;
     inputSuffix?: string | JSX.Element[] | JSX.Element;
     injectOptions?: {
-        priceBtnClass: any;
-        priceInputClass: any;
+        priceBtnClass: (isActive: boolean) => any;
+        priceInputClass: Function;
     };
     inputRef: React.RefObject<any>;
 }

lib/PriceOptions/index.js

@@ -14,7 +14,7 @@ var utils = require('../utils-b800dc99.js');
 var slicedToArray = require('../slicedToArray-172f4624.js');
 var antd = require('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_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 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",
@@ -90,8 +90,12 @@ var PriceOptions = function PriceOptions(_ref) {
       inputSuffix = _ref$inputSuffix === void 0 ? "￥" : _ref$inputSuffix,
       _ref$injectOptions = _ref.injectOptions,
       injectOptions = _ref$injectOptions === void 0 ? {
-    priceBtnClass: {},
-    priceInputClass: {}
+    priceBtnClass: function priceBtnClass() {
+      return undefined;
+    },
+    priceInputClass: function priceInputClass() {
+      return undefined;
+    }
   } : _ref$injectOptions,
       inputRef = _ref.inputRef;
   var defaultOptions = priceOptions;
@@ -116,7 +120,7 @@ var PriceOptions = function PriceOptions(_ref) {
     var _objectSpread3;
 
     return React__default.createElement("span", {
-      className: index.classnames(_objectSpread((_objectSpread3 = {}, defineProperty._defineProperty(_objectSpread3, styles.priceItem, true), defineProperty._defineProperty(_objectSpread3, styles.active, price === item && !inputStatus), _objectSpread3), injectOptions.priceBtnClass)),
+      className: index.classnames(_objectSpread((_objectSpread3 = {}, defineProperty._defineProperty(_objectSpread3, styles.priceItem, true), defineProperty._defineProperty(_objectSpread3, styles.active, price === item && !inputStatus), _objectSpread3), injectOptions.priceBtnClass(price === item && !inputStatus))),
       key: item,
       onClick: function onClick() {
         onPriceChange(item);
@@ -125,7 +129,7 @@ var PriceOptions = function PriceOptions(_ref) {
     }, priceRender(item));
   })), React__default.createElement(antd.Input, {
     ref: inputRef,
-    className: index.classnames(styles.priceInput, _objectSpread({}, injectOptions.priceInputClass)),
+    className: index.classnames(styles.priceInput, _objectSpread({}, injectOptions.priceInputClass())),
     onMouseEnter: function onMouseEnter() {
       if (inputStatus && inputRef && inputRef.current) {
         inputRef.current.focus();

src/components/Payment/PriceOptions/PriceOptions.less

@@ -1,8 +1,7 @@
 @item_width: 70px;
 @item_margin: 6px;
+@item_border_width: 1px;
 .options{
-  border-bottom: 1px dashed #00000017;
-
   p {
     font-size:14px;
     font-weight:400;
@@ -14,7 +13,7 @@
     .priceItem {
       background:rgba(243,243,243,0.14);
       border-radius:4px;
-      border:1px solid rgba(207,207,207,1);
+      border:@item_border_width solid rgba(207,207,207,1);
       font-size:14px;
       font-weight:600;
       color:rgba(97,106,121,1);
@@ -30,13 +29,14 @@
       &.active {
         background:rgba(255,50,102,0.1);
         border-radius:4px;
-        border:1px solid rgba(255,50,102,1);
+        border:@item_border_width solid rgba(255,50,102,1);
         color:rgba(97,106,121,1);
       }
     }
     .priceInput {
         display: inline-block;
         min-width: 70px;
+        height: @item_width + @item_border_width * 2;
         width: auto;
         margin: @item_margin;
         text-align: center;
@@ -76,11 +76,11 @@
         display: inline-block;
         background-color: #fff;
         border-radius:4px;
-        border:1px solid rgba(207,207,207,1);
+        border:@item_border_width solid rgba(207,207,207,1);
           &.active {
           background-color: #fff;
           color: #FF3266FF;
-          border:1px solid rgba(255,50,102,1);
+          border:@item_border_width solid rgba(255,50,102,1);
         }
       }
       .priceInput {
@@ -89,36 +89,4 @@
       }
     }
   }
-
-  // &.small {
-  //   @item_width: 72px;
-  //   @item_margin: 19px;
-
-  //   padding: 0 0 12px 0;
-  //   border-bottom: none;
-  //   p {
-  //     margin-bottom: 8px;
-  //   }
-  //   .infoItem {
-  //     text-align: center;
-
-  //     .priceItem {
-  //       border-radius:6px;
-  //       height: 32px;
-  //       width: @item_width;
-  //       margin: 0 0 (@item_margin - 7px) @item_margin;
-  //     }
-  //     .priceItem:first-child{
-  //       margin: 0 0 (@item_margin - 7px) 0px;
-  //     }
-
-  //     .priceInput {
-  //       display: block;
-  //       margin: 0;
-  //       width: @item_width*3+@item_margin*2;
-  //       border-radius: 6px;
-  //       height: 32px;
-  //     }
-  //   }
-  // }
 }

src/components/Payment/PriceOptions/README.md

@@ -1,3 +1,11 @@
 # PriceOptions
 
-- 简单介绍
+金额/数字选择输入组件
+
+## 简单介绍
+
+主要由priceOptions, priceRender, inputPriceRender控制界面的呈现。
+Render主要控制渲染其中值的渲染，Options数组提供选择项
+
+## Changelog
+[2020-02-06 01:34:13] v0.1 迁移完毕

src/components/Payment/PriceOptions/index.tsx

@@ -35,8 +35,8 @@ interface Props {
   inputPriceRender?: Function;
   inputSuffix?: string | JSX.Element[] | JSX.Element;
   injectOptions?: {
-    priceBtnClass: any;
-    priceInputClass: any;
+    priceBtnClass: (isActive: boolean) => any;
+    priceInputClass: Function;
   }
   inputRef: React.RefObject<any>;
 }
@@ -55,8 +55,8 @@ const PriceOptions = ({
   inputPriceRender = (i: any) => (i ? i / 100 : ""),
   inputSuffix = "￥",
   injectOptions = {
-    priceBtnClass: {},
-    priceInputClass: {},
+    priceBtnClass: () => undefined,
+    priceInputClass: () => undefined,
   },
   inputRef
 }: Props) => {
@@ -78,7 +78,7 @@ const PriceOptions = ({
               className={classnames({
                 [styles.priceItem]: true,
                 [styles.active]: price === item && !inputStatus,
-                ...injectOptions.priceBtnClass,
+                ...injectOptions.priceBtnClass(price === item && !inputStatus),
               })}
               key={item}
               onClick={() => {
@@ -92,7 +92,7 @@ const PriceOptions = ({
         </span>
         <Input
           ref={inputRef}
-          className={classnames(styles.priceInput, {...injectOptions.priceInputClass})}
+          className={classnames(styles.priceInput, {...injectOptions.priceInputClass()})}
           onMouseEnter={() => {
             if (inputStatus && inputRef && inputRef.current) {
               inputRef.current.focus();