Created
January 21, 2018 18:10
-
-
Save scull7/6d9c820a571c618ca5ee67b8e2daad8f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module ClassNameList = { | |
| type param = option(string); | |
| let join = (cur: string, x: param) : string => | |
| switch x { | |
| | None => cur | |
| | Some(s) => cur ++ " " ++ s | |
| }; | |
| let make = (classList: list(param)) : string => | |
| classList |> List.fold_left(join, ""); | |
| }; | |
| module Basic = { | |
| type param = option(string); | |
| module LoadingIndicator = { | |
| let component = ReasonReact.statelessComponent("WidgetLoadingIndicator"); | |
| let make = _children => { | |
| ...component, | |
| render: _self => | |
| <div | |
| className="widget-content" | |
| style=(ReactDOMRe.Style.make(~height="30px", ()))> | |
| <div className="influential-loading-widget" /> | |
| </div> | |
| }; | |
| }; | |
| module WidgetContent = { | |
| let component = ReasonReact.statelessComponent("WidgetContent"); | |
| let make = (~padding=?, ~overflow=?, children) => { | |
| ...component, | |
| render: _self => | |
| ReasonReact.createDomElement( | |
| "div", | |
| ~props={ | |
| "className": ClassNameList.make([Some("widget-content"), padding]), | |
| "style": ReactDOMRe.Style.make(~overflow?, ()) | |
| }, | |
| children | |
| ) | |
| }; | |
| }; | |
| let component = ReasonReact.statelessComponent("BasicWidgetContainer"); | |
| let make = | |
| ( | |
| ~className=?, | |
| ~float=false, | |
| ~heading=?, | |
| ~loading=true, | |
| ~overflow=?, | |
| ~padding=?, | |
| ~readOnly=false, | |
| ~width=?, | |
| children | |
| ) => { | |
| ...component, | |
| render: _self => { | |
| let widgetHeader = Js.Option.getWithDefault("Widget", heading); | |
| let classList = | |
| ClassNameList.make([ | |
| Some("widget"), | |
| loading ? Some("loading") : None, | |
| readOnly ? Some("read-only") : None, | |
| float ? None : Some("no-float"), | |
| className, | |
| width | |
| ]); | |
| <div className=classList> | |
| <div className="widget-header"> | |
| <h3> (ReasonReact.stringToElement(widgetHeader)) </h3> | |
| </div> | |
| ( | |
| loading ? | |
| <LoadingIndicator /> : | |
| <WidgetContent overflow> ...children </WidgetContent> | |
| ) | |
| </div>; | |
| } | |
| }; | |
| }; |
After reading the docs on prop forwarding I was able to get this to compile by changing line 73 to the following:
<WidgetContent ?padding ?overflow> ...children </WidgetContent>Hopefully someone can explain why this works, because right now I'm even more lost.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm completely lost on 2 things.
<WidgetContent overflow>the compiler complains thatoverflowhas the typeoption('a)but somewhere wantedstring. Where is that somewhere?<WidgetContent padding>the compiler, similarly, complains thatpaddinghas the typeoption('a)but somewhere wantedstring. Where is that somewhere?Compiler Output
overflow
padding