Merge pull request #1018 from rvsia/introduceDualListTreeSelect

feat(pf4): introduce dual list tree select component

Author: rvsia

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

@@ -4,6 +4,8 @@ import { DualListSelector } from '@patternfly/react-core';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import isEqual from 'lodash/isEqual';
 
+import DualListTree from '../dual-list-tree-select/dual-list-tree-select';
+
 import FormGroup from '../form-group';
 import DualListContext from '../dual-list-context';
 
@@ -124,4 +126,10 @@ DualList.propTypes = {
   isSortable: PropTypes.bool
 };
 
-export default DualList;
+const DualListWrapper = (props) => props.isTree ? <DualListTree {...props} /> : <DualList {...props}/>;
+
+DualListWrapper.propTypes = {
+  isTree: PropTypes.bool,
+};
+
+export default DualListWrapper;

packages/pf4-component-mapper/src/dual-list-tree-select/dual-list-tree-select.d.ts

@@ -0,0 +1,19 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { DualListSelectorProps } from "@patternfly/react-core";
+import { DualListSelectorTreeItemProps } from "@patternfly/react-core/dist/js/components/DualListSelector/DualListSelectorTreeItem";
+import FormGroupProps from "../form-group";
+
+export interface DualListTreeSelectOption extends DualListSelectorTreeItemProps {
+  value: any;
+}
+
+interface InternalDualListSelectProps {
+  options: Array<DualListTreeSelectOption | string>;
+  isSortable?: boolean;
+}
+
+export type DualListTreeSelectProps = InternalDualListSelectProps & FormGroupProps & UseFieldApiComponentConfig & DualListSelectorProps;
+
+declare const DualListSelectTree: React.ComponentType<DualListTreeSelectProps>;
+
+export default DualListSelectTree;

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

@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { DualListSelector } from '@patternfly/react-core';
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import isEqual from 'lodash/isEqual';
+
+import FormGroup from '../form-group';
+import DualListContext from '../dual-list-context';
+
+export const convertOptions = (options, sort) => {
+  if (Array.isArray(options)) {
+    let result = options.map((option) => convertOptions(option, sort)).filter(Boolean);
+
+    if (sort) {
+      const sortFn = (a, b) => (sort === 'asc' ? a.localeCompare(b) : b.localeCompare(a));
+
+      result = result.sort((a, b) => sortFn(a.text || a.label, b.text || b.label));
+    }
+
+    return result;
+  }
+
+  return {
+    text: options.label,
+    id: options.value || options.key || options.label || options.text,
+    isChecked: false,
+    ...options,
+    ...(options.children && { children: convertOptions(options.children, sort).filter(Boolean) })
+  };
+};
+
+export const selectedOptions = (options, value, selected) => {
+  if (Array.isArray(options)) {
+    return options.map((option) => selectedOptions(option, value, selected)).filter(Boolean);
+  }
+
+  if (options.value) {
+    if (selected ? value.includes(options.value) : !value.includes(options.value)) {
+      return options;
+    }
+  }
+
+  if (options.children) {
+    const someSelected = selectedOptions(options.children, value, selected).filter(Boolean);
+
+    if (someSelected.length) {
+      return {
+        ...options,
+        children: someSelected
+      };
+    }
+  }
+};
+
+export const getValueFromSelected = (options, newValue = []) => {
+  if (Array.isArray(options)) {
+    options.map((option) => getValueFromSelected(option, newValue));
+  }
+
+  if (options.value) {
+    newValue.push(options.value);
+  }
+
+  if (options.children) {
+    getValueFromSelected(options.children, newValue);
+  }
+
+  return newValue;
+};
+
+const DualListTreeSelect = (props) => {
+  const {
+    label,
+    isRequired,
+    helperText,
+    meta,
+    validateOnMount,
+    description,
+    hideLabel,
+    id,
+    input,
+    FormGroupProps,
+    options,
+    isSortable,
+    ...rest
+  } = useFieldApi({
+    ...props,
+    FieldProps: {
+      isEqual: (current, initial) => isEqual([...(current || [])].sort(), [...(initial || [])].sort())
+    }
+  });
+
+  const [sortConfig, setSortConfig] = useState(() => ({ left: isSortable && 'asc', right: isSortable && 'asc' }));
+
+  const value = input.value || [];
+
+  const leftOptions = selectedOptions(options, value, false);
+  const rightOptions = selectedOptions(options, value, true);
+
+  const onListChange = (_newLeft, newRight) => input.onChange(getValueFromSelected(newRight));
+
+  return (
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      helperText={helperText}
+      meta={meta}
+      validateOnMount={validateOnMount}
+      description={description}
+      hideLabel={hideLabel}
+      id={id || input.name}
+      FormGroupProps={FormGroupProps}
+    >
+      <DualListContext.Provider value={{ sortConfig, setSortConfig }}>
+        <DualListSelector
+          availableOptions={convertOptions(leftOptions, sortConfig.left)}
+          chosenOptions={convertOptions(rightOptions, sortConfig.right)}
+          onListChange={onListChange}
+          id={id || input.name}
+          isTree
+          {...rest}
+        />
+      </DualListContext.Provider>
+    </FormGroup>
+  );
+};
+
+DualListTreeSelect.propTypes = {
+  label: PropTypes.node,
+  validateOnMount: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  helperText: PropTypes.node,
+  description: PropTypes.node,
+  hideLabel: PropTypes.bool,
+  id: PropTypes.string,
+  isSearchable: PropTypes.bool,
+  isSortable: PropTypes.bool
+};
+
+export default DualListTreeSelect;

packages/pf4-component-mapper/src/dual-list-tree-select/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './dual-list-tree-select';
+export * from './dual-list-tree-select';

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

@@ -0,0 +1,2 @@
+export { default } from './dual-list-tree-select';
+export * from './dual-list-tree-select';

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

@@ -3,6 +3,7 @@ export { default as FormTemplate } from './form-template';
 export { default as Checkbox } from './checkbox';
 export { default as DatePicker } from './date-picker';
 export { default as DualListSelect } from './dual-list-select';
+export { default as DualListSelectTree } from './dual-list-tree-select';
 export { default as DualListContext } from './dual-list-context';
 export { default as DualListSortButton } from './dual-list-sort-button';
 export { default as FieldArray } from './field-array';

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

@@ -88,7 +88,35 @@ describe('DualListSelect', () => {
           <span key="pigeons">pigeons</span>
         ]
       }
-    ]
+    ],
+    [
+    'tree variant',
+      {
+        isTree: true,
+        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'
+          }
+        ]
+      }
+    ],
   ].forEach(([title, props]) => {
     describe(`${title} values`, () => {
       beforeEach(() => {
@@ -290,10 +318,12 @@ describe('DualListSelect', () => {
         ).toHaveLength(schema.fields[0].options.length);
         await act(async () => {
           wrapper
+            .find('.pf-c-dual-list-selector__tools-filter')
             .find('input')
             .last()
             .instance().value = 'cats';
           wrapper
+            .find('.pf-c-dual-list-selector__tools-filter')
             .find('input')
             .last()
             .simulate('change');