mirror of https://github.com/apache/superset.git
refactor: upgrade ControlHeader to TSX & FC and add storybook (#18188)
* refactor: upgrade ControlHeader to TSX & FC and add storybook * fix: Add story for error in ControlHeader * apply review comments
This commit is contained in:
Adam Dobrawy
GitHub
parent
e12b5bc8b1
commit
341d85589c
|
|
@ -1,174 +0,0 @@
|
|||
/**
|
||||
* 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 PropTypes from 'prop-types';
|
||||
import { t, css, withTheme } from '@superset-ui/core';
|
||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { FormLabel } from 'src/components/Form';
|
||||
import Icons from 'src/components/Icons';
|
||||
|
||||
const propTypes = {
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.node,
|
||||
description: PropTypes.node,
|
||||
validationErrors: PropTypes.array,
|
||||
renderTrigger: PropTypes.bool,
|
||||
rightNode: PropTypes.node,
|
||||
leftNode: PropTypes.node,
|
||||
onClick: PropTypes.func,
|
||||
hovered: PropTypes.bool,
|
||||
tooltipOnClick: PropTypes.func,
|
||||
warning: PropTypes.string,
|
||||
danger: PropTypes.string,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
validationErrors: [],
|
||||
renderTrigger: false,
|
||||
hovered: false,
|
||||
name: undefined,
|
||||
};
|
||||
|
||||
class ControlHeader extends React.Component {
|
||||
renderOptionalIcons() {
|
||||
if (this.props.hovered) {
|
||||
return (
|
||||
<span
|
||||
css={theme => css`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
padding-left: ${theme.gridUnit}px;
|
||||
transform: translate(100%, -50%);
|
||||
white-space: nowrap;
|
||||
`}
|
||||
>
|
||||
{this.props.description && (
|
||||
<span>
|
||||
<InfoTooltipWithTrigger
|
||||
label={t('description')}
|
||||
tooltip={this.props.description}
|
||||
placement="top"
|
||||
onClick={this.props.tooltipOnClick}
|
||||
/>{' '}
|
||||
</span>
|
||||
)}
|
||||
{this.props.renderTrigger && (
|
||||
<span>
|
||||
<InfoTooltipWithTrigger
|
||||
label={t('bolt')}
|
||||
tooltip={t('Changing this control takes effect instantly')}
|
||||
placement="top"
|
||||
icon="bolt"
|
||||
/>{' '}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.props.label) {
|
||||
return null;
|
||||
}
|
||||
const labelClass =
|
||||
this.props.validationErrors.length > 0 ? 'text-danger' : '';
|
||||
|
||||
const { theme } = this.props;
|
||||
|
||||
return (
|
||||
<div className="ControlHeader" data-test={`${this.props.name}-header`}>
|
||||
<div className="pull-left">
|
||||
<FormLabel
|
||||
css={{
|
||||
marginBottom: 0,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{this.props.leftNode && <span>{this.props.leftNode}</span>}
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={this.props.onClick}
|
||||
className={labelClass}
|
||||
style={{ cursor: this.props.onClick ? 'pointer' : '' }}
|
||||
>
|
||||
{this.props.label}
|
||||
</span>{' '}
|
||||
{this.props.warning && (
|
||||
<span>
|
||||
<Tooltip
|
||||
id="error-tooltip"
|
||||
placement="top"
|
||||
title={this.props.warning}
|
||||
>
|
||||
<Icons.AlertSolid
|
||||
iconColor={theme.colors.alert.base}
|
||||
iconSize="s"
|
||||
/>
|
||||
</Tooltip>{' '}
|
||||
</span>
|
||||
)}
|
||||
{this.props.danger && (
|
||||
<span>
|
||||
<Tooltip
|
||||
id="error-tooltip"
|
||||
placement="top"
|
||||
title={this.props.danger}
|
||||
>
|
||||
<Icons.ErrorSolid
|
||||
iconColor={theme.colors.error.base}
|
||||
iconSize="s"
|
||||
/>
|
||||
</Tooltip>{' '}
|
||||
</span>
|
||||
)}
|
||||
{this.props.validationErrors.length > 0 && (
|
||||
<span>
|
||||
<Tooltip
|
||||
id="error-tooltip"
|
||||
placement="top"
|
||||
title={this.props.validationErrors.join(' ')}
|
||||
>
|
||||
<Icons.ErrorSolid
|
||||
iconColor={theme.colors.error.base}
|
||||
iconSize="s"
|
||||
/>
|
||||
</Tooltip>{' '}
|
||||
</span>
|
||||
)}
|
||||
{this.renderOptionalIcons()}
|
||||
</FormLabel>
|
||||
</div>
|
||||
{this.props.rightNode && (
|
||||
<div className="pull-right">{this.props.rightNode}</div>
|
||||
)}
|
||||
<div className="clearfix" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ControlHeader.propTypes = propTypes;
|
||||
ControlHeader.defaultProps = defaultProps;
|
||||
|
||||
export default withTheme(ControlHeader);
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
/**
|
||||
* 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 ControlHeader, { ControlHeaderProps } from './ControlHeader';
|
||||
|
||||
export default {
|
||||
title: 'ControlHeader',
|
||||
component: ControlHeader,
|
||||
};
|
||||
|
||||
const options: {
|
||||
[key: string]: ControlHeaderProps;
|
||||
} = {
|
||||
label: {
|
||||
label: 'Control label',
|
||||
},
|
||||
warning: {
|
||||
label: 'Control warning',
|
||||
warning: 'Example of warning message',
|
||||
},
|
||||
error: {
|
||||
label: 'Control error',
|
||||
validationErrors: ['Something is wrong'],
|
||||
},
|
||||
};
|
||||
|
||||
export const ControlHeaderGallery = () => (
|
||||
<>
|
||||
{Object.entries(options).map(([name, props]) => (
|
||||
<>
|
||||
<h4>{name}</h4>
|
||||
<ControlHeader {...props} />
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export const InteractiveControlHeader = (props: ControlHeaderProps) => (
|
||||
<ControlHeader {...props} />
|
||||
);
|
||||
|
||||
InteractiveControlHeader.args = {
|
||||
label: 'example label',
|
||||
description: 'example description',
|
||||
warning: 'example warning',
|
||||
renderTrigger: false,
|
||||
hovered: false,
|
||||
};
|
||||
|
||||
InteractiveControlHeader.argTypes = {
|
||||
tooltipOnClick: { action: 'tooltipOnClick' },
|
||||
onClick: { action: 'onClick' },
|
||||
};
|
||||
|
||||
InteractiveControlHeader.story = {
|
||||
parameters: {
|
||||
knobs: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
/**
|
||||
* 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, { FC, ReactNode } from 'react';
|
||||
import { t, css, useTheme } from '@superset-ui/core';
|
||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { FormLabel } from 'src/components/Form';
|
||||
import Icons from 'src/components/Icons';
|
||||
|
||||
type ValidationError = string;
|
||||
|
||||
export type ControlHeaderProps = {
|
||||
name?: string;
|
||||
label?: ReactNode;
|
||||
description?: ReactNode;
|
||||
validationErrors?: ValidationError[];
|
||||
renderTrigger?: boolean;
|
||||
rightNode?: ReactNode;
|
||||
leftNode?: ReactNode;
|
||||
onClick?: () => void;
|
||||
hovered?: boolean;
|
||||
tooltipOnClick?: () => void;
|
||||
warning?: string;
|
||||
danger?: string;
|
||||
};
|
||||
|
||||
const ControlHeader: FC<ControlHeaderProps> = ({
|
||||
name,
|
||||
label,
|
||||
description,
|
||||
validationErrors = [],
|
||||
renderTrigger = false,
|
||||
rightNode,
|
||||
leftNode,
|
||||
onClick,
|
||||
hovered = false,
|
||||
tooltipOnClick = () => {},
|
||||
warning,
|
||||
danger,
|
||||
}) => {
|
||||
const { gridUnit, colors } = useTheme();
|
||||
|
||||
if (!label) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const renderOptionalIcons = () => {
|
||||
if (!hovered) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
css={() => css`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
padding-left: ${gridUnit}px;
|
||||
transform: translate(100%, -50%);
|
||||
white-space: nowrap;
|
||||
`}
|
||||
>
|
||||
{description && (
|
||||
<span>
|
||||
<InfoTooltipWithTrigger
|
||||
label={t('description')}
|
||||
tooltip={description}
|
||||
placement="top"
|
||||
onClick={tooltipOnClick}
|
||||
/>{' '}
|
||||
</span>
|
||||
)}
|
||||
{renderTrigger && (
|
||||
<span>
|
||||
<InfoTooltipWithTrigger
|
||||
label={t('bolt')}
|
||||
tooltip={t('Changing this control takes effect instantly')}
|
||||
placement="top"
|
||||
icon="bolt"
|
||||
/>{' '}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const labelClass = validationErrors?.length > 0 ? 'text-danger' : '';
|
||||
|
||||
return (
|
||||
<div className="ControlHeader" data-test={`${name}-header`}>
|
||||
<div className="pull-left">
|
||||
<FormLabel
|
||||
css={{
|
||||
marginBottom: 0,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{leftNode && <span>{leftNode}</span>}
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onClick}
|
||||
className={labelClass}
|
||||
style={{ cursor: onClick ? 'pointer' : '' }}
|
||||
>
|
||||
{label}
|
||||
</span>{' '}
|
||||
{warning && (
|
||||
<span>
|
||||
<Tooltip id="error-tooltip" placement="top" title={warning}>
|
||||
<Icons.AlertSolid iconColor={colors.alert.base} iconSize="s" />
|
||||
</Tooltip>{' '}
|
||||
</span>
|
||||
)}
|
||||
{danger && (
|
||||
<span>
|
||||
<Tooltip id="error-tooltip" placement="top" title={danger}>
|
||||
<Icons.ErrorSolid iconColor={colors.error.base} iconSize="s" />
|
||||
</Tooltip>{' '}
|
||||
</span>
|
||||
)}
|
||||
{validationErrors?.length > 0 && (
|
||||
<span>
|
||||
<Tooltip
|
||||
id="error-tooltip"
|
||||
placement="top"
|
||||
title={validationErrors?.join(' ')}
|
||||
>
|
||||
<Icons.ErrorSolid iconColor={colors.error.base} iconSize="s" />
|
||||
</Tooltip>{' '}
|
||||
</span>
|
||||
)}
|
||||
{renderOptionalIcons()}
|
||||
</FormLabel>
|
||||
</div>
|
||||
{rightNode && <div className="pull-right">{rightNode}</div>}
|
||||
<div className="clearfix" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ControlHeader;
|
||||
Loading…
Reference in New Issue