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 { formatMoney } from "@components/Payment/Utils/utils";

import { consumeList } from "./data/consumeList.json";

const consumeData: any = consumeList;

const stories = storiesOf("Payment/Common", 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
    }
  }
);