showcase.rs 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. #![allow(
  2. unused,
  3. dead_code,
  4. non_upper_case_globals,
  5. non_camel_case_types,
  6. non_snake_case
  7. )]
  8. fn main() {}
  9. use dioxus::prelude::*;
  10. use std::rc::Rc;
  11. static App: FC<()> = |cx| {
  12. let (selection, set_selection) = use_state(cx, || None as Option<usize>).classic();
  13. let body = match selection {
  14. Some(id) => rsx!(in cx, ReferenceItem { selected: *id }),
  15. None => rsx!(in cx, div { "Select an concept to explore" }),
  16. };
  17. cx.render(rsx! {
  18. div {
  19. ScrollSelector { onselect: move |id| set_selection(id) }
  20. {body}
  21. }
  22. })
  23. };
  24. // this is its own component to stay memoized
  25. #[derive(Props)]
  26. struct ScrollSelectorProps<'a> {
  27. onselect: &'a dyn Fn(Option<usize>),
  28. }
  29. fn ScrollSelector<'a>(cx: Context<'a, ScrollSelectorProps>) -> DomTree<'a> {
  30. let selection_list = (&REFERENCES).iter().enumerate().map(|(id, _)| {
  31. rsx! {
  32. li {
  33. h3 {}
  34. }
  35. }
  36. });
  37. cx.render(rsx! {
  38. div {
  39. h1 {""}
  40. ul {
  41. {selection_list}
  42. button {
  43. onclick: move |_| (cx.onselect)(Some(10))
  44. }
  45. }
  46. }
  47. })
  48. }
  49. #[derive(PartialEq, Props)]
  50. struct ReferenceItemProps {
  51. selected: usize,
  52. }
  53. static ReferenceItem: FC<ReferenceItemProps> = |cx| {
  54. let (caller, name, code) = REFERENCES[cx.selected];
  55. // Create the component using the factory API directly
  56. let caller_node = LazyNodes::new(move |f| f.component(caller, (), None, &[]));
  57. cx.render(rsx! {
  58. div {
  59. // Source of the left, rendered on the right
  60. div {
  61. code { "{code}" }
  62. }
  63. div {
  64. {caller_node}
  65. }
  66. }
  67. })
  68. };
  69. use reference::REFERENCES;
  70. mod reference {
  71. mod antipatterns;
  72. mod basics;
  73. mod children;
  74. mod conditional_rendering;
  75. mod controlled_inputs;
  76. mod custom_elements;
  77. mod empty;
  78. mod fragments;
  79. mod global_css;
  80. mod inline_styles;
  81. mod iterators;
  82. mod listener;
  83. mod memo;
  84. mod noderefs;
  85. mod signals;
  86. mod spreadpattern;
  87. mod statemanagement;
  88. mod suspense;
  89. mod task;
  90. mod testing;
  91. mod tostring;
  92. use super::*;
  93. pub static REFERENCES: &[(FC<()>, &str, &str)] = &[
  94. (
  95. basics::Example,
  96. "Basics",
  97. include_str!("./reference/basics.rs"),
  98. ),
  99. (
  100. children::Example,
  101. "Children",
  102. include_str!("./reference/children.rs"),
  103. ),
  104. (
  105. conditional_rendering::Example,
  106. "Conditional Rendering",
  107. include_str!("./reference/conditional_rendering.rs"),
  108. ),
  109. // TODO
  110. (
  111. controlled_inputs::Example,
  112. "Controlled Inputs",
  113. include_str!("./reference/controlled_inputs.rs"),
  114. ),
  115. (
  116. empty::Example,
  117. "empty",
  118. include_str!("./reference/empty.rs"),
  119. ),
  120. (
  121. custom_elements::Example,
  122. "Custom Elements & Web Components",
  123. include_str!("./reference/custom_elements.rs"),
  124. ),
  125. (
  126. fragments::Example,
  127. "Fragments",
  128. include_str!("./reference/fragments.rs"),
  129. ),
  130. (
  131. iterators::Example,
  132. "Iterators",
  133. include_str!("./reference/iterators.rs"),
  134. ),
  135. (
  136. global_css::Example,
  137. "Global CSS",
  138. include_str!("./reference/global_css.rs"),
  139. ),
  140. (
  141. inline_styles::Example,
  142. "Inline Styles",
  143. include_str!("./reference/inline_styles.rs"),
  144. ),
  145. (
  146. listener::Example,
  147. "Listener",
  148. include_str!("./reference/listener.rs"),
  149. ),
  150. (memo::Example, "Memo", include_str!("./reference/memo.rs")),
  151. (
  152. spreadpattern::Example,
  153. "Spread Pattern",
  154. include_str!("./reference/spreadpattern.rs"),
  155. ),
  156. (
  157. suspense::Example,
  158. "Suspense",
  159. include_str!("./reference/suspense.rs"),
  160. ),
  161. (task::Example, "Task", include_str!("./reference/task.rs")),
  162. (
  163. tostring::Example,
  164. "Tostring",
  165. include_str!("./reference/tostring.rs"),
  166. ),
  167. (
  168. antipatterns::Example,
  169. "Anti-patterns",
  170. include_str!("./reference/antipatterns.rs"),
  171. ),
  172. /*
  173. TODO! these showcase features that aren't quite ready
  174. */
  175. (
  176. signals::Example,
  177. "Signals",
  178. include_str!("./reference/signals.rs"),
  179. ),
  180. (
  181. noderefs::Example,
  182. "NodeRefs",
  183. include_str!("./reference/noderefs.rs"),
  184. ),
  185. (
  186. statemanagement::Example,
  187. "State Management",
  188. include_str!("./reference/statemanagement.rs"),
  189. ),
  190. (
  191. testing::Example,
  192. "Testing",
  193. include_str!("./reference/testing.rs"),
  194. ),
  195. ];
  196. }