Clojurians Log v2
om
Is there a way to get the props of a component that gets passed into another component as a child?
Computed props
See the docs
@urbank you can probably traverse (om/children this) and try to get om/props for the child you want?
I’m unsure that will work
Yeah, I had tried that, but they aren't components apparently (?), because I got
Assert failed: (component? component)
right
but they should have .-props, right?
so you can probably hack around it
anyway, what you’re trying to do sounds like an anti-pattern
I’d love to know why you would need such a thing
@anmonteiro Yeah, I probably am doing it wrong. 🙂 I'm trying to figure out higher-order components with om/next. So I'm trying to get the props of the child, because the higher order component is just supposed to provide some lifecycle augmentations. I'd like to get the react key of the child component as well as its style
Specifically I'm trying to make a Draggable component
but the components that I want to make draggable are dynamic
but they have their own :keyfn defined in their om/factory
Does om/computed replace what used to be passed into the function that created a react component via reify?
@urbank looking at the code, it assoc :computed to props
Hm... I see. I suppose a meta component is different than a higher order component. So Draggable is more of a meta component, and should therefore probably get the component factory of the component it's supposed to augment. A factory and props to pass to the factory. I guess that should go in computed
@urbank Generally, a component shouldn't assign special meaning to the props of components that are passed into it, but the pattern you may be looking for is to have an additional component you use to wrap each of the children you're passing in.
That component could accept props that affect the behavior in ways that make sense to the outer component.
What's the correct way to use recursion with a union query? Should [{:A [{:A {:* 1, :A 1}}]}] be a valid query? The parser appears to choke on it.
(Wacky query courtesy of test.check.)
@peeja Right... that's kinda what I'm thinking. However, I imagine there are situations where a meta-component can't be generic if it doesn't have intimate access to the internals of the component it's augmenting
That doesn't sound right to me. I'd posit (abstractly) that if the "meta-component" needs to know the internals of the other component, it can't be generic.
For a Draggable component, for instance, the inner component should only know that it's drawing into a rectangle provided by its parent. The parent (the Draggable component) can then move that rectangle as the user drags it.
It shouldn't have to know how the child works internally to do that.
@peeja The problem I ran into is that if the Draggable component wraps the child in a div and gives the div an :onMouseDown handler to start dragging, the child component doesn't receive any events. So if the child has an input element, clicking it immediately starts dragging the component.
hm... though I suppose that isn't really solved by accessing the childs internals...
Yeah, that sounds like you haven't quite decided what you want the browser to do
I suppose the meta component would have to target a specific element of the child component which would be treated as a "handle" by which it could be dragged. But I suppose that's not really something a higher order component can do, since it would require modifying the child's render function.
This is interesting
I think it searches the dom node of the meta component for an element with the correct class, and only drags if that element is pressed
@urbank Yeah, that seems pretty fishy to me. Two possibilities that come to mind that feel more "correct": a) Accept any mouse event it sees as initiating a drag, and leave it up to the inner component to .stopPropagation any event it wants the Draggable component to ignore, or b) invert the control by having the owner of the inner component and the Draggable (that is, the thing that renders the two of them, one inside the other) give the inner component an event handler for the drag handle and have that handler tell the Draggable to drag.