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) =>
{storyFn()}
) 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 setToggle(!toggle)} dataSource={consumeData} listLength={consumeData.length} showLength={number("showLength", 5)} /> }, { info: { inline: true, text: ` ~~~typescript setToggle(!toggle)} dataSource={consumeData} listLength={consumeData.length} showLength={number("showLength", 5)} /> ~~~ `, // TableComponent: (props: TableComponentOptionProps) => { // const { propDefinitions } = props; // return propDefinitions.map(i => { // return ( //
// {i.defaultValue} //
// ) // }) // }, 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 ( { 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 ( 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 ( ) }, { info: { inline: true, text: ``, source: false, maxPropStringLength: 500 }, notes: 'A very simple example of addon notes', readme: { sidebar: WaitPayInfoViewDoc, } } )