@patternfly/react-templates 1.1.0-prerelease.22 → 1.1.0-prerelease.24

package/src/components/Select/examples/SimpleSelectDemo.tsx

@@ -2,14 +2,20 @@ import React from 'react';
 import { Checkbox } from '@patternfly/react-core';
 import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
 
+const Options: SimpleSelectOption[] = [
+  { content: 'Option 1', value: 'Option1' },
+  { content: 'Option 2', value: 'Option2', description: 'Option with description' },
+  { content: 'Option 3', value: 'Option3' }
+];
+
 export const SelectSimpleDemo: React.FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string | undefined>('Option1');
 
-  const initialOptions: SimpleSelectOption[] = [
-    { content: 'Option 1', value: 'Option 1' },
-    { content: 'Option 2', value: 'Option 2', description: 'Option with description' },
-    { content: 'Option 3', value: 'Option 3' }
-  ];
+  const initialOptions = React.useMemo<SimpleSelectOption[]>(
+    () => Options.map((o) => ({ ...o, selected: o.value === selected })),
+    [selected]
+  );
 
   return (
     <React.Fragment>
@@ -20,7 +26,11 @@ export const SelectSimpleDemo: React.FunctionComponent = () => {
         onChange={(_event, checked) => setIsDisabled(checked)}
         style={{ marginBottom: 20 }}
       />
-      <SimpleSelect initialOptions={initialOptions} isDisabled={isDisabled} />
+      <SimpleSelect
+        initialOptions={initialOptions}
+        isDisabled={isDisabled}
+        onSelect={(_ev, selection) => setSelected(String(selection))}
+      />
     </React.Fragment>
   );
 };