mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix(explore): checkbox form control formatting (#14701)
* fix(explore): add inline option for the field that only gets used in one place * typescriptify * unnecessary component wrapping
This commit is contained in:
parent
4160e45398
commit
152b0d0575
@ -1,93 +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 { Tooltip } from 'src/components/Tooltip';
|
|
||||||
import { FormItem, FormLabel } from 'src/components/Form';
|
|
||||||
import './crud.less';
|
|
||||||
|
|
||||||
const propTypes = {
|
|
||||||
value: PropTypes.any,
|
|
||||||
label: PropTypes.string.isRequired,
|
|
||||||
description: PropTypes.node,
|
|
||||||
fieldKey: PropTypes.string.isRequired,
|
|
||||||
control: PropTypes.node.isRequired,
|
|
||||||
onChange: PropTypes.func,
|
|
||||||
compact: PropTypes.bool,
|
|
||||||
};
|
|
||||||
const defaultProps = {
|
|
||||||
onChange: () => {},
|
|
||||||
compact: false,
|
|
||||||
description: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class Field extends React.PureComponent {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.onChange = this.onChange.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
onChange(newValue) {
|
|
||||||
this.props.onChange(this.props.fieldKey, newValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
compact,
|
|
||||||
value,
|
|
||||||
label,
|
|
||||||
control,
|
|
||||||
description,
|
|
||||||
fieldKey,
|
|
||||||
} = this.props;
|
|
||||||
const hookedControl = React.cloneElement(control, {
|
|
||||||
value,
|
|
||||||
onChange: this.onChange,
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<FormItem
|
|
||||||
controlId={fieldKey}
|
|
||||||
label={
|
|
||||||
<FormLabel className="m-r-5">
|
|
||||||
{label || fieldKey}
|
|
||||||
{compact && description && (
|
|
||||||
<Tooltip id="field-descr" placement="right" title={description}>
|
|
||||||
<i className="fa fa-info-circle m-l-5" />
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</FormLabel>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{hookedControl}
|
|
||||||
{!compact && description && (
|
|
||||||
<div
|
|
||||||
css={theme => ({
|
|
||||||
color: theme.colors.grayscale.base,
|
|
||||||
marginTop: theme.gridUnit,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{description}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</FormItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Field.propTypes = propTypes;
|
|
||||||
Field.defaultProps = defaultProps;
|
|
91
superset-frontend/src/CRUD/Field.tsx
Normal file
91
superset-frontend/src/CRUD/Field.tsx
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
/**
|
||||||
|
* 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, { useCallback } from 'react';
|
||||||
|
import { css, SupersetTheme } from '@superset-ui/core';
|
||||||
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
|
import { FormItem, FormLabel } from 'src/components/Form';
|
||||||
|
import './crud.less';
|
||||||
|
|
||||||
|
const formItemInlineCss = css`
|
||||||
|
.ant-form-item-control-input-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
interface FieldProps<V> {
|
||||||
|
fieldKey: string;
|
||||||
|
value?: V;
|
||||||
|
label: string;
|
||||||
|
description?: React.ReactNode;
|
||||||
|
control: React.ReactElement;
|
||||||
|
onChange: (fieldKey: string, newValue: V) => void;
|
||||||
|
compact: boolean;
|
||||||
|
inline: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Field<V>({
|
||||||
|
fieldKey,
|
||||||
|
value,
|
||||||
|
label,
|
||||||
|
description,
|
||||||
|
control,
|
||||||
|
onChange,
|
||||||
|
compact,
|
||||||
|
inline,
|
||||||
|
}: FieldProps<V>) {
|
||||||
|
const onControlChange = useCallback(
|
||||||
|
newValue => {
|
||||||
|
onChange(fieldKey, newValue);
|
||||||
|
},
|
||||||
|
[onChange, fieldKey],
|
||||||
|
);
|
||||||
|
|
||||||
|
const hookedControl = React.cloneElement(control, {
|
||||||
|
value,
|
||||||
|
onChange: onControlChange,
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<FormItem
|
||||||
|
label={
|
||||||
|
<FormLabel className="m-r-5">
|
||||||
|
{label || fieldKey}
|
||||||
|
{compact && description && (
|
||||||
|
<Tooltip id="field-descr" placement="right" title={description}>
|
||||||
|
<i className="fa fa-info-circle m-l-5" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</FormLabel>
|
||||||
|
}
|
||||||
|
css={inline && formItemInlineCss}
|
||||||
|
>
|
||||||
|
{hookedControl}
|
||||||
|
{!compact && description && (
|
||||||
|
<div
|
||||||
|
css={(theme: SupersetTheme) => ({
|
||||||
|
color: theme.colors.grayscale.base,
|
||||||
|
[inline ? 'marginLeft' : 'marginTop']: theme.gridUnit,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}
|
@ -16,8 +16,7 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import Form from 'antd/lib/form';
|
||||||
import Form, { FormItemProps } from 'antd/lib/form';
|
|
||||||
import { styled } from '@superset-ui/core';
|
import { styled } from '@superset-ui/core';
|
||||||
|
|
||||||
const StyledItem = styled(Form.Item)`
|
const StyledItem = styled(Form.Item)`
|
||||||
@ -45,6 +44,4 @@ const StyledItem = styled(Form.Item)`
|
|||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default function FormItem(props: FormItemProps) {
|
export default StyledItem;
|
||||||
return <StyledItem {...props} />;
|
|
||||||
}
|
|
||||||
|
@ -548,6 +548,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||||||
control={<TextControl controlId="default_endpoint" />}
|
control={<TextControl controlId="default_endpoint" />}
|
||||||
/>
|
/>
|
||||||
<Field
|
<Field
|
||||||
|
inline
|
||||||
fieldKey="filter_select_enabled"
|
fieldKey="filter_select_enabled"
|
||||||
label={t('Autocomplete filters')}
|
label={t('Autocomplete filters')}
|
||||||
description={t('Whether to populate autocomplete filters options')}
|
description={t('Whether to populate autocomplete filters options')}
|
||||||
|
Loading…
Reference in New Issue
Block a user