bilingo-ui/stories/Wanted.stories.tsx

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 AllocWantedModal from "@components/Payment/AllocWantedModal";
import { Button, Divider, Modal } from "antd";
import WantedPublishView from "@components/Payment/WantedPublishView";
import WantedPublishModal from "@components/Payment/WantedPublishModal";
import WantedPublishPopover from "@components/Payment/WantedPublishPopover";

const stories = storiesOf("Payment/Wanted", module);
stories.addDecorator(storyFn => (
  <div style={{ padding: "0px 40px" }}>{storyFn()}</div>
));
stories.addDecorator(withKnobs);
stories.addDecorator(withInfo);
stories.addDecorator(addReadme);

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 (
      <div style={{ border: "4px solid black", padding: "4px" }}>
        <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>
      </div>
    );
  },
  {
    info: { inline: true },
    notes: "A very simple example of addon notes"
  }
);

stories.add(
  "WantedPublishPopover And Modal",
  () => {
    const [wanted, setWanted] = React.useState("");
    const [testModal, setTestModal] = React.useState(false);
    return (
      <div>
        <div>
          <WantedPublishModal>
            <div>ModalClick</div>
          </WantedPublishModal>
        </div>
        <Divider />
        <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>
        </div>
        <Divider />
        <div onClick={() => setTestModal(true)}>Show Modal</div>
        <Modal
          visible={testModal}
          title="Create a new collection"
          okText="Create"
          onCancel={() => setTestModal(false)}
          onOk={() => setTestModal(true)}
        >
          <WantedPublishModal>
            <div>ModalClick</div>
          </WantedPublishModal>
        </Modal>
        {/* 下面用于分割wanted值的渲染，防止Error */}
        {(wanted => (
          <div>wanted{wanted}</div>
        ))(wanted)}
      </div>
    );
  },
  {
    info: { inline: true },
    notes: "A very simple example of addon notes"
  }
);