Initial commit

src/components/ProSelect/ProSelect.tsx

@@ -0,0 +1,43 @@
+import { DownOutlined } from "@ant-design/icons";
+import { Select } from "antd";
+import { ProSelectProps } from "./types";
+
+export default function ProSelect({
+  optionList,
+  valueField = "id",
+  displayField = "name",
+  autoComplete,
+  showDialog,
+  ref,
+  defaultOpen = false,
+  ...rest
+}: ProSelectProps) {
+  return (
+    <>
+      <Select
+        listHeight={150}
+        getPopupContainer={(trigger) => trigger.parentNode} // to fix calender scrolling with page
+        {...rest}
+        {...(autoComplete
+          ? { showSearch: true, optionFilterProp: "children" }
+          : {})}
+        {...(ref ? { ref } : {})}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (e.detail === 2 && showDialog) {
+            showDialog();
+          }
+        }}
+        defaultOpen={defaultOpen}
+        options={optionList?.map((o) => ({
+          value: o[valueField],
+          key: o[valueField],
+          label: o[displayField],
+        }))}
+        showSearch
+        suffixIcon={<DownOutlined style={{ marginRight: 10 }} />}
+      />
+    </>
+  );
+}