I need to modify style after button rendering or initializing without removing from the DOM.
Is there any way to modify the style clause of PayPal.Buttons once initialized? Let me know.
Related
I am trying to animate a React component that contains data fetched from elsewhere. Placing it in a ReactCSSTransitionGroup worked fine. That is, until I altered the component's render() method to return false until the data has been fetched (to prevent it from being rendered without data).
Now, I guess the component is mounted immediately, at which point the animation classes are added, but only rendered afterwards. Is this thinking correct? How can I get the component to be animated when render returns the actual component?
ReactCSSTransitionGroup activates whenever components are added and deleted to its props.children. Since your component is mounted before you fetch data, nothing will happen after data is fetched (I think this is true even if the component's render() method returns false. Let me know in the comments if that is incorrect)
Here's a solution
Just don't mount the component (in the solution, it's a <div key="1"> tag) until the react class receives the data. Use component states on the parent component to keep track of the state of your asynchronous request.
The ReactCSSTransitionGroup doesn't play nicely with tables as it's default behaviour is to wrap tags with a span element. You can provide it with your own component, but I found the solution quite heavy and complex.
I have a different approach that allows a React component to animate each time its content changes. The animation is continually triggered by toggling between 2 duplicate CSS styles.
Other than the ReactCSSTransitionGroup, another way is to write your own css transitions with an 'enter' class that is added to the component in componentdidmount. Keep in mind that you should change the state in a requestAnimationFrame because otherwise your class would be added in the same event loop as it is mounted, thus wont animate. Here's an example:
https://codesandbox.io/s/zkm5015y1x
Also, more on event loop, a talk by Jake Archibald:
https://www.youtube.com/watch?v=cCOL7MC4Pl0
In Angular to change the styling of an element or component I understand there are tools available in the form of directives (ngStyle, ngClass). However as far as I can tell, ngClass allows for conditional styling only in which one changes styling based on a particular scenario. These are therefore changes based on discrete conditions.
ngStyle allows an object to be passed which can in theory do this by returning a style object which is custom defined, but then ngStyle is listening perpetually to page changes, whereas I wish to trigger the style change when a specific action occurs, instead of listening to all page changes if possible?
I would like to programmatically change an images's css properties programmatically (rotation, width, height, opacity) based on perhaps a button press, or a mouse event, or just when a function is called, but the key is I want those changes to be continuous, for example, a rotation based on a variable in the component class, no discrete options of class changes.
In Angular, how would this be done? ViewChild allows access to the DOM and therefore the styling, but the styles are read-only it would seem as they are computed.
I can't post code, as I don't know where to start to make such a thing work.
but then ngStyle is listening perpetually to page changes, whereas I wish to trigger the style change when a specific action occurs, instead of listening to all page changes if possible?
That's the whole point of Angular: you bind data to the view via a declarative template syntax it offers, and let it figure out when to update.
If you try to trigger update by manually knowing when data changes, you're probably doing something wrong (or you're optimizing a specific part of the library). Letting Angular do the update is the correct thing to do.
update () {
this.styles = { /* ... */ }
}
<div [ngStyle]="styles">...</div>
i have a map on my page with maptype control button. When initializing the map i add a css style(highlighting the current active map type, like "Map" or "Satellite")to the button.
When resized, the map kind of reloads and the button css disappears, so i have to wait for the resize to end and reapply css style on the button.
In the end it just looks weird, because the map loads and the button has default color, after 2 seconds (i use settimeout) the button is applied the css again. How can this be done so the button gets the css before map loads and also keep that css.
Should i use a callback here and would that make a difference?
As mentioned in Custom Controls, few rules are necessary to create your own custom control. The following are the guidelines which also acts as best practice:
Define appropriate CSS for the control element(s) to display.
Handle interaction with the user or the map through event handlers for either map property changes or user events (for example, click events).
Create a element to hold the control and add this element to the Map's controls property.
To know more about these concerns, please go through the discussion and sample codes in the given documentation primarily in the following:
Drawing Custom Controls
Handling Events from Custom Controls
Positioning Custom Controls
A Custom Control Example
Adding State to Controls
I need to completely initialize a custom component in my Flex app (i.e. I should be able to access it from action script and get its properties and its children etc), But I do not want to add it to the display or make it visible.
I have tried to add it to my visible component, but keep it visible, but often many of its properties are set only when it is drawn, so i don't get what i need.
Is there a way to add a custom component to some sort of 'Virtual' display, that is not visible to the user?
You could add the component to an invisible Sprite - that way the component itself could both be on the stage and have its own visible property set to true.
Did you try using initialize()? After a view is added to the display list, the initialization stage begins. Calling initialize() before addChild() should let you initialize the view without needing to first add it to the stage.
For more info visit:
http://flexscript.wordpress.com/2008/10/24/flex-component-lifecycle-and-flex-component-framework/
http://blog.deadinkvinyl.com/2008/10/05/flex-3-addchild-and-initialize/
Not sure if possible without adding it to the display list, although I'd wish it were to some extent.
I once had to make custom drag proxy, which didn't work with the real component, because of some weird skinning issues. So instead I had PopupMananger add a box as a popup, added my component to the box, called validateNow on the component, drew it in a bitmap data, removed the popup, and used the bitmap data as the proxy.
So what you were trying was missing a call to validateNow most likely.
I'm doing some bit of redesigning here for which we hired an outsourced freelance designer. He sent in the designs however he's used css class styles for the textboxes as opposed to my earlier attempts to apply a ganeral style to the inputs tag which had its hiccups.
I've used the Zend View Helpers to create the textboxes however I would like a simpler way to be able to set it up so by default all textfields would have the base css class 'textfield' - is there a way to do so in code without me having to explicitly make the addition in every call made to the view helper?
If you want to apply this style to all textfields on your page you just need a general textfield style and there is no need to even touch your markup.
If you have other textfields as well which you want to style differently, you will have to either extend Zend_Form, Zend_Form_Element or Zend_Form_Element_Text. Probably it would be easiest to extend the former and adding an attribute 'class' with the value 'textfield' to every text element while looping through all form elements.
But again. Why would you need to touch your markup at all, you just need a style for textfields.