ReactTransitionGroup.re

type transitionHook = Dom.htmlElement => unit;

module type Css = {
  let duration: int;
  let appear: string;
  let enter: string;
  let exit: string;
  let appearActive: string;
  let enterActive: string;
  let exitActive: string;
};

module ClassNames = {
  type t = {
    .
    "appear": string,
    "appearActive": string,
    "enter": string,
    "enterActive": string,
    "exit": string,
    "exitActive": string,
  };

  let fromCss = (css: (module Css)): t => {
    let (module Css) = css;
    {
      "appear": Css.appear,
      "appearActive": Css.appearActive,
      "enter": Css.enter,
      "enterActive": Css.enterActive,
      "exit": Css.exit,
      "exitActive": Css.exitActive,
    };
  };
};

module CSSTransition = {
  type props = {
    .
    "in": bool,
    "appear": option(bool),
    "enter": option(bool),
    "exit": option(bool),
    "mountOnEnter": option(bool),
    "unmountOnExit": option(bool),
    "timeout": int,
    "classNames": ClassNames.t,
    // "onEnter": onEnter->Js.Nullable.fromOption,
    // "onEntering": onEntering->Js.Nullable.fromOption,
    "onEntered": option(transitionHook),
    // "onExit": onExit->Js.Nullable.fromOption,
    // "onExiting": onExiting->Js.Nullable.fromOption,
    "onExited": option(transitionHook),
    "children": React.element,
  };

  [@bs.obj]
  external makeProps:
    (
      ~_in: bool,
      ~appear: option(bool)=?,
      ~enter: option(bool)=?,
      ~exit: option(bool)=?,
      ~mountOnEnter: option(bool)=?,
      ~unmountOnExit: option(bool)=?,
      ~timeout: int,
      ~classNames: ClassNames.t,
      // ~onEnter: option(transitionHook)=?,
      // ~onEntering: option(transitionHook)=?,
      ~onEntered: option(transitionHook)=?,
      // ~onExit: option(transitionHook)=?,
      // ~onExiting: option(transitionHook)=?,
      ~onExited: option(transitionHook)=?,
      ~key: option(string)=?,
      ~children: React.element,
      unit
    ) =>
    props =
    "";

  let makeProps =
      (
        ~shown,
        ~appear=?,
        ~enter=?,
        ~exit=?,
        ~mountOnEnter=?,
        ~unmountOnExit=?,
        ~timeout,
        ~classNames,
        // ~onEnter: option(transitionHook)=?,
        // ~onEntering: option(transitionHook)=?,
        ~onEntered=?,
        // ~onExit: option(transitionHook)=?,
        // ~onExiting: option(transitionHook)=?,
        ~onExited=?,
        ~key=?,
        ~children,
        (),
      ) =>
    makeProps(
      ~_in=shown,
      ~appear,
      ~enter,
      ~exit,
      ~mountOnEnter,
      ~unmountOnExit,
      ~timeout,
      ~classNames=classNames->ClassNames.fromCss,
      // ~onEnter,
      // ~onEntering,
      ~onEntered,
      // ~onExit,
      // ~onExiting,
      ~onExited,
      ~key,
      ~children,
      (),
    );

  [@bs.module "react-transition-group"]
  external make: React.component(props) = "CSSTransition";
};