chore: customize adhoc filter icon and fix creatable label (#14896)

* chore: customize adhoc filter icon and fix creatable label

* use common icon component

* simplify code
This commit is contained in:
Ville Brofeldt
2021-05-31 09:45:12 +03:00
committed by GitHub
parent e43112c5f9
commit 66282c3313
2 changed files with 10 additions and 6 deletions

View File

@@ -39,6 +39,7 @@ import AdhocFilter, {
CLAUSES,
} from 'src/explore/components/controls/FilterControl/AdhocFilter';
import columnType from 'src/explore/components/controls/FilterControl/columnType';
import Icons from 'src/components/Icons';
const SelectWithLabel = styled(Select)`
.ant-select-selector {
@@ -368,6 +369,8 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
labelText: comparator?.length > 0 && this.createSuggestionsPlaceholder(),
autoFocus: focusComparator,
};
const Icon =
operator === 'NOT IN' ? Icons.StopOutlined : Icons.CheckOutlined;
return (
<>
@@ -417,6 +420,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
onSearch={val => this.setState({ currentSuggestionSearch: val })}
onSelect={this.clearSuggestionSearch}
onBlur={this.clearSuggestionSearch}
menuItemSelectedIcon={<Icon iconSize="m" />}
>
{this.state.suggestions.map(suggestion => (
<Select.Option value={suggestion} key={suggestion}>
@@ -430,7 +434,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
suggestion => suggestion === currentSuggestionSearch,
) && (
<Select.Option value={currentSuggestionSearch}>
{currentSuggestionSearch}
{`${t('Create "%s"', currentSuggestionSearch)}`}
</Select.Option>
)}
</SelectWithLabel>

View File

@@ -38,7 +38,7 @@ import React, {
import { Select } from 'src/common/components';
import debounce from 'lodash/debounce';
import { SLOW_DEBOUNCE } from 'src/constants';
import { CheckOutlined, StopOutlined } from '@ant-design/icons';
import Icons from 'src/components/Icons';
import { PluginFilterSelectProps, SelectValue } from './types';
import { StyledSelect, Styles } from '../common';
import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
@@ -244,6 +244,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
data.length === 0
? t('No data')
: tn('%s option', '%s options', data.length, data.length);
const Icon = inverseSelection ? Icons.StopOutlined : Icons.CheckOutlined;
return (
<Styles height={height} width={width}>
<StyledSelect
@@ -264,9 +266,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
ref={inputRef}
loading={isRefreshing}
maxTagCount={5}
menuItemSelectedIcon={
inverseSelection ? <StopOutlined /> : <CheckOutlined />
}
menuItemSelectedIcon={<Icon iconSize="m" />}
>
{sortedData.map(row => {
const [value] = groupby.map(col => row[col]);
@@ -282,7 +282,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
suggestion => suggestion === currentSuggestionSearch,
) && (
<Option value={currentSuggestionSearch}>
{currentSuggestionSearch}
{`${t('Create "%s"', currentSuggestionSearch)}`}
</Option>
)}
</StyledSelect>