IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 13:39:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

restored transition

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-10-31 12:50:44 +01:00
parent 1a65046b64
commit 95a8a59845
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/core/components/Animations/SlideDown.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React from 'react';
import Transition from 'react-transition-group/Transition';
interface Style {
@ -6,9 +6,11 @@ interface Style {
overflow?: string;
}
const defaultMaxHeight = '200px'; // When animating using max-height we need to use a static value.
// When animating using max-height we need to use a static value.
// If this is not enough, pass in <SlideDown maxHeight="....
const defaultMaxHeight = '200px';
const defaultDuration = 200;
export const defaultStyle: Style = {
transition: `max-height ${defaultDuration}ms ease-in-out`,
overflow: 'hidden',

20
public/app/features/api-keys/ApiKeysPage.tsx
View File

@ -8,7 +8,7 @@ import { getApiKeys, getApiKeysCount } from './state/selectors';
import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
import PageHeader from 'app/core/components/PageHeader/PageHeader';
import PageLoader from 'app/core/components/PageLoader/PageLoader';
import SlideDown, { defaultStyle as slideDownDefaultStyle } from 'app/core/components/Animations/SlideDown';
import SlideDown from 'app/core/components/Animations/SlideDown';
import ApiKeysAddedModal from './ApiKeysAddedModal';
import config from 'app/core/config';
import appEvents from 'app/core/app_events';
@ -85,6 +85,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
return {
...prevState,
newApiKey: initialApiKeyState,
isAdding: false,
};
});
};
@ -130,10 +131,9 @@ export class ApiKeysPage extends PureComponent<Props, any> {
renderAddApiKeyForm() {
const { newApiKey, isAdding } = this.state;
const slideDownStyle = isAdding ? slideDownDefaultStyle : { ...slideDownDefaultStyle, transition: 'unset' };
return (
<SlideDown in={isAdding} style={slideDownStyle}>
<SlideDown in={isAdding}>
<div className="cta-form">
<button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
<i className="fa fa-close" />
@ -242,9 +242,15 @@ export class ApiKeysPage extends PureComponent<Props, any> {
return (
<div>
<PageHeader model={navModel} />
{hasFetched ?
(apiKeysCount > 0 ? this.renderApiKeyList() : this.renderEmptyList())
: <PageLoader pageName="Api keys" />}
{hasFetched ? (
apiKeysCount > 0 ? (
this.renderApiKeyList()
) : (
this.renderEmptyList()
)
) : (
<PageLoader pageName="Api keys" />
)}
</div>
);
}
@ -256,7 +262,7 @@ function mapStateToProps(state) {
apiKeys: getApiKeys(state.apiKeys),
searchQuery: state.apiKeys.searchQuery,
apiKeysCount: getApiKeysCount(state.apiKeys),
hasFetched: state.apiKeys.hasFetched
hasFetched: state.apiKeys.hasFetched,
};
}