feat(explore): UX improvements for drag'n'dropping time column (#15740)

This commit is contained in:
Kamil Gabryjelski
2021-07-18 19:52:34 +02:00
committed by GitHub
parent e9383e6d00
commit 4234031cba
6 changed files with 65 additions and 25 deletions

View File

@@ -29,7 +29,14 @@ import { DndItemType } from 'src/explore/components/DndItemType';
import { StyledColumnOption } from 'src/explore/components/optionRenderers';
export const DndColumnSelect = (props: LabelProps) => {
const { value, options, multi = true, onChange } = props;
const {
value,
options,
multi = true,
onChange,
canDelete = true,
ghostButtonText,
} = props;
const optionSelector = new OptionSelector(options, multi, value);
// synchronize values in case of dataset changes
@@ -66,9 +73,12 @@ export const DndColumnSelect = (props: LabelProps) => {
onChange(optionSelector.getValues());
};
const canDrop = (item: DatasourcePanelDndItem) =>
(multi || optionSelector.values.length === 0) &&
!optionSelector.has((item.value as ColumnMeta).column_name);
const canDrop = (item: DatasourcePanelDndItem) => {
const columnName = (item.value as ColumnMeta).column_name;
return (
columnName in optionSelector.options && !optionSelector.has(columnName)
);
};
const onClickClose = (index: number) => {
optionSelector.del(index);
@@ -88,6 +98,7 @@ export const DndColumnSelect = (props: LabelProps) => {
clickClose={onClickClose}
onShiftOptions={onShiftOptions}
type={DndItemType.ColumnOption}
canDelete={canDelete}
>
<StyledColumnOption column={column} showType />
</OptionWrapper>
@@ -100,7 +111,9 @@ export const DndColumnSelect = (props: LabelProps) => {
valuesRenderer={valuesRenderer}
accept={DndItemType.Column}
displayGhostButton={multi || optionSelector.values.length === 0}
ghostButtonText={tn('Drop column', 'Drop columns', multi ? 2 : 1)}
ghostButtonText={
ghostButtonText || tn('Drop column', 'Drop columns', multi ? 2 : 1)
}
{...props}
/>
);