dev: PriceOptions逻辑更新

src/components/Payment/PriceOptions/index.tsx

@@ -11,7 +11,8 @@ interface Props {
   size: "small" | "normal" | "large";
   focusScroll: boolean;
   withTitle: boolean;
-  titleText?: string;
+  titleText?: string | JSX.Element[] | JSX.Element;
+  inputPlaceholderText?: string;
   inputRef: React.RefObject<any>;
 }
 
@@ -22,6 +23,7 @@ const PriceOptions = ({
   focusScroll = true,
   withTitle = true,
   titleText = "Price",
+  inputPlaceholderText = "Others",
   inputRef
 }: Props) => {
   const defaultOptions = [100, 600, 800];
@@ -66,7 +68,7 @@ const PriceOptions = ({
           suffix="¥"
           className={styles.priceInput}
           value={inputStatus ? price / 100 || "" : ""}
-          placeholder="Others"
+          placeholder={inputPlaceholderText}
           onChange={e => {
             const n = +e.target.value;
             if (Number.isNaN(n)) {
@@ -80,10 +82,15 @@ const PriceOptions = ({
             setInputStatus(true);
           }}
           onFocus={e => {
+            e.target.placeholder = '';
+            setInputStatus(true);
             if (focusScroll) {
               e.target.scrollIntoView();
             }
           }}
+          onBlur={e => {
+            e.target.placeholder = inputPlaceholderText;
+          }}
         />
       </div>
     </div>

stories/Payment.stories.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withInfo } from "@storybook/addon-info";
-import { withKnobs, number, boolean, select } from "@storybook/addon-knobs";
+import { withKnobs, number, boolean, select, text } from "@storybook/addon-knobs";
 import { addReadme } from 'storybook-readme';
 
 import ConsumeListView from '@/components/Payment/ConsumeListView';
@@ -114,7 +114,8 @@ stories.add(
         onPriceChange={(v) => setPrice(v)}
         size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
         withTitle={boolean("withTitle", false)}
-        titleText="Price Title"
+        titleText={text("titleText", "")}
+        inputPlaceholderText={text("inputPlaceholderText", "")}
         focusScroll={boolean("focusScroll", false)}
         inputRef={refInput}
       />