IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Simplifies rich history drawer animation logic (#26633)

Browse Source 
Changes the logic of the rich history drawer animation to use
CSS animations rather than a timer and react state
This commit is contained in:
kay delaney 2020-07-28 14:17:20 +01:00 committed by GitHub
parent 977bf2eca4
commit b28594477d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/app/features/explore/RichHistory/RichHistoryContainer.tsx
View File

@ -1,9 +1,9 @@
// Libraries // Libraries
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import { Resizable } from 're-resizable'; import { Resizable } from 're-resizable';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import { css, cx } from 'emotion'; import { css, cx, keyframes } from 'emotion';
// Services & Utils // Services & Utils
import store from 'app/core/store'; import store from 'app/core/store';
@ -21,6 +21,16 @@ import { RichHistory, Tabs } from './RichHistory';
//Actions //Actions
import { deleteRichHistory } from '../state/actions'; import { deleteRichHistory } from '../state/actions';
const drawerSlide = keyframes`
0% {
transform: translateY(400px);
}
100% {
transform: translateY(0px);
}
`;
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const shadowColor = theme.isLight ? theme.palette.gray4 : theme.palette.black; const shadowColor = theme.isLight ? theme.palette.gray4 : theme.palette.black;
@ -38,11 +48,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`, `,
drawerActive: css` drawerActive: css`
opacity: 1; opacity: 1;
transition: transform 0.5s ease-out; animation: 0.5s ease-out ${drawerSlide};
`,
drawerNotActive: css`
opacity: 0;
transform: translateY(400px);
`, `,
rzHandle: css` rzHandle: css`
background: ${theme.colors.formInputBorder}; background: ${theme.colors.formInputBorder};
@ -72,15 +78,8 @@ export interface Props {
} }
export function RichHistoryContainer(props: Props) { export function RichHistoryContainer(props: Props) {
const [visible, setVisible] = useState(false);
const [height, setHeight] = useState(400); const [height, setHeight] = useState(400);
/* To create sliding animation for rich history drawer */
useEffect(() => {
const timer = setTimeout(() => setVisible(true), 10);
return () => clearTimeout(timer);
}, []);
const { richHistory, width, firstTab, activeDatasourceInstance, exploreId, deleteRichHistory, onClose } = props; const { richHistory, width, firstTab, activeDatasourceInstance, exploreId, deleteRichHistory, onClose } = props;
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme); const styles = getStyles(theme);
@ -88,7 +87,7 @@ export function RichHistoryContainer(props: Props) {
return ( return (
<Resizable <Resizable
className={cx(styles.container, visible ? styles.drawerActive : styles.drawerNotActive)} className={cx(styles.container, styles.drawerActive)}
defaultSize={{ width: drawerWidth, height: '400px' }} defaultSize={{ width: drawerWidth, height: '400px' }}
handleClasses={{ top: styles.rzHandle }} handleClasses={{ top: styles.rzHandle }}
enable={{ enable={{