123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293 |
- import React 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/index';
- 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)}
- 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 [payitem, setPayitem] = React.useState(PAY_CHANNEL.PAYPAL);
- return (
- <PayPlatFormOptions
- payitem={payitem}
- onPayItemChange={(value) => {
- action(`PayItemChange: ${value}`);
- setPayitem(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,
- }
- }
- )
|