Dual List Selector

A dual list selector component that allows users to move items between two lists (available and selected). This component integrates with Formik for form management and provides advanced features like search, filtering, and loading states.

Features

• Move individual items between lists
• Move all items at once
• Checkbox selection for multiple items
• Search and filter functionality
• Loading states with spinner
• Empty state handling
• Formik integration for form management
• TypeScript support
• Accessible design using PatternFly components

Installation

npm install --save @rhc-shared-components/dual-list-selector

Usage

import React, { useState } from 'react';
import { Formik, Form } from 'formik';
import { SearchInput } from '@patternfly/react-core';
import { DualListSelectorComposable, Option } from '@rhc-shared-components/dual-list-selector';

const MyComponent = () => {
  const [searchAvailableValue, setSearchAvailableValue] = useState('');

  const availableOptions: Option[] = [
    { text: 'Option 1', selected: false, isVisible: true, isDisabled: false },
    { text: 'Option 2', selected: false, isVisible: true, isDisabled: false },
    { text: 'Option 3', selected: false, isVisible: true, isDisabled: false },
  ];

  const [filteredAvailableOptions, setFilteredAvailableOptions] = useState(availableOptions);

  const onFilterChange = (value: string) => {
    setSearchAvailableValue(value);
    const filtered = availableOptions.map(option => ({
      ...option,
      isVisible: value === "" || option.text.toLowerCase().includes(value.toLowerCase())
    }));
    setFilteredAvailableOptions(filtered);
  };

  const searchInput = (
    <SearchInput
      value={searchAvailableValue}
      onChange={(_event, value) => onFilterChange(value)}
      onClear={() => onFilterChange("")}
    />
  );

  return (
    <Formik
      initialValues={{ selectedOptions: [] }}
      onSubmit={(values) => {
        console.log('Form submitted with:', values);
      }}
    >
      <Form>
        <DualListSelectorComposable
          availableOptions={filteredAvailableOptions}
          chosenOptions={[]}
          searchInput={searchInput}
          searchAvailableValue={searchAvailableValue}
          name="selectedOptions"
        />
      </Form>
    </Formik>
  );
};

Props

DualListSelectorComposableProps

| Prop | Type | Required | Description | |------|------|----------|-------------| | availableOptions | Option[] | Yes | Array of options available for selection | | chosenOptions | Option[] | Yes | Array of currently chosen options | | searchInput | React.ReactNode | Yes | Search input component for filtering available options | | searchAvailableValue | string | Yes | Current search value for available options | | name | string | Yes | Formik field name for form integration |

Option

| Property | Type | Required | Description | |----------|------|----------|-------------| | text | string | Yes | Display text for the option | | selected | boolean | Yes | Whether the option is currently selected | | isVisible | boolean | Yes | Whether the option is visible (not filtered out) | | isDisabled | boolean | Yes | Whether the option is disabled |

Development

Running the example

cd components/dual-list-selector
npm install
npm run dev

Building the component

npm run build

Linting

npm run lint
npm run lint-fix

Dependencies

This component requires the following peer dependencies:

• React >= 16.13.1
• @patternfly/react-core >= 5.3.4
• formik >= 2.1.4

Important Notes

• This component requires Formik context to work properly. It must be wrapped in a <Formik> component.
• The component integrates with Formik's field management system using the name prop.
• Search functionality is handled externally - you need to implement filtering logic and pass filtered options.
• The component uses PatternFly's composable dual list selector components internally.

License

MIT