fix(pf4): Add selected items status message to dual list

Signed-off-by: Boaz Shuster <[email protected]>

Author: boaz0

packages/pf4-component-mapper/demo/demo-schemas/dual-list-schema.js

@@ -0,0 +1,37 @@
+import { componentTypes as components } from '@data-driven-forms/react-form-renderer';
+
+const output = {
+  title: 'Testing dual list',
+  description: 'Description of testing dual list',
+  fields: [
+    {
+      component: components.DUAL_LIST_SELECT,
+      name: 'dual-list-select',
+      label: 'choose favorite animal',
+      options: [
+        {
+          value: 'cats',
+          label: 'cats'
+        },
+        {
+          value: 'cats_1',
+          label: 'cats_1'
+        },
+        {
+          value: 'cats_2',
+          label: 'cats_2'
+        },
+        {
+          value: 'zebras',
+          label: 'zebras'
+        },
+        {
+          value: 'pigeons',
+          label: 'pigeons'
+        }
+      ]
+    }
+  ]
+};
+
+export default output;

packages/pf4-component-mapper/demo/index.js

@@ -8,6 +8,7 @@ import { componentMapper, FormTemplate } from '../src';
 import { Title, Button, Toolbar, ToolbarGroup } from '@patternfly/react-core';
 import { wizardSchema, wizardSchemaWithFunction, wizardSchemaSimple, wizardSchemaSubsteps, wizardSchemaMoreSubsteps } from './demo-schemas/wizard-schema';
 import sandboxSchema from './demo-schemas/sandbox';
+import dualSchema from './demo-schemas/dual-list-schema';
 import demoSchema from '@data-driven-forms/common/src/demoschema';
 
 const Summary = props => <div>Custom summary component.</div>;
@@ -42,6 +43,9 @@ class App extends React.Component {
                 <ToolbarGroup>
                     <Button onClick={() => this.setState(state => ({ schema: demoSchema, additionalOptions: {}}))}>Super schema</Button>
                 </ToolbarGroup>
+                <ToolbarGroup>
+                    <Button onClick={() => this.setState(state => ({ schema: dualSchema, additionalOptions: {} }))}>Dual List</Button>
+                </ToolbarGroup>
             </Toolbar>
             <FormRenderer
                 onSubmit={console.log}
@@ -50,6 +54,10 @@ class App extends React.Component {
                 }}
                 componentMapper={{
                     ...componentMapper,
+                    'dual-list-select': {
+                        component: componentMapper['dual-list-select'],
+                        renderStatus: ({selected, options}) => `selected ${selected} from ${options}`
+                    },
                     summary: Summary
                 }}
                 FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}

packages/pf4-component-mapper/src/files/dual-list-select.js

@@ -145,7 +145,8 @@ const DualList = ({
   sortValues,
   filterValues,
   rightValues,
-  handleValuesClick
+  handleValuesClick,
+  renderStatus
 }) => (
   <FormGroup
     label={label}
@@ -175,6 +176,18 @@ const DualList = ({
                 id={`${input.name}-options-toolbar`}
               />
             </GridItem>
+            {renderStatus && (
+              <GridItem md={12}>
+                <TextContent>
+                  <Text data-test-id="left-status-text" component={TextVariants.h6}>
+                    {renderStatus({
+                      selected: state.selectedLeftValues.length,
+                      options: leftValues.length
+                    })}
+                  </Text>
+                </TextContent>
+              </GridItem>
+            )}
             <GridItem md={12}>
               <List
                 optionClick={handleOptionsClick}
@@ -234,6 +247,18 @@ const DualList = ({
                 id={`${input.name}-value-toolbar`}
               />
             </GridItem>
+            {renderStatus && (
+              <GridItem md={12}>
+                <TextContent>
+                  <Text data-test-id="right-status-text" component={TextVariants.h6}>
+                    {renderStatus({
+                      selected: state.selectedRightValues.length,
+                      options: rightValues.length
+                    })}
+                  </Text>
+                </TextContent>
+              </GridItem>
+            )}
             <GridItem md={12}>
               <List
                 optionClick={handleValuesClick}
@@ -288,7 +313,8 @@ DualList.propTypes = {
   sortValues: PropTypes.func,
   filterValues: PropTypes.func,
   rightValues: PropTypes.array,
-  handleValuesClick: PropTypes.func
+  handleValuesClick: PropTypes.func,
+  renderStatus: PropTypes.func
 };
 
 DualList.defaultProps = {

packages/pf4-component-mapper/src/tests/dual-list-select.test.js

@@ -521,6 +521,43 @@ describe('DualListSelect', () => {
     ).toEqual('zebras');
   });
 
+  it('display status message', async () => {
+    const props = {
+      ...initialProps,
+      componentMapper: {
+        'dual-list-select': {
+          component: componentMapper['dual-list-select'],
+          renderStatus: ({ selected, options }) => `you selected ${selected} out of ${options} options`
+        }
+      }
+    };
+    const wrapper = mount(<FormRenderer {...props} />);
+
+    expect(wrapper.find('h6[data-test-id="left-status-text"]').text()).toBe('you selected 0 out of 5 options');
+
+    await act(async () => {
+      wrapper
+        .find('.ddorg__pf4-component-mapper__dual-list-select')
+        .first()
+        .find('.ddorg__pf4-component-mapper__dual-list-select-option')
+        .first()
+        .simulate('click');
+    });
+    wrapper.update();
+    expect(wrapper.find('h6[data-test-id="left-status-text"]').text()).toBe('you selected 1 out of 5 options');
+
+    await act(async () => {
+      wrapper
+        .find('.ddorg__pf4-component-mapper__dual-list-select')
+        .first()
+        .find('.ddorg__pf4-component-mapper__dual-list-select-option')
+        .last()
+        .simulate('click', { shiftKey: true });
+    });
+    wrapper.update();
+    expect(wrapper.find('h6[data-test-id="left-status-text"]').text()).toBe('you selected 5 out of 5 options');
+  });
+
   describe('filtered options', () => {
     it('switch all visible to right', async () => {
       const wrapper = mount(<FormRenderer {...initialProps} />);

packages/react-renderer-demo/src/doc-components/examples-texts/pf4/pf4-dual-list.md

@@ -21,3 +21,4 @@ Dual list select is wrapped in a form group, so it accepts all [form group props
 |filterValueTitle|String|'Filter selected value'|Placeholder for value filter input|
 |filterValueText|String|'Remove your filter to see all selected'|Placeholder for value when there is no filtered value|
 |filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option|
+|renderStatus|function|'null'|A function that renders status text below the toolbar filter. For example, display how many items were selected: `({selected, options}) => "selected " + selected + " out of " + options`|