From 4d1baf9289c020b93fa2683d909d3aa23cc67ee9 Mon Sep 17 00:00:00 2001 From: Wilhelm Behncke Date: Sun, 25 Dec 2022 17:55:15 +0100 Subject: [PATCH] TASK: Remove plow-js from `@neos-project/neos-ui-editors` --- packages/neos-ui-editors/package.json | 2 +- .../src/Editors/AssetEditor/index.js | 20 ++--- .../src/Editors/CKEditor/index.js | 3 +- .../src/Editors/CodeMirror/index.js | 5 +- .../src/Editors/DateTime/index.js | 11 ++- .../Image/Components/ResizeControls/index.js | 9 +-- .../src/Editors/Image/Utils/index.js | 48 ++++++------ .../src/Editors/Image/index.js | 75 +++++++++++++------ .../src/Editors/MasterPlugin/index.js | 9 +-- .../src/Editors/NodeType/index.js | 13 ++-- .../src/Editors/PluginView/index.js | 19 +++-- .../src/Editors/PluginViews/index.js | 10 +-- .../src/Editors/Reference/createNew.js | 12 +-- .../Editors/Reference/referenceDataLoader.js | 14 ++-- .../DataSourceBasedSelectBoxEditor.js | 5 +- .../src/Library/AssetUpload.js | 7 +- .../neos-ui-editors/src/Library/LinkInput.js | 21 +++--- .../src/Library/LinkInputOptions.js | 11 ++- .../neos-ui-editors/src/Library/NodeOption.js | 3 +- .../SecondaryEditors/CKEditorWrap/index.js | 6 +- .../SecondaryEditors/ImageCropper/index.js | 7 +- .../SecondaryEditors/ImageCropper/model.js | 7 +- .../MediaDetailsScreen/index.js | 3 +- .../MediaSelectionScreen/index.js | 3 +- yarn.lock | 2 +- 25 files changed, 171 insertions(+), 154 deletions(-) diff --git a/packages/neos-ui-editors/package.json b/packages/neos-ui-editors/package.json index b300918faa..12284f7a84 100644 --- a/packages/neos-ui-editors/package.json +++ b/packages/neos-ui-editors/package.json @@ -32,13 +32,13 @@ "@neos-project/utils-helpers": "workspace:*", "classnames": "^2.2.3", "codemirror": "^5.58.2", + "immer": "^9.0.0", "lodash.debounce": "^4.0.8", "lodash.memoize": "^4.1.2", "lodash.omit": "^4.5.0", "lodash.unescape": "4.0.1", "moment": "^2.20.1", "monet": "^0.9.2", - "plow-js": "^2.2.0", "react-codemirror2": "7.2.1", "react-dnd": "^10.0.0", "react-dropzone": "^3.13.2", diff --git a/packages/neos-ui-editors/src/Editors/AssetEditor/index.js b/packages/neos-ui-editors/src/Editors/AssetEditor/index.js index f6d178b892..df785b2572 100644 --- a/packages/neos-ui-editors/src/Editors/AssetEditor/index.js +++ b/packages/neos-ui-editors/src/Editors/AssetEditor/index.js @@ -4,7 +4,7 @@ import MultiSelectBox from '@neos-project/react-ui-components/src/MultiSelectBox import SelectBox from '@neos-project/react-ui-components/src/SelectBox/'; import {dndTypes} from '@neos-project/neos-ui-constants'; import {neos} from '@neos-project/neos-ui-decorators'; -import {$get} from 'plow-js'; + import Controls from './Components/Controls/index'; import AssetOption from '../../Library/AssetOption'; import {AssetUpload} from '../../Library/index'; @@ -185,7 +185,7 @@ export default class AssetEditor extends PureComponent { } renderControls() { - const disabled = $get('options.disabled', this.props); + const disabled = this.props?.options?.disabled; return ( ); } renderAssetMultiSelect() { - const disabled = $get('options.disabled', this.props); + const disabled = this.props?.options?.disabled; return ( ); diff --git a/packages/neos-ui-editors/src/Editors/CKEditor/index.js b/packages/neos-ui-editors/src/Editors/CKEditor/index.js index 849665f794..e4f902d86e 100644 --- a/packages/neos-ui-editors/src/Editors/CKEditor/index.js +++ b/packages/neos-ui-editors/src/Editors/CKEditor/index.js @@ -1,6 +1,5 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {$get} from 'plow-js'; import Button from '@neos-project/react-ui-components/src/Button/'; import Icon from '@neos-project/react-ui-components/src/Icon/'; @@ -28,7 +27,7 @@ export default class CKEditor extends PureComponent { render() { const {label, identifier, className} = this.props; - const disabled = $get('options.disabled', this.props); + const disabled = this.props?.options?.disabled; const handleClick = () => (disabled ? null : this.handleOpenCodeEditor); return ( diff --git a/packages/neos-ui-editors/src/Editors/CodeMirror/index.js b/packages/neos-ui-editors/src/Editors/CodeMirror/index.js index c16c64de61..9227223d0b 100644 --- a/packages/neos-ui-editors/src/Editors/CodeMirror/index.js +++ b/packages/neos-ui-editors/src/Editors/CodeMirror/index.js @@ -1,6 +1,5 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {$get} from 'plow-js'; import Button from '@neos-project/react-ui-components/src/Button/'; import Icon from '@neos-project/react-ui-components/src/Icon/'; @@ -33,7 +32,7 @@ export default class CodeMirror extends PureComponent { render() { const {label, identifier, className} = this.props; - const disabled = $get('options.disabled', this.props); + const disabled = this.props?.options?.disabled; const handleClick = () => disabled ? null : this.handleOpenCodeEditor; return ( @@ -55,7 +54,7 @@ export default class CodeMirror extends PureComponent { handleOpenCodeEditor = () => { const {secondaryEditorsRegistry} = this.props; - const highlightingModeFromOptions = $get('options.highlightingMode', this.props); + const highlightingModeFromOptions = this.props?.options?.highlightingMode; const highlightingMode = highlightingModeFromOptions ? highlightingModeFromOptions : this.props.highlightingMode; const {component: CodeMirrorWrap} = secondaryEditorsRegistry.get('Neos.Neos/Inspector/Secondary/Editors/CodeMirrorWrap'); diff --git a/packages/neos-ui-editors/src/Editors/DateTime/index.js b/packages/neos-ui-editors/src/Editors/DateTime/index.js index 92cb946efb..5c48e56a25 100644 --- a/packages/neos-ui-editors/src/Editors/DateTime/index.js +++ b/packages/neos-ui-editors/src/Editors/DateTime/index.js @@ -5,13 +5,12 @@ import moment from 'moment'; import {neos} from '@neos-project/neos-ui-decorators'; import convertPhpDateFormatToMoment, {hasDateFormat, hasTimeFormat} from './helpers'; import {connect} from 'react-redux'; -import {$transform, $get} from 'plow-js'; @neos(globalRegistry => ({ i18nRegistry: globalRegistry.get('i18n') })) -@connect($transform({ - interfaceLanguage: $get('user.preferences.interfaceLanguage') +@connect(state => ({ + interfaceLanguage: state?.user?.preferences?.interfaceLanguage })) class DateTime extends PureComponent { static propTypes = { @@ -47,9 +46,9 @@ class DateTime extends PureComponent { const timeConstraints = Object.assign({ minutes: { - step: $get('minuteStep', options) || 5 + step: options?.minuteStep || 5 } - }, $get('timeConstraints', options)); + }, options?.timeConstraints); return ( () => { if (props.resizeAdjustment) { props.onChange(null); } else { - props.onChange(buildResizeAdjustment($get('width', props.imageDimensions), $get('height', props.imageDimensions))); + props.onChange(buildResizeAdjustment(props.imageDimensions?.width, props.imageDimensions?.height)); } }; const onChangeValue = (props, heightOrWidth) => changedValue => { let height = 0; let width = 0; - const aspectRatio = $get('height', props.imageDimensions) / $get('width', props.imageDimensions); + const aspectRatio = props.imageDimensions?.height / props.imageDimensions?.width; if (heightOrWidth === 'height') { height = changedValue; @@ -67,7 +66,7 @@ const ResizeControls = props => { pattern="\d*" step="1" min="0" - value={$get('width', props.resizeAdjustment) || $get('width', props.imageDimensions) || 0} + value={props.resizeAdjustment?.width || props.imageDimensions?.width || 0} onChange={onChangeValue(props, 'width')} disabled={props.disabled} /> @@ -92,7 +91,7 @@ const ResizeControls = props => { pattern="\d*" step="1" min="0" - value={$get('height', props.resizeAdjustment) || $get('height', props.imageDimensions) || 0} + value={props.resizeAdjustment?.height || props.imageDimensions?.height || 0} onChange={onChangeValue(props, 'height')} disabled={props.disabled} /> diff --git a/packages/neos-ui-editors/src/Editors/Image/Utils/index.js b/packages/neos-ui-editors/src/Editors/Image/Utils/index.js index fc4622238a..40b704bd39 100644 --- a/packages/neos-ui-editors/src/Editors/Image/Utils/index.js +++ b/packages/neos-ui-editors/src/Editors/Image/Utils/index.js @@ -1,27 +1,15 @@ -import {$get, $map, $transform} from 'plow-js'; import {Maybe} from 'monet'; -export const CROP_IMAGE_ADJUSTMENT = [ - 'object', - 'adjustments', - 'Neos\\Media\\Domain\\Model\\Adjustment\\CropImageAdjustment' -]; -export const RESIZE_IMAGE_ADJUSTMENT = [ - 'object', - 'adjustments', - 'Neos\\Media\\Domain\\Model\\Adjustment\\ResizeImageAdjustment' -]; - const DEFAULT_OFFSET = {x: 0, y: 0}; -const extractOriginalDimensions = $transform({ - width: $get('originalDimensions.width'), - height: $get('originalDimensions.height') +const extractOriginalDimensions = image => ({ + width: image?.originalDimensions?.width, + height: image?.originalDimensions?.height }); -const extractPreviewDimensions = $transform({ - width: $get('previewDimensions.width'), - height: $get('previewDimensions.height') +const extractPreviewDimensions = image => ({ + width: image?.previewDimensions?.width, + height: image?.previewDimensions?.height }); export class Image { @@ -33,12 +21,12 @@ export class Image { get previewUri() { const {image} = this; - return $get('previewImageResourceUri', image); + return image?.previewImageResourceUri; } get previewScalingFactor() { const {image} = this; - return $get('previewDimensions.width', image) / $get('originalDimensions.width', image); + return image?.previewDimensions?.width / image?.originalDimensions?.width; } get dimensions() { @@ -58,7 +46,9 @@ export class Image { get cropAdjustment() { const {image} = this; - return Maybe.fromNull($get(CROP_IMAGE_ADJUSTMENT, image)); + return Maybe.fromNull( + image?.object?.adjustments?.['Neos\\Media\\Domain\\Model\\Adjustment\\CropImageAdjustment'] ?? null + ); } get cropAspectRatio() { @@ -67,17 +57,27 @@ export class Image { get previewCropAdjustment() { const {cropAdjustment, previewScalingFactor} = this; - return cropAdjustment.map($map(v => v * previewScalingFactor, [])); + return cropAdjustment.map(cropAdjustment => Object.fromEntries( + Object.entries(cropAdjustment).map( + ([key, value]) => [key, value * previewScalingFactor] + ) + )); } get resizeAdjustment() { const {image} = this; - return Maybe.fromNull($get(RESIZE_IMAGE_ADJUSTMENT, image)); + return Maybe.fromNull( + image?.object?.adjustments?.['Neos\\Media\\Domain\\Model\\Adjustment\\ResizeImageAdjustment'] ?? null + ); } get previewResizeAdjustment() { const {resizeAdjustment, previewScalingFactor} = this; - return resizeAdjustment.map($map(v => v * previewScalingFactor, [])); + return resizeAdjustment.map(resizeAdjustment => Object.fromEntries( + Object.entries(resizeAdjustment).map( + ([key, value]) => [key, value * previewScalingFactor] + ) + )); } } diff --git a/packages/neos-ui-editors/src/Editors/Image/index.js b/packages/neos-ui-editors/src/Editors/Image/index.js index 1eb11ec7d0..54b3d1baa6 100644 --- a/packages/neos-ui-editors/src/Editors/Image/index.js +++ b/packages/neos-ui-editors/src/Editors/Image/index.js @@ -1,13 +1,13 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {$set, $drop, $get} from 'plow-js'; import mergeClassNames from 'classnames'; +import produce from 'immer'; import backend from '@neos-project/neos-ui-backend-connector'; import {neos} from '@neos-project/neos-ui-decorators'; import {PreviewScreen, Controls, ResizeControls} from './Components/index'; -import {Image, CROP_IMAGE_ADJUSTMENT, RESIZE_IMAGE_ADJUSTMENT} from './Utils/index'; +import {Image} from './Utils/index'; import style from './style.css'; @@ -93,7 +93,7 @@ export default class ImageEditor extends Component { isAssetLoading: false }, () => { // When forceCrop option is enabled and we were requested to do the force cropping... - if (this.state.requestOpenImageCropper && $get('crop.aspectRatio.forceCrop', this.props.options)) { + if (this.state.requestOpenImageCropper && this.props.options?.crop?.aspectRatio?.forceCrop) { this.handleCloseSecondaryScreen(); this.handleOpenImageCropper(); this.setState({requestOpenImageCropper: false}); @@ -125,9 +125,9 @@ export default class ImageEditor extends Component { const {commit, value} = this.props; const {image} = this.state; - const imageWidth = $get('originalDimensions.width', image); - const imageHeight = $get('originalDimensions.height', image); - const currentCropAdjustments = $get(CROP_IMAGE_ADJUSTMENT, image); + const imageWidth = image?.originalDimensions?.width; + const imageHeight = image?.originalDimensions?.height; + const currentCropAdjustments = image?.object?.adjustments?.['Neos\\Media\\Domain\\Model\\Adjustment\\CropImageAdjustment']; const nextCropAdjustments = { x: Math.round(cropArea.x / 100 * imageWidth), y: Math.round(cropArea.y / 100 * imageHeight), @@ -141,7 +141,16 @@ export default class ImageEditor extends Component { currentCropAdjustments.height !== nextCropAdjustments.height; if (cropAdjustmentsHaveChanged) { - const nextimage = $set(CROP_IMAGE_ADJUSTMENT, nextCropAdjustments, image); + const nextimage = produce(image, draft => { + if (draft.object === undefined) { + draft.object = {}; + } + if (draft.object.adjustments === undefined) { + draft.object.adjustments = {}; + } + + draft.object.adjustments['Neos\\Media\\Domain\\Model\\Adjustment\\CropImageAdjustment'] = nextCropAdjustments; + }); commit(value, {'Neos.UI:Hook.BeforeSave.CreateImageVariant': nextimage}); } @@ -152,9 +161,27 @@ export default class ImageEditor extends Component { handleResize = resizeAdjustment => { const {commit, value} = this.props; const {image} = this.state; - const nextimage = resizeAdjustment ? - $set(RESIZE_IMAGE_ADJUSTMENT, resizeAdjustment, image) : - $drop(RESIZE_IMAGE_ADJUSTMENT, image); + const nextimage = produce(image, draft => { + if (resizeAdjustment) { + if (draft.object === undefined) { + draft.object = {}; + } + if (draft.object.adjustments === undefined) { + draft.object.adjustments = {}; + } + + draft.object.adjustments['Neos\\Media\\Domain\\Model\\Adjustment\\ResizeImageAdjustment'] = resizeAdjustment; + } else { + if (draft.object === undefined) { + return; + } + if (draft.object.adjustments === undefined) { + return; + } + + delete draft.object.adjustments['Neos\\Media\\Domain\\Model\\Adjustment\\ResizeImageAdjustment']; + } + }); this.setState({image: nextimage}); commit(value, {'Neos.UI:Hook.BeforeSave.CreateImageVariant': nextimage}); } @@ -205,7 +232,7 @@ export default class ImageEditor extends Component { handleThumbnailClicked = () => { const {secondaryEditorsRegistry} = this.props; const {component: MediaDetailsScreen} = secondaryEditorsRegistry.get('Neos.Neos/Inspector/Secondary/Editors/MediaDetailsScreen'); - const imageIdentity = $get('originalAsset.__identity', this.props.value) || $get('__identity', this.props.value); + const imageIdentity = this.props.value?.originalAsset?.__identity || this.props.value?.__identity; if (imageIdentity) { this.props.renderSecondaryInspector('IMAGE_MEDIA_DETAILS', () => ); @@ -242,16 +269,16 @@ export default class ImageEditor extends Component { isCroppable = () => { const {image} = this.state; - const mediaType = $get('mediaType', image); + const mediaType = image?.mediaType; return this.isFeatureEnabled('crop') && image && !mediaType.includes('svg'); } render() { const {isAssetLoading, image} = this.state; const {className} = this.props; - const disabled = $get('options.disabled', this.props); - const mediaTypeConstraint = $get('options.constraints.mediaTypes', this.props); - const accept = $get('options.accept', this.props) || (mediaTypeConstraint && mediaTypeConstraint.join(',')); + const disabled = this.props?.options?.disabled; + const mediaTypeConstraint = this.props?.options?.constraints?.mediaTypes; + const accept = this.props?.options?.accept || (mediaTypeConstraint && mediaTypeConstraint.join(',')); const classNames = mergeClassNames({ [style.imageEditor]: true @@ -263,12 +290,18 @@ export default class ImageEditor extends Component { this.handleRemoveFile : null} onCrop={this.isCroppable() ? this.handleOpenImageCropper : - null} disabled={disabled}/> { - this.isFeatureEnabled('resize') && - } + null} disabled={disabled}/> + {this.isFeatureEnabled('resize') ? ( + + ) : null} ); } diff --git a/packages/neos-ui-editors/src/Editors/MasterPlugin/index.js b/packages/neos-ui-editors/src/Editors/MasterPlugin/index.js index d6478c1a50..1664531bc4 100644 --- a/packages/neos-ui-editors/src/Editors/MasterPlugin/index.js +++ b/packages/neos-ui-editors/src/Editors/MasterPlugin/index.js @@ -5,16 +5,15 @@ import backend from '@neos-project/neos-ui-backend-connector'; import {neos} from '@neos-project/neos-ui-decorators'; import {connect} from 'react-redux'; import {selectors} from '@neos-project/neos-ui-redux-store'; -import {$transform, $get} from 'plow-js'; @neos(globalRegistry => { return { i18nRegistry: globalRegistry.get('i18n') }; }) -@connect($transform({ - activeContentDimensions: selectors.CR.ContentDimensions.active, - personalWorkspace: selectors.CR.Workspaces.personalWorkspaceNameSelector +@connect(state => ({ + activeContentDimensions: selectors.CR.ContentDimensions.active(state), + personalWorkspace: selectors.CR.Workspaces.personalWorkspaceNameSelector(state) })) class MasterPluginEditor extends React.PureComponent { static propTypes = { @@ -79,7 +78,7 @@ class MasterPluginEditor extends React.PureComponent { render() { const {options, isLoading} = this.state; - const disabled = $get('options.disabled', this.props); + const disabled = this.props?.options?.disabled; return ( { const focusedNode = selectors.CR.Nodes.focusedSelector(state); - const focusedNodeContextPath = $get('contextPath', focusedNode); + const focusedNodeContextPath = focusedNode?.contextPath; const allowedSiblingNodeTypesForFocusedNode = getAllowedSiblingNodeTypes(state, { subject: focusedNodeContextPath, reference: focusedNodeContextPath }); - const isSiteNode = $get('cr.nodes.siteNode', state) === focusedNodeContextPath; + const isSiteNode = state?.cr?.nodes?.siteNode === focusedNodeContextPath; return {focusedNode, allowedSiblingNodeTypesForFocusedNode, isSiteNode}; }; @@ -52,17 +51,17 @@ export default class NodeType extends PureComponent { return (
- {i18nRegistry.translate($get('ui.label', nodeTypesRegistry.get(value)))} + {i18nRegistry.translate(nodeTypesRegistry.get(value)?.ui?.label)}
); } render() { const {value, className, commit, nodeTypesRegistry, allowedSiblingNodeTypesForFocusedNode, i18nRegistry, focusedNode, isSiteNode} = this.props; - const disabled = $get('options.disabled', this.props); + const disabled = this.props?.options?.disabled; // Auto-created child nodes cannot change type - if ($get('isAutoCreated', focusedNode) === true) { + if (focusedNode?.isAutoCreated === true) { return this.renderNoOptionsAvailable(); } @@ -71,7 +70,7 @@ export default class NodeType extends PureComponent { const nodeTypes = nodeTypesRegistry.getGroupedNodeTypeList(nodeTypeFilter).reduce((result, group) => { group.nodeTypes.forEach(nodeType => { result.push({ - icon: $get('ui.icon', nodeType), + icon: nodeType?.ui?.icon, label: i18nRegistry.translate(nodeType.label) || nodeType.name, value: nodeType.name, group: i18nRegistry.translate(group.label) diff --git a/packages/neos-ui-editors/src/Editors/PluginView/index.js b/packages/neos-ui-editors/src/Editors/PluginView/index.js index 6bba799dae..d9bac7d938 100644 --- a/packages/neos-ui-editors/src/Editors/PluginView/index.js +++ b/packages/neos-ui-editors/src/Editors/PluginView/index.js @@ -5,7 +5,6 @@ import backend from '@neos-project/neos-ui-backend-connector'; import {neos} from '@neos-project/neos-ui-decorators'; import {connect} from 'react-redux'; import {selectors} from '@neos-project/neos-ui-redux-store'; -import {$transform, $get} from 'plow-js'; @neos(globalRegistry => { return { @@ -13,11 +12,11 @@ import {$transform, $get} from 'plow-js'; }; }) -@connect($transform({ - activeContentDimensions: selectors.CR.ContentDimensions.active, - personalWorkspace: selectors.CR.Workspaces.personalWorkspaceNameSelector, - focusedNode: selectors.CR.Nodes.focusedSelector, - transientValues: selectors.UI.Inspector.transientValues +@connect(state => ({ + activeContentDimensions: selectors.CR.ContentDimensions.active(state), + personalWorkspace: selectors.CR.Workspaces.personalWorkspaceNameSelector(state), + focusedNode: selectors.CR.Nodes.focusedSelector(state), + transientValues: selectors.UI.Inspector.transientValues(state) })) class PluginViewEditor extends React.PureComponent { @@ -62,7 +61,7 @@ class PluginViewEditor extends React.PureComponent { } UNSAFE_componentWillReceiveProps(nextProps) { - if ($get('plugin.value', nextProps.transientValues) !== $get('plugin.value', this.props.transientValues)) { + if (nextProps.transientValues?.plugin?.value !== this.props.transientValues?.plugin?.value) { this.loadOptions(nextProps); } } @@ -75,10 +74,10 @@ class PluginViewEditor extends React.PureComponent { const {loadPluginViews} = backend.get().endpoints; - const pluginNodeProperties = $get('properties', focusedNode); + const pluginNodeProperties = focusedNode?.properties; if (pluginNodeProperties.plugin) { - const pluginNodeIdentifier = $get('plugin.value', transientValues) === undefined ? $get('plugin', pluginNodeProperties) : $get('plugin.value', transientValues); + const pluginNodeIdentifier = transientValues?.plugin?.value === undefined ? pluginNodeProperties?.plugin : transientValues?.plugin?.value; this.setState({isLoading: true}); loadPluginViews(pluginNodeIdentifier, personalWorkspace, activeContentDimensions) .then(views => { @@ -96,7 +95,7 @@ class PluginViewEditor extends React.PureComponent { render() { const {options, isLoading} = this.state; - const disabled = $get('options.disabled', this.props); + const disabled = this.props?.options?.disabled; return ( { @@ -14,10 +14,10 @@ import style from './style.css'; }; }) -@connect($transform({ - activeContentDimensions: selectors.CR.ContentDimensions.active, - personalWorkspace: selectors.CR.Workspaces.personalWorkspaceNameSelector, - focusedNodeIdentifier: selectors.CR.Nodes.focusedNodeIdentifierSelector +@connect(state => ({ + activeContentDimensions: selectors.CR.ContentDimensions.active(state), + personalWorkspace: selectors.CR.Workspaces.personalWorkspaceNameSelector(state), + focusedNodeIdentifier: selectors.CR.Nodes.focusedNodeIdentifierSelector(state) }), { setActiveContentCanvasSrc: actions.UI.ContentCanvas.setSrc }) diff --git a/packages/neos-ui-editors/src/Editors/Reference/createNew.js b/packages/neos-ui-editors/src/Editors/Reference/createNew.js index db7bd27745..d34da6570b 100644 --- a/packages/neos-ui-editors/src/Editors/Reference/createNew.js +++ b/packages/neos-ui-editors/src/Editors/Reference/createNew.js @@ -1,13 +1,13 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import {connect} from 'react-redux'; -import {$get, $transform} from 'plow-js'; + import backend from '@neos-project/neos-ui-backend-connector'; import {actions} from '@neos-project/neos-ui-redux-store'; export default () => WrappedComponent => { - @connect($transform({ - siteNodeContextPath: $get('cr.nodes.siteNode') + @connect(state => ({ + siteNodeContextPath: state?.cr?.nodes?.siteNode }), { handleServerFeedback: actions.ServerFeedback.handleServerFeedback }) @@ -54,7 +54,7 @@ export default () => WrappedComponent => { const feedbacks = response.feedbacks.filter(feedback => feedback.type !== 'Neos.Neos.Ui:NodeCreated'); this.props.handleServerFeedback({feedbacks}); const nodeCreatedFeedback = response.feedbacks.find(item => item.type === 'Neos.Neos.Ui:NodeCreated'); - const identifier = $get('payload.identifier', nodeCreatedFeedback); + const identifier = nodeCreatedFeedback?.payload?.identifier; const value = Array.isArray(this.props.value) ? this.props.value.concat(identifier) : identifier; this.props.commit(value); @@ -63,8 +63,8 @@ export default () => WrappedComponent => { } render() { - const onCreateNew = $get('options.createNew.type', this.props) && $get('options.createNew.path', this.props) ? this.handleCreateNew : null; - const disabled = $get('options.disabled', this.props); + const onCreateNew = this.props?.options?.createNew?.type && this.props?.options?.createNew?.path ? this.handleCreateNew : null; + const disabled = this.props?.options?.disabled; return ( WrappedComponent => { nodeLookupDataLoader: globalRegistry.get('dataLoaders').get('NodeLookup'), nodeTypeRegistry: globalRegistry.get('@neos-project/neos-ui-contentrepository') })) - @connect($transform({ - contextForNodeLinking: selectors.UI.NodeLinking.contextForNodeLinking + @connect(state => ({ + contextForNodeLinking: selectors.UI.NodeLinking.contextForNodeLinking(state) })) class ReferenceDataLoader extends PureComponent { @@ -62,7 +62,7 @@ export default ({isMulti}) => WrappedComponent => { .then(options => { options.forEach(option => { const nodeType = this.props.nodeTypeRegistry.getNodeType(option.nodeType); - const icon = $get('ui.icon', nodeType); + const icon = nodeType?.ui?.icon; if (icon) { option.icon = icon; } @@ -83,7 +83,7 @@ export default ({isMulti}) => WrappedComponent => { .then(searchOptions => { searchOptions.forEach(option => { const nodeType = this.props.nodeTypeRegistry.getNodeType(option.nodeType); - const icon = $get('ui.icon', nodeType); + const icon = nodeType?.ui?.icon; if (icon) { option.icon = icon; } @@ -103,7 +103,7 @@ export default ({isMulti}) => WrappedComponent => { } getDataLoaderOptions() { - const startingPoint = $get('options.startingPoint', this.props); + const startingPoint = this.props?.options?.startingPoint; const contextForNodeLinking = startingPoint ? Object.assign({}, this.props.contextForNodeLinking, { contextNode: startingPoint.indexOf('ClientEval:') === 0 ? @@ -114,7 +114,7 @@ export default ({isMulti}) => WrappedComponent => { this.props.contextForNodeLinking; return { - nodeTypes: $get('options.nodeTypes', this.props) || ['Neos.Neos:Document'], + nodeTypes: this.props?.options?.nodeTypes || ['Neos.Neos:Document'], contextForNodeLinking }; } diff --git a/packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js b/packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js index 2c1923ef59..1d521ff0bc 100644 --- a/packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js +++ b/packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js @@ -1,6 +1,5 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {$transform} from 'plow-js'; import {connect} from 'react-redux'; import SelectBox from '@neos-project/react-ui-components/src/SelectBox/'; import MultiSelectBox from '@neos-project/react-ui-components/src/MultiSelectBox/'; @@ -21,8 +20,8 @@ const getDataLoaderOptionsForProps = props => ({ i18nRegistry: globalRegistry.get('i18n'), dataSourcesDataLoader: globalRegistry.get('dataLoaders').get('DataSources') })) -@connect($transform({ - focusedNodePath: selectors.CR.Nodes.focusedNodePathSelector +@connect(state => ({ + focusedNodePath: selectors.CR.Nodes.focusedNodePathSelector(state) })) export default class DataSourceBasedSelectBoxEditor extends PureComponent { static propTypes = { diff --git a/packages/neos-ui-editors/src/Library/AssetUpload.js b/packages/neos-ui-editors/src/Library/AssetUpload.js index 7b8df3a7f8..70d1eb85d9 100644 --- a/packages/neos-ui-editors/src/Library/AssetUpload.js +++ b/packages/neos-ui-editors/src/Library/AssetUpload.js @@ -1,6 +1,5 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {$get, $transform} from 'plow-js'; import {connect} from 'react-redux'; import mergeClassNames from 'classnames'; import Dropzone from 'react-dropzone'; @@ -9,9 +8,9 @@ import backend from '@neos-project/neos-ui-backend-connector'; import style from './style.css'; import {selectors} from '@neos-project/neos-ui-redux-store'; -@connect($transform({ - siteNodePath: $get('cr.nodes.siteNode'), - focusedNodePath: selectors.CR.Nodes.focusedNodePathSelector +@connect(state => ({ + siteNodePath: state?.cr?.nodes?.siteNode, + focusedNodePath: selectors.CR.Nodes.focusedNodePathSelector(state) }), null, null, {forwardRef: true}) export default class AssetUpload extends PureComponent { static defaultProps = { diff --git a/packages/neos-ui-editors/src/Library/LinkInput.js b/packages/neos-ui-editors/src/Library/LinkInput.js index 746eb48b0b..bf39aea434 100644 --- a/packages/neos-ui-editors/src/Library/LinkInput.js +++ b/packages/neos-ui-editors/src/Library/LinkInput.js @@ -1,7 +1,6 @@ import React, {PureComponent, Fragment} from 'react'; import PropTypes from 'prop-types'; import {connect} from 'react-redux'; -import {$get, $transform} from 'plow-js'; import {IconButton, SelectBox, Icon} from '@neos-project/react-ui-components'; import LinkOption from './LinkOption'; @@ -37,8 +36,8 @@ const looksLikeExternalLink = link => { i18nRegistry: globalRegistry.get('i18n'), containerRegistry: globalRegistry.get('containers') })) -@connect($transform({ - contextForNodeLinking: selectors.UI.NodeLinking.contextForNodeLinking +@connect(state => ({ + contextForNodeLinking: selectors.UI.NodeLinking.contextForNodeLinking(state) }), { lockPublishing: actions.UI.Remote.lockPublishing, unlockPublishing: actions.UI.Remote.unlockPublishing @@ -96,16 +95,16 @@ export default class LinkInput extends PureComponent { getDataLoaderOptions() { const options = {...this.props.options, ...this.props.linkingOptions}; - const contextForNodeLinking = $get('startingPoint', options) ? + const contextForNodeLinking = options?.startingPoint ? {...this.props.contextForNodeLinking, contextNode: options.startingPoint} : this.props.contextForNodeLinking; return { - nodeTypes: $get('nodeTypes', options) || ['Neos.Neos:Document'], - asset: $get('assets', options), - node: $get('nodes', options), - startingPoint: $get('startingPoint', options), - constraints: $get('constraints', options), + nodeTypes: options?.nodeTypes || ['Neos.Neos:Document'], + asset: options?.assets, + node: options?.nodes, + startingPoint: options?.startingPoint, + constraints: options?.constraints, contextForNodeLinking }; } @@ -289,7 +288,7 @@ export default class LinkInput extends PureComponent { value={''} plainInputMode={isUri(this.state.searchTerm)} onValueChange={this.handleValueChange} - placeholder={this.props.i18nRegistry.translate($get('options.placeholder', this.props) || 'Neos.Neos.Ui:Main:ckeditor__toolbar__link__placeholder', 'Paste a link, or search')} + placeholder={this.props.i18nRegistry.translate(this.props?.options?.placeholder || 'Neos.Neos.Ui:Main:ckeditor__toolbar__link__placeholder', 'Paste a link, or search')} displayLoadingIndicator={this.state.isLoading} displaySearchBox={true} setFocus={this.props.setFocus} @@ -374,7 +373,7 @@ export default class LinkInput extends PureComponent { return (
- {this.state.isEditMode && !$get('options.disabled', this.props) ? this.renderEditMode() : this.renderViewMode()} + {this.state.isEditMode && !this.props?.options?.disabled ? this.renderEditMode() : this.renderViewMode()} {optionsPanelEnabled && ( - {$get('anchor', linkingOptions) && ( + {linkingOptions?.anchor && (
)} - {$get('title', linkingOptions) && ( + {linkingOptions?.title && (