[ReasonReact][bs-rsuite-ui-react] Passing component as prop

Nosenation · 2019-10-26 10:05:37 UTC

Hi
I’m new to ReasonML (but got experience with React.js).
Started working on new project and wanted to use ReasonReact and bs-rsuite-ui-react.
In my code I wanted to pass Icon component to RsuiteUi.Nav.Item. According to ReasonReact documentation this should be trivial (normal function), but it isn’t.
This binding expects something like this:

~?icon: option(
    RsuiteUi.Icon.Props.t => React.element
),

I tried multiple things like:
<RsuiteUi.Nav.Item icon={() => <RsuiteUi.Icon icon="dashboard" />}> and many more, but it doesn’t work. Tried with named arguments, named with type but no success. Any body could help me with this?

yawaramin · 2019-10-26 16:19:16 UTC

Can you try: <RsuiteUi.Nav.Item icon=RsuiteUi.Icon.make />

Nosenation · 2019-10-26 16:42:46 UTC

@yawaramin
Tried

<RsuiteUi.Nav.Item icon=RsuiteUi.Icon.make(~icon="dashboard")>

and got this error:

Error: The function applied to this argument has type
         {. "children": option(React.element), "className": option(string),
           "classPrefix": option(string), "fixedWidth": option(bool),
           "flip": option([ `horizontal | `vertical ]),
           "icon": option(string), "inverse": option(bool),
           "pulse": option(bool), "rotate": option(int),
           "size": option([ `lg ]), "spin": option(bool),
           "style": option(ReactDOMRe.Style.t),
           "svgStyle": option(ReactDOMRe.Style.t)} =>
         React.element
This argument cannot be applied with label ~icon

yawaramin · 2019-10-26 16:58:53 UTC

What happens when you try the one I suggested?

Nosenation · 2019-10-26 17:08:31 UTC

@yawaramin This error

Error: This expression has type
         React.componentLike({. "children": option(React.element),
                               "className": option(string),
                               "classPrefix": option(string),
                               "fixedWidth": option(bool),
                               "flip": option([ `horizontal | `vertical ]),
                               "icon": option(string),
                               "inverse": option(bool),
                               "pulse": option(bool), "rotate": option(int),
                               "size": option([ `lg ]), "spin": option(bool),
                               "style": option(ReactDOMRe.Style.t),
                               "svgStyle": option(ReactDOMRe.Style.t)},
                              React.element)
           =
           {. "children": option(React.element), "className": option(string),
             "classPrefix": option(string), "fixedWidth": option(bool),
             "flip": option([ `horizontal | `vertical ]),
             "icon": option(string), "inverse": option(bool),
             "pulse": option(bool), "rotate": option(int),
             "size": option([ `lg ]), "spin": option(bool),
             "style": option(ReactDOMRe.Style.t),
             "svgStyle": option(ReactDOMRe.Style.t)} =>
           React.element
       but an expression was expected of type
         RsuiteUi.Icon.Props.t => React.element
       Type
         {. "children": option(React.element), "className": option(string),
           "classPrefix": option(string), "fixedWidth": option(bool),
           "flip": option([ `horizontal | `vertical ]),
           "icon": option(string), "inverse": option(bool),
           "pulse": option(bool), "rotate": option(int),
           "size": option([ `lg ]), "spin": option(bool),
           "style": option(ReactDOMRe.Style.t),
           "svgStyle": option(ReactDOMRe.Style.t)}
       is not compatible with type
         RsuiteUi.Icon.Props.t = RsuiteUi.Icon.Props.t

Maybe implementation of this component will help you:

github.com

shurygindv/bs-rsuite-ui-react/blob/master/src/Nav.re

[@bs.module "rsuite"] [@react.component]
external make:
  (
    ~children: React.element,
    ~style: ReactDOMRe.Style.t=?,
    ~classPrefix: string=?,
    ~className: string=?,

    ~appearance: [@bs.string] [
                  | `default
                  | `tabs
                  | `subtle
                ]
     =?,
     ~justified: bool=?,
     ~onSelect: (string, ReactEvent.Synthetic.t) => unit=?,
     ~pills: bool=?,
     ~pullRight: bool=?,
     ~stacked: bool=?,
  ) =>

This file has been truncated. show original

github.com

shurygindv/bs-rsuite-ui-react/blob/master/src/Icon.re

module Props = {
  [@bs.deriving abstract]
  type t = {
    [@bs.optional] style: ReactDOMRe.Style.t,
    [@bs.optional] children: React.element,
    [@bs.optional] classPrefix: string,
    [@bs.optional] className: string,
  
    [@bs.optional] svgStyle: ReactDOMRe.Style.t,
    [@bs.optional] spin: bool,
    [@bs.optional] pulse: bool,
    [@bs.optional] inverse: bool,
    [@bs.optional] rotate: int,
    [@bs.optional] fixedWidth: bool,
    [@bs.optional] icon: string,
    [@bs.optional] size: string,
    [@bs.optional] flip: string
  }
};

This file has been truncated. show original