feat(DragDrop next): add multiple drop zone support (#10614)

* feat(DragDrop-next): add multiple drop zone support * update dupe ids * pass 2 - fixed collision bugs and ref passthrough * refactor DragDropSort to use DragDropContainer * move DraggableObject to Container * updated import, remove unused context * remove green styling for dragover * fix overlay styling, glob import * lock * revert glob * update type
patternfly · Jul 15, 2024 · 8ff0c5e · 8ff0c5e
1 parent 8220451
commit 8ff0c5e
Show file tree

Hide file tree

Showing 13 changed files with 807 additions and 236 deletions.
diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
-import { PickOptional } from '../../helpers/typeUtils';
 
 const gridBreakpointClasses = {
   none: styles.modifiers.gridNone,
@@ -19,7 +18,7 @@ export enum DataListWrapModifier {
   breakWord = 'breakWord'
 }
 
-export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
+export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   /** Content rendered inside the DataList list */
   children?: React.ReactNode;
   /** Additional classes added to the DataList list */
@@ -38,6 +37,8 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
+  /** @hide custom ref of the DataList */
+  innerRef?: React.RefObject<HTMLUListElement>;
 }
 
 interface DataListContextProps {
@@ -51,71 +52,58 @@ export const DataListContext = React.createContext<Partial<DataListContextProps>
   isSelectable: false
 });
 
-class DataList extends React.Component<DataListProps> {
-  static displayName = 'DataList';
-  static defaultProps: PickOptional<DataListProps> = {
-    children: null,
-    className: '',
-    selectedDataListItemId: '',
-    isCompact: false,
-    gridBreakpoint: 'md',
-    wrapModifier: null
-  };
-  ref = React.createRef<HTMLUListElement>();
-
-  constructor(props: DataListProps) {
-    super(props);
-  }
+export const DataListBase: React.FunctionComponent<DataListProps> = ({
+  children = null,
+  className = '',
+  'aria-label': ariaLabel,
+  onSelectDataListItem,
+  selectedDataListItemId = '',
+  isCompact = false,
+  gridBreakpoint = 'md',
+  wrapModifier = null,
+  onSelectableRowChange,
+  innerRef,
+  ...props
+}: DataListProps) => {
+  const isSelectable = onSelectDataListItem !== undefined;
 
-  getIndex = (id: string) => Array.from(this.ref.current.children).findIndex((item) => item.id === id);
+  const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => {
+    onSelectDataListItem(event, id);
+  };
 
-  render() {
-    const {
-      className,
-      children,
-      'aria-label': ariaLabel,
-      onSelectDataListItem,
-      selectedDataListItemId,
-      isCompact,
-      wrapModifier,
-      gridBreakpoint,
-      onSelectableRowChange,
-      ...props
-    } = this.props;
-    const isSelectable = onSelectDataListItem !== undefined;
+  return (
+    <DataListContext.Provider
+      value={{
+        isSelectable,
+        selectedDataListItemId,
+        updateSelectedDataListItem,
+        onSelectableRowChange
+      }}
+    >
+      <ul
+        className={css(
+          styles.dataList,
+          isCompact && styles.modifiers.compact,
+          gridBreakpointClasses[gridBreakpoint],
+          wrapModifier && styles.modifiers[wrapModifier],
+          className
+        )}
+        style={props.style}
+        role="list"
+        aria-label={ariaLabel}
+        ref={innerRef}
+        {...props}
+      >
+        {children}
+      </ul>
+    </DataListContext.Provider>
+  );
+};
 
-    const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => {
-      onSelectDataListItem(event, id);
-    };
+DataListBase.displayName = 'DataListBase';
 
-    return (
-      <DataListContext.Provider
-        value={{
-          isSelectable,
-          selectedDataListItemId,
-          updateSelectedDataListItem,
-          onSelectableRowChange
-        }}
-      >
-        <ul
-          className={css(
-            styles.dataList,
-            isCompact && styles.modifiers.compact,
-            gridBreakpointClasses[gridBreakpoint],
-            wrapModifier && styles.modifiers[wrapModifier],
-            className
-          )}
-          style={props.style}
-          role="list"
-          aria-label={ariaLabel}
-          {...props}
-          ref={this.ref}
-        >
-          {children}
-        </ul>
-      </DataListContext.Provider>
-    );
-  }
-}
+export const DataList = React.forwardRef((props: DataListProps, ref: React.Ref<HTMLUListElement>) => (
+  <DataListBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+));
 
-export { DataList };
+DataList.displayName = 'DataList';
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorList.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorList.tsx
@@ -9,10 +9,13 @@ import { DualListSelectorListContext } from './DualListSelectorContext';
 export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
   /** Content rendered inside the dual list selector list */
   children?: React.ReactNode;
+  /** @hide forwarded ref */
+  innerRef?: React.RefObject<HTMLUListElement>;
 }
 
-export const DualListSelectorList: React.FunctionComponent<DualListSelectorListProps> = ({
+export const DualListSelectorListBase: React.FunctionComponent<DualListSelectorListProps> = ({
   children,
+  innerRef,
   ...props
 }: DualListSelectorListProps) => {
   const {
@@ -47,6 +50,7 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
         'aria-activedescendant': focusedOption
       })}
       aria-disabled={isDisabled ? 'true' : undefined}
+      ref={innerRef}
       {...props}
     >
       {options.length === 0
@@ -71,4 +75,12 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
     </ul>
   );
 };
+DualListSelectorListBase.displayName = 'DualListSelectorListBase';
+
+export const DualListSelectorList = React.forwardRef(
+  (props: DualListSelectorListProps, ref: React.Ref<HTMLUListElement>) => (
+    <DualListSelectorListBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+  )
+);
+
 DualListSelectorList.displayName = 'DualListSelectorList';