bilingo-ui/stories/Payment.stories.tsx

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, 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 AllocWantedModal from "@/components/Payment/AllocWantedModal";
import WantedPublishView from "@/components/Payment/WantedPublishView";
import WantedPublishPopover from "@/components/Payment/WantedPublishPopover";
import WantedPublishModal from "@/components/Payment/WantedPublishModal";
import { formatMoney } from "@components/Payment/Utils/utils";

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>
));
stories.addDecorator(withKnobs);
stories.addDecorator(withInfo);
stories.addDecorator(addReadme);

stories.add(
  "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)}
      />
    );
  },
  {
    info: {
      inline: true,
      text: `
      ~~~typescript
      <ConsumeListView
        isToggle={toggle}
        onToggleChange={() => setToggle(!toggle)}
        dataSource={consumeData}
        listLength={consumeData.length}
        showLength={number("showLength", 5)}
      />
      ~~~
      `,
      source: false,
      maxPropStringLength: 500
    },
    notes: "A very simple example of addon notes",
    readme: {
      sidebar: ConsumeListViewDoc
    }
  }
);

stories.add(
  "PayPlatFormOptions",
  () => {
    const [payChannel, setPayChannel] = React.useState(PAY_CHANNEL.PAYPAL);
    return (
      <PayPlatFormOptions
        payChannel={payChannel}
        onPayChannelChange={value => {
          action(`PayItemChange: ${value}`);
          setPayChannel(value);
        }}
        isMobile={boolean("isMobile", false)}
        size={select(
          "size",
          { Small: "small", Normal: "normal", Large: "large" },
          "normal"
        )}
        withTitle={boolean("withTitle", false)}
        locale={select("locale", { ZH: "zh", EN: "en" }, "zh")}
      />
    );
  },
  {
    info: {
      inline: true,
      text: ``,
      source: false,
      maxPropStringLength: 500
    },
    notes: "A very simple example of addon notes",
    readme: {
      sidebar: PayPlatFormOptionsDoc
    }
  }
);

stories.add(
  "PriceOptions",
  () => {
    const [price, setPrice] = React.useState(0);
    const refInput = React.useRef(null);
    return (
      <div style={{ width: text("style_width", "auto") }}>
        <PriceOptions
          price={price}
          rowMode={select(
            "rowMode",
            { single: "single", multi: "multi" },
            "single"
          )}
          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>
      </div>
    );
  },
  {
    info: {
      inline: true,
      text: ``,
      source: false,
      maxPropStringLength: 500
    },
    notes: "A very simple example of addon notes",
    readme: {
      sidebar: PriceOptionsDoc
    }
  }
);

stories.add(
  "WaitPayInfoView",
  () => {
    return <WaitPayInfoView />;
  },
  {
    info: { inline: true, text: ``, source: false, maxPropStringLength: 500 },
    notes: "A very simple example of addon notes",
    readme: {
      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 And Modal",
  () => {
    const [wanted, setWanted] = React.useState("");
    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 />
        {/* 下面用于分割wanted值的渲染，防止Error */}
        {(wanted => (
          <div>wanted{wanted}</div>
        ))(wanted)}
      </div>
    );
  },
  {
    info: { inline: true },
    notes: "A very simple example of addon notes"
  }
);