clojurescript 2022-07-14

M J09:07:35

Hi guys, I am sending a boolean value to a component, that when true, it would change colors for example, now this boolean changs values only when I click on another button in another component. Is there a way to make the first component rerender so it knows the boolean value is now true? (like useEffect in React)

p-himik09:07:16

It should already know about the change. If it doesn't, perhaps you're using a form-2 or a form-3 component without getting that boolean argument from the render function's args.

reefersleep11:07:43

What himik said. Try making a minimal example of your code, and we’ll see if we can tell where it’s gone wrong.

M J11:07:31

Hi Im using MUI and trying to add icon to the menu list item, just like this:

<MenuItem>
          <ListItemIcon>
            <ContentCut fontSize="small" />
          </ListItemIcon>
          <ListItemText>Cut</ListItemText>
</MenuItem>

this is how my menu item loos in Clojurescript, how do I add the icon here: [menu-item {:onClick copyLink} "Copy Link"]

reefersleep11:07:28

I’ve no idea what those elements are, they’re not vanilla html. But generally, hiccup is just nested vectors.

[:div.my-menu-item
  [:div.my-list-item-icon {:font-size "small"}]
  [:div.list-item-text "Cut"]]

seems like the general direction that you want. (The above is free-hand, so not exactly what you want)

reefersleep11:07:14

Don’t expect the above to do anything, I’m just trying to demonstrate hiccup structure.

reefersleep11:07:33

As soon as you’ve made something a component - that is, a function that returns hiccup - you control the arguments. You don’t have to name the arguments in any specific way, or have them be of specific types. You’re in control.

reefersleep11:07:42

So your menu-item can take whatever args you want.

reefersleep11:07:28

If you want it to take other hiccup as an argument, you can.

reefersleep11:07:37

So you can add the icon hiccup as an argument, or write it directly in the function (which is probably what you want in most cases)

M J12:07:43

Okay thanks alot

M J12:07:55

thats what did [menu-item {:onClick copyLink} [list-item-icon [more-vert]] "Copy Link"]

reefersleep12:07:08

Great 🙂 Hope it works out for you!

NickName13:07:19

Has anybody tried using clj-kondo with lint-staged? I have the following npm script: "lint:clj": "shadow-cljs run clj-kondo.main/main --lint" When I do npm run lint:clj -- src, it works fine meaning it shows appropriate warnings/errors. However, when I’m trying to use it with lint-staged as "*.{clj,cljs}": "npm run lint:clj --", it doesn't work as expected meaning it does not exit on warnings/errors. Any ideas how can I make it work?

borkdude13:07:09

@islambeg There is a documented pre-commit hook here: https://github.com/clj-kondo/clj-kondo/blob/master/doc/ci-integration.md#pre-commit-hook

NickName13:07:05

Oh, thanks! overlooked it in the repo. Still, it’d be nice if there is a way to integrate clj-kondo into lint-staged as I use it anyway for html/css/js related things.

👍 1

Stuart13:07:59

Hi, I have a div that I want to capture left and right clicks on I have this:

[:div.board-cell 
    {:on-click #(rf/dispatch-sync [:cell-click [x y]])
     :onContextMenu (fn [e] (rf/dispatch-sync [:toggle-flag [x y]])
                            false)}
,,,]

It works, and I can left click and I get the :cell-click firing ok, and I am capturing the right click and toggling the cell. But the context menu still appears. I thought the handling function returning false would stop this, but nope. How can I make it not show the context menu. I think maybe I have to set a property on e but not sure what or how.

p-himik13:07:05

The return value of React event handlers has been ignored for quite some time now. Call .preventDefault on e, perhaps with .stopPropagation. Also, you can replace :onContextMenu with :on-context-menu, to keep the style consistent.

👍 1

Stuart13:07:38

Thanks, I'll give that a go!

Stuart13:07:00

That works, brilliant 🙂

👍 1

2022-07-14

Channels