@rhc-shared-components/dual-list-selector

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