Fork me on GitHub
#re-frame
<
2017-01-10
>
mikethompson00:01:04

@qqq yeah, it is quite amazing how straight forward widgets can be to create these days. I'm an older programmer and I can remember when a tree widget (non HTML) could only be written by a select few. They were normally provided via BIG companies via "toolkits" like QT or MFC.

qqq00:01:27

@mikethompson: what's even crazier is how short (and I'm sure it can be made shorter) an impl is:

(gm/c-defn make-elem-vlist [s-atm ind path lst]
  (pprint {:ind ind :path path :lst lst})
  [re-com.core/v-box
   :children (into []
                   (for [item lst]
                     [make-elem s-atm ind path item]))])

(gm/c-defn make-elem [s-atm ind path [item lst]]
  (pprint {:ind ind :path path :item item :lst lst})
  (let [nm (:name item)
        k (:key item)
        pad (apply str (repeat ind " "))]
    (if (empty? lst)
      [re-com.core/label
       :class "mainSidebarItem"
       :label (str pad "* " nm)
       :style {:font-family "Monospace"
               :white-space "pre"}
       :on-click (fn [& rst] (reset! s-atm (conj path k)))]
      (let [expanded? (reagent.core/atom false)]
        (fn []
          (let [header [re-com.core/label
                        :label (if @expanded?
                                 (str pad "- " nm)
                                 (str pad "+ " nm))
                        :style {:font-family "Monospace"
                                :white-space "pre"}
                        :class "mainSidebarItem"
                        :on-click (fn [& rst] (swap! expanded? not))]]
            (if-not @expanded?
              header
              [re-com.core/v-box
               :children [header
                          [make-elem-vlist s-atm (+ ind 1) (conj path k) lst]]])))))))

qqq00:01:47

that's literally my entire tree widget

joshjones04:01:37

having just successfully done my first basic re-frame demo, I'm curious as to a business need we have -- drag and drop. Is it possible? If so, any proofs of concept out there?

qqq04:01:55

@joshjones: when you figure this out, can you DM me the solution too?

minikomi05:01:56

drag and drop within the dom, or for dropping files into the browser?

minikomi06:01:00

Ah.. I’ve tried to roll my own a number of times but not been satisfied with what I ended up with… getting drag and drop working across browsers is a pain point for sure.

gregg06:01:31

@qqq: To answer your re-com question above re centering multiple components around a horizontal line (https://clojurians.slack.com/archives/re-frame/p1483963291003574), refer to the following code:

gregg06:01:38

[h-box
 :gap      "20px"
 ;; :align    :center
 :children [[box
             :width  "100px"
             :height "60px"
             :style  {:background-color "yellow"}
             :child  ""]
            [md-circle-icon-button
             :md-icon-name "zmdi-star"
             :on-click     #()]
            [checkbox
             :label     "THREE"
             :model     true
             :on-change #()]]]

gregg06:01:43

Rendering the code above will align the components at the top of the h-box. Now, uncomment the :align :center line and you'll see what you were after.

gregg06:01:46

You can also align them to the bottom of the h-box with :end. :start is the default.

gregg06:01:50

Note: This is also available for the v-box and does the same thing, but vertically.

lsnape08:01:05

@mikethompson re-frame-storage working fine so far :thumbsup:

ska10:01:56

@sandbags I am working on a buddy-authenticated re-frame SPA, too. Not using JWT, just plain old session cookie. Unfortunately not open source. I could share some mechanics privately, though.

danielcompton10:01:44

@ska you may want a more generic :location effect

ska10:01:41

@danielcompton So you suggest returning {::location "/logout"}} instead of {{::logout-fx true}}?

ska10:01:27

And while I am at it, is this the supposed way of doing AJAX calls? https://github.com/Day8/re-frame-http-fx I've been hand-rolling my own but would replace them with this library if that is more idiomatic.

danielcompton10:01:03

It's just one way you can do it, not canonical

sandbags14:01:01

@ska thanks, it would be interesting to hear a little more about the flow of your app thanks

limist15:01:49

In the context of using boot, as well as adzerk/boot-reload, how should re-frame 0.9's new function clear-subscription-cache! be used please?

martinklepsch15:01:57

@limist I don’t think you’d call it during reloads or similar if that’s what you’re asking

limist16:01:48

@martinklepsch Ah, that's what/how I thought it would be used; so is it simply not needed w/ boot, or...?

martinklepsch16:01:03

@limist I think I might be wrong. You should call them in reloads. Consult the boot-reload docs for how to do that

joshjones17:01:33

In the re-frame simple example line 67 (https://github.com/Day8/re-frame/blob/develop/examples/simple/src/simple/core.cljs#L67), this code is given:

(defn color-input
  []
  [:div.color-input
   "Time color: "
   [:input {:type "text"
            :value @(rf/subscribe [:time-color])
            :on-change #(rf/dispatch [:time-color-change (-> % .-target .-value)])}]])
This component returns basic hiccup and not a rendering function, thus, it will be called many times during its life cycle. Doesn’t this mean that (rf/subscribe …) will be called many times also? And if so, isn’t this problematic?

mikethompson17:01:41

@joshjones subscriptions are cached. The subscribe call this time will just pick up the subscription created last time.

joshjones17:01:07

great, good to know @mikethompson — pardon my newbish question, but then is the primary benefit of form 2 over form 1 that setup code which is unnecessary to run each time, is only run once in form 2, prior to returning the renderer?

mikethompson17:01:25

Yes, that's right. Also Form-2 alloews the renderer to close over local state

mikethompson17:01:43

typically stored in a ratom

joshjones18:01:41

excellent, thanks for being available to answer that mike

sandbags22:01:50

"A sanity hint for incoming uncaught error: return (target_fn.cljs$core$IFn$invoke$arity$1 ? targetfn.cljs$core$IFn$invoke$arity$1(a) : targetfn. <<< :radioactive_sign: NULL :radioactive_sign: <<< call(null,a));" gosh, where would I be without that hint....