add: 确认取消悬赏的弹窗，命令式组件ModalCMD

src/components/Common/Modal/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
 import { isBrowser } from "../Utils/utils";
 
@@ -48,4 +49,93 @@ export class Modal extends React.PureComponent<ModalProps> {
   }
 }
 
+export interface ModalCMDOptions {
+  children: any;
+  container?: HTMLElement;
+  options?: {
+    mask?: true;
+  };
+}
+
+export interface ModalCMDRecord {
+  modalInstance: HTMLElement;
+}
+
+export class ModalCMD {
+  static currentModal: ModalCMDRecord[] = [];
+
+  constructor() {
+    ModalCMD.currentModal = [];
+  }
+
+  private static recordModal(record: ModalCMDRecord) {
+    ModalCMD.currentModal.push(record);
+  }
+
+  private static delModal() {
+    return ModalCMD.currentModal.pop();
+  }
+
+  static show({ children, container }: ModalCMDOptions) {
+    const modalInstance = document.createElement("div");
+    let targetMountDom = container ? container : document.body;
+    targetMountDom.appendChild(modalInstance);
+    ReactDOM.render(
+      <>
+        <div
+          style={{
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1000
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              background: "rgba(0,0,0,1)",
+              opacity: 0.6,
+              zIndex: -1
+            }}
+            onClick={() => {
+              ModalCMD.hide(ModalCMD.currentModal.length);
+            }}
+          />
+
+          <div
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              backgroundColor: "white"
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </>,
+      modalInstance
+    );
+    this.recordModal({
+      modalInstance
+    });
+  }
+
+  static hide(targetId?: string | number) {
+    const popModalRecord: ModalCMDRecord | undefined = this.delModal();
+    if (popModalRecord && popModalRecord.modalInstance) {
+      ReactDOM.unmountComponentAtNode(popModalRecord.modalInstance);
+      const { parentNode } = popModalRecord.modalInstance;
+      parentNode && parentNode.removeChild(popModalRecord.modalInstance);
+    }
+  }
+}
+
 export default Modal;

src/components/Payment/WaitPayInfoView/index.tsx

@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
-import classnames from 'classnames';
-import styles from './WaitPayInfoView.less';
+import React, { Component } from "react";
+import classnames from "classnames";
+import styles from "./WaitPayInfoView.less";
 
-import infoIconImg from '../assets/icon/icon-info-blue@2x.svg';
+import infoIconImg from "../assets/icon/icon-info-blue@2x.svg";
 
 const Button = (...props: any) => <button {...props}>button</button>;
 
@@ -13,9 +13,13 @@ interface Props {
 
 export class WaitPayInfoView extends Component<Props, {}> {
   static defaultProps = {
-    onClickPayed: () => { console.log("onClickPayed"); },
-    onClickProblem: () => { console.log("onClickProblem"); }
-  }
+    onClickPayed: () => {
+      console.log("onClickPayed");
+    },
+    onClickProblem: () => {
+      console.log("onClickProblem");
+    }
+  };
 
   render() {
     const { onClickPayed, onClickProblem } = this.props;
@@ -33,7 +37,9 @@ export class WaitPayInfoView extends Component<Props, {}> {
             <Button
               className={classnames(styles.pay_btn, styles.btn_default)}
               size="small"
-              onClick={() => { onClickPayed && onClickPayed() }}
+              onClick={() => {
+                onClickPayed && onClickPayed();
+              }}
             >
               {"live.course_info.pay.payed"}
             </Button>
@@ -41,9 +47,11 @@ export class WaitPayInfoView extends Component<Props, {}> {
               className={styles.btn_default}
               size="small"
               style={{
-                marginLeft: '16px',
+                marginLeft: "16px"
+              }}
+              onClick={() => {
+                onClickProblem && onClickProblem();
               }}
-              onClick={() => { onClickProblem && onClickProblem() }}
             >
               {"live.course_info.pay.help"}
             </Button>
@@ -54,4 +62,4 @@ export class WaitPayInfoView extends Component<Props, {}> {
   }
 }
 
-export default WaitPayInfoView;
+export default WaitPayInfoView;

src/components/Payment/WantedPublishModal/index.tsx

@@ -6,6 +6,9 @@ import styles from "./WantedPublishModal.less";
 
 interface WantedPublishModalProps {
   modalConfig?: ModalProps;
+  viewConfig?: {
+    showInputWantedClear?: boolean;
+  };
   handleConfirm?: Function;
 }
 
@@ -83,8 +86,14 @@ export class WantedPublishModal extends Component<
           this.handleUpdateCurrentWanted(v, this.handleClose)
         }
         InputWantedOnBlur={(v: string) => this.handleUpdateCurrentWanted(v)}
-        InputWantedClear={() => this.clearCurrentWanted(this.handleClose)}
+        InputWantedClear={() => {
+          this.clearCurrentWanted(() => {
+            if (this.props.handleConfirm) this.props.handleConfirm(null);
+            this.setState({ modalVisible: false });
+          });
+        }}
         CloseFunction={this.handleClose}
+        {...this.props.viewConfig}
       />
     );
   }

src/components/Payment/WantedPublishPopover/index.tsx

@@ -8,6 +8,9 @@ import styles from "./WantedPublishPopover.less";
 
 export interface WantedPublishPopoverProp {
   popoverConfig?: PopoverProps;
+  viewConfig?: {
+    showInputWantedClear?: boolean;
+  };
   handleConfirm?: Function;
 }
 
@@ -24,7 +27,6 @@ export class WantedPublishPopover extends React.Component<
     super(props);
     this.state = {
       visible: false,
-
       current_wanted: null
     };
   }
@@ -35,7 +37,7 @@ export class WantedPublishPopover extends React.Component<
       this.handleUpdateCurrentWanted(
         this.state.current_wanted,
         (value: string) => {
-          handleConfirm(Number(value).toFixed(2));
+          handleConfirm(value ? Number(value).toFixed(2) : value);
         }
       );
     }
@@ -55,7 +57,13 @@ export class WantedPublishPopover extends React.Component<
     value: string | number | null,
     afterUpdate?: Function
   ) => {
-    if (!value) return;
+    if (!value) {
+      this.setState(
+        { current_wanted: null },
+        () => afterUpdate && afterUpdate(null)
+      );
+      return;
+    }
     let result: string | number;
     result = value;
     if (parseInt(`${value}`, 10) === value) {
@@ -84,8 +92,14 @@ export class WantedPublishPopover extends React.Component<
           this.handleUpdateCurrentWanted(v, this.handleClose)
         }
         InputWantedOnBlur={(v: string) => this.handleUpdateCurrentWanted(v)}
-        InputWantedClear={() => this.clearCurrentWanted(this.handleClose)}
+        InputWantedClear={() => {
+          this.clearCurrentWanted(() => {
+            if (this.props.handleConfirm) this.props.handleConfirm(null);
+            this.setState({ visible: false });
+          });
+        }}
         CloseFunction={this.handleClose}
+        {...this.props.viewConfig}
       />
     );
   }

src/components/Payment/WantedPublishView/WantedPublishView.less

@@ -1,11 +1,11 @@
 .wrapper {
   .wanted_middle {
-    color: #E1AD28;
-    font-size: 17px; 
+    color: #e1ad28;
+    font-size: 17px;
     margin-top: 21px;
 
     .wanted_cover {
-        width: 95px;
+      width: 95px;
     }
   }
 
@@ -22,21 +22,22 @@
 
       :global {
         .ant-input {
-          color: #FB4B56;
+          color: #fb4b56;
           font-size: 16px;
           text-align: center;
-          
-          &:focus, &:hover {
+
+          &:focus,
+          &:hover {
             outline: none;
             box-shadow: none;
-            border-color: #FB4B56;
+            border-color: #fb4b56;
           }
         }
       }
     }
 
     .wanted_bottom_tips {
-      color: #9B9B9B;
+      color: #9b9b9b;
       font-size: 12px;
     }
   }
@@ -47,27 +48,84 @@
     .wanted_confirm_button {
       font-size: 16px;
       color: white;
-      background-color: #71C135;
+      background-color: #71c135;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: white;
         outline: none;
         box-shadow: none;
-        background-color: lighten(#71C135, 10%);
-        border-color: lighten(#71C135, 50%);
+        background-color: lighten(#71c135, 10%);
+        border-color: lighten(#71c135, 50%);
       }
     }
 
     .wanted_cancel_button {
       margin-top: 12px;
-      color: #787F8C;
+      color: #787f8c;
       font-size: 12px;
       cursor: pointer;
 
-      &:hover, &:focus {
-        color: #787F8C;
+      &:hover,
+      &:focus {
+        color: #787f8c;
         text-shadow: #565656;
       }
     }
   }
-}
+
+  .wantedCancelModal {
+    width: 320px;
+    height: 211px;
+    padding: 32px;
+    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+
+    .top {
+      display: flex;
+      .questionIcon {
+        width: 22px;
+        height: 22px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .title {
+        font-size: 16px;
+        color: rgba(0, 0, 0, 0.85);
+        font-weight: bold;
+        margin-left: 16px;
+      }
+    }
+
+    .content {
+      margin-left: 38px;
+      font-size: 14px;
+    }
+
+    footer {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      .modalCancel {
+      }
+      .modalOk {
+        margin-left: 8px;
+        background-color: #71c135;
+        color: white;
+
+        &:hover,
+        &:focus {
+          color: white;
+          outline: none;
+          box-shadow: none;
+          background-color: lighten(#71c135, 10%);
+          border-color: lighten(#71c135, 50%);
+        }
+      }
+    }
+  }
+}

src/components/Payment/WantedPublishView/index.tsx

@@ -1,14 +1,18 @@
-import React from 'react';
-import classnames from 'classnames';
-import { Divider, Input, Button } from 'antd';
+import React from "react";
+import classnames from "classnames";
+import { Divider, Input, Button } from "antd";
 
-import wantedCover from '../assets/cover_wanted@2x.png';
-import styles from './WantedPublishView.less';
+import wantedCover from "../assets/cover_wanted@2x.png";
+import QuestionIcon from "../assets/icon/question-circle-o@2x.png";
+import styles from "./WantedPublishView.less";
+import { createPortal } from "react-dom";
+import { ModalCMD } from "@components/Common/Modal";
 
 interface WantedPublishViewProps {
-  type?: 'pop'|'modal';
+  type?: "pop" | "modal";
   wrapperClass?: string;
-  current_wanted: number|string|null;
+  current_wanted: number | string | null;
+  showInputWantedClear?: boolean;
   InputWantedValueChange: Function;
   InputWantedPressEnter: Function;
   InputWantedOnBlur: Function;
@@ -16,33 +20,58 @@ interface WantedPublishViewProps {
   CloseFunction: Function;
 }
 interface WantedPublishViewState {
-  payment?: number
+  payment?: number;
 }
 
-class WantedPublishView extends React.Component<WantedPublishViewProps, WantedPublishViewState> {
+class WantedPublishView extends React.Component<
+  WantedPublishViewProps,
+  WantedPublishViewState
+> {
+  private containerRef: React.RefObject<any>;
   constructor(props: WantedPublishViewProps) {
     super(props);
+    this.containerRef = React.createRef();
     this.state = {};
   }
 
   render() {
-    const { current_wanted, wrapperClass } = this.props; 
+    const {
+      current_wanted,
+      wrapperClass,
+      showInputWantedClear = true
+    } = this.props;
     return (
-      <div className={classnames(styles.wrapper, {
-        [wrapperClass ? wrapperClass : '']: true
-      })}>
+      <div
+        className={classnames(styles.wrapper, {
+          [wrapperClass ? wrapperClass : ""]: true
+        })}
+        ref={this.containerRef}
+      >
         <header>设置悬赏金额</header>
         <section className={styles.wanted_middle}>
-          <img className={styles.wanted_cover} src={wantedCover} alt="wanted_image"/>
+          <img
+            className={styles.wanted_cover}
+            src={wantedCover}
+            alt="wanted_image"
+          />
           <div>悬赏提问</div>
         </section>
-        <Divider style={{ minWidth: 'auto', marginLeft: 'auto', marginRight: 'auto', width: '266px'}} />
+        <Divider
+          style={{
+            minWidth: "auto",
+            marginLeft: "auto",
+            marginRight: "auto",
+            width: "266px"
+          }}
+        />
         <section className={styles.wanted_bottom}>
-          <div className={styles.wanted_bottom_title}>设置悬赏金额范围¥5.00～¥10000</div>
+          <div className={styles.wanted_bottom_title}>
+            设置悬赏金额范围¥5.00～¥10000
+          </div>
           <Input
             className={styles.wanted_input_number}
             suffix="元"
-            value={current_wanted || ''}
+            value={current_wanted || ""}
             onChange={v => {
               if (!/^[.0-9]*$/g.test(v.target.value)) return;
               this.props.InputWantedValueChange(v.target.value);
@@ -66,18 +95,54 @@ class WantedPublishView extends React.Component<WantedPublishViewProps, WantedPu
           >
             确定
           </Button>
-          <div
-            role="button"
-            tabIndex={-1}
-            onClick={() => this.props.InputWantedClear()}
-            className={styles.wanted_cancel_button}
-          >
-            取消悬赏
-          </div>
+          {showInputWantedClear && (
+            <div
+              role="button"
+              tabIndex={-1}
+              onClick={() => {
+                ModalCMD.show({
+                  container: this.containerRef.current || document.body,
+                  children: (
+                    <div className={styles.wantedCancelModal}>
+                      <div className={styles.top}>
+                        <div className={styles.questionIcon}>
+                          <img src={QuestionIcon} alt="question" />
+                        </div>
+                        <div className={styles.title}>确认减少悬赏金额</div>
+                      </div>
+                      <div className={styles.content}>
+                        若减少悬赏金额，您之前支付的金额中，已分配的赏金无法退回，剩余的￥2.00会退还至您的钱包。
+                      </div>
+                      <footer>
+                        <Button
+                          className={styles.modalCancel}
+                          onClick={() => ModalCMD.hide()}
+                        >
+                          取消
+                        </Button>
+                        <Button
+                          className={styles.modalOk}
+                          onClick={() => {
+                            this.props.InputWantedClear();
+                            ModalCMD.hide();
+                          }}
+                        >
+                          确认
+                        </Button>
+                      </footer>
+                    </div>
+                  )
+                });
+              }}
+              className={styles.wanted_cancel_button}
+            >
+              取消悬赏
+            </div>
+          )}
         </footer>
       </div>
-    )
+    );
   }
 }
 
-export default WantedPublishView;
+export default WantedPublishView;

stories/Common.stories.tsx

@@ -0,0 +1,43 @@
+import { storiesOf } from "@storybook/react";
+import { number, select, text, withKnobs } from "@storybook/addon-knobs";
+import { withInfo } from "@storybook/addon-info";
+import { addReadme } from "storybook-readme";
+import React from "react";
+import Modal, { ModalCMD } from "@components/Common/Modal";
+import { Button } from "antd";
+
+const stories = storiesOf("Common", module);
+stories.addDecorator(storyFn => (
+  <div style={{ padding: "0px 40px" }}>{storyFn()}</div>
+));
+stories.addDecorator(withKnobs);
+stories.addDecorator(withInfo);
+stories.addDecorator(addReadme);
+
+stories.add(
+  "Modal",
+  () => {
+    const [vis, setVis] = React.useState(false);
+    return (
+      <div>
+        <Button onClick={() => setVis(true)}>Modal</Button>
+        <Modal visible={vis} onCancel={() => setVis(false)}>
+          NormalModal
+        </Modal>
+        <Button
+          onClick={() =>
+            ModalCMD.show({
+              children: <div>Hide</div>
+            })
+          }
+        >
+          ModalCMD.show
+        </Button>
+      </div>
+    );
+  },
+  {
+    info: { inline: true },
+    notes: "A very simple example of addon notes"
+  }
+);

stories/Wanted.stories.tsx

@@ -1,5 +1,11 @@
 import { storiesOf } from "@storybook/react";
-import { number, select, text, withKnobs } from "@storybook/addon-knobs";
+import {
+  number,
+  select,
+  text,
+  boolean,
+  withKnobs
+} from "@storybook/addon-knobs";
 import { withInfo } from "@storybook/addon-info";
 import { addReadme } from "storybook-readme";
 import React from "react";
@@ -92,7 +98,14 @@ stories.add(
     return (
       <div>
         <div>
-          <WantedPublishModal>
+          <WantedPublishModal
+            viewConfig={{
+              showInputWantedClear: boolean(
+                "viewConfig.showInputWantedClear",
+                false
+              )
+            }}
+          >
             <div>ModalClick</div>
           </WantedPublishModal>
         </div>
@@ -134,6 +147,12 @@ stories.add(
             handleConfirm={(value: any) => {
               setWanted(value);
             }}
+            viewConfig={{
+              showInputWantedClear: boolean(
+                "viewConfig.showInputWantedClear",
+                false
+              )
+            }}
           >
             <Button>HoverIt{wanted}</Button>
           </WantedPublishPopover>