Merge pull request #4 from Sebobo/feature/unify-editors

!!! FEATURE: Unify editors and cleanup code

.editorconfig

@@ -0,0 +1,3 @@
+[*.js]
+indent_style = space
+indent_size = 4

README.md

@@ -49,7 +49,7 @@ This greatly improves Neos UI performance for data sources with big collections
 
 3. **for a multi select:**
 
-   In your `NodeTypes.yaml`, activate the custom editor by using `Sandstorm.LazyDataSource/Inspector/Editors/DataSourceMultiSelectEditor`
+   In your `NodeTypes.yaml`, activate the custom editor by using `Sandstorm.LazyDataSource/Inspector/Editors/DataSourceSelectEditor`
    instead of `Neos.Neos/Inspector/Editors/SelectBoxEditor`. **All configuration options [of the data source-based select](https://neos.readthedocs.io/en/stable/References/PropertyEditorReference.html#property-type-string-array-string-selectboxeditor-dropdown-select-editor)
    apply as usual.
 
@@ -72,10 +72,12 @@ This greatly improves Neos UI performance for data sources with big collections
              group: 'document'
    
              ##### THIS IS THE RELEVANT CONFIG:
-             editor: 'Sandstorm.LazyDataSource/Inspector/Editors/DataSourceMultiSelectEditor'
+             editor: 'Sandstorm.LazyDataSource/Inspector/Editors/DataSourceSelectEditor'
              
              ##### all Select options (e.g. dataSourceAdditionalData) work as usual. 
              editorOptions:
+               allowEmpty: true
+               multiple: true
                placeholder: Choose
                dataSourceIdentifier: lazy-editor-test
    ```

Resources/Private/JavaScript/LazyDataSource/package.json

@@ -8,10 +8,9 @@
     },
     "devDependencies": {
       "@neos-project/eslint-config-neos": "^2.3.0",
-      "@neos-project/neos-ui-extensibility": "~8.2.0",
-      "@neos-project/react-ui-components": "~8.2.0",
-      "eslint": "^8.25.0",
-      "webpack": "^4.44.2"
+      "@neos-project/neos-ui-extensibility-webpack-adapter": "~8.3.0",
+      "@neos-project/react-ui-components": "~8.3.0",
+      "eslint": "^8.25.0"
     },
     "neos": {
         "buildTargetDirectory": "../../../Public/JavaScript/LazyDataSource"

Resources/Private/JavaScript/LazyDataSource/src/Editors/DataSourceSelectEditor.js

@@ -1,14 +1,22 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {SelectBox} from '@neos-project/react-ui-components';
+
+import {SelectBox, MultiSelectBox} from '@neos-project/react-ui-components';
+import {neos} from '@neos-project/neos-ui-decorators';
+
 import dataLoader from './lazyDataSourceDataLoader';
 import PreviewOption from './PreviewOption';
-import {neos} from '@neos-project/neos-ui-decorators';
+
+// COPIED FROM @neos-project/neos-ui-constants/src/dndTypes (as we do not expose this yet).
+const dndTypes = {
+    NODE: 'neos-tree-node',
+    MULTISELECT: 'neos-multiselect-value'
+};
 
 @neos(globalRegistry => ({
     i18nRegistry: globalRegistry.get('i18n')
 }))
-@dataLoader({isMulti: false})
+@dataLoader()
 export default class DataSourceSelectEditor extends PureComponent {
     static propTypes = {
         value: PropTypes.string,
@@ -21,33 +29,65 @@ export default class DataSourceSelectEditor extends PureComponent {
         onSearchTermChange: PropTypes.func,
         commit: PropTypes.func.isRequired,
         i18nRegistry: PropTypes.object.isRequired,
-        disabled: PropTypes.bool
+        disabled: PropTypes.bool,
+        multiple: PropTypes.bool,
     };
 
     handleValueChange = value => {
         this.props.commit(value);
     }
 
     render() {
-        const {className, value, i18nRegistry, threshold, options, displayLoadingIndicator, onSearchTermChange, disabled} = this.props;
+        const {
+            className,
+            value,
+            i18nRegistry,
+            threshold,
+            options,
+            displayLoadingIndicator,
+            onSearchTermChange,
+            disabled,
+            placeholder,
+            searchOptions,
+            multiple,
+        } = this.props;
 
-        return (<SelectBox
+        return multiple ? <MultiSelectBox
+            className={className}
+            displaySearchBox={true}
+            noMatchesFoundLabel={i18nRegistry.translate('Neos.Neos:Main:noMatchesFound')}
+            loadingLabel={i18nRegistry.translate('Neos.Neos:Main:loading')}
+            searchBoxLeftToTypeLabel={i18nRegistry.translate('Neos.Neos:Main:searchBoxLeftToType')}
+            placeholder={i18nRegistry.translate(placeholder)}
+            threshold={threshold}
+            options={options}
+            values={value}
+            onValuesChange={this.handleValueChange}
+            displayLoadingIndicator={displayLoadingIndicator}
+            showDropDownToggle={false}
+            allowEmpty={true}
+            onSearchTermChange={onSearchTermChange}
+            ListPreviewElement={PreviewOption}
+            disabled={disabled}
+            searchOptions={searchOptions}
+            dndType={dndTypes.MULTISELECT}
+        /> : <SelectBox
             className={className}
             displaySearchBox={true}
             noMatchesFoundLabel={i18nRegistry.translate('Neos.Neos:Main:noMatchesFound')}
+            loadingLabel={i18nRegistry.translate('Neos.Neos:Main:loading')}
             searchBoxLeftToTypeLabel={i18nRegistry.translate('Neos.Neos:Main:searchBoxLeftToType')}
-            placeholder={i18nRegistry.translate(this.props.placeholder)}
+            placeholder={i18nRegistry.translate(placeholder)}
             threshold={threshold}
             options={options}
             value={value}
             onValueChange={this.handleValueChange}
-            loadingLabel={i18nRegistry.translate('Neos.Neos:Main:loading')}
             displayLoadingIndicator={displayLoadingIndicator}
             showDropDownToggle={false}
             allowEmpty={true}
             onSearchTermChange={onSearchTermChange}
-            disabled={disabled}
             ListPreviewElement={PreviewOption}
-            />);
+            disabled={disabled}
+        />;
     }
 }

Resources/Private/JavaScript/LazyDataSource/src/Editors/lazyDataSourceDataLoader.js

@@ -1,11 +1,12 @@
 import React, {PureComponent} from 'react';
+import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import {$get, $transform} from 'plow-js';
+import {$transform} from 'plow-js';
+
 import {neos} from '@neos-project/neos-ui-decorators';
 import {selectors} from '@neos-project/neos-ui-redux-store';
-import {connect} from 'react-redux';
 
-export default ({isMulti}) => WrappedComponent => {
+export default () => WrappedComponent => {
     @neos(globalRegistry => ({
         lazyDataSourceDataLoader: globalRegistry.get('dataLoaders').get('SandstormLazyDataSourceLoader')
     }))
@@ -16,6 +17,8 @@ export default ({isMulti}) => WrappedComponent => {
         static propTypes = {
             value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
             options: PropTypes.shape({
+                multiple: PropTypes.bool,
+
                 dataSourceIdentifier: PropTypes.string,
                 dataSourceUri: PropTypes.string,
                 dataSourceDisableCaching: PropTypes.bool,
@@ -53,11 +56,12 @@ export default ({isMulti}) => WrappedComponent => {
         }
 
         resolveValue = () => {
-            const valueProvided = isMulti ? Array.isArray(this.props.value) : this.props.value;
+            const { value, options, lazyDataSourceDataLoader } = this.props;
+            const valueProvided = options.multiple ? Array.isArray(value) : value;
             if (valueProvided) {
                 this.setState({isLoading: true});
-                const resolver = isMulti ? this.props.lazyDataSourceDataLoader.resolveValues.bind(this.props.lazyDataSourceDataLoader) : this.props.lazyDataSourceDataLoader.resolveValue.bind(this.props.lazyDataSourceDataLoader);
-                resolver(this.getDataLoaderOptions(), this.props.value)
+                const resolver = options.multiple ? lazyDataSourceDataLoader.resolveValues.bind(lazyDataSourceDataLoader) : lazyDataSourceDataLoader.resolveValue.bind(lazyDataSourceDataLoader);
+                resolver(this.getDataLoaderOptions(), value)
                     .then(options => {
                         this.setState({
                             isLoading: false,
@@ -97,18 +101,23 @@ export default ({isMulti}) => WrappedComponent => {
         }
 
         render() {
-            const props = Object.assign({}, this.props, this.state);
-            const options = isMulti ? this.state.options : (this.props.value ? this.state.options : this.state.searchOptions);
+            const { options, value } = this.props;
+            const { isLoading, searchOptions } = this.state;
+
+            const config = Object.assign({}, this.props, this.state);
+            const componentOptions = options.multiple || value ? this.state.options : searchOptions;
+
             return (
                 <WrappedComponent
-                    {...props}
-                    options={options}
-                    searchOptions={this.state.searchOptions}
-                    displayLoadingIndicator={this.state.isLoading}
+                    {...config}
+                    options={componentOptions}
+                    searchOptions={searchOptions}
+                    displayLoadingIndicator={isLoading}
                     onSearchTermChange={this.handleSearchTermChange}
-                    placeholder={this.props.options.placeholder}
-                    threshold={this.props.options.threshold}
-                    />
+                    placeholder={options.placeholder}
+                    threshold={options.threshold}
+                    multiple={options.multiple}
+                />
             );
         }
     }

Resources/Private/JavaScript/LazyDataSource/src/manifest.js

@@ -1,10 +1,8 @@
 import HLRU from 'hashlru';
 import manifest from '@neos-project/neos-ui-extensibility';
 import backend from '@neos-project/neos-ui-backend-connector';
-import DataSourceMultiSelectEditor from './Editors/DataSourceMultiSelectEditor';
 import DataSourceSelectEditor from './Editors/DataSourceSelectEditor';
 
-
 function makeCacheKey(prefix, params) {
     if (params.options && params.options.dataSourceMakeNodeIndependent) {
         // if dataSourceMakeNodeIndependent, remove contextNodePath from the cache key.
@@ -14,19 +12,14 @@ function makeCacheKey(prefix, params) {
     return prefix + JSON.stringify(params);
 }
 
-manifest('Sandstorm.LazyDataSource:Plugin', {}, (globalRegistry, {frontendConfiguration}) => {
+manifest('Sandstorm.LazyDataSource:Plugin', {}, (globalRegistry) => {
 
     const editorsRegistry = globalRegistry.get('inspector').get('editors');
 
     editorsRegistry.set('Sandstorm.LazyDataSource/Inspector/Editors/DataSourceSelectEditor', {
         component: DataSourceSelectEditor
     });
 
-    editorsRegistry.set('Sandstorm.LazyDataSource/Inspector/Editors/DataSourceMultiSelectEditor', {
-        component: DataSourceMultiSelectEditor
-    });
-
-
     const dataLoadersRegistry = globalRegistry.get('dataLoaders');
     dataLoadersRegistry.set('SandstormLazyDataSourceLoader', {
         description: `