-
Notifications
You must be signed in to change notification settings - Fork 302
/
DatasetFields.tsx
83 lines (76 loc) · 3.46 KB
/
DatasetFields.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React from 'react';
import { NestContainer } from '../components/container'
import { observer } from 'mobx-react-lite';
import {
Droppable,
Draggable,
} from "react-beautiful-dnd";
import { DraggableFieldState } from './fieldsContext';
import { useGlobalStore } from '../store';
import DataTypeIcon from '../components/dataTypeIcon';
import { IViewField } from '../interfaces';
const FIELDS_KEY: keyof DraggableFieldState = 'fields';
const DatasetFields: React.FC = props => {
const { vizStore } = useGlobalStore();
const { draggableFieldState } = vizStore;
const { fields } = draggableFieldState;
const dimensions: IViewField[] = []; // = draggableFieldState[FIELDS_KEY].filter(f => f.type === 'D');
const measures: IViewField[] = []; // = draggableFieldState[FIELDS_KEY].filter(f => f.type === 'M');
const dimOriginIndices: number[] = [];
const meaOriginIndices: number[] = [];
for (let i = 0; i < fields.length; i++) {
if (fields[i].type === 'D') {
dimensions.push(fields[i]);
dimOriginIndices.push(i)
} else {
measures.push(fields[i])
meaOriginIndices.push(i);
}
}
return <NestContainer style={{ minHeight: '680px', overflowY: 'auto' }}>
<h4 className="text-xs mb-2">字段列表</h4>
<Droppable droppableId={FIELDS_KEY} direction="vertical">
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
>
{provided.placeholder}
{dimensions.map((f, index) => (
<Draggable key={f.id} draggableId={f.id} index={dimOriginIndices[index]}>
{(provided, snapshot) => {
return (
<div
className="pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<DataTypeIcon dataType="string" /> {f.name}
</div>
);
}}
</Draggable>
))}
{measures.map((f, index) => (
<Draggable key={f.id} draggableId={f.id} index={meaOriginIndices[index]}>
{(provided, snapshot) => {
return (
<div
className="pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<DataTypeIcon dataType="number" /> {f.name}
</div>
);
}}
</Draggable>
))}
</div>
)}
</Droppable>
</NestContainer>
}
export default observer(DatasetFields);