Add basic Autocomplete

Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU Reviewed By: lblasa Differential Revision: D48517919 fbshipit-source-id: ec6e723a595862b61722db9c5afd96138264dfdc
2023-08-30 07:26:35 -07:00
parent 839653c8fa
commit b780dc0598
4 changed files with 47 additions and 2 deletions
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
@@ -8,7 +8,47 @@
 */

 import * as React from 'react';
+import {AutoComplete, Input} from 'antd';
+import {PowerSearchConfig} from './PowerSearchTypes';

-export const PowerSearch: React.FC = () => {
-  return <></>;
+export {PowerSearchConfig};
+
+type PowerSearchProps = {
+  config: PowerSearchConfig;
+};
+
+export const PowerSearch: React.FC<PowerSearchProps> = () => {
+  return (
+    <AutoComplete
+      options={[
+        {
+          label: 'Group 1',
+          options: [
+            {
+              value: 'g1_val1',
+              label: 'Value1',
+            },
+            {
+              value: 'g1_val2',
+              label: 'Value2',
+            },
+          ],
+        },
+        {
+          label: 'Group 2',
+          options: [
+            {
+              value: 'g2_val1',
+              label: 'Value1',
+            },
+            {
+              value: 'g2_val2',
+              label: 'Value2',
+            },
+          ],
+        },
+      ]}>
+      <Input.Search size="large" />
+    </AutoComplete>
+  );
 };