Geen omschrijving

Wanted.stories.tsx 6.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. import { storiesOf } from "@storybook/react";
  2. import {
  3. number,
  4. select,
  5. text,
  6. boolean,
  7. withKnobs
  8. } from "@storybook/addon-knobs";
  9. import { withInfo } from "@storybook/addon-info";
  10. import { addReadme } from "storybook-readme";
  11. import React from "react";
  12. import AllocWantedModal from "@components/Payment/AllocWantedModal";
  13. import { Button, Divider, Modal } from "antd";
  14. import WantedPublishView, {
  15. WantedViewWranModel
  16. } from "@components/Payment/WantedPublishView";
  17. import WantedPublishModal from "@components/Payment/WantedPublishModal";
  18. import WantedPublishPopover from "@components/Payment/WantedPublishPopover";
  19. import { ModalCMD } from "@components/Common";
  20. const stories = storiesOf("Payment/Wanted", module);
  21. stories.addDecorator(storyFn => (
  22. <div style={{ padding: "0px 40px" }}>{storyFn()}</div>
  23. ));
  24. stories.addDecorator(withKnobs);
  25. stories.addDecorator(withInfo);
  26. stories.addDecorator(addReadme);
  27. stories.add(
  28. "AllocWantedModal",
  29. () => {
  30. return (
  31. <AllocWantedModal
  32. allocValue={number("allocValue", 100)}
  33. sendValueRange={[number("minValue", 0), number("maxValue", 100)]}
  34. sendRequest={(...args: any) => {
  35. console.log(args);
  36. }}
  37. sendGiftData={{
  38. answerId: text("answerId", "1"),
  39. questionId: text("questionId", "1"),
  40. toUserId: text("toUserId", "1")
  41. }}
  42. handleVisibleChange={visiable => {
  43. console.log(visiable);
  44. }}
  45. >
  46. <Button>Click it</Button>
  47. </AllocWantedModal>
  48. );
  49. },
  50. {
  51. info: { inline: true },
  52. notes: "A very simple example of addon notes"
  53. }
  54. );
  55. stories.add(
  56. "WantedPushView",
  57. () => {
  58. const [currentWanted, setCurrentWanted] = React.useState(0);
  59. return (
  60. <div style={{ border: "4px solid black", padding: "4px" }}>
  61. <WantedPublishView
  62. type={select(
  63. "type",
  64. {
  65. POP: "pop",
  66. Modal: "modal"
  67. },
  68. "pop"
  69. )}
  70. wrapperClass="test_wrapper"
  71. current_wanted={currentWanted}
  72. InputWantedValueChange={(value: any) => setCurrentWanted(value)}
  73. InputWantedOnBlur={(blurValue: any) => setCurrentWanted(blurValue)}
  74. InputWantedClear={() => setCurrentWanted(0)}
  75. InputWantedPressEnter={(enterValue: any) =>
  76. setCurrentWanted(enterValue)
  77. }
  78. InputWantedConfirm={() => {
  79. console.log("Close Button");
  80. }}
  81. />
  82. <Divider />
  83. <div>currentWanted: {currentWanted}</div>
  84. </div>
  85. );
  86. },
  87. {
  88. info: { inline: true },
  89. notes: "A very simple example of addon notes"
  90. }
  91. );
  92. stories.add(
  93. "WantedPublishPopover And Modal",
  94. () => {
  95. const [wanted, setWanted] = React.useState("");
  96. const [testModal, setTestModal] = React.useState(false);
  97. return (
  98. <div>
  99. <div>
  100. <WantedPublishModal
  101. currentWanted={wanted}
  102. handleConfirm={(value: any, ref: React.Ref<any>) => {
  103. console.log("wanted", wanted);
  104. console.log("value", value);
  105. if (Number(wanted) - value > 0) {
  106. WantedViewWranModel({
  107. refMount: document.body,
  108. actionConfirm: () => {
  109. setWanted(value);
  110. },
  111. actionCancel: () => {}
  112. });
  113. return;
  114. }
  115. setWanted(value);
  116. }}
  117. viewConfig={{
  118. showInputWantedClear: boolean(
  119. "viewConfig.showInputWantedClear",
  120. false
  121. )
  122. }}
  123. >
  124. <div>ModalClick</div>
  125. </WantedPublishModal>
  126. </div>
  127. <Divider />
  128. <div>
  129. <WantedPublishPopover
  130. popoverConfig={{
  131. placement: select(
  132. "popoverConfigPlacement",
  133. {
  134. Undefined: undefined,
  135. Left: "left",
  136. Right: "right",
  137. Top: "top",
  138. Bottom: "bottom",
  139. TopLeft: "topLeft",
  140. TopRight: "topRight",
  141. BottomLeft: "bottomLeft",
  142. BottomRight: "bottomRight",
  143. LeftTop: "leftTop",
  144. LeftBottom: "leftBottom",
  145. RightTop: "rightTop",
  146. RightBottom: "rightBottom"
  147. },
  148. undefined
  149. ),
  150. trigger: select(
  151. "popoverConfigTrigger",
  152. {
  153. Undefined: undefined,
  154. Hover: "hover",
  155. Click: "click",
  156. Focus: "focus",
  157. ContextMenu: "contextMenu"
  158. },
  159. undefined
  160. )
  161. }}
  162. currentWanted={wanted}
  163. handleConfirm={(value: any, ref: React.Ref<any>) => {
  164. if (Number(wanted) - value > 0) {
  165. WantedViewWranModel({
  166. refMount: document.body,
  167. actionConfirm: () => {
  168. setWanted(value);
  169. },
  170. actionCancel: () => {}
  171. });
  172. return;
  173. }
  174. setWanted(value);
  175. }}
  176. viewConfig={{
  177. showInputWantedClear: boolean(
  178. "viewConfig.showInputWantedClear",
  179. false
  180. )
  181. }}
  182. >
  183. <Button>HoverIt{wanted}</Button>
  184. </WantedPublishPopover>
  185. </div>
  186. <Divider />
  187. <div onClick={() => setTestModal(true)}>Show Modal</div>
  188. <Modal
  189. visible={testModal}
  190. title="Create a new collection"
  191. okText="Create"
  192. onCancel={() => setTestModal(false)}
  193. onOk={() => setTestModal(true)}
  194. >
  195. <WantedPublishModal>
  196. <div>ModalClick</div>
  197. </WantedPublishModal>
  198. </Modal>
  199. {/* 下面用于分割wanted值的渲染,防止Error */}
  200. {(wanted => (
  201. <div>wanted{wanted}</div>
  202. ))(wanted)}
  203. </div>
  204. );
  205. },
  206. {
  207. info: { inline: true },
  208. notes: "A very simple example of addon notes"
  209. }
  210. );