mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -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 React, { PropTypes } from 'react';
|
||||||
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
|
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
|
||||||
|
import { slugify } from '../modules/utils';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
@ -10,7 +11,7 @@ export default function InfoTooltipWithTrigger({ label, tooltip }) {
|
|||||||
return (
|
return (
|
||||||
<OverlayTrigger
|
<OverlayTrigger
|
||||||
placement="right"
|
placement="right"
|
||||||
overlay={<Tooltip id={`${label}-tooltip`}>{tooltip}</Tooltip>}
|
overlay={<Tooltip id={`${slugify(label)}-tooltip`}>{tooltip}</Tooltip>}
|
||||||
>
|
>
|
||||||
<i className="fa fa-question-circle-o" />
|
<i className="fa fa-question-circle-o" />
|
||||||
</OverlayTrigger>
|
</OverlayTrigger>
|
||||||
|
@ -3,12 +3,11 @@ import { ControlLabel } from 'react-bootstrap';
|
|||||||
import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
|
import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
label: PropTypes.string,
|
label: PropTypes.string.isRequired,
|
||||||
description: PropTypes.string,
|
description: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
label: null,
|
|
||||||
description: null,
|
description: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -16,12 +16,12 @@ const defaultProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default class ControlPanelSection extends React.Component {
|
export default class ControlPanelSection extends React.Component {
|
||||||
header() {
|
renderHeader() {
|
||||||
const { label, tooltip } = this.props;
|
const { label, tooltip } = this.props;
|
||||||
let header;
|
let header;
|
||||||
if (label) {
|
if (label) {
|
||||||
header = (
|
header = (
|
||||||
<div className="panel-title">
|
<div>
|
||||||
{label}
|
{label}
|
||||||
{tooltip && <InfoTooltipWithTrigger label={label} tooltip={tooltip} />}
|
{tooltip && <InfoTooltipWithTrigger label={label} tooltip={tooltip} />}
|
||||||
</div>
|
</div>
|
||||||
@ -32,7 +32,7 @@ export default class ControlPanelSection extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Panel header={this.header()}>
|
<Panel header={this.renderHeader()}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</Panel>
|
</Panel>
|
||||||
);
|
);
|
||||||
|
@ -40,22 +40,25 @@ export default class FieldSet extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const type = this.props.type;
|
const type = this.props.type;
|
||||||
let html;
|
const selectTypes = [
|
||||||
|
'SelectField',
|
||||||
|
'SelectCustomMultiField',
|
||||||
|
'SelectMultipleSortableField',
|
||||||
|
'FreeFormSelectField',
|
||||||
|
];
|
||||||
|
let field;
|
||||||
|
|
||||||
if (type === 'CheckboxField') {
|
if (type === 'CheckboxField') {
|
||||||
html = this.renderCheckBoxField();
|
field = this.renderCheckBoxField();
|
||||||
} else if (type === 'SelectField' ||
|
} else if (selectTypes.includes(type)) {
|
||||||
type === 'SelectCustomMultiField' ||
|
field = this.renderSelectField();
|
||||||
type === 'SelectMultipleSortableField' ||
|
} else if (['TextField', 'IntegerField'].includes(type)) {
|
||||||
type === 'FreeFormSelectField') {
|
field = this.renderTextField();
|
||||||
html = this.renderSelectField();
|
|
||||||
} else if (type === 'TextField' || type === 'IntegerField') {
|
|
||||||
html = this.renderTextField();
|
|
||||||
} else if (type === 'TextAreaField') {
|
} else if (type === 'TextAreaField') {
|
||||||
this.renderTextAreaField();
|
field = this.renderTextAreaField();
|
||||||
}
|
}
|
||||||
|
|
||||||
return html;
|
return field;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import { FormGroup, FormControl } from 'react-bootstrap';
|
import { FormGroup, FormControl } from 'react-bootstrap';
|
||||||
import ControlLabelWithTooltip from './ControlLabelWithTooltip';
|
import ControlLabelWithTooltip from './ControlLabelWithTooltip';
|
||||||
|
import { slugify } from '../../modules/utils';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
label: PropTypes.string,
|
label: PropTypes.string,
|
||||||
@ -14,7 +15,7 @@ const defaultProps = {
|
|||||||
|
|
||||||
export default function SelectField({ label, description }) {
|
export default function SelectField({ label, description }) {
|
||||||
return (
|
return (
|
||||||
<FormGroup controlId={`formControlsSelect-${label}`}>
|
<FormGroup controlId={`formControlsSelect-${slugify(label)}`}>
|
||||||
<ControlLabelWithTooltip label={label} description={description} />
|
<ControlLabelWithTooltip label={label} description={description} />
|
||||||
<FormControl componentClass="select" placeholder="select">
|
<FormControl componentClass="select" placeholder="select">
|
||||||
<option value="select">select</option>
|
<option value="select">select</option>
|
||||||
|
@ -142,3 +142,13 @@ export function formatSelectOptions(options) {
|
|||||||
[opt, opt]
|
[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