thangngoc89 / bs-ant-design

Bucklescript + ReasonReact binding Ant Design

thangngoc89

I mostly made this to avoid someone else taking it first :-)

Usage

var thangngoc89 = require('thangngoc89')
console.log(thangngoc89.name.first) // 'Nguyen'
// ... etc

License

MIT

bs-ant-design's Issues

ES6 default imports are broken in ParcelJS

👋

Thanks for the bindings.

I tried to use them in a project that was bundled with ParcelJS and it wasn't able to use the bindings as they are defined. The default export is not pulled in correctly. For example, changing a binding from:

[@bs.module] external reactClass: ReasonReact.reactClass = "antd/lib/button";

to:

[@bs.module "antd/lib/button"] external reactClass: ReasonReact.reactClass = "default";

Fixed the issue.

Any plans to update this to support hooks?

Just wondering if this is still being maintained and whether the hooks update is planned for the near future.

ant design 3.11.3 - Unhandled Rejection (Invariant Violation): Element type is invalid

I am trying to upgrade ant design in my project and getting this error: Unhandled Rejection (Invariant Violation): Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

I seem to have traced it to these lines: https://github.com/thangngoc89/bs-ant-design/blob/master/src/Antd_Layout.re#L20-L22

I found a reason-react page on this that gives some conditions I would get this error: https://reasonml.github.io/reason-react/docs/en/element-type-is-invalid

Can someone try upgrading to latest antd and advise if there is any way to adjust the Antd_Layout bindings to work?

community contributions ready

Thank you for this and the blog post. I notice that andresrgz/bs-ant-design has added some components and there is a Card component pull request. I would like to contribute some missing things in the near future too. Could you get those existing community contributions into master to keep the momentum on this amazing effort going.

less 2.x no longer needed

The README suggests to use less@^2.7.3.

This should no longer be necessary since the ant-design incompatibility with less 3.x has been fixed since Dec 13 2018 (antd 3.11.3)

bs-and

Would it make sense to take the bindings in bs-antd and override that with the improved bindings made available here? Would combining both somehow give the community better overall antd support than each individually? I am just getting up to speed on this but it seems like bs-antd has full coverage but some of the interfaces have an issue that you have identified but I am curious if it is generally worth trying to fall back to bs-antd if a component doesn't exist yet here. Or is it better if I just create it following the pattern you have setup here and just pretend that bs-antd doesn't exist.

Add tests

Follow discussion here
https://reasonml.chat/t/what-is-your-approach-to-test-a-reasonreact-binding/196/7

Releasing a new package version on npm?

Is the current master snapshot ready for another release to npm?

Menu onClick usage

Can someone post sample code how menu is used with bs-ant-design? I am trying to convert the docs example and am completely stuck on the handleClick function and Menu onClick parameter. Could someone post the bs-ant-design reason version of the horizontal menu code (or a link to any project using it)?

JS - https://github.com/ant-design/ant-design/blob/master/components/menu/demo/horizontal.md

state = {current: 'mail',}

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        ...

Reason (rookie attempt)

type state = {current: string};

type action =
  | Click(string);

let component = ReasonReact.reducerComponent("Menu");

let make = _children => {
  ...component,
    initialState: () => {current: "mail"},
     reducer: (action, state) =>
        switch (action) {
        | Click(item) => ReasonReact.Update({...state, current: item})
        },
  render: self =>
<Menu onClick= (event => self.send(Click(event##key)))
   selectedKeys=Array.of_list([self.state.current])
   mode=`Horizontal>
   <Menu.Item key="mail">
      <Icon type_="mail" />{ReasonReact.string("Navigation One")}
   </Menu.Item>
   <Menu.Item key="app" disabled=false>
      <Icon type_="appstore" />{ReasonReact.string("Navigation Two")}
   </Menu.Item>
</Menu>

Update: I believe I have figured it out and have updated the "rookie attempt" accordingly. If anyone thinks this could be done better please let me know for posterity.

Note that there are bindings for components I need in my fork and will do pull request when tested: https://github.com/Enalmada/bs-ant-design

Does not work with jx3 and And design 3.23.2

I installed bs-ant-design by following all the instruction, but I am unable to use any bound component with jx3. Here is the example I took from the official readme.

open Antd.Grid;

[@react.component]
let make = () => {
  <Row gutter={Row.SingleGutterInPx(4)} align=`top>
    <Col span=12 xs={Col.FullColSize(makeColSize(~span=5, ()))}>
      {ReasonReact.stringToElement("A")}
    </Col>
    <Col span=8 xs={Col.SingleColSize(4)}>
      {ReasonReact.stringToElement("B")}
    </Col>
  </Row>;
};

Each time launch the command bsb -make-world I’ve got this error:

This has type:
    'a =>
    ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
                           ReasonReact.actionless)
  But somewhere wanted:
    React.component('a) (defined as 'a => React.element)

  The incompatible parts:
    ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps,
                           ReasonReact.actionless)
      (defined as
      ReasonReact.componentSpec(ReasonReact.stateless, ReasonReact.stateless,
                                 ReasonReact.noRetainedProps,
                                 ReasonReact.noRetainedProps,
                                 ReasonReact.actionless))
    vs
    React.element

error Command failed with exit code 2.

verify and merge additional bindings

Following this project pattern I have added bindings for most of the remaining components here:
https://github.com/Enalmada/bs-ant-design

These have not yet been used and since these were the first reason code I have ever done, many of them have incorrect callback types, need dynamic types (ie string | ReasonReact.reactElement), need to be tested, etc. Once I get around to that I will do a pull request. But they still might benefit someone in current state. If anyone reading this is able to double check them for errors and submit pull request that would be very helpful.

Design considerations
I am converting list in reason code to array for proper javascript output. I think using lists in reason is nicer but let me know if this is a bad idea.

makeProps(
        ~actions=?Js.Option.map((. b) => Array.of_list(b), actions),

Note I have also gotten mobile web started:
https://github.com/Enalmada/bs-ant-design-mobile