fix: styling & dragbox (#121)

android/src/main/java/com/qliktrialreactnativestraighttable/DragBox.java

@@ -29,6 +29,7 @@ public class DragBox extends View {
   Rect drawBottomFill;
   Paint paint = new Paint();
 
+  @SuppressLint("ClickableViewAccessibility")
   public DragBox(Context context, TableView tableView, DragBoxEventHandler dragBoxEventHandler, boolean isFirstColumnBox){
     super(context);
     this.tableView = tableView;
@@ -117,7 +118,10 @@ public boolean onTouch(View view, MotionEvent event) {
         }
         case MotionEvent.ACTION_MOVE: {
           float y = event.getRawY() + dY;
-          if(y < tableView.headerHeight) {
+          if(y < tableView.getContentTop()) {
+            return true;
+          }
+          if(y + height > tableView.getContentBottom()) {
             return true;
           }
           bounds.top = (int) y;
@@ -143,8 +147,8 @@ public void onScrolled(@NonNull RecyclerView rv, int dx, int dy) {
         return;
       }
       int y = (int) getY() - dy;
-      bounds.top = (int) y;
-      bounds.bottom = (int) y + height;
+      bounds.top = y;
+      bounds.bottom = y + height;
       setTranslationY(y);
     }
   }

android/src/main/java/com/qliktrialreactnativestraighttable/EventUtils.java

@@ -54,7 +54,6 @@ public static void sendOnExpand(View contextView, DataColumn column, DataRow row
       columnJSONArray.put(columnJSONObject);
 
       String rowJSONString = row.toEvent();
-      Log.d("bar", rowJSONString);
       event.putString("row", rowJSONString);
       event.putString("col", columnJSONArray.toString());
       EventUtils.sendEventToJSFromView(contextView, "onExpandCell", event);
@@ -67,11 +66,16 @@ public static void sendOnSearchColumn(View contextView, DataColumn column) {
     WritableMap event = Arguments.createMap();
     try {
       String columnJSONString = column.toEvent().toString();
-      Log.d("column", columnJSONString);
       event.putString("column", columnJSONString);
       EventUtils.sendEventToJSFromView(contextView, "onSearchColumn", event);
     } catch (JSONException e) {
       e.printStackTrace();
     }
   }
+
+  public static void sendDragBox(View contextView, boolean dragging) {
+    WritableMap event = Arguments.createMap();
+    event.putBoolean("dragging", dragging);
+    EventUtils.sendEventToJSFromView(contextView, "onDragBox", event);
+  }
 }

android/src/main/java/com/qliktrialreactnativestraighttable/GrabberView.java

@@ -1,5 +1,6 @@
 package com.qliktrialreactnativestraighttable;
 
+import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Color;
@@ -17,7 +18,8 @@
 public class GrabberView extends LinearLayout {
   GrabberButton grabberButton;
   Paint linePaint = new Paint();
-  CustomHorizontalScrollView scrollView;
+  final CustomHorizontalScrollView scrollView;
+  final TableView tableView;
   DataProvider dataProvider = null;
   AutoLinearLayout headerView = null;
   AutoLinearLayout footerView = null;
@@ -41,6 +43,7 @@ public boolean onTouch(View view, MotionEvent motionEvent) {
       int action = motionEvent.getAction();
       switch (action) {
         case MotionEvent.ACTION_DOWN: {
+          tableView.hideDragBoxes();
           GrabberView.this.pressed = true;
           GrabberView.this.scrollView.setDisableIntercept(true);
           GrabberView.this.scrollView.requestDisallowInterceptTouchEvent(true);
@@ -102,10 +105,12 @@ public GrabberButton(View parent) {
     }
   }
 
-  public GrabberView(int column, Context context, CustomHorizontalScrollView scrollView ) {
+  @SuppressLint("ClickableViewAccessibility")
+  public GrabberView(int column, Context context, CustomHorizontalScrollView scrollView, TableView tableView) {
     super(context);
     this.column = column;
     this.scrollView = scrollView;
+    this.tableView = tableView;
     grabberButton = new GrabberButton(this);
     grabberButton.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, TableTheme.rowHeightFactor));
     this.addView(grabberButton);

android/src/main/java/com/qliktrialreactnativestraighttable/HeaderViewFactory.java

@@ -30,10 +30,10 @@ public class HeaderViewFactory {
   String totalsLabel;
   boolean topPosition;
   HeaderView headerView = null;
-  AutoLinearLayout totalsView = null;
+  TotalsView totalsView = null;
   TableView tableView;
 
-  public AutoLinearLayout getTotalsView() {
+  public TotalsView getTotalsView() {
     return totalsView;
   }
 
@@ -45,7 +45,6 @@ public List<DataColumn> getDataColumns() {
     return dataColumns;
   }
 
-  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
   public HeaderViewFactory(List<DataColumn> dataColumns, List<TotalsCell> totalsCells, String totalsLabel, boolean topPosition, TableView tableView, HeaderContentStyle contentStyle, Context context) {
     this.tableView = tableView;
     this.dataColumns = dataColumns;
@@ -124,7 +123,6 @@ protected void onDraw(Canvas canvas){
     return text;
   }
 
-  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
   private void buildHeader(Context context) {
     int padding = (int) PixelUtils.dpToPx(16);
     int headerHeight = TableTheme.rowHeightFactor;
@@ -152,7 +150,8 @@ private void buildHeader(Context context) {
   }
 
   private void buildTotals(Context context) {
-    totalsView = new AutoLinearLayout(context);
+    totalsView = new TotalsView(context);
+    totalsView.setDataColumns(dataColumns);
 
     totalsView.post(() -> {
       int headerHeight = headerView.getMeasuredHeight();
@@ -189,6 +188,7 @@ protected void onDraw(Canvas canvas){
         int padding = (int) PixelUtils.dpToPx(16);
         text.setTypeface(text.getTypeface(), Typeface.BOLD);
         text.setEllipsize(TextUtils.TruncateAt.END);
+        text.setMaxLines(1);
         text.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);
         if (column.isDim && i == 0) {
           text.setText(totalsLabel);

android/src/main/java/com/qliktrialreactnativestraighttable/ReactNativeStraightTableViewManager.java

@@ -159,6 +159,8 @@ public Map getExportedCustomDirectEventTypeConstants() {
         MapBuilder.of("registrationName", "onExpandCell"))
       .put("onSearchColumn",
         MapBuilder.of("registrationName", "onSearchColumn"))
+      .put("onDragBox",
+        MapBuilder.of("registrationName", "onDragBox"))
       .build();
   }
 }

android/src/main/java/com/qliktrialreactnativestraighttable/RowCountView.java

@@ -39,8 +39,10 @@ public RowCountView(Context context, TableView tableView) {
     container.setGravity(Gravity.RIGHT);
     FrameLayout.LayoutParams frameLayout = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, TableTheme.rowHeightFactor);
     container.setLayoutParams(frameLayout);
-    container.setElevation(PixelUtils.dpToPx(2));
+    container.setZ(PixelUtils.dpToPx(4));
+    container.setElevation(PixelUtils.dpToPx(4));
     container.setY(height - TableTheme.rowHeightFactor);
+    container.setBackgroundColor(Color.WHITE);
 
     container.addView(textView);
     addView(container);

android/src/main/java/com/qliktrialreactnativestraighttable/TableView.java

@@ -10,6 +10,7 @@
 import android.graphics.Typeface;
 import android.os.Build;
 import android.util.Log;
+import android.view.MotionEvent;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
 import androidx.annotation.RequiresApi;
@@ -54,7 +55,6 @@ public class TableView extends FrameLayout {
   String totalsLabel;
   final TableViewFactory tableViewFactory;
 
-  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
   TableView(ThemedReactContext context) {
     super(context);
     TableTheme.iconFonts = ReactFontManager.getInstance().getTypeface("fontello", 0, context.getAssets());
@@ -66,6 +66,18 @@ public class TableView extends FrameLayout {
     tableViewFactory = new TableViewFactory(this, columnWidths, dataProvider, dragBox, firstColumnDragBox);
   }
 
+  public int getContentTop() {
+    int top = headerHeight;
+    if(dataProvider.totalsPosition.equals("top")){
+      top += TableTheme.rowHeightFactor;
+    }
+    return top;
+  }
+
+  public int getContentBottom() {
+    return getMeasuredHeight() - TableTheme.rowHeightFactor;
+  }
+
   public void setTotals(ReadableArray totalsRows, String totalsPosition, String totalsLabel) {
     this.totalsLabel = totalsLabel;
     dataProvider.setTotals(totalsRows, totalsLabel, totalsPosition);
@@ -77,6 +89,7 @@ public void clearSelections() {
   }
 
   public void showDragBox(Rect bounds, int columnId) {
+    EventUtils.sendDragBox(this, true);
     if(isFirstColumnFrozen && columnId == 0) {
       firstColumnDragBox.show(bounds, columnId);
       dragBox.hide();
@@ -87,6 +100,7 @@ public void showDragBox(Rect bounds, int columnId) {
   }
 
   public void hideDragBoxes() {
+    EventUtils.sendDragBox(this, false);
     firstColumnDragBox.hide();
     dragBox.hide();
   }

android/src/main/java/com/qliktrialreactnativestraighttable/TableViewFactory.java

@@ -26,7 +26,7 @@ public class TableViewFactory {
   public RootLayout rootLayout = null;
   public HeaderView headerView = null;
   public RowCountView rowCountView = null;
-  public AutoLinearLayout totalsView = null;
+  public TotalsView totalsView = null;
   public CustomRecyclerView firstColumnRecyclerView = null;
   public CustomRecyclerView coupledRecyclerView = null;
   public List<GrabberView> grabbers = null;
@@ -182,7 +182,7 @@ protected void createGrabbers() {
       int startOffset = 0;
 
       for (int i = 0; i < dataColumns.size(); i++) {
-        GrabberView grabberView = new GrabberView(i, context, scrollView);
+        GrabberView grabberView = new GrabberView(i, context, scrollView, tableView);
         FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(dragWidth, ViewGroup.LayoutParams.MATCH_PARENT);
         startOffset += (dataColumns.get(i).width) - offset;
         offset = 0;
@@ -210,7 +210,6 @@ protected void setupGrabbers() {
       view.setGrabbers(grabbers);
       view.setRecyclerView(coupledRecyclerView);
       view.rootLayout = this.rootLayout;
-      view.totalsView = this.totalsView;
       view.setFirstColumnRecyclerView(firstColumnRecyclerView);
       view.setFirstColumnHeader(firstColumnHeaderCell);
       view.setFixedTotalsCell(firstColumnTotalsCell);
@@ -249,6 +248,9 @@ void invalidateLayout() {
         firstColumnTotalsCell.requestLayout();
       }
 
+      this.totalsView.updateLayout();
+      this.totalsView.requestLayout();
+
       this.headerView.updateLayout();
       this.headerView.requestLayout();
 

android/src/main/java/com/qliktrialreactnativestraighttable/TotalsView.java

@@ -0,0 +1,28 @@
+package com.qliktrialreactnativestraighttable;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import java.util.List;
+
+public class TotalsView extends AutoLinearLayout{
+  List<DataColumn> dataColumns = null;
+  TotalsView(Context context) {
+    super(context);
+  }
+
+  public void setDataColumns(List<DataColumn> dataColumns) {
+    this.dataColumns = dataColumns;
+  }
+
+  public void updateLayout() {
+    for (int i = 0; i < this.dataColumns.size(); i++){
+      TextView totalsCell = (TextView) this.getChildAt(i);
+      ViewGroup.LayoutParams layoutParams = totalsCell.getLayoutParams();
+      layoutParams.width = dataColumns.get(i).width;
+      totalsCell.setLayoutParams(layoutParams);
+    }
+  }
+}

src/atoms.ts

@@ -5,11 +5,21 @@ export type ExpandCellAtom = {
   data?: any;
 };
 
+export type DragBoxAtom = {
+  dragging: boolean;
+};
+
 export type SearchTableColumnAtom = {
   searching: boolean;
   column?: any;
 };
 
+export const dragBoxAtom = atom<DragBoxAtom>({ dragging: false });
+
+export const setDragBoxAtom = atom(null, (_get, set, value: DragBoxAtom) => {
+  set(dragBoxAtom, value);
+});
+
 export const expandCellAtom = atom<ExpandCellAtom>({ expand: false });
 
 export const setExpandedCellAtom = atom(

src/components/SimpleGrid.tsx

@@ -1,7 +1,11 @@
 import React, { useCallback } from 'react';
 import ReactNativeStraightTableViewManager from './ReactNativeStraightTableViewManager';
 import { useUpdateAtom } from 'jotai/utils';
-import { setExpandedCellAtom, setSearchingTableColumnAtom } from '../atoms';
+import {
+  setDragBoxAtom,
+  setExpandedCellAtom,
+  setSearchingTableColumnAtom,
+} from '../atoms';
 
 export type SimpleGridLayout = {
   totals: {
@@ -91,6 +95,7 @@ const SimpleGrid: React.FC<SimpleGridProps> = ({
   onHeaderPressed,
   model,
 }) => {
+  const draggingBox = useUpdateAtom(setDragBoxAtom);
   const expandCell = useUpdateAtom(setExpandedCellAtom);
   const searchColumn = useUpdateAtom(setSearchingTableColumnAtom);
 
@@ -108,17 +113,16 @@ const SimpleGrid: React.FC<SimpleGridProps> = ({
   const signalSearch = useCallback(async (column: any) => {
     try {
       const props = await model.getEffectiveProperties();
-     
+
       if( props?.qHyperCubeDef?.qDimensions[column.dataColIdx].qDef.qFieldDefs[0] ) {
         column.label = props?.qHyperCubeDef?.qDimensions[column.dataColIdx].qDef.qFieldDefs[0];
       }
       searchColumn({searching: true, column})
     } catch (error) {
-      
+
     }
   }, [searchColumn])
 
-
   const onSearchColumn = useCallback(
     (event: any) => {
       try {
@@ -129,7 +133,14 @@ const SimpleGrid: React.FC<SimpleGridProps> = ({
     [signalSearch]
   );
 
-
+  const onDragBox = useCallback(
+    (event: any) => {
+      try {
+        draggingBox(event.nativeEvent.dragging);
+      } catch (error) {}
+    },
+    [draggingBox]
+  );
 
   return (
     <ReactNativeStraightTableViewManager
@@ -158,6 +169,7 @@ const SimpleGrid: React.FC<SimpleGridProps> = ({
       translations={translations}
       onExpandCell={onExpandCell}
       onSearchColumn={onSearchColumn}
+      onDragBox={onDragBox}
     />
   );
 };