Nav apraksta

Payment.stories.tsx 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. import React, { MouseEvent } from "react";
  2. import { storiesOf } from "@storybook/react";
  3. import { action } from "@storybook/addon-actions";
  4. import { withInfo } from "@storybook/addon-info";
  5. import {
  6. withKnobs,
  7. number,
  8. boolean,
  9. select,
  10. text,
  11. array
  12. } from "@storybook/addon-knobs";
  13. import { addReadme } from "storybook-readme";
  14. import { Divider, Button } from "antd";
  15. import ConsumeListView from "@/components/Payment/ConsumeListView";
  16. import ConsumeListViewDoc from "@components/Payment/ConsumeListView/README.md";
  17. import PayPlatFormOptions, {
  18. PAY_CHANNEL
  19. } from "@/components/Payment/PayPlatformOptions";
  20. import PayPlatFormOptionsDoc from "@components/Payment/PayPlatformOptions/README.md";
  21. import PriceOptions from "@/components/Payment/PriceOptions";
  22. import PriceOptionsDoc from "@components/Payment/PriceOptions/README.md";
  23. import WaitPayInfoView from "@/components/Payment/WaitPayInfoView";
  24. import WaitPayInfoViewDoc from "@components/Payment/WaitPayInfoView/README.md";
  25. import { formatMoney } from "@components/Payment/Utils/utils";
  26. import { consumeList } from "./data/consumeList.json";
  27. const consumeData: any = consumeList;
  28. const stories = storiesOf("Payment/Common", module);
  29. stories.addDecorator(storyFn => (
  30. <div style={{ padding: "0px 40px" }}>{storyFn()}</div>
  31. ));
  32. stories.addDecorator(withKnobs);
  33. stories.addDecorator(withInfo);
  34. stories.addDecorator(addReadme);
  35. stories.add(
  36. "ConsumeListView",
  37. () => {
  38. const [toggle, setToggle] = React.useState(false);
  39. return (
  40. <ConsumeListView
  41. isToggle={toggle}
  42. onToggleChange={() => setToggle(!toggle)}
  43. onConsumeItemClick={(e: MouseEvent, clickData: any) => {
  44. console.log(clickData);
  45. }}
  46. dataSource={consumeData}
  47. listLength={consumeData.length}
  48. showLength={number("showLength", 5)}
  49. />
  50. );
  51. },
  52. {
  53. info: {
  54. inline: true,
  55. text: `
  56. ~~~typescript
  57. <ConsumeListView
  58. isToggle={toggle}
  59. onToggleChange={() => setToggle(!toggle)}
  60. dataSource={consumeData}
  61. listLength={consumeData.length}
  62. showLength={number("showLength", 5)}
  63. />
  64. ~~~
  65. `,
  66. source: false,
  67. maxPropStringLength: 500
  68. },
  69. notes: "A very simple example of addon notes",
  70. readme: {
  71. sidebar: ConsumeListViewDoc
  72. }
  73. }
  74. );
  75. stories.add(
  76. "PayPlatFormOptions",
  77. () => {
  78. const [payChannel, setPayChannel] = React.useState(PAY_CHANNEL.PAYPAL);
  79. return (
  80. <PayPlatFormOptions
  81. payChannel={payChannel}
  82. onPayChannelChange={value => {
  83. action(`PayItemChange: ${value}`);
  84. setPayChannel(value);
  85. }}
  86. isMobile={boolean("isMobile", false)}
  87. size={select(
  88. "size",
  89. { Small: "small", Normal: "normal", Large: "large" },
  90. "normal"
  91. )}
  92. withTitle={boolean("withTitle", false)}
  93. locale={select("locale", { ZH: "zh", EN: "en" }, "zh")}
  94. />
  95. );
  96. },
  97. {
  98. info: {
  99. inline: true,
  100. text: ``,
  101. source: false,
  102. maxPropStringLength: 500
  103. },
  104. notes: "A very simple example of addon notes",
  105. readme: {
  106. sidebar: PayPlatFormOptionsDoc
  107. }
  108. }
  109. );
  110. stories.add(
  111. "PriceOptions",
  112. () => {
  113. const [price, setPrice] = React.useState(0);
  114. const refInput = React.useRef(null);
  115. return (
  116. <div style={{ width: text("style_width", "auto") }}>
  117. <PriceOptions
  118. price={price}
  119. rowMode={select(
  120. "rowMode",
  121. { single: "single", multi: "multi" },
  122. "single"
  123. )}
  124. onPriceChange={v => setPrice(v)}
  125. size={select(
  126. "size",
  127. { Small: "small", Normal: "normal", Large: "large" },
  128. "normal"
  129. )}
  130. withTitle={boolean("withTitle", false)}
  131. titleText={text("titleText", "")}
  132. inputPlaceholderText={text("inputPlaceholderText", "其他金额")}
  133. focusScroll={boolean("focusScroll", false)}
  134. priceOptions={array("priceOptions", ["100", "600", "800"])}
  135. priceRender={(i: number) => `${formatMoney(i / 100, 0)}¥`}
  136. inputRef={refInput}
  137. />
  138. <Divider />
  139. <div>price: {price}</div>
  140. </div>
  141. );
  142. },
  143. {
  144. info: {
  145. inline: true,
  146. text: ``,
  147. source: false,
  148. maxPropStringLength: 500
  149. },
  150. notes: "A very simple example of addon notes",
  151. readme: {
  152. sidebar: PriceOptionsDoc
  153. }
  154. }
  155. );
  156. stories.add(
  157. "WaitPayInfoView",
  158. () => {
  159. return <WaitPayInfoView />;
  160. },
  161. {
  162. info: { inline: true, text: ``, source: false, maxPropStringLength: 500 },
  163. notes: "A very simple example of addon notes",
  164. readme: {
  165. sidebar: WaitPayInfoViewDoc
  166. }
  167. }
  168. );