I’m trying to display some UI with Microsoft’s Fluent UI React library using the ReScript React bindings. The DetailList component has a zillion properties and events. I want to use GenType to to ensure my ReScript bindings are correct rather than just throwing code over the wall with @send. I’ve spent many hours now trying to model many of the FluentUI structures in React. For example, below is the Selection
structure. I tried just modeling a few properties but this generated a syntax error since I need to pass this thing into the constructor and the constructor expects a lot of it. I’m wondering if I should instead create a detailListWrapper.ts
file that does all the heavy lifting and only import exactly what I need. Maybe I’d create a wrapper around the detail list constructor where I just pass the 2 or 3 properties that matter to me and then GenType import that.
How are people practically working with GenType? It seems like writing a full set of bindings for a complex thing like Microsoft’s Fluid UI React library is an overwhelming task. I could also choose to do all my UI in typescript, but that isn’t much fun since I really like using ReScript.
type t<'item> = {
count: int,
getItems: unit => array<'item>,
mode: Mode.t,
canSelectItem: ('item, Js.undefined<int>) => bool,
setChangeEvents: (bool, Js.undefined<bool>) => unit,
setItems: (array<'item>, bool) => unit,
getSelection: unit => array<'item>,
getSelectedIndices: unit => array<int>,
getSelectedCount: unit => int,
isRangeSelected: (int, int) => bool,
isAllSelected: unit => bool,
isKeySelected: string => bool,
isIndexSelected: int => bool,
isModal: option<unit => bool>,
setAllSelected: bool => unit,
setKeySelected: (string, bool, bool) => unit,
setIndexSelected: (int, bool, bool) => unit,
setModal: option<bool => unit>,
selectToKey: (string, Js.undefined<bool>) => unit,
selectToIndex: (int, Js.undefined<bool>) => unit,
toggleAllSelected: unit => unit,
toggleKeySelected: string => unit,
toggleIndexSelected: int => unit,
toggleRangeSelected: (int, int) => unit,
}