mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
[explore-v2] control panel fixes (#1529)
* make fieldset conditions more clear * make label required * use render* pattern * use slugify util for turning labels into ids * use field rather than html * don't need panel-title class here
This commit is contained in:
parent
ae46561648
commit
4156ad5a30
@ -1,5 +1,6 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
|
||||
import { slugify } from '../modules/utils';
|
||||
|
||||
const propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
@ -10,7 +11,7 @@ export default function InfoTooltipWithTrigger({ label, tooltip }) {
|
||||
return (
|
||||
<OverlayTrigger
|
||||
placement="right"
|
||||
overlay={<Tooltip id={`${label}-tooltip`}>{tooltip}</Tooltip>}
|
||||
overlay={<Tooltip id={`${slugify(label)}-tooltip`}>{tooltip}</Tooltip>}
|
||||
>
|
||||
<i className="fa fa-question-circle-o" />
|
||||
</OverlayTrigger>
|
||||
|
@ -3,12 +3,11 @@ import { ControlLabel } from 'react-bootstrap';
|
||||
import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
|
||||
|
||||
const propTypes = {
|
||||
label: PropTypes.string,
|
||||
label: PropTypes.string.isRequired,
|
||||
description: PropTypes.string,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
label: null,
|
||||
description: null,
|
||||
};
|
||||
|
||||
|
@ -16,12 +16,12 @@ const defaultProps = {
|
||||
};
|
||||
|
||||
export default class ControlPanelSection extends React.Component {
|
||||
header() {
|
||||
renderHeader() {
|
||||
const { label, tooltip } = this.props;
|
||||
let header;
|
||||
if (label) {
|
||||
header = (
|
||||
<div className="panel-title">
|
||||
<div>
|
||||
{label}
|
||||
{tooltip && <InfoTooltipWithTrigger label={label} tooltip={tooltip} />}
|
||||
</div>
|
||||
@ -32,7 +32,7 @@ export default class ControlPanelSection extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Panel header={this.header()}>
|
||||
<Panel header={this.renderHeader()}>
|
||||
{this.props.children}
|
||||
</Panel>
|
||||
);
|
||||
|
@ -40,22 +40,25 @@ export default class FieldSet extends React.Component {
|
||||
|
||||
render() {
|
||||
const type = this.props.type;
|
||||
let html;
|
||||
const selectTypes = [
|
||||
'SelectField',
|
||||
'SelectCustomMultiField',
|
||||
'SelectMultipleSortableField',
|
||||
'FreeFormSelectField',
|
||||
];
|
||||
let field;
|
||||
|
||||
if (type === 'CheckboxField') {
|
||||
html = this.renderCheckBoxField();
|
||||
} else if (type === 'SelectField' ||
|
||||
type === 'SelectCustomMultiField' ||
|
||||
type === 'SelectMultipleSortableField' ||
|
||||
type === 'FreeFormSelectField') {
|
||||
html = this.renderSelectField();
|
||||
} else if (type === 'TextField' || type === 'IntegerField') {
|
||||
html = this.renderTextField();
|
||||
field = this.renderCheckBoxField();
|
||||
} else if (selectTypes.includes(type)) {
|
||||
field = this.renderSelectField();
|
||||
} else if (['TextField', 'IntegerField'].includes(type)) {
|
||||
field = this.renderTextField();
|
||||
} else if (type === 'TextAreaField') {
|
||||
this.renderTextAreaField();
|
||||
field = this.renderTextAreaField();
|
||||
}
|
||||
|
||||
return html;
|
||||
return field;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { FormGroup, FormControl } from 'react-bootstrap';
|
||||
import ControlLabelWithTooltip from './ControlLabelWithTooltip';
|
||||
import { slugify } from '../../modules/utils';
|
||||
|
||||
const propTypes = {
|
||||
label: PropTypes.string,
|
||||
@ -14,7 +15,7 @@ const defaultProps = {
|
||||
|
||||
export default function SelectField({ label, description }) {
|
||||
return (
|
||||
<FormGroup controlId={`formControlsSelect-${label}`}>
|
||||
<FormGroup controlId={`formControlsSelect-${slugify(label)}`}>
|
||||
<ControlLabelWithTooltip label={label} description={description} />
|
||||
<FormControl componentClass="select" placeholder="select">
|
||||
<option value="select">select</option>
|
||||
|
@ -142,3 +142,13 @@ export function formatSelectOptions(options) {
|
||||
[opt, opt]
|
||||
);
|
||||
}
|
||||
|
||||
export function slugify(string) {
|
||||
// slugify('My Neat Label! '); returns 'my-neat-label'
|
||||
return string
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[\s\W-]+/g, '-') // replace spaces, non-word chars, w/ a single dash (-)
|
||||
.replace(/-$/, ''); // remove last floating dash
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user