mirror of https://github.com/apache/superset.git
style: update +NEW button to use Button component, add dropdownItems prop to Button (#10422)
This commit is contained in:
parent
9914ae1b52
commit
e89e60df76
|
@ -22,11 +22,18 @@ import {
|
|||
Button as BootstrapButton,
|
||||
Tooltip,
|
||||
OverlayTrigger,
|
||||
MenuItem,
|
||||
} from 'react-bootstrap';
|
||||
import styled from '@superset-ui/style';
|
||||
|
||||
export type OnClickHandler = React.MouseEventHandler<BootstrapButton>;
|
||||
|
||||
export interface DropdownItemProps {
|
||||
label: string;
|
||||
url: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface ButtonProps {
|
||||
className?: string;
|
||||
tooltip?: string;
|
||||
|
@ -38,6 +45,7 @@ export interface ButtonProps {
|
|||
bsSize?: BootstrapButton.ButtonProps['bsSize'];
|
||||
style?: BootstrapButton.ButtonProps['style'];
|
||||
children?: React.ReactNode;
|
||||
dropdownItems?: DropdownItemProps[];
|
||||
}
|
||||
|
||||
const BUTTON_WRAPPER_STYLE = { display: 'inline-block', cursor: 'not-allowed' };
|
||||
|
@ -82,23 +90,41 @@ export default function Button(props: ButtonProps) {
|
|||
};
|
||||
const tooltip = props.tooltip;
|
||||
const placement = props.placement;
|
||||
const dropdownItems = props.dropdownItems;
|
||||
delete buttonProps.tooltip;
|
||||
delete buttonProps.placement;
|
||||
|
||||
if (tooltip && props.disabled) {
|
||||
// Working around the fact that tooltips don't get triggered when buttons are disabled
|
||||
// https://github.com/react-bootstrap/react-bootstrap/issues/1588
|
||||
buttonProps.style = { pointerEvents: 'none' };
|
||||
}
|
||||
|
||||
let button = (
|
||||
<SupersetButton {...buttonProps}>{props.children}</SupersetButton>
|
||||
);
|
||||
if (tooltip) {
|
||||
if (props.disabled) {
|
||||
// Working around the fact that tooltips don't get triggered when buttons are disabled
|
||||
// https://github.com/react-bootstrap/react-bootstrap/issues/1588
|
||||
buttonProps.style = { pointerEvents: 'none' };
|
||||
|
||||
if (dropdownItems) {
|
||||
button = (
|
||||
<div style={BUTTON_WRAPPER_STYLE}>
|
||||
<SupersetButton {...buttonProps}>{props.children}</SupersetButton>
|
||||
<SupersetButton {...buttonProps} data-toggle="dropdown">
|
||||
{props.children}
|
||||
</SupersetButton>
|
||||
<ul className="dropdown-menu">
|
||||
{dropdownItems.map(
|
||||
(dropdownItem: DropdownItemProps, index1: number) => (
|
||||
<MenuItem key={`${dropdownItem.label}`} href={dropdownItem.url}>
|
||||
<i className={`fa ${dropdownItem.icon}`} />
|
||||
{dropdownItem.label}
|
||||
</MenuItem>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (tooltip) {
|
||||
return (
|
||||
<OverlayTrigger
|
||||
placement={placement}
|
||||
|
@ -110,5 +136,6 @@ export default function Button(props: ButtonProps) {
|
|||
</OverlayTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
|
|
|
@ -17,44 +17,42 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import styled from '@superset-ui/style';
|
||||
import { t } from '@superset-ui/translation';
|
||||
import Button, { DropdownItemProps } from '../Button';
|
||||
|
||||
const buttonStyle = {
|
||||
marginTop: '12px',
|
||||
marginRight: '30px',
|
||||
};
|
||||
const StyledButton = styled(Button)`
|
||||
margin-top: 12px;
|
||||
margin-right: 30px;
|
||||
`;
|
||||
|
||||
const dropdownItems: DropdownItemProps[] = [
|
||||
{
|
||||
label: t('SQL Query'),
|
||||
url: '/superset/sqllab',
|
||||
icon: 'fa-fw fa-search',
|
||||
},
|
||||
{
|
||||
label: t('Chart'),
|
||||
url: '/chart/add',
|
||||
icon: 'fa-fw fa-bar-chart',
|
||||
},
|
||||
{
|
||||
label: t('Dashboard'),
|
||||
url: '/dashboard/new',
|
||||
icon: 'fa-fw fa-dashboard',
|
||||
},
|
||||
];
|
||||
|
||||
export default function NewMenu() {
|
||||
return (
|
||||
<li className="dropdown">
|
||||
<button
|
||||
type="button"
|
||||
style={buttonStyle}
|
||||
data-toggle="dropdown"
|
||||
<StyledButton
|
||||
className="dropdown-toggle btn btn-sm btn-primary"
|
||||
dropdownItems={dropdownItems}
|
||||
>
|
||||
<i className="fa fa-plus" /> New
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<a href="/superset/sqllab">
|
||||
<span className="fa fa-fw fa-search" />
|
||||
{t('SQL Query')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/chart/add">
|
||||
<span className="fa fa-fw fa-bar-chart" />
|
||||
{t('Chart')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/dashboard/new/">
|
||||
<span className="fa fa-fw fa-dashboard" />
|
||||
{t('Dashboard')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</StyledButton>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -70,11 +70,6 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
color: @gray-dark;
|
||||
background-color: @gray-bg;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.dropdown-toggle.btn,
|
||||
.btn-group.open .dropdown-toggle.btn {
|
||||
|
|
Loading…
Reference in New Issue