Initial API for react-transition-group

Author: toburger

build.fsx

@@ -22,6 +22,7 @@ let packages =
       "src/Fable.ReactLeaflet/Fable.ReactLeaflet.fsproj"
       "src/Fable.ReactGoogleMaps/Fable.ReactGoogleMaps.fsproj"
       "src/Fable.Recharts/Fable.Recharts.fsproj"
+      "src/Fable.React.TransitionGroup/Fable.React.TransitionGroup.fsproj"
     ]
 
 let addToPath newPath =

src/Fable.React.TransitionGroup/Fable.Helpers.React.TransitionGroup.fs

@@ -0,0 +1,79 @@
+module Fable.Helpers.React.TransitionGroup
+
+open Fable.Core
+open Fable.Core.JsInterop
+open Fable.Import
+open Fable.Helpers.React
+open Fable.Helpers.React.Props
+
+type Timeout = {
+    enter: int option
+    exit: int option
+}
+
+type TransitionStatus =
+    | [<CompiledName("entering")>] Entering
+    | [<CompiledName("entered")>] Entered
+    | [<CompiledName("exiting")>] Exiting
+    | [<CompiledName("exited")>] Exited
+    | [<CompiledName("unmounted")>] Unmounted
+
+type TransitionProps =
+    | In of bool
+    | Appear of bool
+    | Enter of bool
+    | Exit of bool
+    | MountOnEnter of bool
+    | UnmountOnExit of bool
+    | Timeout of U2<int, Timeout>
+    | AddEndListener of (Browser.HTMLElement -> (unit -> unit) -> unit)
+    | OnEnter of (Browser.HTMLElement -> bool -> unit)
+    | OnEntering of (Browser.HTMLElement -> bool -> unit)
+    | OnEntered of (Browser.HTMLElement -> bool -> unit)
+    | OnExit of (Browser.HTMLElement -> unit)
+    | OnExiting of (Browser.HTMLElement -> unit)
+    | OnExited of (Browser.HTMLElement -> unit)
+    | Children of U2<React.ReactNode, TransitionStatus -> React.ReactNode>
+    interface IProp
+
+type CSSTransitionClassNames = {
+    appear: string option
+    appearActive: string option
+    enter: string option
+    enterActive: string option
+    enterDone: string option
+    exit: string option
+    exitActive: string option
+    exitDone: string option
+}
+
+type CSSTransitionProps =
+    | ClassNames of U2<string, CSSTransitionClassNames>
+    interface IProp
+
+type TransitionGroupProps =
+    | Component of React.ReactType
+    | ChildFactory of (React.ReactElement -> React.ReactElement)
+    interface IProp
+
+let private asNode (el: React.ReactElement): React.ReactNode =
+    !^(!^el: React.ReactChild)
+
+let transition (props: IProp list) (child: React.ReactElement): React.ReactElement =
+    let props = (Children !^(asNode child) :> IProp)::props
+    ofImport "Transition" "react-transition-group" (keyValueList CaseRules.LowerFirst props) []
+
+let transitionWithRender (props: IProp list) (render: TransitionStatus -> React.ReactNode): React.ReactElement =
+    let props = (Children !^render :> IProp)::props
+    ofImport "Transition" "react-transition-group" (keyValueList CaseRules.LowerFirst props) []
+
+let cssTransition (props: IProp list) (child: React.ReactElement): React.ReactElement =
+    let props = (Children !^(asNode child) :> IProp)::props
+    ofImport "CSSTransition" "react-transition-group" (keyValueList CaseRules.LowerFirst props) []
+
+let cssTransitionWithRender (props: IProp list) (render: TransitionStatus -> React.ReactNode): React.ReactElement =
+    let props = (Children !^render :> IProp)::props
+    ofImport "CSSTransition" "react-transition-group" (keyValueList CaseRules.LowerFirst props) []
+
+let transitionGroup (props: IProp list) (children: React.ReactElement list): React.ReactElement =
+    ofImport "TransitionGroup" "react-transition-group" (keyValueList CaseRules.LowerFirst props) children

src/Fable.React.TransitionGroup/Fable.React.TransitionGroup.fsproj

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <Version>0.0.1</Version>
+    <PackageVersion>0.0.1-alpha-001</PackageVersion>
+    <TargetFrameworks>netstandard2.0</TargetFrameworks>
+    <GenerateDocumentationFile>true</GenerateDocumentationFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Include="Fable.Helpers.React.TransitionGroup.fs" />
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="../Fable.React/Fable.React.fsproj" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="*.fsproj; *.fs" PackagePath="fable\" />
+  </ItemGroup>
+  <Import Project="..\..\.paket\Paket.Restore.targets" />
+</Project>

src/Fable.React.TransitionGroup/RELEASE_NOTES.md

@@ -0,0 +1,3 @@
+### 0.0.1-alpha-001
+
+- Release a first alpha version

src/Fable.React.TransitionGroup/paket.references

@@ -0,0 +1,3 @@
+FSharp.Core
+Fable.Core
+Fable.Import.Browser