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/Common/ConsumeListView';
import ConsumeListViewDoc from '@components/Payment/Common/ConsumeListView/README.md';
import PayPlatFormOptions, { PAY_CHANNEL } from '@components/Payment/Common/PayPlatformOptions';
import PayPlatFormOptionsDoc from '@components/Payment/Common/PayPlatformOptions/README.md';
import PriceOptions from '@components/Payment/Common/PriceOptions';
import PriceOptionsDoc from '@components/Payment/Common/PriceOptions/README.md';
import WaitPayInfoView from '@components/Payment/Common/WaitPayInfoView';
import WaitPayInfoViewDoc from '@components/Payment/Common/WaitPayInfoView/README.md';

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

const consumeData = [
  {
    "id": 69,
    "consume_id": "20190919120838283305719",
    "goods_id": 0,
    "goods_type": 4,
    "num": 9,
    "user_id": 71082,
    "user_nickname": "lydia",
    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2018/8/26/10adf03c70fb128d546e0d40fea77047.jpg",
    "to_user_id": 1,
    "to_user_nickname": "",
    "to_user_avatar": "",
    "bill_price": 900,
    "ref_id": 0,
    "business_type": 3,
    "created_at": 1568894918,
    "updated_at": 1568894918
  },
  {
    "id": 32,
    "consume_id": "20190802095658644217897",
    "goods_id": 2,
    "goods_type": 1,
    "num": 8,
    "user_id": 2,
    "user_nickname": "jim",
    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2018/4/6/7d4948f6e9a66789f776b0c69c8d51d9.png",
    "to_user_id": 1,
    "to_user_nickname": "",
    "to_user_avatar": "",
    "bill_price": 800,
    "ref_id": 0,
    "business_type": 3,
    "created_at": 1564739818,
    "updated_at": 1564739818
  },
  {
    "id": 46,
    "consume_id": "20190819131433734083448",
    "goods_id": 2,
    "goods_type": 1,
    "num": 7,
    "user_id": 5,
    "user_nickname": "Chris",
    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/6/12/a1aec180fbb727cc693c7a2f14812dac.jpg",
    "to_user_id": 1,
    "to_user_nickname": "",
    "to_user_avatar": "",
    "bill_price": 700,
    "ref_id": 0,
    "business_type": 3,
    "created_at": 1566220473,
    "updated_at": 1566220473
  },
  {
    "id": 20,
    "consume_id": "20190729154830503859957",
    "goods_id": 2,
    "goods_type": 1,
    "num": 5,
    "user_id": 217,
    "user_nickname": "Paul",
    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/12/4/b9221e3176d92c349affc3633a0ec7bf.jpg",
    "to_user_id": 1,
    "to_user_nickname": "",
    "to_user_avatar": "",
    "bill_price": 500,
    "ref_id": 0,
    "business_type": 3,
    "created_at": 1564415310,
    "updated_at": 1564415310
  },
  {
    "id": 127,
    "consume_id": "20191204115927765695546",
    "goods_id": 2,
    "goods_type": 1,
    "num": 1,
    "user_id": 45,
    "user_nickname": "Adam",
    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/6/12/cbc5208e3a8aba6fcfc2cef2a4d5151d.jpg",
    "to_user_id": 1,
    "to_user_nickname": "",
    "to_user_avatar": "",
    "bill_price": 100,
    "ref_id": 0,
    "business_type": 3,
    "created_at": 1575460767,
    "updated_at": 1575460767
  },
  {
    "id": 71,
    "consume_id": "20190922010906704921621",
    "goods_id": 0,
    "goods_type": 4,
    "num": 1,
    "user_id": 22428,
    "user_nickname": "简单生活",
    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/9/22/27886bb4305ab56adc0b20018b975dc5.jpg",
    "to_user_id": 1,
    "to_user_nickname": "",
    "to_user_avatar": "",
    "bill_price": 100,
    "ref_id": 0,
    "business_type": 3,
    "created_at": 1569114546,
    "updated_at": 1569114546
  },
  {
    "id": 70,
    "consume_id": "20190920014118872836942",
    "goods_id": 0,
    "goods_type": 4,
    "num": 1,
    "user_id": 70406,
    "user_nickname": "vicky",
    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/5/5/8a0db661919f926501192eccf13740f1jpg",
    "to_user_id": 1,
    "to_user_nickname": "",
    "to_user_avatar": "",
    "bill_price": 100,
    "ref_id": 0,
    "business_type": 3,
    "created_at": 1568943678,
    "updated_at": 1568943678
  },
  {
    "id": 68,
    "consume_id": "20190917224355248346157",
    "goods_id": 0,
    "goods_type": 4,
    "num": 1,
    "user_id": 71603,
    "user_nickname": "Slate",
    "user_avatar": "https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/2019/10/19/1cb9f491e90258ba91a189027ef774b7.jpg",
    "to_user_id": 1,
    "to_user_nickname": "",
    "to_user_avatar": "",
    "bill_price": 100,
    "ref_id": 0,
    "business_type": 3,
    "created_at": 1568760235,
    "updated_at": 1568760235
  }
];

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)}
        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,
    }
  }
)