🌱 adding some pf5 select wrappers (#1490)

effort towards #1242 pushing a couple new components without any changes to other stuff yet so ian can use one with something he is working on. --------- Signed-off-by: gitdallas <dallas.nicol@gmail.com>
konveyor · Oct 26, 2023 · bd5a4b0 · bd5a4b0
1 parent ed39248
commit bd5a4b0
Show file tree

Hide file tree

Showing 5 changed files with 543 additions and 112 deletions.
diff --git a/client/src/app/components/SimpleSelect.tsx b/client/src/app/components/SimpleSelect.tsx
@@ -38,29 +38,32 @@ export const SimpleSelect: React.FC<ISimpleSelectProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <Select
-      menuAppendTo="parent" // prevent menu from being clipped by modal edges
-      maxHeight={200}
-      placeholderText={placeholderText}
-      toggleAriaLabel={toggleAriaLabel}
-      isOpen={isOpen}
-      onToggle={(_, isOpen) => setIsOpen(isOpen)}
-      onSelect={(_, selection) => {
-        onChange(selection);
-        if (props.variant !== "checkbox") {
-          setIsOpen(false);
-        }
-      }}
-      selections={value}
-      {...props}
-    >
-      {options.map((option, index) => (
-        <SelectOption
-          key={`${index}-${option.toString()}`}
-          value={option}
-          {...(typeof option === "object" && (option as OptionWithValue).props)}
-        />
-      ))}
-    </Select>
+    <>
+      <Select
+        menuAppendTo="parent" // prevent menu from being clipped by modal edges
+        maxHeight={200}
+        placeholderText={placeholderText}
+        toggleAriaLabel={toggleAriaLabel}
+        isOpen={isOpen}
+        onToggle={(_, isOpen) => setIsOpen(isOpen)}
+        onSelect={(_, selection) => {
+          onChange(selection);
+          if (props.variant !== "checkbox") {
+            setIsOpen(false);
+          }
+        }}
+        selections={value}
+        {...props}
+      >
+        {options.map((option, index) => (
+          <SelectOption
+            key={`${index}-${option.toString()}`}
+            value={option}
+            {...(typeof option === "object" &&
+              (option as OptionWithValue).props)}
+          />
+        ))}
+      </Select>
+    </>
   );
 };
diff --git a/client/src/app/components/SimpleSelectBasic.tsx b/client/src/app/components/SimpleSelectBasic.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+import {
+  Select,
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuToggleElement,
+} from "@patternfly/react-core";
+
+export interface ISimpleSelectBasicProps {
+  onChange: (selection: string) => void;
+  options: string[];
+  value?: string;
+  placeholderText?: string;
+}
+
+export const SimpleSelectBasic: React.FC<ISimpleSelectBasicProps> = ({
+  onChange,
+  options,
+  value,
+  placeholderText = "Select...",
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      isFullWidth
+      ref={toggleRef}
+      onClick={() => {
+        setIsOpen(!isOpen);
+      }}
+      isExpanded={isOpen}
+    >
+      {value || placeholderText || ""}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      isOpen={isOpen}
+      toggle={toggle}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      selected={value}
+      onSelect={(_, selection) => {
+        onChange(selection as string);
+        setIsOpen(false);
+      }}
+    >
+      <SelectList>
+        {options.map((option, index) => (
+          <SelectOption key={`${index}-${option.toString()}`} value={option}>
+            {option.toString()}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+};