mirror of https://github.com/apache/superset.git
refactor: migrate QueryAndSaveBtns to TypeScript and add stories (#18121)
* refactor: Migrate QueryAndSaveBtns to TS and stories * fix: change typing notation in QueryAndSaveBtns
This commit is contained in:
parent
8027f5f0a6
commit
8b3e27d68b
|
@ -26,6 +26,17 @@ import { Tooltip } from 'src/components/Tooltip';
|
|||
|
||||
export type OnClickHandler = React.MouseEventHandler<HTMLElement>;
|
||||
|
||||
export type ButtonStyle =
|
||||
| 'primary'
|
||||
| 'secondary'
|
||||
| 'tertiary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| 'default'
|
||||
| 'link'
|
||||
| 'dashed';
|
||||
|
||||
export interface ButtonProps {
|
||||
id?: string;
|
||||
className?: string;
|
||||
|
@ -46,16 +57,7 @@ export interface ButtonProps {
|
|||
| 'rightBottom';
|
||||
onClick?: OnClickHandler;
|
||||
disabled?: boolean;
|
||||
buttonStyle?:
|
||||
| 'primary'
|
||||
| 'secondary'
|
||||
| 'tertiary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| 'default'
|
||||
| 'link'
|
||||
| 'dashed';
|
||||
buttonStyle?: ButtonStyle;
|
||||
buttonSize?: 'default' | 'small' | 'xsmall';
|
||||
style?: CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import QueryAndSaveBtns, { QueryAndSaveBtnsProps } from './QueryAndSaveBtns';
|
||||
|
||||
export default {
|
||||
title: 'QueryAndSaveBtns',
|
||||
component: QueryAndSaveBtns,
|
||||
};
|
||||
|
||||
export const InteractiveQueryAndSaveBtnsProps = (
|
||||
args: QueryAndSaveBtnsProps,
|
||||
) => <QueryAndSaveBtns {...args} />;
|
||||
|
||||
InteractiveQueryAndSaveBtnsProps.args = {
|
||||
canAdd: true,
|
||||
loading: false,
|
||||
};
|
||||
|
||||
InteractiveQueryAndSaveBtnsProps.argTypes = {
|
||||
onQuery: { action: 'onQuery' },
|
||||
onSave: { action: 'onSave' },
|
||||
onStop: { action: 'onStop' },
|
||||
};
|
||||
|
||||
InteractiveQueryAndSaveBtnsProps.story = {
|
||||
parameters: {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
};
|
|
@ -17,38 +17,33 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ButtonGroup from 'src/components/ButtonGroup';
|
||||
import { t, useTheme } from '@superset-ui/core';
|
||||
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import Button from 'src/components/Button';
|
||||
import Button, { ButtonStyle, OnClickHandler } from 'src/components/Button';
|
||||
|
||||
const propTypes = {
|
||||
canAdd: PropTypes.bool.isRequired,
|
||||
onQuery: PropTypes.func.isRequired,
|
||||
onSave: PropTypes.func,
|
||||
onStop: PropTypes.func,
|
||||
loading: PropTypes.bool,
|
||||
chartIsStale: PropTypes.bool,
|
||||
errorMessage: PropTypes.node,
|
||||
export type QueryAndSaveBtnsProps = {
|
||||
canAdd: boolean;
|
||||
onQuery: OnClickHandler;
|
||||
onSave: OnClickHandler;
|
||||
onStop: OnClickHandler;
|
||||
loading?: boolean;
|
||||
chartIsStale?: boolean;
|
||||
errorMessage: React.ReactElement | undefined;
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
onStop: () => {},
|
||||
onSave: () => {},
|
||||
};
|
||||
|
||||
export default function QueryAndSaveBtns({
|
||||
canAdd,
|
||||
onQuery,
|
||||
onSave,
|
||||
onStop,
|
||||
loading,
|
||||
chartIsStale,
|
||||
errorMessage,
|
||||
}) {
|
||||
let qryButtonStyle = 'tertiary';
|
||||
export default function QueryAndSaveBtns(props: QueryAndSaveBtnsProps) {
|
||||
const {
|
||||
canAdd,
|
||||
onQuery = () => {},
|
||||
onSave = () => {},
|
||||
onStop = () => {},
|
||||
loading,
|
||||
chartIsStale,
|
||||
errorMessage,
|
||||
} = props;
|
||||
let qryButtonStyle: ButtonStyle = 'tertiary';
|
||||
if (errorMessage) {
|
||||
qryButtonStyle = 'danger';
|
||||
} else if (chartIsStale) {
|
||||
|
@ -127,6 +122,3 @@ export default function QueryAndSaveBtns({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
QueryAndSaveBtns.propTypes = propTypes;
|
||||
QueryAndSaveBtns.defaultProps = defaultProps;
|
Loading…
Reference in New Issue