feat: use react (qlik-oss#5)

babel.config.js

@@ -1,4 +1,3 @@
 module.exports = {
-  plugins: ['react-native-web'],
   presets: ['@babel/preset-env', '@babel/preset-react', '@babel/typescript'],
 };

package.json

@@ -30,18 +30,16 @@
   "devDependencies": {
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.15.0",
-    "@nebula.js/cli": "1.7.0",
-    "@nebula.js/cli-build": "1.7.0",
-    "@nebula.js/cli-sense": "1.7.0",
-    "@nebula.js/cli-serve": "1.7.0",
+    "@nebula.js/cli": "2.3.1",
+    "@nebula.js/cli-build": "2.3.1",
+    "@nebula.js/cli-sense": "2.3.1",
+    "@nebula.js/cli-serve": "2.3.1",
     "@rollup/plugin-typescript": "8.2.5",
     "@types/react": "17.0.24",
     "@types/react-dom": "17.0.9",
-    "@types/react-native": "0.65.3",
     "@typescript-eslint/eslint-plugin": "4.32.0",
     "@typescript-eslint/parser": "4.32.0",
     "babel-eslint": "10.1.0",
-    "babel-plugin-react-native-web": "0.17.1",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-airbnb-base": "14.2.1",
@@ -57,17 +55,12 @@
     "prettier": "2.4.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-native": "0.66.1",
-    "react-native-paper": "4.9.2",
-    "react-native-web": "0.17.1",
+    "react-window": "1.8.6",
     "shx": "0.3.3",
     "tslib": "2.3.1",
     "typescript": "4.4.3"
   },
   "peerDependencies": {
-    "@nebula.js/stardust": "1.x"
-  },
-  "dependencies": {
-    "react-native-vector-icons": "8.1.0"
+    "@nebula.js/stardust": "2.x"
   }
 }

src/index.ts

@@ -1,4 +1,4 @@
-import { useElement, useStaleLayout, useEffect, useModel, useMemo } from '@nebula.js/stardust';
+import { useElement, useStaleLayout, useEffect, useModel, useMemo, useRect } from '@nebula.js/stardust';
 import properties from './object-properties';
 import data from './data';
 import { render, teardown } from './pivot-table/Root';
@@ -17,15 +17,17 @@ export default function supernova() {
       const element = useElement();
       const layout = useStaleLayout();
       const model = useModel();
+      const rect = useRect();
 
       useMemo(() => {
         if (layout && model) {
           render(element, {
             model,
-            layout
+            layout,
+            rect
           });
         }
-      }, [layout, model]);
+      }, [layout, model, rect]);
 
       useEffect(
         () => () => {

src/pivot-table/Root.tsx

@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
-// import { Provider as PaperProvider } from 'react-native-paper';
 import { PivotTableProps, PivotTable } from './components/PivotTable';
 
 export function render(rootElement: Element, props: PivotTableProps): void {

src/pivot-table/components/CellFactory.tsx

@@ -1,87 +1,51 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { Model } from '../../types/types';
-import { Cell, TYPE } from '../handle-data';
+import { ItemData, TYPE } from '../../types/types';
 import DimensionCell from './DimensionCell';
 import MeasureCell from './MeasureCell';
-import sharedStyles from './shared-styles';
+import DimensionTitleCell from './DimensionTitleCell';
+import EmptyHeaderCell from './EmptyHeaderCell';
+import EmptyCell from './EmptyCell';
 
-export interface CellFactoryProps {
-  cell: Cell;
+interface GridCallbackProps {
+  columnIndex: number;
   rowIndex: number;
-  colIndex: number;
-  model: Model;
-  isLeftColumn?: boolean;
-  isHeader?: boolean;
+  style: ReactWindow.ItemStyle;
+  data: ItemData;
 }
 
-const borderColor = 'rgb(230, 230, 230)';
-const color = 'rgb(89, 89, 89)';
-const minHeight = 24;
+const CellFactory = ({ columnIndex, rowIndex, style, data }: GridCallbackProps): JSX.Element | null => {
+  const { model, pivotData } = data;
+  const cell = pivotData.matrix[columnIndex][rowIndex];
 
-const styles = StyleSheet.create({
-  mergedCell: {
-    borderLeftWidth: 0,
-    borderBottomWidth: 1,
-    borderColor,
-  },
-  cell: {
-    color,
-    borderLeftWidth: 1,
-    borderBottomWidth: 1,
-    borderColor,
-    paddingLeft: 4,
-    paddingRight: 4,
-    minHeight,
-    justifyContent: 'center',
-  },
-  label: {
-    fontWeight: 500,
-    color,
-    borderLeftWidth: 1,
-    borderBottomWidth: 1,
-    borderColor,
-    paddingLeft: 4,
-    paddingRight: 4,
-    minHeight,
-    justifyContent: 'center',
-  },
-  header: {
-    minHeight: 36
-  },
-  labelText: {
-    fontStyle: 'italic',
-  },
-});
-
-const CellFactory = ({ cell, model, isLeftColumn = false, isHeader = false, rowIndex, colIndex }: CellFactoryProps): JSX.Element => {
   if (cell.type === TYPE.DIMENSION) {
+    const isLeftColumn = rowIndex >= pivotData.nbrTopRows;
+
     return <DimensionCell
       cell={cell}
       model={model}
-      rowIndex={rowIndex}
-      colIndex={colIndex}
-      style={isHeader ? [styles.cell, styles.header] : styles.cell}
       isLeftColumn={isLeftColumn}
-    />
+      rowIndex={isLeftColumn ? rowIndex - pivotData.nbrTopRows : rowIndex}
+      colIndex={isLeftColumn ? columnIndex : columnIndex - pivotData.nbrLeftColumns}
+      style={style}
+    />;
   }
 
   if (cell.type === TYPE.MEASURE) {
-    return <MeasureCell cell={cell} style={styles.cell} />
+    return <MeasureCell
+      cell={cell}
+      style={style}
+    />
   }
 
   if (cell.type === TYPE.LABEL) {
-    return (
-      <View style={[styles.label, styles.header]}>
-        <Text style={[sharedStyles.text, styles.labelText]}>{cell.value}</Text>
-      </View>)
+    return <DimensionTitleCell cell={cell} style={style} />
   }
 
-  if (isHeader) {
-    return <View style={[styles.mergedCell, styles.header]}>{null}</View>
+  if (cell.type === TYPE.EMPTY && rowIndex < pivotData.nbrTopRows) {
+    return <EmptyHeaderCell style={style} />
   }
 
-  return <View style={styles.cell}>{null}</View>
-};
+  return <EmptyCell style={style} />
+}
 
 export default CellFactory;

src/pivot-table/components/DimensionCell.tsx

@@ -1,26 +1,29 @@
 import React from 'react';
-import { Pressable, StyleSheet, View, Text, ViewStyle } from "react-native";
-import { Model } from '../../types/types';
+import { Model, Cell } from '../../types/types';
 import { NxPivotDimensionCell } from '../../types/QIX';
-import { Cell } from '../handle-data';
-import sharedStyles from './shared-styles';
+import { borderStyle, textStyle } from './shared-styles';
 
 export interface DimensionCellProps {
   cell: Cell;
   model: Model;
   rowIndex: number;
   colIndex: number;
   isLeftColumn?: boolean;
-  style: ViewStyle | ViewStyle[];
+  style: ReactWindow.ItemStyle;
 }
 
 const PATH = '/qHyperCubeDef';
-
-const styles = StyleSheet.create({
-  text: {
-    fontWeight: '700',
-  },
-});
+const containerStyle: React.CSSProperties = {
+  color: 'rgb(89, 89, 89)',
+};
+const cellStyle: React.CSSProperties = {
+  justifyContent: 'center',
+  height: '100%'
+};
+const dimTextStyle: React.CSSProperties = {
+  ...textStyle,
+  fontWeight: 'bold',
+};
 
 const DimensionCell = ({ model, cell, isLeftColumn = false, rowIndex = 0, colIndex = 0, style }: DimensionCellProps): JSX.Element => {
   const { qText, qCanCollapse, qCanExpand } = (cell.value as NxPivotDimensionCell);
@@ -39,19 +42,15 @@ const DimensionCell = ({ model, cell, isLeftColumn = false, rowIndex = 0, colInd
       : () => model.collapseTop(PATH, rowIndex, colIndex, false);
   }
 
-  const DimCell = (
-    <View style={style}>
-      <Text
-        style={[sharedStyles.text, styles.text]}
-        numberOfLines={1}>
-          {cellContent}
-      </Text>
-    </View>
+  return (
+    <div style={{ ...style, ...containerStyle}}>
+      <div style={{ ...cellStyle, ...borderStyle }} onClick={onPress} aria-hidden="true">
+        <div style={dimTextStyle}>
+            {cellContent}
+        </div>
+      </div>
+    </div>
   );
-
-  return onPress ?
-  <Pressable onPress={onPress}>{DimCell}</Pressable>
-  : DimCell;
 };
 
 export default DimensionCell;

src/pivot-table/components/DimensionTitleCell.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Cell } from '../../types/types';
+import { borderStyle, textStyle } from './shared-styles';
+
+interface LabelCellProps {
+  cell: Cell;
+  style: ReactWindow.ItemStyle;
+}
+
+const labelTextStyle: React.CSSProperties = {
+  ...textStyle,
+  fontStyle: 'italic'
+};
+
+const DimensionTitleCell = ({ cell, style }: LabelCellProps): JSX.Element => (
+  <div style={{ ...style, ...borderStyle }}>
+    <div style={labelTextStyle}>{cell.value}</div>
+  </div>
+);
+
+export default DimensionTitleCell;

src/pivot-table/components/EmptyCell.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { borderStyle } from './shared-styles';
+
+interface EmptyCellProps {
+  style: ReactWindow.ItemStyle;
+}
+
+const EmptyCell = ({ style }: EmptyCellProps): JSX.Element => (
+  <div style={{ ...style, ...borderStyle }}>
+    {null}
+  </div>
+);
+
+export default EmptyCell;

src/pivot-table/components/EmptyHeaderCell.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { borderStyle } from './shared-styles';
+
+interface EmptyHeaderCellProps {
+  style: ReactWindow.ItemStyle;
+}
+
+const EmptyHeaderCell = ({ style }: EmptyHeaderCellProps): JSX.Element => (
+  <div style={{ ...style, ...borderStyle, ...{ borderLeftWidth: 0 } }}>
+    {null}
+  </div>
+);
+
+export default EmptyHeaderCell;