added proper alignment support for TextCellRenderer & NumberCellRenderer

sibvisions · Nov 19, 2024 · 99ccfb1 · 99ccfb1
1 parent 0761ce5
commit 99ccfb1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/src/main/components/table/CellRenderer/NumberCellRenderer.tsx b/src/main/components/table/CellRenderer/NumberCellRenderer.tsx
@@ -13,18 +13,22 @@
  * the License.
  */
 
-import React, { FC, useContext, useMemo } from "react";
+import React, { FC, useContext, useMemo, useRef } from "react";
 import { appContext } from "../../../contexts/AppProvider";
 import { NumericColumnDescription } from "../../../response/data/MetaDataResponse";
 import { formatNumber, getGrouping } from "../../../util/component-util/NumberProperties";
 import { getNumberValueAsString, getPrefix, getSuffix, ICellEditorNumber } from "../../editors/number/UIEditorNumber";
 import { ICellRender } from "../CellEditor";
+import { getAlignments } from "../../comp-props/GetAlignments";
 
 /**
  * Renders the number-cell when the column is a number-cell
  * @param props - the properties received from the table
  */
 const NumberCellRenderer: FC<ICellRender> = (props) => {
+    /** A reference to forward to the components */
+    const forwardedRef = useRef<any>();
+
     /** Use context to gain access for contentstore and server methods */
     const context = useContext(appContext);
 
@@ -47,9 +51,19 @@ const NumberCellRenderer: FC<ICellRender> = (props) => {
         }
     }, [props.cellData, castedMetaData, castedCellEditor]);
 
+    const alignments = useMemo(() => getAlignments({...castedCellEditor}), [castedCellEditor]);
+
     return (
         <>
-            <span className="cell-data-content">
+            <span 
+                className="cell-data-content" 
+                style={{ 
+                    display: "flex", 
+                    justifyContent: alignments.ha, 
+                    alignItems: alignments.va, 
+                    width: "100%" 
+                }}
+            >
                 {props.icon != undefined && props.icon}
                 {props.icon && displayNumberValue && <span style={{marginRight: 5}}/>}
                 <span className="cell-data-content-number">{displayNumberValue}</span>

diff --git a/src/main/components/table/CellRenderer/TextCellRenderer.tsx b/src/main/components/table/CellRenderer/TextCellRenderer.tsx
@@ -13,15 +13,23 @@
  * the License.
  */
 
-import React, { FC, useMemo } from "react";
+import React, { FC, useContext, useMemo, useRef } from "react";
 import { ICellEditor } from "../../editors/IEditor";
 import { ICellRender } from "../CellEditor";
+import { appContext } from "../../../contexts/AppProvider";
+import { getAlignments } from "../../comp-props/GetAlignments";
 
 /**
  * Renders the text-cell when the column is a text-cell
  * @param props - the properties received from the table
  */
 const TextCellRenderer: FC<ICellRender> = (props) => {
+    /** A reference to forward to the components */
+    const forwardedRef = useRef<any>();
+
+    /** Use context to gain access for contentstore and server methods */
+    const context = useContext(appContext);
+
     /** Casts the cell-editor property to ICellEditor because we can be sure it is a text-cell-editor */
     const castedCellEditor = props.columnMetaData.cellEditor as ICellEditor;
 
@@ -35,9 +43,19 @@ const TextCellRenderer: FC<ICellRender> = (props) => {
         return props.cellData
     }, [props.cellData, castedCellEditor.contentType]);
 
+    const alignments = useMemo(() => getAlignments({...castedCellEditor}), [castedCellEditor]);
+
     return (
         <>
-            <span className="cell-data-content">
+            <span 
+                className="cell-data-content" 
+                style={{ 
+                    display: "flex", 
+                    justifyContent: alignments.ha, 
+                    alignItems: alignments.va, 
+                    width: "100%" 
+                }}
+            >
               {props.icon != undefined && props.icon}
               {props.icon && props.cellData && <span style={{marginRight: 5}}/>}
               {props.cellData?.includes("<html>") ? <span dangerouslySetInnerHTML={{ __html: props.cellData as string }}/> : displayTextValue}