From b42a6641289a2dd0f6c18a60e13295072f2928b3 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 4 May 2022 17:00:00 +0200 Subject: [PATCH] Dynamic heading element --- src/js/bindings/react/react_dom.nim | 2 +- src/js/example/sandbox.nim | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/js/bindings/react/react_dom.nim b/src/js/bindings/react/react_dom.nim index bcbccc3..52bdc63 100644 --- a/src/js/bindings/react/react_dom.nim +++ b/src/js/bindings/react/react_dom.nim @@ -7,7 +7,7 @@ from react_globals import React when not defined(js): {.error: "React.nim is only available for the JS target".} -type NodeOrString = ReactNode or seq[ReactNode] or cstring or string +type NodeOrString* = ReactNode or seq[ReactNode] or cstring or string macro idString(x: untyped): auto = newStrLitNode($x) diff --git a/src/js/example/sandbox.nim b/src/js/example/sandbox.nim index 1152824..2518277 100644 --- a/src/js/example/sandbox.nim +++ b/src/js/example/sandbox.nim @@ -46,11 +46,22 @@ proc toMarkUp(x: OrgInlineBlock): ReactNode = of orgLink: a(Attrs{href: x.linkUrl}, x.linkDescription.getOrElse(x.linkUrl)) else: p(Attrs{}, "Unmatched") +proc intToHeading(x: int, a: Attrs, m1 : NodeOrString): auto = + let heading = case x: + of 0: "h1" + of 1: "h2" + of 2: "h3" + of 3: "h4" + of 4: "h5" + of 5: "h6" + else: "h1" + React.createElement(heading, a, m1) + proc makeItems(x: string): seq[ReactNode] = makeOrg(x) .fold( (err) => @[`div`(Attrs{}, &"Errors: {err}")], - (xs: OrgBuilder) => xs.tree.map((x: OrgBlock) => h1(Attrs{}, x.headlineContent.map(x => toMarkUp(x)))), + (xs: OrgBuilder) => xs.tree.map((x: OrgBlock) => intToHeading(x.level, Attrs{}, x.headlineContent.map(x => toMarkUp(x)))), ) proc makeTopLevel(): ReactNode {.exportc.} =