Dear all.
I’m new using Rescript, I’m trying to port the React use-selectify library for my React+Rescript project, this is what I have done so far:
@@uncurried
@@doc("Limited bindings for use-selectify.")
external castRef: React.ref<'a> => JsxDOMC.domRef = "%identity"
type theme =
| @as("default") Default
| @as("outline") Outline
| String(string)
type selectedElements = array<Dom.element>
type selectionBox = {
top: int,
left: int,
width: int,
height: int,
}
type useSelectifyOptions = {
selectCriteria: string,
autoScrollEdgeDistance: int,
autoScrollStep: int,
selectionDelay: int,
selectionTolerance: int,
activateOnKey: array<string>,
activateOnMetaKey: bool,
autoScroll: bool,
disabled: bool,
disableUnselection: bool,
forceMount: bool,
hideOnScroll: bool,
lazyLoad: bool,
onlySelectOnDragEnd: bool,
onlySelectOnFullOverlap: bool,
theme: theme,
label: string,
exclusionZone: option<string>,
maxSelections: option<int>,
onDragEnd: option<(Dom.pointerEvent, selectedElements) => unit>,
onDragMove: option<(Dom.pointerEvent, selectedElements) => unit>,
onDragStart: option<Dom.pointerEvent => unit>,
onEscapeKeyDown: option<Dom.keyboardEvent => unit>,
onSelect: option<Dom.element => unit>,
onUnselect: option<Dom.element => unit>,
}
type dragSelectionProps = {}
type useSelectifyOutput = {
@as("SelectBoxOutlet") selectBoxOutlet: React.component<dragSelectionProps>,
mutateSelections: selectedElements => selectedElements,
isDragging: bool,
hasSelected: bool,
options: useSelectifyOptions,
cancelSelectionBox: unit => unit,
clearSelection: unit => unit,
getSelectableElements: unit => selectedElements,
selectedElements: selectedElements,
selectAll: unit => unit,
selectionBox: selectionBox,
}
@module("use-selectify")
external useSelectify: (React.ref<'a>, useSelectifyOptions) => useSelectifyOutput = "useSelectify"
@react.component
let make = (
~selectCriteria: string="*",
~autoScrollEdgeDistance: int=100,
~autoScrollStep: int=30,
~selectionDelay: int=0,
~selectionTolerance: int=0,
~activateOnKey: array<string>=[],
~activateOnMetaKey: bool=false,
~autoScroll: bool=true,
~disabled: bool=false,
~disableUnselection: bool=false,
~forceMount: bool=false,
~hideOnScroll: bool=false,
~lazyLoad: bool=false,
~onlySelectOnDragEnd: bool=false,
~onlySelectOnFullOverlap: bool=false,
~theme: theme=Default,
~label: string="",
~exclusionZone: option<string>=?,
~maxSelections: option<int>=?,
~onDragEnd: option<(Dom.pointerEvent, selectedElements) => unit>=?,
~onDragMove: option<(Dom.pointerEvent, selectedElements) => unit>=?,
~onDragStart: option<Dom.pointerEvent => unit>=?,
~onEscapeKeyDown: option<Dom.keyboardEvent => unit>=?,
~onSelect: option<Dom.element => unit>=?,
~onUnselect: option<Dom.element => unit>=?,
) => {
let options: useSelectifyOptions = {
selectCriteria,
autoScrollEdgeDistance,
autoScrollStep,
selectionDelay,
selectionTolerance,
activateOnKey,
activateOnMetaKey,
autoScroll,
disabled,
disableUnselection,
forceMount,
hideOnScroll,
lazyLoad,
onlySelectOnDragEnd,
onlySelectOnFullOverlap,
theme,
label,
exclusionZone,
maxSelections,
onDragEnd,
onDragMove,
onDragStart,
onEscapeKeyDown,
onSelect,
onUnselect,
}
let selectionContainerRef = React.useRef(Js.Nullable.null)
let selectify = useSelectify(selectionContainerRef, options)
<div ref={selectionContainerRef->castRef}> {selectify.selectBoxOutlet({})} </div>
}
I Know jow to use the pattern
@module("lib")
external @react.component make: (~props) => React.element = "Component"
But in this case the library exports a useSelectify which return a SelectBoxOutlet which is defined as follows and returns a component
const SelectBoxOutlet = React.forwardRef<HTMLDivElement, SelectionComponentElement>(
(props: SelectionComponentElement, forwardedRef) => {
But when I mount my component <Selectify /> I got this error:
Uncaught TypeError: f.apply is not a function
app curry.js:14
_1 curry.js:62
Selectify Selectify.js:82
React 11
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
js scheduler.development.js:571
js scheduler.development.js:633
__require2 chunk-AUZ3RYOM.js:18
js index.js:6
__require2 chunk-AUZ3RYOM.js:18
React 2
__require2 chunk-AUZ3RYOM.js:18
js React
__require2 chunk-AUZ3RYOM.js:18
<anonymous> Transition.js:5
curry.js:14:15
app curry.js:14
_1 curry.js:62
Selectify Selectify.js:82
React 11
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
(Async: EventHandlerNonNull)
js scheduler.development.js:571
js scheduler.development.js:633
__require2 chunk-AUZ3RYOM.js:18
js index.js:6
__require2 chunk-AUZ3RYOM.js:18
React 2
__require2 chunk-AUZ3RYOM.js:18
js React
__require2 chunk-AUZ3RYOM.js:18
<anonymous> Transition.js:5