FEATURE: Support preview uris in datasource selectboxeditor

packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js

@@ -7,6 +7,7 @@ import MultiSelectBox from '@neos-project/react-ui-components/src/MultiSelectBox
 import {selectors} from '@neos-project/neos-ui-redux-store';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {shouldDisplaySearchBox, searchOptions, processSelectBoxOptions} from './SelectBoxHelpers';
+import PreviewOption from '../../Library/PreviewOption';
 
 const getDataLoaderOptionsForProps = props => ({
     contextNodePath: props.focusedNodePath,
@@ -49,6 +50,7 @@ export default class DataSourceBasedSelectBoxEditor extends PureComponent {
                 PropTypes.shape({
                     label: PropTypes.string,
                     icon: PropTypes.string,
+                    preview: PropTypes.string,
 
                     // TODO
                     group: PropTypes.string
@@ -116,6 +118,7 @@ export default class DataSourceBasedSelectBoxEditor extends PureComponent {
                 values={value || []}
                 onValuesChange={commit}
                 loadingLabel={loadingLabel}
+                ListPreviewElement={PreviewOption}
                 displayLoadingIndicator={this.state.isLoading}
                 placeholder={placeholder}
                 allowEmpty={options.allowEmpty}
@@ -136,6 +139,7 @@ export default class DataSourceBasedSelectBoxEditor extends PureComponent {
             value={value}
             onValueChange={commit}
             loadingLabel={loadingLabel}
+            ListPreviewElement={PreviewOption}
             displayLoadingIndicator={this.state.isLoading}
             placeholder={placeholder}
             allowEmpty={options.allowEmpty}

packages/neos-ui-editors/src/Editors/SelectBox/index.spec.js

@@ -15,8 +15,23 @@ const optionValues = {
         label: 'barLabel'
     }
 };
+
+const optionValuesWithPreview = {
+    foo: {
+        label: 'fooLabel',
+        preview: 'foo.png'
+    },
+    bar: {
+        label: 'barLabel',
+        preview: 'bar.png'
+    }
+};
+
 const dropdownElementLabels = component =>
-    component.find('SelectBox_ListPreview').find('SelectBox_Option_SingleLine').map(node => node.text());
+    component.find('SelectBox_ListPreview').find('ListPreviewElement').map(node => node.text());
+
+const dropdownElementPreviews = component =>
+    component.find('SelectBox_ListPreview').find('ListPreviewElement').find('img').map(node => node.prop('src'));
 
 const dropdownHeader = component =>
     component.find('ShallowDropDownHeader');
@@ -144,6 +159,27 @@ test(`SelectBox > single, dataSource, preselected value`, () => {
     });
 });
 
+test(`SelectBox > single, dataSource, preview`, () => {
+    MockDataSourceDataLoader.reset();
+    const component = mount(
+        <DragDropContextProvider backend={TestBackend}>
+            <WrapWithMockGlobalRegistry>
+                <Provider store={store}>
+                    <SelectBoxEditor commit={commit} options={{dataSourceIdentifier: 'ds1'}}/>
+                </Provider>
+            </WrapWithMockGlobalRegistry>
+        </DragDropContextProvider>
+    );
+
+    dropdownHeader(component).simulate('click');
+
+    return MockDataSourceDataLoader.resolveCurrentPromise(optionValuesWithPreview).then(() => {
+        const expectedDropdownElementPreviews = ['foo.png', 'bar.png'];
+        component.update();
+        expect(dropdownElementPreviews(component)).toEqual(expectedDropdownElementPreviews);
+    });
+});
+
 test(`SelectBox > multi, dataSource, no preselected value`, () => {
     MockDataSourceDataLoader.reset();
     const component = mount(

packages/neos-ui-editors/src/Library/PreviewOption.js

@@ -0,0 +1,22 @@
+/* eslint-disable camelcase, react/jsx-pascal-case */
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import SelectBox_Option_MultiLineWithThumbnail from '@neos-project/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail';
+
+export default class PreviewOption extends PureComponent {
+    static propTypes = {
+        option: PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            icon: PropTypes.string,
+            preview: PropTypes.string
+        })
+    };
+
+    render() {
+        const {option} = this.props;
+
+        return (
+            <SelectBox_Option_MultiLineWithThumbnail {...this.props} imageUri={option.preview} icon={option.icon} label={option.label}/>
+        );
+    }
+}