QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-20 00:24:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(explore): DndColumnSelect sometimes not working with multi: false (#15731)

Browse Source 
* fix(explore): DndColumnSelect not working with multi: false

* fix values not synchronized when dataset changes
This commit is contained in:
Kamil Gabryjelski
2021-07-16 14:20:13 +02:00
committed by GitHub
parent 0721f54580
commit 66c28d653f
2 changed files with 40 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
View File

@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { useState } from 'react';
import React, { useEffect } from 'react';
import { tn } from '@superset-ui/core';
import { ColumnMeta } from '@superset-ui/chart-controls';
import { isEmpty } from 'lodash';
@@ -29,19 +29,41 @@ import { DndItemType } from 'src/explore/components/DndItemType';
import { StyledColumnOption } from 'src/explore/components/optionRenderers';
export const DndColumnSelect = (props: LabelProps) => {
const { value, options, multi = true } = props;
const optionSelector = new OptionSelector(options, value);
const [values, setValues] = useState<ColumnMeta[]>(optionSelector.values);
const { value, options, multi = true, onChange } = props;
const optionSelector = new OptionSelector(options, multi, value);
// synchronize values in case of dataset changes
useEffect(() => {
const optionSelectorValues = optionSelector.getValues();
if (typeof value !== typeof optionSelectorValues) {
onChange(optionSelectorValues);
}
if (
typeof value === 'string' &&
typeof optionSelectorValues === 'string' &&
value !== optionSelectorValues
) {
onChange(optionSelectorValues);
}
if (
Array.isArray(optionSelectorValues) &&
Array.isArray(value) &&
(optionSelectorValues.length !== value.length ||
optionSelectorValues.every((val, index) => val === value[index]))
) {
onChange(optionSelectorValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(value), JSON.stringify(optionSelector.getValues())]);
const onDrop = (item: DatasourcePanelDndItem) => {
const column = item.value as ColumnMeta;
if (!optionSelector.isArray && !isEmpty(optionSelector.values)) {
if (!optionSelector.multi && !isEmpty(optionSelector.values)) {
optionSelector.replace(0, column.column_name);
} else {
optionSelector.add(column.column_name);
}
setValues(optionSelector.values);
props.onChange(optionSelector.getValues());
onChange(optionSelector.getValues());
};
const canDrop = (item: DatasourcePanelDndItem) =>
@@ -50,18 +72,16 @@ export const DndColumnSelect = (props: LabelProps) => {
const onClickClose = (index: number) => {
optionSelector.del(index);
setValues(optionSelector.values);
props.onChange(optionSelector.getValues());
onChange(optionSelector.getValues());
};
const onShiftOptions = (dragIndex: number, hoverIndex: number) => {
optionSelector.swap(dragIndex, hoverIndex);
setValues(optionSelector.values);
props.onChange(optionSelector.getValues());
onChange(optionSelector.getValues());
};
const valuesRenderer = () =>
values.map((column, idx) => (
optionSelector.values.map((column, idx) => (
<OptionWrapper
key={idx}
index={idx}