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 { 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",
  () => {
    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"
  }
)