@patternfly/react-core 5.3.0-prerelease.2 → 5.3.0-prerelease.4

package/src/next/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+  Button,
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl,
+  SearchInput,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateActions
+} from '@patternfly/react-core';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
+export const DualListSelectorSearch: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
+  ]);
+
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+  const [availableFilter, setAvailableFilter] = React.useState('');
+  const [chosenFilter, setChosenFilter] = React.useState('');
+
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
+    }
+  };
+
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
+  ) => {
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
+  };
+
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach((option) => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
+  };
+
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
+    />
+  );
+
+  const buildEmptyState = (isAvailable: boolean) => (
+    <EmptyState variant={EmptyStateVariant.sm}>
+      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+
+  return (
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available options"
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        searchInput={buildSearchInput(true)}
+        listMinHeight="300px"
+      >
+        {availableFilter !== '' &&
+          availableOptions.filter((option) => option.isVisible).length === 0 &&
+          buildEmptyState(true)}
+
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`search-available-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper>
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some((option) => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
+          aria-label="Remove selected"
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DualListSelectorPane
+        title="Chosen options"
+        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        searchInput={buildSearchInput(false)}
+        listMinHeight="300px"
+        isChosen
+      >
+        {chosenFilter !== '' &&
+          chosenOptions.filter((option) => option.isVisible).length === 0 &&
+          buildEmptyState(false)}
+        {chosenOptions.filter((option) => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {chosenOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-search-chosen-option-${index}`}
+                  onOptionSelect={(e) => onOptionSelect(e, index, true)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
+      </DualListSelectorPane>
+    </DualListSelector>
+  );
+};

package/src/next/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import {
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl
+} from '@patternfly/react-core';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
+export const DualListSelectorBasic: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
+    }
+  };
+
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
+  ) => {
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
+  };
+
+  return (
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available options"
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
+        } options selected`}
+      >
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`tooltips-available-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper>
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some((option) => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+          tooltipContent="Add selected"
+          tooltipProps={{ position: 'top', 'aria-live': 'off' }}
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+          tooltipContent="Add all"
+          tooltipProps={{ position: 'right', 'aria-live': 'off' }}
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+          tooltipContent="Remove all"
+          tooltipProps={{ position: 'left', 'aria-live': 'off' }}
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
+          aria-label="Remove selected"
+          tooltipContent="Remove selected"
+          tooltipProps={{ position: 'bottom', 'aria-live': 'off' }}
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DualListSelectorPane
+        title="Chosen options"
+        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        isChosen
+      >
+        <DualListSelectorList>
+          {chosenOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`composable-tooltips-chosen-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, true)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+    </DualListSelector>
+  );
+};