Skip to content

Commit 35e5747

Browse files
McDoyenMcDoyen
committed
Refactor code
1 parent bb1bb5b commit 35e5747

12 files changed

Lines changed: 104 additions & 86 deletions

‎package-lock.json‎

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

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"@types/core-js": "^2.5.0",
4444
"@types/enzyme": "^3.1.15",
4545
"@types/enzyme-adapter-react-16": "^1.0.2",
46-
"@types/jasmine": "^3.3.1",
46+
"@types/jasmine": "^3.3.2",
4747
"@types/karma": "^3.0.1",
4848
"@types/node": "^10.12.15",
4949
"@types/react": "^16.7.17",
@@ -53,7 +53,7 @@
5353
"check-dependencies": "^1.0.1",
5454
"copy-webpack-plugin": "^4.6.0",
5555
"core-js": "^2.6.0",
56-
"css-loader": "^2.0.0",
56+
"css-loader": "^2.0.1",
5757
"enzyme": "^3.8.0",
5858
"enzyme-adapter-react-16": "^1.7.1",
5959
"extract-text-webpack-plugin": "^4.0.0-beta.0",
@@ -70,7 +70,7 @@
7070
"istanbul": "^0.4.3",
7171
"istanbul-instrumenter-loader": "^3.0.1",
7272
"jasmine": "^3.3.1",
73-
"karma": "^3.1.3",
73+
"karma": "^3.1.4",
7474
"karma-chrome-launcher": "^2.1.1",
7575
"karma-coverage": "^1.1.2",
7676
"karma-jasmine": "^2.0.1",
@@ -86,7 +86,7 @@
8686
"raw-loader": "^1.0.0",
8787
"react": "^16.6.3",
8888
"react-dom": "^16.6.3",
89-
"react-hot-loader": "^4.6.0",
89+
"react-hot-loader": "^4.6.1",
9090
"react-test-renderer": "^16.6.3",
9191
"remap-istanbul": "^0.12.0",
9292
"sass-loader": "^7.0.3",

‎src/DropdownReference/DropdownReference.webmodeler.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ export class preview extends Component<ContainerProps, {}> {
5353

5454
export function getPreviewCss() {
5555
return (
56-
require("react-select/dist/react-select.css") + require("../SharedResources/ui/Dropdown.scss")
56+
require("react-select/dist/react-select.css") +
57+
require("../SharedResources/ui/Dropdown.scss")
5758
);
5859
}
5960

‎src/DropdownReference/components/DropdownReference.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, createElement } from "react";
1+
import { Component, ReactNode, createElement } from "react";
22
import * as classNames from "classnames";
33
import Select, { Async } from "react-select";
44

@@ -10,7 +10,7 @@ import "react-select/dist/react-select.css";
1010
import "../../SharedResources/ui/Dropdown.scss";
1111

1212
export class DropdownReference extends Component<DropdownProps> {
13-
render() {
13+
render(): ReactNode {
1414
return this.props.showLabel
1515
? createElement(Label, {
1616
className: this.props.className,
@@ -25,32 +25,30 @@ export class DropdownReference extends Component<DropdownProps> {
2525
componentDidMount() {
2626
const scrollContainer = document.querySelector(".mx-window-body");
2727
if (scrollContainer && this.props.location === "popup") {
28-
(document.getElementsByClassName("widget-dropdown-reference")[0] as HTMLElement).style.overflow = "hidden";
29-
scrollContainer.addEventListener("scroll", () => { hideDropDown(); });
28+
scrollContainer.addEventListener("scroll", hideDropDown);
3029
}
3130
}
3231

3332
componentWillUnmount() {
3433
const scrollContainer = document.querySelector(".mx-window-body");
3534
if (scrollContainer && this.props.location === "popup") {
36-
(document.getElementsByClassName("widget-dropdown-reference")[0] as HTMLElement).style.overflow = "hidden";
37-
scrollContainer.removeEventListener("scroll", () => { hideDropDown(); });
35+
scrollContainer.removeEventListener("scroll", hideDropDown);
3836
}
3937
}
4038

4139
private renderSelector() {
4240
const commonProps = {
4341
clearable: this.props.isClearable,
4442
disabled: this.props.isReadOnly,
45-
onChange: this.props.handleOnchange as () => void,
43+
onChange: this.props.handleOnchange,
4644
...this.createSelectorProp()
4745
};
4846

4947
if (this.props.readOnlyStyle === "control" || (this.props.readOnlyStyle === "text" && !this.props.isReadOnly)) {
5048
const loadOptions = (input?: string) => (this.props.asyncData as (input?: string) => Promise<{}>)(input);
5149

5250
return createElement("div", {
53-
className: "widget-dropdown-reference",
51+
className: classNames("widget-dropdown-reference", { "popup-fix": this.props.location === "popup" }),
5452
onClick: this.setDropdownSize
5553
},
5654
this.props.selectType === "normal"
@@ -73,10 +71,10 @@ export class DropdownReference extends Component<DropdownProps> {
7371

7472
private setDropdownSize = () => {
7573
const dropdown = document.getElementsByClassName("Select-menu-outer");
76-
const dropdownElement = dropdown[0] as HTMLElement;
74+
const dropdownElement = dropdown[0] as HTMLElement; // We pick the first element because only one dropdown can be opened at a time
7775
if (dropdownElement && dropdownElement.style.visibility !== "visible" && this.props.location === "popup") {
7876
dropdownElement.style.visibility = "hidden";
79-
const dropdownDimensions = dropdown[0].getBoundingClientRect();
77+
const dropdownDimensions = dropdownElement.getBoundingClientRect();
8078
if (dropdownDimensions) {
8179
dropdownElement.style.width = dropdownDimensions.width - .08 + "px";
8280
dropdownElement.style.left = dropdownDimensions.left + "px";

‎src/DropdownReference/components/DropdownReferenceContainer.ts‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Component, createElement } from "react";
1+
import { Component, ReactNode, createElement } from "react";
22
import * as initializeReactFastclick from "react-fastclick";
3-
import { hot } from "react-hot-loader";
3+
import { hot } from "react-hot-loader/root";
44

55
import { AttributeType, DropdownProps, ReferenceOption, parseStyle, validateProps } from "../../SharedResources/utils/ContainerUtils";
66
import { FetchDataOptions, fetchData } from "../../SharedResources/utils/Data";
@@ -45,15 +45,16 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
4545

4646
private subscriptionHandles: number[] = [];
4747
private association: string = this.props.entityPath.split("/")[0];
48+
private onChangeHandler = this.onChange.bind(this);
4849

49-
render() {
50+
render(): ReactNode {
5051
return createElement(DropdownReference, {
5152
alertMessage: validateProps(this.props),
5253
className: this.props.class,
5354
data: this.state.options,
5455
asyncData: this.setAsyncOptions,
5556
emptyOptionCaption: this.props.emptyOptionCaption,
56-
handleOnchange: this.onChange,
57+
handleOnchange: this.onChangeHandler,
5758
isClearable: this.state.isClearable,
5859
selectType: this.props.selectType,
5960
lazyFilter: this.props.lazyFilter,
@@ -85,7 +86,7 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
8586
}
8687

8788
componentDidMount() {
88-
initializeReactFastclick();
89+
initializeReactFastclick(); // This fixes delayed touch events on ios
8990
}
9091

9192
componentWillUnmount() {
@@ -115,7 +116,7 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
115116
});
116117
}
117118

118-
private isReadOnly = (): boolean => {
119+
private isReadOnly(): boolean {
119120
const { editable, mxObject, readOnly } = this.props;
120121

121122
return editable !== "default" || !mxObject || readOnly;
@@ -136,9 +137,9 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
136137
guid: mxObject.getGuid()
137138
}));
138139
this.subscriptionHandles.push(window.mx.data.subscribe({
140+
guid: mxObject.get(this.association) as string,
139141
attr: this.props.attribute,
140-
callback: this.handleSubscriptions,
141-
guid: mxObject.get(this.association) as string
142+
callback: this.handleSubscriptions
142143
}));
143144
this.subscriptionHandles.push(window.mx.data.subscribe({
144145
entity: this.props.entityPath.split("/")[1],
@@ -148,18 +149,24 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
148149
this.retrieveOptions(this.props);
149150
}
150151
}));
152+
this.subscriptionHandles.push(window.mx.data.subscribe({
153+
guid: mxObject.get(this.association) as string,
154+
val: true,
155+
callback: () => validateProps
156+
}));
151157
}
152158
}
153159

154160
private handleSubscriptions = () => {
155161
this.getSelectedValue(this.props);
156162
}
157163

158-
private onChange = (selection: ReferenceOption) => {
164+
private onChange(selection: ReferenceOption) {
159165
if (this.props.mxObject) {
160166
if (!selection) {
161167
const references = this.props.mxObject.getReferences(this.association);
162168
this.props.mxObject.removeReferences(this.association, references);
169+
this.executeOnChangeAction();
163170
} else {
164171
this.props.mxObject.set(this.association, selection.value);
165172
if (!this.state.selectedObject || (this.state.selectedObject.value !== selection.value)) {
@@ -178,19 +185,22 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
178185
context.setContext(mxObject.getEntity(), mxObject.getGuid());
179186
if (onChangeEvent === "callMicroflow" && onChangeMicroflow) {
180187
window.mx.ui.action(onChangeMicroflow, {
181-
params: {
182-
applyto: "selection",
183-
guids: [ mxObject.getGuid() ]
184-
},
188+
context,
185189
origin: mxform,
186-
error: error => window.mx.ui.error(`Error while executing onchange microflow ${onChangeMicroflow}: ${error.message}`)
190+
error: error => {
191+
const detail = error.message ? `: ${error.message}` : "";
192+
window.mx.ui.error(`Error while executing onchange microflow ${onChangeMicroflow}${detail}`);
193+
}
187194
});
188195
} else if (onChangeEvent === "callNanoflow" && onChangeNanoflow.nanoflow) {
189196
window.mx.data.callNanoflow({
190197
nanoflow: onChangeNanoflow,
191198
origin: mxform,
192199
context,
193-
error: error => window.mx.ui.error(`Error while executing onchange nanoflow: ${error.message}`)
200+
error: error => {
201+
const detail = error.message ? `: ${error.message}` : "";
202+
window.mx.ui.error(`Error while executing onchange nanoflow${detail}`);
203+
}
194204
});
195205
}
196206
}
@@ -245,4 +255,4 @@ class DropdownReferenceContainer extends Component<ContainerProps, ContainerStat
245255
}
246256
}
247257

248-
export default hot(module)(DropdownReferenceContainer);
258+
export default hot(DropdownReferenceContainer);

‎src/DropdownReferenceSet/DropdownReferenceSet.webmodeler.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ export class preview extends Component<ContainerProps, {}> {
5353

5454
export function getPreviewCss() {
5555
return (
56-
require("react-select/dist/react-select.css") + require("../SharedResources/ui/Dropdown.scss")
56+
require("react-select/dist/react-select.css") +
57+
require("../SharedResources/ui/Dropdown.scss")
5758
);
5859
}
5960

0 commit comments

Comments
 (0)