Add optional sort button for Dual List Select

Author: rvsia

packages/pf4-component-mapper/src/files/dual-list-context.d.ts

@@ -0,0 +1,17 @@
+export interface SortConfig {
+    left: 'asc' | 'desc';
+    right: 'asc' | 'desc';
+}
+
+export type SetSortConfig = (newSortConfig: SortConfig) => void;
+
+export interface DualListContextValue {
+    sortConfig: SortConfig;
+    setSortConfig: SetSortConfig;
+}
+
+export interface DualListContext {
+  value: DualListContextValue;
+}
+
+export default DualListContext;

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

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DualListSelectContext = createContext({});
+
+export default DualListSelectContext;

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

@@ -1,18 +1,36 @@
-import React from 'react';
+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 './dual-list-select.scss';
 import FormGroup from '../common/form-group';
+import DualListContext from './dual-list-context';
 
 const DualList = (props) => {
-  const { label, isRequired, helperText, meta, description, hideLabel, id, input, FormGroupProps, options, getValueFromNode, ...rest } = useFieldApi({
+  const {
+    label,
+    isRequired,
+    helperText,
+    meta,
+    description,
+    hideLabel,
+    id,
+    input,
+    FormGroupProps,
+    options,
+    getValueFromNode,
+    isSearchable,
+    isSortable,
+    ...rest
+  } = useFieldApi({
     ...props,
     isEqual: (current, initial) => isEqual([...(current || [])].sort(), [...(initial || [])].sort())
   });
 
+  const [sortConfig, setSortConfig] = useState(() => ({ left: isSortable && 'asc', right: isSortable && 'asc' }));
+
   const value = input.value || [];
 
   let leftOptions;
@@ -46,6 +64,18 @@ const DualList = (props) => {
     filterOption = (option, input) => (option.value ? option.value.includes(input) : getValueFromNode(option).includes(input));
   }
 
+  if (isSortable) {
+    const sort = (direction, a, b) => (direction === 'asc' ? a.localeCompare(b) : b.localeCompare(a));
+
+    if (!getValueFromNode) {
+      leftOptions = leftOptions.sort((a, b) => sort(sortConfig.left, a.label || a, b.label || b));
+      rightOptions = rightOptions.sort((a, b) => sort(sortConfig.right, a.label || a, b.label || b));
+    } else {
+      leftOptions = leftOptions.sort((a, b) => sort(sortConfig.left, getValueFromNode(a.label || a), getValueFromNode(b.label || b)));
+      rightOptions = rightOptions.sort((a, b) => sort(sortConfig.right, getValueFromNode(a.label || a), getValueFromNode(b.label || b)));
+    }
+  }
+
   return (
     <FormGroup
       label={label}
@@ -57,23 +87,24 @@ const DualList = (props) => {
       id={id || input.name}
       FormGroupProps={FormGroupProps}
     >
-      <DualListSelector
-        availableOptions={leftOptions}
-        chosenOptions={rightOptions}
-        onListChange={onListChange}
-        id={id || input.name}
-        isSearchable
-        {...(getValueFromNode && {
-          addAll: onListChange,
-          addSelected: onListChange,
-          filterOption,
-          onOptionSelect: onListChange,
-          removeAll: onListChange,
-          removeSelected: onListChange
-        })}
-        {...rest}
-      />
-      {JSON.stringify(input.value, null, 2)}
+      <DualListContext.Provider value={{ sortConfig, setSortConfig }}>
+        <DualListSelector
+          availableOptions={leftOptions}
+          chosenOptions={rightOptions}
+          onListChange={onListChange}
+          id={id || input.name}
+          isSearchable={isSearchable}
+          {...(getValueFromNode && {
+            addAll: onListChange,
+            addSelected: onListChange,
+            filterOption,
+            onOptionSelect: onListChange,
+            removeAll: onListChange,
+            removeSelected: onListChange
+          })}
+          {...rest}
+        />
+      </DualListContext.Provider>
     </FormGroup>
   );
 };
@@ -85,7 +116,9 @@ DualList.propTypes = {
   description: PropTypes.node,
   hideLabel: PropTypes.bool,
   id: PropTypes.string,
-  getValueFromNode: PropTypes.func
+  getValueFromNode: PropTypes.func,
+  isSearchable: PropTypes.bool,
+  isSortable: PropTypes.bool
 };
 
 export default DualList;

packages/pf4-component-mapper/src/files/dual-list-sort-button.d.ts

@@ -0,0 +1,7 @@
+export interface DualListSortButtonProps {
+    position: 'left' | 'right';
+}
+
+declare const DualListSortButton: React.ComponentType<DualListSortButtonProps>;
+
+export default DualListSortButton;

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

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+
+import SortAsc from '@patternfly/react-icons/dist/js/icons/pficon-sort-common-asc-icon';
+import SortDesc from '@patternfly/react-icons/dist/js/icons/pficon-sort-common-desc-icon';
+
+import DualListContext from './dual-list-context';
+
+const DualListSortButton = ({ position, ...rest }) => {
+  const { sortConfig, setSortConfig } = useContext(DualListContext);
+
+  return (
+    <Button
+      variant={ButtonVariant.plain}
+      onClick={
+        sortConfig[position] === 'asc'
+          ? () => setSortConfig({ ...sortConfig, [position]: 'desc' })
+          : () => setSortConfig({ ...sortConfig, [position]: 'asc' })
+      }
+      aria-label="Sort"
+      {...rest}
+    >
+      {sortConfig[position] === 'asc' ? <SortAsc /> : <SortDesc />}
+    </Button>
+  );
+};
+
+DualListSortButton.propTypes = {
+  position: PropTypes.oneOf(['left', 'right'])
+};
+
+export default DualListSortButton;

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

@@ -3,6 +3,8 @@ export { default as FormTemplate } from './files/form-template';
 export { default as Checkbox } from './files/checkbox';
 export { default as DatePicker } from './files/date-picker';
 export { default as DualListSelect } from './files/dual-list-select';
+export { default as DualListContext } from './files/dual-list-context';
+export { default as DualListSortButton } from './files/dual-list-sort-button';
 export { default as FieldArray } from './files/field-array';
 export { default as PlainText } from './files/plain-text';
 export { default as Radio } from './files/radio';