From db479c5c57d6477569a3190fc67b6401cb9dfff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Fri, 29 May 2020 01:47:54 +0200
Subject: [PATCH] [dome] table view
---
ivette/src/dome/src/renderer/table/views.tsx | 99 ++++++++++++++++++++
1 file changed, 99 insertions(+)
diff --git a/ivette/src/dome/src/renderer/table/views.tsx b/ivette/src/dome/src/renderer/table/views.tsx
index 442416e77b1..cb2feb1e8fb 100644
--- a/ivette/src/dome/src/renderer/table/views.tsx
+++ b/ivette/src/dome/src/renderer/table/views.tsx
@@ -444,3 +444,102 @@ function headerRenderer(props: TableHeaderProps) {
}
// --------------------------------------------------------------------------
+// --- Table Rows
+// --------------------------------------------------------------------------
+
+const rowClassName =
+ (selected?: number) =>
+ ({ index }: { index: number }) =>
+ (selected === index ? 'dome-color-selected' :
+ (index & 1 ? 'dome-xTable-even' : 'dome-xTable-odd'));
+
+// --------------------------------------------------------------------------
+// --- Column Resizer
+// --------------------------------------------------------------------------
+
+const DRAGGING = 'dome-xTable-resizer dome-color-dragging';
+const DRAGZONE = 'dome-xTable-resizer dome-color-dragzone';
+
+interface ResizerProps {
+ id: number;
+ dragging: undefined | number;
+ left: string; // resized column-id on the left
+ right: string; // resized column-id on the right
+ offset: number; // drag-start offset
+ onStart: DraggableEventHandler;
+ onStop: DraggableEventHandler;
+ onDrag: (left: string, right: string, offset: number) => void;
+}
+
+const Resizer = (props: ResizerProps) => (
+ <DraggableCore
+ onStart={props.onStart}
+ onStop={props.onStop}
+ onDrag={(_elt, data) => props.onDrag(props.left, props.right, data.x - props.offset)}
+ >
+ <div
+ className={props.id === props.dragging ? DRAGGING : DRAGZONE}
+ style={{ left: props.offset - 2 }}
+ />
+ </DraggableCore>
+);
+
+const computeWidth = (elt: Element) => {
+ const parent = elt && elt.parentElement;
+ return parent && parent.getBoundingClientRect().width;
+};
+
+// --------------------------------------------------------------------------
+// --- Virtualized Table View
+// --------------------------------------------------------------------------
+
+// Must be kept in sync with table.css
+const CSS_HEADER_HEIGHT = 22;
+const CSS_ROW_HEIGHT = 20;
+
+function makeTable<Key, Row>(
+ size: Size,
+ props: TableProps<Key, Row>,
+ state: TableState<Row>,
+) {
+ const { width, height } = size;
+ const model = props.model;
+ const itemCount = model.getRowCount();
+ const tableHeight = CSS_HEADER_HEIGHT + CSS_ROW_HEIGHT * itemCount;
+ const smallHeight = itemCount > 0 && tableHeight < height;
+ const rowCount = (smallHeight ? itemCount + 1 : itemCount);
+ const selection = props.selection;
+ const selected = selection && model.getIndexOf(selection);
+ const resizers = null; // this.computeResizers(columns);
+ const columns = makeColumns(state);
+ return (
+ <React.Fragment>
+ <VTable
+ ref={state.tableRef}
+ key='table'
+ displayName='React-Virtualized-Table'
+ width={width}
+ height={height}
+ rowCount={rowCount}
+ noRowsRenderer={props.renderEmpty}
+ rowGetter={state.rowGetter}
+ rowClassName={rowClassName(selected)}
+ rowHeight={CSS_ROW_HEIGHT}
+ headerHeight={CSS_HEADER_HEIGHT}
+ headerRowRenderer={headerRowRenderer}
+ onRowsRendered={state.watchRange}
+ onRowClick={onSelection && this.selectRow}
+ sortBy={ordering && ordering.sortBy}
+ sortDirection={ordering && ordering.sortDirection}
+ sort={model.setOrdering.bind(model)}
+ scrollToIndex={scrollToIndex}
+ scrollToAlignment='auto'
+ >
+ {columns}
+ </VTable>
+ {resizers}
+ </React.Fragment>
+ );
+};
+
+// --------------------------------------------------------------------------
--
GitLab