Skip to content

Commit 5b9a580

Browse files
author
JelteMX
committed
WIP fix MX9
1 parent ed62788 commit 5b9a580

File tree

8 files changed

+25512
-748
lines changed

8 files changed

+25512
-748
lines changed

‎.eslintrc.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ module.exports = {
66
"@typescript-eslint/ban-ts-ignore": "warn",
77
"@typescript-eslint/no-empty-interface": "off",
88
"@typescript-eslint/no-empty-function": "warn",
9+
"no-unused-vars": "warn",
10+
"@typescript-eslint/no-unused-vars": "warn",
911
"react/no-find-dom-node": "off",
1012
"react/no-deprecated": "warn",
1113
"react/prop-types": "warn"

‎package-lock.json‎

Lines changed: 25381 additions & 646 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
},
5454
"dependencies": {
5555
"@bem-react/classname": "^1.5.6",
56-
"@jeltemx/mendix-react-widget-utils": "^0.3.6",
57-
"antd": "^3.25.1",
56+
"@jeltemx/mendix-react-widget-utils": "^0.9.0",
57+
"antd": "^4.8.5",
5858
"array-to-tree": "^3.3.0",
5959
"big.js": "^5.2.2",
6060
"classnames": "^2.2.6",
@@ -63,7 +63,7 @@
6363
"mobx": "^4.13.0",
6464
"mobx-react": "^6.1.3",
6565
"react-mustache-template-component": "^1.0.0",
66-
"react-resize-detector": "^4.2.1",
66+
"react-resize-detector": "^6.7.6",
6767
"uuid": "^3.4.0"
6868
}
6969
}

‎src/DynamicTable.tsx‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { Component, ReactNode, createElement } from "react";
22
import { findDOMNode } from "react-dom";
3-
import { hot } from "react-hot-loader/root";
43
import {
54
fetchByXpath,
65
getObjectContextFromObjects,
76
getObject,
87
getObjects,
98
ValidationMessage,
109
entityIsPersistable,
11-
executeAction
10+
executeAction,
11+
ActionReturnType,
12+
debug
1213
} from "@jeltemx/mendix-react-widget-utils";
1314

1415
import "./ui/DynamicTable.scss";
@@ -22,11 +23,14 @@ import { TitleMethod, TableObjectGetOptions, StaticTitleMethod } from "./store/o
2223
import { createHelperObject } from "./lib/helperobject";
2324
import { getTitleFromObject, ClickCellType, getStaticTitleFromObject } from "./lib/titlehelper";
2425
import { validateProps } from "./lib/validation";
25-
import { Action, NodeType, AxisSelection, ActionReturn, TableRecord } from "./lib/interfaces";
26+
import { Action, NodeType, AxisSelection, TableRecord } from "./lib/interfaces";
2627
import { getClassMethod, getSortMethod, prepareAction, ActionPreparation } from "./lib/methods";
2728
import { getPartialUIProps } from "./lib/props";
29+
import { createRef } from "react";
2830

2931
class DynamicTable extends Component<DynamicTableContainerProps> {
32+
ref = createRef<HTMLDivElement>();
33+
3034
private store: TableStore;
3135
private widgetId?: string;
3236
private rowChildReference: string;
@@ -73,20 +77,29 @@ class DynamicTable extends Component<DynamicTableContainerProps> {
7377
});
7478
}
7579

76-
componentDidUpdate(): void {
77-
if (this.widgetId) {
78-
const domNode = findDOMNode(this);
79-
// @ts-ignore
80-
domNode.setAttribute("widgetId", this.widgetId);
81-
}
82-
}
80+
// componentDidUpdate(): void {
81+
// if (this.widgetId) {
82+
// const domNode = findDOMNode(this);
83+
// // @ts-ignore
84+
// domNode.setAttribute("widgetId", this.widgetId);
85+
// }
86+
// }
8387

8488
componentWillReceiveProps(nextProps: DynamicTableContainerProps): void {
85-
if (!this.widgetId) {
86-
const domNode = findDOMNode(this);
87-
// @ts-ignore
88-
this.widgetId = domNode.getAttribute("widgetId") || undefined;
89+
90+
if (!this.widgetId && this.ref.current) {
91+
try {
92+
const domNode = findDOMNode(this);
93+
// @ts-ignore
94+
this.widgetId = domNode.getAttribute("widgetId") || undefined;
95+
} catch (error) {
96+
const domNode = findDOMNode(this.ref.current);
97+
// @ts-ignore
98+
const alternativeID = domNode.getAttribute("data-mendix-id") || undefined;
99+
this.widgetId = alternativeID;
100+
}
89101
}
102+
90103
this.store.setContext(nextProps.mxObject);
91104
if (nextProps.mxObject) {
92105
this.store.setLoading(true);
@@ -107,15 +120,17 @@ class DynamicTable extends Component<DynamicTableContainerProps> {
107120
}
108121

109122
return (
110-
<DynamicTreeTableContainer
111-
store={this.store}
112-
selectMode={selectionMode}
113-
hideSelectBoxes={selectHideCheckboxes}
114-
expanderFunc={this.expanderFunc}
115-
emptyClickHandler={this.clickEmptyHandler}
116-
clickToSelect={selectClickSelect}
117-
ui={getPartialUIProps(this.props)}
118-
/>
123+
<div ref={this.ref} style={{height: "100%"}}>
124+
<DynamicTreeTableContainer
125+
store={this.store}
126+
selectMode={selectionMode}
127+
hideSelectBoxes={selectHideCheckboxes}
128+
expanderFunc={this.expanderFunc}
129+
emptyClickHandler={this.clickEmptyHandler}
130+
clickToSelect={selectClickSelect}
131+
ui={getPartialUIProps(this.props)}
132+
/>
133+
</div>
119134
);
120135
}
121136

@@ -132,8 +147,9 @@ class DynamicTable extends Component<DynamicTableContainerProps> {
132147
}
133148

134149
private getRuntimeValidations(props: DynamicTableContainerProps): ValidationMessage[] {
150+
const persist = entityIsPersistable(props.helperEntity);
135151
return validateProps(props, {
136-
noPersistentHelper: props.helperEntity !== "" && entityIsPersistable(props.helperEntity)
152+
noPersistentHelper: props.helperEntity !== "" && (persist !== null ? persist : false)
137153
});
138154
}
139155

@@ -578,19 +594,17 @@ class DynamicTable extends Component<DynamicTableContainerProps> {
578594
return obj;
579595
}
580596

581-
private executeAction(action: Action, showError = false, obj?: mendix.lib.MxObject): Promise<ActionReturn> {
597+
private executeAction(action: Action, showError = false, obj?: mendix.lib.MxObject): Promise<ActionReturnType> {
582598
this.debug("executeAction", action, obj && obj.getGuid());
583599
const context = getObjectContextFromObjects(obj, this.props.mxObject);
584600

585601
return executeAction(action, showError, context, this.props.mxform);
586602
}
587603

588604
private debug(...args: unknown[]): void {
589-
const id = this.props.friendlyId || this.widgetId;
590-
if (window.logger) {
591-
window.logger.debug(`${id}:`, ...args);
592-
}
605+
const id = this.props.friendlyId || this.widgetId || "mendix.filedropper.FileDropper";
606+
debug(id, ...args);
593607
}
594608
}
595609

596-
export default hot(DynamicTable);
610+
export default DynamicTable;

‎src/components/DynamicTreeTableContainer.tsx‎

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import { Component, ReactNode, createElement, CSSProperties } from "react";
1+
import { Component, ReactNode, createElement, CSSProperties, Fragment, version, useEffect, createRef } from "react";
2+
3+
console.log(version);
4+
25
import { observer } from "mobx-react";
36
import classNames from "classnames";
47
import ReactResizeDetector from "react-resize-detector";
58
import { TableStore } from "../store/store";
69
import { SelectionMode, DynamicTableSettingsProps } from "../../typings/DynamicTableProps";
7-
import Table, { TableRowSelection, ColumnProps, TableEventListeners } from "antd/es/table";
10+
import Table, { ColumnProps } from "antd/es/table";
11+
import { TableRowSelection } from "antd/es/table/interface";
812
import { TableRecord } from "../lib/interfaces";
913
import { SizeContainer } from "./SizeContainer";
1014
import { ClickCellType } from "../lib/titlehelper";
1115
import { Alerts } from "./Alerts";
16+
import { withResizeDetector } from "react-resize-detector";
1217

1318
const DEBOUNCE = 250;
1419

@@ -32,6 +37,8 @@ export interface DynamicTreeTableContainerProps {
3237

3338
@observer
3439
export class DynamicTreeTableContainer extends Component<DynamicTreeTableContainerProps, {}> {
40+
wrapper = createRef<HTMLDivElement>();
41+
3542
onExpand = this.expanderHandler.bind(this);
3643
onRowClassName = this.rowClassName.bind(this);
3744
clearDebounce = this._clearDebounce.bind(this);
@@ -79,38 +86,45 @@ export class DynamicTreeTableContainer extends Component<DynamicTreeTableContain
7986
};
8087

8188
const scrollY = ui.settingsTableLockHeaderRow ? ui.settingsHeight || true : false;
89+
90+
console.log(scrollY);
91+
8292
const containerIfNotDisabled = store.disabled ? null : (
83-
<SizeContainer
84-
className={classNames("widget-dynamictable")}
85-
width={ui.settingsWidth}
86-
height={ui.settingsHeight}
87-
widthUnit={ui.settingsWidthUnit}
88-
heightUnit={ui.settingsHeightUnit}
89-
>
90-
<Table
91-
columns={this.getColumns(store.tableColumns)}
92-
dataSource={store.tableRows}
93-
loading={store.isLoading}
94-
onExpand={this.onExpand}
95-
onRow={this.onRow()}
96-
rowSelection={rowSelection}
97-
pagination={false}
98-
rowClassName={this.onRowClassName}
99-
scroll={{ x: store.width || true, y: scrollY }}
100-
size="small"
101-
/>
102-
<ReactResizeDetector
103-
handleHeight
104-
handleWidth
105-
refreshMode="throttle"
106-
refreshRate={100}
107-
onResize={onResizeHandle}
108-
/>
109-
</SizeContainer>
93+
<Fragment>
94+
<SizeContainer
95+
className={classNames("widget-dynamictable")}
96+
width={ui.settingsWidth}
97+
height={ui.settingsHeight}
98+
widthUnit={ui.settingsWidthUnit}
99+
heightUnit={ui.settingsHeightUnit}
100+
>
101+
<Table
102+
columns={this.getColumns(store.tableColumns)}
103+
dataSource={store.tableRows}
104+
loading={store.isLoading}
105+
onExpand={this.onExpand}
106+
onRow={this.onRow()}
107+
rowSelection={rowSelection}
108+
pagination={false}
109+
rowClassName={this.onRowClassName}
110+
scroll={{ x: store.width || true, y: scrollY ? "100%" : "100%" }}
111+
size="small"
112+
/>
113+
<ReactResizeDetector
114+
targetRef={this.wrapper}
115+
handleHeight
116+
handleWidth
117+
refreshMode="throttle"
118+
refreshRate={100}
119+
onResize={onResizeHandle}
120+
></ReactResizeDetector>
121+
</SizeContainer>
122+
</Fragment>
110123
);
111124

112125
return (
113126
<div
127+
ref={this.wrapper}
114128
className={classNames(
115129
"widget-dynamictable-wrapper",
116130
hideSelectBoxes ? "hide-selectboxes" : null,
@@ -183,7 +197,7 @@ export class DynamicTreeTableContainer extends Component<DynamicTreeTableContain
183197
className: "left-column",
184198
width: leftWidth,
185199
fixed: leftFixed ? "left" : false,
186-
onCell: (record: TableRecord): TableEventListeners => {
200+
onCell: (record: TableRecord): any => {
187201
return {
188202
className: classNames(record._className, "first-column")
189203
};
@@ -193,16 +207,16 @@ export class DynamicTreeTableContainer extends Component<DynamicTreeTableContain
193207
const colProp: ColumnProps<TableRecord> = {
194208
...col,
195209
width: cellWidth,
196-
onCell: (record: TableRecord): TableEventListeners => {
210+
onCell: (record: TableRecord): any => {
197211
const empty =
198212
col.dataIndex &&
199-
typeof record[col.dataIndex] !== "undefined" &&
200-
record[col.dataIndex] === null;
213+
typeof record[col.dataIndex as number] !== "undefined" &&
214+
record[col.dataIndex as number] === null;
201215
const colGuid = col.dataIndex;
202216

203217
const extraClass =
204218
col.key && record._classObj && record._classObj[col.key] ? record._classObj[col.key] : "";
205-
const opts: TableEventListeners = {
219+
const opts: any = {
206220
className: classNames(
207221
col.className,
208222
record._className,
@@ -213,10 +227,10 @@ export class DynamicTreeTableContainer extends Component<DynamicTreeTableContain
213227

214228
if (empty && colGuid && record.key) {
215229
opts.onClick = (): void => {
216-
emptyClickHandler && emptyClickHandler("single", colGuid, record.key);
230+
emptyClickHandler && emptyClickHandler("single", colGuid as string, record.key);
217231
};
218232
opts.onDoubleClick = (): void => {
219-
emptyClickHandler && emptyClickHandler("double", colGuid, record.key);
233+
emptyClickHandler && emptyClickHandler("double", colGuid as string, record.key);
220234
};
221235
}
222236

‎src/components/SizeContainer.tsx‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Copied from: https://github.com/mendix/widgets-resources/blob/master/packages-web/calendar/src/components/SizeContainer.ts
22

3-
import { CSSProperties, createElement, FunctionComponent, PropsWithChildren } from "react";
3+
import { CSSProperties, createElement, PropsWithChildren } from "react";
44
import classNames from "classnames";
55

66
export type HeightUnitType = "percentageOfWidth" | "percentageOfParent" | "pixels";
@@ -42,42 +42,38 @@ const getHeight = (heightUnit: HeightUnitType, height: number): CSSProperties =>
4242
return style;
4343
};
4444

45-
export const SizeContainer: FunctionComponent<SizeProps> = ({
46-
className,
47-
widthUnit,
48-
width,
49-
heightUnit,
50-
height,
51-
children,
52-
style
53-
}: PropsWithChildren<SizeProps>) => {
54-
const styleWidth = widthUnit === "percentage" ? `${width}%` : `${width}px`;
45+
export const SizeContainer = ({
46+
className,
47+
widthUnit,
48+
width,
49+
heightUnit,
50+
height,
51+
children,
52+
style
53+
}: PropsWithChildren<SizeProps>): JSX.Element => {
54+
const styleWidth = widthUnit === "percentage" ? `${width}%` : `${width}px`;
5555

56-
return createElement(
57-
"div",
58-
{
59-
className: classNames((className || "dynamic-table") + "__size-box"),
60-
style: {
56+
return (<div
57+
className={classNames((className || "dynamic-table") + "__size-box")}
58+
style= {{
6159
position: "relative",
6260
width: styleWidth,
6361
...getHeight(heightUnit, height),
6462
...style
65-
},
66-
ref: parentHeight
67-
},
68-
createElement(
69-
"div",
70-
{
71-
className: "size-box-inner",
72-
style: {
63+
}}
64+
ref={parentHeight}
65+
>
66+
<div
67+
className={"size-box-inner"}
68+
style={{
7369
position: "absolute",
7470
top: "0",
7571
right: "0",
7672
bottom: "0",
7773
left: "0"
78-
}
79-
},
80-
children
81-
)
82-
);
83-
};
74+
}}
75+
>
76+
{children}
77+
</div>
78+
</div>);
79+
}

0 commit comments

Comments
 (0)