Initial commit

src/components/ProSelect/ProInModalMultiSelect.tsx

@@ -0,0 +1,33 @@
+import { Select } from "antd";
+import { ProSelectProps } from "./types";
+
+const { Option } = Select;
+
+const ProInModalMultiSelect = ({
+  optionList,
+  valueField = "id",
+  displayField = "name",
+  ...rest
+}: ProSelectProps) => (
+  <Select
+    listHeight={150}
+    {...rest}
+    mode="multiple"
+    allowClear
+    optionFilterProp="label"
+  >
+    {optionList && Array.isArray(optionList)
+      ? optionList.map((option) => (
+          <Option
+            value={option[valueField]}
+            key={option[displayField]}
+            label={option[displayField]}
+          >
+            {option[displayField]}
+          </Option>
+        ))
+      : null}
+  </Select>
+);
+
+export default ProInModalMultiSelect;

src/components/ProSelect/ProInModalSelect.tsx

@@ -0,0 +1,41 @@
+import { Select } from "antd";
+import { ProSelectProps } from "./types";
+
+const { Option } = Select;
+
+/*
+ * use this component in modals instead of ProSelector
+ * , because overriding "getPopupContainer" to solve the scrolling problem causes the selector to go above the select input
+ * */
+
+const ProInModalSelect = ({
+  optionList,
+  valueField = "id",
+  displayField = "name",
+  fixedPosition,
+  spreadOptionProps,
+  ...rest
+}: ProSelectProps) => (
+  <Select
+    
+    // listItemHeight={4}
+    listHeight={150}
+    {...rest}
+    {...(fixedPosition
+      ? { getPopupContainer: (trigger) => trigger.parentNode }
+      : {})}
+  >
+    {optionList && Array.isArray(optionList)
+      ? optionList.map((option) => (
+          <Option
+            value={option[valueField]}
+            key={option[valueField]}
+            {...(spreadOptionProps ? { ...option } : {})}
+          >
+            {option[displayField]}
+          </Option>
+        ))
+      : null}
+  </Select>
+);
+export default ProInModalSelect;

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 }} />}
+      />
+    </>
+  );
+}

src/components/ProSelect/types.ts

@@ -0,0 +1,21 @@
+import { SelectProps } from "antd";
+import { ReactNode } from "react";
+
+export interface ProSelectProps extends SelectProps<any> {
+  optionList: any[] | undefined;
+  valueField?: string;
+  displayField?: string;
+  autoComplete?: boolean;
+  ref?: React.MutableRefObject<any>;
+  showDialog?: () => void;
+  // to spread all the option's properties; <Option id={id} name={name} ... etc >
+  // so you can access them via option param (second param in the onSelect func)
+  spreadOptionProps?: boolean;
+  fixedPosition?: boolean;
+  labelField?: string;
+  defaultOpen?: boolean;
+  withAdd?: boolean;
+  addingForm?: ReactNode;
+  formTitle?: string;
+  refetch?: any // to refetch data after success
+}