rm unnecessary funct and update tests

patternfly · Feb 12, 2024 · c53c3c0 · c53c3c0
1 parent 28c8881
commit c53c3c0
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 46 deletions.
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorContext.ts b/packages/react-core/src/next/components/DualListSelector/DualListSelectorContext.ts
@@ -12,7 +12,6 @@ export const DualListSelectorListContext = React.createContext<{
   displayOption?: (option: React.ReactNode) => boolean;
   selectedOptions?: string[] | number[];
   id?: string;
-  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
   options?: React.ReactNode[];
   isDisabled?: boolean;
 }>({});

diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorList.tsx b/packages/react-core/src/next/components/DualListSelector/DualListSelectorList.tsx
@@ -15,24 +15,8 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
   children,
   ...props
 }: DualListSelectorListProps) => {
-  const {
-    setFocusedOption,
-    isTree,
-    ariaLabelledBy,
-    focusedOption,
-    displayOption,
-    selectedOptions,
-    id,
-    onOptionSelect,
-    options,
-    isDisabled
-  } = React.useContext(DualListSelectorListContext);
-
-  // only called when options are passed via options prop
-  const onOptionClick = (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => {
-    setFocusedOption(id);
-    onOptionSelect(e, index, id);
-  };
+  const { isTree, ariaLabelledBy, focusedOption, displayOption, selectedOptions, id, options, isDisabled } =
+    React.useContext(DualListSelectorListContext);
 
   const hasOptions = () =>
     options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
@@ -58,7 +42,6 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
                   key={index}
                   isSelected={(selectedOptions as number[]).indexOf(index) !== -1}
                   id={`${id}-option-${index}`}
-                  onOptionSelect={(e, id) => onOptionClick(e, index, id)}
                   orderIndex={index}
                   isDisabled={isDisabled}
                 >

diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorListItem.tsx b/packages/react-core/src/next/components/DualListSelector/DualListSelectorListItem.tsx
@@ -17,7 +17,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating the list item is currently selected. */
   isSelected?: boolean;
-  /** Callback fired when an option is selected.  */
+  /** Callback fired when an option is selected. */
   onOptionSelect?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => void;
   /** ID of the option. */
   id?: string;

diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorListWrapper.tsx b/packages/react-core/src/next/components/DualListSelector/DualListSelectorListWrapper.tsx
@@ -8,21 +8,19 @@ import { DualListSelectorContext, DualListSelectorListContext } from './DualList
 export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes applied to the dual list selector. */
   className?: string;
-  /** Anything that can be rendered inside of the list */
+  /** Anything that can be rendered inside of the list. */
   children?: React.ReactNode;
-  /** ID of the dual list selector list */
+  /** ID of the dual list selector list. */
   id?: string;
-  /** Accessibly label for the list */
+  /** Accessibly label for the list. */
   'aria-labelledby': string;
   /** @hide forwarded ref */
   innerRef?: React.RefObject<HTMLDivElement>;
   /** @hide Options to list in the pane. */
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */
   selectedOptions?: string[] | number[];
-  /** @hide Callback for when an option is selected. Optionally used only when options prop is provided. */
-  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
-  /** @hide Function to determine if an option should be displayed depending on a dynamically built filter value */
+  /** @hide Function to determine if an option should be displayed depending on a custom filter value. */
   displayOption?: (option: React.ReactNode) => boolean;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -35,7 +33,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   innerRef,
   options = [],
   selectedOptions = [],
-  onOptionSelect,
   displayOption,
   id = getUniqueId('dual-list-selector-list'),
   isDisabled = false,
@@ -46,8 +43,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   const menuRef = innerRef || ref;
   const { isTree } = React.useContext(DualListSelectorContext);
 
-  // sets up keyboard focus handling for the dual list selector menu child of the pane. This keyboard
-  // handling is applied whether the pane is dynamically built or passed via the children prop.
+  // Sets up keyboard focus handling for the dual list selector menu child of the pane.
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
@@ -109,7 +105,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
           selectedOptions,
           id,
           options,
-          onOptionSelect,
           isDisabled
         }}
       >

diff --git a/packages/react-core/src/next/components/DualListSelector/__tests__/DualListSelector.test.tsx b/packages/react-core/src/next/components/DualListSelector/__tests__/DualListSelector.test.tsx
@@ -1,31 +1,26 @@
 import { render } from '@testing-library/react';
 import { DualListSelectorPane } from '../../DualListSelector';
+import { SearchInput } from '../../../../components/SearchInput';
 import React from 'react';
 
 describe('DualListSelector', () => {
   test('basic', () => {
-    const { asFragment } = render(<DualListSelectorPane options={['Option 1', 'Option 2']} id="firstTest" />);
+    const { asFragment } = render(<DualListSelectorPane id="basicTest" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('with search inputs', () => {
-    const { asFragment } = render(
-      <DualListSelectorPane options={['Option 1', 'Option 2']} id="secondTest" isSearchable />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="searchTest" searchInput={<SearchInput />} />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('with custom status', () => {
-    const { asFragment } = render(
-      <DualListSelectorPane options={['Option 1', 'Option 2']} status="Test status1" id="thirdTest" />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="statusTest" status="Test status1" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('basic with disabled controls', () => {
-    const { asFragment } = render(
-      <DualListSelectorPane options={['Option 1', 'Option 2']} id="disabledTest" isDisabled />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="disabledTest" isDisabled />);
     expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/...c/next/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/...c/next/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`DualListSelector basic 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-dual-list-selector__pane pf-m-available"
-    options="Option 1,Option 2"
   >
     <div
       class="pf-v5-c-dual-list-selector__menu"
@@ -22,7 +21,6 @@ exports[`DualListSelector basic with disabled controls 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-dual-list-selector__pane pf-m-available"
-    options="Option 1,Option 2"
   >
     <div
       class="pf-v5-c-dual-list-selector__menu"
@@ -40,14 +38,13 @@ exports[`DualListSelector with custom status 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-dual-list-selector__pane pf-m-available"
-    options="Option 1,Option 2"
   >
     <div
       class="pf-v5-c-dual-list-selector__status"
     >
       <div
         class="pf-v5-c-dual-list-selector__status-text"
-        id="thirdTest-status"
+        id="statusTest-status"
       >
         Test status1
       </div>
@@ -68,8 +65,50 @@ exports[`DualListSelector with search inputs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-dual-list-selector__pane pf-m-available"
-    options="Option 1,Option 2"
   >
+    <div
+      class="pf-v5-c-dual-list-selector__tools"
+    >
+      <div
+        class="pf-v5-c-dual-list-selector__tools-filter"
+      >
+        <div
+          class="pf-v5-c-text-input-group"
+        >
+          <div
+            class="pf-v5-c-text-input-group__main pf-m-icon"
+          >
+            <span
+              class="pf-v5-c-text-input-group__text"
+            >
+              <span
+                class="pf-v5-c-text-input-group__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+              </span>
+              <input
+                aria-label="Search input"
+                class="pf-v5-c-text-input-group__text-input"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       class="pf-v5-c-dual-list-selector__menu"
       tabindex="0"