Star Rating Control with Clojurescript, Reagent, Facebook React JS
There are at least two Star Rating components for Facebook React that can be used with the brilliant Reagent.
I found these to be too complex and neigh impossible to integrate with Reagent so I came up with a simple solution like so:
(ns my-star-rating-control
(:require [reagent.core :as reagent :refer [atom]])
)
(defonce star-rating-info
(atom {
:rating-temp 0
:rating 0
:clicked false
}))
(defn get-attr [x]
(-> x .-target (.getAttribute "data-index") js/parseInt)
)
(defn si-update [elem-kw upd]
(swap! star-rating-info update-in [elem-kw] upd))
(defn set-active [index item-kw]
(if (<= index (get-in @star-rating-info [item-kw]))
" star_active"
" star_inactive"))
(defn star-item [index]
[:span {:class (str "rating_star" (if (get-in @star-rating-info [:clicked])
(set-active index :rating)
(set-active index :rating-temp)
))
:data-index index
:on-mouse-enter #(do
(si-update :rating-temp (fn [] (get-attr %)))
(si-update :clicked (fn [] false))
)
:on-mouse-leave #(si-update :rating-temp (fn [] 0))
;:on-mouse-leave #(js/alert (-> % .-target (.getAttribute "data-index")))
:on-click #(do
(si-update :rating (fn [] (get-attr %)))
(si-update :clicked (fn [] true)))
} "\u2605"]
)
(defn five-stars []
[:div.star_container
(for [x (range 1 6)]
[star-item x])
])
It should be called like any other reagent component:
[five-stars]
Here's some styling:
.rating_star
{
font-size: 32px;
cursor: pointer;
}
.star_active
{
color: #F6B11C;
}
.star_inactive
{
color: #D3D3D3;
}
The magic of Facebook React, Reagent and Clojure/Clojurescript is really coming together nicely here. Surely there are a few problems, e.g. that the user has to click the star pretty much exactly. But he gets proper feedback and it could be fixed with css.
Hope it helps.
Posted: 30 October 2015
comments powered by Disqus