I am currently building a small web page using react-redux. In my page I am rendering two containers. One container has a button that on clicking causes a change in the state and as a result the content in the other container also changes e.g initially there is a div container with text hello my name is rishi bhatia. As soon as I click on the button the a separate div container with 4 links replaces the previously displayed div container. What are the possible ways in which I can add animations when the content in the container changes. All I am doing is displaying different div containers on state change.
You can implement componentWillReceiveProps(nextProps). Here you can define your animation when component receive props playing with state.
Even if your component is just presentational id doesn't mean it cannot use state for graphical purposes.
Related
In Jetpack Compose if I use a Structure that has tabs at the the top of the screen and I want to change the view in the body but maintain the state of each body's content, is this done by simply having multiple bodies and hiding/showing each one as you click on the tabs by setting each with View.visibility = VISIBLE or GONE? Or is this done differently using Compose?
By maintaining state, this would include the scroll position of the content on each body.
Just stuff everything into your viewmodel. That's my way
I wanted to create a layout where when the divs reach the bottom they will continue from the top. See my (super fancy) image I drew:
I got it working by using column-fill: auto. And now I'd like to add a dimmer on each item when being clicked. I'm using React and Semantic UI React for my app so I'm trying to achieve this with their Dimmer component.
My problem is that when I active the dimmer, it's not "dimmering" the whole item. I made a small CodeSandbox for my problem so we can debug this more easily. When you press the third item you can see that the part who is coming from the top is not dimmed. I assume it because the position of the dimmer is relative.
LINK: https://codesandbox.io/s/semantic-ui-react-yl0dj
I hope I described my issue well enough and that we can solve this together.
Cheers!
I'm using the component in semantic to create a top menu + breadcrumb header. For some reason, the scroll bar "jumps" when trying to scroll from the topmost position
Sandbox https://codesandbox.io/s/y7k3zn5qn1
I haven't provided the context prop to the sticky component. In the examples they have always provided the React DOM reference of the enclosing div as the context prop to the Sticky component. The documentation is not clear as to the purpose of the context prop. (It says "Context which sticky element should stick to")
Do I need to provide a context prop to the sticky component to stop the "jump" scrolling? If so, how do I decide which enclosing div ref to provide as the context prop?
While scrolling, position:fixed; is added to the parent of <div class="ui inverted menu">. This moves out the element from the dom structure thus removing the space which it occupied. Therefore, the sibling jumps up occupying the free space.
You may manually add margin-top to the sibling while the position is set as fixed, as a workaround.
I used a Rails component to wrap the Sticky component and applied padding/margin offset to the sibling.
The rail makes the sticky act like overlay and not part of the parent div. Just need to add custom css to the rail to override the default behaviour.
Context ref allows the sticky to be stuck through out the context of that element.
Made some changes to the code sandbox Sticky Menu Example
I kind of solved it for myself. Tried adding rail as in above solution but didn't work.
I realized the problem for me was the pre-render library I was using. Rather than getting rid of pre-render library, I added an active attribute to Sticky, with it being false by default (stored in state). Then, after 3-second delay, I turned it on (set active attribute in the state to active). I chose 3 seconds because I believe that's how long my pre-render took to compose each page (I'm not exactly informed on the details of how it does this).
Like:
componentDidMount() {
...
//Enable sticky functionality after delay
setTimeout(function() { //Start the timer
this.setState({
controls: {
...this.state.controls,
isStickyActive: true,
}
}) //After 3 seconds, set isStickyActive to true
}.bind(this), 3000);
...
}
I have a dialog box in my application which displays a list of cards. I made a jsbin simplified version of it
http://jsbin.com/qopocej/edit?html,output
If I click on the blue outline on any of the cards a nice dialog box pops up with a short menu item in it. Particularly click on the blue outline below 'Joe' and see how the dialog box covers the current card and those surrounding it.
I need to refactor the code so that this current element in each card action is a new custom element, which brings with it all the functionality of displaying the menu dialog box. In the real application this does some ajax calls to the serve to update information.
The problem I have is that the very fact of refactoring has destroyed the way the dialog box displays. This is shown is this jsbin
http://jsbin.com/vecoxuh/edit?html,output
Click on the red box under 'Joe' and see how the dialog box is above the current card, but slips under the other cards nearby
I assume it is something to do with "stacking context", since the explicit styles that has added a z-index to each of the two dialog boxes should imply it still works, but it doesn't
The .item with an active dialog needs to be set a z-index that's higher than its siblings. The child dropdown menu's z-index is relative to that of its parents, no matter what it's explicitly set to. So if the furthermost parent does not have a z-index that enables it to overlap the other cards, none of its children will be able to do the same.
I'm aware of PopUpManager and that custom modal windows can be created.
But let's say I have a simple Canvas(or any component) and when I show it the background needs to be blurred out like how PopUpManager does when a new pop-up is shown.
Is this possible?
Not without a lot of work. The PopupManager puts a blur on Application, and then puts the popup in front of the Application, but as a child of the SystemManager, so it's a sibling to the Application in the display list rather than a child. You could take a screen shot of the Application, run a blur filter over it, and place it as the last child of Application, and then place your component on top of that, but if you do that you might as well just use PopupManager in the first place.
I think the blurring has to do with how you set the alpha level on the component.