Been hacking at this for days, hopefully there are some Vuetify wizards around.
Here's the situation: I have rendered a set of v-expansion-panels and if one of them is expanded, it also shows an arrow button (display: none is toggled by clicking on v-expansion-header). Upon that button click, my aim is to show a dialog.
Problem: Once dialog is prompted with the button click, the button display toggle is reversed. It disappears as soon as you click on the button to prompt a dialog, and appears again once the v-expansion-panel is collapsed.
How it should be: The arrow button should always be visible as long as the v-expansion-panel is expanded, regardless of whether it is clicked to see the dialog or not.
Here's a codepen replicating and illustrating the problem.
Any thoughts would be much appreciated!
It has to do with using style directly on the element.
Use v-show instead of toggling the styles by hand:
<v-btn v-on="on" class="ml-1" width="36px" v-show="expanded[i]">
Update your data to hold an array for the pannels
data () {
return {
dialog: false,
expanded: [false, false, false]
}
}
And update your toggleMoveUp method to update expanded instead of using HTML ids.
toggleMoveup(i) {
this.$set(this.expanded, i, !this.expanded[i])
this.show=true;
}
Notes:
You need to use Vue.set when updating an array
You should not rely on HTML ids, if you use your components in more than one place at a time you'll run into multiple ids.
Why didn't your approach work? I'm guessing that vuetify is updating an element's style property, but doesn't take care of retaining already existing values so your display:none gets erased.
Posting a solution a colleague helped with. This also works with any array size (which is more of a real life scenario in dynamic webapps). It implements a created() lifecycle hook that adds an expanded: false property to each element in the array, which we can use to keep track of the expand state and toggle the button visibility. Here's the codepen.
However, in general, it is recommended in this scenario to actually make an independent component <v-expansion-panels /> and in the parent component actually loop the components. That would solve the state problems on its own already, since each component maintains their own state in their scope.
Related
I'm using the compound model and the cytoscape-compound-drag-and-drop extension to let the user manually reorganize the layout by grouping some nodes together and moving whole groups easily.
Now I want a button to toggle the display of these groups "boxes", but keep displaying all non-parent nodes.
I first tried hide() on parent nodes, but it also hides the children, so I switched to dynamically applying a class which specifies display:hidden.
It seemed to do the trick, but still the hidden box can be clicked and cytoscape default "visual feedback" for click applies, showing off the area where the hidden box still lies.
I tried plenty of things that didn't work:
- disable events from my hidden style class: tried events:no. Should I report this as a bug ?
- .ungrabify().unselectify().panify().lock()
- on click: destroy the event object
- set e.target._private.active = false
I tried a nasty hack: setting e.target._private.position = {}
The event is still fired, but destroying the position sucessfully prevents the "visual feedback" from happenning, my box effectively stays "hidden".
But still the event occurs on the wrong target: the box, not on the empty space of the cytoscape container. I can keep hacking and leave with it, but isn't there a simpler solution to ?
Is it possible to simply and truly pass through hidden parent nodes events ?
You haven't used events properly.
cy.$('node').forEach(node => {
node.events = 'no'; // will not work
});
The following does work, and you can also restore events whenever you want.
cy.$('node').forEach(node => {
node.style('events', 'no');
});
I am new with react-spring. I am having trouble animating a component whenever it unmounts. I have a simple card with an onClick handler that's responsible for conditionally displaying my Overlay component. The animation works fine when mounting (from & enter works), but when closing the overlay, the component just disappears without animation (leave does not work). I suspect it's because of the conditional rendering of the component but I've been struggling for hours trying to find a solution for this one. Any help would be appreciated!
My current code: https://codesandbox.io/s/dry-leftpad-h3vmv
What I'm trying to achieve: https://codesandbox.io/s/048079xzw
P.S. The latter is using mauerwerk's lib. I don't want to use that.
What you were missing is this:
return expand.map(({ item, props, key }) => (
item && <animated.div
// ...etc
When you're controlling the mounting of a single component with useTransition, you need to conditionally render it based on the item being passed. In your case, when it's false it won't render (which will unmount if already mounted) and when it's true it will render (mount if unmounted).
Here's a working sandbox forked from yours: https://codesandbox.io/s/infallible-agnesi-cty5g.
A little more info
The first argument to useTransition is the list you want to transition. That watches for changes and sends back an array mapped with each item, a key and a style object (props) based on whether the item is truthy (entering) or falsy (leaving). So for a transition that mounts/unmounts a single element, conditionally rendering based on the truthiness of the item is key.
Check out the examples again here and you'll see the differences between transitioning a list, a toggle between two elements, and a single item.
For a list, no need to check for the existence of the item because the array changes.
For toggling between two elements, you use the truthiness of item to determine which element to render.
For a single element, item determines whether to render at all. This means it won't mount initially when you default to false, and will make sure you don't render 2 items whenever your isActive value changes.
I have a directive that controls what buttons someone can see based on their user role:
import { store } from '../store/';
import * as types from '../store/types';
const hide = vnode => {
if (vnode.elm.parentElement) {
vnode.elm.parentElement.removeChild(vnode.elm);
}
};
export const userRole = {
update(el, binding, vnode) {
const userId = store.getters[types.GET_USER_ID];
const { value, modifiers } = binding;
if (value.role) {
if (Reflect.has(modifiers, 'manager')) {
if (value.role[0] !== userId) hide(vnode);
}
};
Then I'll have a button like this:
<vue-button
v-userRole.manager="{role: job.role}"
#click.prevent.stop="e => payoutJob(job.id)"
>
Button Text
</vue-button>
All the buttons will show on the page before the user directive loads. So tons of buttons flash on the page. And then 2 seconds later only two buttons show, as that is what they have permission to see. How do I prevent this?
I would want at the very least, no buttons to appear on the page until the logged in user is matched against the user role directive file.
User information is stored in location storage, in vuex and every page that loads checks for a signed in user.
The way you have created this I think means that this will always happen - your directive is removing the HTML only after it has been created. For the element not to have been created in the first place you need instead to use a v-if or similar. I can see two ways to fix this, one a work-around as a minimal change to what you have, the other I would consider a better solution (but it is of course up to you).
To work around your problem have all of your buttons with a style of display:none and then in your directive either delete the elemet or clear the style (or change the class - however you choose to implement it). That way at least the button won't appear.
However, a better fix, I think, is to create your own component with a userRole property. That component will then do the check you have above (for example through a computed property) and then show or hide the component as required.
EDIT
I ran a quick fiddle to test the principals behind what you were doing - just changing the hook from update to inserted may fix it. Obviously your code will be more complex so your milage may vary ;).
I would focus on Vue instance - https://v2.vuejs.org/v2/guide/instance.html - I think you might use beforeCreate.
Also another idea as Euan Smith wrote, use v-if and put in your data true/false information of loading rights (set it false, and when the role is known set it to true).
I have a list of items (ResultItem), which have a component inside (ResultTag) which when clicked, shows a tooltip above it (a HTML class is added to it and removed when clicked again, to hide it).
However, when I click on ResultTag, and then click on ResultTag in one of the ResultItem's below it, both show; how would I go about hiding all of the ResultTag's apart from the one I just clicked on, so that only one can show at a time.
Currently, in the ResultItem, I have an onClick function which sets the state showTooltip in the ResultTag to false/hidden (using props) whenever the user clicks anywhere within ResultItem and the ResultTag is visible. However, I need this to work across every ResultItem, which means working cross-component.
Here is some simplified code:
/* ResultTag */
showTooltip() {
this.setState({ showTooltip: true })
}
render() {
return (
<div onClick={this.showTooltip}>
{this.renderTooltip()} { /* function which contains the JSX/HTML to show the toolip */ }
<span className="tag--label">Tags</span>
</div>
)
}
Hiding is done in the ResultItem, by setting the state and then receiving that as props in the ResultTag.
To summarise:
I have many ResultItem components in a list view
Each ResultItem has a ResultTag in, which when clicked, shows a tooltip above the tag/label
When a ResultTag is visible, and another one in a different ResultItem is clicked, hide all the other ResultTags
You could move the state from within each individual ResultItem into the parent, that way it is centralized in one place and you could enforce logic such that only a certain ResultItem will show its tooltip. You would need to manage the state from within the parent and then pass down a function to each ResultItem (and probably down again into its ResultTag) to handle the click.
I wrote a sample app which shows similar behaviour (although slightly different), I wrote it to demonstrate how to add a border to each item in a list. You can see how I stored the state in the parent and how I passed down the means to read and update it to the children via props. You would of course have to change the logic to enforce only a single item being active, currently it supports any item in the list being 'active'. I wrote it for an answer located here: https://stackoverflow.com/a/38646533/1515758
I was creating a Dropdown component for React. Inside the dropdown, I have a form of radio group buttons.
<DropdownButton />
<DropdownForm />
In the DropdownButton, I have an state to know if it is open or not. Depends on that, DropdownForm it's hidden or not (using display: none).
The use case is: User selects a radio button, click apply and something happen. However, if user selects some radio button, and mouse out the dropdown (without clicking the apply button), the one that is selected should be the one that I get from the store.
Something like:
render: function () {
...
if(store.getSomeParam() != this.state.someParam && !this.props.isOpen){
someParam = store.getSomeParam()
}
Then the radio buttons are like:
<input checked={someParam == "something"} ... />
It doesn't really work. It re-renders but it doesn't change the button that is checked. I also tried with refs:
this.refs.myInput.getDOMNode().checked = true
But still nothing. Is this a correct behaviour?
The only solution I found so far is not using a css hiding class (display: none). So what I do is that the DropdownButton renders the DropdownForm depending on if it's open or not (so if you close it, you are forcing DropdownForm to unmount). Then when opening again, it is taking the values from the store (getInitialState) and it shows the correct radio button selected. But, I am not sure if this is the best solution and if there is any drawback in unmounting the component instead of just css hiding it.
This probably has nothing to do with React at all.
Most browsers don't validate the value of the checked attribute, but merely if it is there or not: http://jsfiddle.net/7jzm7gvw/
Just set the checked attribute to either true or null:
<input checked={someParam == "something" ? true: null} ... />
TL;DR: You must use the componentDidMount lifecycle method, not render, to work with the rendered dom nodes directly.
I was struggling with this as well, and after doing some online research I figured I might as well look into it for myself. Here's what I came up with:
Use the componentDidMount lifecycle method and update whatever you need to in there. Here's a Pen I used to prototype this, and I think it looks okay: http://codepen.io/gholts/pen/GpWzdb
You could drop this in pretty easily to what your'e working on by just putting a componentDidMount method on your object and doing it there. I used document.getElementById but you could definitely use jQuery or whatever else you wanted in there, as once the component has mounted it's available to DOM selectors.
I'm using this now to update 20 radio button groups (so it has to check a prop for three different states and update accordingly) and it loads instantly.
Hope it helps! I used the ES6 class syntax in my Pen, you should check it out if you have some time to refactor :) It's fun.
EDIT: So I figured it out, I'm a dummy. You don't need to do the whole document.getElementById business that I was doing. Just use your this.refs.whichever.getDOMNode().checked = true and it'll work, so long as you do it in componentDidMount. It works there because there is an actual DOM element on the page at that point.