dev: 添加悬赏系列组件

.storybook/config.js

@@ -6,7 +6,7 @@ import { withConsole } from '@storybook/addon-console';
 import bilingoTheme from './bilingoTheme';
 
 import 'antd/dist/antd.less';
- 
+
 addParameters({
   info: { inline: true },
   viewport: {

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="//at.alicdn.com/t/font_1158309_1tkgtp97s75.css" />

rollup.config.js

@@ -133,7 +133,7 @@ export default {
       entries: [
         { find: '@', replacement: 'src' },
         { find: '@components', replacement: 'src/components' },
-      ]
+      ],
     }),
     visualizer({
       sourcemap: true,

src/components/Common/Modal/Modal.less

@@ -0,0 +1,42 @@
+.wrapper {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.overlay {
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  animation: overlayer .3s forwards;
+}
+
+.container {
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  animation: container .3s forwards;
+}
+
+@keyframes overlayer {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: .3;
+  }
+}
+
+
+@keyframes container {
+  from {
+    transform: translateX(-50%) scale(0, 0);
+  }
+  to {
+    transform: translateX(-50%) scale(1, 1);
+  }
+}
+

src/components/Common/Modal/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { isBrowser } from '../Utils/utils';
+
+import styles from './Modal.less';
+
+export interface ModalProps {
+  visible: boolean
+  onCancel: (e: any) => void
+  container?: HTMLElement | null
+}
+
+export class Modal extends React.PureComponent<ModalProps> {
+  static hasShowWarning = false;
+
+  render() {
+    if (!isBrowser()) return null; // 服务端无需渲染下列代码，渲染也会出错
+    const DEFAULT_CONTAINER: HTMLElement | null = document.getElementById('container');
+    const { children, visible, onCancel, container = DEFAULT_CONTAINER } = this.props
+    let finalMountContainer: HTMLElement = document.body;
+    if (!container) {
+      if (!DEFAULT_CONTAINER) {
+        if (!Modal.hasShowWarning) {
+          Modal.hasShowWarning = true;
+        }
+        finalMountContainer = document.body;
+      } else {
+        if (!Modal.hasShowWarning) {
+          Modal.hasShowWarning = true;
+        }
+        finalMountContainer = DEFAULT_CONTAINER;
+      }
+    }
+    return visible && createPortal(
+      <div className={ styles.wrapper }>
+        <div
+          className={ styles.overlay }
+          onClick={ onCancel }
+        />
+        <div
+          className={ styles.container }
+        >
+          { children }
+        </div>
+      </div>,
+      finalMountContainer,
+    )
+  }
+}
+
+export default Modal;

src/components/Common/Utils/utils.ts

@@ -0,0 +1,3 @@
+export function isBrowser() {
+  return !(typeof window === undefined);
+}

src/components/Common/index.ts

@@ -1 +1,3 @@
 export { Test } from './test';
+
+export { default as Modal } from './Modal';

src/components/Payment/temp/SendWantedValueModal.less → src/components/Payment/AllocWantedModal/AllocWantedModal.less

@@ -1,4 +1,4 @@
-.sendWantedModalContent {
+.wantedModalContent {
   background-color: white;
   width: 360px;
   height: 314px;

src/components/Payment/temp/SendWantedValueModal.tsx → src/components/Payment/AllocWantedModal/index.tsx

@@ -1,58 +1,62 @@
-import React, { RefObject } from 'react';
-import PropTypes from 'prop-types';
-import { Input, Button, Popover, Tooltip } from 'antd';
-import { Modal } from '@/components/Common/Modal';
+import React, { RefObject } from "react";
+import { Input, Button, Popover, Tooltip } from "antd";
+import { Modal } from "@/components/Common/Modal/index.tsx";
 
-import CloseButtonIcon from '@/assets/bilingually/close.png';
+import CloseButtonIcon from "../assets/icon/close.png";
 
-import styles from './SendWantedValueModal.less';
-import { sendgift } from '@/services/bilingually/qa';
+import styles from "./AllocWantedModal.less";
 
-interface SendWantedValueModalProps {
-  wantedValue: string|number|null;
-  sendValueRange: Array<string|number>;
+interface AllocWantedModalProps {
+  allocValue: string | number | null;
+  sendValueRange: Array<string | number>;
+  sendRequest: Function;
   sendGiftData: {
-    answerId: string|number;
-    questionId: string|number;
-    toUserId: string|number;
+    answerId: string | number;
+    questionId: string | number;
+    toUserId: string | number;
   };
-  handleVisiableChange: Function;
+  handleVisibleChange: (visible: boolean) => void;
 }
-interface SendWantedValueModalState {
-  visiable: boolean;
+interface AllocWantedModalState {
+  visible: boolean;
   outRangeTip: boolean;
-  sendValue: string|number;
+  sendValue: string | number;
 }
 
-class SendWantedValueModal extends React.Component<SendWantedValueModalProps, SendWantedValueModalState> {
+class AllocWantedModal extends React.Component<
+  AllocWantedModalProps,
+  AllocWantedModalState
+> {
   ModalInputRef: RefObject<Input>;
+  ModalContentRef: RefObject<any>;
 
-  constructor(props: SendWantedValueModalProps) {
+  constructor(props: AllocWantedModalProps) {
     super(props);
     this.state = {
-      visiable: false,
+      visible: false,
       sendValue: 0,
-      outRangeTip: false,
+      outRangeTip: false
     };
+    this.ModalContentRef = React.createRef();
     this.ModalInputRef = React.createRef();
   }
 
-  handleSendValueChange = (v: string|number) => {
+  handleSendValueChange = (v: string | number) => {
     if (this.state.outRangeTip) {
       this.setState({
-        outRangeTip: !this.checkSendValue(),
+        outRangeTip: !this.checkSendValue()
       });
     }
     this.setState({
-      sendValue: v,
+      sendValue: v
     });
-  }
+  };
 
   checkSendValue = () => {
     const { sendValueRange } = this.props;
     const { sendValue } = this.state;
     let min = 0;
-    let max = Number(this.props.wantedValue);
+    let max = Number(this.props.allocValue);
     if (sendValueRange) {
       min = Number(sendValueRange[0]);
       max = Number(sendValueRange[1]);
@@ -60,36 +64,42 @@ class SendWantedValueModal extends React.Component<SendWantedValueModalProps, Se
     if (sendValue > max) {
       this.setState({
         // sendValue: max,
-        outRangeTip: true,
+        outRangeTip: true
       });
       return false;
     } else if (sendValue < min) {
       this.setState({
         // sendValue: max,
-        outRangeTip: true,
+        outRangeTip: true
       });
       return false;
     }
     return true;
-  }
+  };
 
   handleCloseAction = () => {
-    this.setState({
-      visiable: false,
-      sendValue: 0,
-      outRangeTip: false,
-    }, () => {
-      this.props.handleVisiableChange(false);
-    });
-  }
+    this.setState(
+      {
+        visible: false,
+        sendValue: 0,
+        outRangeTip: false
+      },
+      () => {
+        this.props.handleVisibleChange(false);
+      }
+    );
+  };
 
   handleShowAction = () => {
-    this.setState({
-      visiable: true,
-    }, () => {
-      this.props.handleVisiableChange(true);
-    });
-  }
+    this.setState(
+      {
+        visible: true
+      },
+      () => {
+        this.props.handleVisibleChange(true);
+      }
+    );
+  };
 
   handleConfirm = () => {
     const { sendGiftData } = this.props;
@@ -99,23 +109,24 @@ class SendWantedValueModal extends React.Component<SendWantedValueModalProps, Se
       return null;
     }
     // 进行分配请求
-    sendgift({
-      business_type: 14, // 表示悬赏答案
-      ref_id: sendGiftData.answerId.toString(), // 对应回答的id
-      origin_id: sendGiftData.questionId, // 对应问题的id
-      to_user: sendGiftData.toUserId, // 悬赏给谁
-      goods_id: 2, // 礼物id 帮币的话为2
-      num: Number(this.state.sendValue), // 礼物数量
-    }).then((res: any) => {
-      console.log('res: ', res);
-      console.log("after send gift");
+    Promise.resolve(
+      this.props.sendRequest({
+        business_type: 14, // 表示悬赏答案
+        ref_id: sendGiftData.answerId.toString(), // 对应回答的id
+        origin_id: sendGiftData.questionId, // 对应问题的id
+        to_user: sendGiftData.toUserId, // 悬赏给谁
+        goods_id: 2, // 礼物id 帮币的话为2
+        num: Number(this.state.sendValue) // 礼物数量
+      })
+    ).then((res: any) => {
+      console.log("res: ", res);
       if (res) {
         this.handleCloseAction();
       } else {
         this.handleCloseAction();
       }
-    })
-  }
+    });
+  };
 
   renderCloseButton = () => {
     return (
@@ -129,20 +140,24 @@ class SendWantedValueModal extends React.Component<SendWantedValueModalProps, Se
       >
         <img src={CloseButtonIcon} alt="close button for send wanted" />
       </div>
-    )
-  }
+    );
+    // return null;
+  };
 
   renderModalContent = () => {
     return (
-      <div className={styles.sendWantedModalContent}>
+      <div className={styles.wantedModalContent} ref={this.ModalContentRef}>
         {this.renderCloseButton()}
         <h4 className={styles.title}>分配悬赏奖金</h4>
-        <div className={styles.wantedValueText}>{`剩余可分配 ${this.props.wantedValue}元`}</div>
+        <div
+          className={styles.wantedValueText}
+        >{`剩余可分配 ${this.props.allocValue}元`}</div>
         <Tooltip
           visible={this.state.outRangeTip}
-          title="超过可范围值"
+          title="超过范围值"
           placement="bottom"
           overlayClassName={styles.outRangeTextTip}
+          getTooltipContainer={() => this.ModalContentRef && this.ModalContentRef.current}
         >
           <Input
             ref={this.ModalInputRef}
@@ -150,26 +165,28 @@ class SendWantedValueModal extends React.Component<SendWantedValueModalProps, Se
             suffix="元"
             value={this.state.sendValue}
             onChange={e => this.handleSendValueChange(e.target.value)}
-            onFocus={e => e.target.setSelectionRange(0, String(this.state.sendValue).length)}
+            onFocus={e =>
+              e.target.setSelectionRange(0, String(this.state.sendValue).length)
+            }
           />
         </Tooltip>
-        <div className={styles.wantedValueTipBottom}>需要在悬赏时间结束前将奖金分配完成, 否则将按照规则自动分配</div>
+        <div className={styles.wantedValueTipBottom}>
+          需要在悬赏时间结束前将奖金分配完成, 否则将按照规则自动分配
+        </div>
         <div className={styles.buttonRow}>
-          <div className={styles.tipsButton}/>
-          <Button
-            className={styles.confirmButton}
-            onClick={this.handleConfirm}
-          >
+          <div className={styles.tipsButton} />
+          <Button className={styles.confirmButton} onClick={this.handleConfirm}>
             确认
           </Button>
           <div className={styles.tipsButton}>
             <Popover
               placement="bottom"
               trigger="click"
+              getPopupContainer={() => this.ModalContentRef && this.ModalContentRef.current}
               overlayStyle={{
-                width: '320px'
+                width: "320px"
               }}
-              content={(
+              content={
                 <div className={styles.tipsView}>
                   <h6>1、如何参与悬赏？</h6>
                   <div>
@@ -184,37 +201,32 @@ class SendWantedValueModal extends React.Component<SendWantedValueModalProps, Se
                     赏金只会在以下2种情况进行退款：一、悬赏时间到期，回答数小于2，赏金将自动退还至提问者的钱包；二、悬赏时间到期，悬赏者未分配完赏金，系统自动将剩余的赏金退还至提问者的钱包。
                   </div>
                 </div>
-              )}
+              }
             >
-              <i
-                className="schedule schedule-icon_rewardtips"
-              />
+              <i className="schedule schedule-icon_rewardtips" />
             </Popover>
           </div>
         </div>
       </div>
-    )
-  }
+    );
+  };
 
   render() {
     const { children } = this.props;
     return (
       <>
-        <div
-          className={styles.wrapper} 
-          onClick={() => this.handleShowAction()}
-        >
+        <div className={styles.wrapper} onClick={() => this.handleShowAction()}>
           {children}
         </div>
         <Modal
-          visible={this.state.visiable}
+          visible={this.state.visible}
           onCancel={() => this.handleCloseAction()}
         >
           {this.renderModalContent()}
         </Modal>
       </>
-    )
+    );
   }
 }
 
-export default SendWantedValueModal;
+export default AllocWantedModal;

src/components/Payment/ConsumeListView/ConsumeListView.less

@@ -49,7 +49,7 @@
       border-radius: 50%;
       color: #a8adb6;
       cursor: pointer;
-      background-image: url(../assets/btn_toggle.png);
+      background-image: url(../assets/icon/btn_toggle.png);
       background-position: center;
 
       &.expand {

src/components/Payment/ConsumeListView/index.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 // import { DEFAULT_AVATAR } from '@/constants';
 import { addImageProcess } from '../Utils/utils';
-import KingDomPic from '../assets/popovers_list_huangguan.png';
+import KingDomPic from '../assets/icon/popovers_list_huangguan.png';
 
 import styles from './ConsumeListView.less';
 

src/components/Payment/PriceOptions/PriceOptions.less

@@ -1,7 +1,6 @@
 @item_width: 70px;
 @item_margin: 6px;
 .options{
-  padding: 20px 50px;
   border-bottom: 1px dashed #00000017;
   p {
     font-size:14px;

src/components/Payment/PriceOptions/index.tsx

@@ -14,6 +14,7 @@ interface Props {
   priceOptions?: Array<any>;
   priceRender?: Function;
   inputPriceRender?: Function;
+  inputSuffix?: string | JSX.Element[] | JSX.Element;
   inputRef: React.RefObject<any>;
 }
 
@@ -28,11 +29,13 @@ const PriceOptions = ({
   priceOptions = [100, 600, 800],
   priceRender = (i: any) => i / 100,
   inputPriceRender = (i: any) => (i ? i / 100 : ""),
+  inputSuffix = "￥",
   inputRef
 }: Props) => {
   const defaultOptions = priceOptions;
   // 控制是否为其他金额输入情况
   const [inputStatus, setInputStatus] = useState(false);
+  const [inputPrice, setInputPrice] = useState('');
 
   return (
     <div className={classnames(styles.options)}>
@@ -63,9 +66,9 @@ const PriceOptions = ({
               inputRef.current.select();
             }
           }}
-          suffix="¥"
+          suffix={inputSuffix}
           className={styles.priceInput}
-          value={inputStatus ? inputPriceRender(price) : ""}
+          value={inputStatus ? inputPriceRender(inputPrice) : ""}
           placeholder={inputPlaceholderText}
           onChange={e => {
             const n = +e.target.value;
@@ -73,22 +76,30 @@ const PriceOptions = ({
               return;
             }
             // 测试暂时改成1分
+            setInputPrice(`${n * 100}`);
             onPriceChange(n * 100);
           }}
           onClick={e => {
-            onPriceChange(0);
-            setInputStatus(true);
+            if (!inputStatus) {
+              setInputPrice('');
+              setInputStatus(true);
+            }
           }}
           onFocus={e => {
             e.target.placeholder = "";
-            setInputStatus(true);
+            if (inputStatus) {
+              setInputPrice(`${price}`);
+            } else {
+              setInputPrice('');
+              setInputStatus(true);
+            }
             if (focusScroll) {
               e.target.scrollIntoView();
             }
           }}
           onBlur={e => {
             e.target.placeholder = inputPlaceholderText;
-            if (price) {
+            if (inputPrice) {
               setInputStatus(true);
             } else {
               setInputStatus(false);

src/components/Payment/Utils/utils.ts

@@ -3,7 +3,7 @@ export const IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';
 export const IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';
 export const IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';
 
-type AddImageProcessOptions = {
+interface AddImageProcessOptions {
   small?: boolean;
   large?: boolean;
   custom?: boolean;

src/components/Payment/WaitPayInfoView/index.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import styles from './WaitPayInfoView.less';
 
-import infoIconImg from '../assets/icon-info-blue@2x.svg';
+import infoIconImg from '../assets/icon/icon-info-blue@2x.svg';
 
 const Button = (...props: any) => <button {...props}>button</button>;
 

src/components/Payment/temp/WantedPaymentPopover.tsx → src/components/Payment/WantedPublishPopover/index.tsx

@@ -1,28 +1,29 @@
 import React from 'react';
 import { Popover, Divider, Input, Button } from 'antd';
-import WantedpaymentView from './WantedPaymentView';
+import WantedPublishView from '../WantedPublishView';
 
-import popClose from '@/assets/bilingually/close@2x.png';
-import styles from './WantedPaymentPopover.less';
+import popClose from '../assets/icon/close@2x.png';
+import styles from './WantedPublishPopover.less';
 
-export interface WantedPaymentPopoverProp {
+export interface WantedPublishPopoverProp {
   popoverConfig?: {
     placement?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
     trigger?: "hover" | "focus" | "click" | "contextMenu" | undefined;
+    getPopupContainer?: any;
   };
   handleConfirm?: Function;
 }
 
-export interface WantedPaymentPopoverState {
-  visiable: boolean;
+export interface WantedPublishPopoverState {
+  visible: boolean;
   current_wanted: number|string|null;
 }
 
-export class WantedPaymentPopover extends React.Component<WantedPaymentPopoverProp, WantedPaymentPopoverState> {
-  constructor(props: WantedPaymentPopoverProp) {
+export class WantedPublishPopover extends React.Component<WantedPublishPopoverProp, WantedPublishPopoverState> {
+  constructor(props: WantedPublishPopoverProp) {
     super(props);
     this.state = {
-      visiable: false,
+      visible: false,
 
       current_wanted: null,
     }
@@ -35,7 +36,7 @@ export class WantedPaymentPopover extends React.Component<WantedPaymentPopoverPr
         handleConfirm(Number(value).toFixed(2));
       });
     }
-    this.setState({ visiable: false });
+    this.setState({ visible: false });
   }
 
   clearCurrentWanted = (cb: Function) => {
@@ -61,7 +62,7 @@ export class WantedPaymentPopover extends React.Component<WantedPaymentPopoverPr
   renderInitView() {
     const { current_wanted } = this.state; 
     return (
-      <WantedpaymentView
+      <WantedPublishView
         type="pop"
         current_wanted={current_wanted}
         InputWantedValueChange={(v: string) => this.setState({ current_wanted: v })}
@@ -80,12 +81,12 @@ export class WantedPaymentPopover extends React.Component<WantedPaymentPopoverPr
       <Popover
         placement="left"
         trigger="click"
-        visible={this.state.visiable}
+        visible={this.state.visible}
         onVisibleChange={(value: boolean) => {
           if (!value) {
             this.handleClose();
           }
-          this.setState({ visiable: value });
+          this.setState({ visible: value });
         }}
         {...popoverConfig}
         content={
@@ -105,4 +106,4 @@ export class WantedPaymentPopover extends React.Component<WantedPaymentPopoverPr
   }
 }
 
-export default WantedPaymentPopover;
+export default WantedPublishPopover;

src/components/Payment/temp/WantedPaymentView.tsx → src/components/Payment/WantedPublishView/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Divider, Input, Button } from 'antd';
 
-import wantedCover from '@/assets/payment/cover_wanted@2x.png';
-import styles from './WantedPaymentView.less';
+import wantedCover from '../assets/cover_wanted@2x.png';
+import styles from './WantedPublishView.less';
 
-interface WantedpaymentViewProps {
+interface WantedPublishViewProps {
   type?: 'pop'|'modal';
+  wrapperClass?: string;
   current_wanted: number|string|null;
   InputWantedValueChange: Function;
   InputWantedPressEnter: Function;
@@ -14,20 +15,22 @@ interface WantedpaymentViewProps {
   InputWantedClear: Function;
   CloseFunction: Function;
 }
-interface WantedpaymentViewState {
+interface WantedPublishViewState {
   payment?: number
 }
 
-class WantedpaymentView extends React.Component<WantedpaymentViewProps, WantedpaymentViewState> {
-  constructor(props: WantedpaymentViewProps) {
+class WantedPublishView extends React.Component<WantedPublishViewProps, WantedPublishViewState> {
+  constructor(props: WantedPublishViewProps) {
     super(props);
     this.state = {};
   }
 
   render() {
-    const { current_wanted } = this.props; 
+    const { current_wanted, wrapperClass } = this.props; 
     return (
-      <div className={styles.wrapper}>
+      <div className={classnames(styles.wrapper, {
+        [wrapperClass ? wrapperClass : '']: true
+      })}>
         <header>设置悬赏金额</header>
         <section className={styles.wanted_middle}>
           <img className={styles.wanted_cover} src={wantedCover} alt="wanted_image"/>
@@ -77,4 +80,4 @@ class WantedpaymentView extends React.Component<WantedpaymentViewProps, Wantedpa
   }
 }
 
-export default WantedpaymentView;
+export default WantedPublishView;

src/components/Payment/index.ts

@@ -1,4 +1,7 @@
 export { default as ConsumeListView } from './ConsumeListView';
 export { default as PayPlatformOptions } from './PayPlatformOptions';
 export { default as PriceOptions } from './PriceOptions';
-export { default as WaitPayInfoView } from './WaitPayInfoView';
+export { default as WaitPayInfoView } from './WaitPayInfoView';
+export { default as AllocWantedModal } from './AllocWantedModal';
+export { default as WantedPublishPopover } from './WantedPublishPopover';
+export { default as WantedPublishView } from './WantedPublishView';

stories/Payment.stories.tsx

@@ -1,43 +1,61 @@
-import React, { MouseEvent } from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+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, text, array } from "@storybook/addon-knobs";
-import { addReadme } from 'storybook-readme';
-import { Divider } from 'antd';
+import {
+  withKnobs,
+  number,
+  boolean,
+  select,
+  text,
+  array
+} from "@storybook/addon-knobs";
+import { addReadme } from "storybook-readme";
+import { Divider, Button } from "antd";
 
-import ConsumeListView from '@/components/Payment/ConsumeListView';
-import ConsumeListViewDoc from '@components/Payment/ConsumeListView/README.md';
-import PayPlatFormOptions, { PAY_CHANNEL } from '@/components/Payment/PayPlatformOptions';
-import PayPlatFormOptionsDoc from '@components/Payment/PayPlatformOptions/README.md';
-import PriceOptions from '@/components/Payment/PriceOptions';
-import PriceOptionsDoc from '@components/Payment/PriceOptions/README.md';
-import WaitPayInfoView from '@/components/Payment/WaitPayInfoView';
-import WaitPayInfoViewDoc from '@components/Payment/WaitPayInfoView/README.md';
-import { formatMoney } from '@components/Payment/Utils/utils';
+import ConsumeListView from "@/components/Payment/ConsumeListView";
+import ConsumeListViewDoc from "@components/Payment/ConsumeListView/README.md";
+import PayPlatFormOptions, {
+  PAY_CHANNEL
+} from "@/components/Payment/PayPlatformOptions";
+import PayPlatFormOptionsDoc from "@components/Payment/PayPlatformOptions/README.md";
+import PriceOptions from "@/components/Payment/PriceOptions";
+import PriceOptionsDoc from "@components/Payment/PriceOptions/README.md";
+import WaitPayInfoView from "@/components/Payment/WaitPayInfoView";
+import WaitPayInfoViewDoc from "@components/Payment/WaitPayInfoView/README.md";
+import AllocWantedModal from "@/components/Payment/AllocWantedModal";
+import WantedPublishView from "@/components/Payment/WantedPublishView";
+import WantedPublishPopover from '@/components/Payment/WantedPublishPopover';
+import { formatMoney } from "@components/Payment/Utils/utils";
 
-import { consumeList} from './data/consumeList.json';
+import { consumeList } from "./data/consumeList.json";
 
 const consumeData: any = consumeList;
 
-const stories = storiesOf('Payment', module);
-stories.addDecorator((storyFn) => <div style={{padding: "0px 40px"}}>{storyFn()}</div>)
+const stories = storiesOf("Payment", module);
+stories.addDecorator(storyFn => (
+  <div style={{ padding: "0px 40px" }}>{storyFn()}</div>
+));
 stories.addDecorator(withKnobs);
 stories.addDecorator(withInfo);
 stories.addDecorator(addReadme);
 
 stories.add(
-  'ConsumeListView',
+  "ConsumeListView",
   () => {
     const [toggle, setToggle] = React.useState(false);
-    return <ConsumeListView
-      isToggle={toggle}
-      onToggleChange={() => setToggle(!toggle)}
-      onConsumeItemClick={(e: MouseEvent, clickData: any) => { console.log(clickData); }}
-      dataSource={consumeData}
-      listLength={consumeData.length}
-      showLength={number("showLength", 5)}
-    />
+    return (
+      <ConsumeListView
+        isToggle={toggle}
+        onToggleChange={() => setToggle(!toggle)}
+        onConsumeItemClick={(e: MouseEvent, clickData: any) => {
+          console.log(clickData);
+        }}
+        dataSource={consumeData}
+        listLength={consumeData.length}
+        showLength={number("showLength", 5)}
+      />
+    );
   },
   {
     info: {
@@ -64,99 +82,215 @@ stories.add(
       //   })
       // },
       source: false,
-      maxPropStringLength: 500,
+      maxPropStringLength: 500
     },
-    notes: 'A very simple example of addon notes',
+    notes: "A very simple example of addon notes",
     readme: {
-      sidebar: ConsumeListViewDoc,
+      sidebar: ConsumeListViewDoc
     }
   }
 );
 
 stories.add(
-  'PayPlatFormOptions',
+  "PayPlatFormOptions",
   () => {
     const [payChannel, setPayChannel] = React.useState(PAY_CHANNEL.PAYPAL);
     return (
       <PayPlatFormOptions
         payChannel={payChannel}
-        onPayChannelChange={(value) => {
+        onPayChannelChange={value => {
           action(`PayItemChange: ${value}`);
           setPayChannel(value);
         }}
         isMobile={boolean("isMobile", false)}
-        size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
+        size={select(
+          "size",
+          { Small: "small", Normal: "normal", Large: "large" },
+          "normal"
+        )}
         withTitle={boolean("withTitle", false)}
-        locale={select("locale", { ZH: 'zh', EN: 'en' }, "zh")}
+        locale={select("locale", { ZH: "zh", EN: "en" }, "zh")}
       />
-    )
+    );
   },
   {
     info: {
       inline: true,
       text: ``,
       source: false,
-      maxPropStringLength: 500,
+      maxPropStringLength: 500
     },
-    notes: 'A very simple example of addon notes',
+    notes: "A very simple example of addon notes",
     readme: {
-      sidebar: PayPlatFormOptionsDoc,
+      sidebar: PayPlatFormOptionsDoc
     }
   }
 );
 
 stories.add(
-  'PriceOptions',
+  "PriceOptions",
   () => {
     const [price, setPrice] = React.useState(0);
     const refInput = React.useRef(null);
     return (
       <>
-      <PriceOptions
-        price={price}
-        onPriceChange={(v) => setPrice(v)}
-        size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
-        withTitle={boolean("withTitle", false)}
-        titleText={text("titleText", "")}
-        inputPlaceholderText={text("inputPlaceholderText", "其他金额")}
-        focusScroll={boolean("focusScroll", false)}
-        priceOptions={array("priceOptions", ["100", "600", "800"])}
-        priceRender={(i: number) => `${formatMoney(i/100, 0)}￥`}
-        inputRef={refInput}
-      />
-      <Divider />
-      <div>
-        price: {price}
-      </div>
+        <PriceOptions
+          price={price}
+          onPriceChange={v => setPrice(v)}
+          size={select(
+            "size",
+            { Small: "small", Normal: "normal", Large: "large" },
+            "normal"
+          )}
+          withTitle={boolean("withTitle", false)}
+          titleText={text("titleText", "")}
+          inputPlaceholderText={text("inputPlaceholderText", "其他金额")}
+          focusScroll={boolean("focusScroll", false)}
+          priceOptions={array("priceOptions", ["100", "600", "800"])}
+          priceRender={(i: number) => `${formatMoney(i / 100, 0)}￥`}
+          inputRef={refInput}
+        />
+        <Divider />
+        <div>price: {price}</div>
       </>
-    )
+    );
   },
   {
     info: {
       inline: true,
       text: ``,
       source: false,
-      maxPropStringLength: 500,
+      maxPropStringLength: 500
     },
-    notes: 'A very simple example of addon notes',
+    notes: "A very simple example of addon notes",
     readme: {
-      sidebar: PriceOptionsDoc,
+      sidebar: PriceOptionsDoc
     }
   }
-)
+);
 
 stories.add(
-  'WaitPayInfoView',
+  "WaitPayInfoView",
   () => {
-    return (
-      <WaitPayInfoView />
-    )
+    return <WaitPayInfoView />;
   },
   {
     info: { inline: true, text: ``, source: false, maxPropStringLength: 500 },
-    notes: 'A very simple example of addon notes',
+    notes: "A very simple example of addon notes",
     readme: {
-      sidebar: WaitPayInfoViewDoc,
+      sidebar: WaitPayInfoViewDoc
     }
   }
+);
+
+stories.add(
+  "AllocWantedModal",
+  () => {
+    return (
+      <AllocWantedModal
+        allocValue={number("allocValue", 100)}
+        sendValueRange={[number("minValue", 0), number("maxValue", 100)]}
+        sendRequest={(...args: any) => {
+          console.log(args);
+        }}
+        sendGiftData={{
+          answerId: text("answerId", '1'),
+          questionId: text("questionId", '1'),
+          toUserId: text("toUserId", '1')
+        }}
+        handleVisibleChange={visiable => {
+          console.log(visiable);
+        }}
+      >
+        <Button>Click it</Button>
+      </AllocWantedModal>
+    );
+  },
+  {
+    info: { inline: true },
+    notes: "A very simple example of addon notes"
+  }
+);
+
+stories.add(
+  "WantedPushView",
+  () => {
+    const [currentWanted, setCurrentWanted] = React.useState(0);
+    return (
+      <>
+        <WantedPublishView
+          type={select("type", {
+            POP: "pop",
+            Modal: 'modal',
+          }, "pop")}
+          wrapperClass="test_wrapper"
+          current_wanted={currentWanted}
+          InputWantedValueChange={(value: any) => setCurrentWanted(value)}
+          InputWantedOnBlur={(blurValue: any) => setCurrentWanted(blurValue)}
+          InputWantedClear={() => setCurrentWanted(0)}
+          InputWantedPressEnter={(enterValue: any) => setCurrentWanted(enterValue)}
+          CloseFunction={() => { console.log("Close Button"); }}
+        />
+        <Divider />
+        <div>
+          currentWanted: {currentWanted}
+        </div>
+      </>
+    )
+  },
+  {
+    info: { inline: true },
+    notes: "A very simple example of addon notes"
+  }
 )
+
+stories.add(
+  "WantedPublishPopover",
+  () => {
+    const [wanted, setWanted] = React.useState('');
+    return (
+      <div>
+        <WantedPublishPopover
+          popoverConfig={{
+            placement: select("popoverConfigPlacement", {
+              Undefined: undefined,
+              Left: "left",
+              Right: "right",
+              Top: "top",
+              Bottom: "bottom",
+              TopLeft: "topLeft",
+              TopRight: "topRight",
+              BottomLeft: "bottomLeft",
+              BottomRight: "bottomRight",
+              LeftTop: "leftTop",
+              LeftBottom: "leftBottom",
+              RightTop: "rightTop",
+              RightBottom: "rightBottom",
+            }, undefined),
+            trigger: select("popoverConfigTrigger", {
+              Undefined: undefined,
+              Hover: "hover",
+              Click: "click",
+              Focus: "focus",
+              ContextMenu: "contextMenu",
+            }, undefined),
+          }}
+          handleConfirm={(value: any) => {
+            setWanted(value);
+          }}
+        >
+          <Button>HoverIt{wanted}</Button>
+        </WantedPublishPopover>
+        <Divider />
+        {/* 下面用于分割wanted值的渲染，防止Error */}
+        {
+          ((wanted) => <div>wanted{wanted}</div>)(wanted)
+        }
+      </div>
+    )
+  },
+  {
+    info: { inline: true },
+    notes: "A very simple example of addon notes"
+  }
+)