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 } from "@storybook/addon-knobs";
import { addReadme } from 'storybook-readme';

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 { 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)}
      />
      ~~~
      `,
      // TableComponent: (props: TableComponentOptionProps) => {
      //   const { propDefinitions } = props;
      //   return propDefinitions.map(i => {
      //     return (
      //       <div>
      //         {i.defaultValue}
      //       </div>
      //     )
      //   })
      // },
      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 (
      <PriceOptions
        price={price}
        onPriceChange={(v) => setPrice(v)}
        size={select("size", { Small: "small", Normal: "normal", Large: "large"}, "normal")}
        withTitle={boolean("withTitle", false)}
        titleText="Price Title"
        focusScroll={boolean("focusScroll", false)}
        inputRef={refInput}
      />
    )
  },
  {
    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,
    }
  }
)