re-natal/resources/om-next.cljs

56 lines
1.8 KiB
Clojure

;; Need to set js/React first so that Om can load
(set! js/React (js/require "react-native/Libraries/react-native/react-native.js"))
(ns $PROJECT_NAME_HYPHENATED$.core
(:require [om.next :as om :refer-macros [defui]])
(:require-macros [natal-shell.components :refer [view text image touchable-highlight]]
[natal-shell.alert-ios :refer [alert]]))
;; Reset js/React back as the form above loads in a different React
(set! js/React (js/require "react-native/Libraries/react-native/react-native.js"))
(defonce app-state (atom {:app/msg "Welcome to $PROJECT_NAME$"}))
(defui WidgetComponent
static om/IQuery
(query [this]
'[:app/msg])
Object
(render [this]
(let [{:keys [app/msg]} (om/props this)]
(view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
(text
{:style {:fontSize 50 :fontWeight "100" :marginBottom 20 :textAlign "center"}}
msg)
(image {:source {:uri "https://raw.githubusercontent.com/cljsinfo/logo.cljs/master/cljs.png"}
:style {:width 80 :height 80 :marginBottom 30}})
(touchable-highlight
{:style {:backgroundColor "#999" :padding 10 :borderRadius 5}
:onPress #(alert "HELLO!")}
(text {:style {:color "white" :textAlign "center" :fontWeight "bold"}} "press me"))))))
;; om.next parser
(defmulti read om/dispatch)
(defmethod read :default
[{:keys [state]} k _]
(let [st @state]
(if-let [[_ v] (find st k)]
{:value v}
{:value :not-found})))
(def reconciler
(om/reconciler
{:state app-state
:parser (om/parser {:read read})
:root-render #(.render js/React %1 %2)
:root-unmount #(.unmountComponentAtNode js/React %)}))
(om/add-root! reconciler WidgetComponent 1)
(defn ^:export init []
((fn render []
(.requestAnimationFrame js/window render))))