Skip to content

Commit 536b741

Browse files
dimaipdimaip
committed
TASK: compatibility with neos-ui 4.x
1 parent af37dd3 commit 536b741

File tree

7 files changed

+3081
-1843
lines changed

7 files changed

+3081
-1843
lines changed

‎Resources/Private/StructuredEditing/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"watch": "neos-react-scripts watch"
77
},
88
"devDependencies": {
9-
"@neos-project/neos-ui-extensibility": "^2"
9+
"@neos-project/neos-ui-extensibility": "^4"
1010
},
1111
"neos": {
1212
"buildTargetDirectory": "../../Public/JavaScript/StructuredEditing"

‎Resources/Private/StructuredEditing/src/context.js

-13
This file was deleted.

‎Resources/Private/StructuredEditing/src/manifest.js

+142-110
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,58 @@
1-
import React, {PureComponent} from 'react';
2-
import PropTypes from 'prop-types';
3-
import ReactDOM from 'react-dom';
4-
import manifest from '@neos-project/neos-ui-extensibility';
5-
import {selectors} from '@neos-project/neos-ui-redux-store';
6-
import {DropDown, Icon} from '@neos-project/react-ui-components';
7-
import {connect} from 'react-redux';
8-
import {$transform, $get} from 'plow-js';
9-
import {EditorEnvelope} from '@neos-project/neos-ui-editors';
10-
import {NeosContext} from '@neos-project/neos-ui-decorators';
11-
import withDragDropContextGuest from './context';
1+
import React, { PureComponent } from "react";
2+
import PropTypes from "prop-types";
3+
import ReactDOM from "react-dom";
4+
import manifest from "@neos-project/neos-ui-extensibility";
5+
import { selectors } from "@neos-project/neos-ui-redux-store";
6+
import { DropDown, Icon } from "@neos-project/react-ui-components";
7+
import { connect } from "react-redux";
8+
import { $transform, $get } from "plow-js";
9+
import { Provider } from "react-redux";
10+
import { DndProvider } from "react-dnd";
11+
import HTML5Backend from "react-dnd-html5-backend";
12+
import { EditorEnvelope } from "@neos-project/neos-ui-editors";
13+
import { NeosContext } from "@neos-project/neos-ui-decorators";
1214

13-
@connect($transform({
14-
currentlyEditedPropertyName: selectors.UI.ContentCanvas.currentlyEditedPropertyName,
15+
@connect(
16+
$transform({
17+
currentlyEditedPropertyName:
18+
selectors.UI.ContentCanvas.currentlyEditedPropertyName,
1519
getNodeByContextPath: selectors.CR.Nodes.nodeByContextPath,
16-
focusedNodePath: selectors.CR.Nodes.focusedNodePathSelector
17-
}))
20+
focusedNodePath: selectors.CR.Nodes.focusedNodePathSelector,
21+
})
22+
)
1823
class InlineEditorEnvelope extends PureComponent {
19-
state = {
20-
isOpen: false
21-
}
22-
static childContextTypes = {
23-
store: PropTypes.object.isRequired,
24-
globalRegistry: PropTypes.object.isRequired,
25-
configuration: PropTypes.object.isRequired,
26-
routes: PropTypes.object.isRequired
27-
};
28-
getChildContext() {
29-
const {configuration, globalRegistry, routes, store} = this.props;
30-
return {configuration, globalRegistry, routes, store};
31-
}
32-
handleToggle = () => {
33-
this.setState({isOpen: !this.state.isOpen});
34-
}
35-
render() {
36-
const {contextPath, fusionPath, propertyName, persistChange, editorOptions, getNodeByContextPath} = this.props;
37-
const node = getNodeByContextPath(contextPath);
38-
const nodeTypeName = $get('nodeType', node);
39-
const nodeType = this.props.nodeTypesRegistry.getNodeType(nodeTypeName);
40-
const icon = $get('icon', editorOptions) || 'pencil';
41-
const value = $get(['properties', propertyName], node);
42-
return (
43-
<div style={{display: 'inline-block'}}>
44-
<DropDown.Stateless isOpen={this.state.isOpen} padded={true} onToggle={this.handleToggle} onClose={() => null}>
45-
<DropDown.Header className="enveloper_dropdown_header">
46-
<style>{'\
24+
state = {
25+
isOpen: false,
26+
};
27+
handleToggle = () => {
28+
this.setState({ isOpen: !this.state.isOpen });
29+
};
30+
render() {
31+
const {
32+
contextPath,
33+
fusionPath,
34+
propertyName,
35+
persistChange,
36+
editorOptions,
37+
getNodeByContextPath,
38+
} = this.props;
39+
const node = getNodeByContextPath(contextPath);
40+
const nodeTypeName = $get("nodeType", node);
41+
const nodeType = this.props.nodeTypesRegistry.getNodeType(nodeTypeName);
42+
const icon = $get("icon", editorOptions) || "pencil";
43+
const value = $get(["properties", propertyName], node);
44+
return (
45+
<div style={{ display: "inline-block" }}>
46+
<DropDown.Stateless
47+
isOpen={this.state.isOpen}
48+
padded={true}
49+
onToggle={this.handleToggle}
50+
onClose={() => null}
51+
>
52+
<DropDown.Header className="enveloper_dropdown_header">
53+
<style>
54+
{
55+
"\
4756
.enveloper_dropdown_header{\
4857
position: relative;\
4958
width: 30px;\
@@ -62,78 +71,101 @@ class InlineEditorEnvelope extends PureComponent {
6271
.enveloper_dropdown_header svg:nth-child(3) {\
6372
display: none;\
6473
}\
65-
'}</style>
66-
<Icon className="enveloper_dropdown_icon" icon={icon} />
67-
</DropDown.Header>
68-
<DropDown.Contents className="enveloper_dropdown_contents" scrollable={false}>
69-
<div>
70-
<EditorEnvelope
71-
identifier={propertyName}
72-
label={$get('label', editorOptions) || $get(['properties', propertyName, 'ui', 'label'], nodeType) || ''}
73-
editor={$get('editor', editorOptions)}
74-
value={value && value.toJS ? value.toJS() : value}
75-
hooks={null}
76-
options={editorOptions}
77-
commit={value => {
78-
persistChange({
79-
type: 'Neos.Neos.Ui:Property',
80-
subject: contextPath,
81-
payload: {
82-
propertyName,
83-
value,
84-
nodeDomAddress: {
85-
contextPath,
86-
fusionPath
87-
}
88-
}
89-
});
90-
}}
91-
renderSecondaryInspector={() => null}
92-
/>
93-
</div>
94-
</DropDown.Contents>
95-
</DropDown.Stateless>
74+
"
75+
}
76+
</style>
77+
<Icon className="enveloper_dropdown_icon" icon={icon} />
78+
</DropDown.Header>
79+
<DropDown.Contents
80+
className="enveloper_dropdown_contents"
81+
scrollable={false}
82+
>
83+
<div>
84+
<EditorEnvelope
85+
identifier={propertyName}
86+
label={
87+
$get("label", editorOptions) ||
88+
$get(["properties", propertyName, "ui", "label"], nodeType) ||
89+
""
90+
}
91+
editor={$get("editor", editorOptions)}
92+
value={value && value.toJS ? value.toJS() : value}
93+
hooks={null}
94+
options={editorOptions}
95+
commit={(value) => {
96+
persistChange({
97+
type: "Neos.Neos.Ui:Property",
98+
subject: contextPath,
99+
payload: {
100+
propertyName,
101+
value,
102+
nodeDomAddress: {
103+
contextPath,
104+
fusionPath,
105+
},
106+
},
107+
});
108+
}}
109+
renderSecondaryInspector={() => null}
110+
/>
96111
</div>
97-
);
98-
}
112+
</DropDown.Contents>
113+
</DropDown.Stateless>
114+
</div>
115+
);
116+
}
99117
}
100118

101119
const findParentFusionPath = (node, contextPath) => {
102-
if (node) {
103-
const fusionPath = node.getAttribute('data-__neos-fusion-path');
104-
if (fusionPath && node.getAttribute('data-__neos-node-contextpath') === contextPath) {
105-
return fusionPath;
106-
}
107-
return findParentFusionPath(node.parentNode, contextPath);
120+
if (node) {
121+
const fusionPath = node.getAttribute("data-__neos-fusion-path");
122+
if (
123+
fusionPath &&
124+
node.getAttribute("data-__neos-node-contextpath") === contextPath
125+
) {
126+
return fusionPath;
108127
}
109-
return null;
128+
return findParentFusionPath(node.parentNode, contextPath);
129+
}
130+
return null;
110131
};
111132

112-
manifest('Flowpack.StructuredEditing:EditorEnvelope', {}, (globalRegistry, {routes, configuration, store}) => {
113-
const inlineEditorRegistry = globalRegistry.get('inlineEditors');
114-
const nodeTypesRegistry = globalRegistry.get('@neos-project/neos-ui-contentrepository');
115-
inlineEditorRegistry.set('Flowpack.StructuredEditing/EditorEnvelope', {
116-
bootstrap: () => null,
117-
createInlineEditor: config => {
118-
const domNode = config.propertyDomNode;
119-
const guestWindow = domNode.ownerDocument.defaultView;
120-
const fusionPath = findParentFusionPath(domNode, config.contextPath);
121-
const InlineEditorEnvelopeWithDnd = withDragDropContextGuest(guestWindow)(InlineEditorEnvelope);
122-
ReactDOM.render(
123-
(
124-
<NeosContext.Provider value={{configuration, globalRegistry, routes}}>
125-
<InlineEditorEnvelopeWithDnd
126-
globalRegistry={globalRegistry}
127-
routes={routes}
128-
configuration={configuration}
129-
store={store}
130-
fusionPath={fusionPath}
131-
nodeTypesRegistry={nodeTypesRegistry}
132-
{...config}
133-
/>
134-
</NeosContext.Provider>
135-
), domNode);
136-
},
137-
ToolbarComponent: () => null
133+
manifest(
134+
"Flowpack.StructuredEditing:EditorEnvelope",
135+
{},
136+
(globalRegistry, { routes, configuration, store }) => {
137+
const inlineEditorRegistry = globalRegistry.get("inlineEditors");
138+
const nodeTypesRegistry = globalRegistry.get(
139+
"@neos-project/neos-ui-contentrepository"
140+
);
141+
inlineEditorRegistry.set("Flowpack.StructuredEditing/EditorEnvelope", {
142+
bootstrap: () => null,
143+
createInlineEditor: (config) => {
144+
const domNode = config.propertyDomNode;
145+
const guestWindow = domNode.ownerDocument.defaultView;
146+
const fusionPath = findParentFusionPath(domNode, config.contextPath);
147+
ReactDOM.render(
148+
<Provider store={store}>
149+
<NeosContext.Provider
150+
value={{ configuration, globalRegistry, routes }}
151+
>
152+
<DndProvider backend={HTML5Backend} context={guestWindow}>
153+
<InlineEditorEnvelope
154+
globalRegistry={globalRegistry}
155+
routes={routes}
156+
configuration={configuration}
157+
store={store}
158+
fusionPath={fusionPath}
159+
nodeTypesRegistry={nodeTypesRegistry}
160+
{...config}
161+
/>
162+
</DndProvider>
163+
</NeosContext.Provider>
164+
</Provider>,
165+
domNode
166+
);
167+
},
168+
ToolbarComponent: () => null,
138169
});
139-
});
170+
}
171+
);

0 commit comments

Comments
 (0)