mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
chore: Select component refactoring - DndColumnSelectControl - Iteration 5 (#16440)
* Refactor Select * Update ariaLabel * Reconcile with latest Select changes * Fix lint * Enhance labels
This commit is contained in:
parent
913df18075
commit
e40ff3ada6
@ -20,7 +20,7 @@
|
|||||||
import React, { useCallback, useMemo, useState } from 'react';
|
import React, { useCallback, useMemo, useState } from 'react';
|
||||||
import Tabs from 'src/components/Tabs';
|
import Tabs from 'src/components/Tabs';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import { NativeSelect as Select } from 'src/components/Select';
|
import { Select } from 'src/components';
|
||||||
import { t, styled } from '@superset-ui/core';
|
import { t, styled } from '@superset-ui/core';
|
||||||
|
|
||||||
import { Form, FormItem } from 'src/components/Form';
|
import { Form, FormItem } from 'src/components/Form';
|
||||||
@ -126,17 +126,8 @@ const ColumnSelectPopover = ({
|
|||||||
selectedCalculatedColumn?.column_name !==
|
selectedCalculatedColumn?.column_name !==
|
||||||
initialCalculatedColumn?.column_name ||
|
initialCalculatedColumn?.column_name ||
|
||||||
selectedSimpleColumn?.column_name !== initialSimpleColumn?.column_name;
|
selectedSimpleColumn?.column_name !== initialSimpleColumn?.column_name;
|
||||||
|
const savedExpressionsLabel = t('Saved expressions');
|
||||||
const filterOption = useCallback(
|
const simpleColumnsLabel = t('Column');
|
||||||
(input, option) =>
|
|
||||||
option?.filterBy.toLowerCase().indexOf(input.toLowerCase()) >= 0,
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
|
|
||||||
const getPopupContainer = useCallback(
|
|
||||||
(triggerNode: any) => triggerNode.parentNode,
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form layout="vertical" id="metrics-edit-popover">
|
<Form layout="vertical" id="metrics-edit-popover">
|
||||||
@ -147,56 +138,44 @@ const ColumnSelectPopover = ({
|
|||||||
allowOverflow
|
allowOverflow
|
||||||
>
|
>
|
||||||
<Tabs.TabPane key="saved" tab={t('Saved')}>
|
<Tabs.TabPane key="saved" tab={t('Saved')}>
|
||||||
<FormItem label={t('Saved expressions')}>
|
<FormItem label={savedExpressionsLabel}>
|
||||||
<StyledSelect
|
<StyledSelect
|
||||||
|
ariaLabel={savedExpressionsLabel}
|
||||||
value={selectedCalculatedColumn?.column_name}
|
value={selectedCalculatedColumn?.column_name}
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
onChange={onCalculatedColumnChange}
|
onChange={onCalculatedColumnChange}
|
||||||
allowClear
|
allowClear
|
||||||
showSearch
|
|
||||||
autoFocus={!selectedCalculatedColumn}
|
autoFocus={!selectedCalculatedColumn}
|
||||||
filterOption={filterOption}
|
|
||||||
placeholder={t('%s column(s)', calculatedColumns.length)}
|
placeholder={t('%s column(s)', calculatedColumns.length)}
|
||||||
>
|
options={calculatedColumns.map(calculatedColumn => ({
|
||||||
{calculatedColumns.map(calculatedColumn => (
|
value: calculatedColumn.column_name,
|
||||||
<Select.Option
|
label:
|
||||||
value={calculatedColumn.column_name}
|
calculatedColumn.verbose_name || calculatedColumn.column_name,
|
||||||
filterBy={
|
customLabel: (
|
||||||
calculatedColumn.verbose_name ||
|
|
||||||
calculatedColumn.column_name
|
|
||||||
}
|
|
||||||
key={calculatedColumn.column_name}
|
|
||||||
>
|
|
||||||
<StyledColumnOption column={calculatedColumn} showType />
|
<StyledColumnOption column={calculatedColumn} showType />
|
||||||
</Select.Option>
|
),
|
||||||
))}
|
key: calculatedColumn.column_name,
|
||||||
</StyledSelect>
|
}))}
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
<Tabs.TabPane key="simple" tab={t('Simple')}>
|
<Tabs.TabPane key="simple" tab={t('Simple')}>
|
||||||
<FormItem label={t('Column')}>
|
<FormItem label={simpleColumnsLabel}>
|
||||||
<Select
|
<Select
|
||||||
|
ariaLabel={simpleColumnsLabel}
|
||||||
value={selectedSimpleColumn?.column_name}
|
value={selectedSimpleColumn?.column_name}
|
||||||
getPopupContainer={getPopupContainer}
|
|
||||||
onChange={onSimpleColumnChange}
|
onChange={onSimpleColumnChange}
|
||||||
allowClear
|
allowClear
|
||||||
showSearch
|
|
||||||
autoFocus={!selectedSimpleColumn}
|
autoFocus={!selectedSimpleColumn}
|
||||||
filterOption={filterOption}
|
|
||||||
placeholder={t('%s column(s)', simpleColumns.length)}
|
placeholder={t('%s column(s)', simpleColumns.length)}
|
||||||
>
|
options={simpleColumns.map(simpleColumn => ({
|
||||||
{simpleColumns.map(simpleColumn => (
|
value: simpleColumn.column_name,
|
||||||
<Select.Option
|
label: simpleColumn.verbose_name || simpleColumn.column_name,
|
||||||
value={simpleColumn.column_name}
|
customLabel: (
|
||||||
filterBy={
|
|
||||||
simpleColumn.verbose_name || simpleColumn.column_name
|
|
||||||
}
|
|
||||||
key={simpleColumn.column_name}
|
|
||||||
>
|
|
||||||
<StyledColumnOption column={simpleColumn} showType />
|
<StyledColumnOption column={simpleColumn} showType />
|
||||||
</Select.Option>
|
),
|
||||||
))}
|
key: simpleColumn.column_name,
|
||||||
</Select>
|
}))}
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Tabs.TabPane>
|
</Tabs.TabPane>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
Loading…
Reference in New Issue
Block a user