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:
David Aaron Suddjian
GitHub
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;
|
||||
|
|
@ -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
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import Form, { FormItemProps } from 'antd/lib/form';
|
||||
import Form from 'antd/lib/form';
|
||||
import { styled } from '@superset-ui/core';
|
||||
|
||||
const StyledItem = styled(Form.Item)`
|
||||
|
|
@ -45,6 +44,4 @@ const StyledItem = styled(Form.Item)`
|
|||
`}
|
||||
`;
|
||||
|
||||
export default function FormItem(props: FormItemProps) {
|
||||
return <StyledItem {...props} />;
|
||||
}
|
||||
export default StyledItem;
|
||||
|
|
|
|||
|
|
@ -548,6 +548,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||
control={<TextControl controlId="default_endpoint" />}
|
||||
/>
|
||||
<Field
|
||||
inline
|
||||
fieldKey="filter_select_enabled"
|
||||
label={t('Autocomplete filters')}
|
||||
description={t('Whether to populate autocomplete filters options')}
|
||||
|
|
|
|||
Loading…
Reference in New Issue