Skip to content

Instantly share code, notes, and snippets.

@stroborobo
Created April 30, 2020 15:22
Show Gist options
  • Save stroborobo/a46958c47a101033d52845d65e7eda01 to your computer and use it in GitHub Desktop.
Save stroborobo/a46958c47a101033d52845d65e7eda01 to your computer and use it in GitHub Desktop.
Incomplete wrapper for react-simple-animate
// https://react-simple-animate.now.sh
module Fable.ReactSimpleAnimate
open System
open Fable.Core
open Fable.Core.JsInterop
open Fable.React
open Fable.React.Props
module Animate =
type Prop =
| Play of bool
| End of CSSProp seq
| Start of CSSProp seq
| Complete of CSSProp seq
| Duration of TimeSpan
| Delay of TimeSpan
| OnComplete of (unit -> unit)
| EaseType of string // todo: type
// | Render of (unit -> ReactElement) // param is style obj
| SequenceIndex of int
| SequenceId of string
| Overlay of TimeSpan
type private InternalProp =
| Play of bool
| End of obj
| Start of obj
| Complete of obj
| Duration of float
| Delay of float
| OnComplete of (unit -> unit)
| EaseType of string // todo: type
// | Render of (unit -> ReactElement)
| SequenceIndex of int
| SequenceId of string
| Overlay of TimeSpan
let private toInternalProp =
function
| Prop.Play v -> Play v
| Prop.End cssList -> keyValueList CaseRules.LowerFirst cssList |> End
| Prop.Start cssList -> keyValueList CaseRules.LowerFirst cssList |> Start
| Prop.Complete cssList -> keyValueList CaseRules.LowerFirst cssList |> Complete
| Prop.Duration v -> Duration v.TotalSeconds
| Prop.Delay v -> Delay v.TotalSeconds
| Prop.OnComplete v -> OnComplete v
| Prop.EaseType v -> EaseType v
// | Prop.Render v -> Render v
| Prop.SequenceIndex v -> SequenceIndex v
| Prop.SequenceId v -> SequenceId v
| Prop.Overlay v -> Overlay v
let animate props children =
let internalProps =
props
|> Seq.map toInternalProp
|> keyValueList CaseRules.LowerFirst
ofImport "Animate" "react-simple-animate" internalProps children
module AnimateGroup =
type Prop =
| Play of bool
let animateGroup (props: Prop seq) children =
let internalProps =
props
|> keyValueList CaseRules.LowerFirst
ofImport "AnimateGroup" "react-simple-animate" internalProps children
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment