origam · washibana · Oct 3, 2023 · Sep 13, 2023
@@ -0,0 +1,35 @@
+/*
+Copyright 2005 - 2023 Advantage Solutions, s. r. o.
+
+This file is part of ORIGAM (http://www.origam.org).
+
+ORIGAM is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+ORIGAM is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { CellAlignment } from "gui/Components/ScreenElements/Table/TableRendering/cells/cellAlignment";
+
+// Makes sure the editor alignment will be the same as the table cell alignment.
+// Needed on columns where the alignment can be set in the model.
+export function resolveCellAlignment(
+  customStyle: { [p: string]: string } | undefined,
+  isFirsColumn: boolean,
+  type: string)
+  : { [key: string]: string } {
+  let cellAlignment = new CellAlignment(isFirsColumn, type, customStyle);
+  const style = customStyle ? Object.assign({}, customStyle) : {};
+  style["paddingRight"] = cellAlignment.paddingRight - 1 + "px";
+  style["paddingLeft"] = cellAlignment.paddingLeft + "px";
+  style["textAlign"] = cellAlignment.alignment;
+  return style;
+}
@@ -45,7 +45,7 @@ import { getRowStateRowBgColor } from "model/selectors/RowState/getRowStateRowBg
 import ColorEditor from "gui/Components/ScreenElements/Editors/ColorEditor";
 import { flashColor2htmlColor, htmlColor2FlashColor } from "utils/flashColorFormat";
 import { getGridFocusManager } from "model/entities/GridFocusManager";
-import { CellAlignment } from "gui/Components/ScreenElements/Table/TableRendering/cells/cellAlignment";
+import { resolveCellAlignment } from "gui/Workbench/ScreenArea/TableView/ResolveCellAlignment";
 
 @inject(({tablePanelView}) => {
   const row = getSelectedRow(tablePanelView)!;
@@ -287,14 +287,3 @@ export class TableViewEditor extends React.Component<{
     return <Provider property={this.props.property}>{this.getEditor()}</Provider>;
   }
 }
-
-// Makes sure the editor alignment will be the same as the table cell alignment.
-// Needed on columns where the alignment can be set in the model.
-function resolveCellAlignment(customStyle: { [p: string]: string } | undefined, isFirsColumn: boolean, type: string){
-  let cellAlignment = new CellAlignment(isFirsColumn, type, customStyle);
-  const style = customStyle ?Object.assign({},customStyle) :{};
-  style["paddingRight"] = cellAlignment.paddingRight - 1 + "px";
-  style["paddingLeft"] = cellAlignment.paddingLeft + "px";
-  style["textAlign"] = cellAlignment.alignment;
-  return style;
-}
@@ -153,7 +153,7 @@ export function XmlBuildDropdownEditor(props: {
     });
 
     const dropdownEditorSetup = DropdownEditorSetupFromXml(
-      props.xmlNode, dropdownEditorDataTable, dropdownEditorBehavior, props.isLink);
+      props.xmlNode, dropdownEditorDataTable, dropdownEditorBehavior, undefined, props.isLink);
 
     return {
       behavior: dropdownEditorBehavior,

@@ -22,11 +22,17 @@ import { IHeaderCellDriver } from "../DropdownTableModel";
 import { TypeSymbol } from "dic/Container";
 
 export class DefaultHeaderCellDriver implements IHeaderCellDriver {
-  constructor(private name: string) {
+  constructor(
+    private name: string,
+    private customStyle?: {[key: string]: string} | undefined) {
   }
 
   render() {
-    return <div className={"header cell"}>{this.name}</div>;
+    return <div
+      style={this.customStyle}
+      className={"header cell"}>
+      {this.name}
+    </div>;
   }
 }
 

@@ -27,7 +27,8 @@ export class TextCellDriver implements IBodyCellDriver {
   constructor(
     private dataIndex: number,
     private dataTable: DropdownDataTable,
-    private driverState: IDriverState
+    private driverState: IDriverState,
+    private customStyle?: {[key: string]: string} | undefined
   ) {
   }
 
@@ -47,6 +48,7 @@ export class TextCellDriver implements IBodyCellDriver {
           this.driverState.chosenRowId === rowId,
           this.driverState.cursorRowId === rowId
         )}
+        style={this.customStyle}
         onClick={(e) => {
           this.driverState.handleTableCellClicked(e, rowIndex)
         }

@@ -89,7 +89,7 @@ export function XmlBuildDropdownEditor(props: {
   isReadOnly: boolean;
   backgroundColor?: string;
   foregroundColor?: string;
-  customStyle?: any;
+  customStyle?: {[key: string]: string};
   tagEditor?: JSX.Element;
   isLink?: boolean;
   autoSort?: boolean;
@@ -140,7 +140,11 @@ export function XmlBuildDropdownEditor(props: {
     });
 
     const dropdownEditorSetup = DropdownEditorSetupFromXml(
-      props.xmlNode, dropdownEditorDataTable, dropdownEditorBehavior, props.isLink);
+      props.xmlNode,
+      dropdownEditorDataTable,
+      dropdownEditorBehavior,
+      props.customStyle,
+      props.isLink);
 
     return {
       behavior: dropdownEditorBehavior,

@@ -87,6 +87,11 @@ export class DropdownEditorTable extends  React.Component<{
   columnCount = 0;
   readonly cellPadding = 20;
   readonly maxHeight = 150;
+  disposer: any;
+
+  componentDidMount() {
+    this.refMultiGrid.current?.recomputeGridSize();
+  }
 
   get rowCount(){
     return this.props.dataTable.rowCount + (this.hasHeader ? 1 : 0);
@@ -221,7 +226,10 @@ export class DropdownEditorTable extends  React.Component<{
       let cellWidth = 100;
       for (let rowIndex = 0; rowIndex < this.rowCount - 1; rowIndex++) {
         const cellText = this.props.drivers.getDriver(columnIndex).bodyCellDriver.formattedText(rowIndex);
-        const currentCellWidth = Math.round(getTextWidth(cellText, getCanvasFontSize())) + this.cellPadding;
+        const customPadding = parsePaddingValue(this.props.drivers.customFieldStyle?.paddingLeft);
+        const currentCellWidth =
+          Math.round(getTextWidth(cellText, getCanvasFontSize())) + this.cellPadding + customPadding;
+        const customFieldStyle = this.props.drivers.customFieldStyle;
         if (currentCellWidth > cellWidth) {
           cellWidth = currentCellWidth;
         }
@@ -231,3 +239,15 @@ export class DropdownEditorTable extends  React.Component<{
     return widths;
   }
 }
+
+function parsePaddingValue(paddingValue: string | undefined){
+  if(!paddingValue){
+    return 0;
+  }
+  const regExp = new RegExp("(\\d+)px");
+  const result = regExp.exec(paddingValue);
+  if(result){
+    return parseInt(result[0]);
+  }
+  return 0;
+}
@@ -32,24 +32,26 @@ export function DropdownEditorSetupFromXml(
   xmlNode: any,
   dropdownEditorDataTable: DropdownDataTable,
   dropdownEditorBehavior: IDriverState,
+  customStyle: {[key: string]: string} | undefined,
   isLink: boolean | undefined
 ): DropdownEditorSetup {
-  const rat = xmlNode.attributes;
-  const lookupId = rat.LookupId;
-  const propertyId = rat.Id;
-  const showUniqueValues = rat.DropDownShowUniqueValues === "true";
-  const identifier = rat.Identifier;
+  const attributes = xmlNode.attributes;
+  const lookupId = attributes.LookupId;
+  const propertyId = attributes.Id;
+  const showUniqueValues = attributes.DropDownShowUniqueValues === "true";
+  const identifier = attributes.Identifier;
   let identifierIndex = 0;
-  const dropdownType = rat.DropDownType;
-  const cached = rat.Cached === "true";
-  const searchByFirstColumnOnly = rat.SearchByFirstColumnOnly === "true";
+  const dropdownType = attributes.DropDownType;
+  const cached = attributes.Cached === "true";
+  const searchByFirstColumnOnly = attributes.SearchByFirstColumnOnly === "true";
 
   const columnNames: string[] = [identifier];
   const visibleColumnNames: string[] = [];
   const columnNameToIndex = new Map<string, number>([[identifier, identifierIndex]]);
   let index = 0;
   const drivers = new DropdownColumnDrivers();
-  if (rat.SuppressEmptyColumns === "true") {
+  drivers.customFieldStyle = customStyle;
+  if (attributes.SuppressEmptyColumns === "true") {
     drivers.driversFilter = (driver) => {
       return dropdownEditorDataTable.columnIdsWithNoData.indexOf(driver.columnId) < 0;
     };
@@ -74,7 +76,8 @@ export function DropdownEditorSetupFromXml(
         bodyCellDriver = new TextCellDriver(
           index,
           dropdownEditorDataTable,
-          dropdownEditorBehavior
+          dropdownEditorBehavior,
+          index == 1 ? customStyle : undefined
         );
         break;
       case "Number":
@@ -105,7 +108,7 @@ export function DropdownEditorSetupFromXml(
 
     drivers.allDrivers.push({
       columnId: id,
-      headerCellDriver: new DefaultHeaderCellDriver(name),
+      headerCellDriver: new DefaultHeaderCellDriver(name, index == 1 ? customStyle : undefined),
       bodyCellDriver,
     });
   }

@@ -165,6 +165,8 @@ export class DropdownColumnDrivers {
   @observable
   allDrivers: IDropdownColumnDriver[] = [];
 
+  customFieldStyle: { [key: string]: string } | undefined;
+
   driversFilter = (driver: IDropdownColumnDriver) => {
     return true;
   };