Browse Source

dev: PriceOptions逻辑更新

Roxas 4 years ago
parent
commit
cf13905ce1
2 changed files with 12 additions and 4 deletions
  1. 9
    2
      src/components/Payment/PriceOptions/index.tsx
  2. 3
    2
      stories/Payment.stories.tsx

+ 9
- 2
src/components/Payment/PriceOptions/index.tsx View File

11
   size: "small" | "normal" | "large";
11
   size: "small" | "normal" | "large";
12
   focusScroll: boolean;
12
   focusScroll: boolean;
13
   withTitle: boolean;
13
   withTitle: boolean;
14
-  titleText?: string;
14
+  titleText?: string | JSX.Element[] | JSX.Element;
15
+  inputPlaceholderText?: string;
15
   inputRef: React.RefObject<any>;
16
   inputRef: React.RefObject<any>;
16
 }
17
 }
17
 
18
 
22
   focusScroll = true,
23
   focusScroll = true,
23
   withTitle = true,
24
   withTitle = true,
24
   titleText = "Price",
25
   titleText = "Price",
26
+  inputPlaceholderText = "Others",
25
   inputRef
27
   inputRef
26
 }: Props) => {
28
 }: Props) => {
27
   const defaultOptions = [100, 600, 800];
29
   const defaultOptions = [100, 600, 800];
66
           suffix="¥"
68
           suffix="¥"
67
           className={styles.priceInput}
69
           className={styles.priceInput}
68
           value={inputStatus ? price / 100 || "" : ""}
70
           value={inputStatus ? price / 100 || "" : ""}
69
-          placeholder="Others"
71
+          placeholder={inputPlaceholderText}
70
           onChange={e => {
72
           onChange={e => {
71
             const n = +e.target.value;
73
             const n = +e.target.value;
72
             if (Number.isNaN(n)) {
74
             if (Number.isNaN(n)) {
80
             setInputStatus(true);
82
             setInputStatus(true);
81
           }}
83
           }}
82
           onFocus={e => {
84
           onFocus={e => {
85
+            e.target.placeholder = '';
86
+            setInputStatus(true);
83
             if (focusScroll) {
87
             if (focusScroll) {
84
               e.target.scrollIntoView();
88
               e.target.scrollIntoView();
85
             }
89
             }
86
           }}
90
           }}
91
+          onBlur={e => {
92
+            e.target.placeholder = inputPlaceholderText;
93
+          }}
87
         />
94
         />
88
       </div>
95
       </div>
89
     </div>
96
     </div>

+ 3
- 2
stories/Payment.stories.tsx View File

2
 import { storiesOf } from '@storybook/react';
2
 import { storiesOf } from '@storybook/react';
3
 import { action } from '@storybook/addon-actions';
3
 import { action } from '@storybook/addon-actions';
4
 import { withInfo } from "@storybook/addon-info";
4
 import { withInfo } from "@storybook/addon-info";
5
-import { withKnobs, number, boolean, select } from "@storybook/addon-knobs";
5
+import { withKnobs, number, boolean, select, text } from "@storybook/addon-knobs";
6
 import { addReadme } from 'storybook-readme';
6
 import { addReadme } from 'storybook-readme';
7
 
7
 
8
 import ConsumeListView from '@/components/Payment/ConsumeListView';
8
 import ConsumeListView from '@/components/Payment/ConsumeListView';
114
         onPriceChange={(v) => setPrice(v)}
114
         onPriceChange={(v) => setPrice(v)}
115
         size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
115
         size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
116
         withTitle={boolean("withTitle", false)}
116
         withTitle={boolean("withTitle", false)}
117
-        titleText="Price Title"
117
+        titleText={text("titleText", "")}
118
+        inputPlaceholderText={text("inputPlaceholderText", "")}
118
         focusScroll={boolean("focusScroll", false)}
119
         focusScroll={boolean("focusScroll", false)}
119
         inputRef={refInput}
120
         inputRef={refInput}
120
       />
121
       />