The TransferList component in goobs-frontend is a user interface element that allows users to move items between two lists. It provides an intuitive way to select and transfer items from a source list to a destination list.

To use the TransferList component in your project, import it from the goobs-frontend package:

import { TransferList } from 'goobs-frontend';

Here's a basic example of how to use the TransferList component:

import React, { useState } from 'react';
import { TransferList } from 'goobs-frontend';

const TransferListExample: React.FC = () => {
  const [leftItems, setLeftItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [rightItems, setRightItems] = useState(['Item 4', 'Item 5']);

  const handleTransferChange = () => {
    // Handle the change in transfer items
    // Update the leftItems and rightItems state accordingly
  };

  return (
    <TransferList
      leftItems={leftItems}
      rightItems={rightItems}
      onChange={handleTransferChange}
    />
  );
};

export default TransferListExample;

The TransferList component accepts the following props:

• leftItems: readonly string[] (required) - The items in the left list.
• rightItems: readonly string[] (required) - The items in the right list.
• onChange: () => void (optional) - Callback function triggered when the transfer list changes.

1. Dual List Display: Displays two lists side by side, allowing users to visualize the source and destination lists.
2. Item Selection: Allows users to select multiple items in either list using checkboxes.
3. Transfer Controls: Provides buttons to transfer selected items between the lists, either individually or in bulk.
4. Keyboard Accessibility: Supports keyboard navigation and selection of items using arrow keys and spacebar.
5. Customizable Labels: Allows customization of labels for the left and right lists.

The TransferList component can be styled using Material-UI's styling system. You can customize the appearance of the lists, items, and transfer buttons using the sx prop or styled-components.

Here's an example of custom styling:

import React from 'react';
import { TransferList, styled } from 'goobs-frontend';

const StyledTransferList = styled(TransferList)(({ theme }) => ({
  '& .MuiList-root': {
    backgroundColor: theme.palette.background.paper,
    borderRadius: theme.shape.borderRadius,
  },
  '& .MuiListItem-root': {
    padding: theme.spacing(1),
  },
  '& .MuiButton-root': {
    marginTop: theme.spacing(2),
  },
}));

const TransferListExample: React.FC = () => {
  // ...

  return (
    <StyledTransferList
      leftItems={leftItems}
      rightItems={rightItems}
      onChange={handleTransferChange}
    />
  );
};

export default TransferListExample;

You can customize the rendering of individual items in the transfer list by providing a custom render function:

import React from 'react';
import { TransferList, ListItem, ListItemText, ListItemIcon } from 'goobs-frontend';
import { Star } from '@mui/icons-material';

const TransferListExample: React.FC = () => {
  // ...

  const renderItem = (item: string) => (
    <ListItem>
      <ListItemIcon>
        <Star />
      </ListItemIcon>
      <ListItemText primary={item} />
    </ListItem>
  );

  return (
    <TransferList
      leftItems={leftItems}
      rightItems={rightItems}
      onChange={handleTransferChange}
      renderItem={renderItem}
    />
  );
};

export default TransferListExample;

The TransferList component can be integrated with form libraries like Formik or React Hook Form to handle form state and validation:

import React from 'react';
import { TransferList } from 'goobs-frontend';
import { useFormik } from 'formik';

const TransferListExample: React.FC = () => {
  const formik = useFormik({
    initialValues: {
      leftItems: ['Item 1', 'Item 2', 'Item 3'],
      rightItems: ['Item 4', 'Item 5'],
    },
    onSubmit: (values) => {
      // Handle form submission
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <TransferList
        leftItems={formik.values.leftItems}
        rightItems={formik.values.rightItems}
        onChange={() => {
          // Update form values based on transfer list changes
          formik.setFieldValue('leftItems', /* updated left items */);
          formik.setFieldValue('rightItems', /* updated right items */);
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default TransferListExample;

1. Clear Labels: Use clear and concise labels for the left and right lists to indicate their purpose.
2. Intuitive Controls: Provide intuitive transfer controls, such as arrows or buttons, to facilitate item movement between the lists.
3. Keyboard Accessibility: Ensure that the transfer list is keyboard accessible, allowing users to navigate and select items using keyboard commands.
4. Error Handling: Implement appropriate error handling and validation when transferring items, such as preventing duplicate items or enforcing item limits.
5. Responsive Design: Consider the layout and behavior of the transfer list on different screen sizes and devices to ensure a consistent user experience.

When working with large lists or complex item rendering, consider the following performance optimizations:

1. Virtualization: Implement virtualization techniques to efficiently render large lists by only rendering visible items and dynamically loading items as the user scrolls.
2. Memoization: Use memoization techniques, such as React.memo or useMemo, to avoid unnecessary re-renders of list items when the data remains unchanged.
3. Debouncing: Apply debouncing or throttling techniques to limit the frequency of transfer list updates, especially when dealing with real-time or asynchronous data.

To ensure that the TransferList component is accessible, follow these guidelines:

1. Keyboard Navigation: Implement proper keyboard navigation and focus management, allowing users to navigate and select items using keyboard commands.
2. ARIA Attributes: Use appropriate ARIA attributes, such as aria-label, aria-selected, and role, to provide semantic information about the transfer list and its items to assistive technologies.
3. Focus Management: Manage focus properly when transferring items between lists, ensuring that the focus moves to the appropriate list and item after the transfer.
4. Error Messages: Provide clear and descriptive error messages or feedback to users when encountering issues during the transfer process.

1. Items Not Transferring: Ensure that the onChange callback is properly updating the leftItems and rightItems state based on the transfer actions. Debug and verify that the state is being updated correctly.
2. Duplicate Items: Implement logic to prevent duplicate items from being transferred between the lists. Validate and filter out any duplicates before updating the state.
3. Styling Issues: Check the custom styling applied to the TransferList component and its sub-components. Verify that the styles are properly scoped and not conflicting with other styles in the application.

• List: The underlying component used to render the lists in the TransferList.
• ListItem: The component used to represent individual items in the lists.
• Button: Used for the transfer controls between the lists.

Some potential future enhancements for the TransferList component could include:

1. Drag and Drop: Implement drag and drop functionality to allow users to transfer items between lists using intuitive drag and drop interactions.
2. Search and Filtering: Add search and filtering capabilities to enable users to quickly find and select specific items from large lists.
3. Customizable Transfer Controls: Provide options to customize the appearance and behavior of the transfer controls, such as using different icons or button styles.
4. Async Data Loading: Support asynchronous loading of list items from a server or API, allowing the transfer list to handle large datasets efficiently.
5. Multi-Level Lists: Extend the transfer list to support multi-level or nested lists, enabling the transfer of items between hierarchical structures.
6. Animation Effects: Introduce smooth animation effects when transferring items between lists to enhance the visual feedback and user experience.

These enhancements would further improve the usability, flexibility, and user experience of the TransferList component in future versions of goobs-frontend.