Merge pull request #1092 from rvsia/carbonSelectCategories

feat(carbon): allow to group options in single select

Author: rvsia

packages/carbon-component-mapper/src/select/select.js

@@ -5,7 +5,7 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import DataDrivenSelect from '@data-driven-forms/common/select';
 import fnToString from '@data-driven-forms/common/utils/fn-to-string';
 
-import { Select as CarbonSelect, MultiSelect, SelectItem, ComboBox } from 'carbon-components-react';
+import { Select as CarbonSelect, MultiSelect, SelectItem, ComboBox, SelectItemGroup } from 'carbon-components-react';
 import prepareProps from '../prepare-props';
 
 const onChangeWrapper = (onChange) => ({ selectedItem, selectedItems }) => onChange(selectedItems || selectedItem);
@@ -15,6 +15,21 @@ export const getMultiValue = (value, options) =>
     typeof item === 'object' ? item : options.find(({ value }) => value === item)
   );
 
+const renderOptions = (options) =>
+  options.map((option, index) => {
+    const { options, ...rest } = option;
+
+    if (options) {
+      return (
+        <SelectItemGroup key={rest.value || index} text={rest.label} {...rest}>
+          {renderOptions(options)}
+        </SelectItemGroup>
+      );
+    }
+
+    return <SelectItem key={rest.value || index} text={rest.label} {...rest} />;
+  });
+
 const ClearedMultiSelectFilterable = ({
   invalidText,
   hideSelectedOptions,
@@ -147,9 +162,7 @@ const ClearedSelect = ({
     invalidText={invalidText}
   >
     {isFetching && <SelectItem text={placeholder} value={''} />}
-    {options.map((option, index) => (
-      <SelectItem key={option.value || index} text={option.label} {...option} />
-    ))}
+    {renderOptions(options)}
   </CarbonSelect>
 );
 
@@ -252,8 +265,15 @@ const Select = (props) => {
   }, [loadOptionsStr]);
   const isSearchClear = isSearchable || isClearable;
 
-  const Component =
-    isMulti && isSearchClear ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : isSearchClear ? ClearedSelectSearchable : ClearedSelect;
+  let Component = ClearedSelect;
+
+  if (isMulti && isSearchClear) {
+    Component = ClearedMultiSelectFilterable;
+  } else if (isMulti) {
+    Component = ClearedMultiSelect;
+  } else if (isSearchClear) {
+    Component = ClearedSelectSearchable;
+  }
 
   const invalidText = ((meta.touched || validateOnMount) && (meta.error || meta.submitError)) || '';
   const text = ((meta.touched || validateOnMount) && meta.warning) || helperText;

packages/carbon-component-mapper/src/tests/select.test.js

@@ -5,7 +5,7 @@ import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-rend
 
 import FormTemplate from '../form-template';
 import componentMapper from '../component-mapper';
-import { Select, MultiSelect, ComboBox } from 'carbon-components-react';
+import { Select, MultiSelect, ComboBox, SelectItem, SelectItemGroup } from 'carbon-components-react';
 import { getMultiValue } from '../select/select';
 
 describe('<Select />', () => {
@@ -31,6 +31,42 @@ describe('<Select />', () => {
     expect(wrapper.find(Select)).toHaveLength(1);
   });
 
+  it('renders select with categories', () => {
+    const schema = {
+      fields: [
+        {
+          component: componentTypes.SELECT,
+          name: 'select',
+          label: 'select',
+          options: [
+            {
+              label: 'Category 1',
+              options: [
+                { label: 'value 1', value: '111' },
+                { label: 'value 2', value: '222' }
+              ]
+            },
+            {
+              label: 'Category 2',
+              options: [
+                { label: 'value 3', value: '333' },
+                { label: 'value 4', value: '444' }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+
+    const wrapper = mount(
+      <FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
+    );
+
+    expect(wrapper.find(Select)).toHaveLength(1);
+    expect(wrapper.find(SelectItemGroup)).toHaveLength(2);
+    expect(wrapper.find(SelectItem)).toHaveLength(4);
+  });
+
   ['isSearchable', 'isClearable'].forEach((setting) => {
     it(`renders select ${setting}`, () => {
       const schema = {

packages/react-renderer-demo/src/doc-components/examples-texts/carbon/select.md

@@ -1,3 +1,31 @@
 import SelectCommon from '../select.md';
 
+## Single select with categories
+
+For single (not clearable/not searchable) select, you can use categories to group your options by adding an `options` array.
+
+```jsx
+{
+    component: 'select',
+    name: 'select-with-categories',
+    label: 'With categories',
+    options: [
+        {
+            label: 'Category 1',
+            options: [
+                { label: 'value 1', value: '111' },
+                { label: 'value 2', value: '222' }
+            ]
+        },
+        {
+            label: 'Category 2',
+            options: [
+                { label: 'value 3', value: '333' },
+                { label: 'value 4', value: '444' }
+            ]
+        }
+    ]
+}
+```
+
 <SelectCommon/>