Fork me on GitHub
#re-frame
<
2020-08-07
>
kanwei04:08:37

does anyone know how to convert this JSX into clojurescript?

<VictoryBar
  data={sampleData}
  labelComponent={
    <VictoryTooltip
      center={{ x: 225, y: 30 }}
    />
  }
/>

[:> VictoryBar {:data sampleData
                :labelComponent [:> VictoryTooltip]}]
Doesn't work

mikethompson04:08:07

@kanwei You haven't give much information about what you have done (eg where does VictoryBar come from in the hiccup you show) and what is it that doesn't work exactly. But ... my guess is that this information will help: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md

kanwei04:08:08

@mikethompson thanks, I've read that page

kanwei04:08:27

the issue is passing a component as an attribute to another component

kanwei04:08:24

the VictoryTooltip doesn't work, also tried

:labelComponent (reagent.core/as-element [:> VictoryTooltip])

kanwei04:08:34

never mind, the latter worked

Franklin09:08:14

Does anyone know any good table libraries to use with re-frame?

Lu09:08:28

What features are you looking for from the table ?

Franklin09:08:23

@lucio I'd like to easily customize the styling, search, ordering by specific columns... I'm not certain what features I might need but things like these

Franklin09:08:04

I already am thinking of using react-table. But I wonder if there's something written in re-frame out there.

Lu09:08:15

There’s this https://github.com/armincerf/reagent-datatable .. it’s not all round finished but you can customize everything very quickly

Lu09:08:48

You can just paste the code in your project and play with it as it’s really just a couple of namespaces

hkjels10:08:20

I wrote this a while back, but it’s not well documented. You might draw some inspiration from it though https://github.com/bdo-labs/ui/tree/master/src/cljc/ui/element/numbers

👍 3
Grant Isom20:08:26

Anyone have some solid ways to mock service calls? I want to use some flag to switch handlers to return some mocked data instead of actually hitting an endpoint.

Lu20:08:54

@grant.isom I am not sure what you mean by solid.. but a simple if in your http events can do the job. Let me explain. With figwheel, you can use the option :closure-defines and add something like this:

{:closure-defines {your.ns/dev-mode true}
 ...}
Of course, you want to set true or false according to the type of environment. In my instance, I do it with aero, but you can do this in many different ways:
{:closure-defines {your.ns/dev-mode #profile {:dev true :prod false}}
 ...}
Then, in your code you can do:
(if your.ns/dev-mode
 "code for dev mode"
 "code for prod mode")