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"