Merge pull request #1414 from neos/dimaip/group-selectBox

TASK: implement groups in SelectBox Resolves: #892
neos · Dec 9, 2017 · fe2af3e · fe2af3e
2 parents 0ce9ddb + b37ff40
commit fe2af3e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 15 deletions.
diff --git a/packages/neos-ui-editors/src/Editors/NodeType/index.js b/packages/neos-ui-editors/src/Editors/NodeType/index.js
@@ -59,16 +59,18 @@ export default class NodeType extends PureComponent {
         }
 
         // Show all nodetypes if is site root node
-        const rawOptions = isSiteNode ? nodeTypesRegistry.getSubTypesOf(nodeTypesRegistry.getRole('document')) : allowedSiblingNodeTypesForFocusedNode;
-        const options = rawOptions
-            // Filter out system nodetypes (i.e. without groups)
-            // ToDo: move this logic to some more generic place, maybe nodeTypesRegistry
-            .filter(nodeType => $get('ui.group', nodeTypesRegistry.get(nodeType)))
-            .map(nodeType => ({
-                icon: $get('ui.icon', nodeTypesRegistry.get(nodeType)),
-                label: i18nRegistry.translate($get('ui.label', nodeTypesRegistry.get(nodeType))) || nodeType,
-                value: nodeType
-            }));
+        const nodeTypeFilter = isSiteNode ? nodeTypesRegistry.getSubTypesOf(nodeTypesRegistry.getRole('document')) : allowedSiblingNodeTypesForFocusedNode;
+        const options = nodeTypesRegistry.getGroupedNodeTypeList(nodeTypeFilter).reduce((result, group) => {
+            group.nodeTypes.forEach(nodeType => {
+                result.push({
+                    icon: $get('ui.icon', nodeType),
+                    label: i18nRegistry.translate(nodeType.label) || nodeType.name,
+                    value: nodeType.name,
+                    group: i18nRegistry.translate(group.label)
+                });
+            });
+            return result;
+        }, []);
 
         if (options.length) {
             return <SelectBox options={options} highlight={highlight} value={value} onValueChange={commit}/>;

diff --git a/packages/react-ui-components/src/SelectBox/style.css b/packages/react-ui-components/src/SelectBox/style.css
@@ -39,3 +39,10 @@
 .selectBox__item {
     border-top: 1px solid var(--brandColorsContrastDarker);
 }
+
+.selectBox__groupHeader {
+    background-color: var(--brandColorsContrastDark);
+    font-weight: bold;
+    padding-left: var(--spacing);
+    line-height: var(--goldenUnit);
+}
diff --git a/...ages/react-ui-components/src/SelectBox_ListPreviewGrouped/selectBox_ListPreviewGrouped.js b/...ages/react-ui-components/src/SelectBox_ListPreviewGrouped/selectBox_ListPreviewGrouped.js
@@ -20,7 +20,8 @@ export default class SelectBox_ListPreviewGrouped extends PureComponent {
 
         theme: PropTypes.shape({
             'selectBox__item': PropTypes.string,
-            'selectBox__item--isGroup': PropTypes.string
+            'selectBox__item--isGroup': PropTypes.string,
+            'selectBox__groupHeader': PropTypes.string
         }),
 
         // API with SelectBox
@@ -69,9 +70,9 @@ export default class SelectBox_ListPreviewGrouped extends PureComponent {
         });
         return (
             <li key={groupLabel} className={groupClassName}>
-                <span>
+                <div className={theme.selectBox__groupHeader}>
                     {groupLabel}
-                </span>
+                </div>
                 <ul>
                     {optionsList.map(this.renderOption)}
                 </ul>
@@ -83,7 +84,8 @@ export default class SelectBox_ListPreviewGrouped extends PureComponent {
         const {
             ListPreviewElement,
             optionValueAccessor,
-            focusedValue
+            focusedValue,
+            theme
         } = this.props;
 
         const isHighlighted = optionValueAccessor(option) === focusedValue;
@@ -93,7 +95,7 @@ export default class SelectBox_ListPreviewGrouped extends PureComponent {
         }
 
         return (
-            <li key={index} role="option">
+            <li key={index} role="option" className={theme.selectBox__item}>
                 <ListPreviewElement
 
                     isHighlighted={isHighlighted}

diff --git a/packages/react-ui-components/src/reset.css b/packages/react-ui-components/src/reset.css
@@ -18,6 +18,9 @@
     button {
         font-size: var(--baseFontSize);
     }
+    ul {
+        padding: 0;
+    }
     /* webkit adds some weird spacing otherwise */
     li {
         display: block;