Skip to content

Commit ebbd889

Browse files
ipselonipselon
committed
Add clone properties to each component wrapper
1 parent 4d1f7a1 commit ebbd889

7 files changed

Lines changed: 80 additions & 69 deletions

File tree

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import get from 'lodash/get';
22
import cloneDeep from 'lodash/cloneDeep';
33
import React from 'react';
44
import PropTypes from 'prop-types';
5+
import ComponentWrapper from './ComponentWrapper';
56
import NotFoundComponent from '../NotFoundComponent';
67
import Placeholder from './Placeholder';
78

@@ -63,7 +64,10 @@ const renderComponent = (userComponents, description, rootProps) => {
6364
propsComponent = renderComponent(userComponents, child, propsComponent);
6465
});
6566
}
66-
newElement = React.createElement(component, propsComponent, {key});
67+
newElement = React.createElement(
68+
ComponentWrapper,
69+
{wrappedComponent: component, propsComponent, key}
70+
);
6771
} else {
6872
newElement = React.createElement(NotFoundComponent, {componentName});
6973
}
@@ -89,7 +93,7 @@ const renderComponent = (userComponents, description, rootProps) => {
8993
}
9094
} else {
9195
if (propertyValue) {
92-
rootProps = cloneDeep(propertyValue);
96+
rootProps.push(cloneDeep(propertyValue));
9397
}
9498
}
9599
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, {Component} from 'react';
2+
3+
class ComponentWrapper extends Component {
4+
render() {
5+
const {wrappedComponent, propsComponent, cloneProps, children} = this.props;
6+
return React.createElement(wrappedComponent, {...propsComponent, ...cloneProps}, children);
7+
}
8+
}
9+
10+
export default ComponentWrapper;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ class ComponentWrapper extends Component {
249249
}
250250

251251
render() {
252-
const {elementKey, wrappedComponent, wrappedProps, children} = this.props;
252+
const {elementKey, wrappedComponent, wrappedProps, cloneProps, children} = this.props;
253253
if (!wrappedComponent) {
254254
return (
255255
<div key={elementKey} style={style}>
@@ -264,7 +264,7 @@ class ComponentWrapper extends Component {
264264
</div>
265265
);
266266
}
267-
return React.createElement(wrappedComponent, wrappedProps, children);
267+
return React.createElement(wrappedComponent, {...wrappedProps, ...cloneProps}, children);
268268
}
269269
}
270270

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ const renderComponent = (userComponents, description, serviceComponentOptions, r
107107
}
108108
} else {
109109
if (propertyValue) {
110-
rootProps = cloneDeep(propertyValue);
110+
rootProps.push(cloneDeep(propertyValue));
111111
}
112112
}
113113
}

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

Lines changed: 30 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,15 @@ import { bindActionCreators } from 'redux';
44
import { createStructuredSelector } from 'reselect';
55
import createContainerSelector from '../../store/selectors';
66
import createContainerActions from '../../store/actions';
7-
import { getComponentName } from '../NotFoundComponent/NotFoundComponent';
87

98
let sendDebugMessage;
109
let constants;
1110
if (process.env.NODE_ENV !== 'production') {
1211
sendDebugMessage = require('../../commons/sendMessage').default;
1312
constants = require('../../commons/constants');
1413
}
15-
class ErrorBoundary extends React.Component {
16-
constructor (props) {
17-
super(props);
18-
this.state = { hasError: false, error: null };
19-
}
20-
21-
componentDidCatch (error, info) {
22-
this.setState({ hasError: true, error });
23-
}
24-
25-
render () {
26-
const {hasError, error} = this.state;
27-
if (hasError) {
28-
const { componentName } = this.props;
29-
return (
30-
<div style={{color: 'white', backgroundColor: 'red', borderRadius: '4px', padding: '.5em'}}>
31-
<code>Error occurred in "{getComponentName(componentName)}" component: </code>
32-
<code>{error && error.message}</code>
33-
</div>
34-
);
35-
}
36-
return this.props.children;
37-
}
38-
}
3914

4015
class Container extends React.Component {
41-
4216
constructor (props, context) {
4317
super(props, context);
4418
const {
@@ -98,11 +72,29 @@ class Container extends React.Component {
9872
wrappedComponent,
9973
wrappedProps,
10074
stateProps,
75+
populatedProps,
76+
cloneProps, // this props may come from the parent component that wants to clone this instance
77+
children
78+
} = this.props;
79+
return React.createElement(
80+
wrappedComponent,
81+
{ ...wrappedProps, ...cloneProps, ...this.wrappedHandlers, ...populatedProps, ...stateProps },
82+
children
83+
);
84+
}
85+
}
86+
87+
class Component extends React.Component {
88+
render () {
89+
const {
90+
wrappedComponent,
91+
wrappedProps,
92+
cloneProps, // this props may come from the parent component that wants to clone this instance
10193
children
10294
} = this.props;
10395
return React.createElement(
10496
wrappedComponent,
105-
{ ...wrappedProps, ...this.wrappedHandlers, ...stateProps },
97+
{ ...wrappedProps, ...cloneProps },
10698
children
10799
);
108100
}
@@ -116,6 +108,7 @@ export default function createContainer (
116108
containerEventHandlers,
117109
containerProperties,
118110
props = {},
111+
populatedProps,
119112
nestedComponents = null
120113
) {
121114

@@ -147,26 +140,20 @@ export default function createContainer (
147140
containerEventHandlers,
148141
containerProperties,
149142
wrappedProps: props,
143+
populatedProps,
150144
wrappedComponent,
151145
};
152146

153-
return (
154-
<ErrorBoundary key={`errorBoundary_${props.key}`} componentName={componentName}>
155-
{React.createElement(
156-
connect(mapStateToProps, mapDispatchToProps)(Container),
157-
wrapperProps,
158-
nestedComponents
159-
)}
160-
</ErrorBoundary>
147+
return React.createElement(
148+
connect(mapStateToProps, mapDispatchToProps)(Container),
149+
{ ...wrapperProps, key: `container_${props.key}` },
150+
nestedComponents
161151
);
162152
}
163-
return (
164-
<ErrorBoundary key={`errorBoundary_${props.key}`} componentName={componentName}>
165-
{React.createElement(
166-
wrappedComponent,
167-
props,
168-
nestedComponents
169-
)}
170-
</ErrorBoundary>
153+
154+
return React.createElement(
155+
Component,
156+
{ wrappedComponent, wrappedProps: props, key: `component_${props.key}` },
157+
nestedComponents
171158
);
172159
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
3+
class ErrorBoundary extends React.Component {
4+
constructor (props) {
5+
super(props);
6+
this.state = { hasError: false, error: null };
7+
}
8+
9+
componentDidCatch (error, info) {
10+
this.setState({ hasError: true, error });
11+
}
12+
13+
render () {
14+
const {hasError, error} = this.state;
15+
if (hasError) {
16+
const { pageName } = this.props;
17+
return (
18+
<div style={{color: 'white', backgroundColor: 'red', borderRadius: '4px', padding: '.5em'}}>
19+
<code>Error occurred in "{pageName}" page: </code>
20+
<code>{error && error.message}</code>
21+
</div>
22+
);
23+
}
24+
return this.props.children;
25+
}
26+
}

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

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ class PageComposition extends Component {
5151
const result = {};
5252
forOwn(descriptionShape, (value, prop) => {
5353
if (value) {
54-
if (isArray(value) && value.length > 0){
54+
if (isArray(value)){
5555
result[prop] = this.renderArray(value);
5656
} else if (isPlainObject(value)) {
5757
if (value.type && value.instance) {
@@ -111,25 +111,9 @@ class PageComposition extends Component {
111111
if (!type) {
112112
return null;
113113
}
114-
const propsComponents = {};
114+
let propsComponents = {};
115115
if (props) {
116-
forOwn(props, (value, prop) => {
117-
if (value) {
118-
if (isArray(value)) {
119-
propsComponents[prop] = this.renderArray(value);
120-
} else if (isPlainObject(value)) {
121-
if (value.type && value.instance) {
122-
propsComponents[prop] = this.renderComponent(value);
123-
} else {
124-
propsComponents[prop] = this.renderShape(value);
125-
}
126-
} else {
127-
propsComponents[prop] = value;
128-
}
129-
} else {
130-
propsComponents[prop] = value;
131-
}
132-
});
116+
propsComponents = this.renderShape(props);
133117
}
134118
let nestedComponents = [];
135119
if (children && children.length > 0) {
@@ -213,9 +197,9 @@ class PageComposition extends Component {
213197
{
214198
key: key || `${containerKey}_${uniqueId('c')}`,
215199
...props,
216-
...propsComponents,
217-
...populatedProps
200+
...propsComponents
218201
},
202+
populatedProps,
219203
nestedComponents
220204
);
221205
}

0 commit comments

Comments
 (0)