Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-12-26

Channels

#reagent
<
2020-12-26
>
David Pham12:12:06

Moreover, I believe that could lead cross plateform UI template [since they are pure data].

GGfpc18:12:52

Hello, I'm trying to convert this to cljs 

const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
 	const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x  = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy  + radius * Math.sin(-midAngle * RADIAN);
 
  return (
    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} 	dominantBaseline="central">
    	{`${(percent * 100).toFixed(0)}%`}
    </text>
  );
};
And I got this far but I'm struggling to convert the part between braces in the content of text 
(defn render-custom-label
  [{cx          :cx
    cy          :cy
    midAngle    :midAngle
    innerRadius :innerRadius
    outerRadius :outerRadius
    percent     :percent
    index       :index}]
  (let [radian (/ Math/PI 180)
        radius (* 0.5 (+ innerRadius (- outerRadius innerRadius)))
        x (+ cx (* radius (Math/cos (* (- midAngle) radian))))
        y (+ cy (* radius (Math/sin (* (- midAngle) radian))))]
    [:text {:x                x
            :y                y
            :fill             "white"
            :textAnchor       (if (> x cx) "start" "end")
            :dominantBaseline "central"}]))

p-himik18:12:57

In JS, it's called "template literal". It's just string substitution, which in CLJS can be done as: 

(str (.toFixed (* percent 100) 0) "%")

GGfpc19:12:02

Thanks! Also does reagent have any way of destructuring js objects?

p-himik19:12:08

Destructuring is a pretty low level thing compared to the level at which Reagent operates, so no. The correct level would be ClojureScript itself. But alas it doesn't have anything built-in for that as well. However, there are multiple libraries (including Google Closure library that's built into ClojureScript) that allow you to get a JS object's fields or wrap it into something that does support destructuring (like https://github.com/mfikes/cljs-bean for example)

šŸ‘ 3