Skip to content

Commit ca2d003

Browse files
ipselonipselon
committed
Add the possibility to pass props of cloned component into wrapper
1 parent 6840f2d commit ca2d003

8 files changed

Lines changed: 127 additions & 46 deletions

File tree

‎src/framework/commons/constants.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,6 @@ module.exports = {
5656
DEBUG_MSG_FORWARD_EVENT: 'forwardToPath',
5757
DEBUG_MSG_CREATE_CONTAINER_EVENT: 'createContainer',
5858

59+
COMPONENT_PROPERTY_DO_NOT_USE_IN_FLOWS_NAME: 'doNotUseInFlows',
60+
5961
};

‎src/framework/commons/utilities.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export function pickInObject(object, validKeys) {
2+
const result = {};
3+
if (object && validKeys && validKeys.length > 0) {
4+
for (let i = 0; i < validKeys.length; i++) {
5+
if (object.hasOwnProperty(validKeys[i])) {
6+
result[validKeys[i]] = object[validKeys[i]];
7+
}
8+
}
9+
}
10+
return result;
11+
}
12+
13+
export function omitInObject(object, validKeys) {
14+
let result = {};
15+
if (object) {
16+
result = {...object};
17+
if (validKeys && validKeys.length > 0) {
18+
for (let i = 0; i < validKeys.length; i++) {
19+
if (result.hasOwnProperty(validKeys[i])) {
20+
delete result[validKeys[i]];
21+
}
22+
}
23+
}
24+
}
25+
return result;
26+
}

‎src/framework/components/ComponentComposer/ComponentComposer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ const renderComponent = (userComponents, description, rootProps) => {
143143
|| type === constants.COMPONENT_PROPERTY_ANY_TYPE
144144
|| type === constants.COMPONENT_PROPERTY_NUMBER_TYPE) {
145145
if (rootProps) {
146-
if (propertyName) {
146+
if (propertyName && propertyName !== constants.COMPONENT_PROPERTY_DO_NOT_USE_IN_FLOWS_NAME) {
147147
rootProps[propertyName] = propertyValue;
148148
} else {
149149
if (typeof propertyValue !== 'undefined') {

‎src/framework/components/ComponentComposer/ComponentWrapper.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1+
import { pickInObject, omitInObject } from '../../commons/utilities';
12
import React, {Component} from 'react';
23

34
class ComponentWrapper extends Component {
45
render() {
5-
const {wrappedComponent, propsComponent, cloneProps, children} = this.props;
6-
return React.createElement(wrappedComponent, {...propsComponent, ...cloneProps}, children);
6+
const wrapperPicked = pickInObject(this.props, ['wrappedComponent', 'propsComponent', 'children']);
7+
const restPicked = omitInObject(
8+
this.props,
9+
[
10+
'wrappedComponent', 'propsComponent', 'children'
11+
]
12+
);
13+
const {wrappedComponent, propsComponent, children} = wrapperPicked;
14+
return React.createElement(wrappedComponent, {...restPicked, ...propsComponent}, children);
715
}
816
}
917

‎src/framework/components/PageComposer/ComponentWrapper.js‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import isEqual from 'lodash/isEqual';
2+
import { pickInObject, omitInObject } from '../../commons/utilities';
23
import React, {Component} from 'react';
34
import ReactDOM from 'react-dom';
45
import { isVisible } from './utilities';
@@ -249,7 +250,27 @@ class ComponentWrapper extends Component {
249250
}
250251

251252
render() {
252-
const {elementKey, wrappedComponent, wrappedProps, cloneProps, children} = this.props;
253+
const wrapperPicked = pickInObject(this.props, ['elementKey', 'wrappedComponent', 'wrappedProps', 'children']);
254+
const restPicked = omitInObject(
255+
this.props,
256+
[
257+
'isSelected',
258+
'elementKey',
259+
'wrappedComponent',
260+
'wrappedProps',
261+
'cloneProps',
262+
'children',
263+
'itemWasDropped',
264+
'draggedItem',
265+
'draggedItemPosition',
266+
'onMouseDown',
267+
'onContextMenuClick',
268+
'onComponentInstanceInitialize',
269+
'onComponentInstanceDestroy',
270+
'doNotUseInFlows'
271+
]
272+
);
273+
const {elementKey, wrappedComponent, wrappedProps, children} = wrapperPicked;
253274
if (!wrappedComponent) {
254275
return (
255276
<div key={elementKey} style={style}>
@@ -264,7 +285,7 @@ class ComponentWrapper extends Component {
264285
</div>
265286
);
266287
}
267-
return React.createElement(wrappedComponent, {...wrappedProps, ...cloneProps}, children);
288+
return React.createElement(wrappedComponent, {...restPicked, ...wrappedProps}, children);
268289
}
269290
}
270291

‎src/framework/components/PageComposer/PageComposer.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,11 @@ const renderComponent = (userComponents, description, serviceComponentOptions, r
7070
propsComponent = renderComponent(userComponents, child, serviceComponentOptions, propsComponent);
7171
});
7272
}
73+
let nestedComponents = [];
74+
if (propsComponent.children && isArray(propsComponent.children)) {
75+
nestedComponents = propsComponent.children;
76+
delete propsComponent.children;
77+
}
7378
const wrapperProps = {
7479
key,
7580
elementKey: key,
@@ -78,11 +83,6 @@ const renderComponent = (userComponents, description, serviceComponentOptions, r
7883
isSelected,
7984
...serviceComponentOptions,
8085
};
81-
let nestedComponents = [];
82-
if (propsComponent.children && isArray(propsComponent.children)) {
83-
nestedComponents = propsComponent.children;
84-
delete propsComponent.children;
85-
}
8686
newElement = React.createElement(ComponentWrapper, wrapperProps, nestedComponents);
8787
} else {
8888
newElement = React.createElement(NotFoundComponent, {componentName});
@@ -160,7 +160,7 @@ const renderComponent = (userComponents, description, serviceComponentOptions, r
160160
|| type === constants.COMPONENT_PROPERTY_ANY_TYPE
161161
|| type === constants.COMPONENT_PROPERTY_NUMBER_TYPE) {
162162
if (rootProps) {
163-
if (propertyName) {
163+
if (propertyName && propertyName !== constants.COMPONENT_PROPERTY_DO_NOT_USE_IN_FLOWS_NAME) {
164164
rootProps[propertyName] = propertyValue;
165165
} else {
166166
if (typeof propertyValue !== 'undefined') {

‎src/framework/components/PageComposer/utilities.js‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -23,34 +23,34 @@ export function isVisible(el) {
2323
return false;
2424
}
2525

26-
function getPosition1(el) {
27-
let xPos = 0;
28-
let yPos = 0;
29-
let width = el.offsetWidth;
30-
let height = el.offsetHeight;
31-
32-
while (el) {
33-
if (el.tagName === 'BODY') {
34-
// deal with browser quirks with body/window/document and page scroll
35-
let xScroll = window.pageXOffset || document.documentElement.scrollLeft;
36-
let yScroll = window.pageYOffset || document.documentElement.scrollTop;
37-
38-
xPos += (el.offsetLeft - xScroll + el.clientLeft);
39-
yPos += (el.offsetTop - yScroll + el.clientTop);
40-
} else {
41-
// for all other non-BODY elements
42-
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
43-
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
44-
}
45-
el = el.offsetParent;
46-
}
47-
return {
48-
left: xPos,
49-
top: yPos,
50-
right: xPos + width,
51-
bottom: yPos + height,
52-
};
53-
}
26+
// function getPosition1(el) {
27+
// let xPos = 0;
28+
// let yPos = 0;
29+
// let width = el.offsetWidth;
30+
// let height = el.offsetHeight;
31+
//
32+
// while (el) {
33+
// if (el.tagName === 'BODY') {
34+
// // deal with browser quirks with body/window/document and page scroll
35+
// let xScroll = window.pageXOffset || document.documentElement.scrollLeft;
36+
// let yScroll = window.pageYOffset || document.documentElement.scrollTop;
37+
//
38+
// xPos += (el.offsetLeft - xScroll + el.clientLeft);
39+
// yPos += (el.offsetTop - yScroll + el.clientTop);
40+
// } else {
41+
// // for all other non-BODY elements
42+
// xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
43+
// yPos += (el.offsetTop - el.scrollTop + el.clientTop);
44+
// }
45+
// el = el.offsetParent;
46+
// }
47+
// return {
48+
// left: xPos,
49+
// top: yPos,
50+
// right: xPos + width,
51+
// bottom: yPos + height,
52+
// };
53+
// }
5454

5555
function getPosition2(el) {
5656
const rect = el.getBoundingClientRect();

‎src/framework/components/PageComposition/Container.js‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { pickInObject, omitInObject } from '../../commons/utilities';
23
import { connect } from 'react-redux';
34
import { bindActionCreators } from 'redux';
45
import { createStructuredSelector } from 'reselect';
@@ -68,33 +69,57 @@ class Container extends React.Component {
6869
}
6970

7071
render () {
72+
const wrapperPicked = pickInObject(
73+
this.props,
74+
['wrappedComponent', 'wrappedProps', 'stateProps', 'populatedProps', 'children']
75+
);
76+
const restPicked = omitInObject(
77+
this.props,
78+
[
79+
'componentKey',
80+
'componentName',
81+
'componentInstance',
82+
'containerEventHandlers',
83+
'containerProperties',
84+
'wrappedProps',
85+
'populatedProps',
86+
'wrappedComponent',
87+
'children'
88+
]
89+
);
7190
const {
7291
wrappedComponent,
7392
wrappedProps,
7493
stateProps,
7594
populatedProps,
76-
cloneProps, // this props may come from the parent component that wants to clone this instance
7795
children
78-
} = this.props;
96+
} = wrapperPicked;
7997
return React.createElement(
8098
wrappedComponent,
81-
{ ...wrappedProps, ...cloneProps, ...this.wrappedHandlers, ...populatedProps, ...stateProps },
99+
{ ...restPicked, ...wrappedProps, ...this.wrappedHandlers, ...populatedProps, ...stateProps },
82100
children
83101
);
84102
}
85103
}
86104

87105
class Component extends React.Component {
88106
render () {
107+
const wrapperPicked = pickInObject(
108+
this.props,
109+
['wrappedComponent', 'wrappedProps', 'children']
110+
);
111+
const restPicked = omitInObject(
112+
this.props,
113+
['wrappedComponent', 'wrappedProps', 'children']
114+
);
89115
const {
90116
wrappedComponent,
91117
wrappedProps,
92-
cloneProps, // this props may come from the parent component that wants to clone this instance
93118
children
94-
} = this.props;
119+
} = wrapperPicked;
95120
return React.createElement(
96121
wrappedComponent,
97-
{ ...wrappedProps, ...cloneProps },
122+
{ ...restPicked, ...wrappedProps },
98123
children
99124
);
100125
}
@@ -133,7 +158,6 @@ export default function createContainer (
133158
});
134159

135160
const wrapperProps = {
136-
key: props.key,
137161
componentKey,
138162
componentName,
139163
componentInstance,

0 commit comments

Comments
 (0)