Fork me on GitHub
#hoplon
<
2018-01-08
>
thedavidmeister04:01:30

@flyboarder is this like a "lifecycle" thing for components, or a way to categorise data associated with the component?

flyboarder04:01:31

@thedavidmeister a state machine for elements i guess

thedavidmeister04:01:27

ok so you're moving through each of these states in response to something

thedavidmeister05:01:11

looks to me like the lifecycle of async data (e.g. from user input or remote server) rather than a DOM component

thedavidmeister05:01:31

e.g. i'm working on a simple "read more" popdown icon atm and it looks like this:

thedavidmeister05:01:40

(h/defelem vertical
 [{:keys [expand? current-el? enabled?]}]
 (let [expand? (or expand? (j/cell false))
       current-el? (or current-el? (j/cell false))
       enabled? (or enabled? (j/cell true))]
  ; el gaining current status should also expand but losing current should not
  ; hide automatically
  (h/do-watch current-el?
   (fn [_ n]
    (when (and n @enabled?)
     (reset! expand? true))))

  (h/div
   :garden {:cursor :pointer}

   (h/if-tpl enabled?
    (h/div
     ; current-el? uses click so we do here as well to avoid async issues
     :click (fn [e]
             (swap! expand? not)
             (wheel.dom.events/stop-propagation e))
     (icons.hoplon/icon "#more"))

    (h/div :class "icon-space")))))

thedavidmeister05:01:39

the states are focussed on managing whether the current element is in focus, whether the icon should display, whether the content is currently expanded, etc.