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

ConfirmButton: Add preventDefault (#33743)

Browse Source
This commit is contained in:
Alex Khomenko 2021-05-06 10:20:37 +03:00 committed by GitHub
parent ca54b4d6b0
commit 1a9c84f0e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 49 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
View File

@ -6,51 +6,6 @@ import { Themeable } from '../../types';
import { ComponentSize } from '../../types/size';
import { Button, ButtonVariant } from '../Button';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
buttonContainer: css`
direction: rtl;
display: flex;
align-items: center;
`,
buttonDisabled: css`
text-decoration: none;
color: ${theme.colors.text};
opacity: 0.65;
cursor: not-allowed;
pointer-events: none;
`,
buttonShow: css`
opacity: 1;
transition: opacity 0.1s ease;
z-index: 2;
`,
buttonHide: css`
opacity: 0;
transition: opacity 0.1s ease;
z-index: 0;
`,
confirmButton: css`
align-items: flex-start;
background: ${theme.colors.bg1};
display: flex;
overflow: hidden;
position: absolute;
`,
confirmButtonShow: css`
z-index: 1;
opacity: 1;
transition: opacity 0.08s ease-out, transform 0.1s ease-out;
transform: translateX(0);
`,
confirmButtonHide: css`
opacity: 0;
transition: opacity 0.12s ease-in, transform 0.14s ease-in;
transform: translateX(100px);
`,
};
});
export interface Props extends Themeable {
/** Confirm action callback */
onConfirm(): void;
@ -107,7 +62,10 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
this.props.onCancel();
}
};
onConfirm = () => {
onConfirm = (event: SyntheticEvent) => {
if (event) {
event.preventDefault();
}
this.props.onConfirm();
if (this.props.closeOnConfirm) {
this.setState({
@ -167,6 +125,51 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
export const ConfirmButton = withTheme(UnThemedConfirmButton);
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
buttonContainer: css`
direction: rtl;
display: flex;
align-items: center;
`,
buttonDisabled: css`
text-decoration: none;
color: ${theme.colors.text};
opacity: 0.65;
cursor: not-allowed;
pointer-events: none;
`,
buttonShow: css`
opacity: 1;
transition: opacity 0.1s ease;
z-index: 2;
`,
buttonHide: css`
opacity: 0;
transition: opacity 0.1s ease;
z-index: 0;
`,
confirmButton: css`
align-items: flex-start;
background: ${theme.colors.bg1};
display: flex;
overflow: hidden;
position: absolute;
`,
confirmButtonShow: css`
z-index: 1;
opacity: 1;
transition: opacity 0.08s ease-out, transform 0.1s ease-out;
transform: translateX(0);
`,
confirmButtonHide: css`
opacity: 0;
transition: opacity 0.12s ease-in, transform 0.14s ease-in;
transform: translateX(100px);
`,
};
});
// Declare defaultProps directly on the themed component so they are displayed
// in the props table
ConfirmButton.defaultProps = {