core.cljs

(ns test-motion.core
    (:require [reagent.core :as reagent :refer [atom]]
              [cljsjs.react-motion]))

;; -------------------------
;; Motions

(def Motion (reagent/adapt-react-class js/ReactMotion.Motion))
(def StaggeredMotion (reagent/adapt-react-class js/ReactMotion.StaggeredMotion))
(def TransitionMotion (reagent/adapt-react-class js/ReactMotion.TransitionMotion))

(defn spring
  ([v] (js/ReactMotion.spring v))
  ([v opt]
   (js/ReactMotion.spring v (clj->js opt))))

(def presets js/ReactMotion.presets)

(defn test-component []
  (println "child render")
  [:div "child"])

(defn Panel-child [styles]
  (let [x (.. styles -style -x)]
    [:div#panel
     {:key "panel-child"
      :style {:transform (str "translate(" (- 100 x) "px, 0)")
              :opacity (/ x 100)}}
     [test-component]]))

(defn animated-panel [should-render]
  (println "should render" should-render)
  [TransitionMotion
   {:styles
    (if component
      [{:key "panel"
        :style {:x (spring 100
                           {:stiffness 320
                            :damping 30})}}]
      [])
    :will-enter
    (fn []
      #js{:x 0})
    :will-leave
    (fn []
      #js{:x (spring 0
                     {:stiffness 220
                      :damping 20})})}
   (fn [styles]
     (when-let [s (first styles)]
       (reagent/create-element
        (reagent/reactify-component
         (fn [_]
           [:div#panel-wrapper
            (Panel-child s)])))))])

;; -------------------------
;; Initialize app

(def open (atom false))

(defn current-page []
  [:div
   [:h1 [:a {:href "#" :on-click #(swap! open not)} (if @open "close" "open")]]
   [animated-panel @open]])

(defn mount-root []
  (reagent/render [current-page] (.getElementById js/document "app")))

(defn init! []
  (mount-root))