WIP: Remove redundant cell styling hook

SAP · Dec 9, 2019 · 529ac00 · 529ac00
1 parent e85e84e
commit 529ac00
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 50 deletions.
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
@@ -1,9 +1,54 @@
+import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
+import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
+import { CSSProperties } from 'react';
 import { PluginHook } from 'react-table';
-import { useCellStyling } from './useCellStyling';
 
 export const useTableCellStyling = (classes, rowHeight) => {
   const hook: PluginHook<{}> = (instance) => {
-    instance.getCellProps.push(useCellStyling({ rowHeight }, classes));
+    instance.getCellProps.push(({ column }) => {
+      const style: CSSProperties = {};
+
+      if (rowHeight) {
+        style.height = `${rowHeight}px`;
+      }
+      switch (column.hAlign) {
+        case TextAlign.Begin:
+          style.textAlign = 'start';
+          break;
+        case TextAlign.Center:
+          style.textAlign = 'center';
+          break;
+        case TextAlign.End:
+          style.textAlign = 'end';
+          break;
+        case TextAlign.Left:
+          style.textAlign = 'left';
+          break;
+        case TextAlign.Right:
+          style.textAlign = 'right';
+          break;
+      }
+      switch (column.vAlign) {
+        case VerticalAlign.Bottom:
+          style.verticalAlign = 'bottom';
+          break;
+        case VerticalAlign.Middle:
+          style.verticalAlign = 'middle';
+          break;
+        case VerticalAlign.Top:
+          style.verticalAlign = 'top';
+          break;
+      }
+
+      let className = classes.tableCell;
+      if (column.className) {
+        className += ` ${column.className}`;
+      }
+      return {
+        className,
+        style
+      };
+    });
   };
   hook.pluginName = 'useTableCellStyling';
   return hook;