Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate Table visualization to React Part 2: Editor #4175

Merged
merged 16 commits into from
Oct 24, 2019
Merged

Migrate Table visualization to React Part 2: Editor #4175

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d269aa9
Migrate table editor to React: skeleton, Grid tab
kravets-levko Sep 23, 2019
06b6c3e
Columns tab
kravets-levko Sep 27, 2019
5662c7f
Cleanup
kravets-levko Sep 27, 2019
8567e2f
Columns tab: DnD column sorting
kravets-levko Sep 27, 2019
6ecc9e2
Columns types should be JSX
kravets-levko Sep 30, 2019
0e1eaf2
New Columns tab UI/X
kravets-levko Sep 30, 2019
d6e0f44
Merge branch 'master' into migrate-table-editor
kravets-levko Sep 30, 2019
7dd2328
Use Sortable component on Columns tab
kravets-levko Sep 30, 2019
7d73aa6
Tests: Grid Settings
kravets-levko Oct 15, 2019
8c64089
Tests: Columns Settings
kravets-levko Oct 15, 2019
b2d5454
Tests: Editors for Text, Number, Boolean and Date/Time columns
kravets-levko Oct 15, 2019
d22737b
Tests: Editors for Image and Link columns
kravets-levko Oct 15, 2019
f36e0ff
Minor UI fix
kravets-levko Oct 15, 2019
841c336
Trigger build
kravets-levko Oct 16, 2019
d32c725
Merge branch 'master' into migrate-table-editor
kravets-levko Oct 19, 2019
91864f1
Debounce inputs
kravets-levko Oct 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 34 additions & 36 deletions client/app/visualizations/table/Editor/ColumnsSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
import { map } from 'lodash';
import React, { useRef } from 'react';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import React from 'react';
import Collapse from 'antd/lib/collapse';
import Icon from 'antd/lib/icon';
import Tooltip from 'antd/lib/tooltip';
import Typography from 'antd/lib/typography';
import { sortableElement } from 'react-sortable-hoc';
import { SortableContainer, DragHandle } from '@/components/sortable';
import { EditorPropTypes } from '@/visualizations';

import ColumnEditor from './ColumnEditor';

const { Text } = Typography;

const SortableContainer = sortableContainer(props => <div {...props} />);
const SortableItem = sortableElement(Collapse.Panel);
const DragHandle = sortableHandle(() => <div className="drag-handle" />);

export default function ColumnsSettings({ options, onOptionsChange }) {
const containerRef = useRef();

function handleColumnChange(newColumn, event) {
if (event) {
event.stopPropagation();
Expand All @@ -37,38 +34,39 @@ export default function ColumnsSettings({ options, onOptionsChange }) {
axis="y"
lockAxis="y"
useDragHandle
helperContainer={() => containerRef.current.firstChild}
helperContainer={container => container.firstChild}
onSortEnd={handleColumnsReorder}
containerProps={{
className: 'table-visualization-editor-columns',
}}
>
<div ref={containerRef} className="table-visualization-editor-columns">
<Collapse bordered={false} defaultActiveKey={[]} expandIconPosition="right">
{map(options.columns, (column, index) => (
<SortableItem
key={column.name}
index={index}
header={(
<React.Fragment>
<DragHandle />
{column.name}
{(column.title !== '') && (column.title !== column.name) && (
<Text type="secondary" className="m-l-5"><i>({column.title})</i></Text>
)}
</React.Fragment>
)}
extra={(
<Tooltip title="Toggle visibility" mouseEnterDelay={0} mouseLeaveDelay={0}>
<Icon
type={column.visible ? 'eye' : 'eye-invisible'}
onClick={event => handleColumnChange({ ...column, visible: !column.visible }, event)}
/>
</Tooltip>
)}
>
<ColumnEditor column={column} onChange={handleColumnChange} />
</SortableItem>
))}
</Collapse>
</div>
<Collapse bordered={false} defaultActiveKey={[]} expandIconPosition="right">
{map(options.columns, (column, index) => (
<SortableItem
key={column.name}
index={index}
header={(
<React.Fragment>
<DragHandle />
{column.name}
{(column.title !== '') && (column.title !== column.name) && (
<Text type="secondary" className="m-l-5"><i>({column.title})</i></Text>
)}
</React.Fragment>
)}
extra={(
<Tooltip title="Toggle visibility" mouseEnterDelay={0} mouseLeaveDelay={0}>
<Icon
type={column.visible ? 'eye' : 'eye-invisible'}
onClick={event => handleColumnChange({ ...column, visible: !column.visible }, event)}
/>
</Tooltip>
)}
>
<ColumnEditor column={column} onChange={handleColumnChange} />
</SortableItem>
))}
</Collapse>
</SortableContainer>
kravets-levko marked this conversation as resolved.
Show resolved Hide resolved
);
}
Expand Down
8 changes: 6 additions & 2 deletions client/app/visualizations/table/Editor/editor.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
.table-visualization-editor-columns {
.ant-collapse {
background: transparent;
}

.ant-collapse-item {
background: #ffffff;
kravets-levko marked this conversation as resolved.
Show resolved Hide resolved

.drag-handle {
height: 20px;
margin-left: -8px;
margin-right: 8px;
margin-left: -16px;
padding: 0 16px;
}
}
}
Expand Down