pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: Select component refactoring - DndColumnSelectControl - Iteration 5 (#16440)

Browse Source 
* Refactor Select

* Update ariaLabel

* Reconcile with latest Select changes

* Fix lint

* Enhance labels
This commit is contained in:
Geido 2021-09-27 17:27:14 +03:00 committed by GitHub
parent 913df18075
commit e40ff3ada6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
View File

@ -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>