I'm using ag-grid-react like this:
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
and declares it like this in render(some details removed for clarity):
return <div className="MarketGrid ag-theme-balham" >
<AgGridReact domLayout='autoHeight'
enableCellChangeFlash={true}
rowSelection={'single'}
onSelectionChanged={this.onSelectionChanged.bind(this)}
onGridReady={this.onGridReady.bind(this)} />
</div>;
the "enableCellChangeFlash" property works fine, and I know how to change the color of it, but what if I want to change the color depending on whether the new value is higher or lower than the previous?
My update code looks somewhat like this:
let row = this.gridApi.getRowNode(this.props.productIds.indexOf(id));
for (var f in data) {
row.setDataValue(f, data[f]);
}
}
I guess I should set the cell style somewhere, but I'm not sure where.
UPDATE: According to this page https://www.ag-grid.com/javascript-grid-data-update/#flashing I should do this:
"If you want to override how the flash presents itself (eg change the background color, or remove the animation) then override the relevant CSS classes."
Anyone knows how to do this?
I almost got this now. The answer I found out is based on CSS. Set the classname for blinking/stop-blinking like:
return (<div key={Math.random()}
className={some logic to set classname here, like "blink-red" or "blink-blue"}
onAnimationEnd={() => this.setState({ fade: false })}
> {this.state.value} </div>);
and use onAnimationEnd to set some state variable that will affect that logic.
Then add the fading logic like this to CSS:
.blink-red {
animation: redtotransparent 3s ease 5s;
}
#keyframes redtotransparent {
from {
background-color: red;
color: white;
}
to {
background-color: transparent;
color: black;
}
}
It's still not perfect, but almost there. Changing the key makes React think the DOM has changed. When I come up with anything better I will add it here.
Click on the Flashing Cell option in the dropdown at the top and then you can choose a different color for an up change and a down change. you can also set how long it will flash for.
Related
I am new to PrimeNg with Angular. I have a simple primeng p-inputnumber component as below:
<p-inputNumber
[showButtons]="true"
[placeholder]="placeholderText"
incrementButtonIcon="fal fa-plus"
decrementButtonIcon="fal fa-minus"
[minFractionDigits]="_config?.integer ? 0 : 1"
[min]="_config?.minValue"
[max]="_config?.maxValue"
[(ngModel)]="value"
(onBlur)="onBlur()">
</p-inputNumber>
And have created a wrapper to this component i.e is the wrapper to the above component and using it in a homepage component. Now i want to apply style to this wrapper component which in turn should apply style to primeng component. Right now it is not setting.
Homepagecomponent.html
---<app-number-input class="disabled">
------<p-inputNumber>
i set the below style in homepagecomponent.scss
:host ::ng-deep .disabled {
background: red;
}
But the above is not being set. Can anyone help me how to achieve my expected?
Thanks
You would need something like this in your CSS
:host ::ng-deep {
// you may want to specify your app element or something here to be more specific than just .disabled class
.disabled {
// tweak this list to whichever pieces of the p-inputnumber you want to have red background
.p-inputnumber,
.p-inputnumber-stacked,
.p-inputnumber-horizontal,
.p-inputnumber-vertical,
.p-inputnumber-input,
.p-inputnumber-button,
.p-inputnumber-button-up,
.p-inputnumber-button-down,
.p-inputnumber-button-icon {
background-color: red;
}
}
}
I have an overlayed view in my React Native app which I need to animate on and off screen when the user pushes a button. I know how to position the view and animate it but I can't work out how to trigger the animation.
My redux store has a very simple state with an isOpen flag saying whether the panel is open or closed. I map the state to the panel component's props and when the isOpen prop changes I want to trigger the open or close animation. Obviously if the user presses the toggle button mid animation the currently running animation needs to be cancelled.
This should be simple but I can't find any examples. Any help would be much appreciated.
React Native
To begin an animation on a change of props you can simply start your animation in componentDidUpdate. Here's an example:
componentDidUpdate(prevProps) {
if (this.props.isOpen !== prevProps.isOpen) {
this.state.animation.start();
}
}
Assuming your animation is defined in the component's state.
React (Browser):
[Not relevant to this question but potentially useful.]
A simple way to do this is using CSS transitions. What you can do is give the panel component a CSS class for closed (or open but I find using the closed/collapsed as a style easier because then the default is open).
Then in your panel's render:
render() {
const { isOpen } = this.props;
return <div className={ 'panel' + (isOpen ? '' : ' closed') }></div>
}
And in your CSS:
.panel {
/* some other styles */
transition: .5s ease-in;
}
.closed {
height: 0;
}
This way CSS can handle the animation logic and your concern of clicking the open/close button before the current animation has finished is addressed.
Here are the CSS transition docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Edit: A disadvantage of this method is that height must be explicitly set when the panel is open.
Here's a little example snippet:
function togglePanel() {
const panel = document.querySelector('div.panel');
if (panel.classList.contains('closed')) {
panel.classList.remove('closed');
} else {
panel.classList.add('closed');
}
}
.panel {
background-color: #00c0de;
height: 4rem;
overflow: hidden;
transition: .5s ease-in;
}
.closed {
height: 0;
}
<button onclick='togglePanel()'>Toggle Panel</button>
<div class='panel closed'>
<span>Hello, I'm the panel</span>
</div>
As settingsToggleClassName requires string input.
I am implementing this in the following way
let griddleBtnStyle = {
background: 'red'
};
and using this style in here
<Griddle
useGriddleStyles={false}
results={this.getGriddleData()}
resultsPerPage={10}
tableClassName='table'
showFilter={true}
settingsText={''}
settingsToggleClassName='griddleBtnStyle'
settingsIconComponent={
<RaisedButton
label='Columns'
primary={true}
/>}
showSettings={true}
/>
Now, settings button having this class griddleBtnStyle - But no changes occured when I implemented in this way.As per eg here button should be red but none has occred.
Can you tell me the right way to implement settingToggleClassName
You have a minor error, you have written:
settingsToggleClassName='griddleBtnStyle'
You transfer to properties settingsToggleClassName string griddleBtnStyle, not variable griddleBtnStyle with value 'red'. If you want transfer variable its should like this ({}):
settingsToggleClassName={'griddleBtnStyle'}
Update:
Sorry, i didin't saw the:
let griddleBtnStyle = {
background: 'red'
};
I thougth griddleBtnStyle its a class.
So i thing the best solution will be define in CSS class name griddleToggleBtn like this:
.griddleToggleBtn {
background-color: red
}
and transfer to propertie settingsToggleClassName class name string 'griddleToggleBtn':
settingsToggleClassName='griddleBtnStyle'
its should work
Ignore settingsToggleClassName. You would only use that if you wanted to apply CSS style to the toggle button created by Griddle. BUT, you aren't using that button - you are supplying your own, using settingsIconComponent. So, if you want to change the appearance of your RaisedButton, just set its properties and/or style... For example, to change background to red:
settingsIconComponent={
<RaisedButton
backgroundColor="red"
label='Columns'
primary={true}
/>}
I'm using facebooks fixedDataTable to show stock dashboard. what i need to achieve is flash fixed data table cell (say price column) green or red based on the change of price. How do we achieve animation inside fixed data table ?
You could do this with css in the children components of the datatable <Cell>. Something like:
componentWillReceiveProps(nextProps) {
// if the price has changed, add a class to do some animation stuff
if (nextProps.price != this.props.price) {
this.setState( className: "fancy-flash-class-in" );
}
}
componentDidUpdate() {
// after the component has updated, set the class back
if (this.state.className == "fancy-flash-class-in") {
setTimeout(() = > this.setState(
{className: "fancy-flash-class-out"}),
500);
}
}
componentDidUpdate() is called really fast, so you will do a setTimeout, otherwise the animation won't work.
In css, you can add animations:
fancy-flash-class-in: give the component a highlight-color, and a css transition
fancy-flash-class-out: the basic component color, with css animation to go back from red or green to basic color
So in your css file:
.fancy-flash-class-out {
background-color: grey;
transition: background-color 2s;
-webkit-transition: background-color 2s; /* Safari */
}
Simple demo codepen here
Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the button, however, I'd like it to return to its original appearance.
Semantically, I'm using the button to "reset" part of my app. I want to execute some code when it's clicked. After it's been pressed, though, it doesn't make sense for the button to remain in a "depressed" state.
Here's a live example.
Any ideas?
Alternatively you could use the ng-mouseenter and ng-mosueleave directives.
For example:
<div ng-app="ButtonApp">
<div ng-controller="MainCtrl">
<button ng-class="buttonClass"
ng-mouseenter="onMouseEnter()"
ng-mouseleave="onMouseLeave()"> Click Me!
</div>
</div>
And in your controller:
var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){
var defaultButtonClass = ['btn','btn-foxtrot'];
$scope.buttonClass = defaultButtonClass;
$scope.onMouseEnter = function(){
$scope.buttonClass = ['btn','btn-bravo'];
};
$scope.onMouseLeave = function() {
$scope.buttonClass = defaultButtonClass;
}
}]);
You can see my JSFiddle.
To generate the button colors you could use something like Beautiful Buttons for
Twitter Bootstrappers.
I'd give it another class, say btn-reset and add the following CSS.
// the order of these two is also important
.btn-reset:hover{
background-color: Dark !important;
}
.btn-reset:active{
background-color: Darkest !important;
}
// you need this to reset it after it's been clicked and released
.btn-reset:focus{
background-color: Normal !important;
}
It's working here http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview
The issue is that the :focus pseudo class has a darker colour than the standard button so after it's been clicked it still has focus so still has the darker colour, if you want to stick with the standard colours you can just add a new selector for the :focus pseudo class.